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

colors

Browse Source
This commit is contained in:
Michael Freno
2026-02-11 11:16:18 -05:00
parent 3d5bc84550
commit 2dfc96321b
3 changed files with 149 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/App.tsx
View File

@@ -15,6 +15,8 @@ import type { Episode } from "@/types/episode";
import { DIRECTION, LayerGraph, TABS } from "./utils/navigation"; import { DIRECTION, LayerGraph, TABS } from "./utils/navigation";
import { useTheme } from "./context/ThemeContext"; import { useTheme } from "./context/ThemeContext";
const DEBUG = import.meta.env.DEBUG;
export interface PageProps { export interface PageProps {
depth: Accessor<number>; depth: Accessor<number>;
} }
@@ -81,6 +83,35 @@ export function App() {
</box> </box>
)} )}
> >
{DEBUG && (
<box flexDirection="row" width="100%" height={1}>
<text fg={theme.primary}>█</text>
<text fg={theme.secondary}>█</text>
<text fg={theme.accent}>█</text>
<text fg={theme.error}>█</text>
<text fg={theme.warning}>█</text>
<text fg={theme.success}>█</text>
<text fg={theme.info}>█</text>
<text fg={theme.text}>█</text>
<text fg={theme.textMuted}>█</text>
<text fg={theme.surface}>█</text>
<text fg={theme.background}>█</text>
<text fg={theme.border}>█</text>
<text fg={theme.borderActive}>█</text>
<text fg={theme.diffAdded}>█</text>
<text fg={theme.diffRemoved}>█</text>
<text fg={theme.diffContext}>█</text>
<text fg={theme.markdownText}>█</text>
<text fg={theme.markdownHeading}>█</text>
<text fg={theme.markdownLink}>█</text>
<text fg={theme.markdownCode}>█</text>
<text fg={theme.syntaxKeyword}>█</text>
<text fg={theme.syntaxString}>█</text>
<text fg={theme.syntaxNumber}>█</text>
<text fg={theme.syntaxFunction}>█</text>
</box>
)}
<box flexDirection="row" width="100%" height={1} />
<box <box
flexDirection="row" flexDirection="row"
width="100%" width="100%"

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

@@ -46,18 +46,20 @@ export function FeedItem(props: FeedItemProps) {
<box <box
flexDirection="row" flexDirection="row"
gap={1} gap={1}
backgroundColor={props.isSelected ? theme.backgroundElement : undefined} backgroundColor={props.isSelected ? theme.backgroundElement : undefined}
paddingLeft={1} paddingLeft={1}
paddingRight={1} paddingRight={1}
> >
<text fg={props.isSelected ? theme.primary : theme.textMuted}> <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 ? theme.text : 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={theme.textMuted}>({episodeCount()})</text>} {props.showEpisodeCount && (
<text fg={theme.textMuted}>({episodeCount()})</text>
)}
</box> </box>
); );
} }
@@ -69,7 +71,7 @@ export function FeedItem(props: FeedItemProps) {
gap={0} gap={0}
border={props.isSelected} border={props.isSelected}
borderColor={props.isSelected ? theme.primary : undefined} borderColor={props.isSelected ? theme.primary : undefined}
backgroundColor={props.isSelected ? theme.backgroundElement : undefined} backgroundColor={props.isSelected ? theme.primary : undefined}
padding={1} padding={1}
> >
{/* Title row */} {/* Title row */}
@@ -80,9 +82,7 @@ export function FeedItem(props: FeedItemProps) {
<text fg={visibilityColor()}>{visibilityIcon()}</text> <text fg={visibilityColor()}>{visibilityIcon()}</text>
<text fg={theme.warning}>{pinnedIndicator()}</text> <text fg={theme.warning}>{pinnedIndicator()}</text>
<text fg={props.isSelected ? theme.text : theme.text}> <text fg={props.isSelected ? theme.text : theme.text}>
<strong> <strong>{props.feed.customName || props.feed.podcast.title}</strong>
{props.feed.customName || props.feed.podcast.title}
</strong>
</text> </text>
</box> </box>
@@ -93,7 +93,9 @@ export function FeedItem(props: FeedItemProps) {
</text> </text>
)} )}
{props.showLastUpdated && ( {props.showLastUpdated && (
<text fg={theme.textMuted}>Updated: {formatDate(props.feed.lastUpdated)}</text> <text fg={theme.textMuted}>
Updated: {formatDate(props.feed.lastUpdated)}
</text>
)} )}
</box> </box>

177
src/pages/MyShows/MyShowsPage.tsx
View File

