feat: open sidenav with left

lib/focus/focusable_chip_mixin.dart

@@ -122,15 +122,22 @@ mixin FocusableChipStateMixin<T extends StatefulWidget> on State<T> {
       return KeyEventResult.handled;
     }
 
-    // LEFT arrow - always consume to prevent default focus traversal
+    // LEFT arrow - call callback if provided, otherwise propagate to parent
     if (key.isLeftKey) {
-      callbacks.onNavigateLeft?.call();
+      if (callbacks.onNavigateLeft != null) {
-      return KeyEventResult.handled;
+        callbacks.onNavigateLeft!();
+        return KeyEventResult.handled;
+      }
+      // No callback - let parent handle (e.g., to focus sidebar)
+      return KeyEventResult.ignored;
     }
 
-    // RIGHT arrow - always consume to prevent default focus traversal
+    // RIGHT arrow - call callback if provided, otherwise consume to prevent escape
     if (key.isRightKey) {
-      callbacks.onNavigateRight?.call();
+      if (callbacks.onNavigateRight != null) {
+        callbacks.onNavigateRight!();
+      }
+      // Always consume RIGHT to prevent focus escape
       return KeyEventResult.handled;
     }
 

lib/focus/focusable_wrapper.dart

@@ -33,6 +33,9 @@ class FocusableWrapper extends StatefulWidget {
   /// Called when the user presses UP and there's no focusable item above.
   final VoidCallback? onNavigateUp;
 
+  /// Called when the user presses LEFT and there's no focusable item to the left.
+  final VoidCallback? onNavigateLeft;
+
   /// Called when the user presses BACK.
   final VoidCallback? onBack;
 
@@ -88,6 +91,7 @@ class FocusableWrapper extends StatefulWidget {
     this.onLongPress,
     this.onFocusChange,
     this.onNavigateUp,
+    this.onNavigateLeft,
     this.onBack,
     this.autofocus = false,
     this.focusNode,
@@ -366,6 +370,13 @@ class _FocusableWrapperState extends State<FocusableWrapper> with SingleTickerPr
       return KeyEventResult.handled;
     }
 
+    // LEFT arrow - if callback provided, navigate left (caller is responsible
+    // for only providing this callback when the item is at the left edge)
+    if (key == LogicalKeyboardKey.arrowLeft && widget.onNavigateLeft != null) {
+      widget.onNavigateLeft!();
+      return KeyEventResult.handled;
+    }
+
     return KeyEventResult.ignored;
   }
 

lib/screens/discover_screen.dart

@@ -34,6 +34,7 @@ import '../utils/platform_detector.dart';
 import '../theme/mono_tokens.dart';
 import 'auth_screen.dart';
 import 'libraries/state_messages.dart';
+import 'main_screen.dart';
 import '../watch_together/watch_together.dart';
 
 class DiscoverScreen extends StatefulWidget {
@@ -184,6 +185,11 @@ class _DiscoverScreenState extends State<DiscoverScreen>
     return false;
   }
 
+  /// Navigate focus to the sidebar
+  void _navigateToSidebar() {
+    MainScreenFocusScope.of(context)?.focusSidebar();
+  }
+
   @override
   void initState() {
     super.initState();
@@ -247,10 +253,12 @@ class _DiscoverScreenState extends State<DiscoverScreen>
       return KeyEventResult.handled;
     }
 
-    // LEFT: Navigate hero carousel to previous
+    // LEFT: Navigate hero carousel to previous, or focus sidebar at index 0
     if (key.isLeftKey) {
       if (_currentHeroIndex > 0) {
         _heroController.previousPage(duration: tokens(context).slow, curve: Curves.easeInOut);
+      } else {
+        _navigateToSidebar();
       }
       return KeyEventResult.handled;
     }
@@ -294,8 +302,14 @@ class _DiscoverScreenState extends State<DiscoverScreen>
       return KeyEventResult.handled;
     }
 
-    // LEFT/UP: Block at boundary
+    // LEFT: Navigate to sidebar
-    if (key.isLeftKey || key.isUpKey) {
+    if (key.isLeftKey) {
+      _navigateToSidebar();
+      return KeyEventResult.handled;
+    }
+
+    // UP: Block at boundary
+    if (key.isUpKey) {
       return KeyEventResult.handled;
     }
 
@@ -1043,6 +1057,7 @@ class _DiscoverScreenState extends State<DiscoverScreen>
                           _heroFocusNode.requestFocus();
                           _scrollController.animateTo(0, duration: const Duration(milliseconds: 200), curve: Curves.easeOut);
                         },
+                        onNavigateToSidebar: _navigateToSidebar,
                       ),
                     ),
 
@@ -1061,6 +1076,7 @@ class _DiscoverScreenState extends State<DiscoverScreen>
                           _heroFocusNode.requestFocus();
                           _scrollController.animateTo(0, duration: const Duration(milliseconds: 200), curve: Curves.easeOut);
                         } : null,
+                        onNavigateToSidebar: _navigateToSidebar,
                       ),
                     ),
 

lib/screens/downloads/downloads_screen.dart

@@ -6,6 +6,8 @@ import '../../providers/download_provider.dart';
 import '../../providers/multi_server_provider.dart';
 import '../../providers/settings_provider.dart';
 import '../../services/gamepad_service.dart';
+import '../../utils/grid_size_calculator.dart';
+import '../../utils/layout_constants.dart';
 import '../../utils/platform_detector.dart';
 import '../../widgets/desktop_app_bar.dart';
 import '../../widgets/focusable_tab_chip.dart';
