feat: separate channel carousel from video list functionality

- Added channelRailVisible state to UIStateService for channel carousel
- Connected TV button to toggle channel carousel (bottom rail)
- Video List button now shows "coming soon" toast message
- Updated video controls positioning: 200px desktop, 180px mobile when channel rail visible
- Updated side actions positioning to use channelRailVisible state
- Channel carousel and video list are now independent features

This properly separates the channel navigation carousel from the future video list feature,
ensuring the TV button controls the bottom channel rail as intended.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: JrPribs

src/app/pages/home/components/side-actions/side-actions.component.html

@@ -8,10 +8,10 @@
     'translate-x-20': initialAnimation(),
     'translate-x-0':
       !initialAnimation() &&
-      !uiState.carouselVisible() &&
+      !uiState.channelRailVisible() &&
       !playerState.hideUIOverlays(),
     'translate-x-[-280px]':
-      uiState.carouselVisible() && !playerState.hideUIOverlays(),
+      uiState.channelRailVisible() && !playerState.hideUIOverlays(),
     'translate-x-hidden': playerState.hideUIOverlays(),
     'opacity-0': !state().isUserActive || isFullscreenInactive(),
     'opacity-100': state().isUserActive && !isFullscreenInactive()

src/app/pages/home/components/side-actions/side-actions.component.ts

@@ -16,6 +16,7 @@ import {
   VolumeX,
   X,
 } from 'lucide-angular';
+import { MessageService } from 'primeng/api';
 import { ToastModule } from 'primeng/toast';
 
 import { ChannelService } from '../../../../services/channel/channel.service';
@@ -32,6 +33,7 @@ import { videoPlayerState } from '../../../../states/video-player.state';
     LucideAngularModule,
     ToastModule
   ],
+  providers: [MessageService],
   templateUrl: './side-actions.component.html',
   styleUrl: './side-actions.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -48,6 +50,7 @@ export class SideActionsComponent implements OnInit {
   readonly userActivityState = inject(UserActivityState);
   readonly uiState = inject(UIStateService);
   readonly destroyRef = inject(DestroyRef);
+  readonly messageService = inject(MessageService);
 
   // State
   readonly playerState = inject(videoPlayerState);
@@ -139,7 +142,13 @@ export class SideActionsComponent implements OnInit {
   handleToggleCarousel(event: MouseEvent) {
     event.preventDefault();
     this.markUserActive();
-    this.uiState.toggleCarousel();
+    // Show coming soon message for video list feature
+    this.messageService.add({
+      severity: 'info',
+      summary: 'Coming Soon',
+      detail: 'Video list feature is coming soon!',
+      life: 3000
+    });
   }
 
   handleCreateChannel(event: MouseEvent) {
@@ -155,8 +164,8 @@ export class SideActionsComponent implements OnInit {
   handleToggleChannelRail(event: MouseEvent) {
     event.preventDefault();
     this.markUserActive();
-    // TODO: Implement channel rail toggle functionality
-    // This should be managed through a proper service or state management
+    // Toggle the channel rail (bottom carousel)
+    this.uiState.toggleChannelRail();
   }
 
   // Check if we're in fullscreen and user is inactive

src/app/pages/home/components/video-controls/video-controls.component.ts

@@ -62,14 +62,14 @@ export class VideoControlsComponent {
   muted = this.playerState.muted;
   currentVideo = computed(() => this.channelsState.currentVideo());
 
-  // Dynamic positioning based on carousel visibility
+  // Dynamic positioning based on channel rail visibility
   bottomPosition = computed(() =>
-    this.uiState.carouselVisible() ? '160px' : '0px'
+    this.uiState.channelRailVisible() ? '200px' : '0px'
   );
 
-  // Mobile bottom position (smaller offset when carousel is visible)
+  // Mobile bottom position (smaller offset when channel rail is visible)
   mobileBottomPosition = computed(() =>
-    this.uiState.carouselVisible() ? '140px' : '0px'
+    this.uiState.channelRailVisible() ? '180px' : '0px'
   );
 
   // Local state for controls

src/app/pages/home/home.page.html

@@ -5,7 +5,7 @@
     <app-whytv-player></app-whytv-player>
   </div>
 
-  @if (uiState.carouselVisible()) {
+  @if (uiState.channelRailVisible()) {
   <whytv-channel-carousel
     class="absolute bottom-0 left-[100px] z-[90] w-[calc(100vw-200px)]"
   />

src/app/services/ui-state.service.ts

@@ -2,11 +2,13 @@ import { Injectable } from '@angular/core';
 import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
 
 interface UIState {
-  carouselVisible: boolean;
+  carouselVisible: boolean;  // For future video list feature
+  channelRailVisible: boolean;  // For channel carousel at bottom
 }
 
 const initialState: UIState = {
-  carouselVisible: false  // Default to hidden on load
+  carouselVisible: false,  // Default to hidden on load
+  channelRailVisible: false  // Default to hidden on load
 };
 
 @Injectable({
@@ -25,6 +27,18 @@ export class UIStateService extends signalStore(
       patchState(store, {
         carouselVisible: visible
       });
+    },
+
+    toggleChannelRail() {
+      patchState(store, {
+        channelRailVisible: !store.channelRailVisible()
+      });
+    },
+
+    setChannelRailVisible(visible: boolean) {
+      patchState(store, {
+        channelRailVisible: visible
+      });
     }
   }))
 ) {}