Mike/PodTui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

using presets

Browse Source
This commit is contained in:
Michael Freno
2026-02-12 09:27:49 -05:00
parent 276732d2a9
commit 0bbb327b29
8 changed files with 259 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/TabNavigation.tsx
View File

@@ -30,18 +30,19 @@ export function TabNavigation(props: TabNavigationProps) {
> >
<For each={tabs}> <For each={tabs}>
{(tab) => ( {(tab) => (
<SelectableBox <SelectableBox
border border
selected={() => tab.id == props.activeTab} selected={() => tab.id == props.activeTab}
onMouseDown={() => props.onTabSelect(tab.id)} onMouseDown={() => props.onTabSelect(tab.id)}
> >
<SelectableText <SelectableText
selected={() => tab.id == props.activeTab} selected={() => tab.id == props.activeTab}
alignSelf="center" primary
> alignSelf="center"
{tab.label} >
</SelectableText> {tab.label}
</SelectableBox> </SelectableText>
</SelectableBox>
)} )}
</For> </For>
</box> </box>

35
src/pages/Discover/DiscoverPage.tsx
View File

@@ -61,19 +61,19 @@ export function DiscoverPage(props: PageProps) {
const isSelected = () => const isSelected = () =>
discoverStore.selectedCategory() === category.id; discoverStore.selectedCategory() === category.id;
return ( return (
<SelectableBox <SelectableBox
selected={isSelected} selected={isSelected}
onMouseDown={() => handleCategorySelect(category.id)} onMouseDown={() => handleCategorySelect(category.id)}
> >
<SelectableText <SelectableText
selected={isSelected} selected={isSelected}
fg={theme.primary} primary
> >
{category.icon} {category.name} {category.icon} {category.name}
</SelectableText> </SelectableText>
</SelectableBox> </SelectableBox>
); );
}} }}
</For> </For>
</box> </box>
@@ -85,14 +85,15 @@ export function DiscoverPage(props: PageProps) {
borderColor={theme.border} borderColor={theme.border}
> >
<box padding={1}> <box padding={1}>
<text <SelectableText
fg={props.depth() == DiscoverPagePaneType.SHOWS ? theme.primary : theme.textMuted} selected={() => false}
> primary={props.depth() == DiscoverPagePaneType.SHOWS}
>
Trending in{" "} Trending in{" "}
{DISCOVER_CATEGORIES.find( {DISCOVER_CATEGORIES.find(
(c) => c.id === discoverStore.selectedCategory(), (c) => c.id === discoverStore.selectedCategory(),
)?.name ?? "All"} )?.name ?? "All"}
</text> </SelectableText>
</box> </box>
<box flexDirection="column" height="100%"> <box flexDirection="column" height="100%">
<Show <Show

44
src/pages/Feed/FeedDetail.tsx
View File

@@ -86,54 +86,54 @@ export function FeedDetail(props: FeedDetailProps) {
{/* Header with back button */} {/* Header with back button */}
<box flexDirection="row" justifyContent="space-between"> <box flexDirection="row" justifyContent="space-between">
<box border padding={0} onMouseDown={props.onBack} borderColor={theme.border}> <box border padding={0} onMouseDown={props.onBack} borderColor={theme.border}>
<text fg={theme.primary}>[Esc] Back</text> <SelectableText selected={() => false} primary>[Esc] Back</SelectableText>
</box> </box>
<box border padding={0} onMouseDown={() => setShowInfo((v) => !v)} borderColor={theme.border}> <box border padding={0} onMouseDown={() => setShowInfo((v) => !v)} borderColor={theme.border}>
<text fg={theme.primary}>[i] {showInfo() ? "Hide" : "Show"} Info</text> <SelectableText selected={() => false} primary>[i] {showInfo() ? "Hide" : "Show"} Info</SelectableText>
</box> </box>
</box> </box>
{/* Podcast info section */} {/* Podcast info section */}
<Show when={showInfo()}> <Show when={showInfo()}>
<box border padding={1} flexDirection="column" gap={0} borderColor={theme.border}> <box border padding={1} flexDirection="column" gap={0} borderColor={theme.border}>
<text fg={theme.text}> <SelectableText selected={() => false} primary>
<strong>{props.feed.customName || props.feed.podcast.title}</strong> <strong>{props.feed.customName || props.feed.podcast.title}</strong>
</text> </SelectableText>
{props.feed.podcast.author && ( {props.feed.podcast.author && (
<box flexDirection="row" gap={1}> <box flexDirection="row" gap={1}>
<text fg={theme.textMuted}>by</text> <SelectableText selected={() => false} tertiary>by</SelectableText>
<text fg={theme.primary}>{props.feed.podcast.author}</text> <SelectableText selected={() => false} primary>{props.feed.podcast.author}</SelectableText>
</box> </box>
)} )}
<box height={1} /> <box height={1} />
<text fg={theme.textMuted}> <SelectableText selected={() => false} tertiary>
{props.feed.podcast.description?.slice(0, 200)} {props.feed.podcast.description?.slice(0, 200)}
{(props.feed.podcast.description?.length || 0) > 200 ? "..." : ""} {(props.feed.podcast.description?.length || 0) > 200 ? "..." : ""}
</text> </SelectableText>
<box height={1} /> <box height={1} />
<box flexDirection="row" gap={2}> <box flexDirection="row" gap={2}>
<box flexDirection="row" gap={1}> <box flexDirection="row" gap={1}>
<text fg={theme.textMuted}>Episodes:</text> <SelectableText selected={() => false} tertiary>Episodes:</SelectableText>
<text fg={theme.text}>{props.feed.episodes.length}</text> <SelectableText selected={() => false} tertiary>{props.feed.episodes.length}</SelectableText>
</box> </box>
<box flexDirection="row" gap={1}> <box flexDirection="row" gap={1}>
<text fg={theme.textMuted}>Updated:</text> <SelectableText selected={() => false} tertiary>Updated:</SelectableText>
<text fg={theme.text}>{formatDate(props.feed.lastUpdated)}</text> <SelectableText selected={() => false} tertiary>{formatDate(props.feed.lastUpdated)}</SelectableText>
</box> </box>
<text fg={props.feed.visibility === "public" ? theme.success : theme.warning}> <SelectableText selected={() => false} tertiary>
{props.feed.visibility === "public" ? "[Public]" : "[Private]"} {props.feed.visibility === "public" ? "[Public]" : "[Private]"}
</text> </SelectableText>
{props.feed.isPinned && <text fg={theme.warning}>[Pinned]</text>} {props.feed.isPinned && <SelectableText selected={() => false} tertiary>[Pinned]</SelectableText>}
</box> </box>
</box> </box>
</Show> </Show>
{/* Episodes header */} {/* Episodes header */}
<box flexDirection="row" justifyContent="space-between"> <box flexDirection="row" justifyContent="space-between">
<text fg={theme.text}> <SelectableText selected={() => false} primary>
<strong>Episodes</strong> <strong>Episodes</strong>
</text> </SelectableText>
<text fg={theme.textMuted}>({episodes().length} total)</text> <SelectableText selected={() => false} tertiary>({episodes().length} total)</SelectableText>
</box> </box>
{/* Episode list */} {/* Episode list */}
@@ -154,20 +154,20 @@ export function FeedDetail(props: FeedDetailProps) {
> >
<SelectableText <SelectableText
selected={() => index() === selectedIndex()} selected={() => index() === selectedIndex()}
fg={theme.primary} primary
> >
{index() === selectedIndex() ? ">" : " "} {index() === selectedIndex() ? ">" : " "}
</SelectableText> </SelectableText>
<SelectableText <SelectableText
selected={() => index() === selectedIndex()} selected={() => index() === selectedIndex()}
fg={theme.text} primary
> >
{episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""} {episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""}
{episode.title} {episode.title}
</SelectableText> </SelectableText>
<box flexDirection="row" gap={2} paddingLeft={2}> <box flexDirection="row" gap={2} paddingLeft={2}>
<text fg={theme.textMuted}>{formatDate(episode.pubDate)}</text> <SelectableText selected={() => index() === selectedIndex()} tertiary>{formatDate(episode.pubDate)}</SelectableText>
<text fg={theme.textMuted}>{formatDuration(episode.duration)}</text> <SelectableText selected={() => index() === selectedIndex()} tertiary>{formatDuration(episode.duration)}</SelectableText>
</box> </box>
</SelectableBox> </SelectableBox>
)} )}

