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

still self referencing

Browse Source
This commit is contained in:
Mike Freno
2026-02-05 01:43:10 -05:00
parent ea9ab4d3f9
commit 9fa52d71ca
13 changed files with 263 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/LayerIndicator.tsx
View File

@@ -1,13 +1,13 @@
import { useRenderer } from "@opentui/solid"
import { useTheme } from "../context/ThemeContext"
export function LayerIndicator({ layerDepth }: { layerDepth: number }) {
const renderer = useRenderer()
const { theme } = useTheme()
const getLayerIndicator = () => {
const indicators = []
for (let i = 0; i < 4; i++) {
const isActive = i <= layerDepth
const color = isActive ? "var(--color-accent)" : "var(--color-muted)"
const color = isActive ? theme.accent : theme.textMuted
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="var(--color-muted)" marginRight={1}>Depth:</text>
<text fg={theme.textMuted} marginRight={1}>Depth:</text>
{getLayerIndicator()}
<text fg="var(--color-muted)" marginLeft={1}>
<text fg={theme.textMuted} marginLeft={1}>
{layerDepth}
</text>
</box>

33
src/components/Layout.tsx
View File

@@ -1,41 +1,34 @@
import type { JSX } from "solid-js"
import type { ThemeColors } from "../types/settings"
import type { ColorValue } from "../types/theme-schema"
import { resolveColorReference } from "../utils/theme-css"
import type { RGBA } from "@opentui/core"
import { useTheme } from "../context/ThemeContext"
import { LayerIndicator } from "./LayerIndicator"
type LayerConfig = {
depth: number
background: string
background: RGBA
}
type LayoutProps = {
header?: JSX.Element
footer?: JSX.Element
children?: JSX.Element
theme?: ThemeColors
layerDepth?: number
}
export function Layout(props: LayoutProps) {
const theme = props.theme
const toColor = (value?: ColorValue) => (value ? resolveColorReference(value) : undefined)
const { theme } = useTheme()
// Get layer configuration based on depth
const getLayerConfig = (depth: number): LayerConfig => {
if (!theme?.layerBackgrounds) {
return { depth: 0, background: "transparent" }
}
const backgrounds = theme.layerBackgrounds
const depthMap: Record<number, LayerConfig> = {
0: { depth: 0, background: resolveColorReference(backgrounds.layer0) },
1: { depth: 1, background: resolveColorReference(backgrounds.layer1) },
2: { depth: 2, background: resolveColorReference(backgrounds.layer2) },
3: { depth: 3, background: resolveColorReference(backgrounds.layer3) },
0: { depth: 0, background: backgrounds?.layer0 ?? theme.background },
1: { depth: 1, background: backgrounds?.layer1 ?? theme.backgroundPanel },
2: { depth: 2, background: backgrounds?.layer2 ?? theme.backgroundElement },
3: { depth: 3, background: backgrounds?.layer3 ?? theme.backgroundMenu },
}
return depthMap[depth] || { depth: 0, background: "transparent" }
return depthMap[depth] || { depth: 0, background: theme.background }
}
// Get current layer background
@@ -46,14 +39,14 @@ export function Layout(props: LayoutProps) {
flexDirection="column"
width="100%"
height="100%"
backgroundColor={toColor(theme?.background)}
backgroundColor={theme.background}
>
{/* Header */}
{props.header ? (
<box
style={{
height: 4,
backgroundColor: toColor(theme?.surface),
backgroundColor: theme.surface ?? theme.backgroundPanel,
}}
>
<box style={{ padding: 1 }}>
@@ -83,7 +76,7 @@ export function Layout(props: LayoutProps) {
<box
style={{
height: 2,
backgroundColor: toColor(theme?.surface),
backgroundColor: theme.surface ?? theme.backgroundPanel,
}}
>
<box style={{ padding: 1 }}>
@@ -99,7 +92,7 @@ export function Layout(props: LayoutProps) {
<box
style={{
height: 1,
backgroundColor: toColor(theme?.surface),
backgroundColor: theme.surface ?? theme.backgroundPanel,
}}
>
<box style={{ padding: 1 }}>

28
src/components/LoginScreen.tsx
View File

@@ -5,6 +5,7 @@
import { createSignal } from "solid-js"
import { useAuthStore } from "../stores/auth"
import { useTheme } from "../context/ThemeContext"
import { AUTH_CONFIG } from "../config/auth"
interface LoginScreenProps {
@@ -17,6 +18,7 @@ type FocusField = "email" | "password" | "submit" | "code" | "oauth"
export function LoginScreen(props: LoginScreenProps) {
const auth = useAuthStore()
const { theme } = useTheme()
const [email, setEmail] = createSignal("")
const [password, setPassword] = createSignal("")
const [focusField, setFocusField] = createSignal<FocusField>("email")
@@ -90,7 +92,7 @@ export function LoginScreen(props: LoginScreenProps) {
{/* Email field */}
<box flexDirection="column" gap={0}>
<text fg={focusField() === "email" ? "var(--color-primary)" : undefined}>Email:</text>
<text fg={focusField() === "email" ? theme.primary : undefined}>Email:</text>
<input
value={email()}
onInput={setEmail}
@@ -99,13 +101,13 @@ export function LoginScreen(props: LoginScreenProps) {
width={30}
/>
{emailError() && (
<text fg="var(--color-error)">{emailError()}</text>
<text fg={theme.error}>{emailError()}</text>
)}
</box>
{/* Password field */}
<box flexDirection="column" gap={0}>
<text fg={focusField() === "password" ? "var(--color-primary)" : undefined}>
<text fg={focusField() === "password" ? theme.primary : undefined}>
Password:
</text>
<input
@@ -116,7 +118,7 @@ export function LoginScreen(props: LoginScreenProps) {
width={30}
/>
{passwordError() && (
<text fg="var(--color-error)">{passwordError()}</text>
<text fg={theme.error}>{passwordError()}</text>
)}
</box>
@@ -127,9 +129,9 @@ export function LoginScreen(props: LoginScreenProps) {
<box
border
padding={1}
backgroundColor={focusField() === "submit" ? "var(--color-primary)" : undefined}
backgroundColor={focusField() === "submit" ? theme.primary : undefined}
>
<text fg={focusField() === "submit" ? "var(--color-text)" : undefined}>
<text fg={focusField() === "submit" ? theme.text : undefined}>
{auth.isLoading ? "Signing in..." : "[Enter] Sign In"}
</text>
</box>
@@ -137,21 +139,21 @@ export function LoginScreen(props: LoginScreenProps) {
{/* Auth error message */}
{auth.error && (
<text fg="var(--color-error)">{auth.error.message}</text>
<text fg={theme.error}>{auth.error.message}</text>
)}
<box height={1} />
{/* Alternative auth options */}
<text fg="var(--color-muted)">Or authenticate with:</text>
<text fg={theme.textMuted}>Or authenticate with:</text>
<box flexDirection="row" gap={2}>
<box
border
padding={1}
backgroundColor={focusField() === "code" ? "var(--color-primary)" : undefined}
backgroundColor={focusField() === "code" ? theme.primary : undefined}
>
<text fg={focusField() === "code" ? "var(--color-accent)" : "var(--color-muted)"}>
<text fg={focusField() === "code" ? theme.accent : theme.textMuted}>
[C] Sync Code
</text>
</box>
@@ -159,9 +161,9 @@ export function LoginScreen(props: LoginScreenProps) {
<box
border
padding={1}
backgroundColor={focusField() === "oauth" ? "var(--color-primary)" : undefined}
backgroundColor={focusField() === "oauth" ? theme.primary : undefined}
>
<text fg={focusField() === "oauth" ? "var(--color-accent)" : "var(--color-muted)"}>
<text fg={focusField() === "oauth" ? theme.accent : theme.textMuted}>
[O] OAuth Info
</text>
</box>
@@ -169,7 +171,7 @@ export function LoginScreen(props: LoginScreenProps) {
<box height={1} />
<text fg="var(--color-muted)">Tab to navigate, Enter to select</text>
<text fg={theme.textMuted}>Tab to navigate, Enter to select</text>
</box>
)
}

36
src/components/PreferencesPanel.tsx
View File

@@ -1,6 +1,7 @@
import { createSignal } from "solid-js"
import { useKeyboard } from "@opentui/solid"
import { useAppStore } from "../stores/app"
import { useTheme } from "../context/ThemeContext"
import type { ThemeName } from "../types/settings"
type FocusField = "theme" | "font" | "speed" | "explicit" | "auto"
@@ -16,6 +17,7 @@ const THEME_LABELS: Array<{ value: ThemeName; label: string }> = [
export function PreferencesPanel() {
const appStore = useAppStore()
const { theme } = useTheme()
const [focusField, setFocusField] = createSignal<FocusField>("theme")
const settings = () => appStore.state().settings
@@ -76,55 +78,55 @@ export function PreferencesPanel() {
return (
<box flexDirection="column" gap={1}>
<text fg="var(--color-muted)">Preferences</text>
<text fg={theme.textMuted}>Preferences</text>
<box flexDirection="column" gap={1}>
<box flexDirection="row" gap={1} alignItems="center">
<text fg={focusField() === "theme" ? "var(--color-primary)" : "var(--color-muted)"}>Theme:</text>
<text fg={focusField() === "theme" ? theme.primary : theme.textMuted}>Theme:</text>
<box border padding={0}>
<text fg="var(--color-text)">{THEME_LABELS.find((t) => t.value === settings().theme)?.label}</text>
<text fg={theme.text}>{THEME_LABELS.find((t) => t.value === settings().theme)?.label}</text>
</box>
<text fg="var(--color-muted)">[Left/Right]</text>
<text fg={theme.textMuted}>[Left/Right]</text>
</box>
<box flexDirection="row" gap={1} alignItems="center">
<text fg={focusField() === "font" ? "var(--color-primary)" : "var(--color-muted)"}>Font Size:</text>
<text fg={focusField() === "font" ? theme.primary : theme.textMuted}>Font Size:</text>
<box border padding={0}>
<text fg="var(--color-text)">{settings().fontSize}px</text>
<text fg={theme.text}>{settings().fontSize}px</text>
</box>
<text fg="var(--color-muted)">[Left/Right]</text>
<text fg={theme.textMuted}>[Left/Right]</text>
</box>
<box flexDirection="row" gap={1} alignItems="center">
<text fg={focusField() === "speed" ? "var(--color-primary)" : "var(--color-muted)"}>Playback:</text>
<text fg={focusField() === "speed" ? theme.primary : theme.textMuted}>Playback:</text>
<box border padding={0}>
<text fg="var(--color-text)">{settings().playbackSpeed}x</text>
<text fg={theme.text}>{settings().playbackSpeed}x</text>
</box>
<text fg="var(--color-muted)">[Left/Right]</text>
<text fg={theme.textMuted}>[Left/Right]</text>
</box>
<box flexDirection="row" gap={1} alignItems="center">
<text fg={focusField() === "explicit" ? "var(--color-primary)" : "var(--color-muted)"}>Show Explicit:</text>
<text fg={focusField() === "explicit" ? theme.primary : theme.textMuted}>Show Explicit:</text>
<box border padding={0}>
<text fg={preferences().showExplicit ? "var(--color-success)" : "var(--color-muted)"}>
<text fg={preferences().showExplicit ? theme.success : theme.textMuted}>
{preferences().showExplicit ? "On" : "Off"}
</text>
</box>
<text fg="var(--color-muted)">[Space]</text>
<text fg={theme.textMuted}>[Space]</text>
</box>
<box flexDirection="row" gap={1} alignItems="center">
<text fg={focusField() === "auto" ? "var(--color-primary)" : "var(--color-muted)"}>Auto Download:</text>
<text fg={focusField() === "auto" ? theme.primary : theme.textMuted}>Auto Download:</text>
<box border padding={0}>
<text fg={preferences().autoDownload ? "var(--color-success)" : "var(--color-muted)"}>
<text fg={preferences().autoDownload ? theme.success : theme.textMuted}>
{preferences().autoDownload ? "On" : "Off"}
</text>
</box>
<text fg="var(--color-muted)">[Space]</text>
<text fg={theme.textMuted}>[Space]</text>
</box>
</box>
<text fg="var(--color-muted)">Tab to move focus, Left/Right to adjust</text>
<text fg={theme.textMuted}>Tab to move focus, Left/Right to adjust</text>
</box>
)
}

18
src/components/SettingsScreen.tsx
View File

@@ -1,6 +1,7 @@
import { createSignal } from "solid-js"
import { useKeyboard } from "@opentui/solid"
import { SourceManager } from "./SourceManager"
import { useTheme } from "../context/ThemeContext"
import { PreferencesPanel } from "./PreferencesPanel"
import { SyncPanel } from "./SyncPanel"
@@ -21,6 +22,7 @@ const SECTIONS: Array<{ id: SectionId; label: string }> = [
]
export function SettingsScreen(props: SettingsScreenProps) {
const { theme } = useTheme()
const [activeSection, setActiveSection] = createSignal<SectionId>("sync")
useKeyboard((key) => {
@@ -50,7 +52,7 @@ export function SettingsScreen(props: SettingsScreenProps) {
<text>
<strong>Settings</strong>
</text>
<text fg="var(--color-muted)">[Tab] Switch section | 1-4 jump | Esc up</text>
<text fg={theme.textMuted}>[Tab] Switch section | 1-4 jump | Esc up</text>
</box>
<box flexDirection="row" gap={1}>
@@ -58,10 +60,10 @@ export function SettingsScreen(props: SettingsScreenProps) {
<box
border
padding={0}
backgroundColor={activeSection() === section.id ? "var(--color-primary)" : undefined}
backgroundColor={activeSection() === section.id ? theme.primary : undefined}
onMouseDown={() => setActiveSection(section.id)}
>
<text fg={activeSection() === section.id ? "var(--color-text)" : "var(--color-muted)"}>
<text fg={activeSection() === section.id ? theme.text : theme.textMuted}>
[{index + 1}] {section.label}
</text>
</box>
@@ -74,21 +76,21 @@ export function SettingsScreen(props: SettingsScreenProps) {
{activeSection() === "preferences" && <PreferencesPanel />}
{activeSection() === "account" && (
<box flexDirection="column" gap={1}>
<text fg="var(--color-muted)">Account</text>
<text fg={theme.textMuted}>Account</text>
<box flexDirection="row" gap={2} alignItems="center">
<text fg="var(--color-muted)">Status:</text>
<text fg={props.accountStatus === "signed-in" ? "var(--color-success)" : "var(--color-warning)"}>
<text fg={theme.textMuted}>Status:</text>
<text fg={props.accountStatus === "signed-in" ? theme.success : theme.warning}>
{props.accountLabel}
</text>
</box>
<box border padding={0} onMouseDown={() => props.onOpenAccount?.()}>
<text fg="var(--color-primary)">[A] Manage Account</text>
<text fg={theme.primary}>[A] Manage Account</text>
</box>
</box>
)}
</box>
<text fg="var(--color-muted)">Enter to dive | Esc up</text>
<text fg={theme.textMuted}>Enter to dive | Esc up</text>
</box>
)
}

50
src/components/SourceManager.tsx
View File

@@ -5,6 +5,7 @@
import { createSignal, For } from "solid-js"
import { useFeedStore } from "../stores/feed"
import { useTheme } from "../context/ThemeContext"
import { SourceType } from "../types/source"
import type { PodcastSource } from "../types/source"
@@ -17,6 +18,7 @@ type FocusArea = "list" | "add" | "url" | "country" | "explicit" | "language"
export function SourceManager(props: SourceManagerProps) {
const feedStore = useFeedStore()
const { theme } = useTheme()
const [selectedIndex, setSelectedIndex] = createSignal(0)
const [focusArea, setFocusArea] = createSignal<FocusArea>("list")
const [newSourceUrl, setNewSourceUrl] = createSignal("")
@@ -155,15 +157,15 @@ export function SourceManager(props: SourceManagerProps) {
<strong>Podcast Sources</strong>
</text>
<box border padding={0} onMouseDown={props.onClose}>
<text fg="var(--color-primary)">[Esc] Close</text>
<text fg={theme.primary}>[Esc] Close</text>
</box>
</box>
<text fg="var(--color-muted)">Manage where to search for podcasts</text>
<text fg={theme.textMuted}>Manage where to search for podcasts</text>
{/* Source list */}
<box border padding={1} flexDirection="column" gap={1}>
<text fg={focusArea() === "list" ? "var(--color-primary)" : "var(--color-muted)"}>Sources:</text>
<text fg={focusArea() === "list" ? theme.primary : theme.textMuted}>Sources:</text>
<scrollbox height={6}>
<For each={sources()}>
{(source, index) => (
@@ -173,7 +175,7 @@ export function SourceManager(props: SourceManagerProps) {
padding={0}
backgroundColor={
focusArea() === "list" && index() === selectedIndex()
? "var(--color-primary)"
? theme.primary
: undefined
}
onMouseDown={() => {
@@ -184,21 +186,21 @@ export function SourceManager(props: SourceManagerProps) {
>
<text fg={
focusArea() === "list" && index() === selectedIndex()
? "var(--color-primary)"
: "var(--color-muted)"
? theme.primary
: theme.textMuted
}>
{focusArea() === "list" && index() === selectedIndex()
? ">"
: " "}
</text>
<text fg={source.enabled ? "var(--color-success)" : "var(--color-error)"}>
<text fg={source.enabled ? theme.success : theme.error}>
{source.enabled ? "[x]" : "[ ]"}
</text>
<text fg="var(--color-accent)">{getSourceIcon(source)}</text>
<text fg={theme.accent}>{getSourceIcon(source)}</text>
<text
fg={
focusArea() === "list" && index() === selectedIndex()
? "var(--color-text)"
? theme.text
: undefined
}
>
@@ -208,54 +210,54 @@ export function SourceManager(props: SourceManagerProps) {
)}
</For>
</scrollbox>
<text fg="var(--color-muted)">Space/Enter to toggle, d to delete, a to add</text>
<text fg={theme.textMuted}>Space/Enter to toggle, d to delete, a to add</text>
{/* API settings */}
<box flexDirection="column" gap={1}>
<text fg={isApiSource() ? "var(--color-muted)" : "var(--color-accent)"}>
<text fg={isApiSource() ? theme.textMuted : theme.accent}>
{isApiSource() ? "API Settings" : "API Settings (select an API source)"}
</text>
<box flexDirection="row" gap={2}>
<box
border
padding={0}
backgroundColor={focusArea() === "country" ? "var(--color-primary)" : undefined}
backgroundColor={focusArea() === "country" ? theme.primary : undefined}
>
<text fg={focusArea() === "country" ? "var(--color-primary)" : "var(--color-muted)"}>
<text fg={focusArea() === "country" ? theme.primary : theme.textMuted}>
Country: {sourceCountry()}
</text>
</box>
<box
border
padding={0}
backgroundColor={focusArea() === "language" ? "var(--color-primary)" : undefined}
backgroundColor={focusArea() === "language" ? theme.primary : undefined}
>
<text fg={focusArea() === "language" ? "var(--color-primary)" : "var(--color-muted)"}>
<text fg={focusArea() === "language" ? theme.primary : theme.textMuted}>
Language: {sourceLanguage() === "ja_jp" ? "Japanese" : "English"}
</text>
</box>
<box
border
padding={0}
backgroundColor={focusArea() === "explicit" ? "var(--color-primary)" : undefined}
backgroundColor={focusArea() === "explicit" ? theme.primary : undefined}
>
<text fg={focusArea() === "explicit" ? "var(--color-primary)" : "var(--color-muted)"}>
<text fg={focusArea() === "explicit" ? theme.primary : theme.textMuted}>
Explicit: {sourceExplicit() ? "Yes" : "No"}
</text>
</box>
</box>
<text fg="var(--color-muted)">Enter/Space to toggle focused setting</text>
<text fg={theme.textMuted}>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" ? "var(--color-primary)" : "var(--color-muted)"}>
<text fg={focusArea() === "add" || focusArea() === "url" ? theme.primary : theme.textMuted}>
Add New Source:
</text>
<box flexDirection="row" gap={1}>
<text fg="var(--color-muted)">Name:</text>
<text fg={theme.textMuted}>Name:</text>
<input
value={newSourceName()}
onInput={setNewSourceName}
@@ -266,7 +268,7 @@ export function SourceManager(props: SourceManagerProps) {
</box>
<box flexDirection="row" gap={1}>
<text fg="var(--color-muted)">URL:</text>
<text fg={theme.textMuted}>URL:</text>
<input
value={newSourceUrl()}
onInput={(v) => {
@@ -285,16 +287,16 @@ export function SourceManager(props: SourceManagerProps) {
width={15}
onMouseDown={handleAddSource}
>
<text fg="var(--color-success)">[+] Add Source</text>
<text fg={theme.success}>[+] Add Source</text>
</box>
</box>
{/* Error message */}
{error() && (
<text fg="var(--color-error)">{error()}</text>
<text fg={theme.error}>{error()}</text>
)}
<text fg="var(--color-muted)">Tab to switch sections, Esc to close</text>
<text fg={theme.textMuted}>Tab to switch sections, Esc to close</text>
</box>
)
}

5
src/components/Tab.tsx
View File

@@ -1,3 +1,5 @@
import { useTheme } from "../context/ThemeContext"
export type TabId = "discover" | "feeds" | "search" | "player" | "settings"
export type TabDefinition = {
@@ -20,11 +22,12 @@ type TabProps = {
}
export function Tab(props: TabProps) {
const { theme } = useTheme()
return (
<box
border
onMouseDown={() => props.onSelect(props.tab.id)}
style={{ padding: 1, backgroundColor: props.active ? "var(--color-primary)" : "transparent" }}
style={{ padding: 1, backgroundColor: props.active ? theme.primary : "transparent" }}
>
<text>
{props.active ? "[" : " "}