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

more theme color integration

Browse Source
This commit is contained in:
Michael Freno
2026-02-10 15:10:07 -05:00
parent a405474f11
commit f707594d0c
18 changed files with 247 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@@ -72,8 +72,8 @@ export function App() {
return (
<ErrorBoundary
fallback={(err) => (
<box border padding={2}>
<text fg="red">
<box border padding={2} borderColor={theme.error}>
<text fg={theme.error}>
Error: {err?.message ?? String(err)}
{"\n"}
Press a number key (1-6) to switch tabs.

32
src/components/CodeValidation.tsx
View File

@@ -6,6 +6,7 @@
import { createSignal } from "solid-js";
import { useAuthStore } from "@/stores/auth";
import { AUTH_CONFIG } from "@/config/auth";
import { useTheme } from "@/context/ThemeContext";
interface CodeValidationProps {
focused?: boolean;
@@ -16,6 +17,7 @@ type FocusField = "code" | "submit" | "back";
export function CodeValidation(props: CodeValidationProps) {
const auth = useAuthStore();
const { theme } = useTheme();
const [code, setCode] = createSignal("");
const [focusField, setFocusField] = createSignal<FocusField>("code");
const [codeError, setCodeError] = createSignal<string | null>(null);
@@ -98,32 +100,32 @@ export function CodeValidation(props: CodeValidationProps) {
};
return (
<box flexDirection="column" border padding={2} gap={1}>
<text>
<box flexDirection="column" border padding={2} gap={1} borderColor={theme.border}>
<text fg={theme.text}>
<strong>Enter Sync Code</strong>
</text>
<box height={1} />
<text fg="gray">
<text fg={theme.textMuted}>
Enter your 8-character sync code to link your account.
</text>
<text fg="gray">You can get this code from the web portal.</text>
<text fg={theme.textMuted}>You can get this code from the web portal.</text>
<box height={1} />
{/* Code display */}
<box flexDirection="column" gap={0}>
<text fg={focusField() === "code" ? "cyan" : undefined}>
<text fg={focusField() === "code" ? theme.primary : undefined}>
Code ({codeProgress()}):
</text>
<box border padding={1}>
<box border padding={1} borderColor={theme.border}>
<text
fg={
code().length === AUTH_CONFIG.codeValidation.codeLength
? "green"
: "yellow"
? theme.success
: theme.warning
}
>
{codeDisplay()}
@@ -139,7 +141,7 @@ export function CodeValidation(props: CodeValidationProps) {
width={30}
/>
{codeError() && <text fg="red">{codeError()}</text>}
{codeError() && <text fg={theme.error}>{codeError()}</text>}
</box>
<box height={1} />
@@ -149,9 +151,9 @@ export function CodeValidation(props: CodeValidationProps) {
<box
border
padding={1}
backgroundColor={focusField() === "submit" ? "#333" : undefined}
backgroundColor={focusField() === "submit" ? theme.backgroundElement : undefined}
>
<text fg={focusField() === "submit" ? "cyan" : undefined}>
<text fg={focusField() === "submit" ? theme.primary : undefined}>
{auth.isLoading ? "Validating..." : "[Enter] Validate Code"}
</text>
</box>
@@ -159,20 +161,20 @@ export function CodeValidation(props: CodeValidationProps) {
<box
border
padding={1}
backgroundColor={focusField() === "back" ? "#333" : undefined}
backgroundColor={focusField() === "back" ? theme.backgroundElement : undefined}
>
<text fg={focusField() === "back" ? "yellow" : "gray"}>
<text fg={focusField() === "back" ? theme.warning : theme.textMuted}>
[Esc] Back to Login
</text>
</box>
</box>
{/* Auth error message */}
{auth.error && <text fg="red">{auth.error.message}</text>}
{auth.error && <text fg={theme.error}>{auth.error.message}</text>}
<box height={1} />
<text fg="gray">Tab to navigate, Enter to select, Esc to go back</text>
<text fg={theme.textMuted}>Tab to navigate, Enter to select, Esc to go back</text>
</box>
);
}

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

@@ -66,7 +66,7 @@ export function DiscoverPage(props: PageProps) {
backgroundColor={isSelected() ? theme.accent : undefined}
onMouseDown={() => handleCategorySelect(category.id)}
>
<text fg={isSelected() ? "cyan" : "gray"}>
<text fg={isSelected() ? theme.primary : theme.textMuted}>
{category.icon} {category.name}
</text>
</box>
@@ -83,7 +83,7 @@ export function DiscoverPage(props: PageProps) {
>
<box padding={1}>
<text
fg={props.depth() == DiscoverPagePaneType.SHOWS ? "cyan" : "gray"}
fg={props.depth() == DiscoverPagePaneType.SHOWS ? theme.primary : theme.textMuted}
>
Trending in{" "}
{DISCOVER_CATEGORIES.find(
@@ -96,9 +96,9 @@ export function DiscoverPage(props: PageProps) {
fallback={
<box padding={2}>
{discoverStore.filteredPodcasts().length !== 0 ? (
<text fg="yellow">Loading trending shows...</text>
<text fg={theme.warning}>Loading trending shows...</text>
) : (
<text fg="gray">No podcasts found in this category.</text>
<text fg={theme.textMuted}>No podcasts found in this category.</text>
)}
</box>
}

16
src/pages/Discover/PodcastCard.tsx
View File

@@ -4,6 +4,7 @@
import { Show, For } from "solid-js";
import type { Podcast } from "@/types/podcast";
import { useTheme } from "@/context/ThemeContext";
type PodcastCardProps = {
podcast: Podcast;
@@ -14,6 +15,7 @@ type PodcastCardProps = {
};
export function PodcastCard(props: PodcastCardProps) {
const { theme } = useTheme();
const handleSubscribeClick = () => {
props.onSubscribe?.();
};
@@ -22,28 +24,28 @@ export function PodcastCard(props: PodcastCardProps) {
<box
flexDirection="column"
padding={1}
backgroundColor={props.selected ? "#333" : undefined}
backgroundColor={props.selected ? theme.backgroundElement : undefined}
onMouseDown={props.onSelect}
>
{/* Title Row */}
<box flexDirection="row" gap={2} alignItems="center">
<text fg={props.selected ? "cyan" : "white"}>
<text fg={props.selected ? theme.primary : theme.text}>
<strong>{props.podcast.title}</strong>
</text>
<Show when={props.podcast.isSubscribed}>
<text fg="green">[+]</text>
<text fg={theme.success}>[+]</text>
</Show>
</box>
{/* Author */}
<Show when={props.podcast.author && !props.compact}>
<text fg="gray">by {props.podcast.author}</text>
<text fg={theme.textMuted}>by {props.podcast.author}</text>
</Show>
{/* Description */}
<Show when={props.podcast.description && !props.compact}>
<text fg={props.selected ? "white" : "gray"}>
<text fg={props.selected ? theme.text : theme.textMuted}>
{props.podcast.description!.length > 80
? props.podcast.description!.slice(0, 80) + "..."
: props.podcast.description}
@@ -59,14 +61,14 @@ export function PodcastCard(props: PodcastCardProps) {
<box flexDirection="row" gap={1}>
<Show when={(props.podcast.categories ?? []).length > 0}>
<For each={(props.podcast.categories ?? []).slice(0, 2)}>
{(cat) => <text fg="yellow">[{cat}]</text>}
{(cat) => <text fg={theme.warning}>[{cat}]</text>}
</For>
</Show>
</box>
<Show when={props.selected}>
<box onMouseDown={handleSubscribeClick}>
<text fg={props.podcast.isSubscribed ? "red" : "green"}>
<text fg={props.podcast.isSubscribed ? theme.error : theme.success}>
{props.podcast.isSubscribed ? "[Unsubscribe]" : "[Subscribe]"}
</text>
</box>

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

@@ -8,6 +8,7 @@ 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";
interface FeedDetailProps {
feed: Feed;
@@ -17,6 +18,7 @@ interface FeedDetailProps {
}
export function FeedDetail(props: FeedDetailProps) {
const { theme } = useTheme();
const [selectedIndex, setSelectedIndex] = createSignal(0);
const [showInfo, setShowInfo] = createSignal(true);
@@ -82,45 +84,45 @@ export function FeedDetail(props: FeedDetailProps) {
<box flexDirection="column" gap={1}>
{/* Header with back button */}
<box flexDirection="row" justifyContent="space-between">
<box border padding={0} onMouseDown={props.onBack}>
<text fg="cyan">[Esc] Back</text>
<box border padding={0} onMouseDown={props.onBack} borderColor={theme.border}>
<text fg={theme.primary}>[Esc] Back</text>
</box>
<box border padding={0} onMouseDown={() => setShowInfo((v) => !v)}>
<text fg="cyan">[i] {showInfo() ? "Hide" : "Show"} Info</text>
<box border padding={0} onMouseDown={() => setShowInfo((v) => !v)} borderColor={theme.border}>
<text fg={theme.primary}>[i] {showInfo() ? "Hide" : "Show"} Info</text>
</box>
</box>
{/* Podcast info section */}
<Show when={showInfo()}>
<box border padding={1} flexDirection="column" gap={0}>
<text>
<box border padding={1} flexDirection="column" gap={0} borderColor={theme.border}>
<text fg={theme.text}>
<strong>{props.feed.customName || props.feed.podcast.title}</strong>
</text>
{props.feed.podcast.author && (
<box flexDirection="row" gap={1}>
<text fg="gray">by</text>
<text fg="cyan">{props.feed.podcast.author}</text>
<text fg={theme.textMuted}>by</text>
<text fg={theme.primary}>{props.feed.podcast.author}</text>
</box>
)}
<box height={1} />
<text fg="gray">
<text fg={theme.textMuted}>
{props.feed.podcast.description?.slice(0, 200)}
{(props.feed.podcast.description?.length || 0) > 200 ? "..." : ""}
</text>
<box height={1} />
<box flexDirection="row" gap={2}>
<box flexDirection="row" gap={1}>
<text fg="gray">Episodes:</text>
<text fg="white">{props.feed.episodes.length}</text>
<text fg={theme.textMuted}>Episodes:</text>
<text fg={theme.text}>{props.feed.episodes.length}</text>
</box>
<box flexDirection="row" gap={1}>
<text fg="gray">Updated:</text>
<text fg="white">{formatDate(props.feed.lastUpdated)}</text>
<text fg={theme.textMuted}>Updated:</text>
<text fg={theme.text}>{formatDate(props.feed.lastUpdated)}</text>
</box>
<text fg={props.feed.visibility === "public" ? "green" : "yellow"}>
<text fg={props.feed.visibility === "public" ? theme.success : theme.warning}>
{props.feed.visibility === "public" ? "[Public]" : "[Private]"}
</text>
{props.feed.isPinned && <text fg="yellow">[Pinned]</text>}
{props.feed.isPinned && <text fg={theme.warning}>[Pinned]</text>}
</box>
</box>
</Show>
@@ -141,7 +143,7 @@ export function FeedDetail(props: FeedDetailProps) {
flexDirection="column"
gap={0}
padding={1}
backgroundColor={index() === selectedIndex() ? "#333" : undefined}
backgroundColor={index() === selectedIndex() ? theme.backgroundElement : undefined}
onMouseDown={() => {
setSelectedIndex(index());
if (props.onPlayEpisode) {
@@ -150,17 +152,17 @@ export function FeedDetail(props: FeedDetailProps) {
}}
>
<box flexDirection="row" gap={1}>
<text fg={index() === selectedIndex() ? "cyan" : "gray"}>
<text fg={index() === selectedIndex() ? theme.primary : theme.textMuted}>
{index() === selectedIndex() ? ">" : " "}
</text>
<text fg={index() === selectedIndex() ? "white" : undefined}>
<text fg={index() === selectedIndex() ? theme.text : undefined}>
{episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""}
{episode.title}
</text>
</box>
<box flexDirection="row" gap={2} paddingLeft={2}>
<text fg="gray">{formatDate(episode.pubDate)}</text>
<text fg="gray">{formatDuration(episode.duration)}</text>
<text fg={theme.textMuted}>{formatDate(episode.pubDate)}</text>
<text fg={theme.textMuted}>{formatDuration(episode.duration)}</text>
</box>
</box>
)}
@@ -168,7 +170,7 @@ export function FeedDetail(props: FeedDetailProps) {
</scrollbox>
{/* Help text */}
<text fg="gray">
<text fg={theme.textMuted}>
j/k to navigate, Enter to play, i to toggle info, Esc to go back
</text>
</box>

33
src/pages/Feed/FeedFilter.tsx
View File

@@ -6,6 +6,7 @@
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;
@@ -16,6 +17,7 @@ interface FeedFilterProps {
type FilterField = "visibility" | "sort" | "pinned" | "search";
export function FeedFilterComponent(props: FeedFilterProps) {
const { theme } = useTheme();
const [focusField, setFocusField] = createSignal<FilterField>("visibility");
const [searchValue, setSearchValue] = createSignal(
props.filter.searchQuery || "",
@@ -89,9 +91,9 @@ export function FeedFilterComponent(props: FeedFilterProps) {
const visibilityColor = () => {
const vis = props.filter.visibility;
if (vis === "public") return "green";
if (vis === "private") return "yellow";
return "white";
if (vis === "public") return theme.success;
if (vis === "private") return theme.warning;
return theme.text;
};
const sortLabel = () => {
@@ -110,8 +112,8 @@ export function FeedFilterComponent(props: FeedFilterProps) {
};
return (
<box flexDirection="column" border padding={1} gap={1}>
<text>
<box flexDirection="column" border padding={1} gap={1} borderColor={theme.border}>
<text fg={theme.text}>
<strong>Filter Feeds</strong>
</text>
@@ -120,10 +122,11 @@ export function FeedFilterComponent(props: FeedFilterProps) {
<box
border
padding={0}
backgroundColor={focusField() === "visibility" ? "#333" : undefined}
backgroundColor={focusField() === "visibility" ? theme.backgroundElement : undefined}
borderColor={theme.border}
>
<box flexDirection="row" gap={1}>
<text fg={focusField() === "visibility" ? "cyan" : "gray"}>
<text fg={focusField() === "visibility" ? theme.primary : theme.textMuted}>
Show:
</text>
<text fg={visibilityColor()}>{visibilityLabel()}</text>
@@ -134,11 +137,11 @@ export function FeedFilterComponent(props: FeedFilterProps) {
<box
border
padding={0}
backgroundColor={focusField() === "sort" ? "#333" : undefined}
backgroundColor={focusField() === "sort" ? theme.backgroundElement : undefined}
>
<box flexDirection="row" gap={1}>
<text fg={focusField() === "sort" ? "cyan" : "gray"}>Sort:</text>
<text fg="white">{sortLabel()}</text>
<text fg={focusField() === "sort" ? theme.primary : theme.textMuted}>Sort:</text>
<text fg={theme.text}>{sortLabel()}</text>
</box>
</box>
@@ -146,13 +149,13 @@ export function FeedFilterComponent(props: FeedFilterProps) {
<box
border
padding={0}
backgroundColor={focusField() === "pinned" ? "#333" : undefined}
backgroundColor={focusField() === "pinned" ? theme.backgroundElement : undefined}
>
<box flexDirection="row" gap={1}>
<text fg={focusField() === "pinned" ? "cyan" : "gray"}>
<text fg={focusField() === "pinned" ? theme.primary : theme.textMuted}>
Pinned:
</text>
<text fg={props.filter.pinnedOnly ? "yellow" : "gray"}>
<text fg={props.filter.pinnedOnly ? theme.warning : theme.textMuted}>
{props.filter.pinnedOnly ? "Yes" : "No"}
</text>
</box>
@@ -161,7 +164,7 @@ export function FeedFilterComponent(props: FeedFilterProps) {
{/* Search box */}
<box flexDirection="row" gap={1}>
<text fg={focusField() === "search" ? "cyan" : "gray"}>Search:</text>
<text fg={focusField() === "search" ? theme.primary : theme.textMuted}>Search:</text>
<input
value={searchValue()}
onInput={handleSearchInput}
@@ -171,7 +174,7 @@ export function FeedFilterComponent(props: FeedFilterProps) {
/>
</box>
<text fg="gray">Tab to navigate, Enter/Space to toggle</text>
<text fg={theme.textMuted}>Tab to navigate, Enter/Space to toggle</text>
</box>
);
}

27
src/pages/Feed/FeedItem.tsx
View File

@@ -31,12 +31,13 @@ export function FeedItem(props: FeedItemProps) {
};
const visibilityColor = () => {
return props.feed.visibility === "public" ? "green" : "yellow";
return props.feed.visibility === "public" ? theme.success : theme.warning;
};
const pinnedIndicator = () => {
return props.feed.isPinned ? "*" : " ";
};
const { theme } = useTheme();
if (props.compact) {
@@ -45,18 +46,18 @@ export function FeedItem(props: FeedItemProps) {
<box
flexDirection="row"
gap={1}
backgroundColor={props.isSelected ? "#333" : undefined}
backgroundColor={props.isSelected ? theme.backgroundElement : undefined}
paddingLeft={1}
paddingRight={1}
>
<text fg={props.isSelected ? "cyan" : "gray"}>
<text fg={props.isSelected ? theme.primary : theme.textMuted}>
{props.isSelected ? ">" : " "}
</text>
<text fg={visibilityColor()}>{visibilityIcon()}</text>
<text fg={props.isSelected ? "white" : theme.accent}>
<text fg={props.isSelected ? theme.text : theme.accent}>
{props.feed.customName || props.feed.podcast.title}
</text>
{props.showEpisodeCount && <text fg="gray">({episodeCount()})</text>}
{props.showEpisodeCount && <text fg={theme.textMuted}>({episodeCount()})</text>}
</box>
);
}
@@ -67,18 +68,18 @@ export function FeedItem(props: FeedItemProps) {
flexDirection="column"
gap={0}
border={props.isSelected}
borderColor={props.isSelected ? "cyan" : undefined}
backgroundColor={props.isSelected ? "#222" : undefined}
borderColor={props.isSelected ? theme.primary : undefined}
backgroundColor={props.isSelected ? theme.backgroundElement : undefined}
padding={1}
>
{/* Title row */}
<box flexDirection="row" gap={1}>
<text fg={props.isSelected ? "cyan" : "gray"}>
<text fg={props.isSelected ? theme.primary : theme.textMuted}>
{props.isSelected ? ">" : " "}
</text>
<text fg={visibilityColor()}>{visibilityIcon()}</text>
<text fg="yellow">{pinnedIndicator()}</text>
<text fg={props.isSelected ? "white" : theme.text}>
<text fg={theme.warning}>{pinnedIndicator()}</text>
<text fg={props.isSelected ? theme.text : theme.text}>
<strong>
{props.feed.customName || props.feed.podcast.title}
</strong>
@@ -87,18 +88,18 @@ export function FeedItem(props: FeedItemProps) {
<box flexDirection="row" gap={2} paddingLeft={4}>
{props.showEpisodeCount && (
<text fg="gray">
<text fg={theme.textMuted}>
{episodeCount()} episodes ({unplayedCount()} new)
</text>
)}
{props.showLastUpdated && (
<text fg="gray">Updated: {formatDate(props.feed.lastUpdated)}</text>
<text fg={theme.textMuted}>Updated: {formatDate(props.feed.lastUpdated)}</text>
)}
</box>
{props.feed.podcast.description && (
<box paddingLeft={4} paddingTop={0}>
<text fg="gray">
<text fg={theme.textMuted}>
{props.feed.podcast.description.slice(0, 60)}
{props.feed.podcast.description.length > 60 ? "..." : ""}
</text>

20
src/pages/Feed/FeedList.tsx
View File

@@ -9,6 +9,7 @@ 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;
@@ -21,6 +22,7 @@ interface FeedListProps {
}
export function FeedList(props: FeedListProps) {
const { theme } = useTheme();
const feedStore = useFeedStore();
const [selectedIndex, setSelectedIndex] = createSignal(0);
@@ -136,16 +138,16 @@ export function FeedList(props: FeedListProps) {
<box flexDirection="column" gap={1}>
{/* Header with filter controls */}
<box flexDirection="row" justifyContent="space-between" paddingBottom={0}>
<text>
<text fg={theme.text}>
<strong>My Feeds</strong>
</text>
<text fg="gray">({filteredFeeds().length} feeds)</text>
<text fg={theme.textMuted}>({filteredFeeds().length} feeds)</text>
<box flexDirection="row" gap={1}>
<box border padding={0} onMouseDown={cycleVisibilityFilter}>
<text fg="cyan">[f] {visibilityLabel()}</text>
<box border padding={0} onMouseDown={cycleVisibilityFilter} borderColor={theme.border}>
<text fg={theme.primary}>[f] {visibilityLabel()}</text>
</box>
<box border padding={0} onMouseDown={cycleSortField}>
<text fg="cyan">[s] {sortLabel()}</text>
<box border padding={0} onMouseDown={cycleSortField} borderColor={theme.border}>
<text fg={theme.primary}>[s] {sortLabel()}</text>
</box>
</box>
</box>
@@ -154,8 +156,8 @@ export function FeedList(props: FeedListProps) {
<Show
when={filteredFeeds().length > 0}
fallback={
<box border padding={2}>
<text fg="gray">
<box border padding={2} borderColor={theme.border}>
<text fg={theme.textMuted}>
No feeds found. Add podcasts from the Discover or Search tabs.
</text>
</box>
@@ -180,7 +182,7 @@ export function FeedList(props: FeedListProps) {
{/* Navigation help */}
<box paddingTop={0}>
<text fg="gray">
<text fg={theme.textMuted}>
Enter open | Esc up | j/k navigate | p pin | f filter | s sort
</text>
</box>

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

@@ -50,14 +50,14 @@ export function FeedPage(props: PageProps) {
>
{/* Status line */}
<Show when={isRefreshing()}>
<text fg="yellow">Refreshing feeds...</text>
<text fg={theme.warning}>Refreshing feeds...</text>
</Show>
<Show
when={allEpisodes().length > 0}
fallback={
<box padding={2}>
<text fg="gray">
<text fg={theme.textMuted}>
No episodes yet. Subscribe to shows from Discover or Search.
</text>
</box>
@@ -75,22 +75,22 @@ export function FeedPage(props: PageProps) {
paddingTop={0}
paddingBottom={0}
backgroundColor={
index() === selectedIndex() ? "#333" : undefined
index() === selectedIndex() ? theme.backgroundElement : undefined
}
onMouseDown={() => setSelectedIndex(index())}
>
<box flexDirection="row" gap={1}>
<text fg={index() === selectedIndex() ? "cyan" : "gray"}>
<text fg={index() === selectedIndex() ? theme.primary : theme.textMuted}>
{index() === selectedIndex() ? ">" : " "}
</text>
<text fg={index() === selectedIndex() ? "white" : theme.text}>
<text fg={index() === selectedIndex() ? theme.text : theme.text}>
{item.episode.title}
</text>
</box>
<box flexDirection="row" gap={2} paddingLeft={2}>
<text fg="cyan">{item.feed.podcast.title}</text>
<text fg="gray">{formatDate(item.episode.pubDate)}</text>
<text fg="gray">{formatDuration(item.episode.duration)}</text>
<text fg={theme.primary}>{item.feed.podcast.title}</text>
<text fg={theme.textMuted}>{formatDate(item.episode.pubDate)}</text>
<text fg={theme.textMuted}>{formatDuration(item.episode.duration)}</text>
</box>
</box>
)}

32
src/pages/Player/PlaybackControls.tsx
View File

@@ -1,4 +1,5 @@
import type { BackendName } from "../utils/audio-player"
import { useTheme } from "@/context/ThemeContext"
type PlaybackControlsProps = {
isPlaying: boolean
@@ -22,39 +23,40 @@ const BACKEND_LABELS: Record<BackendName, string> = {
}
export function PlaybackControls(props: PlaybackControlsProps) {
const { theme } = useTheme();
return (
<box flexDirection="row" gap={1} alignItems="center" border padding={1}>
<box border padding={0} onMouseDown={props.onPrev}>
<text fg="cyan">[Prev]</text>
<box flexDirection="row" gap={1} alignItems="center" border padding={1} borderColor={theme.border}>
<box border padding={0} onMouseDown={props.onPrev} borderColor={theme.border}>
<text fg={theme.primary}>[Prev]</text>
</box>
<box border padding={0} onMouseDown={props.onToggle}>
<text fg="cyan">{props.isPlaying ? "[Pause]" : "[Play]"}</text>
<box border padding={0} onMouseDown={props.onToggle} borderColor={theme.border}>
<text fg={theme.primary}>{props.isPlaying ? "[Pause]" : "[Play]"}</text>
</box>
<box border padding={0} onMouseDown={props.onNext}>
<text fg="cyan">[Next]</text>
<box border padding={0} onMouseDown={props.onNext} borderColor={theme.border}>
<text fg={theme.primary}>[Next]</text>
</box>
<box flexDirection="row" gap={1} marginLeft={2}>
<text fg="gray">Vol</text>
<text fg="white">{Math.round(props.volume * 100)}%</text>
<text fg={theme.textMuted}>Vol</text>
<text fg={theme.text}>{Math.round(props.volume * 100)}%</text>
</box>
<box flexDirection="row" gap={1} marginLeft={2}>
<text fg="gray">Speed</text>
<text fg="white">{props.speed}x</text>
<text fg={theme.textMuted}>Speed</text>
<text fg={theme.text}>{props.speed}x</text>
</box>
{props.backendName && props.backendName !== "none" && (
<box flexDirection="row" gap={1} marginLeft={2}>
<text fg="gray">via</text>
<text fg="cyan">{BACKEND_LABELS[props.backendName]}</text>
<text fg={theme.textMuted}>via</text>
<text fg={theme.primary}>{BACKEND_LABELS[props.backendName]}</text>
</box>
)}
{props.backendName === "none" && (
<box marginLeft={2}>
<text fg="yellow">No audio player found</text>
<text fg={theme.warning}>No audio player found</text>
</box>
)}
{props.hasAudioUrl === false && (
<box marginLeft={2}>
<text fg="yellow">No audio URL</text>
<text fg={theme.warning}>No audio URL</text>
</box>
)}
</box>

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

@@ -1,6 +1,7 @@
import { Show } from "solid-js";
import type { SearchResult } from "@/types/source";
import { SourceBadge } from "./SourceBadge";
import { useTheme } from "@/context/ThemeContext";
type ResultCardProps = {
result: SearchResult;
@@ -10,6 +11,7 @@ type ResultCardProps = {
};
export function ResultCard(props: ResultCardProps) {
const { theme } = useTheme();
const podcast = () => props.result.podcast;
return (
@@ -17,8 +19,8 @@ export function ResultCard(props: ResultCardProps) {
flexDirection="column"
padding={1}
border={props.selected}
borderColor={props.selected ? "cyan" : undefined}
backgroundColor={props.selected ? "#222" : undefined}
borderColor={props.selected ? theme.primary : undefined}
backgroundColor={props.selected ? theme.backgroundElement : undefined}
onMouseDown={props.onSelect}
>
<box
@@ -27,7 +29,7 @@ export function ResultCard(props: ResultCardProps) {
alignItems="center"
>
<box flexDirection="row" gap={2} alignItems="center">
<text fg={props.selected ? "cyan" : "white"}>
<text fg={props.selected ? theme.primary : theme.text}>
<strong>{podcast().title}</strong>
</text>
<SourceBadge
@@ -37,17 +39,17 @@ export function ResultCard(props: ResultCardProps) {
/>
</box>
<Show when={podcast().isSubscribed}>
<text fg="green">[Subscribed]</text>
<text fg={theme.success}>[Subscribed]</text>
</Show>
</box>
<Show when={podcast().author}>
<text fg="gray">by {podcast().author}</text>
<text fg={theme.textMuted}>by {podcast().author}</text>
</Show>
<Show when={podcast().description}>
{(description) => (
<text fg={props.selected ? "white" : "gray"}>
<text fg={props.selected ? theme.text : theme.textMuted}>
{description().length > 120
? description().slice(0, 120) + "..."
: description()}
@@ -58,7 +60,7 @@ export function ResultCard(props: ResultCardProps) {
<Show when={(podcast().categories ?? []).length > 0}>
<box flexDirection="row" gap={1}>
{(podcast().categories ?? []).slice(0, 3).map((category) => (
<text fg="yellow">[{category}]</text>
<text fg={theme.warning}>[{category}]</text>
))}
</box>
</Show>
@@ -75,7 +77,7 @@ export function ResultCard(props: ResultCardProps) {
props.onSubscribe?.();
}}
>
<text fg="cyan">[+] Add to Feeds</text>
<text fg={theme.primary}>[+] Add to Feeds</text>
</box>
</Show>
</box>

22
src/pages/Search/ResultDetail.tsx
View File

@@ -2,6 +2,7 @@ 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;
@@ -9,15 +10,16 @@ type ResultDetailProps = {
};
export function ResultDetail(props: ResultDetailProps) {
const { theme } = useTheme();
return (
<box flexDirection="column" border padding={1} gap={1} height="100%">
<box flexDirection="column" border padding={1} gap={1} height="100%" borderColor={theme.border}>
<Show
when={props.result}
fallback={<text fg="gray">Select a result to see details.</text>}
fallback={ <text fg={theme.textMuted}>Select a result to see details.</text>}
>
{(result) => (
<>
<text fg="white">
<text fg={theme.text}>
<strong>{result().podcast.title}</strong>
</text>
@@ -28,24 +30,24 @@ export function ResultDetail(props: ResultDetailProps) {
/>
<Show when={result().podcast.author}>
<text fg="gray">by {result().podcast.author}</text>
<text fg={theme.textMuted}>by {result().podcast.author}</text>
</Show>
<Show when={result().podcast.description}>
<text fg="gray">{result().podcast.description}</text>
<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="yellow">[{category}]</text>
<text fg={theme.warning}>[{category}]</text>
))}
</box>
</Show>
<text fg="gray">Feed: {result().podcast.feedUrl}</text>
<text fg={theme.textMuted}>Feed: {result().podcast.feedUrl}</text>
<text fg="gray">
<text fg={theme.textMuted}>
Updated: {format(result().podcast.lastUpdated, "MMM d, yyyy")}
</text>
@@ -58,12 +60,12 @@ export function ResultDetail(props: ResultDetailProps) {
width={18}
onMouseDown={() => props.onSubscribe?.(result())}
>
<text fg="cyan">[+] Add to Feeds</text>
<text fg={theme.primary}>[+] Add to Feeds</text>
</box>
</Show>
<Show when={result().podcast.isSubscribed}>
<text fg="green">Already subscribed</text>
<text fg={theme.success}>Already subscribed</text>
</Show>
</>
)}

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

@@ -3,6 +3,7 @@
*/
import { For, Show } from "solid-js"
import { useTheme } from "@/context/ThemeContext"
type SearchHistoryProps = {
history: string[]
@@ -15,6 +16,7 @@ type SearchHistoryProps = {
}
export function SearchHistory(props: SearchHistoryProps) {
const { theme } = useTheme();
const handleSearchClick = (index: number, query: string) => {
props.onChange?.(index)
props.onSelect?.(query)
@@ -27,10 +29,10 @@ export function SearchHistory(props: SearchHistoryProps) {
return (
<box flexDirection="column" gap={1}>
<box flexDirection="row" justifyContent="space-between">
<text fg="gray">Recent Searches</text>
<text fg={theme.textMuted}>Recent Searches</text>
<Show when={props.history.length > 0}>
<box onMouseDown={() => props.onClear?.()} padding={0}>
<text fg="red">[Clear All]</text>
<text fg={theme.error}>[Clear All]</text>
</box>
</Show>
</box>
@@ -39,7 +41,7 @@ export function SearchHistory(props: SearchHistoryProps) {
when={props.history.length > 0}
fallback={
<box padding={1}>
<text fg="gray">No recent searches</text>
<text fg={theme.textMuted}>No recent searches</text>
</box>
}
>
@@ -56,15 +58,15 @@ export function SearchHistory(props: SearchHistoryProps) {
padding={0}
paddingLeft={1}
paddingRight={1}
backgroundColor={isSelected() ? "#333" : undefined}
backgroundColor={isSelected() ? theme.backgroundElement : undefined}
onMouseDown={() => handleSearchClick(index(), query)}
>
<box flexDirection="row" gap={1}>
<text fg="gray">{">"}</text>
<text fg={isSelected() ? "cyan" : "white"}>{query}</text>
<text fg={theme.textMuted}>{">"}</text>
<text fg={isSelected() ? theme.primary : theme.text}>{query}</text>
</box>
<box onMouseDown={() => handleRemoveClick(query)} padding={0}>
<text fg="red">[x]</text>
<text fg={theme.error}>[x]</text>
</box>
</box>
)

19
src/pages/Search/SourceBadge.tsx
View File

@@ -1,4 +1,5 @@
import { SourceType } from "@/types/source";
import { useTheme } from "@/context/ThemeContext";
type SourceBadgeProps = {
sourceId: string;
@@ -14,21 +15,29 @@ const typeLabel = (sourceType?: SourceType) => {
};
const typeColor = (sourceType?: SourceType) => {
if (sourceType === SourceType.API) return "cyan";
if (sourceType === SourceType.RSS) return "green";
if (sourceType === SourceType.CUSTOM) return "yellow";
return "gray";
if (sourceType === SourceType.API) return theme.primary;
if (sourceType === SourceType.RSS) return theme.success;
if (sourceType === SourceType.CUSTOM) return theme.warning;
return theme.textMuted;
};
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="gray">{label()}</text>
<text fg={theme.textMuted}>{label()}</text>
</box>
);
}

46
src/pages/Settings/OAuthPlaceholder.tsx
View File

@@ -5,6 +5,7 @@
import { createSignal } from "solid-js";
import { OAUTH_PROVIDERS, OAUTH_LIMITATION_MESSAGE } from "@/config/auth";
import { useTheme } from "@/context/ThemeContext";
interface OAuthPlaceholderProps {
focused?: boolean;
@@ -15,6 +16,7 @@ interface OAuthPlaceholderProps {
type FocusField = "code" | "back";
export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
const { theme } = useTheme();
const [focusField, setFocusField] = createSignal<FocusField>("code");
const fields: FocusField[] = ["code", "back"];
@@ -38,23 +40,23 @@ export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
};
return (
<box flexDirection="column" border padding={2} gap={1}>
<text>
<box flexDirection="column" border padding={2} gap={1} borderColor={theme.border}>
<text fg={theme.text}>
<strong>OAuth Authentication</strong>
</text>
<box height={1} />
{/* OAuth providers list */}
<text fg="cyan">Available OAuth Providers:</text>
<text fg={theme.primary}>Available OAuth Providers:</text>
<box flexDirection="column" gap={0} paddingLeft={2}>
{OAUTH_PROVIDERS.map((provider) => (
<box flexDirection="row" gap={1}>
<text fg={provider.enabled ? "green" : "gray"}>
<text fg={provider.enabled ? theme.success : theme.textMuted}>
{provider.enabled ? "[+]" : "[-]"} {provider.name}
</text>
<text fg="gray">- {provider.description}</text>
<text fg={theme.textMuted}>- {provider.description}</text>
</box>
))}
</box>
@@ -62,33 +64,29 @@ export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
<box height={1} />
{/* Limitation message */}
<box border padding={1} borderColor="yellow">
<text fg="yellow">Terminal Limitations</text>
<box border padding={1} borderColor={theme.warning}>
<text fg={theme.warning}>Terminal Limitations</text>
</box>
<box paddingLeft={1}>
{OAUTH_LIMITATION_MESSAGE.split("\n").map((line) => (
<text fg="gray">{line}</text>
<text fg={theme.textMuted}>{line}</text>
))}
</box>
<box height={1} />
{/* Alternative options */}
<text fg="cyan">Recommended Alternatives:</text>
<text fg={theme.primary}>Recommended Alternatives:</text>
<box flexDirection="column" gap={0} paddingLeft={2}>
<box flexDirection="row" gap={1}>
<text fg="green">[1]</text>
<text fg="white">Use a sync code from the web portal</text>
</box>
<box flexDirection="row" gap={1}>
<text fg="green">[2]</text>
<text fg="white">Use email/password authentication</text>
</box>
<box flexDirection="row" gap={1}>
<text fg="green">[3]</text>
<text fg="white">Use file-based sync (no account needed)</text>
<text fg={theme.success}>[1]</text>
<text fg={theme.text}>Use a sync code from the web portal</text>
<text fg={theme.success}>[2]</text>
<text fg={theme.text}>Use email/password authentication</text>
<text fg={theme.success}>[3]</text>
<text fg={theme.text}>Use file-based sync (no account needed)</text>
</box>
</box>
@@ -99,9 +97,9 @@ export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
<box
border
padding={1}
backgroundColor={focusField() === "code" ? "#333" : undefined}
backgroundColor={focusField() === "code" ? theme.backgroundElement : undefined}
>
<text fg={focusField() === "code" ? "cyan" : undefined}>
<text fg={focusField() === "code" ? theme.primary : undefined}>
[C] Enter Sync Code
</text>
</box>
@@ -109,9 +107,9 @@ export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
<box
border
padding={1}
backgroundColor={focusField() === "back" ? "#333" : undefined}
backgroundColor={focusField() === "back" ? theme.backgroundElement : undefined}
>
<text fg={focusField() === "back" ? "yellow" : "gray"}>
<text fg={focusField() === "back" ? theme.warning : theme.textMuted}>
[Esc] Back to Login
</text>
</box>
@@ -119,7 +117,7 @@ export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
<box height={1} />
<text fg="gray">Tab to navigate, Enter to select, Esc to go back</text>
<text fg={theme.textMuted}>Tab to navigate, Enter to select, Esc to go back</text>
</box>
);
}

44
src/pages/Settings/SyncProfile.tsx
View File

@@ -6,6 +6,7 @@
import { createSignal } from "solid-js";
import { useAuthStore } from "@/stores/auth";
import { format } from "date-fns";
import { useTheme } from "@/context/ThemeContext";
interface SyncProfileProps {
focused?: boolean;
@@ -17,6 +18,7 @@ type FocusField = "sync" | "export" | "logout";
export function SyncProfile(props: SyncProfileProps) {
const auth = useAuthStore();
const { theme } = useTheme();
const [focusField, setFocusField] = createSignal<FocusField>("sync");
const [lastSyncTime] = createSignal<Date | null>(new Date());
@@ -59,8 +61,8 @@ export function SyncProfile(props: SyncProfileProps) {
};
return (
<box flexDirection="column" border padding={2} gap={1}>
<text>
<box flexDirection="column" border padding={2} gap={1} borderColor={theme.border}>
<text fg={theme.text}>
<strong>User Profile</strong>
</text>
@@ -77,38 +79,38 @@ export function SyncProfile(props: SyncProfileProps) {
justifyContent="center"
alignItems="center"
>
<text fg="cyan">{userInitials()}</text>
<text fg={theme.primary}>{userInitials()}</text>
</box>
{/* User details */}
<box flexDirection="column" gap={0}>
<text fg="white">{user()?.name || "Guest User"}</text>
<text fg="gray">{user()?.email || "No email"}</text>
<text fg="gray">Joined: {formatDate(user()?.createdAt)}</text>
<text fg={theme.text}>{user()?.name || "Guest User"}</text>
<text fg={theme.textMuted}>{user()?.email || "No email"}</text>
<text fg={theme.textMuted}>Joined: {formatDate(user()?.createdAt)}</text>
</box>
</box>
<box height={1} />
{/* Sync status section */}
<box border padding={1} flexDirection="column" gap={0}>
<text fg="cyan">Sync Status</text>
<box border padding={1} flexDirection="column" gap={0} borderColor={theme.border}>
<text fg={theme.primary}>Sync Status</text>
<box flexDirection="row" gap={1}>
<text fg="gray">Status:</text>
<text fg={user()?.syncEnabled ? "green" : "yellow"}>
<text fg={theme.textMuted}>Status:</text>
<text fg={user()?.syncEnabled ? theme.success : theme.warning}>
{user()?.syncEnabled ? "Enabled" : "Disabled"}
</text>
</box>
<box flexDirection="row" gap={1}>
<text fg="gray">Last Sync:</text>
<text fg="white">{formatDate(lastSyncTime())}</text>
<text fg={theme.textMuted}>Last Sync:</text>
<text fg={theme.text}>{formatDate(lastSyncTime())}</text>
</box>
<box flexDirection="row" gap={1}>
<text fg="gray">Method:</text>
<text fg="white">File-based (JSON/XML)</text>
<text fg={theme.textMuted}>Method:</text>
<text fg={theme.text}>File-based (JSON/XML)</text>
</box>
</box>
@@ -119,9 +121,9 @@ export function SyncProfile(props: SyncProfileProps) {
<box
border
padding={1}
backgroundColor={focusField() === "sync" ? "#333" : undefined}
backgroundColor={focusField() === "sync" ? theme.backgroundElement : undefined}
>
<text fg={focusField() === "sync" ? "cyan" : undefined}>
<text fg={focusField() === "sync" ? theme.primary : undefined}>
[S] Manage Sync
</text>
</box>
@@ -129,9 +131,9 @@ export function SyncProfile(props: SyncProfileProps) {
<box
border
padding={1}
backgroundColor={focusField() === "export" ? "#333" : undefined}
backgroundColor={focusField() === "export" ? theme.backgroundElement : undefined}
>
<text fg={focusField() === "export" ? "cyan" : undefined}>
<text fg={focusField() === "export" ? theme.primary : undefined}>
[E] Export Data
</text>
</box>
@@ -139,9 +141,9 @@ export function SyncProfile(props: SyncProfileProps) {
<box
border
padding={1}
backgroundColor={focusField() === "logout" ? "#333" : undefined}
backgroundColor={focusField() === "logout" ? theme.backgroundElement : undefined}
>
<text fg={focusField() === "logout" ? "red" : "gray"}>
<text fg={focusField() === "logout" ? theme.error : theme.textMuted}>
[L] Logout
</text>
</box>
@@ -149,7 +151,7 @@ export function SyncProfile(props: SyncProfileProps) {
<box height={1} />
<text fg="gray">Tab to navigate, Enter to select</text>
<text fg={theme.textMuted}>Tab to navigate, Enter to select</text>
</box>
);
}

4
src/ui/command.tsx
View File

@@ -270,7 +270,7 @@ function CommandDialog(props: {
const maxHeight = Math.floor(dimensions().height * 0.6);
return (
<box flexDirection="column" padding={1}>
<box flexDirection="column" padding={1} borderColor={theme.border}>
{/* Search input */}
<box marginBottom={1}>
<text fg={theme.textMuted}>{"> "}</text>
@@ -278,7 +278,7 @@ function CommandDialog(props: {
</box>
{/* Command list */}
<box flexDirection="column" maxHeight={maxHeight}>
<box flexDirection="column" maxHeight={maxHeight} borderColor={theme.border}>
<For each={filteredOptions().slice(0, 10)}>
{(option, index) => (
<box

1
src/ui/dialog.tsx
View File

@@ -46,6 +46,7 @@ export function Dialog(
maxWidth={dimensions().width - 2}
backgroundColor={theme.backgroundPanel}
paddingTop={1}
borderColor={theme.border}
>
{props.children}
</box>