fix keyboard, finish 05

src/App.tsx

@@ -2,76 +2,39 @@ import { createSignal } from "solid-js"
 import { Layout } from "./components/Layout"
 import { Navigation } from "./components/Navigation"
 import { TabNavigation } from "./components/TabNavigation"
-import { KeyboardHandler } from "./components/KeyboardHandler"
 import { SyncPanel } from "./components/SyncPanel"
 import { FeedList } from "./components/FeedList"
 import { LoginScreen } from "./components/LoginScreen"
 import { CodeValidation } from "./components/CodeValidation"
 import { OAuthPlaceholder } from "./components/OAuthPlaceholder"
 import { SyncProfile } from "./components/SyncProfile"
+import { SearchPage } from "./components/SearchPage"
+import { DiscoverPage } from "./components/DiscoverPage"
 import { useAuthStore } from "./stores/auth"
+import { useAppKeyboard } from "./hooks/useAppKeyboard"
 import type { TabId } from "./components/Tab"
-import type { Feed, FeedVisibility } from "./types/feed"
 import type { AuthScreen } from "./types/auth"
 
-// Mock data for demonstration
-const MOCK_FEEDS: Feed[] = [
-  {
-    id: "1",
-    podcast: {
-      id: "p1",
-      title: "The Daily Tech News",
-      description: "Your daily dose of technology news and insights from around the world.",
-      feedUrl: "https://example.com/tech.rss",
-      lastUpdated: new Date(),
-      isSubscribed: true,
-    },
-    episodes: [],
-    visibility: "public" as FeedVisibility,
-    sourceId: "rss",
-    lastUpdated: new Date(),
-    isPinned: true,
-  },
-  {
-    id: "2",
-    podcast: {
-      id: "p2",
-      title: "Code & Coffee",
-      description: "Weekly discussions about programming, software development, and coffee.",
-      feedUrl: "https://example.com/code.rss",
-      lastUpdated: new Date(Date.now() - 86400000),
-      isSubscribed: true,
-    },
-    episodes: [],
-    visibility: "private" as FeedVisibility,
-    sourceId: "rss",
-    lastUpdated: new Date(Date.now() - 86400000),
-    isPinned: false,
-  },
-  {
-    id: "3",
-    podcast: {
-      id: "p3",
-      title: "Science Explained",
-      description: "Breaking down complex scientific topics for curious minds.",
-      feedUrl: "https://example.com/science.rss",
-      lastUpdated: new Date(Date.now() - 172800000),
-      isSubscribed: true,
-    },
-    episodes: [],
-    visibility: "public" as FeedVisibility,
-    sourceId: "itunes",
-    lastUpdated: new Date(Date.now() - 172800000),
-    isPinned: false,
-  },
-]
-
 export function App() {
   const [activeTab, setActiveTab] = createSignal<TabId>("discover")
   const [authScreen, setAuthScreen] = createSignal<AuthScreen>("login")
   const [showAuthPanel, setShowAuthPanel] = createSignal(false)
+  const [inputFocused, setInputFocused] = createSignal(false)
   const auth = useAuthStore()
 
+  // Centralized keyboard handler for all tab navigation and shortcuts
+  useAppKeyboard({
+    get activeTab() { return activeTab() },
+    onTabChange: setActiveTab,
+    inputFocused: inputFocused(),
+    onAction: (action) => {
+      if (action === "escape") {
+        setShowAuthPanel(false)
+        setInputFocused(false)
+      }
+    },
+  })
+
   const renderContent = () => {
     const tab = activeTab()
 
@@ -79,7 +42,6 @@ export function App() {
       case "feeds":
         return (
           <FeedList
-            feeds={MOCK_FEEDS}
             focused={true}
             showEpisodeCount={true}
             showLastUpdated={true}
@@ -168,7 +130,22 @@ export function App() {
         )
 
       case "discover":
+        return (
+          <DiscoverPage focused={!inputFocused()} />
+        )
+
       case "search":
+        return (
+          <SearchPage
+            focused={!inputFocused()}
+            onInputFocusChange={setInputFocused}
+            onSubscribe={(result) => {
+              // Would add to feeds
+              console.log("Subscribe to:", result.podcast.title)
+            }}
+          />
+        )
+
       case "player":
       default:
         return (
@@ -176,7 +153,7 @@ export function App() {
             <text>
               <strong>{tab}</strong>
               <br />
-              <span fg="gray">Content placeholder - coming in later phases</span>
+              <span fg="gray">Player - coming in later phases</span>
             </text>
           </box>
         )
@@ -184,17 +161,15 @@ export function App() {
   }
 
   return (
-    <KeyboardHandler onTabSelect={setActiveTab}>
-      <Layout
-        header={
-          <TabNavigation activeTab={activeTab()} onTabSelect={setActiveTab} />
-        }
-        footer={
-          <Navigation activeTab={activeTab()} onTabSelect={setActiveTab} />
-        }
-      >
-        <box style={{ padding: 1 }}>{renderContent()}</box>
-      </Layout>
-    </KeyboardHandler>
+    <Layout
+      header={
+        <TabNavigation activeTab={activeTab()} onTabSelect={setActiveTab} />
+      }
+      footer={
+        <Navigation activeTab={activeTab()} onTabSelect={setActiveTab} />
+      }
+    >
+      <box style={{ padding: 1 }}>{renderContent()}</box>
+    </Layout>
   )
 }