missing md

src/App.tsx

@@ -2,7 +2,6 @@ import { createSignal } from "solid-js";
 import { Layout } from "./components/Layout";
 import { Navigation } from "./components/Navigation";
 import { TabNavigation } from "./components/TabNavigation";
-import { SyncPanel } from "./components/SyncPanel";
 import { FeedList } from "./components/FeedList";
 import { LoginScreen } from "./components/LoginScreen";
 import { CodeValidation } from "./components/CodeValidation";
@@ -10,6 +9,8 @@ import { OAuthPlaceholder } from "./components/OAuthPlaceholder";
 import { SyncProfile } from "./components/SyncProfile";
 import { SearchPage } from "./components/SearchPage";
 import { DiscoverPage } from "./components/DiscoverPage";
+import { Player } from "./components/Player";
+import { SettingsScreen } from "./components/SettingsScreen";
 import { useAuthStore } from "./stores/auth";
 import { useFeedStore } from "./stores/feed";
 import { FeedVisibility } from "./types/feed";
@@ -101,29 +102,15 @@ export function App() {
         }
 
         return (
-          <box flexDirection="column" gap={1}>
-            <SyncPanel />
-            <box height={1} />
-            <box border padding={1}>
-              <box flexDirection="row" gap={2}>
-                <text fg="gray">Account:</text>
-                {auth.isAuthenticated ? (
-                  <text fg="green">Signed in as {auth.user?.email}</text>
-                ) : (
-                  <text fg="yellow">Not signed in</text>
-                )}
-                <box
-                  border
-                  padding={0}
-                  onMouseDown={() => setShowAuthPanel(true)}
-                >
-                  <text fg="cyan">
-                    {auth.isAuthenticated ? "[A] Account" : "[A] Sign In"}
-                  </text>
-                </box>
-              </box>
-            </box>
-          </box>
+          <SettingsScreen
+            onOpenAccount={() => setShowAuthPanel(true)}
+            accountLabel={
+              auth.isAuthenticated
+                ? `Signed in as ${auth.user?.email}`
+                : "Not signed in"
+            }
+            accountStatus={auth.isAuthenticated ? "signed-in" : "signed-out"}
+          />
         );
 
       case "discover":
@@ -154,13 +141,15 @@ export function App() {
         );
 
       case "player":
+        return <Player focused={!inputFocused()} />;
+
       default:
         return (
           <box border style={{ padding: 2 }}>
             <text>
               <strong>{tab}</strong>
               <br />
-              Player - coming in later phases
+              Coming soon
             </text>
           </box>
         );

src/components/DiscoverPage.tsx

@@ -39,15 +39,17 @@ export function DiscoverPage(props: DiscoverPageProps) {
     // Category navigation
     if (area === "categories") {
       if (key.name === "left" || key.name === "h") {
-        setCategoryIndex((i) => Math.max(0, i - 1))
-        const cat = DISCOVER_CATEGORIES[categoryIndex()]
+        const nextIndex = Math.max(0, categoryIndex() - 1)
+        setCategoryIndex(nextIndex)
+        const cat = DISCOVER_CATEGORIES[nextIndex]
         if (cat) discoverStore.setSelectedCategory(cat.id)
-        setShowIndex(0) // Reset show selection when changing category
+        setShowIndex(0)
         return
       }
       if (key.name === "right" || key.name === "l") {
-        setCategoryIndex((i) => Math.min(DISCOVER_CATEGORIES.length - 1, i + 1))
-        const cat = DISCOVER_CATEGORIES[categoryIndex()]
+        const nextIndex = Math.min(DISCOVER_CATEGORIES.length - 1, categoryIndex() + 1)
+        setCategoryIndex(nextIndex)
+        const cat = DISCOVER_CATEGORIES[nextIndex]
         if (cat) discoverStore.setSelectedCategory(cat.id)
         setShowIndex(0)
         return
@@ -67,10 +69,15 @@ export function DiscoverPage(props: DiscoverPageProps) {
     if (area === "shows") {
       const shows = discoverStore.filteredPodcasts()
       if (key.name === "down" || key.name === "j") {
+        if (shows.length === 0) return
         setShowIndex((i) => Math.min(i + 1, shows.length - 1))
         return
       }
       if (key.name === "up" || key.name === "k") {
+        if (shows.length === 0) {
+          setFocusArea("categories")
+          return
+        }
         const newIndex = showIndex() - 1
         if (newIndex < 0) {
           setFocusArea("categories")

src/components/FeedDetail.tsx

@@ -4,6 +4,7 @@
  */
 
 import { createSignal, For, Show } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
 import type { Feed } from "../types/feed"
 import type { Episode } from "../types/episode"
 import { format } from "date-fns"
@@ -72,6 +73,11 @@ export function FeedDetail(props: FeedDetailProps) {
     }
   }
 
+  useKeyboard((key) => {
+    if (!props.focused) return
+    handleKeyPress(key)
+  })
+
   return (
     <box flexDirection="column" gap={1}>
       {/* Header with back button */}

src/components/FeedList.tsx

@@ -4,6 +4,7 @@
  */
 
 import { createSignal, For, Show } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
 import { FeedItem } from "./FeedItem"
 import { useFeedStore } from "../stores/feed"
 import { FeedVisibility, FeedSortField } from "../types/feed"
@@ -65,6 +66,11 @@ export function FeedList(props: FeedListProps) {
     }
   }
 
+  useKeyboard((key) => {
+    if (!props.focused) return
+    handleKeyPress(key)
+  })
+
   const cycleVisibilityFilter = () => {
     const current = feedStore.filter().visibility
     let next: FeedVisibility | "all"