Merge pull request #50 from R0m1k3/antigravity

feat: add CategoryCarousel for horizontal item display and CategoryCh…

lib/core/theme/app_colors.dart

@@ -1,73 +1,58 @@
 import 'package:flutter/material.dart';
 
-/// XtremFlow Cinematic Minimalist Palette
+/// XtremFlow Apple TV Style Palette
 /// 
-/// A deep, dark, and neutral palette designed for content-first experiences.
+/// Ultra minimalist, focus-driven palette.
-/// Focuses on #0A0A0A backgrounds and subtle surfaces.
+/// - Background: Pure Black (#000000)
+/// - Focus/Active: Pure White (#FFFFFF)
+/// - Inactive: Grey (#9E9E9E)
+/// - Glass: Heavy blur with low opacity
 class AppColors {
   AppColors._();
 
   // ============ BACKGROUNDS ============
-  /// Pitch black for OLED/Main backgrounds
+  /// Pure black for that infinite depth look (OLED friendly)
-  static const Color background = Color(0xFF0A0A0A);
+  static const Color background = Color(0xFF000000);
   
-  /// Dark grey for cards/sheets
+  /// Very deep grey for surfaces that need to be distinct but subtle
-  static const Color surface = Color(0xFF141414);
+  static const Color surface = Color(0xFF121212);
   
-  /// Slightly lighter for hover states or active items
+  /// Focused element background (often white in tvOS for text, or bright accent)
-  static const Color surfaceLight = Color(0xFF1F1F1F);
+  static const Color focusColor = Color(0xFFFFFFFF);
-  
-  /// For inputs or secondary surfaces
-  static const Color surfaceVariant = Color(0xFF2A2A2A);
 
-  // ============ ACCENTS (MINIMALIST) ============
+  // ============ ACCENTS ============
-  /// Primary Brand Color (Electric Blue/Violet for modern feel)
+  /// Minimal white accent. In Apple TV, color is used sparingly.
-  /// Replacing the old Gradient Cyan with a solid, punchy color.
+  /// We keep a subtle blue only for specific indicators if needed.
-  static const Color primary = Color(0xFF3F51B5); // Indigo
+  static const Color primary = Color(0xFFFFFFFF); 
-  
+  static const Color accent = Color(0xFFE5E5E5);
-  /// Secondary accent
-  static const Color accent = Color(0xFF7986CB);
 
-  /// Primary Gradient (Subtle, for buttons only)
+  /// Primary Gradient (Subtle silver/white glow)
   static const LinearGradient primaryGradient = LinearGradient(
-    colors: [primary, accent],
+    colors: [Color(0xFFFFFFFF), Color(0xFFCCCCCC)],
     begin: Alignment.topLeft,
     end: Alignment.bottomRight,
   );
 
   // ============ TEXT ============
-  /// Pure white for high contrast headers
   static const Color textPrimary = Color(0xFFFFFFFF);
-  
+  static const Color textSecondary = Color(0xFF9E9E9E); // Medium Grey
-  /// Light grey for body text
+  static const Color textTertiary = Color(0xFF616161); // Darker Grey
-  static const Color textSecondary = Color(0xFFB3B3B3);
+
-  
-  /// Darker grey for hints/disabled
-  static const Color textTertiary = Color(0xFF808080);
-  
   // ============ FUNCTIONAL COLORS ============
-  static const Color success = Color(0xFF4CAF50);
+  static const Color success = Color(0xFF4DB6AC); // Teal-ish
-  static const Color warning = Color(0xFFFFC107);
+  static const Color warning = Color(0xFFFFB74D);
-  static const Color error = Color(0xFFCF6679);
+  static const Color error = Color(0xFFEF5350);
-  static const Color info = Color(0xFF2196F3);
+  static const Color live = Color(0xFFFF3B30); // Apple Red
-  static const Color live = Color(0xFFFF0000); // Standard Red for LIVE
 
   // ============ BORDERS ============
-  static const Color border = Color(0xFF333333);
+  // Borders are usually hidden until focused
+  static const Color border = Color(0xFF1F1F1F); 
+  static const Color focusBorder = Color(0xFFFFFFFF);
 
   // ============ GLASSMORPHISM ============
-  static final Color glassBackground = const Color(0xFF1E1E1E).withOpacity(0.7);
+  // Apple TV uses this heavily for headers/overlays
-  static final Color glassBorder = const Color(0xFFFFFFFF).withOpacity(0.1);
+  static final Color glassBackground = const Color(0xFF1E1E1E).withOpacity(0.6);
-
+  static final Color glassBorder = const Color(0xFFFFFFFF).withOpacity(0.15);
-  // ============ CATEGORY COLORS (MUTED) ============
-  static const List<Color> categoryColors = [
-    Color(0xFF5C6BC0), // Indigo
-    Color(0xFFAB47BC), // Purple
-    Color(0xFFEF5350), // Red
-    Color(0xFF26A69A), // Teal
-    Color(0xFFFFA726), // Orange
-    Color(0xFF78909C), // Blue Grey
-  ];
 
   // ============ THEME SCHEMES ============
   static ColorScheme get darkColorScheme => const ColorScheme.dark(
@@ -76,23 +61,22 @@ class AppColors {
     surface: surface,
     background: background,
     error: error,
-    onPrimary: Colors.white,
+    onPrimary: Colors.black, // White text on buttons -> Black text on White buttons
-    onSecondary: Colors.white,
+    onSecondary: Colors.black,
     onSurface: textPrimary,
     onError: Colors.white,
     brightness: Brightness.dark,
   );
 
-  // Minimalist Light Scheme (if ever toggled)
   static ColorScheme get lightColorScheme => const ColorScheme.light(
-    primary: primary,
+    primary: Colors.black,
-    secondary: accent,
+    secondary: Colors.grey,
-    surface: Color(0xFFF5F5F5),
+    surface: Color(0xFFF2F2F7),
     background: Colors.white,
     error: error,
     onPrimary: Colors.white,
-    onSecondary: Colors.black,
+    onSecondary: Colors.white,
-    onSurface: Color(0xFF121212),
+    onSurface: Colors.black,
     onError: Colors.white,
     brightness: Brightness.light,
   );

lib/core/theme/app_theme.dart

@@ -2,9 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'app_colors.dart';
 
-/// XtremFlow Cinematic Minimalist Theme
+/// XtremFlow Apple TV Theme
 /// 
-/// Refined, content-first theme. Less noise, more focus.
+/// Focus-driven, immersive, minimal.
 class AppTheme {
   AppTheme._();
 
@@ -15,15 +15,20 @@ class AppTheme {
   static const double spacing16 = 16.0;
   static const double spacing24 = 24.0;
   static const double spacing32 = 32.0;
+  static const double spacing48 = 48.0; // Larger spacing for TV feel
 
-  // ============ RADIUS (Tighter for professional look) ============
+  // ============ RADIUS ============
-  static const double radiusSm = 6.0;
+  static const double radiusSm = 8.0;
-  static const double radiusMd = 8.0;
+  static const double radiusMd = 12.0;
-  static const double radiusLg = 12.0;
+  static const double radiusLg = 16.0;
-  static const double radiusXl = 16.0;
+  static const double radiusXl = 24.0;
-  static const double radiusFull = 999.0;
 
-  // ============ DARK THEME (Main) ============
+  // ============ ANIMATION ============
+  static const Duration durationFast = Duration(milliseconds: 200);
+  static const Duration durationNormal = Duration(milliseconds: 300);
+  static const Curve curveDefault = Curves.easeOutCubic;
+
+  // ============ DARK THEME (TV Main) ============
   static ThemeData get darkTheme {
     final baseTheme = ThemeData.dark(useMaterial3: true);
     
@@ -31,163 +36,114 @@ class AppTheme {
       colorScheme: AppColors.darkColorScheme,
       scaffoldBackgroundColor: AppColors.background,
       
-      // AppBar: Minimalist, blends with background
+      // AppBar: Totally transparent, content floats below
       appBarTheme: AppBarTheme(
-        backgroundColor: AppColors.background, // Seamless
+        backgroundColor: Colors.transparent, 
         surfaceTintColor: Colors.transparent,
         elevation: 0,
-        centerTitle: false,
+        centerTitle: true,
-        iconTheme: const IconThemeData(color: AppColors.textPrimary),
+        iconTheme: const IconThemeData(color: AppColors.textSecondary),
         titleTextStyle: GoogleFonts.inter(
-          fontSize: 20,
+          fontSize: 16,
           fontWeight: FontWeight.w600,
-          color: AppColors.textPrimary,
+          color: AppColors.textSecondary,
+          letterSpacing: 0.5,
         ),
       ),
       
-      // Navigation: Simple, functional
+      // NavigationBar: Minimal, often just icons or text
       navigationBarTheme: NavigationBarThemeData(
-        backgroundColor: AppColors.background,
+        backgroundColor: Colors.transparent,
-        surfaceTintColor: Colors.transparent,
+        indicatorColor: Colors.transparent,
-        indicatorColor: AppColors.primary.withOpacity(0.15),
+        labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
+        height: 80,
+        iconTheme: WidgetStateProperty.resolveWith((states) {
+           final isSelected = states.contains(WidgetState.selected);
+           // Selected: White and slightly larger/glowing
+           // Unselected: Grey and smaller
+           return IconThemeData(
+             color: isSelected ? AppColors.focusColor : AppColors.textSecondary,
+             size: isSelected ? 28 : 24,
+           );
+        }),
         labelTextStyle: WidgetStateProperty.resolveWith((states) {
           final isSelected = states.contains(WidgetState.selected);
           return GoogleFonts.inter(
             fontSize: 12,
             fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
-            color: isSelected ? AppColors.textPrimary : AppColors.textSecondary,
+            color: isSelected ? AppColors.focusColor : AppColors.textSecondary,
           );
         }),
-        iconTheme: WidgetStateProperty.resolveWith((states) {
-           final isSelected = states.contains(WidgetState.selected);
-           return IconThemeData(
-             color: isSelected ? AppColors.textPrimary : AppColors.textSecondary,
-           );
-        }),
       ),
       
-      // NavigationRail (Desktop)
+      // Cards: No background by default, they pop on focus
-      navigationRailTheme: NavigationRailThemeData(
-        backgroundColor: AppColors.background,
-        indicatorColor: AppColors.primary.withOpacity(0.15),
-        selectedIconTheme: const IconThemeData(color: AppColors.textPrimary),
-        unselectedIconTheme: const IconThemeData(color: AppColors.textSecondary),
-        selectedLabelTextStyle: GoogleFonts.inter(
-          color: AppColors.textPrimary,
-          fontWeight: FontWeight.w600,
-          fontSize: 12,
-        ),
-        unselectedLabelTextStyle: GoogleFonts.inter(
-          color: AppColors.textSecondary,
-          fontWeight: FontWeight.w500,
-          fontSize: 12,
-        ),
-      ),
-      
-      // Cards: Flat, subtle border
       cardTheme: CardThemeData(
-        color: AppColors.surface,
+        color: Colors.transparent, // Background comes from container in widget
-        surfaceTintColor: Colors.transparent,
         elevation: 0,
+        margin: EdgeInsets.zero,
         shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(radiusMd),
-          side: const BorderSide(color: AppColors.border, width: 1),
         ),
-        margin: EdgeInsets.zero,
       ),
       
-      // Inputs: Clean, filled
+      // Inputs: Minimal, dark pills
       inputDecorationTheme: InputDecorationTheme(
         filled: true,
-        fillColor: AppColors.surfaceVariant,
+        fillColor: AppColors.surface,
-        contentPadding: const EdgeInsets.all(spacing16),
+        contentPadding: const EdgeInsets.symmetric(horizontal: spacing24, vertical: spacing16),
         border: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(radiusSm),
+          borderRadius: BorderRadius.circular(radiusFull), // Pill shape
-          borderSide: const BorderSide(color: AppColors.border),
+          borderSide: BorderSide.none,
         ),
         enabledBorder: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(radiusSm),
+          borderRadius: BorderRadius.circular(radiusFull),
-          borderSide: const BorderSide(color: AppColors.border),
+          borderSide: BorderSide.none,
         ),
         focusedBorder: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(radiusSm),
+          borderRadius: BorderRadius.circular(radiusFull),
-          borderSide: const BorderSide(color: AppColors.primary),
+          borderSide: const BorderSide(color: AppColors.focusColor, width: 2),
         ),
         hintStyle: GoogleFonts.inter(color: AppColors.textTertiary),
-        labelStyle: GoogleFonts.inter(color: AppColors.textSecondary),
       ),
       
-      // Buttons: Sharp, reliable
+      // Buttons: White pill buttons usually
       filledButtonTheme: FilledButtonThemeData(
         style: FilledButton.styleFrom(
-          backgroundColor: AppColors.primary,
+          backgroundColor: AppColors.focusColor, // White buttons
-          foregroundColor: Colors.white,
+          foregroundColor: Colors.black, // Black text
+          elevation: 0,
           shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(radiusSm),
+            borderRadius: BorderRadius.circular(radiusFull),
           ),
-          textStyle: GoogleFonts.inter(fontWeight: FontWeight.w600),
+          padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 20),
-          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
+          textStyle: GoogleFonts.inter(
+            fontWeight: FontWeight.w700,
+            fontSize: 16,
+          ),
+        ).copyWith(
+          overlayColor: WidgetStateProperty.all(Colors.black.withOpacity(0.1)),
         ),
       ),
 
