refactor(styles): implement panel header mixins for consistent layout across components

Entire-Checkpoint: 84693b066142

libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss

@@ -1,3 +1,5 @@
+@use '../../../../../../ui/styles/panel-header' as panel;
+
 :host {
     display: flex;
     flex-direction: column;
@@ -16,52 +18,20 @@
 
 // ─── Sticky header bar — styled like a widget header ─────────────────────────
 .category-content-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 12px;
-    padding: 0 20px;
-    min-height: 52px;
-    flex-shrink: 0;
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    // distinct widget-header surface so it reads over the content below
-    background: var(--app-widget-header-bg, var(--mat-sys-surface-container-high));
-    border-bottom: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.05));
+    @include panel.standard-panel-header($sticky: true);
 }
 
 // ─── Category meta (title + subtitle) ────────────────────────────────────────
 .category-meta {
-    min-width: 0;
-    display: flex;
-    align-items: baseline;
-    gap: 10px;
-    flex: 1;
+    @include panel.standard-panel-meta();
 }
 
 .category-title {
-    margin: 0;
-    font-size: 0.95rem;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    // Explicit token so it never blends with the header background
-    color: var(--app-heading-color, var(--mat-sys-on-surface));
-    letter-spacing: -0.01em;
+    @include panel.standard-panel-title();
 }
 
 .category-subtitle {
-    white-space: nowrap;
-    font-size: 0.78rem;
-    font-weight: 500;
-    color: var(--app-body-color, var(--mat-sys-on-surface-variant));
-    // pill chip appearance
-    background: var(--mat-sys-surface-container);
-    padding: 2px 8px;
-    border-radius: 999px;
-    flex-shrink: 0;
+    @include panel.standard-panel-subtitle();
 }
 
 // ─── Paginator — flush right, no ghost background ────────────────────────────

libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.html

@@ -9,15 +9,16 @@
         [defaultWidth]="400"
         storageKey="sidebar-width"
     >
-        <div class="sidebar-header">
-            <div class="category-heading">
+        <div class="sidebar-header category-content-header">
+            <div class="category-meta">
                 <h2 class="category-title">
                     {{ selectedCategoryTitle() }}
                 </h2>
                 @if (visibleChannels().length > 0) {
-                    <span class="category-count">{{
-                        visibleChannels().length
-                    }}</span>
+                    <span class="category-subtitle"
+                        >{{ visibleChannels().length }}
+                        {{ visibleChannels().length === 1 ? 'item' : 'items' }}</span
+                    >
                 }
             </div>
         </div>
