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

pause

Browse Source
This commit is contained in:
Mike Freno
2026-02-04 22:48:54 -05:00
parent 39a4f88496
commit c26150221a
12 changed files with 321 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/LayerIndicator.tsx
View File

@@ -7,7 +7,7 @@ export function LayerIndicator({ layerDepth }: { layerDepth: number }) {
const indicators = []
for (let i = 0; i < 4; i++) {
const isActive = i <= layerDepth
const color = isActive ? "#f6c177" : "#4c566a"
const color = isActive ? "var(--color-accent)" : "var(--color-muted)"
const size = isActive ? "●" : "○"
indicators.push(
<text fg={color} marginRight={1}>
@@ -20,9 +20,9 @@ export function LayerIndicator({ layerDepth }: { layerDepth: number }) {
return (
<box flexDirection="row" alignItems="center">
<text fg="#7d8590" marginRight={1}>Depth:</text>
<text fg="var(--color-muted)" marginRight={1}>Depth:</text>
{getLayerIndicator()}
<text fg="#7d8590" marginLeft={1}>
<text fg="var(--color-muted)" marginLeft={1}>
{layerDepth}
</text>
</box>

26
src/components/LoginScreen.tsx
View File

@@ -90,7 +90,7 @@ export function LoginScreen(props: LoginScreenProps) {
{/* Email field */}
<box flexDirection="column" gap={0}>
<text fg={focusField() === "email" ? "cyan" : undefined}>Email:</text>
<text fg={focusField() === "email" ? "var(--color-primary)" : undefined}>Email:</text>
<input
value={email()}
onInput={setEmail}
@@ -99,13 +99,13 @@ export function LoginScreen(props: LoginScreenProps) {
width={30}
/>
{emailError() && (
<text fg="red">{emailError()}</text>
<text fg="var(--color-error)">{emailError()}</text>
)}
</box>
{/* Password field */}
<box flexDirection="column" gap={0}>
<text fg={focusField() === "password" ? "cyan" : undefined}>
<text fg={focusField() === "password" ? "var(--color-primary)" : undefined}>
Password:
</text>
<input
@@ -116,7 +116,7 @@ export function LoginScreen(props: LoginScreenProps) {
width={30}
/>
{passwordError() && (
<text fg="red">{passwordError()}</text>
<text fg="var(--color-error)">{passwordError()}</text>
)}
</box>
@@ -127,9 +127,9 @@ export function LoginScreen(props: LoginScreenProps) {
<box
border
padding={1}
backgroundColor={focusField() === "submit" ? "#333" : undefined}
backgroundColor={focusField() === "submit" ? "var(--color-primary)" : undefined}
>
<text fg={focusField() === "submit" ? "cyan" : undefined}>
<text fg={focusField() === "submit" ? "var(--color-text)" : undefined}>
{auth.isLoading ? "Signing in..." : "[Enter] Sign In"}
</text>
</box>
@@ -137,21 +137,21 @@ export function LoginScreen(props: LoginScreenProps) {
{/* Auth error message */}
{auth.error && (
<text fg="red">{auth.error.message}</text>
<text fg="var(--color-error)">{auth.error.message}</text>
)}
<box height={1} />
{/* Alternative auth options */}
<text fg="gray">Or authenticate with:</text>
<text fg="var(--color-muted)">Or authenticate with:</text>
<box flexDirection="row" gap={2}>
<box
border
padding={1}
backgroundColor={focusField() === "code" ? "#333" : undefined}
backgroundColor={focusField() === "code" ? "var(--color-primary)" : undefined}
>
<text fg={focusField() === "code" ? "yellow" : "gray"}>
<text fg={focusField() === "code" ? "var(--color-accent)" : "var(--color-muted)"}>
[C] Sync Code
</text>
</box>
@@ -159,9 +159,9 @@ export function LoginScreen(props: LoginScreenProps) {
<box
border
padding={1}
backgroundColor={focusField() === "oauth" ? "#333" : undefined}
backgroundColor={focusField() === "oauth" ? "var(--color-primary)" : undefined}
>
<text fg={focusField() === "oauth" ? "yellow" : "gray"}>
<text fg={focusField() === "oauth" ? "var(--color-accent)" : "var(--color-muted)"}>
[O] OAuth Info
</text>
</box>
@@ -169,7 +169,7 @@ export function LoginScreen(props: LoginScreenProps) {
<box height={1} />
<text fg="gray">Tab to navigate, Enter to select</text>
<text fg="var(--color-muted)">Tab to navigate, Enter to select</text>
</box>
)
}

34
src/components/PreferencesPanel.tsx
View File

@@ -76,55 +76,55 @@ export function PreferencesPanel() {
return (
<box flexDirection="column" gap={1}>
<text fg="gray">Preferences</text>
<text fg="var(--color-muted)">Preferences</text>
<box flexDirection="column" gap={1}>
<box flexDirection="row" gap={1} alignItems="center">
<text fg={focusField() === "theme" ? "cyan" : "gray"}>Theme:</text>
<text fg={focusField() === "theme" ? "var(--color-primary)" : "var(--color-muted)"}>Theme:</text>
<box border padding={0}>
<text fg="white">{THEME_LABELS.find((t) => t.value === settings().theme)?.label}</text>
<text fg="var(--color-text)">{THEME_LABELS.find((t) => t.value === settings().theme)?.label}</text>
</box>
<text fg="gray">[Left/Right]</text>
<text fg="var(--color-muted)">[Left/Right]</text>
</box>
<box flexDirection="row" gap={1} alignItems="center">
<text fg={focusField() === "font" ? "cyan" : "gray"}>Font Size:</text>
<text fg={focusField() === "font" ? "var(--color-primary)" : "var(--color-muted)"}>Font Size:</text>
<box border padding={0}>
<text fg="white">{settings().fontSize}px</text>
<text fg="var(--color-text)">{settings().fontSize}px</text>
</box>
<text fg="gray">[Left/Right]</text>
<text fg="var(--color-muted)">[Left/Right]</text>
</box>
<box flexDirection="row" gap={1} alignItems="center">
<text fg={focusField() === "speed" ? "cyan" : "gray"}>Playback:</text>
<text fg={focusField() === "speed" ? "var(--color-primary)" : "var(--color-muted)"}>Playback:</text>
<box border padding={0}>
<text fg="white">{settings().playbackSpeed}x</text>
<text fg="var(--color-text)">{settings().playbackSpeed}x</text>
</box>
<text fg="gray">[Left/Right]</text>
<text fg="var(--color-muted)">[Left/Right]</text>
</box>
<box flexDirection="row" gap={1} alignItems="center">
<text fg={focusField() === "explicit" ? "cyan" : "gray"}>Show Explicit:</text>
<text fg={focusField() === "explicit" ? "var(--color-primary)" : "var(--color-muted)"}>Show Explicit:</text>
<box border padding={0}>
<text fg={preferences().showExplicit ? "green" : "gray"}>
<text fg={preferences().showExplicit ? "var(--color-success)" : "var(--color-muted)"}>
{preferences().showExplicit ? "On" : "Off"}
</text>
</box>
<text fg="gray">[Space]</text>
<text fg="var(--color-muted)">[Space]</text>
</box>
<box flexDirection="row" gap={1} alignItems="center">
<text fg={focusField() === "auto" ? "cyan" : "gray"}>Auto Download:</text>
<text fg={focusField() === "auto" ? "var(--color-primary)" : "var(--color-muted)"}>Auto Download:</text>
<box border padding={0}>
<text fg={preferences().autoDownload ? "green" : "gray"}>
<text fg={preferences().autoDownload ? "var(--color-success)" : "var(--color-muted)"}>
{preferences().autoDownload ? "On" : "Off"}
</text>
</box>
<text fg="gray">[Space]</text>
<text fg="var(--color-muted)">[Space]</text>
</box>
</box>
<text fg="gray">Tab to move focus, Left/Right to adjust</text>
<text fg="var(--color-muted)">Tab to move focus, Left/Right to adjust</text>
</box>
)
}

16
src/components/SettingsScreen.tsx
View File

@@ -50,7 +50,7 @@ export function SettingsScreen(props: SettingsScreenProps) {
<text>
<strong>Settings</strong>
</text>
<text fg="gray">[Tab] Switch section | 1-4 jump | Esc up</text>
<text fg="var(--color-muted)">[Tab] Switch section | 1-4 jump | Esc up</text>
</box>
<box flexDirection="row" gap={1}>
@@ -58,10 +58,10 @@ export function SettingsScreen(props: SettingsScreenProps) {
<box
border
padding={0}
backgroundColor={activeSection() === section.id ? "#2b303b" : undefined}
backgroundColor={activeSection() === section.id ? "var(--color-primary)" : undefined}
onMouseDown={() => setActiveSection(section.id)}
>
<text fg={activeSection() === section.id ? "cyan" : "gray"}>
<text fg={activeSection() === section.id ? "var(--color-text)" : "var(--color-muted)"}>
[{index + 1}] {section.label}
</text>
</box>
@@ -74,21 +74,21 @@ export function SettingsScreen(props: SettingsScreenProps) {
{activeSection() === "preferences" && <PreferencesPanel />}
{activeSection() === "account" && (
<box flexDirection="column" gap={1}>
<text fg="gray">Account</text>
<text fg="var(--color-muted)">Account</text>
<box flexDirection="row" gap={2} alignItems="center">
<text fg="gray">Status:</text>
<text fg={props.accountStatus === "signed-in" ? "green" : "yellow"}>
<text fg="var(--color-muted)">Status:</text>
<text fg={props.accountStatus === "signed-in" ? "var(--color-success)" : "var(--color-warning)"}>
{props.accountLabel}
</text>
</box>
<box border padding={0} onMouseDown={() => props.onOpenAccount?.()}>
<text fg="cyan">[A] Manage Account</text>
<text fg="var(--color-primary)">[A] Manage Account</text>
</box>
</box>
)}
</box>
<text fg="gray">Enter to dive | Esc up</text>
<text fg="var(--color-muted)">Enter to dive | Esc up</text>
</box>
)
}

50
src/components/SourceManager.tsx
View File

@@ -155,15 +155,15 @@ export function SourceManager(props: SourceManagerProps) {
<strong>Podcast Sources</strong>
</text>
<box border padding={0} onMouseDown={props.onClose}>
<text fg="cyan">[Esc] Close</text>
<text fg="var(--color-primary)">[Esc] Close</text>
</box>
</box>
<text fg="gray">Manage where to search for podcasts</text>
<text fg="var(--color-muted)">Manage where to search for podcasts</text>
{/* Source list */}
<box border padding={1} flexDirection="column" gap={1}>
<text fg={focusArea() === "list" ? "cyan" : "gray"}>Sources:</text>
<text fg={focusArea() === "list" ? "var(--color-primary)" : "var(--color-muted)"}>Sources:</text>
<scrollbox height={6}>
<For each={sources()}>
{(source, index) => (
@@ -173,7 +173,7 @@ export function SourceManager(props: SourceManagerProps) {
padding={0}
backgroundColor={
focusArea() === "list" && index() === selectedIndex()
? "#333"
? "var(--color-primary)"
: undefined
}
onMouseDown={() => {
@@ -184,21 +184,21 @@ export function SourceManager(props: SourceManagerProps) {
>
<text fg={
focusArea() === "list" && index() === selectedIndex()
? "cyan"
: "gray"
? "var(--color-primary)"
: "var(--color-muted)"
}>
{focusArea() === "list" && index() === selectedIndex()
? ">"
: " "}
</text>
<text fg={source.enabled ? "green" : "red"}>
<text fg={source.enabled ? "var(--color-success)" : "var(--color-error)"}>
{source.enabled ? "[x]" : "[ ]"}
</text>
<text fg="yellow">{getSourceIcon(source)}</text>
<text fg="var(--color-accent)">{getSourceIcon(source)}</text>
<text
fg={
focusArea() === "list" && index() === selectedIndex()
? "white"
? "var(--color-text)"
: undefined
}
>
@@ -208,54 +208,54 @@ export function SourceManager(props: SourceManagerProps) {
)}
</For>
</scrollbox>
<text fg="gray">Space/Enter to toggle, d to delete, a to add</text>
<text fg="var(--color-muted)">Space/Enter to toggle, d to delete, a to add</text>
{/* API settings */}
<box flexDirection="column" gap={1}>
<text fg={isApiSource() ? "gray" : "yellow"}>
<text fg={isApiSource() ? "var(--color-muted)" : "var(--color-accent)"}>
{isApiSource() ? "API Settings" : "API Settings (select an API source)"}
</text>
<box flexDirection="row" gap={2}>
<box
border
padding={0}
backgroundColor={focusArea() === "country" ? "#333" : undefined}
backgroundColor={focusArea() === "country" ? "var(--color-primary)" : undefined}
>
<text fg={focusArea() === "country" ? "cyan" : "gray"}>
<text fg={focusArea() === "country" ? "var(--color-primary)" : "var(--color-muted)"}>
Country: {sourceCountry()}
</text>
</box>
<box
border
padding={0}
backgroundColor={focusArea() === "language" ? "#333" : undefined}
backgroundColor={focusArea() === "language" ? "var(--color-primary)" : undefined}
>
<text fg={focusArea() === "language" ? "cyan" : "gray"}>
<text fg={focusArea() === "language" ? "var(--color-primary)" : "var(--color-muted)"}>
Language: {sourceLanguage() === "ja_jp" ? "Japanese" : "English"}
</text>
</box>
<box
border
padding={0}
backgroundColor={focusArea() === "explicit" ? "#333" : undefined}
backgroundColor={focusArea() === "explicit" ? "var(--color-primary)" : undefined}
>
<text fg={focusArea() === "explicit" ? "cyan" : "gray"}>
<text fg={focusArea() === "explicit" ? "var(--color-primary)" : "var(--color-muted)"}>
Explicit: {sourceExplicit() ? "Yes" : "No"}
</text>
</box>
</box>
<text fg="gray">Enter/Space to toggle focused setting</text>
<text fg="var(--color-muted)">Enter/Space to toggle focused setting</text>
</box>
</box>
{/* Add new source form */}
<box border padding={1} flexDirection="column" gap={1}>
<text fg={focusArea() === "add" || focusArea() === "url" ? "cyan" : "gray"}>
<text fg={focusArea() === "add" || focusArea() === "url" ? "var(--color-primary)" : "var(--color-muted)"}>
Add New Source:
</text>
<box flexDirection="row" gap={1}>
<text fg="gray">Name:</text>
<text fg="var(--color-muted)">Name:</text>
<input
value={newSourceName()}
onInput={setNewSourceName}
@@ -266,7 +266,7 @@ export function SourceManager(props: SourceManagerProps) {
</box>
<box flexDirection="row" gap={1}>
<text fg="gray">URL:</text>
<text fg="var(--color-muted)">URL:</text>
<input
value={newSourceUrl()}
onInput={(v) => {
@@ -285,16 +285,16 @@ export function SourceManager(props: SourceManagerProps) {
width={15}
onMouseDown={handleAddSource}
>
<text fg="green">[+] Add Source</text>
<text fg="var(--color-success)">[+] Add Source</text>
</box>
</box>
{/* Error message */}
{error() && (
<text fg="red">{error()}</text>
<text fg="var(--color-error)">{error()}</text>
)}
<text fg="gray">Tab to switch sections, Esc to close</text>
<text fg="var(--color-muted)">Tab to switch sections, Esc to close</text>
</box>
)
}

2
src/components/Tab.tsx
View File

@@ -24,7 +24,7 @@ export function Tab(props: TabProps) {
<box
border
onMouseDown={() => props.onSelect(props.tab.id)}
style={{ padding: 1, backgroundColor: props.active ? "#333333" : "transparent" }}
style={{ padding: 1, backgroundColor: props.active ? "var(--color-primary)" : "transparent" }}
>
<text>
{props.active ? "[" : " "}