diff --git a/src/components/TabNavigation.tsx b/src/components/TabNavigation.tsx index d8573eb..f3266a2 100644 --- a/src/components/TabNavigation.tsx +++ b/src/components/TabNavigation.tsx @@ -30,18 +30,19 @@ export function TabNavigation(props: TabNavigationProps) { > {(tab) => ( - tab.id == props.activeTab} - onMouseDown={() => props.onTabSelect(tab.id)} - > - tab.id == props.activeTab} - alignSelf="center" - > - {tab.label} - - + tab.id == props.activeTab} + onMouseDown={() => props.onTabSelect(tab.id)} + > + tab.id == props.activeTab} + primary + alignSelf="center" + > + {tab.label} + + )} diff --git a/src/pages/Discover/DiscoverPage.tsx b/src/pages/Discover/DiscoverPage.tsx index e6bf240..ffa9b86 100644 --- a/src/pages/Discover/DiscoverPage.tsx +++ b/src/pages/Discover/DiscoverPage.tsx @@ -61,19 +61,19 @@ export function DiscoverPage(props: PageProps) { const isSelected = () => discoverStore.selectedCategory() === category.id; - return ( - handleCategorySelect(category.id)} - > - - {category.icon} {category.name} - - - ); + return ( + handleCategorySelect(category.id)} + > + + {category.icon} {category.name} + + + ); }} @@ -85,14 +85,15 @@ export function DiscoverPage(props: PageProps) { borderColor={theme.border} > - + false} + primary={props.depth() == DiscoverPagePaneType.SHOWS} + > Trending in{" "} {DISCOVER_CATEGORIES.find( (c) => c.id === discoverStore.selectedCategory(), )?.name ?? "All"} - + - [Esc] Back + false} primary>[Esc] Back setShowInfo((v) => !v)} borderColor={theme.border}> - [i] {showInfo() ? "Hide" : "Show"} Info + false} primary>[i] {showInfo() ? "Hide" : "Show"} Info {/* Podcast info section */} - + false} primary> {props.feed.customName || props.feed.podcast.title} - + {props.feed.podcast.author && ( - by - {props.feed.podcast.author} + false} tertiary>by + false} primary>{props.feed.podcast.author} )} - + false} tertiary> {props.feed.podcast.description?.slice(0, 200)} {(props.feed.podcast.description?.length || 0) > 200 ? "..." : ""} - + - Episodes: - {props.feed.episodes.length} + false} tertiary>Episodes: + false} tertiary>{props.feed.episodes.length} - Updated: - {formatDate(props.feed.lastUpdated)} + false} tertiary>Updated: + false} tertiary>{formatDate(props.feed.lastUpdated)} - + false} tertiary> {props.feed.visibility === "public" ? "[Public]" : "[Private]"} - - {props.feed.isPinned && [Pinned]} + + {props.feed.isPinned && false} tertiary>[Pinned]} {/* Episodes header */} - + false} primary> Episodes - - ({episodes().length} total) + + false} tertiary>({episodes().length} total) {/* Episode list */} @@ -154,20 +154,20 @@ export function FeedDetail(props: FeedDetailProps) { > index() === selectedIndex()} - fg={theme.primary} + primary > {index() === selectedIndex() ? ">" : " "} index() === selectedIndex()} - fg={theme.text} + primary > {episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""} {episode.title} - {formatDate(episode.pubDate)} - {formatDuration(episode.duration)} + index() === selectedIndex()} tertiary>{formatDate(episode.pubDate)} + index() === selectedIndex()} tertiary>{formatDuration(episode.duration)} )} diff --git a/src/pages/Feed/FeedPage.tsx b/src/pages/Feed/FeedPage.tsx index 0d7173e..db46213 100644 --- a/src/pages/Feed/FeedPage.tsx +++ b/src/pages/Feed/FeedPage.tsx @@ -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, @@ -76,46 +77,59 @@ export function FeedPage(props: PageProps) { } > - - b.localeCompare(a))}> - {([date, episode], groupIndex) => ( - <> - - false} primary>{date} - - groupIndex() === selectedIndex()} - flexDirection="column" - gap={0} - paddingLeft={1} - paddingRight={1} - paddingTop={0} - paddingBottom={0} - onMouseDown={() => setSelectedIndex(groupIndex())} - > - groupIndex() === selectedIndex()} primary> - {groupIndex() === selectedIndex() ? ">" : " "} - - groupIndex() === selectedIndex()} - primary + + + b.localeCompare(a), + )} + > + {([date, episode], groupIndex) => { + const selected = () => groupIndex() === selectedIndex(); + return ( + <> + - {episode.episode.title} - - - groupIndex() === selectedIndex()} primary> - {episode.feed.podcast.title} - - groupIndex() === selectedIndex()} tertiary> - {formatDate(episode.episode.pubDate)} - - groupIndex() === selectedIndex()} tertiary> - {formatDuration(episode.episode.duration)} + false} primary> + {date} - - - )} + setSelectedIndex(groupIndex())} + > + + {selected() ? ">" : " "} + + + {episode.episode.title} + + + + {episode.feed.podcast.title} + + + {formatDate(episode.episode.pubDate)} + + + {formatDuration(episode.episode.duration)} + + + + + ); + }} diff --git a/src/pages/Search/ResultCard.tsx b/src/pages/Search/ResultCard.tsx index c04f168..5712404 100644 --- a/src/pages/Search/ResultCard.tsx +++ b/src/pages/Search/ResultCard.tsx @@ -45,27 +45,27 @@ export function ResultCard(props: ResultCardProps) { - - props.selected} - fg={theme.textMuted} - > - by {podcast().author} - - + + props.selected} + tertiary + > + by {podcast().author} + + - - {(description) => ( - props.selected} - fg={theme.text} - > - {description().length > 120 - ? description().slice(0, 120) + "..." - : description()} - - )} - + + {(description) => ( + props.selected} + tertiary + > + {description().length > 120 + ? description().slice(0, 120) + "..." + : description()} + + )} + 0}> diff --git a/src/pages/Search/SearchHistory.tsx b/src/pages/Search/SearchHistory.tsx index f0ffc49..2ea6bb7 100644 --- a/src/pages/Search/SearchHistory.tsx +++ b/src/pages/Search/SearchHistory.tsx @@ -62,18 +62,18 @@ export function SearchHistory(props: SearchHistoryProps) { paddingRight={1} onMouseDown={() => handleSearchClick(index(), query)} > - - {">"} - - - {query} - + + {">"} + + + {query} + handleRemoveClick(query)} padding={0}> [x] diff --git a/src/pages/Settings/SourceManager.tsx b/src/pages/Settings/SourceManager.tsx index bfd02db..5a28785 100644 --- a/src/pages/Settings/SourceManager.tsx +++ b/src/pages/Settings/SourceManager.tsx @@ -198,23 +198,20 @@ export function SourceManager(props: SourceManagerProps) { feedStore.toggleSource(source.id); }} > - - {focusArea() === "list" && index() === selectedIndex() - ? ">" - : " "} - - focusArea() === "list" && index() === selectedIndex()} - fg={theme.text} - > - {source.name} - + focusArea() === "list" && index() === selectedIndex()} + primary + > + {focusArea() === "list" && index() === selectedIndex() + ? ">" + : " "} + + focusArea() === "list" && index() === selectedIndex()} + primary + > + {source.name} + )} @@ -223,114 +220,98 @@ export function SourceManager(props: SourceManagerProps) { Space/Enter to toggle, d to delete, a to add - {/* API settings */} - - - {isApiSource() - ? "API Settings" - : "API Settings (select an API source)"} - - - - - Country: {sourceCountry()} - - - - - Language:{" "} - {sourceLanguage() === "ja_jp" ? "Japanese" : "English"} - - - - - Explicit: {sourceExplicit() ? "Yes" : "No"} - - - - - Enter/Space to toggle focused setting - - + {/* API settings */} + + false} primary={isApiSource()}> + {isApiSource() + ? "API Settings" + : "API Settings (select an API source)"} + + + + false} primary={focusArea() === "country"}> + Country: {sourceCountry()} + + + + false} primary={focusArea() === "language"}> + Language:{" "} + {sourceLanguage() === "ja_jp" ? "Japanese" : "English"} + + + + false} primary={focusArea() === "explicit"}> + Explicit: {sourceExplicit() ? "Yes" : "No"} + + + + false} tertiary> + Enter/Space to toggle focused setting + + - {/* Add new source form */} - - - Add New Source: - + {/* Add new source form */} + + false} primary={focusArea() === "add" || focusArea() === "url"}> + Add New Source: + - - Name: - - + + false} tertiary>Name: + + - - URL: - { - setNewSourceUrl(v); - setError(null); - }} - placeholder="https://example.com/feed.rss" - focused={props.focused && focusArea() === "url"} - width={35} - /> - + + false} tertiary>URL: + { + setNewSourceUrl(v); + setError(null); + }} + placeholder="https://example.com/feed.rss" + focused={props.focused && focusArea() === "url"} + width={35} + /> + - - [+] Add Source - - + + false} primary>[+] Add Source + + - {/* Error message */} - {error() && {error()}} + {/* Error message */} + {error() && false} tertiary>{error()}} - Tab to switch sections, Esc to close + false} tertiary>Tab to switch sections, Esc to close ); } diff --git a/src/ui/command.tsx b/src/ui/command.tsx index 1113aac..b1d0e85 100644 --- a/src/ui/command.tsx +++ b/src/ui/command.tsx @@ -295,39 +295,30 @@ function CommandDialog(props: { } }} > - - index() === selectedIndex()} - fg={ - index() === selectedIndex() - ? theme.selectedListItemText - : theme.text - } - attributes={ - index() === selectedIndex() - ? TextAttributes.BOLD - : undefined - } - > - {option.title} - - - index() === selectedIndex()} - fg={theme.textMuted} - > - {option.footer} - - - - index() === selectedIndex()} - fg={theme.textMuted} - > - {option.description} - - - + + index() === selectedIndex()} + primary + > + {option.title} + + + index() === selectedIndex()} + tertiary + > + {option.footer} + + + + index() === selectedIndex()} + tertiary + > + {option.description} + + + )}