@@ -33,7 +34,7 @@
             } @else {
                 @for (item of visibleChannels(); track item.id ?? $index) {
                     <app-channel-list-item
-                        [name]="item.o_name || item.name"
+                        [name]="item.o_name || item.name || ''"
                         [logo]="item.logo"
                         [selected]="isSelectedChannel(item)"
                         [epgProgram]="

libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-live-stream-layout.component.scss

@@ -1,8 +1,41 @@
 @use '../../../../../../ui/styles/portal-layout' as portal;
+@use '../../../../../../ui/styles/panel-header' as panel;
 @use '../../../../../../ui/styles/portal-sidebar';
 
 @include portal.live-layout;
 
+.category-content-header {
+    @include panel.standard-panel-header(
+        $padding: 8px 12px,
+        $gap: 8px,
+        $min-height: 48px,
+        $border-color: var(--app-separator)
+    );
+    app-region: drag;
+
+    button {
+        app-region: no-drag;
+    }
+}
+
+.category-meta {
+    @include panel.standard-panel-meta(8px);
+}
+
+.category-title {
+    @include panel.standard-panel-title(0.94rem);
+    color: var(--mat-sys-on-surface);
+}
+
+.category-subtitle {
+    @include panel.standard-panel-subtitle(
+        $font-size: 0.72rem,
+        $padding: 2px 8px,
+        $color: var(--mat-sys-on-surface-variant),
+        $background: var(--mat-sys-surface-container)
+    );
+}
+
 .channels-list {
     flex: 1;
     overflow-y: auto;

libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html

@@ -68,7 +68,7 @@
         <section class="sidebar groups-content-panel">
             @if (selectedGroup(); as group) {
                 <header class="sidebar-header groups-content-header">
-                    <div class="category-heading">
+                    <div class="category-meta">
                         <h2 class="category-title">
                             @if (group.key) {
                                 {{ group.key | titlecase }}
@@ -76,7 +76,10 @@
                                 {{ 'CHANNELS.UNGROUPED' | translate }}
                             }
                         </h2>
-                        <span class="category-count">{{ group.count }}</span>
+                        <span class="category-subtitle">
+                            {{ group.count }}
+                            {{ group.count === 1 ? 'item' : 'items' }}
+                        </span>
                     </div>
                 </header>
 
@@ -103,7 +106,9 @@
                         [progressPercentage]="channel.progressPercentage"
                         [selected]="activeChannelUrl() === channel?.url"
                         [showFavoriteButton]="true"
-                        [isFavorite]="favoriteIds().has(channel?.url)"
+                        [isFavorite]="
+                            channel?.url ? favoriteIds().has(channel.url) : false
+                        "
                         (clicked)="onChannelClick(channel)"
                         (favoriteToggled)="onFavoriteToggle(channel, $event)"
                     />

libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss

@@ -1,4 +1,5 @@
 @use '../../../../../styles/portal-sidebar';
+@use '../../../../../styles/panel-header' as panel;
 @use '../../../../../../../apps/web/src/nav-list.scss';
 
 :host {
@@ -52,33 +53,21 @@
     color: var(--mat-sys-on-surface);
 }
 
+.groups-content-header {
+    @include panel.standard-panel-header();
+    border-top-left-radius: inherit;
+}
+
+.category-meta {
+    @include panel.standard-panel-meta();
+}
+
 .category-title {
-    margin: 0;
-    font-size: 0.94rem;
-    font-weight: 600;
-    letter-spacing: -0.01em;
-    color: var(--mat-sys-on-surface);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include panel.standard-panel-title(0.94rem);
 }
 
-.category-count {
-    flex-shrink: 0;
-    font-size: 0.72rem;
-    font-weight: 500;
-    color: var(--mat-sys-on-surface-variant);
-    background: var(--mat-sys-surface-container);
-    padding: 2px 8px;
-    border-radius: 999px;
-}
-
-.category-heading {
-    display: flex;
-    align-items: baseline;
-    gap: 8px;
-    flex: 1;
-    min-width: 0;
+.category-subtitle {
+    @include panel.standard-panel-subtitle();
 }
 
 .groups-nav-list {
@@ -108,7 +97,6 @@
 }
 
 .groups-content-panel > .groups-content-header {
-    border-bottom: none;
     border-top-left-radius: inherit;
 }
 

libs/ui/styles/_panel-header.scss

@@ -0,0 +1,60 @@
+@mixin standard-panel-header(
+    $sticky: false,
+    $padding: 0 20px,
+    $gap: 12px,
+    $min-height: 52px,
+    $z-index: 2,
+    $border-color: var(--app-widget-header-border, rgba(255, 255, 255, 0.05))
+) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: $gap;
+    padding: $padding;
+    min-height: $min-height;
+    flex-shrink: 0;
+    background: var(--app-widget-header-bg, var(--mat-sys-surface-container-high));
+    border-bottom: 1px solid $border-color;
+
+    @if $sticky {
+        position: sticky;
+        top: 0;
+        z-index: $z-index;
+    }
+}
+
+@mixin standard-panel-meta($gap: 10px) {
+    min-width: 0;
+    display: flex;
+    align-items: baseline;
+    gap: $gap;
+    flex: 1;
+}
+
+@mixin standard-panel-title($font-size: 0.95rem) {
+    margin: 0;
+    font-size: $font-size;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--app-heading-color, var(--mat-sys-on-surface));
+    letter-spacing: -0.01em;
+}
+
+@mixin standard-panel-subtitle(
+    $font-size: 0.78rem,
+    $font-weight: 500,
+    $padding: 2px 8px,
+    $color: var(--app-body-color, var(--mat-sys-on-surface-variant)),
+    $background: var(--mat-sys-surface-container)
+) {
+    white-space: nowrap;
+    font-size: $font-size;
+    font-weight: $font-weight;
+    color: $color;
+    background: $background;
+    padding: $padding;
+    border-radius: 999px;
+    flex-shrink: 0;
+}