redoing navigation logic to favor more local

2026-02-19 15:59:50 -05:00
parent 8e0f90f449
commit 1c65c85d02
9 changed files with 230 additions and 266 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { createSignal, createMemo, ErrorBoundary, Accessor } from "solid-js";
+import { createMemo, ErrorBoundary, Accessor } from "solid-js";
 import { useKeyboard, useSelectionHandler } from "@opentui/solid";
 import { TabNavigation } from "./components/TabNavigation";
 import { CodeValidation } from "@/components/CodeValidation";
@@ -15,25 +15,13 @@ import type { Episode } from "@/types/episode";
 import { DIRECTION, LayerGraph, TABS, LayerDepths } from "./utils/navigation";
 import { useTheme, ThemeProvider } from "./context/ThemeContext";
 import { KeybindProvider, useKeybinds } from "./context/KeybindContext";
+import { NavigationProvider, useNavigation } from "./context/NavigationContext";
 import { useAudioNavStore, AudioSource } from "./stores/audio-nav";

 const DEBUG = import.meta.env.DEBUG;

-export interface PageProps {
-  depth: Accessor<number>;
-  focusedIndex?: Accessor<number> | number;
-  focusedIndexValue?: number;
-}
-
 export function App() {
-  const [activeTab, setActiveTab] = createSignal<TABS>(TABS.FEED);
-  const [activeDepth, setActiveDepth] = createSignal(0); // not fixed matrix size
-  const [authScreen, setAuthScreen] = createSignal<AuthScreen>("login");
-  const [showAuthPanel, setShowAuthPanel] = createSignal(false);
-  const [inputFocused, setInputFocused] = createSignal(false);
-  const [layerDepth, setLayerDepth] = createSignal(0);
-  const [focusedIndex, setFocusedIndex] = createSignal(0);
-
+  const nav = useNavigation();
  const auth = useAuthStore();
  const feedStore = useFeedStore();
  const audio = useAudio();
@@ -44,15 +32,15 @@ export function App() {
  const audioNav = useAudioNavStore();

  useMultimediaKeys({
-    playerFocused: () => activeTab() === TABS.PLAYER && layerDepth() > 0,
-    inputFocused: () => inputFocused(),
+    playerFocused: () => nav.activeTab === TABS.PLAYER && nav.activeDepth > 0,
+    inputFocused: () => nav.inputFocused,
    hasEpisode: () => !!audio.currentEpisode(),
  });

  const handlePlayEpisode = (episode: Episode) => {
    audio.play(episode);
-    setActiveTab(TABS.PLAYER);
-    setLayerDepth(1);
+    nav.setActiveTab(TABS.PLAYER);
+    nav.setActiveDepth(1);
    audioNav.setSource(AudioSource.FEED);
  };

@@ -86,159 +74,83 @@ export function App() {
      const isSeekForward = keybind.match("audio-seek-forward", keyEvent);
      const isSeekBackward = keybind.match("audio-seek-backward", keyEvent);
      const isQuit = keybind.match("quit", keyEvent);
-
-      if (DEBUG) {
-        console.log("KeyEvent:", keyEvent);
-        console.log("Keybinds loaded:", {
-          up: keybind.keybinds.up,
-          down: keybind.keybinds.down,
-          left: keybind.keybinds.left,
-          right: keybind.keybinds.right,
-        });
-      }
-
-      if (isUp || isDown) {
-        const currentDepth = activeDepth();
-        const maxDepth = LayerDepths[activeTab()];
-
-        console.log("Navigation:", { isUp, isDown, currentDepth, maxDepth });
-
-        // Navigate within current depth layer
-        if (currentDepth < maxDepth) {
-          const newIndex = isUp ? focusedIndex() - 1 : focusedIndex() + 1;
-          setFocusedIndex(Math.max(0, Math.min(newIndex, maxDepth)));
-        }
-      }
-
-      // Horizontal movement - move within current layer
-      if (isLeft || isRight) {
-        const currentDepth = activeDepth();
-        const maxDepth = LayerDepths[activeTab()];
-
-        if (currentDepth < maxDepth) {
-          const newIndex = isLeft ? focusedIndex() - 1 : focusedIndex() + 1;
-          setFocusedIndex(Math.max(0, Math.min(newIndex, maxDepth)));
-        }
-      }
-
-      // Cycle through current depth
+      console.log({
+        up: isUp,
+        down: isDown,
+        left: isLeft,
+        right: isRight,
+        cycle: isCycle,
+        dive: isDive,
+        out: isOut,
+        audioToggle: isToggle,
+        audioNext: isNext,
+        audioPrev: isPrev,
+        audioSeekForward: isSeekForward,
+        audioSeekBackward: isSeekBackward,
+        quit: isQuit,
+      });
      if (isCycle) {
-        const currentDepth = activeDepth();
-        const maxDepth = LayerDepths[activeTab()];
-
-        if (currentDepth < maxDepth) {
-          const newIndex = (focusedIndex() + 1) % (maxDepth + 1);
-          setFocusedIndex(newIndex);
-        }
      }

-      // Increase depth
-      if (isDive) {
-        const currentDepth = activeDepth();
-        const maxDepth = LayerDepths[activeTab()];
-
-        if (currentDepth < maxDepth) {
-          setActiveDepth(currentDepth + 1);
-          setFocusedIndex(0);
-        }
-      }
-
-      // Decrease depth
-      if (isOut) {
-        const currentDepth = activeDepth();
-
-        if (currentDepth > 0) {
-          setActiveDepth(currentDepth - 1);
-          setFocusedIndex(0);
-        }
-      }
-
-      if (isToggle) {
-        audio.togglePlayback();
-      }
-
-      if (isNext) {
-        audio.next();
-      }
-
-      if (isPrev) {
-        audio.prev();
-      }
-
-      if (isSeekForward) {
-        audio.seekRelative(15);
-      }
-
-      if (isSeekBackward) {
-        audio.seekRelative(-15);
-      }
-
-      // Quit application
-      if (isQuit) {
-        process.exit(0);
-      }
+      // only handling top
    },
    { release: false },
  );

  return (
-    <KeybindProvider>
-      <ThemeProvider mode="dark">
-        <ErrorBoundary
-          fallback={(err) => (
-            <box border padding={2} borderColor={theme.error}>
-              <text fg={theme.error}>
-                Error: {err?.message ?? String(err)}
-                {"\n"}
-                Press a number key (1-6) to switch tabs.
-              </text>
-            </box>
-          )}
-        >
-          {DEBUG && (
-            <box flexDirection="row" width="100%" height={1}>
-              <text fg={theme.primary}>█</text>
-              <text fg={theme.secondary}>█</text>
-              <text fg={theme.accent}>█</text>
-              <text fg={theme.error}>█</text>
-              <text fg={theme.warning}>█</text>
-              <text fg={theme.success}>█</text>
-              <text fg={theme.info}>█</text>
-              <text fg={theme.text}>█</text>
-              <text fg={theme.textMuted}>█</text>
-              <text fg={theme.surface}>█</text>
-              <text fg={theme.background}>█</text>
-              <text fg={theme.border}>█</text>
-              <text fg={theme.borderActive}>█</text>
-              <text fg={theme.diffAdded}>█</text>
-              <text fg={theme.diffRemoved}>█</text>
-              <text fg={theme.diffContext}>█</text>
-              <text fg={theme.markdownText}>█</text>
-              <text fg={theme.markdownHeading}>█</text>
-              <text fg={theme.markdownLink}>█</text>
-              <text fg={theme.markdownCode}>█</text>
-              <text fg={theme.syntaxKeyword}>█</text>
-              <text fg={theme.syntaxString}>█</text>
-              <text fg={theme.syntaxNumber}>█</text>
-              <text fg={theme.syntaxFunction}>█</text>
-            </box>
-          )}
-          <box flexDirection="row" width="100%" height={1} />
-          <box
-            flexDirection="row"
-            width="100%"
-            height="100%"
-            backgroundColor={theme.surface}
-          >
-            <TabNavigation activeTab={activeTab()} onTabSelect={setActiveTab} />
-            {LayerGraph[activeTab()]({
-              depth: activeDepth,
-              focusedIndex: focusedIndex(),
-            })}
-            {/** TODO: Contextual controls based on tab/depth**/}
-          </box>
-        </ErrorBoundary>
-      </ThemeProvider>
-    </KeybindProvider>
+    <ErrorBoundary
+      fallback={(err) => (
+        <box border padding={2} borderColor={theme.error}>
+          <text fg={theme.error}>
+            Error: {err?.message ?? String(err)}
+            {"\n"}
+            Press a number key (1-6) to switch tabs.
+          </text>
+        </box>
+      )}
+    >
+      {DEBUG && (
+        <box flexDirection="row" width="100%" height={1}>
+          <text fg={theme.primary}>█</text>
+          <text fg={theme.secondary}>█</text>
+          <text fg={theme.accent}>█</text>
+          <text fg={theme.error}>█</text>
+          <text fg={theme.warning}>█</text>
+          <text fg={theme.success}>█</text>
+          <text fg={theme.info}>█</text>
+          <text fg={theme.text}>█</text>
+          <text fg={theme.textMuted}>█</text>
+          <text fg={theme.surface}>█</text>
+          <text fg={theme.background}>█</text>
+          <text fg={theme.border}>█</text>
+          <text fg={theme.borderActive}>█</text>
+          <text fg={theme.diffAdded}>█</text>
+          <text fg={theme.diffRemoved}>█</text>
+          <text fg={theme.diffContext}>█</text>
+          <text fg={theme.markdownText}>█</text>
+          <text fg={theme.markdownHeading}>█</text>
+          <text fg={theme.markdownLink}>█</text>
+          <text fg={theme.markdownCode}>█</text>
+          <text fg={theme.syntaxKeyword}>█</text>
+          <text fg={theme.syntaxString}>█</text>
+          <text fg={theme.syntaxNumber}>█</text>
+          <text fg={theme.syntaxFunction}>█</text>
+        </box>
+      )}
+      <box flexDirection="row" width="100%" height={1} />
+      <box
+        flexDirection="row"
+        width="100%"
+        height="100%"
+        backgroundColor={theme.surface}
+      >
+        <TabNavigation
+          activeTab={nav.activeTab}
+          onTabSelect={nav.setActiveTab}
+        />
+        {LayerGraph[nav.activeTab]()}
+        {/** TODO: Contextual controls based on tab/depth**/}
+      </box>
+    </ErrorBoundary>
  );
 }
