Auto-commit 2026-03-11 16:27

- Changed nextPane/prevPane to use current tab's pane count instead of global TabsCount
- Added Page-specific pane counts mapping for accurate depth calculation
- Pages with 1 pane (Feed, Player) now skip depth navigation
- Fixed wrapping logic to respect each page's layout structure

.gitignore

@@ -27,10 +27,8 @@ report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 .eslintcache
 .cache
 *.tsbuildinfo
-*.lockb
+*.lock
 
-# IntelliJ based IDEs
-.idea
 
 # Finder (MacOS) folder config
 .DS_Store

package.json

@@ -1,5 +1,6 @@
 {
   "name": "podcast-tui-app",
+  "version": "0.1.0",
   "module": "src/index.tsx",
   "type": "module",
   "private": true,

src/App.tsx

@@ -1,7 +1,8 @@
-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";
+import { LoadingIndicator } from "@/components/LoadingIndicator";
 import { useAuthStore } from "@/stores/auth";
 import { useFeedStore } from "@/stores/feed";
 import { useAudio } from "@/hooks/useAudio";
@@ -12,37 +13,45 @@ import { useToast } from "@/ui/toast";
 import { useRenderer } from "@opentui/solid";
 import type { AuthScreen } from "@/types/auth";
 import type { Episode } from "@/types/episode";
-import { DIRECTION, LayerGraph, TABS } from "./utils/navigation";
-import { useTheme } from "./context/ThemeContext";
+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";
 
-export interface PageProps {
-  depth: Accessor<number>;
-}
+const DEBUG = import.meta.env.DEBUG;
 
 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 nav = useNavigation();
   const auth = useAuthStore();
   const feedStore = useFeedStore();
   const audio = useAudio();
   const toast = useToast();
   const renderer = useRenderer();
-  const { theme } = useTheme();
+  const themeContext = useTheme();
+  const theme = themeContext.theme;
+
+  // Create a reactive expression for background color
+  const backgroundColor = () => {
+    return themeContext.selected === "system"
+      ? "transparent"
+      : themeContext.theme.surface;
+  };
+  const keybind = useKeybinds();
+  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);
   };
 
   useSelectionHandler((selection: any) => {
@@ -62,11 +71,66 @@ export function App() {
 
   useKeyboard(
     (keyEvent) => {
-      //handle intra layer navigation
-      if (keyEvent.name == "up" || keyEvent.name) {
+      const isCycle = keybind.match("cycle", keyEvent);
+      const isUp = keybind.match("up", keyEvent);
+      const isDown = keybind.match("down", keyEvent);
+      const isLeft = keybind.match("left", keyEvent);
+      const isRight = keybind.match("right", keyEvent);
+      const isDive = keybind.match("dive", keyEvent);
+      const isOut = keybind.match("out", keyEvent);
+      const isToggle = keybind.match("audio-toggle", keyEvent);
+      const isNext = keybind.match("audio-next", keyEvent);
+      const isPrev = keybind.match("audio-prev", keyEvent);
+      const isSeekForward = keybind.match("audio-seek-forward", keyEvent);
+      const isSeekBackward = keybind.match("audio-seek-backward", keyEvent);
+      const isQuit = keybind.match("quit", keyEvent);
+      const isInverting = keybind.isInverting(keyEvent);
+
+      // unified navigation: left->right, top->bottom across all tabs
+      if (nav.activeDepth() == 0) {
+        // at top level: cycle through tabs
+        if (
+          (isCycle && !isInverting) ||
+          (isDown && !isInverting) ||
+          (isUp && isInverting)
+        ) {
+          nav.nextTab();
+          return;
+        }
+        if (
+          (isCycle && isInverting) ||
+          (isDown && isInverting) ||
+          (isUp && !isInverting)
+        ) {
+          nav.prevTab();
+          return;
+        }
+        // dive out to first pane
+        if (
+          (isDive && !isInverting) ||
+          (isOut && isInverting) ||
+          (isRight && !isInverting) ||
+          (isLeft && isInverting)
+        ) {
+          nav.setActiveDepth(1);
+        }
+      } else {
+        // in panes: navigate between them
+        if (
+          (isDive && isInverting) ||
+          (isOut && !isInverting) ||
+          (isRight && isInverting) ||
+          (isLeft && !isInverting)
+        ) {
+          nav.setActiveDepth(0);
+        } else if (isDown && !isInverting) {
+          nav.nextPane();
+        } else if (isUp && isInverting) {
+          nav.prevPane();
+        }
       }
     },
-    { release: false }, // Not strictly necessary
+    { release: false },
   );
 
   return (
@@ -82,14 +146,48 @@ export function App() {
       )}
     >
       <box
-        flexDirection="row"
+        flexDirection="column"
         width="100%"
         height="100%"
-        backgroundColor={theme.surface}
+        backgroundColor={
+          themeContext.selected === "system"
+            ? "transparent"
+            : themeContext.theme.surface
+        }
       >
-        <TabNavigation activeTab={activeTab()} onTabSelect={setActiveTab} />
-        {LayerGraph[activeTab()]({ depth: activeDepth })}
-        {/**TODO: Contextual controls based on tab/depth**/}
+        <LoadingIndicator />
+        {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="100%">
+          <TabNavigation />
+          {LayerGraph[nav.activeTab()]()}
+        </box>
       </box>
     </ErrorBoundary>
   );

src/components/LoadingIndicator.tsx

@@ -0,0 +1,24 @@
+import { createSignal, createMemo, onCleanup } from "solid-js";
+import { useTheme } from "@/context/ThemeContext";
+
+const spinnerChars = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+//TODO: Watch for actual loading state (fetching feeds)
+export function LoadingIndicator() {
+  const { theme } = useTheme();
+  const [index, setIndex] = createSignal(0);
+
+  const interval = setInterval(() => {
+    setIndex((i) => (i + 1) % spinnerChars.length);
+  }, 65);
+
+  onCleanup(() => clearInterval(interval));
+
+  const currentChar = createMemo(() => spinnerChars[index()]);
+
+  return (
+    <box flexDirection="row" justifyContent="flex-end" alignItems="flex-start">
+      <text fg={theme.primary} content={currentChar()} />
+    </box>
+  );
+}

src/components/Navigation.tsx

@@ -1,4 +1,5 @@
 import type { TabId } from "./Tab"
+import { useTheme } from "@/context/ThemeContext"
 
 type NavigationProps = {
   activeTab: TabId
@@ -6,9 +7,10 @@ type NavigationProps = {
 }
 
 export function Navigation(props: NavigationProps) {
+  const { theme } = useTheme();
   return (
     <box style={{ flexDirection: "row", width: "100%", height: 1 }}>
-      <text>
+      <text fg={theme.text}>
         {props.activeTab === "feed" ? "[" : " "}Feed{props.activeTab === "feed" ? "]" : " "}
         <span> </span>
         {props.activeTab === "shows" ? "[" : " "}My Shows{props.activeTab === "shows" ? "]" : " "}

src/components/Selectable.tsx

@@ -0,0 +1,81 @@
+import { useTheme } from "@/context/ThemeContext";
+import { children as solidChildren } from "solid-js";
+import type { ParentComponent } from "solid-js";
+import type { BoxOptions, TextOptions } from "@opentui/core";
+
+export const SelectableBox: ParentComponent<
+  {
+    selected: () => boolean;
+  } & BoxOptions
+> = (props) => {
+  const themeContext = useTheme();
+  const { theme } = themeContext;
+
+  const child = solidChildren(() => props.children);
+
+  return (
+    <box
+      border={!!props.border}
+      borderColor={props.selected() ? theme.surface : theme.border}
+      backgroundColor={
+        props.selected()
+          ? theme.primary
+          : themeContext.selected === "system"
+            ? "transparent"
+            : themeContext.theme.surface
+      }
+      {...props}
+    >
+      {child()}
+    </box>
+  );
+};
+
+enum ColorSet {
+  PRIMARY,
+  SECONDARY,
+  TERTIARY,
+  DEFAULT,
+}
+function getTextColor(set: ColorSet, selected: () => boolean) {
+  const { theme } = useTheme();
+  switch (set) {
+    case ColorSet.PRIMARY:
+      return selected() ? theme.textSelectedPrimary : theme.textPrimary;
+    case ColorSet.SECONDARY:
+      return selected() ? theme.textSelectedSecondary : theme.textSecondary;
+    case ColorSet.TERTIARY:
+      return selected() ? theme.textSelectedTertiary : theme.textTertiary;
+    default:
+      return theme.textPrimary;
+  }
+}
+
+export const SelectableText: ParentComponent<
+  {
+    selected: () => boolean;
+    primary?: boolean;
+    secondary?: boolean;
+    tertiary?: boolean;
+  } & TextOptions
+> = (props) => {
+  const child = solidChildren(() => props.children);
+
+  return (
+    <text
+      fg={getTextColor(
+        props.primary
+          ? ColorSet.PRIMARY
+          : props.secondary
+            ? ColorSet.SECONDARY
+            : props.tertiary
+              ? ColorSet.TERTIARY
+              : ColorSet.DEFAULT,
+        props.selected,
+      )}
+      {...props}
+    >
+      {child()}
+    </text>
+  );
+};

src/components/ShortcutHelp.tsx

@@ -1,24 +1,26 @@
 import { shortcuts } from "@/config/shortcuts";
+import { useTheme } from "@/context/ThemeContext";
 
 export function ShortcutHelp() {
+  const { theme } = useTheme();
   return (
     <box border title="Shortcuts" style={{ padding: 1 }}>
       <box style={{ flexDirection: "column" }}>
         <box style={{ flexDirection: "row" }}>
-          <text>{shortcuts[0]?.keys ?? ""} </text>
-          <text>{shortcuts[0]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[0]?.keys ?? ""} </text>
+          <text fg={theme.text}>{shortcuts[0]?.action ?? ""}</text>
         </box>
         <box style={{ flexDirection: "row" }}>
-          <text>{shortcuts[1]?.keys ?? ""} </text>
-          <text>{shortcuts[1]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[1]?.keys ?? ""} </text>
+          <text fg={theme.text}>{shortcuts[1]?.action ?? ""}</text>
         </box>
         <box style={{ flexDirection: "row" }}>
-          <text>{shortcuts[2]?.keys ?? ""} </text>
-          <text>{shortcuts[2]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[2]?.keys ?? ""} </text>
+          <text fg={theme.text}>{shortcuts[2]?.action ?? ""}</text>
         </box>
         <box style={{ flexDirection: "row" }}>
-          <text>{shortcuts[3]?.keys ?? ""} </text>
-          <text>{shortcuts[3]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[3]?.keys ?? ""} </text>
+          <text fg={theme.text}>{shortcuts[3]?.action ?? ""}</text>
         </box>
       </box>
     </box>

src/components/TabNavigation.tsx

@@ -1,11 +1,8 @@
 import { useTheme } from "@/context/ThemeContext";
-import { TABS } from "@/utils/navigation";
+import { TABS, TabsCount } from "@/utils/navigation";
 import { For } from "solid-js";
-
-interface TabNavigationProps {
-  activeTab: TABS;
-  onTabSelect: (tab: TABS) => void;
-}
+import { SelectableBox, SelectableText } from "@/components/Selectable";
+import { useNavigation } from "@/context/NavigationContext";
 
 export const tabs: TabDefinition[] = [
   { id: TABS.FEED, label: "Feed" },
@@ -16,37 +13,36 @@ export const tabs: TabDefinition[] = [
   { id: TABS.SETTINGS, label: "Settings" },
 ];
 
-export function TabNavigation(props: TabNavigationProps) {
+export function TabNavigation() {
   const { theme } = useTheme();
+  const { activeTab, setActiveTab, activeDepth } = useNavigation();
   return (
     <box
-      backgroundColor={theme.surface}
+      border
+      borderColor={activeDepth() !== 0 ? theme.border : theme.accent}
+      backgroundColor={"transparent"}
       style={{
         flexDirection: "column",
-        width: 10,
-        flexGrow: 1,
+        width: 12,
+        height: TabsCount * 3 + 2,
       }}
     >
       <For each={tabs}>
         {(tab) => (
-          <box
+          <SelectableBox
             border
-            borderColor={theme.border}
-            onMouseDown={() => props.onTabSelect(tab.id)}
-            style={{
-              backgroundColor:
-                tab.id == props.activeTab ? theme.primary : "transparent",
-            }}
+            height={3}
+            selected={() => tab.id == activeTab()}
+            onMouseDown={() => setActiveTab(tab.id)}
           >
-            <text
-              style={{
-                fg: tab.id == props.activeTab ? "white" : theme.text,
-                alignSelf: "center",
-              }}
+            <SelectableText
+              selected={() => tab.id == activeTab()}
+              primary
+              alignSelf="center"
             >
               {tab.label}
-            </text>
-          </box>
+            </SelectableText>
+          </SelectableBox>
         )}
       </For>
     </box>

src/config/keybind.jsonc

@@ -6,12 +6,15 @@
   "cycle": ["tab"], // this will cycle no matter the depth/orientation
   "dive": ["return"],
   "out": ["esc"],
-  "inverse": ["shift"],
+  "inverseModifier": ["shift"],
   "leader": ":", // will not trigger while focused on input
   "quit": ["<leader>q"],
+  "refresh": ["<leader>r"],
   "audio-toggle": ["<leader>p"],
   "audio-pause": [],
   "audio-play": [],
   "audio-next": ["<leader>n"],
   "audio-prev": ["<leader>l"],
+  "audio-seek-forward": ["<leader>sf"],
+  "audio-seek-backward": ["<leader>sb"],
 }

src/context/KeybindContext.tsx

@@ -7,8 +7,6 @@ import {
 } from "../utils/keybinds-persistence";
 import { createStore } from "solid-js/store";
 
-// ── Type Definitions ────────────────────────────────────────────────────────────
-
 export type KeybindsResolved = {
   up: string[];
   down: string[];
@@ -17,17 +15,37 @@ export type KeybindsResolved = {
   cycle: string[]; // this will cycle no matter the depth/orientation
   dive: string[];
   out: string[];
-  inverse: string[];
+  inverseModifier: string;
   leader: string; // will not trigger while focused on input
   quit: string[];
+  select: string[]; // for selecting/activating items
   "audio-toggle": string[];
-  "audio-pause": [];
+  "audio-pause": string[];
   "audio-play": string[];
   "audio-next": string[];
   "audio-prev": string[];
+  "audio-seek-forward": string[];
+  "audio-seek-backward": string[];
 };
 
-// ── Context Implementation ────────────────────────────────────────────────────────────
+export enum KeybindAction {
+  UP,
+  DOWN,
+  LEFT,
+  RIGHT,
+  CYCLE,
+  DIVE,
+  OUT,
+  QUIT,
+  SELECT,
+  AUDIO_TOGGLE,
+  AUDIO_PAUSE,
+  AUDIO_PLAY,
+  AUDIO_NEXT,
+  AUDIO_PREV,
+  AUDIO_SEEK_F,
+  AUDIO_SEEK_B,
+}
 
 export const { use: useKeybinds, provider: KeybindProvider } =
   createSimpleContext({
@@ -41,15 +59,19 @@ export const { use: useKeybinds, provider: KeybindProvider } =
         cycle: [],
         dive: [],
         out: [],
-        inverse: [],
+        inverseModifier: "",
         leader: "",
         quit: [],
+        select: [],
+        refresh: [],
         "audio-toggle": [],
         "audio-pause": [],
         "audio-play": [],
         "audio-next": [],
         "audio-prev": [],
-      });
+        "audio-seek-forward": [],
+        "audio-seek-backward": [],
+      } as KeybindsResolved);
       const [ready, setReady] = createSignal(false);
 
       async function load() {
@@ -77,13 +99,22 @@ export const { use: useKeybinds, provider: KeybindProvider } =
 
         for (const key of keys) {
           if (evt.name === key) return true;
-          if (evt.shift && key.toLowerCase() !== key) return false;
-          if (evt.ctrl && !key.toLowerCase().includes("ctrl")) return false;
-          if (evt.meta && !key.toLowerCase().includes("meta")) return false;
         }
         return false;
       }
 
+      function isInverting(evt: {
+        name: string;
+        ctrl?: boolean;
+        meta?: boolean;
+        shift?: boolean;
+      }) {
+        if (store.inverseModifier === "ctrl" && evt.ctrl) return true;
+        if (store.inverseModifier === "meta" && evt.meta) return true;
+        if (store.inverseModifier === "shift" && evt.shift) return true;
+        return false;
+      }
+
       // Load on mount
       onMount(() => {
         load().catch(() => {});
@@ -99,6 +130,7 @@ export const { use: useKeybinds, provider: KeybindProvider } =
         save,
         print,
         match,
+        isInverting,
       };
     },
   });

src/context/NavigationContext.tsx

@@ -0,0 +1,73 @@
+import { createEffect, createSignal, on } from "solid-js";
+import { createSimpleContext } from "./helper";
+import { TABS, TabsCount, LayerDepths } from "@/utils/navigation";
+
+// Page-specific pane counts
+const PANE_COUNTS = {
+  [TABS.FEED]: 1,
+  [TABS.MYSHOWS]: 2,
+  [TABS.DISCOVER]: 2,
+  [TABS.SEARCH]: 3,
+  [TABS.PLAYER]: 1,
+  [TABS.SETTINGS]: 5,
+};
+
+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);
+
+      createEffect(
+        on(
+          () => activeTab,
+          () => setActiveDepth(0),
+        ),
+      );
+
+      const nextTab = () => {
+        if (activeTab() >= TabsCount) {
+          setActiveTab(1);
+          return;
+        }
+        setActiveTab(activeTab() + 1);
+      };
+
+      const prevTab = () => {
+        if (activeTab() <= 1) {
+          setActiveTab(TabsCount);
+          return;
+        }
+        setActiveTab(activeTab() - 1);
+      };
+
+      const nextPane = () => {
+        // Move to next pane within the current tab's pane structure
+        const count = PANE_COUNTS[activeTab()];
+        if (count <= 1) return; // No panes to navigate (feed/player)
+        setActiveDepth((prev) => (prev % count) + 1);
+      };
+
+      const prevPane = () => {
+        // Move to previous pane within the current tab's pane structure
+        const count = PANE_COUNTS[activeTab()];
+        if (count <= 1) return; // No panes to navigate (feed/player)
+        setActiveDepth((prev) => (prev - 2 + count) % count + 1);
+      };
+
+      return {
+        activeTab,
+        activeDepth,
+        inputFocused,
+        setActiveTab,
+        setActiveDepth,
+        setInputFocused,
+        nextTab,
+        prevTab,
+        nextPane,
+        prevPane,
+      };
+    },
+  });

src/context/ThemeContext.tsx

@@ -22,7 +22,7 @@ import {
   type TerminalColors,
 } from "@opentui/core";
 
-type ThemeResolved = {
+export type ThemeResolved = {
   primary: RGBA;
   secondary: RGBA;
   accent: RGBA;
@@ -32,7 +32,13 @@ type ThemeResolved = {
   info: RGBA;
   text: RGBA;
   textMuted: RGBA;
-  selectedListItemText: RGBA;
+  textPrimary: RGBA;
+  textSecondary: RGBA;
+  textTertiary: RGBA;
+  textSelectedPrimary: RGBA;
+  textSelectedSecondary: RGBA;
+  textSelectedTertiary: RGBA;
+
   background: RGBA;
   backgroundPanel: RGBA;
   backgroundElement: RGBA;
@@ -77,6 +83,7 @@ type ThemeResolved = {
   syntaxPunctuation: RGBA;
   muted?: RGBA;
   surface?: RGBA;
+  selectedListItemText?: RGBA;
   layerBackgrounds?: {
     layer0: RGBA;
     layer1: RGBA;

src/hooks/useAudio.ts

@@ -25,6 +25,9 @@ import { useAppStore } from "../stores/app"
 import { useProgressStore } from "../stores/progress"
 import { useMediaRegistry } from "../utils/media-registry"
 import type { Episode } from "../types/episode"
+import type { Feed } from "../types/feed"
+import { useAudioNavStore, AudioSource } from "../stores/audio-nav"
+import { useFeedStore } from "../stores/feed"
 
 export interface AudioControls {
   // Signals (reactive getters)
@@ -49,6 +52,8 @@ export interface AudioControls {
   setVolume: (volume: number) => Promise<void>
   setSpeed: (speed: number) => Promise<void>
   switchBackend: (name: BackendName) => Promise<void>
+  prev: () => Promise<void>
+  next: () => Promise<void>
 }
 
 // Singleton state — shared across all components that call useAudio()
@@ -401,6 +406,76 @@ export function useAudio(): AudioControls {
     await doSetSpeed(next)
   })
 
+  const audioNav = useAudioNavStore();
+  const feedStore = useFeedStore();
+
+  async function prev(): Promise<void> {
+    const current = currentEpisode();
+    if (!current) return;
+
+    const currentPos = position();
+    const currentDur = duration();
+
+    const NAV_START_THRESHOLD = 30;
+
+    if (currentPos > NAV_START_THRESHOLD && currentDur > 0) {
+      await seek(NAV_START_THRESHOLD);
+    } else {
+      const source = audioNav.getSource();
+      let episodes: Array<{ episode: Episode; feed: Feed }> = [];
+
+      if (source === AudioSource.FEED) {
+        episodes = feedStore.getAllEpisodesChronological();
+      } else if (source === AudioSource.MY_SHOWS) {
+        const podcastId = audioNav.getPodcastId();
+        if (!podcastId) return;
+
+        const feed = feedStore.getFilteredFeeds().find(f => f.podcast.id === podcastId);
+        if (!feed) return;
+
+        episodes = feed.episodes.map(ep => ({ episode: ep, feed }));
+      }
+
+      const currentIndex = audioNav.getCurrentIndex();
+      const newIndex = Math.max(0, currentIndex - 1);
+
+      if (newIndex < episodes.length && episodes[newIndex]) {
+        const { episode } = episodes[newIndex];
+        await play(episode);
+        audioNav.prev(newIndex);
+      }
+    }
+  }
+
+  async function next(): Promise<void> {
+    const current = currentEpisode();
+    if (!current) return;
+
+    const source = audioNav.getSource();
+    let episodes: Array<{ episode: Episode; feed: Feed }> = [];
+
+    if (source === AudioSource.FEED) {
+      episodes = feedStore.getAllEpisodesChronological();
+    } else if (source === AudioSource.MY_SHOWS) {
+      const podcastId = audioNav.getPodcastId();
+      if (!podcastId) return;
+
+      const feed = feedStore.getFilteredFeeds().find(f => f.podcast.id === podcastId);
+      if (!feed) return;
+
+      episodes = feed.episodes.map(ep => ({ episode: ep, feed }));
+    }
+
+    const currentIndex = audioNav.getCurrentIndex();
+    const newIndex = Math.min(episodes.length - 1, currentIndex + 1);
+
+    if (newIndex >= 0 && episodes[newIndex]) {
+      const { episode } = episodes[newIndex];
+      await play(episode);
+      audioNav.next(newIndex);
+    }
+  }
+
   onCleanup(() => {
     refCount--
     unsubPlay()
@@ -447,5 +522,7 @@ export function useAudio(): AudioControls {
     setVolume: doSetVolume,
     setSpeed: doSetSpeed,
     switchBackend,
+    prev,
+    next,
   }
 }

src/index.tsx

@@ -1,39 +1,225 @@
-// Hack: Force TERM to tmux-256color when running in tmux to enable
-// correct palette detection in @opentui/core
-//if (process.env.TMUX && !process.env.TERM?.includes("tmux")) {
-//process.env.TERM = "tmux-256color"
-//}
+const VERSION = "0.1.0";
 
-import { render, useRenderer } from "@opentui/solid";
-import { App } from "./App";
-import { ThemeProvider } from "./context/ThemeContext";
-import { ToastProvider, Toast } from "./ui/toast";
-import { KeybindProvider } from "./context/KeybindContext";
-import { DialogProvider } from "./ui/dialog";
-import { CommandProvider } from "./ui/command";
-
-function RendererSetup(props: { children: unknown }) {
-  const renderer = useRenderer();
-  renderer.disableStdoutInterception();
-  return props.children;
+interface CliArgs {
+  version: boolean;
+  query: string | null;
+  play: string | null;
 }
 
-render(
-  () => (
-    <RendererSetup>
-      <ToastProvider>
-        <ThemeProvider mode="dark">
-          <KeybindProvider>
-            <DialogProvider>
-              <CommandProvider>
-                <App />
-                <Toast />
-              </CommandProvider>
-            </DialogProvider>
-          </KeybindProvider>
-        </ThemeProvider>
-      </ToastProvider>
-    </RendererSetup>
-  ),
-  { useThread: false },
-);
+function parseArgs(): CliArgs {
+  const args = process.argv.slice(2);
+  const result: CliArgs = {
+    version: false,
+    query: null,
+    play: null,
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg === "--version" || arg === "-v") {
+      result.version = true;
+    } else if (arg === "--query" || arg === "-q") {
+      result.query = args[i + 1] || "";
+      i++;
+    } else if (arg === "--play" || arg === "-p") {
+      result.play = args[i + 1] || "";
+      i++;
+    }
+  }
+
+  return result;
+}
+
+const cliArgs = parseArgs();
+
+if (cliArgs.version) {
+  console.log(`PodTUI version ${VERSION}`);
+  process.exit(0);
+}
+
+if (cliArgs.query !== null || cliArgs.play !== null) {
+  import("./utils/feeds-persistence").then(async ({ loadFeedsFromFile }) => {
+    const feeds = await loadFeedsFromFile();
+
+    if (cliArgs.query !== null) {
+      const query = cliArgs.query;
+      const normalizedQuery = query.toLowerCase();
+
+      const matches = feeds.filter((feed) => {
+        const title = feed.podcast.title.toLowerCase();
+        return title.includes(normalizedQuery);
+      });
+
+      if (matches.length === 0) {
+        console.log(`No shows found matching: ${query}`);
+        if (feeds.length > 0) {
+          console.log("\nAvailable shows:");
+          feeds.slice(0, 5).forEach((feed) => {
+            console.log(`  - ${feed.podcast.title}`);
+          });
+          if (feeds.length > 5) {
+            console.log(`  ... and ${feeds.length - 5} more`);
+          }
+        }
+        process.exit(0);
+      }
+
+      if (matches.length === 1) {
+        const feed = matches[0];
+        console.log(`\n${feed.podcast.title}`);
+        if (feed.podcast.description) {
+          console.log(feed.podcast.description.substring(0, 200) + (feed.podcast.description.length > 200 ? "..." : ""));
+        }
+        console.log(`\nRecent episodes (${Math.min(5, feed.episodes.length)}):`);
+        feed.episodes.slice(0, 5).forEach((ep, idx) => {
+          const date = ep.pubDate instanceof Date ? ep.pubDate.toLocaleDateString() : String(ep.pubDate);
+          console.log(`  ${idx + 1}. ${ep.title} (${date})`);
+        });
+        process.exit(0);
+      }
+
+      console.log(`\nClosest matches for "${query}":`);
+      matches.slice(0, 5).forEach((feed, idx) => {
+        console.log(`  ${idx + 1}. ${feed.podcast.title}`);
+      });
+      process.exit(0);
+    }
+
+    if (cliArgs.play !== null) {
+      const playArg = cliArgs.play;
+      const normalizedArg = playArg.toLowerCase();
+
+      let feedResult: typeof feeds[0] | null = null;
+      let episodeResult: typeof feeds[0]["episodes"][0] | null = null;
+
+      if (normalizedArg === "latest") {
+        let latestFeed: typeof feeds[0] | null = null;
+        let latestEpisode: typeof feeds[0]["episodes"][0] | null = null;
+        let latestDate = 0;
+
+        for (const feed of feeds) {
+          if (feed.episodes.length > 0) {
+            const ep = feed.episodes[0];
+            const epDate = ep.pubDate instanceof Date ? ep.pubDate.getTime() : Number(ep.pubDate);
+            if (epDate > latestDate) {
+              latestDate = epDate;
+              latestFeed = feed;
+              latestEpisode = ep;
+            }
+          }
+        }
+
+        feedResult = latestFeed;
+        episodeResult = latestEpisode;
+      } else {
+        const parts = normalizedArg.split("/");
+        const showQuery = parts[0];
+        const episodeQuery = parts[1];
+
+        const matchingFeeds = feeds.filter((feed) =>
+          feed.podcast.title.toLowerCase().includes(showQuery)
+        );
+
+        if (matchingFeeds.length === 0) {
+          console.log(`No show found matching: ${showQuery}`);
+          process.exit(1);
+        }
+
+        const feed = matchingFeeds[0];
+
+        if (!episodeQuery) {
+          if (feed.episodes.length > 0) {
+            feedResult = feed;
+            episodeResult = feed.episodes[0];
+          } else {
+            console.log(`No episodes available for: ${feed.podcast.title}`);
+            process.exit(1);
+          }
+        } else if (episodeQuery === "latest") {
+          feedResult = feed;
+          episodeResult = feed.episodes[0];
+        } else {
+          const matchingEpisode = feed.episodes.find((ep) =>
+            ep.title.toLowerCase().includes(episodeQuery)
+          );
+
+          if (matchingEpisode) {
+            feedResult = feed;
+            episodeResult = matchingEpisode;
+          } else {
+            console.log(`Episode not found: ${episodeQuery}`);
+            console.log(`Available episodes for ${feed.podcast.title}:`);
+            feed.episodes.slice(0, 5).forEach((ep, idx) => {
+              console.log(`  ${idx + 1}. ${ep.title}`);
+            });
+            process.exit(1);
+          }
+        }
+      }
+
+      if (!feedResult || !episodeResult) {
+        console.log("Could not find episode to play");
+        process.exit(1);
+      }
+
+      console.log(`\nPlaying: ${episodeResult.title}`);
+      console.log(`Show: ${feedResult.podcast.title}`);
+
+      try {
+        const { createAudioBackend } = await import("./utils/audio-player");
+        const backend = createAudioBackend();
+        if (episodeResult.audioUrl) {
+          await backend.play(episodeResult.audioUrl);
+          console.log("Playback started (use the UI to control)");
+        } else {
+          console.log("No audio URL available for this episode");
+          process.exit(1);
+        }
+      } catch (err) {
+        console.error("Playback error:", err);
+        process.exit(1);
+      }
+    }
+  }).catch((err) => {
+    console.error("Error:", err);
+    process.exit(1);
+  });
+} else {
+  import("@opentui/solid").then(async ({ render, useRenderer }) => {
+    const { App } = await import("./App");
+    const { ThemeProvider } = await import("./context/ThemeContext");
+    const toast = await import("./ui/toast");
+    const { KeybindProvider } = await import("./context/KeybindContext");
+    const { NavigationProvider } = await import("./context/NavigationContext");
+    const { DialogProvider } = await import("./ui/dialog");
+    const { CommandProvider } = await import("./ui/command");
+
+    function RendererSetup(props: { children: unknown }) {
+      const renderer = useRenderer();
+      renderer.disableStdoutInterception();
+      return props.children;
+    }
+
+    render(
+      () => (
+        <RendererSetup>
+          <toast.ToastProvider>
+            <ThemeProvider mode="dark">
+              <KeybindProvider>
+                <NavigationProvider>
+                  <DialogProvider>
+                    <CommandProvider>
+                      <App />
+                      <toast.Toast />
+                    </CommandProvider>
+                  </DialogProvider>
+                </NavigationProvider>
+              </KeybindProvider>
+            </ThemeProvider>
+          </toast.ToastProvider>
+        </RendererSetup>
+      ),
+      { useThread: false },
+    );
+  });
+}

src/pages/Discover/DiscoverPage.tsx

@@ -2,12 +2,14 @@
  * DiscoverPage component - Main discover/browse interface for PodTUI
  */
 
-import { createSignal, For, Show } from "solid-js";
+import { createSignal, For, Show, onMount } from "solid-js";
 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";
+import { KeybindProvider, useKeybinds } from "@/context/KeybindContext";
 
 enum DiscoverPagePaneType {
   CATEGORIES = 1,
@@ -15,10 +17,49 @@ 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 keybind = useKeybinds();
+
+  onMount(() => {
+    useKeyboard(
+      (keyEvent: any) => {
+        const isDown = keybind.match("down", keyEvent);
+        const isUp = keybind.match("up", keyEvent);
+        const isCycle = keybind.match("cycle", keyEvent);
+        const isSelect = keybind.match("select", keyEvent);
+        const isInverting = keybind.isInverting(keyEvent);
+
+        if (isSelect) {
+          const filteredPodcasts = discoverStore.filteredPodcasts();
+          if (filteredPodcasts.length > 0 && showIndex() < filteredPodcasts.length) {
+            setShowIndex(showIndex() + 1);
+          }
+          return;
+        }
+
+        // don't handle pane navigation here - unified in App.tsx
+        if (nav.activeDepth() !== DiscoverPagePaneType.SHOWS) return;
+
+        const filteredPodcasts = discoverStore.filteredPodcasts();
+        if (filteredPodcasts.length === 0) return;
+
+        if (isDown && !isInverting()) {
+          setShowIndex((i) => (i + 1) % filteredPodcasts.length);
+        } else if (isUp && isInverting()) {
+          setShowIndex((i) => (i - 1 + filteredPodcasts.length) % filteredPodcasts.length);
+        } else if ((isCycle && !isInverting()) || (isDown && !isInverting())) {
+          setShowIndex((i) => (i + 1) % filteredPodcasts.length);
+        } else if ((isCycle && isInverting()) || (isUp && isInverting())) {
+          setShowIndex((i) => (i - 1 + filteredPodcasts.length) % filteredPodcasts.length);
+        }
+      },
+      { release: false },
+    );
+  });
 
   const handleCategorySelect = (categoryId: string) => {
     discoverStore.setSelectedCategory(categoryId);
@@ -41,13 +82,17 @@ export function DiscoverPage(props: PageProps) {
       <box
         border
         padding={1}
-        borderColor={theme.border}
+        borderColor={
+          nav.activeDepth() != DiscoverPagePaneType.CATEGORIES
+            ? theme.border
+            : theme.accent
+        }
         flexDirection="column"
         gap={1}
       >
         <text
           fg={
-            props.depth() == DiscoverPagePaneType.CATEGORIES
+            nav.activeDepth() == DiscoverPagePaneType.CATEGORIES
               ? theme.accent
               : theme.text
           }
@@ -61,72 +106,80 @@ export function DiscoverPage(props: PageProps) {
                 discoverStore.selectedCategory() === category.id;
 
               return (
-                <box
-                  border={isSelected()}
-                  backgroundColor={isSelected() ? theme.accent : undefined}
+                <SelectableBox
+                  selected={isSelected}
                   onMouseDown={() => handleCategorySelect(category.id)}
                 >
-                  <text fg={isSelected() ? theme.primary : theme.textMuted}>
+                  <SelectableText selected={isSelected} primary>
                     {category.icon} {category.name}
-                  </text>
-                </box>
+                  </SelectableText>
+                </SelectableBox>
               );
             }}
           </For>
         </box>
       </box>
-      <box
-        flexDirection="column"
-        flexGrow={1}
-        border
-        borderColor={theme.border}
-      >
-        <box padding={1}>
-          <text
-            fg={props.depth() == DiscoverPagePaneType.SHOWS ? theme.primary : theme.textMuted}
-          >
-            Trending in{" "}
-            {DISCOVER_CATEGORIES.find(
-              (c) => c.id === discoverStore.selectedCategory(),
-            )?.name ?? "All"}
-          </text>
-        </box>
-        <box flexDirection="column" height="100%">
-          <Show
-            fallback={
-              <box padding={2}>
-                {discoverStore.filteredPodcasts().length !== 0 ? (
-                  <text fg={theme.warning}>Loading trending shows...</text>
-                ) : (
-                  <text fg={theme.textMuted}>No podcasts found in this category.</text>
-                )}
-              </box>
-            }
-            when={
-              !discoverStore.isLoading() &&
-              discoverStore.filteredPodcasts().length === 0
-            }
-          >
-            <scrollbox>
-              <box flexDirection="column">
-                <For each={discoverStore.filteredPodcasts()}>
-                  {(podcast, index) => (
-                    <PodcastCard
-                      podcast={podcast}
-                      selected={
-                        index() === showIndex() &&
-                        props.depth() == DiscoverPagePaneType.SHOWS
-                      }
-                      onSelect={() => handleShowSelect(index())}
-                      onSubscribe={() => handleSubscribe(podcast)}
-                    />
+        <box
+          flexDirection="column"
+          flexGrow={1}
+          border
+          borderColor={
+            nav.activeDepth() == DiscoverPagePaneType.SHOWS
+              ? theme.accent
+              : theme.border
+          }
+        >
+          <box padding={1}>
+            <SelectableText
+              selected={() => false}
+              primary={nav.activeDepth() == DiscoverPagePaneType.SHOWS}
+            >
+              Trending in{" "}
+              {DISCOVER_CATEGORIES.find(
+                (c) => c.id === discoverStore.selectedCategory(),
+              )?.name ?? "All"}
+            </SelectableText>
+          </box>
+          <box flexDirection="column" height="100%">
+            <Show
+              fallback={
+                <box padding={2}>
+                  {discoverStore.filteredPodcasts().length !== 0 ? (
+                    <text fg={theme.warning}>Loading trending shows...</text>
+                  ) : (
+                    <text fg={theme.textMuted}>
+                      No podcasts found in this category.
+                    </text>
                   )}
-                </For>
-              </box>
-            </scrollbox>
-          </Show>
+                </box>
+              }
+              when={
+                !discoverStore.isLoading() &&
+                discoverStore.filteredPodcasts().length === 0
+              }
+            >
+              <scrollbox
+                focused={nav.activeDepth() == DiscoverPagePaneType.SHOWS}
+              >
+                <box flexDirection="column">
+                  <For each={discoverStore.filteredPodcasts()}>
+                    {(podcast, index) => (
+                      <PodcastCard
+                        podcast={podcast}
+                        selected={
+                          index() === showIndex() &&
+                          nav.activeDepth() == DiscoverPagePaneType.SHOWS
+                        }
+                        onSelect={() => handleShowSelect(index())}
+                        onSubscribe={() => handleSubscribe(podcast)}
+                      />
+                    )}
+                  </For>
+                </box>
+              </scrollbox>
+            </Show>
+          </box>
         </box>
-      </box>
     </box>
   );
 }

src/pages/Discover/PodcastCard.tsx

@@ -5,6 +5,7 @@
 import { Show, For } from "solid-js";
 import type { Podcast } from "@/types/podcast";
 import { useTheme } from "@/context/ThemeContext";
+import { SelectableBox, SelectableText } from "@/components/Selectable";
 
 type PodcastCardProps = {
   podcast: Podcast;
@@ -21,59 +22,64 @@ export function PodcastCard(props: PodcastCardProps) {
   };
 
   return (
-    <box
+    <SelectableBox
+      selected={() => props.selected}
       flexDirection="column"
       padding={1}
-      backgroundColor={props.selected ? theme.backgroundElement : undefined}
       onMouseDown={props.onSelect}
     >
-      {/* Title Row */}
       <box flexDirection="row" gap={2} alignItems="center">
-            <text fg={props.selected ? theme.primary : theme.text}>
-              <strong>{props.podcast.title}</strong>
-            </text>
+        <SelectableText selected={() => props.selected} primary>
+          <strong>{props.podcast.title}</strong>
+        </SelectableText>
 
         <Show when={props.podcast.isSubscribed}>
-            <text fg={theme.success}>[+]</text>
+          <text fg={theme.success}>[+]</text>
         </Show>
       </box>
 
       {/* Author */}
       <Show when={props.podcast.author && !props.compact}>
-            <text fg={theme.textMuted}>by {props.podcast.author}</text>
+        <SelectableText
+          selected={() => props.selected}
+          tertiary
+        >
+          by {props.podcast.author}
+        </SelectableText>
       </Show>
 
       {/* Description */}
       <Show when={props.podcast.description && !props.compact}>
-            <text fg={props.selected ? theme.text : theme.textMuted}>
+        <SelectableText
+          selected={() => props.selected}
+          tertiary
+        >
           {props.podcast.description!.length > 80
             ? props.podcast.description!.slice(0, 80) + "..."
             : props.podcast.description}
-        </text>
+        </SelectableText>
       </Show>
 
-      {/* Categories and Subscribe Button */}
-      <box
+      {/**<box
         flexDirection="row"
         justifyContent="space-between"
         marginTop={props.compact ? 0 : 1}
-      >
-        <box flexDirection="row" gap={1}>
-          <Show when={(props.podcast.categories ?? []).length > 0}>
-            <For each={(props.podcast.categories ?? []).slice(0, 2)}>
-                {(cat) => <text fg={theme.warning}>[{cat}]</text>}
-            </For>
-          </Show>
-        </box>
-
-        <Show when={props.selected}>
-          <box onMouseDown={handleSubscribeClick}>
-            <text fg={props.podcast.isSubscribed ? theme.error : theme.success}>
-              {props.podcast.isSubscribed ? "[Unsubscribe]" : "[Subscribe]"}
-            </text>
-          </box>
+      />**/}
+      <box flexDirection="row" gap={1}>
+        <Show when={(props.podcast.categories ?? []).length > 0}>
+          <For each={(props.podcast.categories ?? []).slice(0, 2)}>
+            {(cat) => <text fg={theme.warning}>[{cat}]</text>}
+          </For>
         </Show>
       </box>
-    </box>
+
+      <Show when={props.selected}>
+        <box onMouseDown={handleSubscribeClick}>
+          <text fg={props.podcast.isSubscribed ? theme.error : theme.success}>
+            {props.podcast.isSubscribed ? "[Unsubscribe]" : "[Subscribe]"}
+          </text>
+        </box>
+      </Show>
+    </SelectableBox>
   );
 }

src/pages/Feed/FeedDetail.tsx

@@ -9,6 +9,7 @@ import type { Feed } from "@/types/feed";
 import type { Episode } from "@/types/episode";
 import { format } from "date-fns";
 import { useTheme } from "@/context/ThemeContext";
+import { SelectableBox, SelectableText } from "@/components/Selectable";
 
 interface FeedDetailProps {
   feed: Feed;
@@ -55,6 +56,11 @@ export function FeedDetail(props: FeedDetailProps) {
       return;
     }
 
+    if (key.name === "v") {
+      props.feed.podcast.onToggleVisibility?.(props.feed.id);
+      return;
+    }
+
     if (key.name === "up" || key.name === "k") {
       setSelectedIndex((i) => Math.max(0, i - 1));
     } else if (key.name === "down" || key.name === "j") {
@@ -85,65 +91,71 @@ export function FeedDetail(props: FeedDetailProps) {
       {/* Header with back button */}
       <box flexDirection="row" justifyContent="space-between">
         <box border padding={0} onMouseDown={props.onBack} borderColor={theme.border}>
-            <text fg={theme.primary}>[Esc] Back</text>
+            <SelectableText selected={() => false} primary>[Esc] Back</SelectableText>
         </box>
         <box border padding={0} onMouseDown={() => setShowInfo((v) => !v)} borderColor={theme.border}>
-            <text fg={theme.primary}>[i] {showInfo() ? "Hide" : "Show"} Info</text>
+            <SelectableText selected={() => false} primary>[i] {showInfo() ? "Hide" : "Show"} Info</SelectableText>
+        </box>
+        <box border padding={0} onMouseDown={() => props.feed.podcast.onToggleVisibility?.(props.feed.id)} borderColor={theme.border}>
+            <SelectableText selected={() => false} primary>[v] Toggle Visibility</SelectableText>
         </box>
       </box>
 
       {/* Podcast info section */}
       <Show when={showInfo()}>
         <box border padding={1} flexDirection="column" gap={0} borderColor={theme.border}>
-          <text fg={theme.text}>
+          <SelectableText selected={() => false} primary>
             <strong>{props.feed.customName || props.feed.podcast.title}</strong>
-          </text>
+          </SelectableText>
           {props.feed.podcast.author && (
             <box flexDirection="row" gap={1}>
-                <text fg={theme.textMuted}>by</text>
-                <text fg={theme.primary}>{props.feed.podcast.author}</text>
+                <SelectableText selected={() => false} tertiary>by</SelectableText>
+                <SelectableText selected={() => false} primary>{props.feed.podcast.author}</SelectableText>
             </box>
           )}
           <box height={1} />
-          <text fg={theme.textMuted}>
+          <SelectableText selected={() => false} tertiary>
             {props.feed.podcast.description?.slice(0, 200)}
             {(props.feed.podcast.description?.length || 0) > 200 ? "..." : ""}
-          </text>
+          </SelectableText>
           <box height={1} />
           <box flexDirection="row" gap={2}>
             <box flexDirection="row" gap={1}>
-              <text fg={theme.textMuted}>Episodes:</text>
-              <text fg={theme.text}>{props.feed.episodes.length}</text>
+              <SelectableText selected={() => false} tertiary>Episodes:</SelectableText>
+              <SelectableText selected={() => false} tertiary>{props.feed.episodes.length}</SelectableText>
             </box>
             <box flexDirection="row" gap={1}>
-              <text fg={theme.textMuted}>Updated:</text>
-              <text fg={theme.text}>{formatDate(props.feed.lastUpdated)}</text>
+              <SelectableText selected={() => false} tertiary>Updated:</SelectableText>
+              <SelectableText selected={() => false} tertiary>{formatDate(props.feed.lastUpdated)}</SelectableText>
             </box>
-            <text fg={props.feed.visibility === "public" ? theme.success : theme.warning}>
+            <SelectableText selected={() => false} tertiary>
               {props.feed.visibility === "public" ? "[Public]" : "[Private]"}
-            </text>
-            {props.feed.isPinned && <text fg={theme.warning}>[Pinned]</text>}
+            </SelectableText>
+            {props.feed.isPinned && <SelectableText selected={() => false} tertiary>[Pinned]</SelectableText>}
+          </box>
+          <box flexDirection="row" gap={1}>
+            <SelectableText selected={() => false} tertiary>[v] Toggle Visibility</SelectableText>
           </box>
         </box>
       </Show>
 
       {/* Episodes header */}
       <box flexDirection="row" justifyContent="space-between">
-        <text>
+        <SelectableText selected={() => false} primary>
           <strong>Episodes</strong>
-        </text>
-        <text fg="gray">({episodes().length} total)</text>
+        </SelectableText>
+        <SelectableText selected={() => false} tertiary>({episodes().length} total)</SelectableText>
       </box>
 
       {/* Episode list */}
       <scrollbox height={showInfo() ? 10 : 15} focused={props.focused}>
         <For each={episodes()}>
           {(episode, index) => (
-            <box
+            <SelectableBox
+              selected={() => index() === selectedIndex()}
               flexDirection="column"
               gap={0}
               padding={1}
-                    backgroundColor={index() === selectedIndex() ? theme.backgroundElement : undefined}
               onMouseDown={() => {
                 setSelectedIndex(index());
                 if (props.onPlayEpisode) {
@@ -151,20 +163,24 @@ export function FeedDetail(props: FeedDetailProps) {
                 }
               }}
             >
-              <box flexDirection="row" gap={1}>
-                  <text fg={index() === selectedIndex() ? theme.primary : theme.textMuted}>
-                    {index() === selectedIndex() ? ">" : " "}
-                  </text>
-                  <text fg={index() === selectedIndex() ? theme.text : undefined}>
-                    {episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""}
-                    {episode.title}
-                  </text>
-              </box>
+              <SelectableText
+                selected={() => index() === selectedIndex()}
+                primary
+              >
+                {index() === selectedIndex() ? ">" : " "}
+              </SelectableText>
+              <SelectableText
+                selected={() => index() === selectedIndex()}
+                primary
+              >
+                {episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""}
+                {episode.title}
+              </SelectableText>
               <box flexDirection="row" gap={2} paddingLeft={2}>
-                  <text fg={theme.textMuted}>{formatDate(episode.pubDate)}</text>
-                  <text fg={theme.textMuted}>{formatDuration(episode.duration)}</text>
+                  <SelectableText selected={() => index() === selectedIndex()} tertiary>{formatDate(episode.pubDate)}</SelectableText>
+                  <SelectableText selected={() => index() === selectedIndex()} tertiary>{formatDuration(episode.duration)}</SelectableText>
               </box>
-            </box>
+            </SelectableBox>
           )}
         </For>
       </scrollbox>

src/pages/Feed/FeedFilter.tsx

@@ -14,7 +14,7 @@ interface FeedFilterProps {
   onFilterChange: (filter: FeedFilter) => void;
 }
 
-type FilterField = "visibility" | "sort" | "pinned" | "search";
+type FilterField = "visibility" | "sort" | "pinned" | "private" | "search";
 
 export function FeedFilterComponent(props: FeedFilterProps) {
   const { theme } = useTheme();
@@ -23,7 +23,7 @@ export function FeedFilterComponent(props: FeedFilterProps) {
     props.filter.searchQuery || "",
   );
 
-  const fields: FilterField[] = ["visibility", "sort", "pinned", "search"];
+  const fields: FilterField[] = ["visibility", "sort", "pinned", "private", "search"];
 
   const handleKeyPress = (key: { name: string; shift?: boolean }) => {
     if (key.name === "tab") {
@@ -39,10 +39,14 @@ export function FeedFilterComponent(props: FeedFilterProps) {
         cycleSort();
       } else if (focusField() === "pinned") {
         togglePinned();
+      } else if (focusField() === "private") {
+        togglePrivate();
       }
     } else if (key.name === "space") {
       if (focusField() === "pinned") {
         togglePinned();
+      } else if (focusField() === "private") {
+        togglePrivate();
       }
     }
   };
@@ -77,6 +81,13 @@ export function FeedFilterComponent(props: FeedFilterProps) {
     });
   };
 
+  const togglePrivate = () => {
+    props.onFilterChange({
+      ...props.filter,
+      showPrivate: !props.filter.showPrivate,
+    });
+  };
+
   const handleSearchInput = (value: string) => {
     setSearchValue(value);
     props.onFilterChange({ ...props.filter, searchQuery: value });
@@ -160,6 +171,22 @@ export function FeedFilterComponent(props: FeedFilterProps) {
             </text>
           </box>
         </box>
+
+        {/* Private filter */}
+        <box
+          border
+          padding={0}
+            backgroundColor={focusField() === "private" ? theme.backgroundElement : undefined}
+        >
+          <box flexDirection="row" gap={1}>
+            <text fg={focusField() === "private" ? theme.primary : theme.textMuted}>
+              Private:
+            </text>
+            <text fg={props.filter.showPrivate ? theme.warning : theme.textMuted}>
+              {props.filter.showPrivate ? "Yes" : "No"}
+            </text>
+          </box>
+        </box>
       </box>
 
       {/* Search box */}

src/pages/Feed/FeedItem.tsx

@@ -6,6 +6,7 @@
 import type { Feed, FeedVisibility } from "@/types/feed";
 import { format } from "date-fns";
 import { useTheme } from "@/context/ThemeContext";
+import { SelectableBox, SelectableText } from "@/components/Selectable";
 
 interface FeedItemProps {
   feed: Feed;
@@ -43,68 +44,111 @@ export function FeedItem(props: FeedItemProps) {
   if (props.compact) {
     // Compact single-line view
     return (
-      <box
+      <SelectableBox
+        selected={() => props.isSelected}
         flexDirection="row"
         gap={1}
-      backgroundColor={props.isSelected ? theme.backgroundElement : undefined}
-      paddingLeft={1}
-      paddingRight={1}
-    >
-      <text fg={props.isSelected ? theme.primary : theme.textMuted}>
-        {props.isSelected ? ">" : " "}
-      </text>
-      <text fg={visibilityColor()}>{visibilityIcon()}</text>
-      <text fg={props.isSelected ? theme.text : theme.accent}>
-        {props.feed.customName || props.feed.podcast.title}
-      </text>
-      {props.showEpisodeCount && <text fg={theme.textMuted}>({episodeCount()})</text>}
-      </box>
+        paddingLeft={1}
+        paddingRight={1}
+        onMouseDown={() => {}}
+      >
+        <SelectableText
+          selected={() => props.isSelected}
+          primary
+        >
+          {props.isSelected ? ">" : " "}
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          tertiary
+        >
+          {visibilityIcon()}
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          primary
+        >
+          {props.feed.customName || props.feed.podcast.title}
+        </SelectableText>
+        {props.showEpisodeCount && (
+          <SelectableText
+            selected={() => props.isSelected}
+            tertiary
+          >
+            ({episodeCount()})
+          </SelectableText>
+        )}
+      </SelectableBox>
     );
   }
 
   // Full view with details
   return (
-    <box
+    <SelectableBox
+      selected={() => props.isSelected}
       flexDirection="column"
       gap={0}
-      border={props.isSelected}
-      borderColor={props.isSelected ? theme.primary : undefined}
-      backgroundColor={props.isSelected ? theme.backgroundElement : undefined}
       padding={1}
+      onMouseDown={() => {}}
     >
       {/* Title row */}
       <box flexDirection="row" gap={1}>
-        <text fg={props.isSelected ? theme.primary : theme.textMuted}>
+        <SelectableText
+          selected={() => props.isSelected}
+          primary
+        >
           {props.isSelected ? ">" : " "}
-        </text>
-        <text fg={visibilityColor()}>{visibilityIcon()}</text>
-        <text fg={theme.warning}>{pinnedIndicator()}</text>
-        <text fg={props.isSelected ? theme.text : theme.text}>
-          <strong>
-            {props.feed.customName || props.feed.podcast.title}
-          </strong>
-        </text>
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          tertiary
+        >
+          {visibilityIcon()}
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          secondary
+        >
+          {pinnedIndicator()}
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          primary
+        >
+          <strong>{props.feed.customName || props.feed.podcast.title}</strong>
+        </SelectableText>
       </box>
 
       <box flexDirection="row" gap={2} paddingLeft={4}>
         {props.showEpisodeCount && (
-          <text fg={theme.textMuted}>
+          <SelectableText
+            selected={() => props.isSelected}
+            tertiary
+          >
             {episodeCount()} episodes ({unplayedCount()} new)
-          </text>
+          </SelectableText>
         )}
         {props.showLastUpdated && (
-          <text fg={theme.textMuted}>Updated: {formatDate(props.feed.lastUpdated)}</text>
+          <SelectableText
+            selected={() => props.isSelected}
+            tertiary
+          >
+            Updated: {formatDate(props.feed.lastUpdated)}
+          </SelectableText>
         )}
       </box>
 
       {props.feed.podcast.description && (
-        <box paddingLeft={4} paddingTop={0}>
-          <text fg={theme.textMuted}>
-            {props.feed.podcast.description.slice(0, 60)}
-            {props.feed.podcast.description.length > 60 ? "..." : ""}
-          </text>
-        </box>
+        <SelectableText
+          selected={() => props.isSelected}
+          paddingLeft={4}
+          paddingTop={0}
+          tertiary
+        >
+          {props.feed.podcast.description.slice(0, 60)}
+          {props.feed.podcast.description.length > 60 ? "..." : ""}
+        </SelectableText>
       )}
-    </box>
+    </SelectableBox>
   );
 }

src/pages/Feed/FeedList.tsx

@@ -58,6 +58,13 @@ export function FeedList(props: FeedListProps) {
       if (feed) {
         feedStore.togglePinned(feed.id);
       }
+    } else if (key.name === "v") {
+      // Toggle visibility on selected feed
+      const feed = feeds[selectedIndex()];
+      if (feed) {
+        const newVisibility = feed.visibility === FeedVisibility.PUBLIC ? FeedVisibility.PRIVATE : FeedVisibility.PUBLIC;
+        feedStore.updateFeed(feed.id, { visibility: newVisibility });
+      }
     } else if (key.name === "f") {
       // Cycle visibility filter
       cycleVisibilityFilter();

src/pages/Feed/FeedPage.tsx

@@ -1,32 +1,100 @@
 /**
  * FeedPage - Shows latest episodes across all subscribed shows
- * Reverse chronological order, like an inbox/timeline
+ * Reverse chronological order, grouped by date
  */
 
-import { createSignal, For, Show } from "solid-js";
+import { createSignal, For, Show, onMount } from "solid-js";
 import { useFeedStore } from "@/stores/feed";
 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 { useNavigation } from "@/context/NavigationContext";
+import { LoadingIndicator } from "@/components/LoadingIndicator";
+import { TABS } from "@/utils/navigation";
+import { useKeyboard } from "@opentui/solid";
+import { KeybindProvider, useKeybinds } from "@/context/KeybindContext";
 
 enum FeedPaneType {
   FEED = 1,
 }
 export const FeedPaneCount = 1;
 
-export function FeedPage(props: PageProps) {
-  const feedStore = useFeedStore();
-  const [selectedIndex, setSelectedIndex] = createSignal(0);
-  const [isRefreshing, setIsRefreshing] = createSignal(false);
+const ITEMS_PER_BATCH = 50;
 
+export function FeedPage() {
+  const feedStore = useFeedStore();
+  const nav = useNavigation();
+  const { theme } = useTheme();
+  const [selectedEpisodeID, setSelectedEpisodeID] = createSignal<
+    string | undefined
+  >();
   const allEpisodes = () => feedStore.getAllEpisodesChronological();
+  const keybind = useKeybinds();
+  const [focusedIndex, setFocusedIndex] = createSignal(0);
+
+  onMount(() => {
+    useKeyboard(
+      (keyEvent: any) => {
+        const isDown = keybind.match("down", keyEvent);
+        const isUp = keybind.match("up", keyEvent);
+        const isCycle = keybind.match("cycle", keyEvent);
+        const isSelect = keybind.match("select", keyEvent);
+        const isInverting = keybind.isInverting(keyEvent);
+
+        if (isSelect) {
+          const episodes = allEpisodes();
+          if (episodes.length > 0 && episodes[focusedIndex()]) {
+            setSelectedEpisodeID(episodes[focusedIndex()].episode.id);
+          }
+          return;
+        }
+
+        // don't handle pane navigation here - unified in App.tsx
+        if (nav.activeDepth() !== FeedPaneType.FEED) return;
+
+        const episodes = allEpisodes();
+        if (episodes.length === 0) return;
+
+        if (isDown && !isInverting()) {
+          setFocusedIndex((i) => (i + 1) % episodes.length);
+        } else if (isUp && isInverting()) {
+          setFocusedIndex((i) => (i - 1 + episodes.length) % episodes.length);
+        } else if ((isCycle && !isInverting()) || (isDown && !isInverting())) {
+          setFocusedIndex((i) => (i + 1) % episodes.length);
+        } else if ((isCycle && isInverting()) || (isUp && isInverting())) {
+          setFocusedIndex((i) => (i - 1 + episodes.length) % episodes.length);
+        }
+      },
+      { release: false },
+    );
+  });
 
   const formatDate = (date: Date): string => {
     return format(date, "MMM d, yyyy");
   };
 
+  const groupEpisodesByDate = () => {
+    const groups: Record<string, Array<{ episode: Episode; feed: Feed }>> = {};
+
+    for (const item of allEpisodes()) {
+      const dateKey = formatDate(new Date(item.episode.pubDate));
+      if (!groups[dateKey]) {
+        groups[dateKey] = [];
+      }
+      groups[dateKey].push(item);
+    }
+
+    return Object.entries(groups).sort(([a, _aItems], [b, _bItems]) => {
+      // Convert date strings back to Date objects for proper chronological sorting
+      const dateA = new Date(a);
+      const dateB = new Date(b);
+      // Sort in descending order (newest first)
+      return dateB.getTime() - dateA.getTime();
+    });
+  };
+
   const formatDuration = (seconds: number): string => {
     const mins = Math.floor(seconds / 60);
     const hrs = Math.floor(mins / 60);
@@ -34,25 +102,17 @@ export function FeedPage(props: PageProps) {
     return `${mins}m`;
   };
 
-  const handleRefresh = async () => {
-    setIsRefreshing(true);
-    await feedStore.refreshAllFeeds();
-    setIsRefreshing(false);
-  };
-
-  const { theme } = useTheme();
   return (
     <box
+      border
+      borderColor={
+        nav.activeDepth() !== FeedPaneType.FEED ? theme.border : theme.accent
+      }
       backgroundColor={theme.background}
       flexDirection="column"
       height="100%"
       width="100%"
     >
-      {/* Status line */}
-      <Show when={isRefreshing()}>
-        <text fg={theme.warning}>Refreshing feeds...</text>
-      </Show>
-
       <Show
         when={allEpisodes().length > 0}
         fallback={
@@ -63,35 +123,68 @@ export function FeedPage(props: PageProps) {
           </box>
         }
       >
-        {/**TODO: figure out wtf to do here **/}
-        <scrollbox height="100%" focused={props.depth() == FeedPaneType.FEED}>
-          <For each={allEpisodes()}>
-            {(item, index) => (
-              <box
-                flexDirection="column"
-                gap={0}
-                paddingLeft={1}
-                paddingRight={1}
-                paddingTop={0}
-                paddingBottom={0}
-                backgroundColor={
-                  index() === selectedIndex() ? theme.backgroundElement : undefined
-                }
-                onMouseDown={() => setSelectedIndex(index())}
-              >
-                <box flexDirection="row" gap={1}>
-                  <text fg={index() === selectedIndex() ? theme.primary : theme.textMuted}>
-                    {index() === selectedIndex() ? ">" : " "}
-                  </text>
-                  <text fg={index() === selectedIndex() ? theme.text : theme.text}>
-                    {item.episode.title}
-                  </text>
-                </box>
-                <box flexDirection="row" gap={2} paddingLeft={2}>
-                  <text fg={theme.primary}>{item.feed.podcast.title}</text>
-                  <text fg={theme.textMuted}>{formatDate(item.episode.pubDate)}</text>
-                  <text fg={theme.textMuted}>{formatDuration(item.episode.duration)}</text>
-                </box>
+        <scrollbox
+          height="100%"
+          focused={nav.activeDepth() == FeedPaneType.FEED}
+        >
+          <For each={groupEpisodesByDate()}>
+            {([date, items]) => (
+              <box flexDirection="column" gap={1} padding={1}>
+                <SelectableText selected={() => false} primary>
+                  {date}
+                </SelectableText>
+                <For each={items}>
+                  {(item) => {
+                    const isSelected = () => {
+                      if (
+                        nav.activeTab() == TABS.FEED &&
+                        nav.activeDepth() == FeedPaneType.FEED &&
+                        selectedEpisodeID() &&
+                        selectedEpisodeID() === item.episode.id
+                      ) {
+                        return true;
+                      }
+                      return false;
+                    };
+                    const isFocused = () => {
+                      const episodes = allEpisodes();
+                      const currentIndex = episodes.findIndex(
+                        (e: any) => e.episode.id === item.episode.id,
+                      );
+                      return currentIndex === focusedIndex();
+                    };
+                    return (
+                      <SelectableBox
+                        selected={isSelected}
+                        flexDirection="column"
+                        gap={0}
+                        paddingLeft={1}
+                        paddingRight={1}
+                        paddingTop={0}
+                        paddingBottom={0}
+                        onMouseDown={() => {
+                          setSelectedEpisodeID(item.episode.id);
+                          const episodes = allEpisodes();
+                          setFocusedIndex(
+                            episodes.findIndex((e: any) => e.episode.id === item.episode.id),
+                          );
+                        }}
+                      >
+                        <SelectableText selected={isSelected} primary>
+                          {item.episode.title}
+                        </SelectableText>
+                        <box flexDirection="row" gap={2} paddingLeft={2}>
+                          <SelectableText selected={isSelected} primary>
+                            {item.feed.podcast.title}
+                          </SelectableText>
+                          <SelectableText selected={isSelected} tertiary>
+                            {formatDuration(item.episode.duration)}
+                          </SelectableText>
+                        </box>
+                      </SelectableBox>
+                    );
+                  }}
+                </For>
               </box>
             )}
           </For>

src/pages/MyShows/MyShowsPage.tsx

@@ -4,16 +4,17 @@
  * Right panel: episodes for the selected show
  */
 
-import { createSignal, For, Show, createMemo, createEffect } from "solid-js";
+import { createSignal, For, Show, createMemo, createEffect, onMount } from "solid-js";
 import { useKeyboard } from "@opentui/solid";
 import { useFeedStore } from "@/stores/feed";
 import { useDownloadStore } from "@/stores/download";
 import { DownloadStatus } from "@/types/episode";
 import { format } from "date-fns";
-import type { Episode } from "@/types/episode";
-import type { Feed } from "@/types/feed";
-import { PageProps } from "@/App";
 import { useTheme } from "@/context/ThemeContext";
+import { useAudioNavStore, AudioSource } from "@/stores/audio-nav";
+import { useNavigation } from "@/context/NavigationContext";
+import { LoadingIndicator } from "@/components/LoadingIndicator";
+import { KeybindProvider, useKeybinds } from "@/context/KeybindContext";
 
 enum MyShowsPaneType {
   SHOWS = 1,
@@ -22,14 +23,58 @@ 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 [isRefreshing, setIsRefreshing] = createSignal(false);
   const { theme } = useTheme();
   const mutedColor = () => theme.muted || theme.text;
+  const nav = useNavigation();
+  const keybind = useKeybinds();
+
+  onMount(() => {
+    useKeyboard(
+      (keyEvent: any) => {
+        const isDown = keybind.match("down", keyEvent);
+        const isUp = keybind.match("up", keyEvent);
+        const isCycle = keybind.match("cycle", keyEvent);
+        const isSelect = keybind.match("select", keyEvent);
+        const isInverting = keybind.isInverting(keyEvent);
+
+        const shows = feedStore.getFilteredFeeds();
+        const episodesList = episodes();
+
+        if (isSelect) {
+          if (shows.length > 0 && showIndex() < shows.length) {
+            setShowIndex(showIndex() + 1);
+          }
+          if (episodesList.length > 0 && episodeIndex() < episodesList.length) {
+            setEpisodeIndex(episodeIndex() + 1);
+          }
+          return;
+        }
+
+        // don't handle pane navigation here - unified in App.tsx
+        if (nav.activeDepth() !== MyShowsPaneType.EPISODES) return;
+
+        if (episodesList.length > 0) {
+          if (isDown && !isInverting()) {
+            setEpisodeIndex((i) => (i + 1) % episodesList.length);
+          } else if (isUp && isInverting()) {
+            setEpisodeIndex((i) => (i - 1 + episodesList.length) % episodesList.length);
+          } else if ((isCycle && !isInverting()) || (isDown && !isInverting())) {
+            setEpisodeIndex((i) => (i + 1) % episodesList.length);
+          } else if ((isCycle && isInverting()) || (isUp && isInverting())) {
+            setEpisodeIndex((i) => (i - 1 + episodesList.length) % episodesList.length);
+          }
+        }
+      },
+      { release: false },
+    );
+  });
 
   /** Threshold: load more when within this many items of the end */
   const LOAD_MORE_THRESHOLD = 5;
@@ -37,9 +82,7 @@ export function MyShowsPage(props: PageProps) {
   const shows = () => feedStore.getFilteredFeeds();
 
   const selectedShow = createMemo(() => {
-    const s = shows();
-    const idx = showIndex();
-    return idx < s.length ? s[idx] : undefined;
+    return shows()[0]; //TODO: Integrate with locally handled keyboard navigation
   });
 
   const episodes = createMemo(() => {
@@ -50,23 +93,6 @@ export function MyShowsPage(props: PageProps) {
     );
   });
 
-  // Detect when user navigates near the bottom and load more episodes
-  createEffect(() => {
-    const idx = episodeIndex();
-    const eps = episodes();
-    const show = selectedShow();
-    if (!show || eps.length === 0) return;
-
-    const nearBottom = idx >= eps.length - LOAD_MORE_THRESHOLD;
-    if (
-      nearBottom &&
-      feedStore.hasMoreEpisodes(show.id) &&
-      !feedStore.isLoadingMore()
-    ) {
-      feedStore.loadMoreEpisodes(show.id);
-    }
-  });
-
   const formatDate = (date: Date): string => {
     return format(date, "MMM d, yyyy");
   };
@@ -147,8 +173,14 @@ export function MyShowsPage(props: PageProps) {
           }
         >
           <scrollbox
+            border
             height="100%"
-            focused={props.depth() == MyShowsPaneType.SHOWS}
+            borderColor={
+              nav.activeDepth() == MyShowsPaneType.SHOWS
+                ? theme.accent
+                : theme.border
+            }
+            focused={nav.activeDepth() == MyShowsPaneType.SHOWS}
           >
             <For each={shows()}>
               {(feed, index) => (
@@ -157,19 +189,31 @@ export function MyShowsPage(props: PageProps) {
                   gap={1}
                   paddingLeft={1}
                   paddingRight={1}
-                  backgroundColor={index() === showIndex() ? theme.primary : undefined}
+                  backgroundColor={
+                    index() === showIndex() ? theme.primary : undefined
+                  }
                   onMouseDown={() => {
                     setShowIndex(index());
                     setEpisodeIndex(0);
+                    audioNav.setSource(
+                      AudioSource.MY_SHOWS,
+                      selectedShow()?.podcast.id,
+                    );
                   }}
                 >
-                  <text fg={index() === showIndex() ? theme.primary : theme.muted}>
+                  <text
+                    fg={index() === showIndex() ? theme.surface : theme.text}
+                  >
                     {index() === showIndex() ? ">" : " "}
                   </text>
-                  <text fg={index() === showIndex() ? theme.text : undefined}>
+                  <text
+                    fg={index() === showIndex() ? theme.surface : theme.text}
+                  >
                     {feed.customName || feed.podcast.title}
                   </text>
-                  <text fg={theme.muted}>({feed.episodes.length})</text>
+                  <text fg={index() === showIndex() ? undefined : theme.text}>
+                    ({feed.episodes.length})
+                  </text>
                 </box>
               )}
             </For>
@@ -177,82 +221,104 @@ export function MyShowsPage(props: PageProps) {
         </Show>
       </box>
       <box flexDirection="column" height="100%">
+          <Show
+            when={selectedShow()}
+            fallback={
+              <box padding={1}>
+                <text fg={theme.muted}>Select a show</text>
+              </box>
+            }
+          >
             <Show
-              when={selectedShow()}
+              when={episodes().length > 0}
               fallback={
                 <box padding={1}>
-                  <text fg={theme.muted}>Select a show</text>
+                  <text fg={theme.muted}>No episodes. Press [r] to refresh.</text>
                 </box>
               }
             >
-              <Show
-                when={episodes().length > 0}
-                fallback={
-                  <box padding={1}>
-                    <text fg={theme.muted}>No episodes. Press [r] to refresh.</text>
+              <scrollbox
+                border
+                height="100%"
+                borderColor={
+                  nav.activeDepth() == MyShowsPaneType.EPISODES
+                    ? theme.accent
+                    : theme.border
+                }
+                focused={nav.activeDepth() == MyShowsPaneType.EPISODES}
+              >
+              <For each={episodes()}>
+                {(episode, index) => (
+                  <box
+                    flexDirection="column"
+                    gap={0}
+                    paddingLeft={1}
+                    paddingRight={1}
+                    backgroundColor={
+                      index() === episodeIndex() ? theme.primary : undefined
+                    }
+                    onMouseDown={() => setEpisodeIndex(index())}
+                  >
+                    <box flexDirection="row" gap={1}>
+                      <text
+                        fg={
+                          index() === episodeIndex()
+                            ? theme.surface
+                            : theme.text
+                        }
+                      >
+                        {index() === episodeIndex() ? ">" : " "}
+                      </text>
+                      <text
+                        fg={
+                          index() === episodeIndex()
+                            ? theme.surface
+                            : theme.text
+                        }
+                      >
+                        {episode.episodeNumber
+                          ? `#${episode.episodeNumber} `
+                          : ""}
+                        {episode.title}
+                      </text>
+                    </box>
+                    <box flexDirection="row" gap={2} paddingLeft={2}>
+                      <text
+                        fg={index() === episodeIndex() ? undefined : theme.info}
+                      >
+                        {formatDate(episode.pubDate)}
+                      </text>
+                      <text fg={theme.muted}>
+                        {formatDuration(episode.duration)}
+                      </text>
+                      <Show when={downloadLabel(episode.id)}>
+                        <text fg={downloadColor(episode.id)}>
+                          {downloadLabel(episode.id)}
+                        </text>
+                      </Show>
+                    </box>
                   </box>
+                )}
+              </For>
+              <Show when={feedStore.isLoadingMore()}>
+                <box paddingLeft={2} paddingTop={1}>
+                  <LoadingIndicator />
+                </box>
+              </Show>
+              <Show
+                when={
+                  !feedStore.isLoadingMore() &&
+                  selectedShow() &&
+                  feedStore.hasMoreEpisodes(selectedShow()!.id)
                 }
               >
-                <scrollbox
-                  height="100%"
-                  focused={props.depth() == MyShowsPaneType.EPISODES}
-                >
-                  <For each={episodes()}>
-                    {(episode, index) => (
-                      <box
-                        flexDirection="column"
-                        gap={0}
-                        paddingLeft={1}
-                        paddingRight={1}
-                        backgroundColor={
-                          index() === episodeIndex() ? theme.primary : undefined
-                        }
-                        onMouseDown={() => setEpisodeIndex(index())}
-                      >
-                        <box flexDirection="row" gap={1}>
-                          <text fg={index() === episodeIndex() ? theme.primary : theme.muted}>
-                            {index() === episodeIndex() ? ">" : " "}
-                          </text>
-                          <text
-                            fg={index() === episodeIndex() ? theme.text : undefined}
-                          >
-                            {episode.episodeNumber
-                              ? `#${episode.episodeNumber} `
-                              : ""}
-                            {episode.title}
-                          </text>
-                        </box>
-                        <box flexDirection="row" gap={2} paddingLeft={2}>
-                          <text fg={theme.muted}>{formatDate(episode.pubDate)}</text>
-                          <text fg={theme.muted}>{formatDuration(episode.duration)}</text>
-                          <Show when={downloadLabel(episode.id)}>
-                            <text fg={downloadColor(episode.id)}>
-                              {downloadLabel(episode.id)}
-                            </text>
-                          </Show>
-                        </box>
-                      </box>
-                    )}
-                  </For>
-                  <Show when={feedStore.isLoadingMore()}>
-                    <box paddingLeft={2} paddingTop={1}>
-                      <text fg={theme.warning}>Loading more episodes...</text>
-                    </box>
-                  </Show>
-                  <Show
-                    when={
-                      !feedStore.isLoadingMore() &&
-                      selectedShow() &&
-                      feedStore.hasMoreEpisodes(selectedShow()!.id)
-                    }
-                  >
-                    <box paddingLeft={2} paddingTop={1}>
-                      <text fg={theme.muted}>Scroll down for more episodes</text>
-                    </box>
-                  </Show>
-                </scrollbox>
+                <box paddingLeft={2} paddingTop={1}>
+                  <text fg={theme.muted}>Scroll down for more episodes</text>
+                </box>
               </Show>
-            </Show>
+            </scrollbox>
+          </Show>
+        </Show>
       </box>
     </box>
   );

src/pages/Player/PlayerPage.tsx

@@ -1,18 +1,48 @@
-import { PageProps } from "@/App";
 import { PlaybackControls } from "./PlaybackControls";
 import { RealtimeWaveform } from "./RealtimeWaveform";
 import { useAudio } from "@/hooks/useAudio";
 import { useAppStore } from "@/stores/app";
 import { useTheme } from "@/context/ThemeContext";
+import { useNavigation } from "@/context/NavigationContext";
+import { useKeybinds } from "@/context/KeybindContext";
+import { useKeyboard } from "@opentui/solid";
+import { onMount } from "solid-js";
 
 enum PlayerPaneType {
   PLAYER = 1,
 }
 export const PlayerPaneCount = 1;
 
-export function PlayerPage(props: PageProps) {
+export function PlayerPage() {
   const audio = useAudio();
   const { theme } = useTheme();
+  const nav = useNavigation();
+
+  const keybind = useKeybinds();
+
+  onMount(() => {
+    useKeyboard(
+      (keyEvent: any) => {
+        const isInverting = keybind.isInverting(keyEvent);
+
+        if (keybind.match("audio-toggle", keyEvent)) {
+          audio.togglePlayback();
+          return;
+        }
+
+        if (keybind.match("audio-seek-forward", keyEvent)) {
+          audio.seek(audio.currentEpisode()?.duration ?? 0);
+          return;
+        }
+
+        if (keybind.match("audio-seek-backward", keyEvent)) {
+          audio.seek(0);
+          return;
+        }
+      },
+      { release: false },
+    );
+  });
 
   const progressPercent = () => {
     const d = audio.duration();
@@ -29,7 +59,7 @@ export function PlayerPage(props: PageProps) {
   return (
     <box flexDirection="column" gap={1} width="100%">
       <box flexDirection="row" justifyContent="space-between">
-        <text>
+        <text fg={theme.text}>
           <strong>Now Playing</strong>
         </text>
         <text fg={theme.muted}>
@@ -40,7 +70,13 @@ export function PlayerPage(props: PageProps) {
 
       {audio.error() && <text fg={theme.error}>{audio.error()}</text>}
 
-      <box border padding={1} flexDirection="column" gap={1}>
+      <box
+        border
+        borderColor={nav.activeDepth() == PlayerPaneType.PLAYER ? theme.accent : theme.border}
+        padding={1}
+        flexDirection="column"
+        gap={1}
+      >
         <text fg={theme.text}>
           <strong>{audio.currentEpisode()?.title}</strong>
         </text>

src/pages/Player/RealtimeWaveform.tsx

@@ -15,6 +15,7 @@ import {
 } from "@/utils/cavacore";
 import { AudioStreamReader } from "@/utils/audio-stream-reader";
 import { useAudio } from "@/hooks/useAudio";
+import { useTheme } from "@/context/ThemeContext";
 
 // ── Types ────────────────────────────────────────────────────────────
 
@@ -44,6 +45,7 @@ const SAMPLES_PER_FRAME = 512;
 // ── Component ────────────────────────────────────────────────────────
 
 export function RealtimeWaveform(props: RealtimeWaveformProps) {
+  const { theme } = useTheme();
   const audio = useAudio();
 
   // Frequency bar values (0.0–1.0 per bar)
@@ -247,7 +249,7 @@ export function RealtimeWaveform(props: RealtimeWaveformProps) {
   };
 
   return (
-    <box border padding={1} onMouseDown={handleClick}>
+    <box border borderColor={theme.border} padding={1} onMouseDown={handleClick}>
       {renderLine()}
     </box>
   );

src/pages/Search/ResultCard.tsx

@@ -2,6 +2,7 @@ import { Show } from "solid-js";
 import type { SearchResult } from "@/types/source";
 import { SourceBadge } from "./SourceBadge";
 import { useTheme } from "@/context/ThemeContext";
+import { SelectableBox, SelectableText } from "@/components/Selectable";
 
 type ResultCardProps = {
   result: SearchResult;
@@ -15,12 +16,10 @@ export function ResultCard(props: ResultCardProps) {
   const podcast = () => props.result.podcast;
 
   return (
-    <box
+    <SelectableBox
+      selected={() => props.selected}
       flexDirection="column"
       padding={1}
-      border={props.selected}
-      borderColor={props.selected ? theme.primary : undefined}
-      backgroundColor={props.selected ? theme.backgroundElement : undefined}
       onMouseDown={props.onSelect}
     >
       <box
@@ -28,34 +27,45 @@ export function ResultCard(props: ResultCardProps) {
         justifyContent="space-between"
         alignItems="center"
       >
-        <box flexDirection="row" gap={2} alignItems="center">
-            <text fg={props.selected ? theme.primary : theme.text}>
-              <strong>{podcast().title}</strong>
-            </text>
-          <SourceBadge
-            sourceId={props.result.sourceId}
-            sourceName={props.result.sourceName}
-            sourceType={props.result.sourceType}
-          />
-        </box>
+         <box flexDirection="row" gap={2} alignItems="center">
+             <SelectableText
+               selected={() => props.selected}
+               primary
+             >
+               <strong>{podcast().title}</strong>
+             </SelectableText>
+           <SourceBadge
+             sourceId={props.result.sourceId}
+             sourceName={props.result.sourceName}
+             sourceType={props.result.sourceType}
+           />
+         </box>
         <Show when={podcast().isSubscribed}>
             <text fg={theme.success}>[Subscribed]</text>
         </Show>
       </box>
 
-      <Show when={podcast().author}>
-            <text fg={theme.textMuted}>by {podcast().author}</text>
-      </Show>
+       <Show when={podcast().author}>
+             <SelectableText
+               selected={() => props.selected}
+               tertiary
+             >
+               by {podcast().author}
+             </SelectableText>
+       </Show>
 
-      <Show when={podcast().description}>
-        {(description) => (
-            <text fg={props.selected ? theme.text : theme.textMuted}>
-            {description().length > 120
-              ? description().slice(0, 120) + "..."
-              : description()}
-          </text>
-        )}
-      </Show>
+       <Show when={podcast().description}>
+         {(description) => (
+             <SelectableText
+               selected={() => props.selected}
+               tertiary
+             >
+             {description().length > 120
+               ? description().slice(0, 120) + "..."
+               : description()}
+           </SelectableText>
+         )}
+       </Show>
 
       <Show when={(podcast().categories ?? []).length > 0}>
         <box flexDirection="row" gap={1}>
@@ -80,6 +90,6 @@ export function ResultCard(props: ResultCardProps) {
             <text fg={theme.primary}>[+] Add to Feeds</text>
         </box>
       </Show>
-    </box>
+    </SelectableBox>
   );
 }

src/pages/Search/SearchHistory.tsx

@@ -4,6 +4,7 @@
 
 import { For, Show } from "solid-js"
 import { useTheme } from "@/context/ThemeContext"
+import { SelectableBox, SelectableText } from "@/components/Selectable"
 
 type SearchHistoryProps = {
   history: string[]
@@ -52,23 +53,31 @@ export function SearchHistory(props: SearchHistoryProps) {
                 const isSelected = () => index() === props.selectedIndex && props.focused
 
                 return (
-                  <box
+                  <SelectableBox
+                    selected={isSelected}
                     flexDirection="row"
                     justifyContent="space-between"
                     padding={0}
                     paddingLeft={1}
                     paddingRight={1}
-                    backgroundColor={isSelected() ? theme.backgroundElement : undefined}
                     onMouseDown={() => handleSearchClick(index(), query)}
                   >
-                    <box flexDirection="row" gap={1}>
-                      <text fg={theme.textMuted}>{">"}</text>
-                      <text fg={isSelected() ? theme.primary : theme.text}>{query}</text>
-                    </box>
+                     <SelectableText
+                       selected={isSelected}
+                       tertiary
+                     >
+                       {">"}
+                     </SelectableText>
+                     <SelectableText
+                       selected={isSelected}
+                       primary
+                     >
+                       {query}
+                     </SelectableText>
                     <box onMouseDown={() => handleRemoveClick(query)} padding={0}>
                       <text fg={theme.error}>[x]</text>
                     </box>
-                  </box>
+                  </SelectableBox>
                 )
               }}
             </For>

src/pages/Search/SearchPage.tsx

@@ -2,15 +2,16 @@
  * SearchPage component - Main search interface for PodTUI
  */
 
-import { createSignal, createEffect, Show } from "solid-js";
+import { createSignal, createEffect, Show, onMount } from "solid-js";
 import { useKeyboard } from "@opentui/solid";
 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";
+import { KeybindProvider, useKeybinds } from "@/context/KeybindContext";
 
 enum SearchPaneType {
   INPUT = 1,
@@ -19,19 +20,51 @@ 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();
+  const nav = useNavigation();
+  const keybind = useKeybinds();
 
-  // 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);
-  //});
+  onMount(() => {
+    useKeyboard(
+      (keyEvent: any) => {
+        const isDown = keybind.match("down", keyEvent);
+        const isUp = keybind.match("up", keyEvent);
+        const isCycle = keybind.match("cycle", keyEvent);
+        const isSelect = keybind.match("select", keyEvent);
+        const isInverting = keybind.isInverting(keyEvent);
+
+        if (isSelect) {
+          const results = searchStore.results();
+          if (results.length > 0 && resultIndex() < results.length) {
+            setResultIndex(resultIndex() + 1);
+          }
+          return;
+        }
+
+        // don't handle pane navigation here - unified in App.tsx
+        if (nav.activeDepth() !== SearchPaneType.RESULTS) return;
+
+        const results = searchStore.results();
+        if (results.length === 0) return;
+
+        if (isDown && !isInverting()) {
+          setResultIndex((i) => (i + 1) % results.length);
+        } else if (isUp && isInverting()) {
+          setResultIndex((i) => (i - 1 + results.length) % results.length);
+        } else if ((isCycle && !isInverting()) || (isDown && !isInverting())) {
+          setResultIndex((i) => (i + 1) % results.length);
+        } else if ((isCycle && isInverting()) || (isUp && isInverting())) {
+          setResultIndex((i) => (i - 1 + results.length) % results.length);
+        }
+      },
+      { release: false },
+    );
+  });
 
   const handleSearch = async () => {
     const query = inputValue().trim();
@@ -62,7 +95,7 @@ export function SearchPage(props: PageProps) {
     <box flexDirection="column" height="100%" gap={1} width="100%">
       {/* Search Header */}
       <box flexDirection="column" gap={1}>
-        <text>
+        <text fg={theme.text}>
           <strong>Search Podcasts</strong>
         </text>
 
@@ -75,7 +108,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
@@ -101,10 +134,23 @@ export function SearchPage(props: PageProps) {
         {/* Main Content - Results or History */}
         <box flexDirection="row" height="100%" gap={2}>
           {/* Results Panel */}
-          <box flexDirection="column" flexGrow={1} border>
+          <box
+            flexDirection="column"
+            flexGrow={1}
+            border
+            borderColor={
+              nav.activeDepth() === SearchPaneType.RESULTS
+                ? theme.accent
+                : theme.border
+            }
+          >
             <box padding={1}>
               <text
-                fg={props.depth() === SearchPaneType.RESULTS ? theme.primary : theme.muted}
+                fg={
+                  nav.activeDepth() === SearchPaneType.RESULTS
+                    ? theme.primary
+                    : theme.muted
+                }
               >
                 Results ({searchStore.results().length})
               </text>
@@ -121,40 +167,44 @@ export function SearchPage(props: PageProps) {
                 </box>
               }
             >
-            <SearchResults
-              results={searchStore.results()}
-              selectedIndex={resultIndex()}
-              focused={props.depth() === SearchPaneType.RESULTS}
-              onSelect={handleResultSelect}
-              onChange={setResultIndex}
-              isSearching={searchStore.isSearching()}
-              error={searchStore.error()}
-            />
-          </Show>
-        </box>
+              <SearchResults
+                results={searchStore.results()}
+                selectedIndex={resultIndex()}
+                focused={nav.activeDepth() === SearchPaneType.RESULTS}
+                onSelect={handleResultSelect}
+                onChange={setResultIndex}
+                isSearching={searchStore.isSearching()}
+                error={searchStore.error()}
+              />
+            </Show>
+          </box>
 
-        {/* History Sidebar */}
-        <box width={30} border>
-          <box padding={1} flexDirection="column">
-            <box paddingBottom={1}>
-              <text
-                fg={props.depth() === SearchPaneType.HISTORY ? theme.primary : theme.muted}
-              >
-                History
-              </text>
+          {/* History Sidebar */}
+          <box width={30} border borderColor={theme.border}>
+            <box padding={1} flexDirection="column">
+              <box paddingBottom={1}>
+                <text
+                  fg={
+                    nav.activeDepth() === SearchPaneType.HISTORY
+                      ? theme.primary
+                      : theme.muted
+                  }
+                >
+                  History
+                </text>
+              </box>
+              <SearchHistory
+                history={searchStore.history()}
+                selectedIndex={historyIndex()}
+                focused={nav.activeDepth() === SearchPaneType.HISTORY}
+                onSelect={handleHistorySelect}
+                onRemove={searchStore.removeFromHistory}
+                onClear={searchStore.clearHistory}
+                onChange={setHistoryIndex}
+              />
             </box>
-            <SearchHistory
-              history={searchStore.history()}
-              selectedIndex={historyIndex()}
-              focused={props.depth() === SearchPaneType.HISTORY}
-              onSelect={handleHistorySelect}
-              onRemove={searchStore.removeFromHistory}
-              onClear={searchStore.clearHistory}
-              onChange={setHistoryIndex}
-            />
           </box>
         </box>
-      </box>
     </box>
   );
 }

src/pages/Settings/ExportDialog.tsx

@@ -6,19 +6,21 @@ const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
 }
 
 import { SyncStatus } from "./SyncStatus"
+import { useTheme } from "@/context/ThemeContext"
 
 export function ExportDialog() {
+  const { theme } = useTheme();
   const filename = createSignal("podcast-sync.json")
   const format = createSignal<"json" | "xml">("json")
 
   return (
     <box border title="Export" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
       <box style={{ flexDirection: "row", gap: 1 }}>
-        <text>File:</text>
+        <text fg={theme.text}>File:</text>
         <input value={filename[0]()} onInput={filename[1]} style={{ width: 30 }} />
       </box>
       <box style={{ flexDirection: "row", gap: 1 }}>
-        <text>Format:</text>
+        <text fg={theme.text}>Format:</text>
         <tab_select
           options={[
             { name: "JSON", description: "Portable" },
@@ -27,8 +29,8 @@ export function ExportDialog() {
           onSelect={(index) => format[1](index === 0 ? "json" : "xml")}
         />
       </box>
-      <box border>
-        <text>Export {format[0]()} to {filename[0]()}</text>
+      <box border borderColor={theme.border}>
+        <text fg={theme.text}>Export {format[0]()} to {filename[0]()}</text>
       </box>
       <SyncStatus />
     </box>

src/pages/Settings/FilePicker.tsx

@@ -1,4 +1,5 @@
 import { detectFormat } from "@/utils/file-detector";
+import { useTheme } from "@/context/ThemeContext";
 
 type FilePickerProps = {
   value: string;
@@ -6,6 +7,7 @@ type FilePickerProps = {
 };
 
 export function FilePicker(props: FilePickerProps) {
+  const { theme } = useTheme();
   const format = detectFormat(props.value);
 
   return (
@@ -16,7 +18,7 @@ export function FilePicker(props: FilePickerProps) {
         placeholder="/path/to/sync-file.json"
         style={{ width: 40 }}
       />
-      <text>Format: {format}</text>
+      <text fg={theme.text}>Format: {format}</text>
     </box>
   );
 }

src/pages/Settings/ImportDialog.tsx

@@ -6,15 +6,17 @@ const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
 }
 
 import { FilePicker } from "./FilePicker"
+import { useTheme } from "@/context/ThemeContext"
 
 export function ImportDialog() {
+  const { theme } = useTheme();
   const filePath = createSignal("")
 
   return (
     <box border title="Import" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
       <FilePicker value={filePath[0]()} onChange={filePath[1]} />
-      <box border>
-        <text>Import selected file</text>
+      <box border borderColor={theme.border}>
+        <text fg={theme.text}>Import selected file</text>
       </box>
     </box>
   )

src/pages/Settings/LoginScreen.tsx

@@ -83,8 +83,8 @@ export function LoginScreen(props: LoginScreenProps) {
   };
 
   return (
-    <box flexDirection="column" border padding={2} gap={1}>
-      <text>
+    <box flexDirection="column" border borderColor={theme.border} padding={2} gap={1}>
+      <text fg={theme.text}>
         <strong>Sign In</strong>
       </text>
 
@@ -92,7 +92,7 @@ export function LoginScreen(props: LoginScreenProps) {
 
       {/* Email field */}
       <box flexDirection="column" gap={0}>
-        <text fg={focusField() === "email" ? theme.primary : undefined}>
+        <text fg={focusField() === "email" ? theme.primary : theme.textMuted}>
           Email:
         </text>
         <input
@@ -107,7 +107,7 @@ export function LoginScreen(props: LoginScreenProps) {
 
       {/* Password field */}
       <box flexDirection="column" gap={0}>
-        <text fg={focusField() === "password" ? theme.primary : undefined}>
+        <text fg={focusField() === "password" ? theme.primary : theme.textMuted}>
           Password:
         </text>
         <input
@@ -126,6 +126,7 @@ export function LoginScreen(props: LoginScreenProps) {
       <box flexDirection="row" gap={2}>
         <box
           border
+          borderColor={theme.border}
           padding={1}
           backgroundColor={
             focusField() === "submit" ? theme.primary : undefined
@@ -148,6 +149,7 @@ export function LoginScreen(props: LoginScreenProps) {
       <box flexDirection="row" gap={2}>
         <box
           border
+          borderColor={theme.border}
           padding={1}
           backgroundColor={focusField() === "code" ? theme.primary : undefined}
         >
@@ -158,6 +160,7 @@ export function LoginScreen(props: LoginScreenProps) {
 
         <box
           border
+          borderColor={theme.border}
           padding={1}
           backgroundColor={focusField() === "oauth" ? theme.primary : undefined}
         >

src/pages/Settings/PreferencesPanel.tsx

@@ -94,7 +94,7 @@ export function PreferencesPanel() {
           <text fg={focusField() === "theme" ? theme.primary : theme.textMuted}>
             Theme:
           </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
             <text fg={theme.text}>
               {THEME_LABELS.find((t) => t.value === settings().theme)?.label}
             </text>
@@ -106,7 +106,7 @@ export function PreferencesPanel() {
           <text fg={focusField() === "font" ? theme.primary : theme.textMuted}>
             Font Size:
           </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
             <text fg={theme.text}>{settings().fontSize}px</text>
           </box>
           <text fg={theme.textMuted}>[Left/Right]</text>
@@ -116,7 +116,7 @@ export function PreferencesPanel() {
           <text fg={focusField() === "speed" ? theme.primary : theme.textMuted}>
             Playback:
           </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
             <text fg={theme.text}>{settings().playbackSpeed}x</text>
           </box>
           <text fg={theme.textMuted}>[Left/Right]</text>
@@ -128,7 +128,7 @@ export function PreferencesPanel() {
           >
             Show Explicit:
           </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
             <text
               fg={preferences().showExplicit ? theme.success : theme.textMuted}
             >
@@ -142,7 +142,7 @@ export function PreferencesPanel() {
           <text fg={focusField() === "auto" ? theme.primary : theme.textMuted}>
             Auto Download:
           </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
             <text
               fg={preferences().autoDownload ? theme.success : theme.textMuted}
             >

src/pages/Settings/SettingsPage.tsx

@@ -1,11 +1,12 @@
-import { createSignal, For } from "solid-js";
+import { createSignal, For, onMount } from "solid-js";
 import { useKeyboard } from "@opentui/solid";
 import { SourceManager } from "./SourceManager";
 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";
+import { KeybindProvider, useKeybinds } from "@/context/KeybindContext";
 
 enum SettingsPaneType {
   SYNC = 1,
@@ -24,11 +25,44 @@ 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();
+  const keybind = useKeybinds();
+
+  // Helper function to check if a depth is active
+  const isActive = (depth: SettingsPaneType): boolean => {
+    return nav.activeDepth() === depth;
+  };
+
+  // Helper function to get the current depth as a number
+  const currentDepth = () => nav.activeDepth() as number;
+
+  onMount(() => {
+    useKeyboard(
+      (keyEvent: any) => {
+        const isDown = keybind.match("down", keyEvent);
+        const isUp = keybind.match("up", keyEvent);
+        const isCycle = keybind.match("cycle", keyEvent);
+        const isSelect = keybind.match("select", keyEvent);
+        const isInverting = keybind.isInverting(keyEvent);
+
+        // don't handle pane navigation here - unified in App.tsx
+        if (nav.activeDepth() < 1 || nav.activeDepth() > SettingsPaneCount) return;
+
+        if (isDown && !isInverting()) {
+          nav.setActiveDepth((nav.activeDepth() % SettingsPaneCount) + 1);
+        } else if (isUp && isInverting()) {
+          nav.setActiveDepth((nav.activeDepth() - 2 + SettingsPaneCount) % SettingsPaneCount + 1);
+        } else if ((isCycle && !isInverting()) || (isDown && !isInverting())) {
+          nav.setActiveDepth((nav.activeDepth() % SettingsPaneCount) + 1);
+        } else if ((isCycle && isInverting()) || (isUp && isInverting())) {
+          nav.setActiveDepth((nav.activeDepth() - 2 + SettingsPaneCount) % SettingsPaneCount + 1);
+        }
+      },
+      { release: false },
+    );
+  });
 
   return (
     <box flexDirection="column" gap={1} height="100%" width="100%">
@@ -37,15 +71,16 @@ export function SettingsPage(props: PageProps) {
           {(section, index) => (
             <box
               border
+              borderColor={theme.border}
               padding={0}
               backgroundColor={
-                activeSection() === section.id ? theme.primary : undefined
+                currentDepth() === section.id ? theme.primary : undefined
               }
-              onMouseDown={() => setActiveSection(section.id)}
+              onMouseDown={() => nav.setActiveDepth(section.id)}
             >
               <text
                 fg={
-                  activeSection() === section.id ? theme.text : theme.textMuted
+                  currentDepth() === section.id ? theme.text : theme.textMuted
                 }
               >
                 [{index() + 1}] {section.label}
@@ -55,18 +90,25 @@ export function SettingsPage(props: PageProps) {
         </For>
       </box>
 
-      <box border flexGrow={1} padding={1} flexDirection="column" gap={1}>
-        {activeSection() === SettingsPaneType.SYNC && <SyncPanel />}
-        {activeSection() === SettingsPaneType.SOURCES && (
+      <box
+        border
+        borderColor={isActive(SettingsPaneType.SYNC) || isActive(SettingsPaneType.SOURCES) || isActive(SettingsPaneType.PREFERENCES) || isActive(SettingsPaneType.VISUALIZER) || isActive(SettingsPaneType.ACCOUNT) ? theme.accent : theme.border}
+        flexGrow={1}
+        padding={1}
+        flexDirection="column"
+        gap={1}
+      >
+        {isActive(SettingsPaneType.SYNC) && <SyncPanel />}
+        {isActive(SettingsPaneType.SOURCES) && (
           <SourceManager focused />
         )}
-        {activeSection() === SettingsPaneType.PREFERENCES && (
+        {isActive(SettingsPaneType.PREFERENCES) && (
           <PreferencesPanel />
         )}
-        {activeSection() === SettingsPaneType.VISUALIZER && (
+        {isActive(SettingsPaneType.VISUALIZER) && (
           <VisualizerSettings />
         )}
-        {activeSection() === SettingsPaneType.ACCOUNT && (
+        {isActive(SettingsPaneType.ACCOUNT) && (
           <box flexDirection="column" gap={1}>
             <text fg={theme.textMuted}>Account</text>
           </box>

src/pages/Settings/SourceManager.tsx

@@ -8,6 +8,7 @@ import { useFeedStore } from "@/stores/feed";
 import { useTheme } from "@/context/ThemeContext";
 import { SourceType } from "@/types/source";
 import type { PodcastSource } from "@/types/source";
+import { SelectableBox, SelectableText } from "@/components/Selectable";
 
 interface SourceManagerProps {
   focused?: boolean;
@@ -166,12 +167,12 @@ export function SourceManager(props: SourceManagerProps) {
   const sourceLanguage = () => selectedSource()?.language || "en_us";
 
   return (
-    <box flexDirection="column" border padding={1} gap={1}>
+    <box flexDirection="column" border borderColor={theme.border} padding={1} gap={1}>
       <box flexDirection="row" justifyContent="space-between">
-        <text>
+        <text fg={theme.text}>
           <strong>Podcast Sources</strong>
         </text>
-        <box border padding={0} onMouseDown={props.onClose}>
+        <box border borderColor={theme.border} padding={0} onMouseDown={props.onClose}>
           <text fg={theme.primary}>[Esc] Close</text>
         </box>
       </box>
@@ -179,53 +180,39 @@ export function SourceManager(props: SourceManagerProps) {
       <text fg={theme.textMuted}>Manage where to search for podcasts</text>
 
       {/* Source list */}
-      <box border padding={1} flexDirection="column" gap={1}>
+      <box border borderColor={theme.border} padding={1} flexDirection="column" gap={1}>
         <text fg={focusArea() === "list" ? theme.primary : theme.textMuted}>
           Sources:
         </text>
-        <scrollbox height={6}>
-          <For each={sources()}>
-            {(source, index) => (
-              <box
-                flexDirection="row"
-                gap={1}
-                padding={0}
-                backgroundColor={
-                  focusArea() === "list" && index() === selectedIndex()
-                    ? theme.primary
-                    : undefined
-                }
-                onMouseDown={() => {
-                  setSelectedIndex(index());
-                  setFocusArea("list");
-                  feedStore.toggleSource(source.id);
-                }}
-              >
-                <text
-                  fg={
-                    focusArea() === "list" && index() === selectedIndex()
-                      ? theme.primary
-                      : theme.textMuted
-                  }
+          <scrollbox height={6}>
+            <For each={sources()}>
+              {(source, index) => (
+                <SelectableBox
+                  selected={() => focusArea() === "list" && index() === selectedIndex()}
+                  flexDirection="row"
+                  gap={1}
+                  padding={0}
+                  onMouseDown={() => {
+                    setSelectedIndex(index());
+                    setFocusArea("list");
+                    feedStore.toggleSource(source.id);
+                  }}
                 >
-                  {focusArea() === "list" && index() === selectedIndex()
-                    ? ">"
-                    : " "}
-                </text>
-                <text fg={source.enabled ? theme.success : theme.error}>
-                  {source.enabled ? "[x]" : "[ ]"}
-                </text>
-                <text fg={theme.accent}>{getSourceIcon(source)}</text>
-                <text
-                  fg={
-                    focusArea() === "list" && index() === selectedIndex()
-                      ? theme.text
-                      : undefined
-                  }
-                >
-                  {source.name}
-                </text>
-              </box>
+                 <SelectableText
+                   selected={() => focusArea() === "list" && index() === selectedIndex()}
+                   primary
+                 >
+                   {focusArea() === "list" && index() === selectedIndex()
+                     ? ">"
+                     : " "}
+                 </SelectableText>
+                 <SelectableText
+                   selected={() => focusArea() === "list" && index() === selectedIndex()}
+                   primary
+                 >
+                   {source.name}
+                 </SelectableText>
+              </SelectableBox>
             )}
           </For>
         </scrollbox>
@@ -233,111 +220,98 @@ export function SourceManager(props: SourceManagerProps) {
           Space/Enter to toggle, d to delete, a to add
         </text>
 
-        {/* API settings */}
-        <box flexDirection="column" gap={1}>
-          <text fg={isApiSource() ? theme.textMuted : theme.accent}>
-            {isApiSource()
-              ? "API Settings"
-              : "API Settings (select an API source)"}
-          </text>
-          <box flexDirection="row" gap={2}>
-            <box
-              border
-              padding={0}
-              backgroundColor={
-                focusArea() === "country" ? theme.primary : undefined
-              }
-            >
-              <text
-                fg={focusArea() === "country" ? theme.primary : theme.textMuted}
-              >
-                Country: {sourceCountry()}
-              </text>
-            </box>
-            <box
-              border
-              padding={0}
-              backgroundColor={
-                focusArea() === "language" ? theme.primary : undefined
-              }
-            >
-              <text
-                fg={
-                  focusArea() === "language" ? theme.primary : theme.textMuted
-                }
-              >
-                Language:{" "}
-                {sourceLanguage() === "ja_jp" ? "Japanese" : "English"}
-              </text>
-            </box>
-            <box
-              border
-              padding={0}
-              backgroundColor={
-                focusArea() === "explicit" ? theme.primary : undefined
-              }
-            >
-              <text
-                fg={
-                  focusArea() === "explicit" ? theme.primary : theme.textMuted
-                }
-              >
-                Explicit: {sourceExplicit() ? "Yes" : "No"}
-              </text>
-            </box>
-          </box>
-          <text fg={theme.textMuted}>
-            Enter/Space to toggle focused setting
-          </text>
-        </box>
+         {/* API settings */}
+         <box flexDirection="column" gap={1}>
+           <SelectableText selected={() => false} primary={isApiSource()}>
+             {isApiSource()
+               ? "API Settings"
+               : "API Settings (select an API source)"}
+           </SelectableText>
+           <box flexDirection="row" gap={2}>
+             <box
+               border
+               borderColor={theme.border}
+               padding={0}
+               backgroundColor={
+                 focusArea() === "country" ? theme.primary : undefined
+               }
+             >
+               <SelectableText selected={() => false} primary={focusArea() === "country"}>
+                 Country: {sourceCountry()}
+               </SelectableText>
+             </box>
+             <box
+               border
+               borderColor={theme.border}
+               padding={0}
+               backgroundColor={
+                 focusArea() === "language" ? theme.primary : undefined
+               }
+             >
+               <SelectableText selected={() => false} primary={focusArea() === "language"}>
+                 Language:{" "}
+                 {sourceLanguage() === "ja_jp" ? "Japanese" : "English"}
+               </SelectableText>
+             </box>
+             <box
+               border
+               borderColor={theme.border}
+               padding={0}
+               backgroundColor={
+                 focusArea() === "explicit" ? theme.primary : undefined
+               }
+             >
+               <SelectableText selected={() => false} primary={focusArea() === "explicit"}>
+                 Explicit: {sourceExplicit() ? "Yes" : "No"}
+               </SelectableText>
+             </box>
+           </box>
+           <SelectableText selected={() => false} tertiary>
+             Enter/Space to toggle focused setting
+           </SelectableText>
+         </box>
       </box>
 
-      {/* Add new source form */}
-      <box border padding={1} flexDirection="column" gap={1}>
-        <text
-          fg={
-            focusArea() === "add" || focusArea() === "url"
-              ? theme.primary
-              : theme.textMuted
-          }
-        >
-          Add New Source:
-        </text>
+         {/* Add new source form */}
+         <box border borderColor={theme.border} padding={1} flexDirection="column" gap={1}>
+           <SelectableText selected={() => false} primary={focusArea() === "add" || focusArea() === "url"}>
+             Add New Source:
+           </SelectableText>
 
-        <box flexDirection="row" gap={1}>
-          <text fg={theme.textMuted}>Name:</text>
-          <input
-            value={newSourceName()}
-            onInput={setNewSourceName}
-            placeholder="My Custom Feed"
-            focused={props.focused && focusArea() === "add"}
-            width={25}
-          />
-        </box>
+           <box flexDirection="row" gap={1}>
+             <SelectableText selected={() => false} tertiary>Name:</SelectableText>
+             <input
+               value={newSourceName()}
+               onInput={setNewSourceName}
+               placeholder="My Custom Feed"
+               focused={props.focused && focusArea() === "add"}
+               width={25}
+             />
+           </box>
 
-        <box flexDirection="row" gap={1}>
-          <text fg={theme.textMuted}>URL:</text>
-          <input
-            value={newSourceUrl()}
-            onInput={(v) => {
-              setNewSourceUrl(v);
-              setError(null);
-            }}
-            placeholder="https://example.com/feed.rss"
-            focused={props.focused && focusArea() === "url"}
-            width={35}
-          />
-        </box>
+           <box flexDirection="row" gap={1}>
+             <SelectableText selected={() => false} tertiary>URL:</SelectableText>
+             <input
+               value={newSourceUrl()}
+               onInput={(v) => {
+                 setNewSourceUrl(v);
+                 setError(null);
+               }}
+               placeholder="https://example.com/feed.rss"
+               focused={props.focused && focusArea() === "url"}
+               width={35}
+             />
+           </box>
 
-        <box border padding={0} width={15} onMouseDown={handleAddSource}>
-          <text fg={theme.success}>[+] Add Source</text>
-        </box>
-      </box>
+           <box border borderColor={theme.border} padding={0} width={15} onMouseDown={handleAddSource}>
+             <SelectableText selected={() => false} primary>[+] Add Source</SelectableText>
+           </box>
+         </box>
 
-      {/* Error message */}
-      {error() && <text fg={theme.error}>{error()}</text>}
+         {/* Error message */}
+         {error() && <SelectableText selected={() => false} tertiary>{error()}</SelectableText>}
 
-      <text fg={theme.textMuted}>Tab to switch sections, Esc to close</text>
+         <SelectableText selected={() => false} tertiary>Tab to switch sections, Esc to close</SelectableText>
     </box>
   );
 }

src/pages/Settings/SyncError.tsx

@@ -1,14 +1,17 @@
+import { useTheme } from "@/context/ThemeContext"
+
 type SyncErrorProps = {
   message: string
   onRetry: () => void
 }
 
 export function SyncError(props: SyncErrorProps) {
+  const { theme } = useTheme();
   return (
     <box border title="Error" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
-      <text>{props.message}</text>
-      <box border onMouseDown={props.onRetry}>
-        <text>Retry</text>
+      <text fg={theme.text}>{props.message}</text>
+      <box border borderColor={theme.border} onMouseDown={props.onRetry}>
+        <text fg={theme.text}>Retry</text>
       </box>
     </box>
   )

src/pages/Settings/SyncPanel.tsx

@@ -8,18 +8,20 @@ const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
 import { ImportDialog } from "./ImportDialog"
 import { ExportDialog } from "./ExportDialog"
 import { SyncStatus } from "./SyncStatus"
+import { useTheme } from "@/context/ThemeContext"
 
 export function SyncPanel() {
+  const { theme } = useTheme();
   const mode = createSignal<"import" | "export" | null>(null)
 
   return (
     <box style={{ flexDirection: "column", gap: 1 }}>
       <box style={{ flexDirection: "row", gap: 1 }}>
-        <box border onMouseDown={() => mode[1]("import")}>
-          <text>Import</text>
+        <box border borderColor={theme.border} onMouseDown={() => mode[1]("import")}>
+          <text fg={theme.text}>Import</text>
         </box>
-        <box border onMouseDown={() => mode[1]("export")}>
-          <text>Export</text>
+        <box border borderColor={theme.border} onMouseDown={() => mode[1]("export")}>
+          <text fg={theme.text}>Export</text>
         </box>
       </box>
       <SyncStatus />

src/pages/Settings/SyncProgress.tsx

@@ -1,8 +1,11 @@
+import { useTheme } from "@/context/ThemeContext"
+
 type SyncProgressProps = {
   value: number
 }
 
 export function SyncProgress(props: SyncProgressProps) {
+  const { theme } = useTheme();
   const width = 30
   let filled = (props.value / 100) * width
   filled = filled >= 0 ? filled : 0
@@ -18,8 +21,8 @@ export function SyncProgress(props: SyncProgressProps) {
 
   return (
     <box style={{ flexDirection: "column" }}>
-      <text>{bar}</text>
-      <text>{props.value}%</text>
+      <text fg={theme.text}>{bar}</text>
+      <text fg={theme.text}>{props.value}%</text>
     </box>
   )
 }

src/pages/Settings/SyncStatus.tsx

@@ -7,10 +7,12 @@ const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
 
 import { SyncProgress } from "./SyncProgress"
 import { SyncError } from "./SyncError"
+import { useTheme } from "@/context/ThemeContext"
 
 type SyncState = "idle" | "syncing" | "complete" | "error"
 
 export function SyncStatus() {
+  const { theme } = useTheme();
   const state = createSignal<SyncState>("idle")
   const message = createSignal("Idle")
   const progress = createSignal(0)
@@ -35,15 +37,15 @@ export function SyncStatus() {
   }
 
   return (
-    <box border title="Sync Status" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
+    <box border title="Sync Status" borderColor={theme.border} style={{ padding: 1, flexDirection: "column", gap: 1 }}>
       <box style={{ flexDirection: "row", gap: 1 }}>
-        <text>Status:</text>
-        <text>{message[0]()}</text>
+        <text fg={theme.text}>Status:</text>
+        <text fg={theme.text}>{message[0]()}</text>
       </box>
       <SyncProgress value={progress[0]()} />
       {state[0]() === "error" ? <SyncError message={message[0]()} onRetry={() => toggle()} /> : null}
-      <box border onMouseDown={toggle}>
-        <text>Cycle Status</text>
+      <box border borderColor={theme.border} onMouseDown={toggle}>
+        <text fg={theme.text}>Cycle Status</text>
       </box>
     </box>
   )

src/pages/Settings/VisualizerSettings.tsx

@@ -99,7 +99,7 @@ export function VisualizerSettings() {
           <text fg={focusField() === "bars" ? theme.primary : theme.textMuted}>
             Bars:
           </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
             <text fg={theme.text}>{viz().bars}</text>
           </box>
           <text fg={theme.textMuted}>[Left/Right +/-8]</text>
@@ -113,7 +113,7 @@ export function VisualizerSettings() {
           >
             Auto Sensitivity:
           </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
             <text
               fg={viz().sensitivity === 1 ? theme.success : theme.textMuted}
             >
@@ -127,7 +127,7 @@ export function VisualizerSettings() {
           <text fg={focusField() === "noise" ? theme.primary : theme.textMuted}>
             Noise Reduction:
           </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
             <text fg={theme.text}>{viz().noiseReduction.toFixed(2)}</text>
           </box>
           <text fg={theme.textMuted}>[Left/Right +/-0.05]</text>
@@ -139,7 +139,7 @@ export function VisualizerSettings() {
           >
             Low Cutoff:
           </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
             <text fg={theme.text}>{viz().lowCutOff} Hz</text>
           </box>
           <text fg={theme.textMuted}>[Left/Right +/-10]</text>
@@ -151,7 +151,7 @@ export function VisualizerSettings() {
           >
             High Cutoff:
           </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
             <text fg={theme.text}>{viz().highCutOff} Hz</text>
           </box>
           <text fg={theme.textMuted}>[Left/Right +/-500]</text>

src/stores/audio-nav.ts

@@ -0,0 +1,126 @@
+/**
+ * Audio navigation store for tracking episode order and position
+ * Persists the current episode context (source type, index, and podcastId)
+ */
+
+import { createSignal } from "solid-js";
+import {
+  loadAudioNavFromFile,
+  saveAudioNavToFile,
+} from "../utils/app-persistence";
+
+/** Source type for audio navigation */
+export enum AudioSource {
+  FEED = "feed",
+  MY_SHOWS = "my_shows",
+  SEARCH = "search",
+}
+
+/** Audio navigation state */
+export interface AudioNavState {
+  /** Current source type */
+  source: AudioSource;
+  /** Index of current episode in the ordered list */
+  currentIndex: number;
+  /** Podcast ID for My Shows source */
+  podcastId?: string;
+  /** Timestamp when navigation state was last saved */
+  lastUpdated: Date;
+}
+
+/** Default navigation state */
+const defaultNavState: AudioNavState = {
+  source: AudioSource.FEED,
+  currentIndex: 0,
+  lastUpdated: new Date(),
+};
+
+/** Create audio navigation store */
+export function createAudioNavStore() {
+  const [navState, setNavState] = createSignal<AudioNavState>(defaultNavState);
+
+  /** Persist current navigation state to file (fire-and-forget) */
+  function persist(): void {
+    saveAudioNavToFile(navState()).catch(() => {});
+  }
+
+  /** Load navigation state from file */
+  async function init(): Promise<void> {
+    const loaded = await loadAudioNavFromFile<AudioNavState>();
+    if (loaded) {
+      setNavState(loaded);
+    }
+  }
+
+  /** Fire-and-forget initialization */
+  init();
+
+  return {
+    /** Get current navigation state */
+    get state(): AudioNavState {
+      return navState();
+    },
+
+    /** Update source type */
+    setSource: (source: AudioSource, podcastId?: string) => {
+      setNavState((prev) => ({
+        ...prev,
+        source,
+        podcastId,
+        lastUpdated: new Date(),
+      }));
+      persist();
+    },
+
+    /** Move to next episode */
+    next: (currentIndex: number) => {
+      setNavState((prev) => ({
+        ...prev,
+        currentIndex,
+        lastUpdated: new Date(),
+      }));
+      persist();
+    },
+
+    /** Move to previous episode */
+    prev: (currentIndex: number) => {
+      setNavState((prev) => ({
+        ...prev,
+        currentIndex,
+        lastUpdated: new Date(),
+      }));
+      persist();
+    },
+
+    /** Reset to default state */
+    reset: () => {
+      setNavState(defaultNavState);
+      persist();
+    },
+
+    /** Get current index */
+    getCurrentIndex: (): number => {
+      return navState().currentIndex;
+    },
+
+    /** Get current source */
+    getSource: (): AudioSource => {
+      return navState().source;
+    },
+
+    /** Get current podcast ID */
+    getPodcastId: (): string | undefined => {
+      return navState().podcastId;
+    },
+  };
+}
+
+/** Singleton instance */
+let audioNavInstance: ReturnType<typeof createAudioNavStore> | null = null;
+
+export function useAudioNavStore() {
+  if (!audioNavInstance) {
+    audioNavInstance = createAudioNavStore();
+  }
+  return audioNavInstance;
+}

src/stores/feed.ts

@@ -19,6 +19,7 @@ import {
 } from "../utils/feeds-persistence";
 import { useDownloadStore } from "./download";
 import { DownloadStatus } from "../types/episode";
+import { useAuthStore } from "./auth";
 
 /** Max episodes to load per page/chunk */
 const MAX_EPISODES_REFRESH = 50;
@@ -48,13 +49,6 @@ export function createFeedStore() {
   const [sources, setSources] = createSignal<PodcastSource[]>([
     ...DEFAULT_SOURCES,
   ]);
-
-  (async () => {
-    const loadedFeeds = await loadFeedsFromFile();
-    if (loadedFeeds.length > 0) setFeeds(loadedFeeds);
-    const loadedSources = await loadSourcesFromFile<PodcastSource>();
-    if (loadedSources && loadedSources.length > 0) setSources(loadedSources);
-  })();
   const [filter, setFilter] = createSignal<FeedFilter>({
     visibility: "all",
     sortBy: "updated" as FeedSortField,
@@ -62,15 +56,20 @@ export function createFeedStore() {
   });
   const [selectedFeedId, setSelectedFeedId] = createSignal<string | null>(null);
   const [isLoadingMore, setIsLoadingMore] = createSignal(false);
+  const [isLoadingFeeds, setIsLoadingFeeds] = createSignal(false);
 
   /** Get filtered and sorted feeds */
   const getFilteredFeeds = (): Feed[] => {
     let result = [...feeds()];
     const f = filter();
+    const authStore = useAuthStore();
 
     // Filter by visibility
     if (f.visibility && f.visibility !== "all") {
       result = result.filter((feed) => feed.visibility === f.visibility);
+    } else if (f.visibility === "all") {
+      // Only show private feeds if authenticated
+      result = result.filter((feed) => feed.visibility === FeedVisibility.PUBLIC || authStore.isAuthenticated);
     }
 
     // Filter by source
@@ -148,6 +147,13 @@ export function createFeedStore() {
     return allEpisodes;
   };
 
+  /** Sort episodes in reverse chronological order (newest first) */
+  const sortEpisodesReverseChronological = (episodes: Episode[]): Episode[] => {
+    return [...episodes].sort(
+      (a, b) => b.pubDate.getTime() - a.pubDate.getTime(),
+    );
+  };
+
   /** Fetch latest episodes from an RSS feed URL, caching all parsed episodes */
   const fetchEpisodes = async (
     feedUrl: string,
@@ -164,7 +170,7 @@ export function createFeedStore() {
       if (!response.ok) return [];
       const xml = await response.text();
       const parsed = parseRSSFeed(xml, feedUrl);
-      const allEpisodes = parsed.episodes;
+      const allEpisodes = sortEpisodesReverseChronological(parsed.episodes);
 
       // Cache all parsed episodes for pagination
       if (feedId) {
@@ -264,12 +270,25 @@ export function createFeedStore() {
 
   /** Refresh all feeds */
   const refreshAllFeeds = async () => {
-    const currentFeeds = feeds();
-    for (const feed of currentFeeds) {
-      await refreshFeed(feed.id);
+    setIsLoadingFeeds(true);
+    try {
+      const currentFeeds = feeds();
+      for (const feed of currentFeeds) {
+        await refreshFeed(feed.id);
+      }
+    } finally {
+      setIsLoadingFeeds(false);
     }
   };
 
+  (async () => {
+    const loadedFeeds = await loadFeedsFromFile();
+    if (loadedFeeds.length > 0) setFeeds(loadedFeeds);
+    const loadedSources = await loadSourcesFromFile<PodcastSource>();
+    if (loadedSources && loadedSources.length > 0) setSources(loadedSources);
+    await refreshAllFeeds();
+  })();
+
   /** Remove a feed */
   const removeFeed = (feedId: string) => {
     fullEpisodeCache.delete(feedId);
@@ -445,6 +464,7 @@ export function createFeedStore() {
     getFeed,
     getSelectedFeed,
     hasMoreEpisodes,
+    isLoadingFeeds,
 
     // Actions
     setFilter,

src/types/desktop-theme.ts

@@ -16,10 +16,18 @@ export const BASE_THEME_COLORS: ThemeColors = {
   secondary: "#a9b1d6",
   accent: "#f6c177",
   text: "#e6edf3",
+  textPrimary: "#e6edf3",
+  textSecondary: "#a9b1d6",
+  textTertiary: "#7d8590",
+  textSelectedPrimary: "#1b1f27",
+  textSelectedSecondary: "#e6edf3",
+  textSelectedTertiary: "#a9b1d6",
   muted: "#7d8590",
   warning: "#f0b429",
   error: "#f47067",
   success: "#3fb950",
+  _hasSelectedListItemText: true,
+  thinkingOpacity: 0.5,
 }
 
 // Base layer backgrounds
@@ -61,16 +69,22 @@ export const THEMES_DESKTOP: DesktopTheme = {
         secondary: "#cba6f7",
         accent: "#f9e2af",
         text: "#cdd6f4",
+        textPrimary: "#cdd6f4",
+        textSecondary: "#cba6f7",
+        textTertiary: "#7f849c",
+        textSelectedPrimary: "#1e1e2e",
+        textSelectedSecondary: "#cdd6f4",
+        textSelectedTertiary: "#cba6f7",
         muted: "#7f849c",
         warning: "#fab387",
         error: "#f38ba8",
         success: "#a6e3a1",
-  layerBackgrounds: {
-    layer0: "transparent",
-    layer1: "#181825",
-    layer2: "#11111b",
-    layer3: "#0a0a0f",
-  },
+    layerBackgrounds: {
+      layer0: "transparent",
+      layer1: "#181825",
+      layer2: "#11111b",
+      layer3: "#0a0a0f",
+    },
       },
     },
     {
@@ -82,6 +96,12 @@ export const THEMES_DESKTOP: DesktopTheme = {
         secondary: "#83a598",
         accent: "#fe8019",
         text: "#ebdbb2",
+        textPrimary: "#ebdbb2",
+        textSecondary: "#83a598",
+        textTertiary: "#928374",
+        textSelectedPrimary: "#282828",
+        textSelectedSecondary: "#ebdbb2",
+        textSelectedTertiary: "#83a598",
         muted: "#928374",
         warning: "#fabd2f",
         error: "#fb4934",
@@ -103,6 +123,12 @@ export const THEMES_DESKTOP: DesktopTheme = {
         secondary: "#bb9af7",
         accent: "#e0af68",
         text: "#c0caf5",
+        textPrimary: "#c0caf5",
+        textSecondary: "#bb9af7",
+        textTertiary: "#565f89",
+        textSelectedPrimary: "#1a1b26",
+        textSelectedSecondary: "#c0caf5",
+        textSelectedTertiary: "#bb9af7",
         muted: "#565f89",
         warning: "#e0af68",
         error: "#f7768e",
@@ -124,6 +150,12 @@ export const THEMES_DESKTOP: DesktopTheme = {
         secondary: "#81a1c1",
         accent: "#ebcb8b",
         text: "#eceff4",
+        textPrimary: "#eceff4",
+        textSecondary: "#81a1c1",
+        textTertiary: "#4c566a",
+        textSelectedPrimary: "#2e3440",
+        textSelectedSecondary: "#eceff4",
+        textSelectedTertiary: "#81a1c1",
         muted: "#4c566a",
         warning: "#ebcb8b",
         error: "#bf616a",

src/types/feed.ts

@@ -69,6 +69,8 @@ export interface FeedFilter {
   sortBy?: FeedSortField
   /** Sort direction */
   sortDirection?: "asc" | "desc"
+  /** Show private feeds */
+  showPrivate?: boolean
 }
 
 /** Feed sort fields */

src/types/podcast.ts

@@ -26,6 +26,8 @@ export interface Podcast {
   lastUpdated: Date
   /** Whether the podcast is currently subscribed */
   isSubscribed: boolean
+  /** Callback to toggle feed visibility */
+  onToggleVisibility?: (feedId: string) => void
 }
 
 /** Podcast with episodes included */

src/types/settings.ts

@@ -23,11 +23,20 @@ export type ThemeColors = {
   secondary: ColorValue;
   accent: ColorValue;
   text: ColorValue;
+  textPrimary?: ColorValue;
+  textSecondary?: ColorValue;
+  textTertiary?: ColorValue;
+  textSelectedPrimary?: ColorValue;
+  textSelectedSecondary?: ColorValue;
+  textSelectedTertiary?: ColorValue;
   muted: ColorValue;
   warning: ColorValue;
   error: ColorValue;
   success: ColorValue;
   layerBackgrounds?: LayerBackgrounds;
+  _hasSelectedListItemText?: boolean;
+  thinkingOpacity?: number;
+  selectedListItemText?: ColorValue;
 };
 
 export type ThemeVariant = {

src/types/theme-schema.ts

@@ -23,4 +23,10 @@ export type ThemeJson = {
 export type ThemeColors = Record<string, RGBA> & {
   _hasSelectedListItemText: boolean
   thinkingOpacity: number
+  textPrimary?: ColorValue
+  textSecondary?: ColorValue
+  textTertiary?: ColorValue
+  textSelectedPrimary?: ColorValue
+  textSelectedSecondary?: ColorValue
+  textSelectedTertiary?: ColorValue
 }

src/ui/command.tsx

@@ -15,6 +15,7 @@ import { useDialog } from "./dialog";
 import { useTheme } from "../context/ThemeContext";
 import { TextAttributes } from "@opentui/core";
 import { emit } from "../utils/event-bus";
+import { SelectableBox, SelectableText } from "@/components/Selectable";
 
 /**
  * Command option for the command palette.
@@ -281,37 +282,44 @@ function CommandDialog(props: {
       <box flexDirection="column" maxHeight={maxHeight} borderColor={theme.border}>
         <For each={filteredOptions().slice(0, 10)}>
           {(option, index) => (
-            <box
-              backgroundColor={
-                index() === selectedIndex() ? theme.primary : undefined
-              }
+            <SelectableBox
+              selected={() => index() === selectedIndex()}
+              flexDirection="column"
               padding={1}
+              onMouseDown={() => {
+                setSelectedIndex(index());
+                const selectedOption = filteredOptions()[index()];
+                if (selectedOption) {
+                  selectedOption.onSelect?.(dialog);
+                  dialog.clear();
+                }
+              }}
             >
-              <box flexDirection="column" flexGrow={1}>
-                <box flexDirection="row" justifyContent="space-between">
-                  <text
-                    fg={
-                      index() === selectedIndex()
-                        ? theme.selectedListItemText
-                        : theme.text
-                    }
-                    attributes={
-                      index() === selectedIndex()
-                        ? TextAttributes.BOLD
-                        : undefined
-                    }
-                  >
-                    {option.title}
-                  </text>
-                  <Show when={option.footer}>
-                    <text fg={theme.textMuted}>{option.footer}</text>
-                  </Show>
-                </box>
-                <Show when={option.description}>
-                  <text fg={theme.textMuted}>{option.description}</text>
-                </Show>
-              </box>
-            </box>
+               <box flexDirection="column" flexGrow={1}>
+                 <SelectableText
+                   selected={() => index() === selectedIndex()}
+                   primary
+                 >
+                   {option.title}
+                 </SelectableText>
+                 <Show when={option.footer}>
+                   <SelectableText
+                     selected={() => index() === selectedIndex()}
+                     tertiary
+                   >
+                     {option.footer}
+                   </SelectableText>
+                 </Show>
+                 <Show when={option.description}>
+                   <SelectableText
+                     selected={() => index() === selectedIndex()}
+                     tertiary
+                   >
+                     {option.description}
+                   </SelectableText>
+                 </Show>
+               </box>
+            </SelectableBox>
           )}
         </For>
         <Show when={filteredOptions().length === 0}>

src/utils/app-persistence.ts

@@ -16,6 +16,7 @@ import { DEFAULT_THEME } from "../constants/themes";
 
 const APP_STATE_FILE = "app-state.json";
 const PROGRESS_FILE = "progress.json";
+const AUDIO_NAV_FILE = "audio-nav.json";
 
 // --- Defaults ---
 
@@ -119,3 +120,39 @@ export async function saveProgressToFile(
     // Silently ignore write errors
   }
 }
+
+interface AudioNavEntry {
+  source: string;
+  currentIndex: number;
+  podcastId?: string;
+  lastUpdated: string;
+}
+
+/** Load audio navigation state from JSON file */
+export async function loadAudioNavFromFile<T>(): Promise<T | null> {
+  try {
+    const filePath = getConfigFilePath(AUDIO_NAV_FILE);
+    const file = Bun.file(filePath);
+    if (!(await file.exists())) return null;
+
+    const raw = await file.json();
+    if (!raw || typeof raw !== "object") return null;
+
+    return raw as T;
+  } catch {
+    return null;
+  }
+}
+
+/** Save audio navigation state to JSON file */
+export async function saveAudioNavToFile<T>(
+  data: T,
+): Promise<void> {
+  try {
+    await ensureConfigDir();
+    const filePath = getConfigFilePath(AUDIO_NAV_FILE);
+    await Bun.write(filePath, JSON.stringify(data, null, 2));
+  } catch {
+    // Silently ignore write errors
+  }
+}

src/utils/keybinds-persistence.ts

@@ -11,7 +11,12 @@ import { parseJSONC } from "./jsonc";
 import { getConfigFilePath, ensureConfigDir } from "./config-dir";
 import type { KeybindsResolved } from "../context/KeybindContext";
 
-const KEYBINDS_SOURCE = path.join(process.cwd(), "src", "config", "keybind.jsonc");
+const KEYBINDS_SOURCE = path.join(
+  process.cwd(),
+  "src",
+  "config",
+  "keybind.jsonc",
+);
 const KEYBINDS_FILE = "keybinds.jsonc";
 
 /** Default keybinds from package */
@@ -22,8 +27,9 @@ const DEFAULT_KEYBINDS: KeybindsResolved = {
   right: ["right", "l"],
   cycle: ["tab"],
   dive: ["return"],
+  select: ["return"],
   out: ["esc"],
-  inverse: ["shift"],
+  inverseModifier: "shift",
   leader: ":",
   quit: ["<leader>q"],
   "audio-toggle": ["<leader>p"],
@@ -31,6 +37,8 @@ const DEFAULT_KEYBINDS: KeybindsResolved = {
   "audio-play": [],
   "audio-next": ["<leader>n"],
   "audio-prev": ["<leader>l"],
+  "audio-seek-forward": ["<leader>sf"],
+  "audio-seek-backward": ["<leader>sb"],
 };
 
 /** Copy keybind.jsonc to user config directory on first run */
@@ -69,7 +77,9 @@ export async function loadKeybindsFromFile(): Promise<KeybindsResolved> {
 }
 
 /** Save keybinds to JSONC file */
-export async function saveKeybindsToFile(keybinds: KeybindsResolved): Promise<void> {
+export async function saveKeybindsToFile(
+  keybinds: KeybindsResolved,
+): Promise<void> {
   try {
     await ensureConfigDir();
     const filePath = getConfigFilePath(KEYBINDS_FILE);

src/utils/sync.ts

@@ -2,9 +2,10 @@ import type { SyncData } from "../types/sync-json"
 import type { SyncDataXML } from "../types/sync-xml"
 import { validateJSONSync, validateXMLSync } from "./sync-validation"
 import { syncFormats } from "../constants/sync-formats"
+import { FeedVisibility } from "../types/feed"
 
 export function exportToJSON(data: SyncData): string {
-  return `{\n  "version": "${data.version}",\n  "lastSyncedAt": "${data.lastSyncedAt}",\n  "feeds": [],\n  "sources": [],\n  "settings": {\n    "theme": "${data.settings.theme}",\n    "playbackSpeed": ${data.settings.playbackSpeed},\n    "downloadPath": "${data.settings.downloadPath}"\n  },\n  "preferences": {\n    "showExplicit": ${data.preferences.showExplicit},\n    "autoDownload": ${data.preferences.autoDownload}\n  }\n}`
+  return `{\n  "version": "${data.version}",\n  "lastSyncedAt": "${data.lastSyncedAt}",\n  "feeds": [],\n  "sources": [],\n  "settings": {\n    "theme": "${data.settings.theme}",\n    "playbackSpeed": ${data.settings.playbackSpeed},\n    "downloadPath": "${data.settings.downloadPath}"\n  },\n  "preferences": {\n    "showExplicit": ${data.preferences.showExplicit},\n    "autoDownload": ${data.preferences.autoDownload}\n  }\}`
 }
 
 export function importFromJSON(json: string): SyncData {

src/utils/system-theme.ts

@@ -64,6 +64,19 @@ export function generateSystemTheme(
   const diffAddedLineNumberBg = tint(grays[3], ansi.green, diffAlpha);
   const diffRemovedLineNumberBg = tint(grays[3], ansi.red, diffAlpha);
 
+  // Create darker shades for selected text colors to ensure contrast
+  const darken = (color: RGBA, factor: number = 0.6) => {
+    return RGBA.fromInts(
+      Math.round(color.r * 255 * factor),
+      Math.round(color.g * 255 * factor),
+      Math.round(color.b * 255 * factor)
+    );
+  };
+
+  const selectedPrimary = darken(ansi.cyan, isDark ? 0.4 : 0.6);
+  const selectedSecondary = darken(ansi.magenta, isDark ? 0.4 : 0.6);
+  const selectedTertiary = darken(textMuted, isDark ? 0.5 : 0.5);
+
   return {
     theme: {
       primary: ansi.cyan,
@@ -75,6 +88,12 @@ export function generateSystemTheme(
       info: ansi.cyan,
       text: fg,
       textMuted,
+      textPrimary: fg,
+      textSecondary: textMuted,
+      textTertiary: textMuted,
+      textSelectedPrimary: selectedPrimary,
+      textSelectedSecondary: selectedSecondary,
+      textSelectedTertiary: selectedTertiary,
       selectedListItemText: bg,
       background: transparent,
       backgroundPanel: grays[2],