From 2dfc96321bf1e91abf8e78fcbfd0027d277cf86c Mon Sep 17 00:00:00 2001
From: Michael Freno <michaelt.freno@gmail.com>
Date: Wed, 11 Feb 2026 11:16:18 -0500
Subject: [PATCH] colors

---
 src/App.tsx                       |  31 ++++++
 src/pages/Feed/FeedItem.tsx       |  36 +++---
 src/pages/MyShows/MyShowsPage.tsx | 177 +++++++++++++++++-------------
 3 files changed, 149 insertions(+), 95 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8b862bd..8042780 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,6 +15,8 @@ import type { Episode } from "@/types/episode";
 import { DIRECTION, LayerGraph, TABS } from "./utils/navigation";
 import { useTheme } from "./context/ThemeContext";
 
+const DEBUG = import.meta.env.DEBUG;
+
 export interface PageProps {
   depth: Accessor<number>;
 }
@@ -81,6 +83,35 @@ export function App() {
         </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
         flexDirection="row"
         width="100%"
diff --git a/src/pages/Feed/FeedItem.tsx b/src/pages/Feed/FeedItem.tsx
index 20a87c7..f055e8e 100644
--- a/src/pages/Feed/FeedItem.tsx
+++ b/src/pages/Feed/FeedItem.tsx
@@ -46,18 +46,20 @@ export function FeedItem(props: FeedItemProps) {
       <box
         flexDirection="row"
         gap={1}
-      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>}
+        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>
     );
   }
@@ -69,7 +71,7 @@ export function FeedItem(props: FeedItemProps) {
       gap={0}
       border={props.isSelected}
       borderColor={props.isSelected ? theme.primary : undefined}
-      backgroundColor={props.isSelected ? theme.backgroundElement : undefined}
+      backgroundColor={props.isSelected ? theme.primary : undefined}
       padding={1}
     >
       {/* Title row */}
@@ -80,9 +82,7 @@ export function FeedItem(props: FeedItemProps) {
         <text fg={visibilityColor()}>{visibilityIcon()}</text>
         <text fg={theme.warning}>{pinnedIndicator()}</text>
         <text fg={props.isSelected ? theme.text : theme.text}>
-          <strong>
-            {props.feed.customName || props.feed.podcast.title}
-          </strong>
+          <strong>{props.feed.customName || props.feed.podcast.title}</strong>
         </text>
       </box>
 
@@ -93,7 +93,9 @@ export function FeedItem(props: FeedItemProps) {
           </text>
         )}
         {props.showLastUpdated && (
-          <text fg={theme.textMuted}>Updated: {formatDate(props.feed.lastUpdated)}</text>
+          <text fg={theme.textMuted}>
+            Updated: {formatDate(props.feed.lastUpdated)}
+          </text>
         )}
       </box>
 
diff --git a/src/pages/MyShows/MyShowsPage.tsx b/src/pages/MyShows/MyShowsPage.tsx
index 4a83f5c..78e6a74 100644
--- a/src/pages/MyShows/MyShowsPage.tsx
+++ b/src/pages/MyShows/MyShowsPage.tsx
@@ -5,13 +5,10 @@
  */
 
 import { createSignal, For, Show, createMemo, createEffect } from "solid-js";
-import { useKeyboard } from "@opentui/solid";
 import { useFeedStore } from "@/stores/feed";
 import { useDownloadStore } from "@/stores/download";
 import { DownloadStatus } from "@/types/episode";
 import { format } from "date-fns";
-import type { Episode } from "@/types/episode";
-import type { Feed } from "@/types/feed";
 import { PageProps } from "@/App";
 import { useTheme } from "@/context/ThemeContext";
 
@@ -157,19 +154,27 @@ export function MyShowsPage(props: PageProps) {
                   gap={1}
                   paddingLeft={1}
                   paddingRight={1}
-                  backgroundColor={index() === showIndex() ? theme.primary : undefined}
+                  backgroundColor={
+                    index() === showIndex() ? theme.primary : undefined
+                  }
                   onMouseDown={() => {
                     setShowIndex(index());
                     setEpisodeIndex(0);
                   }}
                 >
-                  <text fg={index() === showIndex() ? theme.primary : theme.muted}>
+                  <text
+                    fg={index() === showIndex() ? theme.surface : theme.text}
+                  >
                     {index() === showIndex() ? ">" : " "}
                   </text>
-                  <text fg={index() === showIndex() ? theme.text : undefined}>
+                  <text
+                    fg={index() === showIndex() ? theme.surface : theme.text}
+                  >
                     {feed.customName || feed.podcast.title}
                   </text>
-                  <text fg={theme.muted}>({feed.episodes.length})</text>
+                  <text fg={index() === showIndex() ? undefined : theme.text}>
+                    ({feed.episodes.length})
+                  </text>
                 </box>
               )}
             </For>
@@ -177,82 +182,98 @@ export function MyShowsPage(props: PageProps) {
         </Show>
       </box>
       <box flexDirection="column" height="100%">
-            <Show
-              when={selectedShow()}
-              fallback={
-                <box padding={1}>
-                  <text fg={theme.muted}>Select a show</text>
-                </box>
-              }
+        <Show
+          when={selectedShow()}
+          fallback={
+            <box padding={1}>
+              <text fg={theme.muted}>Select a show</text>
+            </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
-                when={episodes().length > 0}
-                fallback={
-                  <box padding={1}>
-                    <text fg={theme.muted}>No episodes. Press [r] to refresh.</text>
+              <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.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>
+                )}
+              </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
-                  height="100%"
-                  focused={props.depth() == MyShowsPaneType.EPISODES}
-                >
-                  <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>
+                <box paddingLeft={2} paddingTop={1}>
+                  <text fg={theme.muted}>Scroll down for more episodes</text>
+                </box>
               </Show>
-            </Show>
+            </scrollbox>
+          </Show>
+        </Show>
       </box>
     </box>
   );