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

1
src/components/TabNavigation.tsx
View File

@@ -37,6 +37,7 @@ export function TabNavigation(props: TabNavigationProps) {
>
<SelectableText
selected={() => tab.id == props.activeTab}
primary
alignSelf="center"
>
{tab.label}

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

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

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

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

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

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

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

@@ -48,7 +48,7 @@ export function ResultCard(props: ResultCardProps) {
<Show when={podcast().author}>
<SelectableText
selected={() => props.selected}
fg={theme.textMuted}
tertiary
>
by {podcast().author}
</SelectableText>
@@ -58,7 +58,7 @@ export function ResultCard(props: ResultCardProps) {
{(description) => (
<SelectableText
selected={() => props.selected}
fg={theme.text}
tertiary
>
{description().length > 120
? description().slice(0, 120) + "..."

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

@@ -64,13 +64,13 @@ export function SearchHistory(props: SearchHistoryProps) {
>
<SelectableText
selected={isSelected}
fg={theme.textMuted}
tertiary
>
{">"}
</SelectableText>
<SelectableText
selected={isSelected}
fg={theme.primary}
primary
>
{query}
</SelectableText>

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

@@ -198,20 +198,17 @@ export function SourceManager(props: SourceManagerProps) {
feedStore.toggleSource(source.id);
}}
>
<text
fg={
focusArea() === "list" && index() === selectedIndex()
? theme.primary
: theme.textMuted
}
<SelectableText
selected={() => focusArea() === "list" && index() === selectedIndex()}
primary
>
{focusArea() === "list" && index() === selectedIndex()
? ">"
: " "}
</text>
</SelectableText>
<SelectableText
selected={() => focusArea() === "list" && index() === selectedIndex()}
fg={theme.text}
primary
>
{source.name}
</SelectableText>
@@ -225,11 +222,11 @@ export function SourceManager(props: SourceManagerProps) {
{/* API settings */}
<box flexDirection="column" gap={1}>
<text fg={isApiSource() ? theme.textMuted : theme.accent}>
<SelectableText selected={() => false} primary={isApiSource()}>
{isApiSource()
? "API Settings"
: "API Settings (select an API source)"}
</text>
</SelectableText>
<box flexDirection="row" gap={2}>
<box
border
@@ -239,11 +236,9 @@ export function SourceManager(props: SourceManagerProps) {
focusArea() === "country" ? theme.primary : undefined
}
>
<text
fg={focusArea() === "country" ? theme.primary : theme.textMuted}
>
<SelectableText selected={() => false} primary={focusArea() === "country"}>
Country: {sourceCountry()}
</text>
</SelectableText>
</box>
<box
border
@@ -253,14 +248,10 @@ export function SourceManager(props: SourceManagerProps) {
focusArea() === "language" ? theme.primary : undefined
}
>
<text
fg={
focusArea() === "language" ? theme.primary : theme.textMuted
}
>
<SelectableText selected={() => false} primary={focusArea() === "language"}>
Language:{" "}
{sourceLanguage() === "ja_jp" ? "Japanese" : "English"}
</text>
</SelectableText>
</box>
<box
border
@@ -270,35 +261,25 @@ export function SourceManager(props: SourceManagerProps) {
focusArea() === "explicit" ? theme.primary : undefined
}
>
<text
fg={
focusArea() === "explicit" ? theme.primary : theme.textMuted
}
>
<SelectableText selected={() => false} primary={focusArea() === "explicit"}>
Explicit: {sourceExplicit() ? "Yes" : "No"}
</text>
</SelectableText>
</box>
</box>
<text fg={theme.textMuted}>
<SelectableText selected={() => false} tertiary>
Enter/Space to toggle focused setting
</text>
</SelectableText>
</box>
</box>
{/* Add new source form */}
<box border borderColor={theme.border} padding={1} flexDirection="column" gap={1}>
<text
fg={
focusArea() === "add" || focusArea() === "url"
? theme.primary
: theme.textMuted
}
>
<SelectableText selected={() => false} primary={focusArea() === "add" || focusArea() === "url"}>
Add New Source:
</text>
</SelectableText>
<box flexDirection="row" gap={1}>
<text fg={theme.textMuted}>Name:</text>
<SelectableText selected={() => false} tertiary>Name:</SelectableText>
<input
value={newSourceName()}
onInput={setNewSourceName}
@@ -309,7 +290,7 @@ export function SourceManager(props: SourceManagerProps) {
</box>
<box flexDirection="row" gap={1}>
<text fg={theme.textMuted}>URL:</text>
<SelectableText selected={() => false} tertiary>URL:</SelectableText>
<input
value={newSourceUrl()}
onInput={(v) => {
@@ -323,14 +304,14 @@ export function SourceManager(props: SourceManagerProps) {
</box>
<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>
{/* 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>
);
}

15
src/ui/command.tsx
View File

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