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

@@ -28,13 +28,22 @@ export function App() {
   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: () => nav.activeTab === TABS.PLAYER && nav.activeDepth > 0,
-    inputFocused: () => nav.inputFocused,
+    playerFocused: () =>
+      nav.activeTab() === TABS.PLAYER && nav.activeDepth() > 0,
+    inputFocused: () => nav.inputFocused(),
     hasEpisode: () => !!audio.currentEpisode(),
   });
 
@@ -62,11 +71,11 @@ export function App() {
 
   useKeyboard(
     (keyEvent) => {
+      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 isCycle = keybind.match("cycle", keyEvent);
       const isDive = keybind.match("dive", keyEvent);
       const isOut = keybind.match("out", keyEvent);
       const isToggle = keybind.match("audio-toggle", keyEvent);
@@ -75,26 +84,49 @@ export function App() {
       const isSeekForward = keybind.match("audio-seek-forward", keyEvent);
       const isSeekBackward = keybind.match("audio-seek-backward", keyEvent);
       const isQuit = keybind.match("quit", keyEvent);
-      console.log({
-        up: isUp,
-        down: isDown,
-        left: isLeft,
-        right: isRight,
-        cycle: isCycle,
-        dive: isDive,
-        out: isOut,
-        audioToggle: isToggle,
-        audioNext: isNext,
-        audioPrev: isPrev,
-        audioSeekForward: isSeekForward,
-        audioSeekBackward: isSeekBackward,
-        quit: isQuit,
-      });
+      const isInverting = keybind.isInverting(keyEvent);
 
-      // only handling top navigation here, cycle through tabs, just to high priority(player) all else to be handled in each tab
-      if (nav.activeDepth == 0) {
-        if (isCycle) {
+      // 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();
         }
       }
     },
@@ -117,7 +149,11 @@ export function App() {
         flexDirection="column"
         width="100%"
         height="100%"
-        backgroundColor={theme.surface}
+        backgroundColor={
+          themeContext.selected === "system"
+            ? "transparent"
+            : themeContext.theme.surface
+        }
       >
         <LoadingIndicator />
         {DEBUG && (
@@ -149,11 +185,8 @@ export function App() {
           </box>
         )}
         <box flexDirection="row" width="100%" height="100%">
-          <TabNavigation
-            activeTab={nav.activeTab}
-            onTabSelect={nav.setActiveTab}
-          />
-          {LayerGraph[nav.activeTab]()}
+          <TabNavigation />
+          {LayerGraph[nav.activeTab()]()}
         </box>
       </box>
     </ErrorBoundary>

src/components/Selectable.tsx

@@ -8,7 +8,8 @@ export const SelectableBox: ParentComponent<
     selected: () => boolean;
   } & BoxOptions
 > = (props) => {
-  const { theme } = useTheme();
+  const themeContext = useTheme();
+  const { theme } = themeContext;
 
   const child = solidChildren(() => props.children);
 
@@ -16,7 +17,13 @@ export const SelectableBox: ParentComponent<
     <box
       border={!!props.border}
       borderColor={props.selected() ? theme.surface : theme.border}
-      backgroundColor={props.selected() ? theme.primary : theme.surface}
+      backgroundColor={
+        props.selected()
+          ? theme.primary
+          : themeContext.selected === "system"
+            ? "transparent"
+            : themeContext.theme.surface
+      }
       {...props}
     >
       {child()}

src/components/TabNavigation.tsx

@@ -1,12 +1,8 @@
 import { useTheme } from "@/context/ThemeContext";
-import { TABS } from "@/utils/navigation";
+import { TABS, TabsCount } from "@/utils/navigation";
 import { For } from "solid-js";
 import { SelectableBox, SelectableText } from "@/components/Selectable";
-
-interface TabNavigationProps {
-  activeTab: TABS;
-  onTabSelect: (tab: TABS) => void;
-}
+import { useNavigation } from "@/context/NavigationContext";
 
 export const tabs: TabDefinition[] = [
   { id: TABS.FEED, label: "Feed" },
@@ -17,32 +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) => (
-           <SelectableBox
-             border
-             selected={() => tab.id == props.activeTab}
-             onMouseDown={() => props.onTabSelect(tab.id)}
-           >
-             <SelectableText
-               selected={() => tab.id == props.activeTab}
-               primary
-               alignSelf="center"
-             >
-               {tab.label}
-             </SelectableText>
-           </SelectableBox>
+          <SelectableBox
+            border
+            height={3}
+            selected={() => tab.id == activeTab()}
+            onMouseDown={() => setActiveTab(tab.id)}
+          >
+            <SelectableText
+              selected={() => tab.id == activeTab()}
+              primary
+              alignSelf="center"
+            >
+              {tab.label}
+            </SelectableText>
+          </SelectableBox>
         )}
       </For>
     </box>

src/config/keybind.jsonc

@@ -6,10 +6,10 @@
   "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"],
+  "refresh": ["<leader>r"],
   "audio-toggle": ["<leader>p"],
   "audio-pause": [],
   "audio-play": [],

src/context/KeybindContext.tsx

@@ -15,11 +15,12 @@ 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[];
@@ -36,6 +37,7 @@ export enum KeybindAction {
   DIVE,
   OUT,
   QUIT,
+  SELECT,
   AUDIO_TOGGLE,
   AUDIO_PAUSE,
   AUDIO_PLAY,
@@ -57,9 +59,10 @@ export const { use: useKeybinds, provider: KeybindProvider } =
         cycle: [],
         dive: [],
         out: [],
-        inverse: [],
+        inverseModifier: "",
         leader: "",
         quit: [],
+        select: [],
         refresh: [],
         "audio-toggle": [],
         "audio-pause": [],
@@ -100,6 +103,18 @@ export const { use: useKeybinds, provider: KeybindProvider } =
         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(() => {});
@@ -115,6 +130,7 @@ export const { use: useKeybinds, provider: KeybindProvider } =
         save,
         print,
         match,
+        isInverting,
       };
     },
   });