--- a/src/context/NavigationContext.tsx
+++ b/src/context/NavigationContext.tsx
@@ -0,0 +1,27 @@
+import { createSignal } from "solid-js";
+import { createSimpleContext } from "./helper";
+import { TABS } from "../utils/navigation";
+
+export const { use: useNavigation, provider: NavigationProvider } = createSimpleContext({
+  name: "Navigation",
+  init: () => {
+    const [activeTab, setActiveTab] = createSignal<TABS>(TABS.FEED);
+    const [activeDepth, setActiveDepth] = createSignal(0);
+    const [inputFocused, setInputFocused] = createSignal(false);
+
+    return {
+      get activeTab() {
+        return activeTab();
+      },
+      get activeDepth() {
+        return activeDepth();
+      },
+      get inputFocused() {
+        return inputFocused();
+      },
+      setActiveTab,
+      setActiveDepth,
+      setInputFocused,
+    };
+  },
+});
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -9,6 +9,7 @@ import { App } from "./App";
 import { ThemeProvider } from "./context/ThemeContext";
 import { ToastProvider, Toast } from "./ui/toast";
 import { KeybindProvider } from "./context/KeybindContext";
+import { NavigationProvider } from "./context/NavigationContext";
 import { DialogProvider } from "./ui/dialog";
 import { CommandProvider } from "./ui/command";

