cleaning up code
This commit is contained in:
@@ -1,85 +0,0 @@
|
||||
/**
|
||||
* PodcastCard component - Reusable card for displaying podcast info
|
||||
*/
|
||||
|
||||
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;
|
||||
selected: boolean;
|
||||
compact?: boolean;
|
||||
onSelect?: () => void;
|
||||
onSubscribe?: () => void;
|
||||
};
|
||||
|
||||
export function PodcastCard(props: PodcastCardProps) {
|
||||
const { theme } = useTheme();
|
||||
const handleSubscribeClick = () => {
|
||||
props.onSubscribe?.();
|
||||
};
|
||||
|
||||
return (
|
||||
<SelectableBox
|
||||
selected={() => props.selected}
|
||||
flexDirection="column"
|
||||
padding={1}
|
||||
onMouseDown={props.onSelect}
|
||||
>
|
||||
<box flexDirection="row" gap={2} alignItems="center">
|
||||
<SelectableText selected={() => props.selected} primary>
|
||||
<strong>{props.podcast.title}</strong>
|
||||
</SelectableText>
|
||||
|
||||
<Show when={props.podcast.isSubscribed}>
|
||||
<text fg={theme.success}>[+]</text>
|
||||
</Show>
|
||||
</box>
|
||||
|
||||
{/* Author */}
|
||||
<Show when={props.podcast.author && !props.compact}>
|
||||
<SelectableText
|
||||
selected={() => props.selected}
|
||||
tertiary
|
||||
>
|
||||
by {props.podcast.author}
|
||||
</SelectableText>
|
||||
</Show>
|
||||
|
||||
{/* Description */}
|
||||
<Show when={props.podcast.description && !props.compact}>
|
||||
<SelectableText
|
||||
selected={() => props.selected}
|
||||
tertiary
|
||||
>
|
||||
{props.podcast.description!.length > 80
|
||||
? props.podcast.description!.slice(0, 80) + "..."
|
||||
: props.podcast.description}
|
||||
</SelectableText>
|
||||
</Show>
|
||||
|
||||
{/**<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>
|
||||
</Show>
|
||||
</SelectableBox>
|
||||
);
|
||||
}
|
||||
@@ -1,194 +0,0 @@
|
||||
/**
|
||||
* Feed detail view component for PodTUI
|
||||
* Shows podcast info and episode list
|
||||
*/
|
||||
|
||||
import { createSignal, For, Show } from "solid-js";
|
||||
import { useKeyboard } from "@opentui/solid";
|
||||
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;
|
||||
focused?: boolean;
|
||||
onBack?: () => void;
|
||||
onPlayEpisode?: (episode: Episode) => void;
|
||||
}
|
||||
|
||||
export function FeedDetail(props: FeedDetailProps) {
|
||||
const { theme } = useTheme();
|
||||
const [selectedIndex, setSelectedIndex] = createSignal(0);
|
||||
const [showInfo, setShowInfo] = createSignal(true);
|
||||
|
||||
const episodes = () => {
|
||||
// Sort episodes by publication date (newest first)
|
||||
return [...props.feed.episodes].sort(
|
||||
(a, b) => b.pubDate.getTime() - a.pubDate.getTime(),
|
||||
);
|
||||
};
|
||||
|
||||
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 formatDate = (date: Date): string => {
|
||||
return format(date, "MMM d, yyyy");
|
||||
};
|
||||
|
||||
const handleKeyPress = (key: { name: string }) => {
|
||||
const eps = episodes();
|
||||
|
||||
if (key.name === "escape" && props.onBack) {
|
||||
props.onBack();
|
||||
return;
|
||||
}
|
||||
|
||||
if (key.name === "i") {
|
||||
setShowInfo((v) => !v);
|
||||
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") {
|
||||
setSelectedIndex((i) => Math.min(eps.length - 1, i + 1));
|
||||
} else if (key.name === "return") {
|
||||
const episode = eps[selectedIndex()];
|
||||
if (episode && props.onPlayEpisode) {
|
||||
props.onPlayEpisode(episode);
|
||||
}
|
||||
} else if (key.name === "home" || key.name === "g") {
|
||||
setSelectedIndex(0);
|
||||
} else if (key.name === "end") {
|
||||
setSelectedIndex(eps.length - 1);
|
||||
} else if (key.name === "pageup") {
|
||||
setSelectedIndex((i) => Math.max(0, i - 10));
|
||||
} else if (key.name === "pagedown") {
|
||||
setSelectedIndex((i) => Math.min(eps.length - 1, i + 10));
|
||||
}
|
||||
};
|
||||
|
||||
useKeyboard((key) => {
|
||||
if (!props.focused) return;
|
||||
handleKeyPress(key);
|
||||
});
|
||||
|
||||
return (
|
||||
<box flexDirection="column" gap={1}>
|
||||
{/* Header with back button */}
|
||||
<box flexDirection="row" justifyContent="space-between">
|
||||
<box border padding={0} onMouseDown={props.onBack} borderColor={theme.border}>
|
||||
<SelectableText selected={() => false} primary>[Esc] Back</SelectableText>
|
||||
</box>
|
||||
<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 */}
|
||||
<Show when={showInfo()}>
|
||||
<box border padding={1} flexDirection="column" gap={0} borderColor={theme.border}>
|
||||
<SelectableText selected={() => false} primary>
|
||||
<strong>{props.feed.customName || props.feed.podcast.title}</strong>
|
||||
</SelectableText>
|
||||
{props.feed.podcast.author && (
|
||||
<box flexDirection="row" gap={1}>
|
||||
<SelectableText selected={() => false} tertiary>by</SelectableText>
|
||||
<SelectableText selected={() => false} primary>{props.feed.podcast.author}</SelectableText>
|
||||
</box>
|
||||
)}
|
||||
<box height={1} />
|
||||
<SelectableText selected={() => false} tertiary>
|
||||
{props.feed.podcast.description?.slice(0, 200)}
|
||||
{(props.feed.podcast.description?.length || 0) > 200 ? "..." : ""}
|
||||
</SelectableText>
|
||||
<box height={1} />
|
||||
<box flexDirection="row" gap={2}>
|
||||
<box flexDirection="row" gap={1}>
|
||||
<SelectableText selected={() => false} tertiary>Episodes:</SelectableText>
|
||||
<SelectableText selected={() => false} tertiary>{props.feed.episodes.length}</SelectableText>
|
||||
</box>
|
||||
<box flexDirection="row" gap={1}>
|
||||
<SelectableText selected={() => false} tertiary>Updated:</SelectableText>
|
||||
<SelectableText selected={() => false} tertiary>{formatDate(props.feed.lastUpdated)}</SelectableText>
|
||||
</box>
|
||||
<SelectableText selected={() => false} tertiary>
|
||||
{props.feed.visibility === "public" ? "[Public]" : "[Private]"}
|
||||
</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">
|
||||
<SelectableText selected={() => false} primary>
|
||||
<strong>Episodes</strong>
|
||||
</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) => (
|
||||
<SelectableBox
|
||||
selected={() => index() === selectedIndex()}
|
||||
flexDirection="column"
|
||||
gap={0}
|
||||
padding={1}
|
||||
onMouseDown={() => {
|
||||
setSelectedIndex(index());
|
||||
if (props.onPlayEpisode) {
|
||||
props.onPlayEpisode(episode);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<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}>
|
||||
<SelectableText selected={() => index() === selectedIndex()} tertiary>{formatDate(episode.pubDate)}</SelectableText>
|
||||
<SelectableText selected={() => index() === selectedIndex()} tertiary>{formatDuration(episode.duration)}</SelectableText>
|
||||
</box>
|
||||
</SelectableBox>
|
||||
)}
|
||||
</For>
|
||||
</scrollbox>
|
||||
|
||||
{/* Help text */}
|
||||
<text fg={theme.textMuted}>
|
||||
j/k to navigate, Enter to play, i to toggle info, Esc to go back
|
||||
</text>
|
||||
</box>
|
||||
);
|
||||
}
|
||||
@@ -1,207 +0,0 @@
|
||||
/**
|
||||
* Feed filter component for PodTUI
|
||||
* Toggle and filter options for feed list
|
||||
*/
|
||||
|
||||
import { createSignal } from "solid-js";
|
||||
import { FeedVisibility, FeedSortField } from "@/types/feed";
|
||||
import type { FeedFilter } from "@/types/feed";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
|
||||
interface FeedFilterProps {
|
||||
filter: FeedFilter;
|
||||
focused?: boolean;
|
||||
onFilterChange: (filter: FeedFilter) => void;
|
||||
}
|
||||
|
||||
type FilterField = "visibility" | "sort" | "pinned" | "private" | "search";
|
||||
|
||||
export function FeedFilterComponent(props: FeedFilterProps) {
|
||||
const { theme } = useTheme();
|
||||
const [focusField, setFocusField] = createSignal<FilterField>("visibility");
|
||||
const [searchValue, setSearchValue] = createSignal(
|
||||
props.filter.searchQuery || "",
|
||||
);
|
||||
|
||||
const fields: FilterField[] = ["visibility", "sort", "pinned", "private", "search"];
|
||||
|
||||
const handleKeyPress = (key: { name: string; shift?: boolean }) => {
|
||||
if (key.name === "tab") {
|
||||
const currentIndex = fields.indexOf(focusField());
|
||||
const nextIndex = key.shift
|
||||
? (currentIndex - 1 + fields.length) % fields.length
|
||||
: (currentIndex + 1) % fields.length;
|
||||
setFocusField(fields[nextIndex]);
|
||||
} else if (key.name === "return") {
|
||||
if (focusField() === "visibility") {
|
||||
cycleVisibility();
|
||||
} else if (focusField() === "sort") {
|
||||
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();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cycleVisibility = () => {
|
||||
const current = props.filter.visibility;
|
||||
let next: FeedVisibility | "all";
|
||||
if (current === "all") next = FeedVisibility.PUBLIC;
|
||||
else if (current === FeedVisibility.PUBLIC) next = FeedVisibility.PRIVATE;
|
||||
else next = "all";
|
||||
props.onFilterChange({ ...props.filter, visibility: next });
|
||||
};
|
||||
|
||||
const cycleSort = () => {
|
||||
const sortOptions: FeedSortField[] = [
|
||||
FeedSortField.UPDATED,
|
||||
FeedSortField.TITLE,
|
||||
FeedSortField.EPISODE_COUNT,
|
||||
FeedSortField.LATEST_EPISODE,
|
||||
];
|
||||
const currentIndex = sortOptions.indexOf(
|
||||
props.filter.sortBy as FeedSortField,
|
||||
);
|
||||
const nextIndex = (currentIndex + 1) % sortOptions.length;
|
||||
props.onFilterChange({ ...props.filter, sortBy: sortOptions[nextIndex] });
|
||||
};
|
||||
|
||||
const togglePinned = () => {
|
||||
props.onFilterChange({
|
||||
...props.filter,
|
||||
pinnedOnly: !props.filter.pinnedOnly,
|
||||
});
|
||||
};
|
||||
|
||||
const togglePrivate = () => {
|
||||
props.onFilterChange({
|
||||
...props.filter,
|
||||
showPrivate: !props.filter.showPrivate,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSearchInput = (value: string) => {
|
||||
setSearchValue(value);
|
||||
props.onFilterChange({ ...props.filter, searchQuery: value });
|
||||
};
|
||||
|
||||
const visibilityLabel = () => {
|
||||
const vis = props.filter.visibility;
|
||||
if (vis === "all") return "All";
|
||||
if (vis === "public") return "Public";
|
||||
return "Private";
|
||||
};
|
||||
|
||||
const visibilityColor = () => {
|
||||
const vis = props.filter.visibility;
|
||||
if (vis === "public") return theme.success;
|
||||
if (vis === "private") return theme.warning;
|
||||
return theme.text;
|
||||
};
|
||||
|
||||
const sortLabel = () => {
|
||||
const sort = props.filter.sortBy;
|
||||
switch (sort) {
|
||||
case "title":
|
||||
return "Title";
|
||||
case "episodeCount":
|
||||
return "Episodes";
|
||||
case "latestEpisode":
|
||||
return "Latest";
|
||||
case "updated":
|
||||
default:
|
||||
return "Updated";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<box flexDirection="column" border padding={1} gap={1} borderColor={theme.border}>
|
||||
<text fg={theme.text}>
|
||||
<strong>Filter Feeds</strong>
|
||||
</text>
|
||||
|
||||
<box flexDirection="row" gap={2} flexWrap="wrap">
|
||||
{/* Visibility filter */}
|
||||
<box
|
||||
border
|
||||
padding={0}
|
||||
backgroundColor={focusField() === "visibility" ? theme.backgroundElement : undefined}
|
||||
borderColor={theme.border}
|
||||
>
|
||||
<box flexDirection="row" gap={1}>
|
||||
<text fg={focusField() === "visibility" ? theme.primary : theme.textMuted}>
|
||||
Show:
|
||||
</text>
|
||||
<text fg={visibilityColor()}>{visibilityLabel()}</text>
|
||||
</box>
|
||||
</box>
|
||||
|
||||
{/* Sort filter */}
|
||||
<box
|
||||
border
|
||||
padding={0}
|
||||
backgroundColor={focusField() === "sort" ? theme.backgroundElement : undefined}
|
||||
>
|
||||
<box flexDirection="row" gap={1}>
|
||||
<text fg={focusField() === "sort" ? theme.primary : theme.textMuted}>Sort:</text>
|
||||
<text fg={theme.text}>{sortLabel()}</text>
|
||||
</box>
|
||||
</box>
|
||||
|
||||
{/* Pinned filter */}
|
||||
<box
|
||||
border
|
||||
padding={0}
|
||||
backgroundColor={focusField() === "pinned" ? theme.backgroundElement : undefined}
|
||||
>
|
||||
<box flexDirection="row" gap={1}>
|
||||
<text fg={focusField() === "pinned" ? theme.primary : theme.textMuted}>
|
||||
Pinned:
|
||||
</text>
|
||||
<text fg={props.filter.pinnedOnly ? theme.warning : theme.textMuted}>
|
||||
{props.filter.pinnedOnly ? "Yes" : "No"}
|
||||
</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 */}
|
||||
<box flexDirection="row" gap={1}>
|
||||
<text fg={focusField() === "search" ? theme.primary : theme.textMuted}>Search:</text>
|
||||
<input
|
||||
value={searchValue()}
|
||||
onInput={handleSearchInput}
|
||||
placeholder="Filter by name..."
|
||||
focused={props.focused && focusField() === "search"}
|
||||
width={25}
|
||||
/>
|
||||
</box>
|
||||
|
||||
<text fg={theme.textMuted}>Tab to navigate, Enter/Space to toggle</text>
|
||||
</box>
|
||||
);
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
/**
|
||||
* 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";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import { SelectableBox, SelectableText } from "@/components/Selectable";
|
||||
|
||||
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" ? theme.success : theme.warning;
|
||||
};
|
||||
|
||||
const pinnedIndicator = () => {
|
||||
return props.feed.isPinned ? "*" : " ";
|
||||
};
|
||||
|
||||
const { theme } = useTheme();
|
||||
|
||||
if (props.compact) {
|
||||
// Compact single-line view
|
||||
return (
|
||||
<SelectableBox
|
||||
selected={() => props.isSelected}
|
||||
flexDirection="row"
|
||||
gap={1}
|
||||
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 (
|
||||
<SelectableBox
|
||||
selected={() => props.isSelected}
|
||||
flexDirection="column"
|
||||
gap={0}
|
||||
padding={1}
|
||||
onMouseDown={() => {}}
|
||||
>
|
||||
{/* Title row */}
|
||||
<box flexDirection="row" gap={1}>
|
||||
<SelectableText
|
||||
selected={() => props.isSelected}
|
||||
primary
|
||||
>
|
||||
{props.isSelected ? ">" : " "}
|
||||
</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 && (
|
||||
<SelectableText
|
||||
selected={() => props.isSelected}
|
||||
tertiary
|
||||
>
|
||||
{episodeCount()} episodes ({unplayedCount()} new)
|
||||
</SelectableText>
|
||||
)}
|
||||
{props.showLastUpdated && (
|
||||
<SelectableText
|
||||
selected={() => props.isSelected}
|
||||
tertiary
|
||||
>
|
||||
Updated: {formatDate(props.feed.lastUpdated)}
|
||||
</SelectableText>
|
||||
)}
|
||||
</box>
|
||||
|
||||
{props.feed.podcast.description && (
|
||||
<SelectableText
|
||||
selected={() => props.isSelected}
|
||||
paddingLeft={4}
|
||||
paddingTop={0}
|
||||
tertiary
|
||||
>
|
||||
{props.feed.podcast.description.slice(0, 60)}
|
||||
{props.feed.podcast.description.length > 60 ? "..." : ""}
|
||||
</SelectableText>
|
||||
)}
|
||||
</SelectableBox>
|
||||
);
|
||||
}
|
||||
@@ -1,198 +0,0 @@
|
||||
/**
|
||||
* Feed list component for PodTUI
|
||||
* Scrollable list of feeds with keyboard navigation and mouse support
|
||||
*/
|
||||
|
||||
import { createSignal, For, Show } from "solid-js";
|
||||
import { useKeyboard } from "@opentui/solid";
|
||||
import { FeedItem } from "./FeedItem";
|
||||
import { useFeedStore } from "@/stores/feed";
|
||||
import { FeedVisibility, FeedSortField } from "@/types/feed";
|
||||
import type { Feed } from "@/types/feed";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
|
||||
interface FeedListProps {
|
||||
focused?: boolean;
|
||||
compact?: boolean;
|
||||
showEpisodeCount?: boolean;
|
||||
showLastUpdated?: boolean;
|
||||
onSelectFeed?: (feed: Feed) => void;
|
||||
onOpenFeed?: (feed: Feed) => void;
|
||||
onFocusChange?: (focused: boolean) => void;
|
||||
}
|
||||
|
||||
export function FeedList(props: FeedListProps) {
|
||||
const { theme } = useTheme();
|
||||
const feedStore = useFeedStore();
|
||||
const [selectedIndex, setSelectedIndex] = createSignal(0);
|
||||
|
||||
const filteredFeeds = () => feedStore.getFilteredFeeds();
|
||||
|
||||
const handleKeyPress = (key: { name: string }) => {
|
||||
if (key.name === "escape") {
|
||||
props.onFocusChange?.(false);
|
||||
return;
|
||||
}
|
||||
const feeds = filteredFeeds();
|
||||
|
||||
if (key.name === "up" || key.name === "k") {
|
||||
setSelectedIndex((i) => Math.max(0, i - 1));
|
||||
} else if (key.name === "down" || key.name === "j") {
|
||||
setSelectedIndex((i) => Math.min(feeds.length - 1, i + 1));
|
||||
} else if (key.name === "return") {
|
||||
const feed = feeds[selectedIndex()];
|
||||
if (feed && props.onOpenFeed) {
|
||||
props.onOpenFeed(feed);
|
||||
}
|
||||
} else if (key.name === "home" || key.name === "g") {
|
||||
setSelectedIndex(0);
|
||||
} else if (key.name === "end") {
|
||||
setSelectedIndex(feeds.length - 1);
|
||||
} else if (key.name === "pageup") {
|
||||
setSelectedIndex((i) => Math.max(0, i - 5));
|
||||
} else if (key.name === "pagedown") {
|
||||
setSelectedIndex((i) => Math.min(feeds.length - 1, i + 5));
|
||||
} else if (key.name === "p") {
|
||||
// Toggle pin on selected feed
|
||||
const feed = feeds[selectedIndex()];
|
||||
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();
|
||||
} else if (key.name === "s") {
|
||||
// Cycle sort
|
||||
cycleSortField();
|
||||
}
|
||||
|
||||
// Notify selection change
|
||||
const selectedFeed = feeds[selectedIndex()];
|
||||
if (selectedFeed && props.onSelectFeed) {
|
||||
props.onSelectFeed(selectedFeed);
|
||||
}
|
||||
};
|
||||
|
||||
useKeyboard((key) => {
|
||||
if (!props.focused) return;
|
||||
handleKeyPress(key);
|
||||
});
|
||||
|
||||
const cycleVisibilityFilter = () => {
|
||||
const current = feedStore.filter().visibility;
|
||||
let next: FeedVisibility | "all";
|
||||
if (current === "all") next = FeedVisibility.PUBLIC;
|
||||
else if (current === FeedVisibility.PUBLIC) next = FeedVisibility.PRIVATE;
|
||||
else next = "all";
|
||||
feedStore.setFilter({ ...feedStore.filter(), visibility: next });
|
||||
};
|
||||
|
||||
const cycleSortField = () => {
|
||||
const sortOptions: FeedSortField[] = [
|
||||
FeedSortField.UPDATED,
|
||||
FeedSortField.TITLE,
|
||||
FeedSortField.EPISODE_COUNT,
|
||||
FeedSortField.LATEST_EPISODE,
|
||||
];
|
||||
const current = feedStore.filter().sortBy as FeedSortField;
|
||||
const idx = sortOptions.indexOf(current);
|
||||
const next = sortOptions[(idx + 1) % sortOptions.length];
|
||||
feedStore.setFilter({ ...feedStore.filter(), sortBy: next });
|
||||
};
|
||||
|
||||
const visibilityLabel = () => {
|
||||
const vis = feedStore.filter().visibility;
|
||||
if (vis === "all") return "All";
|
||||
if (vis === "public") return "Public";
|
||||
return "Private";
|
||||
};
|
||||
|
||||
const sortLabel = () => {
|
||||
const sort = feedStore.filter().sortBy;
|
||||
switch (sort) {
|
||||
case "title":
|
||||
return "Title";
|
||||
case "episodeCount":
|
||||
return "Episodes";
|
||||
case "latestEpisode":
|
||||
return "Latest";
|
||||
default:
|
||||
return "Updated";
|
||||
}
|
||||
};
|
||||
|
||||
const handleFeedClick = (feed: Feed, index: number) => {
|
||||
setSelectedIndex(index);
|
||||
if (props.onSelectFeed) {
|
||||
props.onSelectFeed(feed);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFeedDoubleClick = (feed: Feed) => {
|
||||
if (props.onOpenFeed) {
|
||||
props.onOpenFeed(feed);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<box flexDirection="column" gap={1}>
|
||||
{/* Header with filter controls */}
|
||||
<box flexDirection="row" justifyContent="space-between" paddingBottom={0}>
|
||||
<text fg={theme.text}>
|
||||
<strong>My Feeds</strong>
|
||||
</text>
|
||||
<text fg={theme.textMuted}>({filteredFeeds().length} feeds)</text>
|
||||
<box flexDirection="row" gap={1}>
|
||||
<box border padding={0} onMouseDown={cycleVisibilityFilter} borderColor={theme.border}>
|
||||
<text fg={theme.primary}>[f] {visibilityLabel()}</text>
|
||||
</box>
|
||||
<box border padding={0} onMouseDown={cycleSortField} borderColor={theme.border}>
|
||||
<text fg={theme.primary}>[s] {sortLabel()}</text>
|
||||
</box>
|
||||
</box>
|
||||
</box>
|
||||
|
||||
{/* Feed list in scrollbox */}
|
||||
<Show
|
||||
when={filteredFeeds().length > 0}
|
||||
fallback={
|
||||
<box border padding={2} borderColor={theme.border}>
|
||||
<text fg={theme.textMuted}>
|
||||
No feeds found. Add podcasts from the Discover or Search tabs.
|
||||
</text>
|
||||
</box>
|
||||
}
|
||||
>
|
||||
<scrollbox height={15} focused={props.focused}>
|
||||
<For each={filteredFeeds()}>
|
||||
{(feed, index) => (
|
||||
<box onMouseDown={() => handleFeedClick(feed, index())}>
|
||||
<FeedItem
|
||||
feed={feed}
|
||||
isSelected={index() === selectedIndex()}
|
||||
compact={props.compact}
|
||||
showEpisodeCount={props.showEpisodeCount ?? true}
|
||||
showLastUpdated={props.showLastUpdated ?? true}
|
||||
/>
|
||||
</box>
|
||||
)}
|
||||
</For>
|
||||
</scrollbox>
|
||||
</Show>
|
||||
|
||||
{/* Navigation help */}
|
||||
<box paddingTop={0}>
|
||||
<text fg={theme.textMuted}>
|
||||
Enter open | Esc up | j/k navigate | p pin | f filter | s sort
|
||||
</text>
|
||||
</box>
|
||||
</box>
|
||||
);
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
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;
|
||||
selected: boolean;
|
||||
onSelect: () => void;
|
||||
onSubscribe?: () => void;
|
||||
};
|
||||
|
||||
export function ResultCard(props: ResultCardProps) {
|
||||
const { theme } = useTheme();
|
||||
const podcast = () => props.result.podcast;
|
||||
|
||||
return (
|
||||
<SelectableBox
|
||||
selected={() => props.selected}
|
||||
flexDirection="column"
|
||||
padding={1}
|
||||
onMouseDown={props.onSelect}
|
||||
>
|
||||
<box
|
||||
flexDirection="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
>
|
||||
<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}>
|
||||
<SelectableText
|
||||
selected={() => props.selected}
|
||||
tertiary
|
||||
>
|
||||
by {podcast().author}
|
||||
</SelectableText>
|
||||
</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}>
|
||||
{(podcast().categories ?? []).slice(0, 3).map((category) => (
|
||||
<text fg={theme.warning}>[{category}]</text>
|
||||
))}
|
||||
</box>
|
||||
</Show>
|
||||
|
||||
<Show when={!podcast().isSubscribed}>
|
||||
<box
|
||||
border
|
||||
padding={0}
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
width={18}
|
||||
onMouseDown={(event) => {
|
||||
event.stopPropagation?.();
|
||||
props.onSubscribe?.();
|
||||
}}
|
||||
>
|
||||
<text fg={theme.primary}>[+] Add to Feeds</text>
|
||||
</box>
|
||||
</Show>
|
||||
</SelectableBox>
|
||||
);
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
import { Show } from "solid-js";
|
||||
import { format } from "date-fns";
|
||||
import type { SearchResult } from "@/types/source";
|
||||
import { SourceBadge } from "./SourceBadge";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
|
||||
type ResultDetailProps = {
|
||||
result?: SearchResult;
|
||||
onSubscribe?: (result: SearchResult) => void;
|
||||
};
|
||||
|
||||
export function ResultDetail(props: ResultDetailProps) {
|
||||
const { theme } = useTheme();
|
||||
return (
|
||||
<box flexDirection="column" border padding={1} gap={1} height="100%" borderColor={theme.border}>
|
||||
<Show
|
||||
when={props.result}
|
||||
fallback={ <text fg={theme.textMuted}>Select a result to see details.</text>}
|
||||
>
|
||||
{(result) => (
|
||||
<>
|
||||
<text fg={theme.text}>
|
||||
<strong>{result().podcast.title}</strong>
|
||||
</text>
|
||||
|
||||
<SourceBadge
|
||||
sourceId={result().sourceId}
|
||||
sourceName={result().sourceName}
|
||||
sourceType={result().sourceType}
|
||||
/>
|
||||
|
||||
<Show when={result().podcast.author}>
|
||||
<text fg={theme.textMuted}>by {result().podcast.author}</text>
|
||||
</Show>
|
||||
|
||||
<Show when={result().podcast.description}>
|
||||
<text fg={theme.textMuted}>{result().podcast.description}</text>
|
||||
</Show>
|
||||
|
||||
<Show when={(result().podcast.categories ?? []).length > 0}>
|
||||
<box flexDirection="row" gap={1}>
|
||||
{(result().podcast.categories ?? []).map((category) => (
|
||||
<text fg={theme.warning}>[{category}]</text>
|
||||
))}
|
||||
</box>
|
||||
</Show>
|
||||
|
||||
<text fg={theme.textMuted}>Feed: {result().podcast.feedUrl}</text>
|
||||
|
||||
<text fg={theme.textMuted}>
|
||||
Updated: {format(result().podcast.lastUpdated, "MMM d, yyyy")}
|
||||
</text>
|
||||
|
||||
<Show when={!result().podcast.isSubscribed}>
|
||||
<box
|
||||
border
|
||||
padding={0}
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
width={18}
|
||||
onMouseDown={() => props.onSubscribe?.(result())}
|
||||
>
|
||||
<text fg={theme.primary}>[+] Add to Feeds</text>
|
||||
</box>
|
||||
</Show>
|
||||
|
||||
<Show when={result().podcast.isSubscribed}>
|
||||
<text fg={theme.success}>Already subscribed</text>
|
||||
</Show>
|
||||
</>
|
||||
)}
|
||||
</Show>
|
||||
</box>
|
||||
);
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
/**
|
||||
* SearchHistory component for displaying and managing search history
|
||||
*/
|
||||
|
||||
import { For, Show } from "solid-js"
|
||||
import { useTheme } from "@/context/ThemeContext"
|
||||
import { SelectableBox, SelectableText } from "@/components/Selectable"
|
||||
|
||||
type SearchHistoryProps = {
|
||||
history: string[]
|
||||
focused: boolean
|
||||
selectedIndex: number
|
||||
onSelect?: (query: string) => void
|
||||
onRemove?: (query: string) => void
|
||||
onClear?: () => void
|
||||
onChange?: (index: number) => void
|
||||
}
|
||||
|
||||
export function SearchHistory(props: SearchHistoryProps) {
|
||||
const { theme } = useTheme();
|
||||
const handleSearchClick = (index: number, query: string) => {
|
||||
props.onChange?.(index)
|
||||
props.onSelect?.(query)
|
||||
}
|
||||
|
||||
const handleRemoveClick = (query: string) => {
|
||||
props.onRemove?.(query)
|
||||
}
|
||||
|
||||
return (
|
||||
<box flexDirection="column" gap={1}>
|
||||
<box flexDirection="row" justifyContent="space-between">
|
||||
<text fg={theme.textMuted}>Recent Searches</text>
|
||||
<Show when={props.history.length > 0}>
|
||||
<box onMouseDown={() => props.onClear?.()} padding={0}>
|
||||
<text fg={theme.error}>[Clear All]</text>
|
||||
</box>
|
||||
</Show>
|
||||
</box>
|
||||
|
||||
<Show
|
||||
when={props.history.length > 0}
|
||||
fallback={
|
||||
<box padding={1}>
|
||||
<text fg={theme.textMuted}>No recent searches</text>
|
||||
</box>
|
||||
}
|
||||
>
|
||||
<scrollbox height={10}>
|
||||
<box flexDirection="column">
|
||||
<For each={props.history}>
|
||||
{(query, index) => {
|
||||
const isSelected = () => index() === props.selectedIndex && props.focused
|
||||
|
||||
return (
|
||||
<SelectableBox
|
||||
selected={isSelected}
|
||||
flexDirection="row"
|
||||
justifyContent="space-between"
|
||||
padding={0}
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
onMouseDown={() => handleSearchClick(index(), query)}
|
||||
>
|
||||
<SelectableText
|
||||
selected={isSelected}
|
||||
tertiary
|
||||
>
|
||||
{">"}
|
||||
</SelectableText>
|
||||
<SelectableText
|
||||
selected={isSelected}
|
||||
primary
|
||||
>
|
||||
{query}
|
||||
</SelectableText>
|
||||
<box onMouseDown={() => handleRemoveClick(query)} padding={0}>
|
||||
<text fg={theme.error}>[x]</text>
|
||||
</box>
|
||||
</SelectableBox>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</box>
|
||||
</scrollbox>
|
||||
</Show>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
/**
|
||||
* SearchResults component for displaying podcast search results
|
||||
*/
|
||||
|
||||
import { For, Show } from "solid-js";
|
||||
import type { SearchResult } from "@/types/source";
|
||||
import { ResultCard } from "./ResultCard";
|
||||
import { ResultDetail } from "./ResultDetail";
|
||||
|
||||
type SearchResultsProps = {
|
||||
results: SearchResult[];
|
||||
selectedIndex: number;
|
||||
focused: boolean;
|
||||
onSelect?: (result: SearchResult) => void;
|
||||
onChange?: (index: number) => void;
|
||||
isSearching?: boolean;
|
||||
error?: string | null;
|
||||
};
|
||||
|
||||
export function SearchResults(props: SearchResultsProps) {
|
||||
const handleSelect = (index: number) => {
|
||||
props.onChange?.(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<Show
|
||||
when={!props.isSearching}
|
||||
fallback={
|
||||
<box padding={1}>
|
||||
<text fg="yellow">Searching...</text>
|
||||
</box>
|
||||
}
|
||||
>
|
||||
<Show
|
||||
when={!props.error}
|
||||
fallback={
|
||||
<box padding={1}>
|
||||
<text fg="red">{props.error}</text>
|
||||
</box>
|
||||
}
|
||||
>
|
||||
<Show
|
||||
when={props.results.length > 0}
|
||||
fallback={
|
||||
<box padding={1}>
|
||||
<text fg="gray">
|
||||
No results found. Try a different search term.
|
||||
</text>
|
||||
</box>
|
||||
}
|
||||
>
|
||||
<box flexDirection="row" gap={1} height="100%">
|
||||
<box flexDirection="column" flexGrow={1}>
|
||||
<scrollbox height="100%">
|
||||
<box flexDirection="column" gap={1}>
|
||||
<For each={props.results}>
|
||||
{(result, index) => (
|
||||
<ResultCard
|
||||
result={result}
|
||||
selected={index() === props.selectedIndex}
|
||||
onSelect={() => handleSelect(index())}
|
||||
onSubscribe={() => props.onSelect?.(result)}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</box>
|
||||
</scrollbox>
|
||||
</box>
|
||||
<box width={36}>
|
||||
<ResultDetail
|
||||
result={props.results[props.selectedIndex]}
|
||||
onSubscribe={(result) => props.onSelect?.(result)}
|
||||
/>
|
||||
</box>
|
||||
</box>
|
||||
</Show>
|
||||
</Show>
|
||||
</Show>
|
||||
);
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
import { SourceType } from "@/types/source";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
|
||||
type SourceBadgeProps = {
|
||||
sourceId: string;
|
||||
sourceName?: string;
|
||||
sourceType?: SourceType;
|
||||
};
|
||||
|
||||
const typeLabel = (sourceType?: SourceType) => {
|
||||
if (sourceType === SourceType.API) return "API";
|
||||
if (sourceType === SourceType.RSS) return "RSS";
|
||||
if (sourceType === SourceType.CUSTOM) return "Custom";
|
||||
return "Source";
|
||||
};
|
||||
|
||||
// No module-level typeColor here — it needs the theme from the component.
|
||||
// The correct definition lives inside SourceBadge below.
|
||||
export function SourceBadge(props: SourceBadgeProps) {
|
||||
const { theme } = useTheme();
|
||||
const label = () => props.sourceName || props.sourceId;
|
||||
|
||||
const typeColor = (sourceType?: SourceType) => {
|
||||
if (sourceType === SourceType.API) return theme.primary;
|
||||
if (sourceType === SourceType.RSS) return theme.success;
|
||||
if (sourceType === SourceType.CUSTOM) return theme.warning;
|
||||
return theme.textMuted;
|
||||
};
|
||||
|
||||
return (
|
||||
<box flexDirection="row" gap={1} padding={0}>
|
||||
<text fg={typeColor(props.sourceType)}>
|
||||
[{typeLabel(props.sourceType)}]
|
||||
</text>
|
||||
<text fg={theme.textMuted}>{label()}</text>
|
||||
</box>
|
||||
);
|
||||
}
|
||||
@@ -90,5 +90,17 @@ export function usePreferencesItems(): SettingItem[] {
|
||||
autoDownload: !prefs().autoDownload,
|
||||
}),
|
||||
},
|
||||
{
|
||||
id: "autoJumpToPlayer",
|
||||
label: "Auto Jump to Player",
|
||||
kind: "toggle",
|
||||
display: () => (prefs().autoJumpToPlayer ? "On" : "Off"),
|
||||
help: () =>
|
||||
`Jump to the Player view automatically when a podcast starts.\nType: toggle\nDefault: true\nCurrent: ${prefs().autoJumpToPlayer ? "On" : "Off"}\nSpace/Enter to toggle.`,
|
||||
toggle: () =>
|
||||
app.updatePreferences({
|
||||
autoJumpToPlayer: !prefs().autoJumpToPlayer,
|
||||
}),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user