@@ -156,7 +158,7 @@ class DownloadsScreenState extends State<DownloadsScreen> with SingleTickerProvi
               });
               _getTabChipFocusNode(newIndex).requestFocus();
             }
-          : null,
+          : _onTabBarBack,
       onNavigateRight: index < tabCount - 1
           ? () {
               final newIndex = index + 1;
@@ -292,6 +294,16 @@ class _DownloadsGridContent extends StatelessWidget {
 
   const _DownloadsGridContent({required this.type, required this.suppressAutoFocus, this.onBack});
 
+  /// Navigate focus to the sidebar
+  void _navigateToSidebar(BuildContext context) {
+    MainScreenFocusScope.of(context)?.focusSidebar();
+  }
+
+  /// Calculate column count based on actual available width.
+  int _calculateColumnCount(double availableWidth, double maxCrossAxisExtent, double crossAxisSpacing) {
+    return ((availableWidth + crossAxisSpacing) / (maxCrossAxisExtent + crossAxisSpacing)).ceil().clamp(1, 100);
+  }
+
   @override
   Widget build(BuildContext context) {
     return Consumer2<DownloadProvider, SettingsProvider>(
@@ -304,16 +316,30 @@ class _DownloadsGridContent extends StatelessWidget {
           return _buildEmptyState(context);
         }
 
-        return GridView.builder(
+        const padding = EdgeInsets.symmetric(horizontal: 8);
-          padding: const EdgeInsets.symmetric(horizontal: 8),
+        final maxCrossAxisExtent = GridSizeCalculator.getMaxCrossAxisExtent(context, settingsProvider.libraryDensity);
-          gridDelegate: MediaGridDelegate.createDelegate(context: context, density: settingsProvider.libraryDensity),
+        const crossAxisSpacing = GridLayoutConstants.crossAxisSpacing;
-          itemCount: items.length,
+
-          itemBuilder: (context, index) {
+        // Use LayoutBuilder to get actual available width (accounting for sidebar)
-            final item = items[index];
+        return LayoutBuilder(
-            return FocusableMediaCard(
+          builder: (context, constraints) {
-              item: item,
+            final availableWidth = constraints.maxWidth - padding.left - padding.right;
-              onBack: onBack,
+            final columnCount = _calculateColumnCount(availableWidth, maxCrossAxisExtent, crossAxisSpacing);
-              isOffline: true, // Downloaded content works without server
+
+            return GridView.builder(
+              padding: padding,
+              gridDelegate: MediaGridDelegate.createDelegate(context: context, density: settingsProvider.libraryDensity),
+              itemCount: items.length,
+              itemBuilder: (context, index) {
+                final item = items[index];
+                final isFirstColumn = GridSizeCalculator.isFirstColumn(index, columnCount);
+                return FocusableMediaCard(
+                  item: item,
+                  onBack: onBack,
+                  isOffline: true, // Downloaded content works without server
+                  onNavigateLeft: isFirstColumn ? () => _navigateToSidebar(context) : null,
+                );
+              },
             );
           },
         );

lib/screens/libraries/adaptive_media_grid.dart

@@ -4,6 +4,25 @@ import '../../providers/settings_provider.dart';
 import '../../services/settings_service.dart' show ViewMode, LibraryDensity;
 import '../../utils/grid_size_calculator.dart';
 import '../../utils/layout_constants.dart';
+import '../main_screen.dart';
+
+/// Context passed to the item builder with navigation information.
+class GridItemContext {
+  /// Whether this item is in the first row of the grid.
+  final bool isFirstRow;
+
+  /// Whether this item is in the first column of the grid.
+  final bool isFirstColumn;
+
+  /// Callback to navigate to the sidebar (for first-column items).
+  final VoidCallback? navigateToSidebar;
+
+  const GridItemContext({
+    required this.isFirstRow,
+    required this.isFirstColumn,
+    this.navigateToSidebar,
+  });
+}
 
 /// A widget that automatically switches between grid and list view
 /// based on user settings, providing a consistent layout pattern
@@ -14,8 +33,9 @@ class AdaptiveMediaGrid<T> extends StatelessWidget {
   /// The list of items to display
   final List<T> items;
 
-  /// Builder function for each item in the grid/list
+  /// Builder function for each item in the grid/list.
-  final Widget Function(BuildContext context, T item, int index) itemBuilder;
+  /// Receives the item, index, and optional grid context with navigation info.
+  final Widget Function(BuildContext context, T item, int index, [GridItemContext? gridContext]) itemBuilder;
 
   /// Callback when the list needs to be refreshed
   final VoidCallback? onRefresh;
@@ -32,6 +52,9 @@ class AdaptiveMediaGrid<T> extends StatelessWidget {
   /// Callback when back button is pressed (for hierarchical navigation)
   final VoidCallback? onBack;
 
+  /// Whether to enable sidebar navigation for first-column items.
+  final bool enableSidebarNavigation;
+
   const AdaptiveMediaGrid({
     super.key,
     required this.items,
@@ -41,6 +64,7 @@ class AdaptiveMediaGrid<T> extends StatelessWidget {
     this.childAspectRatio,
     this.firstItemFocusNode,
     this.onBack,
+    this.enableSidebarNavigation = false,
   });
 
   @override
@@ -55,6 +79,18 @@ class AdaptiveMediaGrid<T> extends StatelessWidget {
   // Extra top padding for focus decoration (scale + border extends beyond item bounds)
   static const double _focusDecorationPadding = 8.0;
 
+  /// Navigate focus to the sidebar
+  void _navigateToSidebar(BuildContext context) {
+    MainScreenFocusScope.of(context)?.focusSidebar();
+  }
+
+  /// Calculate column count based on actual available width.
+  /// Uses the same formula as Flutter's SliverGridDelegateWithMaxCrossAxisExtent.
+  int _calculateColumnCount(double availableWidth, double maxCrossAxisExtent) {
+    final crossAxisSpacing = GridLayoutConstants.crossAxisSpacing;
+    return ((availableWidth + crossAxisSpacing) / (maxCrossAxisExtent + crossAxisSpacing)).ceil().clamp(1, 100);
+  }
+
   /// Builds either a list or grid view based on the view mode
   Widget _buildItemsView(BuildContext context, ViewMode viewMode, LibraryDensity density) {
     final basePadding = padding ?? GridLayoutConstants.gridPadding;
@@ -63,26 +99,56 @@ class AdaptiveMediaGrid<T> extends StatelessWidget {
     final effectiveAspectRatio = childAspectRatio ?? GridLayoutConstants.posterAspectRatio;
 
     if (viewMode == ViewMode.list) {
+      // In list view, all items are in a single column (first column)
       return ListView.builder(
         padding: effectivePadding,
         // Allow focus decoration to render outside scroll bounds
         clipBehavior: Clip.none,
         itemCount: items.length,
-        itemBuilder: (context, index) => itemBuilder(context, items[index], index),
+        itemBuilder: (ctx, index) {
+          final gridContext = enableSidebarNavigation
+              ? GridItemContext(
+                  isFirstRow: index == 0,
+                  isFirstColumn: true, // List view = single column
+                  navigateToSidebar: () => _navigateToSidebar(context),
+                )
+              : null;
+          return itemBuilder(ctx, items[index], index, gridContext);
+        },
       );
     } else {
-      return GridView.builder(
+      final maxCrossAxisExtent = GridSizeCalculator.getMaxCrossAxisExtent(context, density);
-        padding: effectivePadding,
+      final horizontalPadding = effectivePadding.left + effectivePadding.right;
-        // Allow focus decoration to render outside scroll bounds
+
-        clipBehavior: Clip.none,
+      // Use LayoutBuilder to get the actual available width (accounting for sidebar, etc.)
-        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+      return LayoutBuilder(
-          maxCrossAxisExtent: GridSizeCalculator.getMaxCrossAxisExtent(context, density),
+        builder: (context, constraints) {
-          childAspectRatio: effectiveAspectRatio,
+          final availableWidth = constraints.maxWidth - horizontalPadding;
-          crossAxisSpacing: GridLayoutConstants.crossAxisSpacing,
+          final columnCount = _calculateColumnCount(availableWidth, maxCrossAxisExtent);
-          mainAxisSpacing: GridLayoutConstants.mainAxisSpacing,
+
-        ),
+          return GridView.builder(
-        itemCount: items.length,
+            padding: effectivePadding,
-        itemBuilder: (context, index) => itemBuilder(context, items[index], index),
+            // Allow focus decoration to render outside scroll bounds
+            clipBehavior: Clip.none,
+            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+              maxCrossAxisExtent: maxCrossAxisExtent,
+              childAspectRatio: effectiveAspectRatio,
+              crossAxisSpacing: GridLayoutConstants.crossAxisSpacing,
+              mainAxisSpacing: GridLayoutConstants.mainAxisSpacing,
+            ),
+            itemCount: items.length,
+            itemBuilder: (ctx, index) {
+              final gridContext = enableSidebarNavigation
+                  ? GridItemContext(
+                      isFirstRow: GridSizeCalculator.isFirstRow(index, columnCount),
+                      isFirstColumn: GridSizeCalculator.isFirstColumn(index, columnCount),
+                      navigateToSidebar: () => _navigateToSidebar(context),
+                    )
+                  : null;
+              return itemBuilder(ctx, items[index], index, gridContext);
+            },
+          );
+        },
       );
     }
   }

lib/screens/libraries/libraries_screen.dart

@@ -945,7 +945,7 @@ class _LibrariesScreenState extends State<LibrariesScreen>
               });
               _getTabChipFocusNode(newIndex).requestFocus();
             }
-          : null,
+          : _onTabBarBack,
       onNavigateRight: index < tabCount - 1
           ? () {
               final newIndex = index + 1;

lib/screens/libraries/tabs/library_browse_tab.dart

@@ -21,6 +21,7 @@ import '../../../services/storage_service.dart';
 import '../../../services/settings_service.dart' show ViewMode, EpisodePosterMode;
 import '../../../mixins/item_updatable.dart';
 import '../../../i18n/strings.g.dart';
+import '../../main_screen.dart';
 import 'base_library_tab.dart';
 
 /// Browse tab for library screen
@@ -506,6 +507,11 @@ class _LibraryBrowseTabState extends BaseLibraryTabState<PlexMetadata, LibraryBr
     _groupingChipFocusNode.requestFocus();
   }
 
+  /// Navigate focus to the sidebar
+  void _navigateToSidebar() {
+    MainScreenFocusScope.of(context)?.focusSidebar();
+  }
+
   @override
   Widget build(BuildContext context) {
     super.build(context); // Required for AutomaticKeepAliveClientMixin
@@ -580,6 +586,7 @@ class _LibraryBrowseTabState extends BaseLibraryTabState<PlexMetadata, LibraryBr
             onPressed: _showGroupingBottomSheet,
             onNavigateDown: _navigateToGrid,
             onNavigateUp: widget.onBack,
+            onNavigateLeft: _navigateToSidebar,
             onNavigateRight: _isFiltersChipVisible
                 ? () => _filtersChipFocusNode.requestFocus()
                 : _isSortChipVisible
@@ -668,12 +675,16 @@ class _LibraryBrowseTabState extends BaseLibraryTabState<PlexMetadata, LibraryBr
     final itemCount = items.length + (_hasMoreItems && isLoading ? 1 : 0);
 
     if (settingsProvider.viewMode == ViewMode.list) {
-      // In list view, only the first item can navigate up to chips
+      // In list view, all items are in a single column (first column)
       return SliverPadding(
         padding: const EdgeInsets.fromLTRB(8, _gridTopPadding, 8, 8),
         sliver: SliverList.builder(
           itemCount: itemCount,
-          itemBuilder: (context, index) => _buildMediaCardItem(index, isFirstRow: index == 0),
+          itemBuilder: (context, index) => _buildMediaCardItem(
+            index,
+            isFirstRow: index == 0,
+            isFirstColumn: true, // List view = single column
+          ),
         ),
       );
     } else {
@@ -691,14 +702,17 @@ class _LibraryBrowseTabState extends BaseLibraryTabState<PlexMetadata, LibraryBr
             useWideAspectRatio: useWideRatio,
           ),
           itemCount: itemCount,
-          itemBuilder: (context, index) =>
+          itemBuilder: (context, index) => _buildMediaCardItem(
-              _buildMediaCardItem(index, isFirstRow: GridSizeCalculator.isFirstRow(index, columnCount)),
+            index,
+            isFirstRow: GridSizeCalculator.isFirstRow(index, columnCount),
+            isFirstColumn: GridSizeCalculator.isFirstColumn(index, columnCount),
+          ),
         ),
       );
     }
   }
 
-  Widget _buildMediaCardItem(int index, {required bool isFirstRow}) {
+  Widget _buildMediaCardItem(int index, {required bool isFirstRow, required bool isFirstColumn}) {
     if (index >= items.length) {
       return const Padding(
         padding: EdgeInsets.all(16.0),
@@ -717,6 +731,7 @@ class _LibraryBrowseTabState extends BaseLibraryTabState<PlexMetadata, LibraryBr
       focusNode: focusNode,
       onRefresh: updateItem,
       onNavigateUp: isFirstRow ? _navigateToChips : null,
+      onNavigateLeft: isFirstColumn ? _navigateToSidebar : null,
       onBack: widget.onBack,
       onFocusChange: (hasFocus) {
         if (hasFocus) {

lib/screens/libraries/tabs/library_collections_tab.dart

@@ -4,6 +4,7 @@ import '../../../models/plex_metadata.dart';
 import '../../../utils/library_refresh_notifier.dart';
 import '../../../widgets/focusable_media_card.dart';
 import '../../../i18n/strings.g.dart';
+import '../adaptive_media_grid.dart';
 import 'base_library_tab.dart';
 import 'library_grid_tab_state.dart';
 
@@ -51,14 +52,14 @@ class _LibraryCollectionsTabState extends LibraryGridTabState<PlexMetadata, Libr
   }
 
   @override
-  @override
+  Widget buildGridItem(BuildContext context, PlexMetadata item, int index, [GridItemContext? gridContext]) {
-  Widget buildGridItem(BuildContext context, PlexMetadata item, int index) {
     return FocusableMediaCard(
       key: Key(item.ratingKey),
       item: item,
       focusNode: index == 0 ? firstItemFocusNode : null,
       onListRefresh: loadItems,
       onBack: widget.onBack,
+      onNavigateLeft: gridContext?.isFirstColumn == true ? gridContext?.navigateToSidebar : null,
     );
   }
 }

lib/screens/libraries/tabs/library_grid_tab_state.dart

@@ -11,7 +11,9 @@ import 'base_library_tab.dart';
 abstract class LibraryGridTabState<T, W extends BaseLibraryTab<T>> extends BaseLibraryTabState<T, W>
     with LibraryTabFocusMixin {
   /// Build a single grid item.
-  Widget buildGridItem(BuildContext context, T item, int index);
+  /// [gridContext] provides information about the item's position in the grid
+  /// and callbacks for navigation (e.g., navigating to sidebar from first column).
+  Widget buildGridItem(BuildContext context, T item, int index, [GridItemContext? gridContext]);
 
   @override
   int get itemCount => items.length;
@@ -20,10 +22,11 @@ abstract class LibraryGridTabState<T, W extends BaseLibraryTab<T>> extends BaseL
   Widget buildContent(List<T> items) {
     return AdaptiveMediaGrid<T>(
       items: items,
-      itemBuilder: (context, item, index) => buildGridItem(context, item, index),
+      itemBuilder: (context, item, index, [gridContext]) => buildGridItem(context, item, index, gridContext),
       onRefresh: loadItems,
       firstItemFocusNode: firstItemFocusNode,
       onBack: widget.onBack,
+      enableSidebarNavigation: true,
     );
   }
 }

lib/screens/libraries/tabs/library_playlists_tab.dart

@@ -4,6 +4,7 @@ import '../../../models/plex_playlist.dart';
 import '../../../utils/library_refresh_notifier.dart';
 import '../../../widgets/focusable_media_card.dart';
 import '../../../i18n/strings.g.dart';
+import '../adaptive_media_grid.dart';
 import 'base_library_tab.dart';
 import 'library_grid_tab_state.dart';
 
@@ -51,13 +52,14 @@ class _LibraryPlaylistsTabState extends LibraryGridTabState<PlexPlaylist, Librar
   }
 
   @override
-  Widget buildGridItem(BuildContext context, PlexPlaylist playlist, int index) {
+  Widget buildGridItem(BuildContext context, PlexPlaylist playlist, int index, [GridItemContext? gridContext]) {
     return FocusableMediaCard(
       key: Key(playlist.ratingKey),
       item: playlist,
       focusNode: index == 0 ? firstItemFocusNode : null,
       onListRefresh: loadItems,
       onBack: widget.onBack,
+      onNavigateLeft: gridContext?.isFirstColumn == true ? gridContext?.navigateToSidebar : null,
     );
   }
 }

lib/screens/libraries/tabs/library_recommended_tab.dart

@@ -7,6 +7,7 @@ import '../../../mixins/item_updatable.dart';
 import '../../../models/plex_hub.dart';
 import '../../../models/plex_metadata.dart';
 import '../../../widgets/hub_section.dart';
+import '../../main_screen.dart';
 import 'base_library_tab.dart';
 
 /// Recommended tab for library screen
@@ -143,6 +144,11 @@ class _LibraryRecommendedTabState extends BaseLibraryTabState<PlexHub, LibraryRe
     }
   }
 
+  /// Navigate focus to the sidebar
+  void _navigateToSidebar() {
+    MainScreenFocusScope.of(context)?.focusSidebar();
+  }
+
   // Extra top padding for focus decoration (scale + border extends beyond item bounds)
   static const double _focusDecorationPadding = 8.0;
 
@@ -169,6 +175,7 @@ class _LibraryRecommendedTabState extends BaseLibraryTabState<PlexHub, LibraryRe
           onVerticalNavigation: (isUp) => _handleVerticalNavigation(index, isUp),
           onBack: widget.onBack,
           onNavigateUp: index == 0 ? widget.onBack : null,
+          onNavigateToSidebar: _navigateToSidebar,
         );
       },
     );

lib/screens/main_screen.dart

@@ -662,6 +662,7 @@ class _MainScreenState extends State<MainScreen> with RouteAware, WindowListener
                               _selectLibrary(key);
                               _focusContent();
                             },
+                            onNavigateToContent: _focusContent,
                           ),
                         ),
                       ),

