4, partial 5

2026-02-04 01:00:57 -05:00
parent 7b5c256e07
commit d5ce8452e4
20 changed files with 2215 additions and 69 deletions
--- a/src/components/FeedItem.tsx
+++ b/src/components/FeedItem.tsx
@@ -0,0 +1,133 @@
+/**
+ * Feed item component for PodTUI
+ * Displays a single feed/podcast in the list
+ */
+
+import type { Feed, FeedVisibility } from "../types/feed"
+import { format } from "date-fns"
+
+interface FeedItemProps {
+  feed: Feed
+  isSelected: boolean
+  showEpisodeCount?: boolean
+  showLastUpdated?: boolean
+  compact?: boolean
+}
+
+export function FeedItem(props: FeedItemProps) {
+  const formatDate = (date: Date): string => {
+    return format(date, "MMM d")
+  }
+
+  const episodeCount = () => props.feed.episodes.length
+  const unplayedCount = () => {
+    // This would be calculated based on episode status
+    return props.feed.episodes.length
+  }
+
+  const visibilityIcon = () => {
+    return props.feed.visibility === "public" ? "[P]" : "[*]"
+  }
+
+  const visibilityColor = () => {
+    return props.feed.visibility === "public" ? "green" : "yellow"
+  }
+
+  const pinnedIndicator = () => {
+    return props.feed.isPinned ? "*" : " "
+  }
+
+  if (props.compact) {
+    // Compact single-line view
+    return (
+      <box
+        flexDirection="row"
+        gap={1}
+        backgroundColor={props.isSelected ? "#333" : undefined}
+        paddingLeft={1}
+        paddingRight={1}
+      >
+        <text>
+          <span fg={props.isSelected ? "cyan" : "gray"}>
+            {props.isSelected ? ">" : " "}
+          </span>
+        </text>
+        <text>
+          <span fg={visibilityColor()}>{visibilityIcon()}</span>
+        </text>
+        <text>
+          <span fg={props.isSelected ? "white" : undefined}>
+            {props.feed.customName || props.feed.podcast.title}
+          </span>
+        </text>
+        {props.showEpisodeCount && (
+          <text>
+            <span fg="gray">({episodeCount()})</span>
+          </text>
+        )}
+      </box>
+    )
+  }
+
+  // Full view with details
+  return (
+    <box
+      flexDirection="column"
+      gap={0}
+      border={props.isSelected}
+      borderColor={props.isSelected ? "cyan" : undefined}
+      backgroundColor={props.isSelected ? "#222" : undefined}
+      padding={1}
+    >
+      {/* Title row */}
+      <box flexDirection="row" gap={1}>
+        <text>
+          <span fg={props.isSelected ? "cyan" : "gray"}>
+            {props.isSelected ? ">" : " "}
+          </span>
+        </text>
+        <text>
+          <span fg={visibilityColor()}>{visibilityIcon()}</span>
+        </text>
+        <text>
+          <span fg="yellow">{pinnedIndicator()}</span>
+        </text>
+        <text>
+          <span fg={props.isSelected ? "white" : undefined}>
+            <strong>{props.feed.customName || props.feed.podcast.title}</strong>
+          </span>
+        </text>
+      </box>
+
+      {/* Details row */}
+      <box flexDirection="row" gap={2} paddingLeft={4}>
+        {props.showEpisodeCount && (
+          <text>
+            <span fg="gray">
+              {episodeCount()} episodes ({unplayedCount()} new)
+            </span>
+          </text>
+        )}
+        {props.showLastUpdated && (
+          <text>
+            <span fg="gray">
+              Updated: {formatDate(props.feed.lastUpdated)}
+            </span>
+          </text>
+        )}
+      </box>
+
+      {/* Description (truncated) */}
+      {props.feed.podcast.description && (
+        <box paddingLeft={4} paddingTop={0}>
+          <text>
+            <span fg="gray">
+              {props.feed.podcast.description.slice(0, 60)}
+              {props.feed.podcast.description.length > 60 ? "..." : ""}
+            </span>
+          </text>
+        </box>
+      )}
+    </box>
+  )
+}