more theme color integration

2026-02-10 15:10:07 -05:00
parent a405474f11
commit f707594d0c
18 changed files with 247 additions and 217 deletions
--- a/src/pages/Feed/FeedDetail.tsx
+++ b/src/pages/Feed/FeedDetail.tsx
@@ -8,6 +8,7 @@ import { useKeyboard } from "@opentui/solid";
 import type { Feed } from "@/types/feed";
 import type { Episode } from "@/types/episode";
 import { format } from "date-fns";
+import { useTheme } from "@/context/ThemeContext";

 interface FeedDetailProps {
  feed: Feed;
@@ -17,6 +18,7 @@ interface FeedDetailProps {
 }

 export function FeedDetail(props: FeedDetailProps) {
+  const { theme } = useTheme();
  const [selectedIndex, setSelectedIndex] = createSignal(0);
  const [showInfo, setShowInfo] = createSignal(true);

@@ -82,45 +84,45 @@ export function FeedDetail(props: FeedDetailProps) {
    <box flexDirection="column" gap={1}>
      {/* Header with back button */}
      <box flexDirection="row" justifyContent="space-between">
-        <box border padding={0} onMouseDown={props.onBack}>
-          <text fg="cyan">[Esc] Back</text>
+        <box border padding={0} onMouseDown={props.onBack} borderColor={theme.border}>
+            <text fg={theme.primary}>[Esc] Back</text>
        </box>
-        <box border padding={0} onMouseDown={() => setShowInfo((v) => !v)}>
-          <text fg="cyan">[i] {showInfo() ? "Hide" : "Show"} Info</text>
+        <box border padding={0} onMouseDown={() => setShowInfo((v) => !v)} borderColor={theme.border}>
+            <text fg={theme.primary}>[i] {showInfo() ? "Hide" : "Show"} Info</text>
        </box>
      </box>

      {/* Podcast info section */}
      <Show when={showInfo()}>
-        <box border padding={1} flexDirection="column" gap={0}>
-          <text>
+        <box border padding={1} flexDirection="column" gap={0} borderColor={theme.border}>
+          <text fg={theme.text}>
            <strong>{props.feed.customName || props.feed.podcast.title}</strong>
          </text>
          {props.feed.podcast.author && (
            <box flexDirection="row" gap={1}>
-              <text fg="gray">by</text>
-              <text fg="cyan">{props.feed.podcast.author}</text>
+                <text fg={theme.textMuted}>by</text>
+                <text fg={theme.primary}>{props.feed.podcast.author}</text>
            </box>
          )}
          <box height={1} />
-          <text fg="gray">
+          <text fg={theme.textMuted}>
            {props.feed.podcast.description?.slice(0, 200)}
            {(props.feed.podcast.description?.length || 0) > 200 ? "..." : ""}
          </text>
          <box height={1} />
          <box flexDirection="row" gap={2}>
            <box flexDirection="row" gap={1}>
-              <text fg="gray">Episodes:</text>
-              <text fg="white">{props.feed.episodes.length}</text>
+              <text fg={theme.textMuted}>Episodes:</text>
+              <text fg={theme.text}>{props.feed.episodes.length}</text>
            </box>
            <box flexDirection="row" gap={1}>
-              <text fg="gray">Updated:</text>
-              <text fg="white">{formatDate(props.feed.lastUpdated)}</text>
+              <text fg={theme.textMuted}>Updated:</text>
+              <text fg={theme.text}>{formatDate(props.feed.lastUpdated)}</text>
            </box>
-            <text fg={props.feed.visibility === "public" ? "green" : "yellow"}>
+            <text fg={props.feed.visibility === "public" ? theme.success : theme.warning}>
              {props.feed.visibility === "public" ? "[Public]" : "[Private]"}
            </text>
-            {props.feed.isPinned && <text fg="yellow">[Pinned]</text>}
+            {props.feed.isPinned && <text fg={theme.warning}>[Pinned]</text>}
          </box>
        </box>
      </Show>
@@ -141,7 +143,7 @@ export function FeedDetail(props: FeedDetailProps) {
              flexDirection="column"
              gap={0}
              padding={1}
-              backgroundColor={index() === selectedIndex() ? "#333" : undefined}
+                    backgroundColor={index() === selectedIndex() ? theme.backgroundElement : undefined}
              onMouseDown={() => {
                setSelectedIndex(index());
                if (props.onPlayEpisode) {
@@ -150,17 +152,17 @@ export function FeedDetail(props: FeedDetailProps) {
              }}
            >
              <box flexDirection="row" gap={1}>
-                <text fg={index() === selectedIndex() ? "cyan" : "gray"}>
-                  {index() === selectedIndex() ? ">" : " "}
-                </text>
-                <text fg={index() === selectedIndex() ? "white" : undefined}>
-                  {episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""}
-                  {episode.title}
-                </text>
+                  <text fg={index() === selectedIndex() ? theme.primary : theme.textMuted}>
+                    {index() === selectedIndex() ? ">" : " "}
+                  </text>
+                  <text fg={index() === selectedIndex() ? theme.text : undefined}>
+                    {episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""}
+                    {episode.title}
+                  </text>
              </box>
              <box flexDirection="row" gap={2} paddingLeft={2}>
-                <text fg="gray">{formatDate(episode.pubDate)}</text>
-                <text fg="gray">{formatDuration(episode.duration)}</text>
+                  <text fg={theme.textMuted}>{formatDate(episode.pubDate)}</text>
+                  <text fg={theme.textMuted}>{formatDuration(episode.duration)}</text>
              </box>
            </box>
          )}
@@ -168,7 +170,7 @@ export function FeedDetail(props: FeedDetailProps) {
      </scrollbox>

      {/* Help text */}
-      <text fg="gray">
+      <text fg={theme.textMuted}>
        j/k to navigate, Enter to play, i to toggle info, Esc to go back
      </text>
    </box>
--- a/src/pages/Feed/FeedFilter.tsx
+++ b/src/pages/Feed/FeedFilter.tsx
@@ -6,6 +6,7 @@
 import { createSignal } from "solid-js";
 import { FeedVisibility, FeedSortField } from "@/types/feed";
 import type { FeedFilter } from "@/types/feed";
+import { useTheme } from "@/context/ThemeContext";

 interface FeedFilterProps {
  filter: FeedFilter;
@@ -16,6 +17,7 @@ interface FeedFilterProps {
 type FilterField = "visibility" | "sort" | "pinned" | "search";

 export function FeedFilterComponent(props: FeedFilterProps) {
+  const { theme } = useTheme();
  const [focusField, setFocusField] = createSignal<FilterField>("visibility");
  const [searchValue, setSearchValue] = createSignal(
    props.filter.searchQuery || "",
@@ -89,9 +91,9 @@ export function FeedFilterComponent(props: FeedFilterProps) {

  const visibilityColor = () => {
    const vis = props.filter.visibility;
-    if (vis === "public") return "green";
-    if (vis === "private") return "yellow";
-    return "white";
+    if (vis === "public") return theme.success;
+    if (vis === "private") return theme.warning;
+    return theme.text;
  };

  const sortLabel = () => {
@@ -110,8 +112,8 @@ export function FeedFilterComponent(props: FeedFilterProps) {
  };

  return (
-    <box flexDirection="column" border padding={1} gap={1}>
-      <text>
+    <box flexDirection="column" border padding={1} gap={1} borderColor={theme.border}>
+      <text fg={theme.text}>
        <strong>Filter Feeds</strong>
      </text>

@@ -120,10 +122,11 @@ export function FeedFilterComponent(props: FeedFilterProps) {
        <box
          border
          padding={0}
-          backgroundColor={focusField() === "visibility" ? "#333" : undefined}
+            backgroundColor={focusField() === "visibility" ? theme.backgroundElement : undefined}
+            borderColor={theme.border}
        >
          <box flexDirection="row" gap={1}>
-            <text fg={focusField() === "visibility" ? "cyan" : "gray"}>
+            <text fg={focusField() === "visibility" ? theme.primary : theme.textMuted}>
              Show:
            </text>
            <text fg={visibilityColor()}>{visibilityLabel()}</text>
@@ -134,11 +137,11 @@ export function FeedFilterComponent(props: FeedFilterProps) {
        <box
          border
          padding={0}
-          backgroundColor={focusField() === "sort" ? "#333" : undefined}
+            backgroundColor={focusField() === "sort" ? theme.backgroundElement : undefined}
        >
          <box flexDirection="row" gap={1}>
-            <text fg={focusField() === "sort" ? "cyan" : "gray"}>Sort:</text>
-            <text fg="white">{sortLabel()}</text>
+            <text fg={focusField() === "sort" ? theme.primary : theme.textMuted}>Sort:</text>
+            <text fg={theme.text}>{sortLabel()}</text>
          </box>
        </box>

@@ -146,13 +149,13 @@ export function FeedFilterComponent(props: FeedFilterProps) {
        <box
          border
          padding={0}
-          backgroundColor={focusField() === "pinned" ? "#333" : undefined}
+            backgroundColor={focusField() === "pinned" ? theme.backgroundElement : undefined}
        >
          <box flexDirection="row" gap={1}>
-            <text fg={focusField() === "pinned" ? "cyan" : "gray"}>
+            <text fg={focusField() === "pinned" ? theme.primary : theme.textMuted}>
              Pinned:
            </text>
-            <text fg={props.filter.pinnedOnly ? "yellow" : "gray"}>
+            <text fg={props.filter.pinnedOnly ? theme.warning : theme.textMuted}>
              {props.filter.pinnedOnly ? "Yes" : "No"}
            </text>
          </box>
@@ -161,7 +164,7 @@ export function FeedFilterComponent(props: FeedFilterProps) {

      {/* Search box */}
      <box flexDirection="row" gap={1}>
-        <text fg={focusField() === "search" ? "cyan" : "gray"}>Search:</text>
+            <text fg={focusField() === "search" ? theme.primary : theme.textMuted}>Search:</text>
        <input
          value={searchValue()}
          onInput={handleSearchInput}
@@ -171,7 +174,7 @@ export function FeedFilterComponent(props: FeedFilterProps) {
        />
      </box>

-      <text fg="gray">Tab to navigate, Enter/Space to toggle</text>
+      <text fg={theme.textMuted}>Tab to navigate, Enter/Space to toggle</text>
    </box>
  );
 }
--- a/src/pages/Feed/FeedItem.tsx
+++ b/src/pages/Feed/FeedItem.tsx
@@ -31,12 +31,13 @@ export function FeedItem(props: FeedItemProps) {
  };

  const visibilityColor = () => {
-    return props.feed.visibility === "public" ? "green" : "yellow";
+    return props.feed.visibility === "public" ? theme.success : theme.warning;
  };

  const pinnedIndicator = () => {
    return props.feed.isPinned ? "*" : " ";
  };
+
  const { theme } = useTheme();

  if (props.compact) {
@@ -45,18 +46,18 @@ export function FeedItem(props: FeedItemProps) {
      <box
        flexDirection="row"
        gap={1}
-        backgroundColor={props.isSelected ? "#333" : undefined}
-        paddingLeft={1}
-        paddingRight={1}
-      >
-        <text fg={props.isSelected ? "cyan" : "gray"}>
-          {props.isSelected ? ">" : " "}
-        </text>
-        <text fg={visibilityColor()}>{visibilityIcon()}</text>
-        <text fg={props.isSelected ? "white" : theme.accent}>
-          {props.feed.customName || props.feed.podcast.title}
-        </text>
-        {props.showEpisodeCount && <text fg="gray">({episodeCount()})</text>}
+      backgroundColor={props.isSelected ? theme.backgroundElement : undefined}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      <text fg={props.isSelected ? theme.primary : theme.textMuted}>
+        {props.isSelected ? ">" : " "}
+      </text>
+      <text fg={visibilityColor()}>{visibilityIcon()}</text>
+      <text fg={props.isSelected ? theme.text : theme.accent}>
+        {props.feed.customName || props.feed.podcast.title}
+      </text>
+      {props.showEpisodeCount && <text fg={theme.textMuted}>({episodeCount()})</text>}
      </box>
    );
  }
@@ -67,18 +68,18 @@ export function FeedItem(props: FeedItemProps) {
      flexDirection="column"
      gap={0}
      border={props.isSelected}
-      borderColor={props.isSelected ? "cyan" : undefined}
-      backgroundColor={props.isSelected ? "#222" : undefined}
+      borderColor={props.isSelected ? theme.primary : undefined}
+      backgroundColor={props.isSelected ? theme.backgroundElement : undefined}
      padding={1}
    >
      {/* Title row */}
      <box flexDirection="row" gap={1}>
-        <text fg={props.isSelected ? "cyan" : "gray"}>
+        <text fg={props.isSelected ? theme.primary : theme.textMuted}>
          {props.isSelected ? ">" : " "}
        </text>
        <text fg={visibilityColor()}>{visibilityIcon()}</text>
-        <text fg="yellow">{pinnedIndicator()}</text>
-        <text fg={props.isSelected ? "white" : theme.text}>
+        <text fg={theme.warning}>{pinnedIndicator()}</text>
+        <text fg={props.isSelected ? theme.text : theme.text}>
          <strong>
            {props.feed.customName || props.feed.podcast.title}
          </strong>
@@ -87,18 +88,18 @@ export function FeedItem(props: FeedItemProps) {

      <box flexDirection="row" gap={2} paddingLeft={4}>
        {props.showEpisodeCount && (
-          <text fg="gray">
+          <text fg={theme.textMuted}>
            {episodeCount()} episodes ({unplayedCount()} new)
          </text>
        )}
        {props.showLastUpdated && (
-          <text fg="gray">Updated: {formatDate(props.feed.lastUpdated)}</text>
+          <text fg={theme.textMuted}>Updated: {formatDate(props.feed.lastUpdated)}</text>
        )}
      </box>

      {props.feed.podcast.description && (
        <box paddingLeft={4} paddingTop={0}>
-          <text fg="gray">
+          <text fg={theme.textMuted}>
            {props.feed.podcast.description.slice(0, 60)}
            {props.feed.podcast.description.length > 60 ? "..." : ""}
          </text>
--- a/src/pages/Feed/FeedList.tsx
+++ b/src/pages/Feed/FeedList.tsx
@@ -9,6 +9,7 @@ import { FeedItem } from "./FeedItem";
 import { useFeedStore } from "@/stores/feed";
 import { FeedVisibility, FeedSortField } from "@/types/feed";
 import type { Feed } from "@/types/feed";
+import { useTheme } from "@/context/ThemeContext";

 interface FeedListProps {
  focused?: boolean;
@@ -21,6 +22,7 @@ interface FeedListProps {
 }

 export function FeedList(props: FeedListProps) {
+  const { theme } = useTheme();
  const feedStore = useFeedStore();
  const [selectedIndex, setSelectedIndex] = createSignal(0);

@@ -136,26 +138,26 @@ export function FeedList(props: FeedListProps) {
    <box flexDirection="column" gap={1}>
      {/* Header with filter controls */}
      <box flexDirection="row" justifyContent="space-between" paddingBottom={0}>
-        <text>
+        <text fg={theme.text}>
          <strong>My Feeds</strong>
        </text>
-        <text fg="gray">({filteredFeeds().length} feeds)</text>
-        <box flexDirection="row" gap={1}>
-          <box border padding={0} onMouseDown={cycleVisibilityFilter}>
-            <text fg="cyan">[f] {visibilityLabel()}</text>
-          </box>
-          <box border padding={0} onMouseDown={cycleSortField}>
-            <text fg="cyan">[s] {sortLabel()}</text>
-          </box>
-        </box>
+            <text fg={theme.textMuted}>({filteredFeeds().length} feeds)</text>
+            <box flexDirection="row" gap={1}>
+              <box border padding={0} onMouseDown={cycleVisibilityFilter} borderColor={theme.border}>
+                <text fg={theme.primary}>[f] {visibilityLabel()}</text>
+              </box>
+              <box border padding={0} onMouseDown={cycleSortField} borderColor={theme.border}>
+                <text fg={theme.primary}>[s] {sortLabel()}</text>
+              </box>
+            </box>
      </box>

      {/* Feed list in scrollbox */}
      <Show
        when={filteredFeeds().length > 0}
        fallback={
-          <box border padding={2}>
-            <text fg="gray">
+          <box border padding={2} borderColor={theme.border}>
+            <text fg={theme.textMuted}>
              No feeds found. Add podcasts from the Discover or Search tabs.
            </text>
          </box>
@@ -180,9 +182,9 @@ export function FeedList(props: FeedListProps) {

      {/* Navigation help */}
      <box paddingTop={0}>
-        <text fg="gray">
-          Enter open | Esc up | j/k navigate | p pin | f filter | s sort
-        </text>
+          <text fg={theme.textMuted}>
+            Enter open | Esc up | j/k navigate | p pin | f filter | s sort
+          </text>
      </box>
    </box>
  );
--- a/src/pages/Feed/FeedPage.tsx
+++ b/src/pages/Feed/FeedPage.tsx
@@ -50,14 +50,14 @@ export function FeedPage(props: PageProps) {
    >
      {/* Status line */}
      <Show when={isRefreshing()}>
-        <text fg="yellow">Refreshing feeds...</text>
+        <text fg={theme.warning}>Refreshing feeds...</text>
      </Show>

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