lib/screens/search_screen.dart

@@ -9,13 +9,16 @@ import '../mixins/refreshable.dart';
 import '../models/plex_metadata.dart';
 import '../providers/multi_server_provider.dart';
 import '../providers/settings_provider.dart';
+import '../services/settings_service.dart' show ViewMode;
 import '../utils/app_logger.dart';
+import '../utils/grid_size_calculator.dart';
 import '../utils/sliver_adaptive_media_builder.dart';
 import '../utils/snackbar_helper.dart';
 import '../widgets/desktop_app_bar.dart';
-import '../widgets/media_card.dart';
+import '../widgets/focusable_media_card.dart';
 import '../utils/focus_utils.dart';
 import 'libraries/state_messages.dart';
+import 'main_screen.dart';
 
 class SearchScreen extends StatefulWidget {
   const SearchScreen({super.key});
@@ -148,88 +151,119 @@ class _SearchScreenState extends State<SearchScreen> with Refreshable, FullRefre
     }
   }
 
+  /// Navigate focus to the sidebar
+  void _navigateToSidebar() {
+    MainScreenFocusScope.of(context)?.focusSidebar();
+  }
+
+  /// Calculate column count based on available width.
+  int _calculateColumnCount(double availableWidth, double maxCrossAxisExtent, double crossAxisSpacing) {
+    return ((availableWidth + crossAxisSpacing) / (maxCrossAxisExtent + crossAxisSpacing)).ceil().clamp(1, 100);
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    // Use LayoutBuilder to get the actual available width (accounting for sidebar)
-      body: SafeArea(
+    return LayoutBuilder(
-        child: CustomScrollView(
+      builder: (context, constraints) {
-          slivers: [
+        final availableWidth = constraints.maxWidth;
-            DesktopSliverAppBar(title: Text(t.screens.search), floating: true),
+
-            SliverToBoxAdapter(
+        return Scaffold(
-              child: Padding(
+          body: SafeArea(
-                padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
+            child: CustomScrollView(
-                child: TextField(
+              slivers: [
-                  controller: _searchController,
+                DesktopSliverAppBar(title: Text(t.screens.search), floating: true),
-                  focusNode: _searchFocusNode,
+                SliverToBoxAdapter(
-                  decoration: InputDecoration(
+                  child: Padding(
-                    hintText: t.search.hint,
+                    padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
-                    prefixIcon: const AppIcon(Symbols.search_rounded, fill: 1),
+                    child: TextField(
-                    suffixIcon: _searchController.text.isNotEmpty
+                      controller: _searchController,
-                        ? IconButton(
+                      focusNode: _searchFocusNode,
-                            icon: const AppIcon(Symbols.clear_rounded, fill: 1),
+                      decoration: InputDecoration(
-                            onPressed: () {
+                        hintText: t.search.hint,
-                              _searchController.clear();
+                        prefixIcon: const AppIcon(Symbols.search_rounded, fill: 1),
-                              // State update handled by listener
+                        suffixIcon: _searchController.text.isNotEmpty
-                            },
+                            ? IconButton(
-                          )
+                                icon: const AppIcon(Symbols.clear_rounded, fill: 1),
-                        : null,
+                                onPressed: () {
-                    filled: true,
+                                  _searchController.clear();
-                    fillColor: Theme.of(context).colorScheme.surfaceContainerHighest,
+                                  // State update handled by listener
-                    border: OutlineInputBorder(borderRadius: BorderRadius.circular(100), borderSide: BorderSide.none),
+                                },
-                    enabledBorder: OutlineInputBorder(
+                              )
-                      borderRadius: BorderRadius.circular(100),
+                            : null,
-                      borderSide: BorderSide.none,
+                        filled: true,
+                        fillColor: Theme.of(context).colorScheme.surfaceContainerHighest,
+                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(100), borderSide: BorderSide.none),
+                        enabledBorder: OutlineInputBorder(
+                          borderRadius: BorderRadius.circular(100),
+                          borderSide: BorderSide.none,
+                        ),
+                        focusedBorder: OutlineInputBorder(
+                          borderRadius: BorderRadius.circular(100),
+                          borderSide: BorderSide.none,
+                        ),
+                        contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+                      ),
                     ),
-                    focusedBorder: OutlineInputBorder(
-                      borderRadius: BorderRadius.circular(100),
-                      borderSide: BorderSide.none,
-                    ),
-                    contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                   ),
                 ),
-              ),
+                if (_isSearching)
-            ),
+                  const SliverFillRemaining(child: Center(child: CircularProgressIndicator()))
-            if (_isSearching)
+                else if (!_hasSearched)
-              const SliverFillRemaining(child: Center(child: CircularProgressIndicator()))
+                  SliverFillRemaining(
-            else if (!_hasSearched)
+                    child: StateMessageWidget(
-              SliverFillRemaining(
+                      message: t.search.searchYourMedia,
-                child: StateMessageWidget(
+                      subtitle: t.search.enterTitleActorOrKeyword,
-                  message: t.search.searchYourMedia,
+                      icon: Symbols.search_rounded,
-                  subtitle: t.search.enterTitleActorOrKeyword,
+                      iconSize: 80,
-                  icon: Symbols.search_rounded,
+                    ),
-                  iconSize: 80,
+                  )
-                ),
+                else if (_searchResults.isEmpty)
-              )
+                  SliverFillRemaining(
-            else if (_searchResults.isEmpty)
+                    child: StateMessageWidget(
-              SliverFillRemaining(
+                      message: t.messages.noResultsFound,
-                child: StateMessageWidget(
+                      subtitle: t.search.tryDifferentTerm,
-                  message: t.messages.noResultsFound,
+                      icon: Symbols.search_off_rounded,
-                  subtitle: t.search.tryDifferentTerm,
+                      iconSize: 80,
-                  icon: Symbols.search_off_rounded,
+                    ),
-                  iconSize: 80,
+                  )
-                ),
+                else
-              )
+                  Consumer<SettingsProvider>(
-            else
+                    builder: (context, settingsProvider, child) {
-              Consumer<SettingsProvider>(
+                      final maxCrossAxisExtent = GridSizeCalculator.getMaxCrossAxisExtent(context, settingsProvider.libraryDensity);
-                builder: (context, settingsProvider, child) {
+                      const gridPadding = EdgeInsets.all(16);
-                  return buildAdaptiveMediaSliverBuilder<PlexMetadata>(
+                      const crossAxisSpacing = 8.0;
-                    context: context,
+                      final gridAvailableWidth = availableWidth - gridPadding.left - gridPadding.right;
-                    items: _searchResults,
+                      final columnCount = _calculateColumnCount(gridAvailableWidth, maxCrossAxisExtent, crossAxisSpacing);
-                    itemBuilder: (context, item, index) {
+                      final isList = settingsProvider.viewMode == ViewMode.list;
-                      return MediaCard(key: Key(item.ratingKey), item: item, onRefresh: updateItem);
+
-                    },
+                      return buildAdaptiveMediaSliverBuilder<PlexMetadata>(
+                        context: context,
+                        items: _searchResults,
+                        itemBuilder: (context, item, index) {
+                          // In list view, all items are in the first column
+                          final isFirstColumn = isList || GridSizeCalculator.isFirstColumn(index, columnCount);
+                          return FocusableMediaCard(
+                            key: Key(item.ratingKey),
+                            item: item,
+                            onListRefresh: () => updateItem(item.ratingKey),
+                            onNavigateLeft: isFirstColumn ? _navigateToSidebar : null,
+                          );
+                        },
                     viewMode: settingsProvider.viewMode,
                     density: settingsProvider.libraryDensity,
                     padding: const EdgeInsets.all(16),
                     childAspectRatio: 2 / 3.3,
                     crossAxisSpacing: 8,
                     mainAxisSpacing: 8,
-                  );
+                      );
-                },
+                    },
-              ),
+                  ),
-          ],
+              ],
-        ),
+            ),
-      ),
+          ),
+        );
+      },
     );
   }
 }

lib/screens/settings/settings_screen.dart

@@ -2,6 +2,7 @@ import 'dart:io';
 
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:plezy/widgets/app_icon.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:hotkey_manager/hotkey_manager.dart';
@@ -10,6 +11,7 @@ import 'package:url_launcher/url_launcher.dart';
 
 import '../../focus/focus_memory_tracker.dart';
 import '../../i18n/strings.g.dart';
+import '../main_screen.dart';
 import '../../mixins/refreshable.dart';
 import '../../services/discord_rpc_service.dart';
 import '../../services/download_storage_service.dart';
@@ -134,6 +136,20 @@ class _SettingsScreenState extends State<SettingsScreen> with FocusableTab {
     _focusTracker.restoreFocus(fallbackKey: _kTheme);
   }
 
+  /// Navigate focus to the sidebar
+  void _navigateToSidebar() {
+    MainScreenFocusScope.of(context)?.focusSidebar();
+  }
+
+  /// Handle key events for LEFT arrow → sidebar navigation
+  KeyEventResult _handleKeyEvent(FocusNode node, KeyEvent event) {
+    if (event is KeyDownEvent && event.logicalKey == LogicalKeyboardKey.arrowLeft) {
+      _navigateToSidebar();
+      return KeyEventResult.handled;
+    }
+    return KeyEventResult.ignored;
+  }
+
   Future<void> _loadSettings() async {
     _settingsService = await settings.SettingsService.getInstance();
     if (_keyboardShortcutsSupported) {
@@ -169,29 +185,32 @@ class _SettingsScreenState extends State<SettingsScreen> with FocusableTab {
     }
 
     return Scaffold(
-      body: CustomScrollView(
+      body: Focus(
-        slivers: [
+        onKeyEvent: _handleKeyEvent,
-          CustomAppBar(title: Text(t.settings.title), pinned: true),
+        child: CustomScrollView(
-          SliverPadding(
+          slivers: [
-            padding: const EdgeInsets.all(16),
+            CustomAppBar(title: Text(t.settings.title), pinned: true),
-            sliver: SliverList(
+            SliverPadding(
-              delegate: SliverChildListDelegate([
+              padding: const EdgeInsets.all(16),
-                _buildAppearanceSection(),
+              sliver: SliverList(
-                const SizedBox(height: 24),
+                delegate: SliverChildListDelegate([
-                _buildVideoPlaybackSection(),
+                  _buildAppearanceSection(),
-                const SizedBox(height: 24),
+                  const SizedBox(height: 24),
-                _buildDownloadsSection(),
+                  _buildVideoPlaybackSection(),
-                const SizedBox(height: 24),
+                  const SizedBox(height: 24),
-                if (_keyboardShortcutsSupported) ...[_buildKeyboardShortcutsSection(), const SizedBox(height: 24)],
+                  _buildDownloadsSection(),
-                _buildAdvancedSection(),
+                  const SizedBox(height: 24),
-                const SizedBox(height: 24),
+                  if (_keyboardShortcutsSupported) ...[_buildKeyboardShortcutsSection(), const SizedBox(height: 24)],
-                if (UpdateService.isUpdateCheckEnabled) ...[_buildUpdateSection(), const SizedBox(height: 24)],
+                  _buildAdvancedSection(),
-                _buildAboutSection(),
+                  const SizedBox(height: 24),
-                const SizedBox(height: 24),
+                  if (UpdateService.isUpdateCheckEnabled) ...[_buildUpdateSection(), const SizedBox(height: 24)],
-              ]),
+                  _buildAboutSection(),
+                  const SizedBox(height: 24),
+                ]),
+              ),
             ),
-          ),
+          ],
-        ],
+        ),
       ),
     );
   }

lib/utils/grid_size_calculator.dart

@@ -124,15 +124,25 @@ class GridSizeCalculator {
 
   /// Calculates the number of columns in a grid based on screen width and density.
   ///
-  /// Accounts for standard horizontal padding (16px total).
+  /// Uses the same formula as Flutter's SliverGridDelegateWithMaxCrossAxisExtent:
-  static int getColumnCount(BuildContext context, LibraryDensity density) {
+  /// `((crossAxisExtent + crossAxisSpacing) / (maxCrossAxisExtent + crossAxisSpacing)).ceil()`
-    final screenWidth = MediaQuery.of(context).size.width - 16;
+  ///
+  /// [horizontalPadding] should match the grid's total horizontal padding.
+  static int getColumnCount(BuildContext context, LibraryDensity density, {double horizontalPadding = 16}) {
+    final screenWidth = MediaQuery.of(context).size.width - horizontalPadding;
     final maxCrossAxisExtent = getMaxCrossAxisExtent(context, density);
-    return (screenWidth / maxCrossAxisExtent).floor().clamp(1, 100);
+    final crossAxisSpacing = GridLayoutConstants.crossAxisSpacing;
+    // Match Flutter's grid delegate calculation
+    return ((screenWidth + crossAxisSpacing) / (maxCrossAxisExtent + crossAxisSpacing)).ceil().clamp(1, 100);
   }
 
   /// Check if the given index is in the first row of a grid with given column count.
   static bool isFirstRow(int index, int columnCount) {
     return index < columnCount;
   }
+
+  /// Check if the given index is in the first column of a grid with given column count.
+  static bool isFirstColumn(int index, int columnCount) {
+    return index % columnCount == 0;
+  }
 }

lib/widgets/focusable_media_card.dart

@@ -32,6 +32,10 @@ class FocusableMediaCard extends StatefulWidget {
   /// Used to navigate from the top row to filter chips.
   final VoidCallback? onNavigateUp;
 
+  /// Called when the user presses LEFT and there's no focusable item to the left.
+  /// Used to navigate from the first column to the sidebar.
+  final VoidCallback? onNavigateLeft;
+
   /// Called when the user presses BACK.
   /// Used to navigate from tab content to tab bar.
   final VoidCallback? onBack;
@@ -54,6 +58,7 @@ class FocusableMediaCard extends StatefulWidget {
     this.isOffline = false,
     this.focusNode,
     this.onNavigateUp,
+    this.onNavigateLeft,
     this.onBack,
     this.onFocusChange,
   });
@@ -73,6 +78,7 @@ class _FocusableMediaCardState extends State<FocusableMediaCard> {
       onSelect: () => _mediaCardKey.currentState?.handleTap(),
       onLongPress: () => _mediaCardKey.currentState?.showContextMenu(),
       onNavigateUp: widget.onNavigateUp,
+      onNavigateLeft: widget.onNavigateLeft,
       onBack: widget.onBack,
       onFocusChange: widget.onFocusChange,
       enableLongPress: true,

lib/widgets/hub_section.dart

@@ -47,6 +47,10 @@ class HubSection extends StatefulWidget {
   /// Used to navigate focus to the tab bar.
   final VoidCallback? onNavigateUp;
 
+  /// Called when the user presses LEFT while at the leftmost item (index 0).
+  /// Used to navigate focus to the sidebar.
+  final VoidCallback? onNavigateToSidebar;
+
   const HubSection({
     super.key,
     required this.hub,
@@ -58,6 +62,7 @@ class HubSection extends StatefulWidget {
     this.onVerticalNavigation,
     this.onBack,
     this.onNavigateUp,
+    this.onNavigateToSidebar,
   });
 
   @override
@@ -225,15 +230,18 @@ class HubSectionState extends State<HubSection> {
     final itemCount = widget.hub.items.length;
     if (itemCount == 0) return KeyEventResult.ignored;
 
-    // Left: move to previous item, ALWAYS consume to prevent escape
+    // Left: move to previous item, or navigate to sidebar at left edge
     if (key.isLeftKey) {
       if (_focusedIndex > 0) {
         _focusedIndex--;
         HubFocusMemory.setForHub(widget.hub.hubKey, _focusedIndex);
         _scrollToIndex(_focusedIndex);
         setState(() {});
+      } else if (widget.onNavigateToSidebar != null) {
+        // At leftmost item: navigate to sidebar
+        widget.onNavigateToSidebar!();
       }
-      // At leftmost item: do nothing, but consume event to prevent focus escape
+      // Always consume to prevent focus escape
       return KeyEventResult.handled;
     }
 

lib/widgets/side_navigation_rail.dart

@@ -32,6 +32,9 @@ class NavigationRailItem extends StatelessWidget {
   final BorderRadius borderRadius;
   final double iconSize;
 
+  /// Called when RIGHT arrow is pressed to navigate to content area.
+  final VoidCallback? onNavigateRight;
+
   const NavigationRailItem({
     super.key,
     required this.icon,
@@ -46,6 +49,7 @@ class NavigationRailItem extends StatelessWidget {
     this.autofocus = false,
     this.borderRadius = const BorderRadius.all(Radius.circular(12)),
     this.iconSize = 22,
+    this.onNavigateRight,
   });
 
   @override
@@ -61,6 +65,11 @@ class NavigationRailItem extends StatelessWidget {
           onTap();
           return KeyEventResult.handled;
         }
+        // RIGHT arrow navigates to content area
+        if (event.logicalKey == LogicalKeyboardKey.arrowRight && onNavigateRight != null) {
+          onNavigateRight!();
+          return KeyEventResult.handled;
+        }
         return KeyEventResult.ignored;
       },
       child: Material(
@@ -124,6 +133,9 @@ class SideNavigationRail extends StatefulWidget {
   final ValueChanged<int> onDestinationSelected;
   final ValueChanged<String> onLibrarySelected;
 
+  /// Called when RIGHT arrow is pressed to navigate to content without selecting.
+  final VoidCallback? onNavigateToContent;
+
   const SideNavigationRail({
     super.key,
     required this.selectedIndex,
@@ -133,6 +145,7 @@ class SideNavigationRail extends StatefulWidget {
     this.alwaysExpanded = false,
     required this.onDestinationSelected,
     required this.onLibrarySelected,
+    this.onNavigateToContent,
   });
 
   @override
@@ -408,6 +421,7 @@ class SideNavigationRailState extends State<SideNavigationRail> {
       onTap: onTap,
       focusNode: focusNode,
       autofocus: autofocus,
+      onNavigateRight: widget.onNavigateToContent,
     );
   }
 
@@ -431,6 +445,11 @@ class SideNavigationRailState extends State<SideNavigationRail> {
               });
               return KeyEventResult.handled;
             }
+            // RIGHT arrow navigates to content area
+            if (event.logicalKey == LogicalKeyboardKey.arrowRight && widget.onNavigateToContent != null) {
+              widget.onNavigateToContent!();
+              return KeyEventResult.handled;
+            }
             return KeyEventResult.ignored;
           },
           child: Material(
@@ -605,6 +624,7 @@ class SideNavigationRailState extends State<SideNavigationRail> {
         focusNode: focusNode,
         borderRadius: BorderRadius.circular(tokens(context).radiusSm),
         iconSize: 18,
+        onNavigateRight: widget.onNavigateToContent,
       ),
     );
   }