Automatic scrolling with keyboard nav controls

src/app/globals.css

@@ -75,6 +75,10 @@ body::before {
     border-radius: 3px;
 }
 
+[data-nav-id] {
+    scroll-margin: 200px;
+}
+
 html {
     scroll-behavior: smooth;
 }
@@ -746,4 +750,4 @@ body.theme-flash::after {
     backface-visibility: hidden;
     -webkit-perspective: 1000px;
     perspective: 1000px;
-}
+}

src/components/app/AppItem.tsx

@@ -74,6 +74,7 @@ export const AppItem = memo(function AppItem({
 
     return (
         <div
+            data-nav-id={`app:${app.id}`}
             role="checkbox"
             aria-checked={isSelected}
             aria-label={`${app.name}${!isAvailable ? ' (unavailable)' : ''}`}

src/components/app/CategoryHeader.tsx

@@ -43,6 +43,7 @@ export function CategoryHeader({
 }) {
     return (
         <button
+            data-nav-id={`category:${category}`}
             onClick={(e) => { e.stopPropagation(); onFocus?.(); onToggle(); }}
             tabIndex={-1}
             aria-expanded={isExpanded}

src/hooks/useKeyboardNavigation.ts

@@ -138,6 +138,25 @@ export function useKeyboardNavigation(
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [navItems, focusPos, onToggleCategory, onToggleApp]);
 
+    /* Scroll focused item into view automatically */
+    useEffect(() => {
+        if (!focusPos) return;
+
+        const item = navItems[focusPos.col]?.[focusPos.row];
+        if (!item) return;
+
+        const el = document.querySelector<HTMLElement>(
+            `[data-nav-id="${item.type}:${item.id}"]`
+        );
+
+        if (!el) return;
+        
+        el.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest',
+        });
+    }, [focusPos, navItems]);
+    
     return {
         focusPos,
         focusedItem,