-      outlinedButtonTheme: OutlinedButtonThemeData(
-        style: OutlinedButton.styleFrom(
-          foregroundColor: AppColors.textPrimary,
-          side: const BorderSide(color: AppColors.border),
-          shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(radiusSm),
-          ),
-          textStyle: GoogleFonts.inter(fontWeight: FontWeight.w600),
-          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
-        ),
-      ),
-
-      // Text
       textTheme: TextTheme(
         displayLarge: GoogleFonts.inter(color: AppColors.textPrimary, fontWeight: FontWeight.bold),
-        displayMedium: GoogleFonts.inter(color: AppColors.textPrimary, fontWeight: FontWeight.bold),
-        headlineMedium: GoogleFonts.inter(color: AppColors.textPrimary, fontWeight: FontWeight.w600),
         titleLarge: GoogleFonts.inter(color: AppColors.textPrimary, fontWeight: FontWeight.w600),
-        titleMedium: GoogleFonts.inter(color: AppColors.textPrimary, fontWeight: FontWeight.w500),
         bodyLarge: GoogleFonts.inter(color: AppColors.textSecondary, fontSize: 16),
         bodyMedium: GoogleFonts.inter(color: AppColors.textSecondary, fontSize: 14),
       ),
     );
   }
 
-  // ============ LIGHT THEME (Minimalist) ============
+  static const double radiusFull = 999.0;
-  static ThemeData get lightTheme {
-     final baseTheme = ThemeData.light(useMaterial3: true);
-     final colors = AppColors.lightColorScheme;
 
-     return baseTheme.copyWith(
+  // Light theme stub (TV interfaces rarely use light mode, but good for completeness)
-       colorScheme: colors,
+  static ThemeData get lightTheme => ThemeData.light(useMaterial3: true).copyWith(
-       scaffoldBackgroundColor: colors.background,
+    colorScheme: AppColors.lightColorScheme,
-       appBarTheme: AppBarTheme(
+    inputDecorationTheme: InputDecorationTheme(
-         backgroundColor: colors.background,
+        filled: true,
-         foregroundColor: colors.onSurface,
+        fillColor: const Color(0xFFF2F2F7),
-         elevation: 0,
+        border: OutlineInputBorder(
-         centerTitle: false,
+            borderRadius: BorderRadius.circular(radiusFull),
-         iconTheme: IconThemeData(color: colors.onSurface),
+            borderSide: BorderSide.none)),
-         titleTextStyle: GoogleFonts.inter(
+  );
-          fontSize: 20,
-          fontWeight: FontWeight.w600,
-          color: colors.onSurface,
-        ),
-       ),
-       cardTheme: CardThemeData(
-         color: colors.surface,
-         elevation: 0,
-         shape: RoundedRectangleBorder(
-           borderRadius: BorderRadius.circular(radiusMd),
-           side: BorderSide(color: Colors.grey.shade300),
-         ),
-       ),
-       textTheme: TextTheme(
-         bodyLarge: GoogleFonts.inter(color: colors.onSurface),
-         bodyMedium: GoogleFonts.inter(color: colors.onSurfaceVariant),
-       ),
-       // Can expand light theme details later if needed
-     );
-  }
 }

