feat(live-tv): collapsible sidebar in live tv views

Entire-Checkpoint: f957cd9849e0

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

@@ -53,6 +53,7 @@
                 "
                 (sidebarWidthRequested)="onSidebarWidthRequested($event)"
                 (sidebarWidthRequestEnded)="onSidebarWidthRequestEnded($event)"
+                (sidebarToggleRequested)="sidebarToggleRequested.emit()"
             />
         }
         @case ('favorites') {

libs/ui/components/src/lib/channel-list-container/channel-list-container.component.ts

@@ -136,6 +136,7 @@ export class ChannelListContainerComponent implements OnInit, OnDestroy {
     readonly sidebarWidth = input<number | null>(null);
     readonly sidebarWidthRequested = output<number>();
     readonly sidebarWidthRequestEnded = output<number>();
+    readonly sidebarToggleRequested = output<void>();
     readonly isWorkspaceLayout = isWorkspaceLayoutRoute(this.route);
     private readonly routeSearchTerm = queryParamSignal(
         this.route,

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

@@ -166,7 +166,7 @@
         <section class="sidebar groups-content-panel">
             @if (selectedGroup(); as group) {
                 <header class="sidebar-header groups-content-header">
-                    <div class="category-meta">
+                    <div class="category-meta category-meta--stacked">
                         <h2 class="category-title">
                             @if (group.key) {
                                 {{ group.key | titlecase }}
@@ -187,6 +187,20 @@
                     >
                         <mat-icon>sort_by_alpha</mat-icon>
                     </button>
+                    <button
+                        mat-icon-button
+                        type="button"
+                        class="groups-sidebar-toggle"
+                        [attr.aria-label]="
+                            'LAYOUT.HIDE_CHANNELS_LIST' | translate
+                        "
+                        [matTooltip]="
+                            'LAYOUT.TOGGLE_SIDEBAR_TOOLTIP' | translate
+                        "
+                        (click)="sidebarToggleRequested.emit()"
+                    >
+                        <mat-icon>chevron_left</mat-icon>
+                    </button>
                     <mat-menu #channelSortMenu="matMenu">
                         <button
                             mat-menu-item

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

@@ -165,6 +165,12 @@
 
 .category-meta {
     @include panel.standard-panel-meta();
+
+    &--stacked {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+    }
 }
 
 .category-title {

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

@@ -119,6 +119,9 @@ export class GroupsViewComponent {
     readonly sidebarWidthRequestEnded = output<number>();
     readonly hiddenGroupTitlesChanged = output<string[]>();
 
+    /** Emits when the user clicks the inline collapse toggle in the groups header */
+    readonly sidebarToggleRequested = output<void>();
+
     readonly isGroupSearchOpen = signal(false);
     readonly localGroupSearchTerm = signal('');
     readonly selectedGroupKey = signal<string | null>(null);