src/context/NavigationContext.tsx

@@ -1,6 +1,16 @@
-import { createSignal } from "solid-js";
+import { createEffect, createSignal, on } from "solid-js";
 import { createSimpleContext } from "./helper";
-import { TABS, TabsCount } from "@/utils/navigation";
+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({
@@ -10,7 +20,13 @@ export const { use: useNavigation, provider: NavigationProvider } =
       const [activeDepth, setActiveDepth] = createSignal(0);
       const [inputFocused, setInputFocused] = createSignal(false);
 
-      //conveniences
+      createEffect(
+        on(
+          () => activeTab,
+          () => setActiveDepth(0),
+        ),
+      );
+
       const nextTab = () => {
         if (activeTab() >= TabsCount) {
           setActiveTab(1);
@@ -24,25 +40,34 @@ export const { use: useNavigation, provider: NavigationProvider } =
           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 {
-        get activeTab() {
-          return activeTab();
-        },
-        get activeDepth() {
-          return activeDepth();
-        },
-        get inputFocused() {
-          return inputFocused();
-        },
+        activeTab,
+        activeDepth,
+        inputFocused,
         setActiveTab,
         setActiveDepth,
         setInputFocused,
         nextTab,
         prevTab,
+        nextPane,
+        prevPane,
       };
     },
   });

src/index.tsx

@@ -1,42 +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 { NavigationProvider } from "./context/NavigationContext";
-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>
-            <NavigationProvider>
-              <DialogProvider>
-                <CommandProvider>
-                  <App />
-                  <Toast />
-                </CommandProvider>
-              </DialogProvider>
-            </NavigationProvider>
-          </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,13 +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 { SelectableBox, SelectableText } from "@/components/Selectable";
 import { useNavigation } from "@/context/NavigationContext";
+import { KeybindProvider, useKeybinds } from "@/context/KeybindContext";
 
 enum DiscoverPagePaneType {
   CATEGORIES = 1,
@@ -21,6 +22,44 @@ export function DiscoverPage() {
   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);
@@ -43,13 +82,17 @@ export function DiscoverPage() {
       <box
         border
         padding={1}
-        borderColor={theme.border}
+        borderColor={
+          nav.activeDepth() != DiscoverPagePaneType.CATEGORIES
+            ? theme.border
+            : theme.accent
+        }
         flexDirection="column"
         gap={1}
       >
         <text
           fg={
-            nav.activeDepth == DiscoverPagePaneType.CATEGORIES
+            nav.activeDepth() == DiscoverPagePaneType.CATEGORIES
               ? theme.accent
               : theme.text
           }
@@ -76,61 +119,67 @@ export function DiscoverPage() {
           </For>
         </box>
       </box>
-      <box
-        flexDirection="column"
-        flexGrow={1}
-        border
-        borderColor={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>
-                )}
-              </box>
-            }
-            when={
-              !discoverStore.isLoading() &&
-              discoverStore.filteredPodcasts().length === 0
-            }
-          >
-            <scrollbox>
-              <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)}
-                    />
+        <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/Feed/FeedDetail.tsx

