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 ( return (
<ErrorBoundary <ErrorBoundary
fallback={(err) => ( fallback={(err) => (
<box border padding={2}> <box border padding={2} borderColor={theme.error}>
<text fg="red"> <text fg={theme.error}>
Error: {err?.message ?? String(err)} Error: {err?.message ?? String(err)}
{"\n"} {"\n"}
Press a number key (1-6) to switch tabs. Press a number key (1-6) to switch tabs.

36
src/components/CodeValidation.tsx
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,6 +2,7 @@ import { Show } from "solid-js";
import { format } from "date-fns"; import { format } from "date-fns";
import type { SearchResult } from "@/types/source"; import type { SearchResult } from "@/types/source";
import { SourceBadge } from "./SourceBadge"; import { SourceBadge } from "./SourceBadge";
import { useTheme } from "@/context/ThemeContext";
type ResultDetailProps = { type ResultDetailProps = {
result?: SearchResult; result?: SearchResult;
@@ -9,15 +10,16 @@ type ResultDetailProps = {
}; };
export function ResultDetail(props: ResultDetailProps) { export function ResultDetail(props: ResultDetailProps) {
const { theme } = useTheme();
return ( 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 <Show
when={props.result} 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) => ( {(result) => (
<> <>
<text fg="white"> <text fg={theme.text}>
<strong>{result().podcast.title}</strong> <strong>{result().podcast.title}</strong>
</text> </text>
@@ -28,24 +30,24 @@ export function ResultDetail(props: ResultDetailProps) {
/> />
<Show when={result().podcast.author}> <Show when={result().podcast.author}>
<text fg="gray">by {result().podcast.author}</text> <text fg={theme.textMuted}>by {result().podcast.author}</text>
</Show> </Show>
<Show when={result().podcast.description}> <Show when={result().podcast.description}>
<text fg="gray">{result().podcast.description}</text> <text fg={theme.textMuted}>{result().podcast.description}</text>
</Show> </Show>
<Show when={(result().podcast.categories ?? []).length > 0}> <Show when={(result().podcast.categories ?? []).length > 0}>
<box flexDirection="row" gap={1}> <box flexDirection="row" gap={1}>
{(result().podcast.categories ?? []).map((category) => ( {(result().podcast.categories ?? []).map((category) => (
<text fg="yellow">[{category}]</text> <text fg={theme.warning}>[{category}]</text>
))} ))}
</box> </box>
</Show> </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")} Updated: {format(result().podcast.lastUpdated, "MMM d, yyyy")}
</text> </text>
@@ -58,12 +60,12 @@ export function ResultDetail(props: ResultDetailProps) {
width={18} width={18}
onMouseDown={() => props.onSubscribe?.(result())} onMouseDown={() => props.onSubscribe?.(result())}
> >
<text fg="cyan">[+] Add to Feeds</text> <text fg={theme.primary}>[+] Add to Feeds</text>
</box> </box>
</Show> </Show>
<Show when={result().podcast.isSubscribed}> <Show when={result().podcast.isSubscribed}>
<text fg="green">Already subscribed</text> <text fg={theme.success}>Already subscribed</text>
</Show> </Show>
</> </>
)} )}

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

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

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

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

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

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

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

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

4
src/ui/command.tsx
View File

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

1
src/ui/dialog.tsx
View File

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