lib/features/iptv/screens/dashboard_screen.dart

@@ -1,15 +1,18 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:google_fonts/google_fonts.dart';
 import '../../../core/models/playlist_config.dart';
 import '../../../core/theme/app_colors.dart';
 import '../../../core/theme/app_theme.dart';
-import '../../../core/utils/responsive_layout.dart';
 import '../widgets/live_tv_tab.dart';
 import '../widgets/movies_tab.dart';
 import '../widgets/series_tab.dart';
 import '../widgets/settings_tab.dart';
 
-/// Main dashboard with responsive navigation (Rail for desktop, Bar for mobile)
+/// Apple TV Style Dashboard
+/// 
+/// Uses a floating Top Bar for navigation instead of a sidebar.
+/// Content flows underneath the top bar.
 class DashboardScreen extends ConsumerStatefulWidget {
   final PlaylistConfig playlist;
 
@@ -22,181 +25,156 @@ class DashboardScreen extends ConsumerStatefulWidget {
   ConsumerState<DashboardScreen> createState() => _DashboardScreenState();
 }
 
-class _DashboardScreenState extends ConsumerState<DashboardScreen> {
+class _DashboardScreenState extends ConsumerState<DashboardScreen> with SingleTickerProviderStateMixin {
-  int _selectedIndex = 0;
+  late TabController _tabController;
-
+  
-  late final List<Widget> _tabs;
+  final List<String> _tabs = ['Live TV', 'Films', 'Séries', 'Réglages'];
-
+  final List<IconData> _icons = [Icons.live_tv, Icons.movie, Icons.tv, Icons.settings];
-  static const List<NavigationDestination> _destinations = [
-    NavigationDestination(
-      icon: Icon(Icons.live_tv_outlined),
-      selectedIcon: Icon(Icons.live_tv),
-      label: 'TV Live',
-    ),
-    NavigationDestination(
-      icon: Icon(Icons.movie_outlined),
-      selectedIcon: Icon(Icons.movie),
-      label: 'Films',
-    ),
-    NavigationDestination(
-      icon: Icon(Icons.tv_outlined),
-      selectedIcon: Icon(Icons.tv),
-      label: 'Séries',
-    ),
-    NavigationDestination(
-      icon: Icon(Icons.settings_outlined),
-      selectedIcon: Icon(Icons.settings),
-      label: 'Paramètres',
-    ),
-  ];
-
-  static const List<NavigationRailDestination> _railDestinations = [
-    NavigationRailDestination(
-      icon: Icon(Icons.live_tv_outlined),
-      selectedIcon: Icon(Icons.live_tv),
-      label: Text('TV Live'),
-    ),
-    NavigationRailDestination(
-      icon: Icon(Icons.movie_outlined),
-      selectedIcon: Icon(Icons.movie),
-      label: Text('Films'),
-    ),
-    NavigationRailDestination(
-      icon: Icon(Icons.tv_outlined),
-      selectedIcon: Icon(Icons.tv),
-      label: Text('Séries'),
-    ),
-    NavigationRailDestination(
-      icon: Icon(Icons.settings_outlined),
-      selectedIcon: Icon(Icons.settings),
-      label: Text('Paramètres'),
-    ),
-  ];
 
   @override
   void initState() {
     super.initState();
-    _tabs = [
+    _tabController = TabController(length: 4, vsync: this);
-      LiveTVTab(playlist: widget.playlist),
+  }
-      MoviesTab(playlist: widget.playlist),
+
-      SeriesTab(playlist: widget.playlist),
+  @override
-      const SettingsTab(),
+  void dispose() {
-    ];
+    _tabController.dispose();
+    super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    final isDesktop = ResponsiveLayout.isDesktop(context);
+    // Glassmorphism Top Bar
-
     return Scaffold(
-      appBar: _buildAppBar(),
+      extendBodyBehindAppBar: true, // Content behind app bar
-      body: isDesktop
+      backgroundColor: AppColors.background,
-          ? _buildDesktopLayout()
+      appBar: PreferredSize(
-          : _buildMobileLayout(),
+        preferredSize: const Size.fromHeight(80),
-      bottomNavigationBar: isDesktop ? null : _buildBottomNav(),
+        child: Container(
-    );
+          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
-  }
+          decoration: BoxDecoration(
-
+            gradient: LinearGradient(
-  PreferredSizeWidget _buildAppBar() {
+              begin: Alignment.topCenter,
-    return AppBar(
+              end: Alignment.bottomCenter,
-      title: Row(
+              colors: [
-        children: [
+                Colors.black.withOpacity(0.9), // Darker at top
-          // Logo
+                Colors.transparent,
-          Container(
+              ],
-            width: 32,
-            height: 32,
-            decoration: BoxDecoration(
-              gradient: AppColors.primaryGradient,
-              borderRadius: BorderRadius.circular(8),
-            ),
-            child: const Icon(
-              Icons.live_tv,
-              color: Colors.black,
-              size: 18,
             ),
           ),
-          const SizedBox(width: 12),
+          child: Row(
-          // Title
-          Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              const Text(
+              // Logo Area
-                'XtremFlow',
+              _buildLogo(),
-                style: TextStyle(
+              
-                  fontSize: 18,
+              const Spacer(),
-                  fontWeight: FontWeight.w700,
+              
+              // Centered Navigation Tabs (Pills)
+              Container(
+                height: 50,
+                decoration: BoxDecoration(
+                  color: Colors.white.withOpacity(0.1),
+                  borderRadius: BorderRadius.circular(30),
+                  border: Border.all(color: Colors.white.withOpacity(0.05)),
+                ),
+                child: TabBar(
+                  controller: _tabController,
+                  isScrollable: true,
+                  dividerColor: Colors.transparent,
+                  indicator: BoxDecoration(
+                    color: Colors.white,
+                    borderRadius: BorderRadius.circular(25),
+                  ),
+                  indicatorSize: TabBarIndicatorSize.tab,
+                  indicatorPadding: const EdgeInsets.all(4),
+                  labelColor: Colors.black, // Active text color (on white)
+                  unselectedLabelColor: Colors.grey,
+                  labelStyle: GoogleFonts.inter(fontWeight: FontWeight.w700, fontSize: 13),
+                  overlayColor: WidgetStateProperty.all(Colors.transparent),
+                  tabs: List.generate(_tabs.length, (index) {
+                    return Tab(
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(horizontal: 16),
+                        child: Row(
+                          children: [
+                            Icon(_icons[index], size: 18),
+                            const SizedBox(width: 8),
+                            Text(_tabs[index]),
+                          ],
+                        ),
+                      ),
+                    );
+                  }),
                 ),
               ),
-              Text(
+              
-                widget.playlist.name,
+              const Spacer(),
-                style: TextStyle(
+              
-                  fontSize: 11,
+              // Search / Profile (Right Side)
-                  color: AppColors.textSecondary,
+              IconButton(
-                  fontWeight: FontWeight.w400,
+                icon: const Icon(Icons.search, color: Colors.white),
-                ),
+                onPressed: () {
+                   // Global search trigger
+                },
+              ),
+              const SizedBox(width: 8),
+              const CircleAvatar(
+                radius: 16,
+                backgroundColor: Colors.white24,
+                child: Icon(Icons.person, size: 18, color: Colors.white),
               ),
             ],
           ),
+        ),
+      ),
+      body: TabBarView(
+        controller: _tabController,
+        physics: const NeverScrollableScrollPhysics(), // Disable swipe to avoid gesture conflicts
+        children: [
+          // Padding top to account for the transparent AppBar
+          Padding(padding: const EdgeInsets.only(top: 80), child: LiveTVTab(playlist: widget.playlist)),
+          Padding(padding: const EdgeInsets.only(top: 80), child: MoviesTab(playlist: widget.playlist)),
+          Padding(padding: const EdgeInsets.only(top: 80), child: SeriesTab(playlist: widget.playlist)),
+          const Padding(padding: EdgeInsets.only(top: 80), child: SettingsTab()),
         ],
       ),
-      actions: [
-        // Search button
-        IconButton(
-          icon: const Icon(Icons.search),
-          onPressed: () {
-            // TODO: Global search
-          },
-        ),
-        const SizedBox(width: 8),
-      ],
     );
   }
 
-  Widget _buildDesktopLayout() {
+  Widget _buildLogo() {
     return Row(
       children: [
-        // Navigation Rail
+        Container(
-        NavigationRail(
+          width: 36,
-          selectedIndex: _selectedIndex,
+          height: 36,
-          onDestinationSelected: (index) {
+          decoration: BoxDecoration(
-            setState(() {
+            gradient: const LinearGradient(colors: [Color(0xFF43cea2), Color(0xFF185a9d)]), // Green to Blue
-              _selectedIndex = index;
+            borderRadius: BorderRadius.circular(10),
-            });
-          },
-          extended: true,
-          minExtendedWidth: 180,
-          leading: const SizedBox(height: AppTheme.spacing16),
-          destinations: _railDestinations,
-        ),
-        // Divider
-        const VerticalDivider(thickness: 1, width: 1),
-        // Content
-        Expanded(
-          child: AnimatedSwitcher(
-            duration: AppTheme.durationNormal,
-            child: _tabs[_selectedIndex],
           ),
+          child: const Icon(Icons.play_arrow_rounded, color: Colors.white),
+        ),
+        const SizedBox(width: 12),
+        Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              'Xtrem',
+              style: GoogleFonts.inter(fontWeight: FontWeight.w800, fontSize: 16, color: Colors.white),
+            ),
+            Text(
+              'Flow',
+              style: GoogleFonts.inter(
+                fontWeight: FontWeight.w300, 
+                fontSize: 16, 
+                color: Colors.white.withOpacity(0.8),
+                height: 0.8
+              ),
+            ),
+          ],
         ),
       ],
     );
   }
-
-  Widget _buildMobileLayout() {
-    return AnimatedSwitcher(
-      duration: AppTheme.durationNormal,
-      child: _tabs[_selectedIndex],
-    );
-  }
-
-  Widget _buildBottomNav() {
-    return NavigationBar(
-      selectedIndex: _selectedIndex,
-      onDestinationSelected: (index) {
-        setState(() {
-          _selectedIndex = index;
-        });
-      },
-      destinations: _destinations,
-    );
-  }
 }

lib/features/iptv/widgets/category_carousel.dart

@@ -35,7 +35,7 @@ class CategoryCarousel<T> extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
-    final isDark = theme.brightness == Brightness.dark;
+    final colorScheme = theme.colorScheme;
     
     if (items.isEmpty) {
       return const SizedBox.shrink();
@@ -58,9 +58,7 @@ class CategoryCarousel<T> extends StatelessWidget {
                     style: TextStyle(
                       fontSize: 18,
                       fontWeight: FontWeight.w700,
-                      color: isDark
+                      color: colorScheme.onSurface,
-                          ? AppColors.textPrimaryDark
-                          : AppColors.textPrimaryLight,
                     ),
                   ),
                   if (itemCount != null) ...[
@@ -71,15 +69,15 @@ class CategoryCarousel<T> extends StatelessWidget {
                         vertical: 2,
                       ),
                       decoration: BoxDecoration(
-                        color: AppColors.primary.withOpacity(0.15),
+                        color: colorScheme.primary.withOpacity(0.15),
                         borderRadius: BorderRadius.circular(12),
                       ),
                       child: Text(
                         '$itemCount',
-                        style: const TextStyle(
+                        style: TextStyle(
                           fontSize: 12,
                           fontWeight: FontWeight.w600,
-                          color: AppColors.primary,
+                          color: colorScheme.primary,
                         ),
                       ),
                     ),
@@ -97,14 +95,14 @@ class CategoryCarousel<T> extends StatelessWidget {
                         style: TextStyle(
                           fontSize: 13,
                           fontWeight: FontWeight.w600,
-                          color: AppColors.primary,
+                          color: colorScheme.primary,
                         ),
                       ),
                       const SizedBox(width: 4),
-                      const Icon(
+                      Icon(
                         Icons.arrow_forward_ios_rounded,
                         size: 12,
-                        color: AppColors.primary,
+                        color: colorScheme.primary,
                       ),
                     ],
                   ),
@@ -173,7 +171,8 @@ class CategoryChipButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final isDark = Theme.of(context).brightness == Brightness.dark;
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
     
     return GestureDetector(
       onTap: onTap,
@@ -184,12 +183,12 @@ class CategoryChipButton extends StatelessWidget {
           gradient: isSelected ? AppColors.primaryGradient : null,
           color: isSelected
               ? null
-              : (isDark ? AppColors.surfaceVariantDark : AppColors.surfaceVariantLight),
+              : colorScheme.surfaceContainerHighest,
           borderRadius: BorderRadius.circular(20),
           border: Border.all(
             color: isSelected
                 ? Colors.transparent
-                : (isDark ? AppColors.borderDark : AppColors.borderLight),
+                : colorScheme.outlineVariant,
           ),
         ),
         child: Row(
@@ -200,8 +199,8 @@ class CategoryChipButton extends StatelessWidget {
                 icon,
                 size: 16,
                 color: isSelected
-                    ? Colors.white
+                    ? colorScheme.onPrimary
-                    : (isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight),
+                    : colorScheme.onSurfaceVariant,
               ),
               const SizedBox(width: 6),
             ],
@@ -211,8 +210,8 @@ class CategoryChipButton extends StatelessWidget {
                 fontSize: 13,
                 fontWeight: FontWeight.w600,
                 color: isSelected
-                    ? Colors.white
+                    ? colorScheme.onPrimary
-                    : (isDark ? AppColors.textPrimaryDark : AppColors.textPrimaryLight),
+                    : colorScheme.onSurface,
               ),
             ),
           ],

lib/features/iptv/widgets/channel_card.dart

@@ -2,17 +2,16 @@ import 'package:flutter/material.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_theme.dart';
 import '../providers/favorites_provider.dart';
 
-/// Premium channel card with Netflix-style design
+/// Apple TV Style Channel Card
 /// 
-/// Features:
+/// "Pop-out" effect on focus:
-/// - Glassmorphism background
+/// - Scales up (1.0 -> 1.1)
-/// - Thumbnail/logo with fallback
+/// - Throws a large soft shadow
-/// - Live badge with pulse animation
+/// - Adds a thick white border (Focus Ring)
-/// - EPG overlay
+/// - Title is typically BELOW the card in tvOS, but we'll overlay it subtly or keep below.
-/// - Favorite toggle
-/// - Hover/tap effects
 class ChannelCard extends ConsumerStatefulWidget {
   final String streamId;
   final String name;
@@ -43,19 +42,15 @@ class _ChannelCardState extends ConsumerState<ChannelCard>
     with SingleTickerProviderStateMixin {
   bool _isHovered = false;
   late AnimationController _pulseController;
-  late Animation<double> _pulseAnimation;
+  // late Animation<double> _pulseAnimation; // Unused for now, focus is static
 
   @override
   void initState() {
     super.initState();
     _pulseController = AnimationController(
-      vsync: this,
+       vsync: this, 
-      duration: const Duration(milliseconds: 1500),
+       duration: const Duration(milliseconds: 1000)
     )..repeat(reverse: true);
-    
-    _pulseAnimation = Tween<double>(begin: 0.8, end: 1.0).animate(
-      CurvedAnimation(parent: _pulseController, curve: Curves.easeInOut),
-    );
   }
 
   @override
@@ -69,124 +64,152 @@ class _ChannelCardState extends ConsumerState<ChannelCard>
     final favorites = ref.watch(favoritesProvider);
     final isFavorite = favorites.contains(widget.streamId);
 
+    // Dynamic sizing based on hover. 
+    // In valid tvOS, the layout reserves space, so we scale the content but not the layout bounds to avoid reflow.
+    // However, simplest way here is just Transform.scale.
+    
     return MouseRegion(
       onEnter: (_) => setState(() => _isHovered = true),
       onExit: (_) => setState(() => _isHovered = false),
+      cursor: SystemMouseCursors.click,
       child: GestureDetector(
         onTap: widget.onTap,
-        child: AnimatedContainer(
+        child: Column(
-          duration: const Duration(milliseconds: 200),
+          mainAxisSize: MainAxisSize.min,
-          curve: Curves.easeOutCubic,
+          children: [
-          width: widget.width ?? 180,
+            // The Image Card (Scales)
-          height: widget.height ?? 120,
+            AnimatedScale(
-          transform: Matrix4.identity()..scale(_isHovered ? 1.05 : 1.0),
+              scale: _isHovered ? 1.05 : 1.0,
-          transformAlignment: Alignment.center,
+              duration: AppTheme.durationFast,
-          decoration: BoxDecoration(
+              curve: AppTheme.curveDefault,
-            borderRadius: BorderRadius.circular(8),
+              child: AnimatedContainer(
-            color: AppColors.surface, // Clean flat dark surface
+                duration: AppTheme.durationFast,
-            border: Border.all(
+                width: widget.width ?? 180,
-              color: _isHovered
+                height: widget.height ?? 110,
-                  ? AppColors.primary
+                decoration: BoxDecoration(
-                  : AppColors.border,
+                  borderRadius: BorderRadius.circular(AppTheme.radiusMd),
-              width: _isHovered ? 2 : 1,
+                  color: AppColors.surface, // Fallback color
-            ),
+                  // Thick white border on focus (tvOS style)
-            boxShadow: _isHovered
+                  border: Border.all(
-                ? [
+                    color: _isHovered ? AppColors.focusColor : Colors.transparent,
-                    BoxShadow(
+                    width: _isHovered ? 3 : 0,
-                      color: AppColors.primary.withOpacity(0.3),
-                      blurRadius: 16,
-                      offset: const Offset(0, 4),
-                    ),
-                  ]
-                : [],
-          ),
-          child: ClipRRect(
-            borderRadius: BorderRadius.circular(7), // Inner radius
-            child: Stack(
-              fit: StackFit.expand,
-              children: [
-                // Channel logo/thumbnail
-                _buildChannelImage(),
-                
-                // Gradient overlay for text readability
-                Positioned.fill(
-                  child: DecoratedBox(
-                    decoration: BoxDecoration(
-                      gradient: LinearGradient(
-                        begin: Alignment.topCenter,
-                        end: Alignment.bottomCenter,
-                        colors: [
-                          Colors.black.withOpacity(0.2),
-                          Colors.black.withOpacity(0.9),
-                        ],
-                        stops: const [0.0, 1.0],
-                      ),
-                    ),
                   ),
-                ),
+                  // Deep shadow on focus
-                
+                  boxShadow: _isHovered
-                // Live badge
+                      ? [
-                if (widget.isLive)
+                          BoxShadow(
-                  Positioned(
+                            color: Colors.black.withOpacity(0.5),
-                    top: 8,
+                            blurRadius: 30,
-                    right: 8,
+                            offset: const Offset(0, 15),
-                    child: _buildLiveBadge(),
+                            spreadRadius: 2,
-                  ),
+                          ),
-
+                        ]
-                // Favorite Icon
+                      : [
-                Positioned(
+                           BoxShadow(
-                  top: 0,
+                            color: Colors.black.withOpacity(0.2),
-                  left: 0,
+                            blurRadius: 4,
-                  child: IconButton(
+                            offset: const Offset(0, 2),
-                    icon: Icon(
-                      isFavorite ? Icons.favorite : Icons.favorite_border,
-                      size: 20,
-                      color: isFavorite ? AppColors.primary : Colors.white70,
-                    ),
-                    onPressed: () {
-                      ref.read(favoritesProvider.notifier).toggleFavorite(widget.streamId);
-                    },
-                  ),
-                ),
-                
-                // Channel info
-                Positioned(
-                  left: 10,
-                  right: 10,
-                  bottom: 10,
-                  child: Column(
-                    mainAxisSize: MainAxisSize.min,
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Text(
-                        widget.name,
-                        style: const TextStyle(
-                          color: Colors.white,
-                          fontSize: 14,
-                          fontWeight: FontWeight.w700,
-                        ),
-                        maxLines: 1,
-                        overflow: TextOverflow.ellipsis,
-                      ),
-                      if (widget.currentProgram != null && widget.currentProgram!.isNotEmpty) ...[
-                        const SizedBox(height: 4),
-                        Text(
-                          widget.currentProgram!,
-                          style: TextStyle(
-                            color: Colors.white.withOpacity(0.7),
-                            fontSize: 11,
-                            fontWeight: FontWeight.w500,
                           ),
-                          maxLines: 1,
-                          overflow: TextOverflow.ellipsis,
-                        ),
                       ],
+                ),
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(AppTheme.radiusMd - (_isHovered ? 2 : 0)), // Adjust inner radius
+                  child: Stack(
+                    fit: StackFit.expand,
+                    children: [
+                      // 1. Background Image / Logo - EDGE TO EDGE
+                      _buildChannelImage(),
+                      
+                      // 2. Subtle Gradient (Always visible to make white logos pop on white background? No, black bg handling)
+                      // Only show gradient if we have text to show ON the card, but for tvOS text is often below.
+                      // Let's keep text overlay for now as requested "Minimalist" often implies overlays.
+                      if (_isHovered)
+                        Positioned.fill(
+                          child: Container(
+                            decoration: BoxDecoration(
+                              gradient: LinearGradient(
+                                colors: [Colors.transparent, Colors.black.withOpacity(0.8)],
+                                begin: Alignment.topCenter,
+                                end: Alignment.bottomCenter,
+                              ),
+                            ),
+                          ),
+                        ),
+
+                      // 3. Live Badge (Top Right)
+                      if (widget.isLive)
+                        Positioned(
+                          top: 8,
+                          right: 8,
+                          child: Container(
+                            padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+                            decoration: BoxDecoration(
+                              color: AppColors.live,
+                              borderRadius: BorderRadius.circular(4),
+                            ),
+                            child: const Text('LIVE', style: TextStyle(color: Colors.white, fontSize: 9, fontWeight: FontWeight.bold)),
+                          ),
+                        ),
+
+                      // 4. Favorite Icon (Top Left)
+                      if (_isHovered || isFavorite)
+                        Positioned(
+                          top: 5,
+                          left: 5,
+                          child: GestureDetector(
+                            onTap: () => ref.read(favoritesProvider.notifier).toggleFavorite(widget.streamId),
+                            child: Icon(
+                              isFavorite ? Icons.favorite : Icons.favorite_border,
+                              color: isFavorite ? AppColors.live : Colors.white.withOpacity(0.7), 
+                              size: 20,
+                            ),
+                          ),
+                        ),
                     ],
                   ),
                 ),
-              ],
+              ),
             ),
-          ),
+            
+            const SizedBox(height: 8),
+            
+            // Text separates from card (Classic tvOS look)
+            // Only show text prominently if hovered? Or always?
+            // "Minimalist" -> Always show but keep it subtle. White when focused.
+            SizedBox(
+              width: widget.width ?? 180,
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  Text(
+                    widget.name,
+                    textAlign: TextAlign.center,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: TextStyle(
+                      color: _isHovered ? AppColors.focusColor : AppColors.textSecondary,
+                      fontWeight: _isHovered ? FontWeight.bold : FontWeight.w500,
+                      fontSize: 13,
+                    ),
+                  ),
+                  if (widget.currentProgram != null && _isHovered) ...[
+                    const SizedBox(height: 2),
+                    Text(
+                      widget.currentProgram!,
+                      textAlign: TextAlign.center,
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: const TextStyle(
+                        color: AppColors.textTertiary,
+                        fontSize: 11,
+                      ),
+                    ),
+                  ],
+                ],
+              ),
+            ),
+          ],
         ),
       ),
     );
@@ -194,11 +217,16 @@ class _ChannelCardState extends ConsumerState<ChannelCard>
 
   Widget _buildChannelImage() {
     if (widget.iconUrl != null && widget.iconUrl!.isNotEmpty) {
-      return CachedNetworkImage(
+      return Container(
-        imageUrl: widget.iconUrl!,
+        color: Colors.white, // Logos usually look best on white/light grey
-        fit: BoxFit.contain, // Contain usually looks better for channel logos
+        child: CachedNetworkImage(
-        placeholder: (context, url) => _buildPlaceholder(),
+          imageUrl: widget.iconUrl!,
-        errorWidget: (context, url, error) => _buildPlaceholder(),
+          fit: BoxFit.contain,
+          width: double.infinity,
+          height: double.infinity,
+          placeholder: (context, url) => _buildPlaceholder(),
+          errorWidget: (context, url, error) => _buildPlaceholder(),
+        ),
       );
     }
     return _buildPlaceholder();
@@ -206,37 +234,9 @@ class _ChannelCardState extends ConsumerState<ChannelCard>
 
   Widget _buildPlaceholder() {
     return Container(
-      color: AppColors.surfaceVariant,
+      color: AppColors.surface,
-      child: Center(
+      child: const Center(
-        child: Icon(
+        child: Icon(Icons.tv, color: AppColors.textTertiary),
-          Icons.tv,
-          size: 32,
-          color: AppColors.textTertiary,
-        ),
-      ),
-    );
-  }
-
-  Widget _buildLiveBadge() {
-    return AnimatedBuilder(
-      animation: _pulseAnimation,
-      builder: (context, child) {
-        return Container(
-          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
-          decoration: BoxDecoration(
-            color: AppColors.live.withOpacity(_pulseAnimation.value),
-            borderRadius: BorderRadius.circular(4),
-          ),
-          child: child,
-        );
-      },
-      child: const Text(
-        'LIVE',
-        style: TextStyle(
-          color: Colors.white,
-          fontSize: 9,
-          fontWeight: FontWeight.bold,
-        ),
       ),
     );
   }