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

@@ -86,8 +86,9 @@ export function App() {
       const isQuit = keybind.match("quit", keyEvent);
       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
+      // unified navigation: left->right, top->bottom across all tabs
       if (nav.activeDepth() == 0) {
+        // at top level: cycle through tabs
         if (
           (isCycle && !isInverting) ||
           (isDown && !isInverting) ||
@@ -104,6 +105,7 @@ export function App() {
           nav.prevTab();
           return;
         }
+        // dive out to first pane
         if (
           (isDive && !isInverting) ||
           (isOut && isInverting) ||
@@ -112,8 +114,8 @@ export function App() {
         ) {
           nav.setActiveDepth(1);
         }
-      }
+      } else {
-      if (nav.activeDepth() == 1) {
+        // in panes: navigate between them
         if (
           (isDive && isInverting) ||
           (isOut && !isInverting) ||
@@ -121,6 +123,10 @@ export function App() {
           (isLeft && !isInverting)
         ) {
           nav.setActiveDepth(0);
+        } else if (isDown && !isInverting) {
+          nav.nextPane();
+        } else if (isUp && isInverting) {
+          nav.prevPane();
         }
       }
     },

src/context/NavigationContext.tsx

@@ -1,6 +1,16 @@
 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({
@@ -17,7 +27,6 @@ export const { use: useNavigation, provider: NavigationProvider } =
         ),
       );
 
-      //conveniences
       const nextTab = () => {
         if (activeTab() >= TabsCount) {
           setActiveTab(1);
@@ -31,10 +40,23 @@ 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 {
         activeTab,
         activeDepth,
@@ -44,6 +66,8 @@ export const { use: useNavigation, provider: NavigationProvider } =
         setInputFocused,
         nextTab,
         prevTab,
+        nextPane,
+        prevPane,
       };
     },
   });

src/index.tsx

@@ -1,17 +1,198 @@
-// Hack: Force TERM to tmux-256color when running in tmux to enable
+const VERSION = "0.1.0";
-// correct palette detection in @opentui/core
-//if (process.env.TMUX && !process.env.TERM?.includes("tmux")) {
-//process.env.TERM = "tmux-256color"
-//}
 
-import { render, useRenderer } from "@opentui/solid";
+interface CliArgs {
-import { App } from "./App";
+  version: boolean;
-import { ThemeProvider } from "./context/ThemeContext";
+  query: string | null;
-import { ToastProvider, Toast } from "./ui/toast";
+  play: string | null;
-import { KeybindProvider } from "./context/KeybindContext";
+}
-import { NavigationProvider } from "./context/NavigationContext";
+
-import { DialogProvider } from "./ui/dialog";
+function parseArgs(): CliArgs {
-import { CommandProvider } from "./ui/command";
+  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();
@@ -22,21 +203,23 @@ function RendererSetup(props: { children: unknown }) {
     render(
       () => (
         <RendererSetup>
-      <ToastProvider>
+          <toast.ToastProvider>
             <ThemeProvider mode="dark">
               <KeybindProvider>
                 <NavigationProvider>
                   <DialogProvider>
                     <CommandProvider>
                       <App />
-                  <Toast />
+                      <toast.Toast />
                     </CommandProvider>
                   </DialogProvider>
                 </NavigationProvider>
               </KeybindProvider>
             </ThemeProvider>
-      </ToastProvider>
+          </toast.ToastProvider>
         </RendererSetup>
       ),
       { useThread: false },
     );
+  });
+}

src/pages/Discover/DiscoverPage.tsx

@@ -31,6 +31,7 @@ export function DiscoverPage() {
         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();
@@ -40,15 +41,20 @@ export function DiscoverPage() {
           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) {
+        if (isDown && !isInverting()) {
           setShowIndex((i) => (i + 1) % filteredPodcasts.length);
-        } else if (isUp) {
+        } else if (isUp && isInverting()) {
           setShowIndex((i) => (i - 1 + filteredPodcasts.length) % filteredPodcasts.length);
-        } else if (isCycle) {
+        } 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 },

src/pages/Feed/FeedPage.tsx

@@ -41,6 +41,7 @@ export function FeedPage() {
         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();
@@ -50,15 +51,20 @@ export function FeedPage() {
           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) {
+        if (isDown && !isInverting()) {
           setFocusedIndex((i) => (i + 1) % episodes.length);
-        } else if (isUp) {
+        } else if (isUp && isInverting()) {
           setFocusedIndex((i) => (i - 1 + episodes.length) % episodes.length);
-        } else if (isCycle) {
+        } 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 },

src/pages/MyShows/MyShowsPage.tsx

@@ -42,10 +42,10 @@ export function MyShowsPage() {
         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();
-        const selected = selectedShow();
 
         if (isSelect) {
           if (shows.length > 0 && showIndex() < shows.length) {
@@ -57,23 +57,18 @@ export function MyShowsPage() {
           return;
         }
 
-        if (shows.length > 0) {
+        // don't handle pane navigation here - unified in App.tsx
-          if (isDown) {
+        if (nav.activeDepth() !== MyShowsPaneType.EPISODES) return;
-            setShowIndex((i) => (i + 1) % shows.length);
-          } else if (isUp) {
-            setShowIndex((i) => (i - 1 + shows.length) % shows.length);
-          } else if (isCycle) {
-            setShowIndex((i) => (i + 1) % shows.length);
-          }
-        }
 
         if (episodesList.length > 0) {
-          if (isDown) {
+          if (isDown && !isInverting()) {
             setEpisodeIndex((i) => (i + 1) % episodesList.length);
-          } else if (isUp) {
+          } else if (isUp && isInverting()) {
             setEpisodeIndex((i) => (i - 1 + episodesList.length) % episodesList.length);
-          } else if (isCycle) {
+          } 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);
           }
         }
       },

src/pages/Player/PlayerPage.tsx

@@ -23,6 +23,8 @@ export function PlayerPage() {
   onMount(() => {
     useKeyboard(
       (keyEvent: any) => {
+        const isInverting = keybind.isInverting(keyEvent);
+
         if (keybind.match("audio-toggle", keyEvent)) {
           audio.togglePlayback();
           return;

src/pages/Search/SearchPage.tsx

@@ -36,6 +36,7 @@ export function SearchPage() {
         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();
@@ -45,15 +46,20 @@ export function SearchPage() {
           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) {
+        if (isDown && !isInverting()) {
           setResultIndex((i) => (i + 1) % results.length);
-        } else if (isUp) {
+        } else if (isUp && isInverting()) {
           setResultIndex((i) => (i - 1 + results.length) % results.length);
-        } else if (isCycle) {
+        } 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 },

src/pages/Settings/SettingsPage.tsx

@@ -45,20 +45,19 @@ export function SettingsPage() {
         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) {
+        // 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);
-          return;
+        } else if (isUp && isInverting()) {
-        }
+          nav.setActiveDepth((nav.activeDepth() - 2 + SettingsPaneCount) % SettingsPaneCount + 1);
-
+        } else if ((isCycle && !isInverting()) || (isDown && !isInverting())) {
-        const nextDepth = isDown
-          ? (nav.activeDepth() % SettingsPaneCount) + 1
-          : (nav.activeDepth() - 2 + SettingsPaneCount) % SettingsPaneCount + 1;
-
-        if (isCycle) {
           nav.setActiveDepth((nav.activeDepth() % SettingsPaneCount) + 1);
-        } else {
+        } else if ((isCycle && isInverting()) || (isUp && isInverting())) {
-          nav.setActiveDepth(nextDepth);
+          nav.setActiveDepth((nav.activeDepth() - 2 + SettingsPaneCount) % SettingsPaneCount + 1);
         }
       },
       { release: false },