file ordering

2026-02-06 14:55:42 -05:00
parent 1293d30225
commit 1e3b794b8e
101 changed files with 1662 additions and 4224 deletions
--- a/src/tabs/Feed/FeedPage.tsx
+++ b/src/tabs/Feed/FeedPage.tsx
@@ -0,0 +1,123 @@
+/**
+ * FeedPage - Shows latest episodes across all subscribed shows
+ * Reverse chronological order, like an inbox/timeline
+ */
+
+import { createSignal, For, Show } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+import { useFeedStore } from "@/stores/feed";
+import { format } from "date-fns";
+import type { Episode } from "@/types/episode";
+import type { Feed } from "@/types/feed";
+
+type FeedPageProps = {
+  focused: boolean;
+  onPlayEpisode?: (episode: Episode, feed: Feed) => void;
+  onExit?: () => void;
+};
+
+export function FeedPage(props: FeedPageProps) {
+  const feedStore = useFeedStore();
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [isRefreshing, setIsRefreshing] = createSignal(false);
+
+  const allEpisodes = () => feedStore.getAllEpisodesChronological();
+
+  const formatDate = (date: Date): string => {
+    return format(date, "MMM d, yyyy");
+  };
+
+  const formatDuration = (seconds: number): string => {
+    const mins = Math.floor(seconds / 60);
+    const hrs = Math.floor(mins / 60);
+    if (hrs > 0) return `${hrs}h ${mins % 60}m`;
+    return `${mins}m`;
+  };
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    await feedStore.refreshAllFeeds();
+    setIsRefreshing(false);
+  };
+
+  useKeyboard((key) => {
+    if (!props.focused) return;
+
+    const episodes = allEpisodes();
+
+    if (key.name === "down" || key.name === "j") {
+      setSelectedIndex((i) => Math.min(episodes.length - 1, i + 1));
+    } else if (key.name === "up" || key.name === "k") {
+      setSelectedIndex((i) => Math.max(0, i - 1));
+    } else if (key.name === "return" || key.name === "enter") {
+      const item = episodes[selectedIndex()];
+      if (item) props.onPlayEpisode?.(item.episode, item.feed);
+    } else if (key.name === "home" || key.name === "g") {
+      setSelectedIndex(0);
+    } else if (key.name === "end") {
+      setSelectedIndex(episodes.length - 1);
+    } else if (key.name === "pageup") {
+      setSelectedIndex((i) => Math.max(0, i - 10));
+    } else if (key.name === "pagedown") {
+      setSelectedIndex((i) => Math.min(episodes.length - 1, i + 10));
+    } else if (key.name === "r") {
+      handleRefresh();
+    } else if (key.name === "escape") {
+      props.onExit?.();
+    }
+  });
+
+  return (
+    <box flexDirection="column" height="100%">
+      {/* Status line */}
+      <Show when={isRefreshing()}>
+        <text fg="yellow">Refreshing feeds...</text>
+      </Show>
+
+      {/* Episode list */}
+      <Show
+        when={allEpisodes().length > 0}
+        fallback={
+          <box padding={2}>
+            <text fg="gray">
+              No episodes yet. Subscribe to shows from Discover or Search.
+            </text>
+          </box>
+        }
+      >
+        <scrollbox height="100%" focused={props.focused}>
+          <For each={allEpisodes()}>
+            {(item, index) => (
+              <box
+                flexDirection="column"
+                gap={0}
+                paddingLeft={1}
+                paddingRight={1}
+                paddingTop={0}
+                paddingBottom={0}
+                backgroundColor={
+                  index() === selectedIndex() ? "#333" : undefined
+                }
+                onMouseDown={() => setSelectedIndex(index())}
+              >
+                <box flexDirection="row" gap={1}>
+                  <text fg={index() === selectedIndex() ? "cyan" : "gray"}>
+                    {index() === selectedIndex() ? ">" : " "}
+                  </text>
+                  <text fg={index() === selectedIndex() ? "white" : undefined}>
+                    {item.episode.title}
+                  </text>
+                </box>
+                <box flexDirection="row" gap={2} paddingLeft={2}>
+                  <text fg="cyan">{item.feed.podcast.title}</text>
+                  <text fg="gray">{formatDate(item.episode.pubDate)}</text>
+                  <text fg="gray">{formatDuration(item.episode.duration)}</text>
+                </box>
+              </box>
+            )}
+          </For>
+        </scrollbox>
+      </Show>
+    </box>
+  );
+}