@@ -24,12 +25,14 @@ render(
      <ToastProvider>
        <ThemeProvider mode="dark">
          <KeybindProvider>
-            <DialogProvider>
-              <CommandProvider>
-                <App />
-                <Toast />
-              </CommandProvider>
-            </DialogProvider>
+            <NavigationProvider>
+              <DialogProvider>
+                <CommandProvider>
+                  <App />
+                  <Toast />
+                </CommandProvider>
+              </DialogProvider>
+            </NavigationProvider>
          </KeybindProvider>
        </ThemeProvider>
      </ToastProvider>
--- a/src/pages/Discover/DiscoverPage.tsx
+++ b/src/pages/Discover/DiscoverPage.tsx
@@ -7,8 +7,8 @@ import { useKeyboard } from "@opentui/solid";
 import { useDiscoverStore, DISCOVER_CATEGORIES } from "@/stores/discover";
 import { useTheme } from "@/context/ThemeContext";
 import { PodcastCard } from "./PodcastCard";
-import { PageProps } from "@/App";
 import { SelectableBox, SelectableText } from "@/components/Selectable";
+import { useNavigation } from "@/context/NavigationContext";

 enum DiscoverPagePaneType {
  CATEGORIES = 1,
@@ -16,10 +16,11 @@ enum DiscoverPagePaneType {
 }
 export const DiscoverPaneCount = 2;

-export function DiscoverPage(props: PageProps) {
+export function DiscoverPage() {
  const discoverStore = useDiscoverStore();
  const [showIndex, setShowIndex] = createSignal(0);
  const [categoryIndex, setCategoryIndex] = createSignal(0);
+  const nav = useNavigation();

  const handleCategorySelect = (categoryId: string) => {
    discoverStore.setSelectedCategory(categoryId);
@@ -48,35 +49,32 @@ export function DiscoverPage(props: PageProps) {
      >
        <text
          fg={
-            props.depth() == DiscoverPagePaneType.CATEGORIES
+            nav.activeDepth == DiscoverPagePaneType.CATEGORIES
              ? theme.accent
              : theme.text
          }
        >
          Categories:
        </text>
-         <box flexDirection="column" gap={1}>
-           <For each={discoverStore.categories}>
-             {(category) => {
-               const isSelected = () =>
-                 discoverStore.selectedCategory() === category.id;
+        <box flexDirection="column" gap={1}>
+          <For each={discoverStore.categories}>
+            {(category) => {
+              const isSelected = () =>
+                discoverStore.selectedCategory() === category.id;

-                return (
-                  <SelectableBox
-                    selected={isSelected}
-                    onMouseDown={() => handleCategorySelect(category.id)}
-                  >
-                    <SelectableText
-                      selected={isSelected}
-                      primary
-                    >
-                      {category.icon} {category.name}
-                    </SelectableText>
-                  </SelectableBox>
-                );
-             }}
-           </For>
-         </box>
+              return (
+                <SelectableBox
+                  selected={isSelected}
+                  onMouseDown={() => handleCategorySelect(category.id)}
+                >
+                  <SelectableText selected={isSelected} primary>
+                    {category.icon} {category.name}
+                  </SelectableText>
+                </SelectableBox>
+              );
+            }}
+          </For>
+        </box>
      </box>
      <box
        flexDirection="column"
@@ -85,10 +83,10 @@ export function DiscoverPage(props: PageProps) {
        borderColor={theme.border}
      >
        <box padding={1}>
-             <SelectableText
-               selected={() => false}
-               primary={props.depth() == DiscoverPagePaneType.SHOWS}
-             >
+          <SelectableText
+            selected={() => false}
+            primary={nav.activeDepth == DiscoverPagePaneType.SHOWS}
+          >
            Trending in{" "}
            {DISCOVER_CATEGORIES.find(
              (c) => c.id === discoverStore.selectedCategory(),
@@ -102,7 +100,9 @@ export function DiscoverPage(props: PageProps) {
                {discoverStore.filteredPodcasts().length !== 0 ? (
                  <text fg={theme.warning}>Loading trending shows...</text>
                ) : (
-                  <text fg={theme.textMuted}>No podcasts found in this category.</text>
+                  <text fg={theme.textMuted}>
+                    No podcasts found in this category.
+                  </text>
                )}
              </box>
            }
@@ -119,7 +119,7 @@ export function DiscoverPage(props: PageProps) {
                      podcast={podcast}
                      selected={
                        index() === showIndex() &&
-                        props.depth() == DiscoverPagePaneType.SHOWS
+                        nav.activeDepth == DiscoverPagePaneType.SHOWS
                      }
                      onSelect={() => handleShowSelect(index())}
                      onSubscribe={() => handleSubscribe(podcast)}
--- a/src/pages/Feed/FeedPage.tsx
+++ b/src/pages/Feed/FeedPage.tsx
@@ -10,9 +10,9 @@ import { format } from "date-fns";
 import type { Episode } from "@/types/episode";
 import type { Feed } from "@/types/feed";
 import { useTheme } from "@/context/ThemeContext";
-import { PageProps } from "@/App";
 import { SelectableBox, SelectableText } from "@/components/Selectable";
 import { se } from "date-fns/locale";
+import { useNavigation } from "@/context/NavigationContext";

 enum FeedPaneType {
  FEED = 1,
@@ -22,10 +22,12 @@ export const FeedPaneCount = 1;
 /** Episodes to load per batch */
 const ITEMS_PER_BATCH = 50;

-export function FeedPage(props: PageProps) {
+export function FeedPage() {
  const feedStore = useFeedStore();
  const [isRefreshing, setIsRefreshing] = createSignal(false);
-  const [loadedEpisodesCount, setLoadedEpisodesCount] = createSignal(ITEMS_PER_BATCH);
+  const [loadedEpisodesCount, setLoadedEpisodesCount] =
+    createSignal(ITEMS_PER_BATCH);
+  const nav = useNavigation();

  const allEpisodes = () => feedStore.getAllEpisodesChronological();

@@ -86,15 +88,14 @@ export function FeedPage(props: PageProps) {
          </box>
        }
      >
-        <scrollbox height="100%" focused={props.depth() == FeedPaneType.FEED}>
+        <scrollbox height="100%" focused={nav.activeDepth == FeedPaneType.FEED}>
          <For
            each={Object.entries(episodesByDate()).sort(([a], [b]) =>
              b.localeCompare(a),
            )}
          >
            {([date, episode], groupIndex) => {
-              const index = typeof props.focusedIndex === 'function' ? props.focusedIndex() : props.focusedIndex;
-              const selected = () => groupIndex() === index;
+              const selected = () => groupIndex() === 1; // TODO: Manage selections locally
              return (
                <>
                  <box
--- a/src/pages/MyShows/MyShowsPage.tsx
+++ b/src/pages/MyShows/MyShowsPage.tsx
@@ -9,9 +9,9 @@ import { useFeedStore } from "@/stores/feed";
 import { useDownloadStore } from "@/stores/download";
 import { DownloadStatus } from "@/types/episode";
 import { format } from "date-fns";
-import { PageProps } from "@/App";
 import { useTheme } from "@/context/ThemeContext";
 import { useAudioNavStore, AudioSource } from "@/stores/audio-nav";
+import { useNavigation } from "@/context/NavigationContext";

 enum MyShowsPaneType {
  SHOWS = 1,
@@ -20,13 +20,16 @@ enum MyShowsPaneType {

 export const MyShowsPaneCount = 2;

-export function MyShowsPage(props: PageProps) {
+export function MyShowsPage() {
  const feedStore = useFeedStore();
  const downloadStore = useDownloadStore();
  const audioNav = useAudioNavStore();
  const [isRefreshing, setIsRefreshing] = createSignal(false);
+  const [showIndex, setShowIndex] = createSignal(0);
+  const [episodeIndex, setEpisodeIndex] = createSignal(0);
  const { theme } = useTheme();
  const mutedColor = () => theme.muted || theme.text;
+  const nav = useNavigation();

  /** Threshold: load more when within this many items of the end */
  const LOAD_MORE_THRESHOLD = 5;
@@ -34,9 +37,7 @@ export function MyShowsPage(props: PageProps) {
  const shows = () => feedStore.getFilteredFeeds();

  const selectedShow = createMemo(() => {
-    const s = shows();
-    const index = typeof props.focusedIndex === 'function' ? props.focusedIndex() : props.focusedIndex;
-    return index < s.length ? s[index] : undefined;
+    return shows()[0]; //TODO: Integrate with locally handled keyboard navigation
  });

  const episodes = createMemo(() => {
@@ -128,7 +129,7 @@ export function MyShowsPage(props: PageProps) {
        >
          <scrollbox
            height="100%"
-            focused={props.depth() == MyShowsPaneType.SHOWS}
+            focused={nav.activeDepth == MyShowsPaneType.SHOWS}
          >
            <For each={shows()}>
              {(feed, index) => (
@@ -143,7 +144,10 @@ export function MyShowsPage(props: PageProps) {
                  onMouseDown={() => {
                    setShowIndex(index());
                    setEpisodeIndex(0);
-                    audioNav.setSource(AudioSource.MY_SHOWS, selectedShow()?.podcast.id);
+                    audioNav.setSource(
+                      AudioSource.MY_SHOWS,
+                      selectedShow()?.podcast.id,
+                    );
                  }}
                >
                  <text
@@ -184,7 +188,7 @@ export function MyShowsPage(props: PageProps) {
          >
            <scrollbox
              height="100%"
-              focused={props.depth() == MyShowsPaneType.EPISODES}
+              focused={nav.activeDepth == MyShowsPaneType.EPISODES}
            >
              <For each={episodes()}>
                {(episode, index) => (
--- a/src/pages/Player/PlayerPage.tsx
+++ b/src/pages/Player/PlayerPage.tsx
@@ -1,4 +1,3 @@
-import { PageProps } from "@/App";
 import { PlaybackControls } from "./PlaybackControls";
 import { RealtimeWaveform } from "./RealtimeWaveform";
 import { useAudio } from "@/hooks/useAudio";
@@ -10,7 +9,7 @@ enum PlayerPaneType {
 }
 export const PlayerPaneCount = 1;

-export function PlayerPage(props: PageProps) {
+export function PlayerPage() {
  const audio = useAudio();
  const { theme } = useTheme();

@@ -40,7 +39,13 @@ export function PlayerPage(props: PageProps) {

      {audio.error() && <text fg={theme.error}>{audio.error()}</text>}

-      <box border borderColor={theme.border} padding={1} flexDirection="column" gap={1}>
+      <box
+        border
+        borderColor={theme.border}
+        padding={1}
+        flexDirection="column"
+        gap={1}
+      >
        <text fg={theme.text}>
          <strong>{audio.currentEpisode()?.title}</strong>
        </text>
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -8,9 +8,9 @@ import { useSearchStore } from "@/stores/search";
 import { SearchResults } from "./SearchResults";
 import { SearchHistory } from "./SearchHistory";
 import type { SearchResult } from "@/types/source";
-import { PageProps } from "@/App";
 import { MyShowsPage } from "../MyShows/MyShowsPage";
 import { useTheme } from "@/context/ThemeContext";
+import { useNavigation } from "@/context/NavigationContext";

 enum SearchPaneType {
  INPUT = 1,
@@ -19,19 +19,13 @@ enum SearchPaneType {
 }
 export const SearchPaneCount = 3;

-export function SearchPage(props: PageProps) {
+export function SearchPage() {
  const searchStore = useSearchStore();
  const [inputValue, setInputValue] = createSignal("");
  const [resultIndex, setResultIndex] = createSignal(0);
  const [historyIndex, setHistoryIndex] = createSignal(0);
  const { theme } = useTheme();
-
-  // Keep parent informed about input focus state
-  // TODO: have a global input focused prop in useKeyboard hook
-  //createEffect(() => {
-  //const isInputFocused = props.focused && focusArea() === "input";
-  //props.onInputFocusChange?.(isInputFocused);
-  //});
+  const nav = useNavigation();

  const handleSearch = async () => {
    const query = inputValue().trim();
@@ -75,7 +69,7 @@ export function SearchPage(props: PageProps) {
              setInputValue(value);
            }}
            placeholder="Enter podcast name, topic, or author..."
-            focused={props.depth() === SearchPaneType.INPUT}
+            focused={nav.activeDepth === SearchPaneType.INPUT}
            width={50}
          />
          <box
@@ -98,33 +92,42 @@ export function SearchPage(props: PageProps) {
        </Show>
      </box>

-        {/* Main Content - Results or History */}
-        <box flexDirection="row" height="100%" gap={2}>
-          {/* Results Panel */}
-          <box flexDirection="column" flexGrow={1} border borderColor={theme.border}>
-            <box padding={1}>
-              <text
-                fg={props.depth() === SearchPaneType.RESULTS ? theme.primary : theme.muted}
-              >
-                Results ({searchStore.results().length})
-              </text>
-            </box>
-            <Show
-              when={searchStore.results().length > 0}
-              fallback={
-                <box padding={2}>
-                  <text fg={theme.muted}>
-                    {searchStore.query()
-                      ? "No results found"
-                      : "Enter a search term to find podcasts"}
-                  </text>
-                </box>
+      {/* Main Content - Results or History */}
+      <box flexDirection="row" height="100%" gap={2}>
+        {/* Results Panel */}
+        <box
+          flexDirection="column"
+          flexGrow={1}
+          border
+          borderColor={theme.border}
+        >
+          <box padding={1}>
+            <text
+              fg={
+                nav.activeDepth === SearchPaneType.RESULTS
+                  ? theme.primary
+                  : theme.muted
              }
            >
+              Results ({searchStore.results().length})
+            </text>
+          </box>
+          <Show
+            when={searchStore.results().length > 0}
+            fallback={
+              <box padding={2}>
+                <text fg={theme.muted}>
+                  {searchStore.query()
+                    ? "No results found"
+                    : "Enter a search term to find podcasts"}
+                </text>
+              </box>
+            }
+          >
            <SearchResults
              results={searchStore.results()}
              selectedIndex={resultIndex()}
-              focused={props.depth() === SearchPaneType.RESULTS}
+              focused={nav.activeDepth === SearchPaneType.RESULTS}
              onSelect={handleResultSelect}
              onChange={setResultIndex}
              isSearching={searchStore.isSearching()}
@@ -138,7 +141,11 @@ export function SearchPage(props: PageProps) {
          <box padding={1} flexDirection="column">
            <box paddingBottom={1}>
              <text
-                fg={props.depth() === SearchPaneType.HISTORY ? theme.primary : theme.muted}
+                fg={
+                  nav.activeDepth === SearchPaneType.HISTORY
+                    ? theme.primary
+                    : theme.muted
+                }
              >
                History
              </text>
@@ -146,7 +153,7 @@ export function SearchPage(props: PageProps) {
            <SearchHistory
              history={searchStore.history()}
              selectedIndex={historyIndex()}
-              focused={props.depth() === SearchPaneType.HISTORY}
+              focused={nav.activeDepth === SearchPaneType.HISTORY}
              onSelect={handleHistorySelect}
              onRemove={searchStore.removeFromHistory}
              onClear={searchStore.clearHistory}
--- a/src/pages/Settings/SettingsPage.tsx
+++ b/src/pages/Settings/SettingsPage.tsx
@@ -5,7 +5,7 @@ import { useTheme } from "@/context/ThemeContext";
 import { PreferencesPanel } from "./PreferencesPanel";
 import { SyncPanel } from "./SyncPanel";
 import { VisualizerSettings } from "./VisualizerSettings";
-import { PageProps } from "@/App";
+import { useNavigation } from "@/context/NavigationContext";

 enum SettingsPaneType {
  SYNC = 1,
@@ -24,11 +24,9 @@ const SECTIONS: Array<{ id: SettingsPaneType; label: string }> = [
  { id: SettingsPaneType.ACCOUNT, label: "Account" },
 ];

-export function SettingsPage(props: PageProps) {
+export function SettingsPage() {
  const { theme } = useTheme();
-  const [activeSection, setActiveSection] = createSignal<SettingsPaneType>(
-    SettingsPaneType.SYNC,
-  );
+  const nav = useNavigation();

  return (
    <box flexDirection="column" gap={1} height="100%" width="100%">
@@ -40,13 +38,13 @@ export function SettingsPage(props: PageProps) {
              borderColor={theme.border}
              padding={0}
              backgroundColor={
-                activeSection() === section.id ? theme.primary : undefined
+                nav.activeDepth === section.id ? theme.primary : undefined
              }
-              onMouseDown={() => setActiveSection(section.id)}
+              onMouseDown={() => nav.setActiveDepth(section.id)}
            >
              <text
                fg={
-                  activeSection() === section.id ? theme.text : theme.textMuted
+                  nav.activeDepth === section.id ? theme.text : theme.textMuted
                }
              >
                [{index() + 1}] {section.label}
@@ -56,18 +54,25 @@ export function SettingsPage(props: PageProps) {
        </For>
      </box>

-      <box border borderColor={theme.border} flexGrow={1} padding={1} flexDirection="column" gap={1}>
-        {activeSection() === SettingsPaneType.SYNC && <SyncPanel />}
-        {activeSection() === SettingsPaneType.SOURCES && (
+      <box
+        border
+        borderColor={theme.border}
+        flexGrow={1}
+        padding={1}
+        flexDirection="column"
+        gap={1}
+      >
+        {nav.activeDepth === SettingsPaneType.SYNC && <SyncPanel />}
+        {nav.activeDepth === SettingsPaneType.SOURCES && (
          <SourceManager focused />
        )}
-        {activeSection() === SettingsPaneType.PREFERENCES && (
+        {nav.activeDepth === SettingsPaneType.PREFERENCES && (
          <PreferencesPanel />
        )}
-        {activeSection() === SettingsPaneType.VISUALIZER && (
+        {nav.activeDepth === SettingsPaneType.VISUALIZER && (
          <VisualizerSettings />
        )}
-        {activeSection() === SettingsPaneType.ACCOUNT && (
+        {nav.activeDepth === SettingsPaneType.ACCOUNT && (
          <box flexDirection="column" gap={1}>
            <text fg={theme.textMuted}>Account</text>
          </box>