88
src/pages/Feed/FeedPage.tsx
View File

@@ -11,6 +11,7 @@ import type { Feed } from "@/types/feed";
import { useTheme } from "@/context/ThemeContext"; import { useTheme } from "@/context/ThemeContext";
import { PageProps } from "@/App"; import { PageProps } from "@/App";
import { SelectableBox, SelectableText } from "@/components/Selectable"; import { SelectableBox, SelectableText } from "@/components/Selectable";
import { se } from "date-fns/locale";
enum FeedPaneType { enum FeedPaneType {
FEED = 1, FEED = 1,
@@ -76,46 +77,59 @@ export function FeedPage(props: PageProps) {
</box> </box>
} }
> >
<scrollbox height="100%" focused={props.depth() == FeedPaneType.FEED}> <scrollbox height="100%" focused={props.depth() == FeedPaneType.FEED}>
<For each={Object.entries(episodesByDate()).sort(([a], [b]) => b.localeCompare(a))}> <For
{([date, episode], groupIndex) => ( each={Object.entries(episodesByDate()).sort(([a], [b]) =>
<> b.localeCompare(a),
<box flexDirection="column" gap={0} paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1}> )}
<SelectableText selected={() => false} primary>{date}</SelectableText> >
</box> {([date, episode], groupIndex) => {
<SelectableBox const selected = () => groupIndex() === selectedIndex();
selected={() => groupIndex() === selectedIndex()} return (
flexDirection="column" <>
gap={0} <box
paddingLeft={1} flexDirection="column"
paddingRight={1} gap={0}
paddingTop={0} paddingLeft={1}
paddingBottom={0} paddingRight={1}
onMouseDown={() => setSelectedIndex(groupIndex())} paddingTop={1}
> paddingBottom={1}
<SelectableText selected={() => groupIndex() === selectedIndex()} primary>
{groupIndex() === selectedIndex() ? ">" : " "}
</SelectableText>
<SelectableText
selected={() => groupIndex() === selectedIndex()}
primary
> >
{episode.episode.title} <SelectableText selected={() => false} primary>
</SelectableText> {date}
<box flexDirection="row" gap={2} paddingLeft={2}>
<SelectableText selected={() => groupIndex() === selectedIndex()} primary>
{episode.feed.podcast.title}
</SelectableText>
<SelectableText selected={() => groupIndex() === selectedIndex()} tertiary>
{formatDate(episode.episode.pubDate)}
</SelectableText>
<SelectableText selected={() => groupIndex() === selectedIndex()} tertiary>
{formatDuration(episode.episode.duration)}
</SelectableText> </SelectableText>
</box> </box>
</SelectableBox> <SelectableBox
</> selected={selected}
)} flexDirection="column"
gap={0}
paddingLeft={1}
paddingRight={1}
paddingTop={0}
paddingBottom={0}
onMouseDown={() => setSelectedIndex(groupIndex())}
>
<SelectableText selected={selected} primary>
{selected() ? ">" : " "}
</SelectableText>
<SelectableText selected={selected} primary>
{episode.episode.title}
</SelectableText>
<box flexDirection="row" gap={2} paddingLeft={2}>
<SelectableText selected={selected} primary>
{episode.feed.podcast.title}
</SelectableText>
<SelectableText selected={selected} tertiary>
{formatDate(episode.episode.pubDate)}
</SelectableText>
<SelectableText selected={selected} tertiary>
{formatDuration(episode.episode.duration)}
</SelectableText>
</box>
</SelectableBox>
</>
);
}}
</For> </For>
</scrollbox> </scrollbox>
</Show> </Show>