@@ -56,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") {
@@ -91,6 +96,9 @@ export function FeedDetail(props: FeedDetailProps) {
         <box border padding={0} onMouseDown={() => setShowInfo((v) => !v)} borderColor={theme.border}>
             <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 */}
@@ -125,6 +133,9 @@ export function FeedDetail(props: FeedDetailProps) {
             </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>
 

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/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

@@ -3,7 +3,7 @@
  * 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";
@@ -12,28 +12,64 @@ import { useTheme } from "@/context/ThemeContext";
 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;
 
-/** Episodes to load per batch */
 const ITEMS_PER_BATCH = 50;
 
 export function FeedPage() {
   const feedStore = useFeedStore();
-  const [isRefreshing, setIsRefreshing] = createSignal(false);
-  const [loadedEpisodesCount, setLoadedEpisodesCount] =
-    createSignal(ITEMS_PER_BATCH);
   const nav = useNavigation();
-
+  const { theme } = useTheme();
+  const [selectedEpisodeID, setSelectedEpisodeID] = createSignal<
+    string | undefined
+  >();
   const allEpisodes = () => feedStore.getAllEpisodesChronological();
+  const keybind = useKeybinds();
+  const [focusedIndex, setFocusedIndex] = createSignal(0);
 
-  const paginatedEpisodes = () => {
-    const episodes = allEpisodes();
-    return episodes.slice(0, loadedEpisodesCount());
-  };
+  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");
@@ -41,9 +77,8 @@ export function FeedPage() {
 
   const groupEpisodesByDate = () => {
     const groups: Record<string, Array<{ episode: Episode; feed: Feed }>> = {};
-    const episodes = paginatedEpisodes();
 
-    for (const item of episodes) {
+    for (const item of allEpisodes()) {
       const dateKey = formatDate(new Date(item.episode.pubDate));
       if (!groups[dateKey]) {
         groups[dateKey] = [];
@@ -51,7 +86,13 @@ export function FeedPage() {
       groups[dateKey].push(item);
     }
 
-    return groups;
+    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 => {
@@ -61,19 +102,17 @@ export function FeedPage() {
     return `${mins}m`;
   };
 
-  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={
@@ -84,50 +123,71 @@ export function FeedPage() {
           </box>
         }
       >
-        <scrollbox height="100%" focused={nav.activeDepth == FeedPaneType.FEED}>
-          <For each={Object.entries(groupEpisodesByDate()).sort(([a], [b]) => b.localeCompare(a))}>
-            {([date, episodes]) => (
+        <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={episodes}>
-                  {(item) => (
-                    <SelectableBox
-                      selected={() => false}
-                      flexDirection="column"
-                      gap={0}
-                      paddingLeft={1}
-                      paddingRight={1}
-                      paddingTop={0}
-                      paddingBottom={0}
-                      onMouseDown={() => {
-                        // Selection is handled by App's keyboard navigation
-                      }}
-                    >
-                      <SelectableText selected={() => false} primary>
-                        {item.episode.title}
-                      </SelectableText>
-                      <box flexDirection="row" gap={2} paddingLeft={2}>
-                        <SelectableText selected={() => false} primary>
-                          {item.feed.podcast.title}
+                <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>
-                        <SelectableText selected={() => false} tertiary>
-                          {formatDuration(item.episode.duration)}
-                        </SelectableText>
-                      </box>
-                    </SelectableBox>
-                  )}
+                        <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>
-          {/* Loading indicator */}
-          <Show when={feedStore.isLoadingMore()}>
-            <box padding={1}>
-              <LoadingIndicator />
-            </box>
-          </Show>
         </scrollbox>
       </Show>
     </box>

src/pages/MyShows/MyShowsPage.tsx

@@ -4,7 +4,8 @@
  * 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";
@@ -13,6 +14,7 @@ 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,
@@ -31,6 +33,48 @@ export function MyShowsPage() {
   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;
@@ -129,8 +173,14 @@ export function MyShowsPage() {
           }
         >
           <scrollbox
+            border
             height="100%"
-            focused={nav.activeDepth == MyShowsPaneType.SHOWS}
+            borderColor={
+              nav.activeDepth() == MyShowsPaneType.SHOWS
+                ? theme.accent
+                : theme.border
+            }
+            focused={nav.activeDepth() == MyShowsPaneType.SHOWS}
           >
             <For each={shows()}>
               {(feed, index) => (
@@ -171,26 +221,32 @@ export function MyShowsPage() {
         </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={episodes().length > 0}
+            when={selectedShow()}
             fallback={
               <box padding={1}>
-                <text fg={theme.muted}>No episodes. Press [r] to refresh.</text>
+                <text fg={theme.muted}>Select a show</text>
               </box>
             }
           >
-            <scrollbox
-              height="100%"
-              focused={nav.activeDepth == MyShowsPaneType.EPISODES}
+            <Show
+              when={episodes().length > 0}
+              fallback={
+                <box padding={1}>
+                  <text fg={theme.muted}>No episodes. Press [r] to refresh.</text>
+                </box>
+              }
             >
+              <scrollbox
+                border
+                height="100%"
+                borderColor={
+                  nav.activeDepth() == MyShowsPaneType.EPISODES
+                    ? theme.accent
+                    : theme.border
+                }
+                focused={nav.activeDepth() == MyShowsPaneType.EPISODES}
+              >
               <For each={episodes()}>
                 {(episode, index) => (
                   <box

src/pages/Player/PlayerPage.tsx

@@ -3,6 +3,10 @@ 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,
@@ -12,6 +16,33 @@ export const PlayerPaneCount = 1;
 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();
@@ -41,7 +72,7 @@ export function PlayerPage() {
 
       <box
         border
-        borderColor={theme.border}
+        borderColor={nav.activeDepth() == PlayerPaneType.PLAYER ? theme.accent : theme.border}
         padding={1}
         flexDirection="column"
         gap={1}

src/pages/Search/SearchPage.tsx

@@ -2,7 +2,7 @@
  * 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";
@@ -11,6 +11,7 @@ import type { SearchResult } from "@/types/source";
 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,
@@ -26,6 +27,44 @@ export function SearchPage() {
   const [historyIndex, setHistoryIndex] = createSignal(0);
   const { theme } = useTheme();
   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 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();
@@ -69,7 +108,7 @@ export function SearchPage() {
               setInputValue(value);
             }}
             placeholder="Enter podcast name, topic, or author..."
-            focused={nav.activeDepth === SearchPaneType.INPUT}
+            focused={nav.activeDepth() === SearchPaneType.INPUT}
             width={50}
           />
           <box
@@ -92,76 +131,80 @@ export function SearchPage() {
         </Show>
       </box>
 
-      {/* Main Content - Results or History */}
-      <box flexDirection="row" height="100%" gap={2}>
-        {/* Results Panel */}
-        <box
-          flexDirection="column"
-          flexGrow={1}
-          border
-          borderColor={theme.border}
-        >
-          <box padding={1}>
-            <text
-              fg={
-                nav.activeDepth === SearchPaneType.RESULTS
-                  ? theme.primary
-                  : theme.muted
-              }
-            >
-              Results ({searchStore.results().length})
-            </text>
-          </box>
-          <Show
-            when={searchStore.results().length > 0}
-            fallback={
-              <box padding={2}>
-                <text fg={theme.muted}>
-                  {searchStore.query()
-                    ? "No results found"
-                    : "Enter a search term to find podcasts"}
-                </text>
-              </box>
+        {/* Main Content - Results or History */}
+        <box flexDirection="row" height="100%" gap={2}>
+          {/* Results Panel */}
+          <box
+            flexDirection="column"
+            flexGrow={1}
+            border
+            borderColor={
+              nav.activeDepth() === SearchPaneType.RESULTS
+                ? theme.accent
+                : theme.border
             }
           >
-            <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 borderColor={theme.border}>
-          <box padding={1} flexDirection="column">
-            <box paddingBottom={1}>
+            <box padding={1}>
               <text
                 fg={
-                  nav.activeDepth === SearchPaneType.HISTORY
+                  nav.activeDepth() === SearchPaneType.RESULTS
                     ? theme.primary
                     : theme.muted
                 }
               >
-                History
+                Results ({searchStore.results().length})
               </text>
             </box>
-            <SearchHistory
-              history={searchStore.history()}
-              selectedIndex={historyIndex()}
-              focused={nav.activeDepth === SearchPaneType.HISTORY}
-              onSelect={handleHistorySelect}
-              onRemove={searchStore.removeFromHistory}
-              onClear={searchStore.clearHistory}
-              onChange={setHistoryIndex}
-            />
+            <Show
+              when={searchStore.results().length > 0}
+              fallback={
+                <box padding={2}>
+                  <text fg={theme.muted}>
+                    {searchStore.query()
+                      ? "No results found"
+                      : "Enter a search term to find podcasts"}
+                  </text>
+                </box>
+              }
+            >
+              <SearchResults
+                results={searchStore.results()}
+                selectedIndex={resultIndex()}
+                focused={nav.activeDepth() === SearchPaneType.RESULTS}
+                onSelect={handleResultSelect}
+                onChange={setResultIndex}
+                isSearching={searchStore.isSearching()}
+                error={searchStore.error()}
+              />
+            </Show>
+          </box>
+
+          {/* 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>
           </box>
         </box>
-      </box>
     </box>
   );
 }

src/pages/Settings/SettingsPage.tsx

@@ -1,4 +1,4 @@
-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";
@@ -6,6 +6,7 @@ import { PreferencesPanel } from "./PreferencesPanel";
 import { SyncPanel } from "./SyncPanel";
 import { VisualizerSettings } from "./VisualizerSettings";
 import { useNavigation } from "@/context/NavigationContext";
+import { KeybindProvider, useKeybinds } from "@/context/KeybindContext";
 
 enum SettingsPaneType {
   SYNC = 1,
@@ -27,6 +28,41 @@ const SECTIONS: Array<{ id: SettingsPaneType; label: string }> = [
 export function SettingsPage() {
   const { theme } = useTheme();
   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%">
@@ -38,13 +74,13 @@ export function SettingsPage() {
               borderColor={theme.border}
               padding={0}
               backgroundColor={
-                nav.activeDepth === section.id ? theme.primary : undefined
+                currentDepth() === section.id ? theme.primary : undefined
               }
               onMouseDown={() => nav.setActiveDepth(section.id)}
             >
               <text
                 fg={
-                  nav.activeDepth === section.id ? theme.text : theme.textMuted
+                  currentDepth() === section.id ? theme.text : theme.textMuted
                 }
               >
                 [{index() + 1}] {section.label}
@@ -56,23 +92,23 @@ export function SettingsPage() {
 
       <box
         border
-        borderColor={theme.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}
       >
-        {nav.activeDepth === SettingsPaneType.SYNC && <SyncPanel />}
-        {nav.activeDepth === SettingsPaneType.SOURCES && (
+        {isActive(SettingsPaneType.SYNC) && <SyncPanel />}
+        {isActive(SettingsPaneType.SOURCES) && (
           <SourceManager focused />
         )}
-        {nav.activeDepth === SettingsPaneType.PREFERENCES && (
+        {isActive(SettingsPaneType.PREFERENCES) && (
           <PreferencesPanel />
         )}
-        {nav.activeDepth === SettingsPaneType.VISUALIZER && (
+        {isActive(SettingsPaneType.VISUALIZER) && (
           <VisualizerSettings />
         )}
-        {nav.activeDepth === SettingsPaneType.ACCOUNT && (
+        {isActive(SettingsPaneType.ACCOUNT) && (
           <box flexDirection="column" gap={1}>
             <text fg={theme.textMuted}>Account</text>
           </box>

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;
@@ -61,10 +62,14 @@ export function createFeedStore() {
   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

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/utils/keybinds-persistence.ts

@@ -27,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"],

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 {