@@ -5,13 +5,10 @@
*/ */
import { createSignal, For, Show, createMemo, createEffect } from "solid-js"; import { createSignal, For, Show, createMemo, createEffect } from "solid-js";
import { useKeyboard } from "@opentui/solid";
import { useFeedStore } from "@/stores/feed"; import { useFeedStore } from "@/stores/feed";
import { useDownloadStore } from "@/stores/download"; import { useDownloadStore } from "@/stores/download";
import { DownloadStatus } from "@/types/episode"; import { DownloadStatus } from "@/types/episode";
import { format } from "date-fns"; import { format } from "date-fns";
import type { Episode } from "@/types/episode";
import type { Feed } from "@/types/feed";
import { PageProps } from "@/App"; import { PageProps } from "@/App";
import { useTheme } from "@/context/ThemeContext"; import { useTheme } from "@/context/ThemeContext";
@@ -157,19 +154,27 @@ export function MyShowsPage(props: PageProps) {
gap={1} gap={1}
paddingLeft={1} paddingLeft={1}
paddingRight={1} paddingRight={1}
backgroundColor={index() === showIndex() ? theme.primary : undefined} backgroundColor={
index() === showIndex() ? theme.primary : undefined
}
onMouseDown={() => { onMouseDown={() => {
setShowIndex(index()); setShowIndex(index());
setEpisodeIndex(0); setEpisodeIndex(0);
}} }}
> >
<text fg={index() === showIndex() ? theme.primary : theme.muted}> <text
fg={index() === showIndex() ? theme.surface : theme.text}
>
{index() === showIndex() ? ">" : " "} {index() === showIndex() ? ">" : " "}
</text> </text>
<text fg={index() === showIndex() ? theme.text : undefined}> <text
fg={index() === showIndex() ? theme.surface : theme.text}
>
{feed.customName || feed.podcast.title} {feed.customName || feed.podcast.title}
</text> </text>
<text fg={theme.muted}>({feed.episodes.length})</text> <text fg={index() === showIndex() ? undefined : theme.text}>
({feed.episodes.length})
</text>
</box> </box>
)} )}
</For> </For>
@@ -177,82 +182,98 @@ export function MyShowsPage(props: PageProps) {
</Show> </Show>
</box> </box>
<box flexDirection="column" height="100%"> <box flexDirection="column" height="100%">
<Show <Show
when={selectedShow()} when={selectedShow()}
fallback={ fallback={
<box padding={1}> <box padding={1}>
<text fg={theme.muted}>Select a show</text> <text fg={theme.muted}>Select a show</text>
</box> </box>
} }
>
<Show
when={episodes().length > 0}
fallback={
<box padding={1}>
<text fg={theme.muted}>No episodes. Press [r] to refresh.</text>
</box>
}
>
<scrollbox
height="100%"
focused={props.depth() == MyShowsPaneType.EPISODES}
> >
<Show <For each={episodes()}>
when={episodes().length > 0} {(episode, index) => (
fallback={ <box
<box padding={1}> flexDirection="column"
<text fg={theme.muted}>No episodes. Press [r] to refresh.</text> gap={0}
paddingLeft={1}
paddingRight={1}
backgroundColor={
index() === episodeIndex() ? theme.primary : undefined
}
onMouseDown={() => setEpisodeIndex(index())}
>
<box flexDirection="row" gap={1}>
<text
fg={
index() === episodeIndex()
? theme.surface
: theme.text
}
>
{index() === episodeIndex() ? ">" : " "}
</text>
<text
fg={
index() === episodeIndex()
? theme.surface
: theme.text
}
>
{episode.episodeNumber
? `#${episode.episodeNumber} `
: ""}
{episode.title}
</text>
</box>
<box flexDirection="row" gap={2} paddingLeft={2}>
<text
fg={index() === episodeIndex() ? undefined : theme.info}
>
{formatDate(episode.pubDate)}
</text>
<text fg={theme.muted}>
{formatDuration(episode.duration)}
</text>
<Show when={downloadLabel(episode.id)}>
<text fg={downloadColor(episode.id)}>
{downloadLabel(episode.id)}
</text>
</Show>
</box>
</box> </box>
)}
</For>
<Show when={feedStore.isLoadingMore()}>
<box paddingLeft={2} paddingTop={1}>
<text fg={theme.warning}>Loading more episodes...</text>
</box>
</Show>
<Show
when={
!feedStore.isLoadingMore() &&
selectedShow() &&
feedStore.hasMoreEpisodes(selectedShow()!.id)
} }
> >
<scrollbox <box paddingLeft={2} paddingTop={1}>
height="100%" <text fg={theme.muted}>Scroll down for more episodes</text>
focused={props.depth() == MyShowsPaneType.EPISODES} </box>
>
<For each={episodes()}>
{(episode, index) => (
<box
flexDirection="column"
gap={0}
paddingLeft={1}
paddingRight={1}
backgroundColor={
index() === episodeIndex() ? theme.primary : undefined
}
onMouseDown={() => setEpisodeIndex(index())}
>
<box flexDirection="row" gap={1}>
<text fg={index() === episodeIndex() ? theme.primary : theme.muted}>
{index() === episodeIndex() ? ">" : " "}
</text>
<text
fg={index() === episodeIndex() ? theme.text : undefined}
>
{episode.episodeNumber
? `#${episode.episodeNumber} `
: ""}
{episode.title}
</text>
</box>
<box flexDirection="row" gap={2} paddingLeft={2}>
<text fg={theme.muted}>{formatDate(episode.pubDate)}</text>
<text fg={theme.muted}>{formatDuration(episode.duration)}</text>
<Show when={downloadLabel(episode.id)}>
<text fg={downloadColor(episode.id)}>
{downloadLabel(episode.id)}
</text>
</Show>
</box>
</box>
)}
</For>
<Show when={feedStore.isLoadingMore()}>
<box paddingLeft={2} paddingTop={1}>
<text fg={theme.warning}>Loading more episodes...</text>
</box>
</Show>
<Show
when={
!feedStore.isLoadingMore() &&
selectedShow() &&
feedStore.hasMoreEpisodes(selectedShow()!.id)
}
>
<box paddingLeft={2} paddingTop={1}>
<text fg={theme.muted}>Scroll down for more episodes</text>
</box>
</Show>
</scrollbox>
</Show> </Show>
</Show> </scrollbox>
</Show>
</Show>
</box> </box>
</box> </box>
); );