40
src/pages/Search/ResultCard.tsx
View File

@@ -45,27 +45,27 @@ export function ResultCard(props: ResultCardProps) {
</Show> </Show>
</box> </box>
<Show when={podcast().author}> <Show when={podcast().author}>
<SelectableText <SelectableText
selected={() => props.selected} selected={() => props.selected}
fg={theme.textMuted} tertiary
> >
by {podcast().author} by {podcast().author}
</SelectableText> </SelectableText>
</Show> </Show>
<Show when={podcast().description}> <Show when={podcast().description}>
{(description) => ( {(description) => (
<SelectableText <SelectableText
selected={() => props.selected} selected={() => props.selected}
fg={theme.text} tertiary
> >
{description().length > 120 {description().length > 120
? description().slice(0, 120) + "..." ? description().slice(0, 120) + "..."
: description()} : description()}
</SelectableText> </SelectableText>
)} )}
</Show> </Show>
<Show when={(podcast().categories ?? []).length > 0}> <Show when={(podcast().categories ?? []).length > 0}>
<box flexDirection="row" gap={1}> <box flexDirection="row" gap={1}>

24
src/pages/Search/SearchHistory.tsx
View File

@@ -62,18 +62,18 @@ export function SearchHistory(props: SearchHistoryProps) {
paddingRight={1} paddingRight={1}
onMouseDown={() => handleSearchClick(index(), query)} onMouseDown={() => handleSearchClick(index(), query)}
> >
<SelectableText <SelectableText
selected={isSelected} selected={isSelected}
fg={theme.textMuted} tertiary
> >
{">"} {">"}
</SelectableText> </SelectableText>
<SelectableText <SelectableText
selected={isSelected} selected={isSelected}
fg={theme.primary} primary
> >
{query} {query}
</SelectableText> </SelectableText>
<box onMouseDown={() => handleRemoveClick(query)} padding={0}> <box onMouseDown={() => handleRemoveClick(query)} padding={0}>
<text fg={theme.error}>[x]</text> <text fg={theme.error}>[x]</text>
</box> </box>

217
src/pages/Settings/SourceManager.tsx
View File

@@ -198,23 +198,20 @@ export function SourceManager(props: SourceManagerProps) {
feedStore.toggleSource(source.id); feedStore.toggleSource(source.id);
}} }}
> >
<text <SelectableText
fg={ selected={() => focusArea() === "list" && index() === selectedIndex()}
focusArea() === "list" && index() === selectedIndex() primary
? theme.primary >
: theme.textMuted {focusArea() === "list" && index() === selectedIndex()
} ? ">"
> : " "}
{focusArea() === "list" && index() === selectedIndex() </SelectableText>
? ">" <SelectableText
: " "} selected={() => focusArea() === "list" && index() === selectedIndex()}
</text> primary
<SelectableText >
selected={() => focusArea() === "list" && index() === selectedIndex()} {source.name}
fg={theme.text} </SelectableText>
>
{source.name}
</SelectableText>
</SelectableBox> </SelectableBox>
)} )}
</For> </For>
@@ -223,114 +220,98 @@ export function SourceManager(props: SourceManagerProps) {
Space/Enter to toggle, d to delete, a to add Space/Enter to toggle, d to delete, a to add
</text> </text>
{/* API settings */} {/* API settings */}
<box flexDirection="column" gap={1}> <box flexDirection="column" gap={1}>
<text fg={isApiSource() ? theme.textMuted : theme.accent}> <SelectableText selected={() => false} primary={isApiSource()}>
{isApiSource() {isApiSource()
? "API Settings" ? "API Settings"
: "API Settings (select an API source)"} : "API Settings (select an API source)"}
</text> </SelectableText>
<box flexDirection="row" gap={2}> <box flexDirection="row" gap={2}>
<box <box
border border
borderColor={theme.border} borderColor={theme.border}
padding={0} padding={0}
backgroundColor={ backgroundColor={
focusArea() === "country" ? theme.primary : undefined focusArea() === "country" ? theme.primary : undefined
} }
> >
<text <SelectableText selected={() => false} primary={focusArea() === "country"}>
fg={focusArea() === "country" ? theme.primary : theme.textMuted} Country: {sourceCountry()}
> </SelectableText>
Country: {sourceCountry()} </box>
</text> <box
</box> border
<box borderColor={theme.border}
border padding={0}
borderColor={theme.border} backgroundColor={
padding={0} focusArea() === "language" ? theme.primary : undefined
backgroundColor={ }
focusArea() === "language" ? theme.primary : undefined >
} <SelectableText selected={() => false} primary={focusArea() === "language"}>
> Language:{" "}
<text {sourceLanguage() === "ja_jp" ? "Japanese" : "English"}
fg={ </SelectableText>
focusArea() === "language" ? theme.primary : theme.textMuted </box>
} <box
> border
Language:{" "} borderColor={theme.border}
{sourceLanguage() === "ja_jp" ? "Japanese" : "English"} padding={0}
</text> backgroundColor={
</box> focusArea() === "explicit" ? theme.primary : undefined
<box }
border >
borderColor={theme.border} <SelectableText selected={() => false} primary={focusArea() === "explicit"}>
padding={0} Explicit: {sourceExplicit() ? "Yes" : "No"}
backgroundColor={ </SelectableText>
focusArea() === "explicit" ? theme.primary : undefined </box>
} </box>
> <SelectableText selected={() => false} tertiary>
<text Enter/Space to toggle focused setting
fg={ </SelectableText>
focusArea() === "explicit" ? theme.primary : theme.textMuted </box>
}
>
Explicit: {sourceExplicit() ? "Yes" : "No"}
</text>
</box>
</box>
<text fg={theme.textMuted}>
Enter/Space to toggle focused setting
</text>
</box>
</box> </box>
{/* Add new source form */} {/* Add new source form */}
<box border borderColor={theme.border} padding={1} flexDirection="column" gap={1}> <box border borderColor={theme.border} padding={1} flexDirection="column" gap={1}>
<text <SelectableText selected={() => false} primary={focusArea() === "add" || focusArea() === "url"}>
fg={ Add New Source:
focusArea() === "add" || focusArea() === "url" </SelectableText>
? theme.primary
: theme.textMuted
}
>
Add New Source:
</text>
<box flexDirection="row" gap={1}> <box flexDirection="row" gap={1}>
<text fg={theme.textMuted}>Name:</text> <SelectableText selected={() => false} tertiary>Name:</SelectableText>
<input <input
value={newSourceName()} value={newSourceName()}
onInput={setNewSourceName} onInput={setNewSourceName}
placeholder="My Custom Feed" placeholder="My Custom Feed"
focused={props.focused && focusArea() === "add"} focused={props.focused && focusArea() === "add"}
width={25} width={25}
/> />
</box> </box>
<box flexDirection="row" gap={1}> <box flexDirection="row" gap={1}>
<text fg={theme.textMuted}>URL:</text> <SelectableText selected={() => false} tertiary>URL:</SelectableText>
<input <input
value={newSourceUrl()} value={newSourceUrl()}
onInput={(v) => { onInput={(v) => {
setNewSourceUrl(v); setNewSourceUrl(v);
setError(null); setError(null);
}} }}
placeholder="https://example.com/feed.rss" placeholder="https://example.com/feed.rss"
focused={props.focused && focusArea() === "url"} focused={props.focused && focusArea() === "url"}
width={35} width={35}
/> />
</box> </box>
<box border borderColor={theme.border} padding={0} width={15} onMouseDown={handleAddSource}> <box border borderColor={theme.border} padding={0} width={15} onMouseDown={handleAddSource}>
<text fg={theme.success}>[+] Add Source</text> <SelectableText selected={() => false} primary>[+] Add Source</SelectableText>
</box> </box>
</box> </box>
{/* Error message */} {/* Error message */}
{error() && <text fg={theme.error}>{error()}</text>} {error() && <SelectableText selected={() => false} tertiary>{error()}</SelectableText>}
<text fg={theme.textMuted}>Tab to switch sections, Esc to close</text> <SelectableText selected={() => false} tertiary>Tab to switch sections, Esc to close</SelectableText>
</box> </box>
); );
} }

57
src/ui/command.tsx
View File

@@ -295,39 +295,30 @@ function CommandDialog(props: {
} }
}} }}
> >
<box flexDirection="column" flexGrow={1}> <box flexDirection="column" flexGrow={1}>
<SelectableText <SelectableText
selected={() => index() === selectedIndex()} selected={() => index() === selectedIndex()}
fg={ primary
index() === selectedIndex() >
? theme.selectedListItemText {option.title}
: theme.text </SelectableText>
} <Show when={option.footer}>
attributes={ <SelectableText
index() === selectedIndex() selected={() => index() === selectedIndex()}
? TextAttributes.BOLD tertiary
: undefined >
} {option.footer}
> </SelectableText>
{option.title} </Show>
</SelectableText> <Show when={option.description}>
<Show when={option.footer}> <SelectableText
<SelectableText selected={() => index() === selectedIndex()}
selected={() => index() === selectedIndex()} tertiary
fg={theme.textMuted} >
> {option.description}
{option.footer} </SelectableText>
</SelectableText> </Show>
</Show> </box>
<Show when={option.description}>
<SelectableText
selected={() => index() === selectedIndex()}
fg={theme.textMuted}
>
{option.description}
</SelectableText>
</Show>
</box>
</SelectableBox> </SelectableBox>
)} )}
</For> </For>