use of selectable

for consistency
colors
2026-02-11 21:57:17 -05:00 · 2026-02-11 14:10:35 -05:00 · 2026-02-11 11:16:18 -05:00 · 2026-02-10 15:30:53 -05:00
29 changed files with 566 additions and 347 deletions
--- 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%"
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,4 +1,5 @@
 import type { TabId } from "./Tab"
+import { useTheme } from "@/context/ThemeContext"

 type NavigationProps = {
  activeTab: TabId
@@ -6,9 +7,10 @@ type NavigationProps = {
 }

 export function Navigation(props: NavigationProps) {
+  const { theme } = useTheme();
  return (
    <box style={{ flexDirection: "row", width: "100%", height: 1 }}>
-      <text>
+      <text fg={theme.text}>
        {props.activeTab === "feed" ? "[" : " "}Feed{props.activeTab === "feed" ? "]" : " "}
        <span> </span>
        {props.activeTab === "shows" ? "[" : " "}My Shows{props.activeTab === "shows" ? "]" : " "}
--- a/src/components/Selectable.tsx
+++ b/src/components/Selectable.tsx
@@ -0,0 +1,39 @@
+import { useTheme } from "@/context/ThemeContext";
+import type { JSXElement } from "solid-js";
+import type { BoxOptions, TextOptions } from "@opentui/core";
+
+export function SelectableBox({
+  selected,
+  children,
+  ...props
+}: { selected: () => boolean; children: JSXElement } & BoxOptions) {
+  const { theme } = useTheme();
+
+  return (
+    <box
+      border={!!props.border}
+      borderColor={selected() ? theme.surface : theme.border}
+      backgroundColor={selected() ? theme.primary : theme.surface}
+      {...props}
+    >
+      {children}
+    </box>
+  );
+}
+
+export function SelectableText({
+  selected,
+  children,
+  ...props
+}: {
+  selected: () => boolean;
+  children: JSXElement;
+} & TextOptions) {
+  const { theme } = useTheme();
+
+  return (
+    <text fg={selected() ? theme.surface : theme.text} {...props}>
+      {children}
+    </text>
+  );
+}
--- a/src/components/ShortcutHelp.tsx
+++ b/src/components/ShortcutHelp.tsx
@@ -1,24 +1,26 @@
 import { shortcuts } from "@/config/shortcuts";
+import { useTheme } from "@/context/ThemeContext";

 export function ShortcutHelp() {
+  const { theme } = useTheme();
  return (
    <box border title="Shortcuts" style={{ padding: 1 }}>
      <box style={{ flexDirection: "column" }}>
        <box style={{ flexDirection: "row" }}>
-          <text>{shortcuts[0]?.keys ?? ""} </text>
-          <text>{shortcuts[0]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[0]?.keys ?? ""} </text>
+          <text fg={theme.text}>{shortcuts[0]?.action ?? ""}</text>
        </box>
        <box style={{ flexDirection: "row" }}>
-          <text>{shortcuts[1]?.keys ?? ""} </text>
-          <text>{shortcuts[1]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[1]?.keys ?? ""} </text>
+          <text fg={theme.text}>{shortcuts[1]?.action ?? ""}</text>
        </box>
        <box style={{ flexDirection: "row" }}>
-          <text>{shortcuts[2]?.keys ?? ""} </text>
-          <text>{shortcuts[2]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[2]?.keys ?? ""} </text>
+          <text fg={theme.text}>{shortcuts[2]?.action ?? ""}</text>
        </box>
        <box style={{ flexDirection: "row" }}>
-          <text>{shortcuts[3]?.keys ?? ""} </text>
-          <text>{shortcuts[3]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[3]?.keys ?? ""} </text>
+          <text fg={theme.text}>{shortcuts[3]?.action ?? ""}</text>
        </box>
      </box>
    </box>
--- a/src/components/TabNavigation.tsx
+++ b/src/components/TabNavigation.tsx
@@ -1,6 +1,7 @@
 import { useTheme } from "@/context/ThemeContext";
 import { TABS } from "@/utils/navigation";
 import { For } from "solid-js";
+import { SelectableBox, SelectableText } from "@/components/Selectable";

 interface TabNavigationProps {
  activeTab: TABS;
@@ -29,24 +30,18 @@ export function TabNavigation(props: TabNavigationProps) {
    >
      <For each={tabs}>
        {(tab) => (
-          <box
+          <SelectableBox
            border
-            borderColor={theme.border}
+            selected={() => tab.id == props.activeTab}
            onMouseDown={() => props.onTabSelect(tab.id)}
-            style={{
-              backgroundColor:
-                tab.id == props.activeTab ? theme.primary : "transparent",
-            }}
          >
-            <text
-              style={{
-                fg: tab.id == props.activeTab ? "white" : theme.text,
-                alignSelf: "center",
-              }}
+            <SelectableText
+              selected={() => tab.id == props.activeTab}
+              alignSelf="center"
            >
              {tab.label}
-            </text>
-          </box>
+            </SelectableText>
+          </SelectableBox>
        )}
      </For>
    </box>
--- a/src/pages/Discover/DiscoverPage.tsx
+++ b/src/pages/Discover/DiscoverPage.tsx
@@ -8,6 +8,7 @@ import { useDiscoverStore, DISCOVER_CATEGORIES } from "@/stores/discover";
 import { useTheme } from "@/context/ThemeContext";
 import { PodcastCard } from "./PodcastCard";
 import { PageProps } from "@/App";
+import { SelectableBox, SelectableText } from "@/components/Selectable";

 enum DiscoverPagePaneType {
  CATEGORIES = 1,
@@ -54,26 +55,28 @@ export function DiscoverPage(props: PageProps) {
        >
          Categories:
        </text>
-        <box flexDirection="column" gap={1}>
-          <For each={discoverStore.categories}>
-            {(category) => {
-              const isSelected = () =>
-                discoverStore.selectedCategory() === category.id;
+         <box flexDirection="column" gap={1}>
+           <For each={discoverStore.categories}>
+             {(category) => {
+               const isSelected = () =>
+                 discoverStore.selectedCategory() === category.id;

-              return (
-                <box
-                  border={isSelected()}
-                  backgroundColor={isSelected() ? theme.accent : undefined}
-                  onMouseDown={() => handleCategorySelect(category.id)}
-                >
-                  <text fg={isSelected() ? theme.primary : theme.textMuted}>
-                    {category.icon} {category.name}
-                  </text>
-                </box>
-              );
-            }}
-          </For>
-        </box>
+               return (
+                 <SelectableBox
+                   selected={isSelected}
+                   onMouseDown={() => handleCategorySelect(category.id)}
+                 >
+                   <SelectableText
+                     selected={isSelected}
+                     fg={theme.primary}
+                   >
+                     {category.icon} {category.name}
+                   </SelectableText>
+                 </SelectableBox>
+               );
+             }}
+           </For>
+         </box>
      </box>
      <box
        flexDirection="column"
--- a/src/pages/Discover/PodcastCard.tsx
+++ b/src/pages/Discover/PodcastCard.tsx
@@ -5,6 +5,7 @@
 import { Show, For } from "solid-js";
 import type { Podcast } from "@/types/podcast";
 import { useTheme } from "@/context/ThemeContext";
+import { SelectableBox, SelectableText } from "@/components/Selectable";

 type PodcastCardProps = {
  podcast: Podcast;
@@ -21,59 +22,64 @@ export function PodcastCard(props: PodcastCardProps) {
  };

  return (
-    <box
+    <SelectableBox
+      selected={() => props.selected}
      flexDirection="column"
      padding={1}
-      backgroundColor={props.selected ? theme.backgroundElement : undefined}
      onMouseDown={props.onSelect}
    >
-      {/* Title Row */}
      <box flexDirection="row" gap={2} alignItems="center">
-            <text fg={props.selected ? theme.primary : theme.text}>
-              <strong>{props.podcast.title}</strong>
-            </text>
+        <SelectableText selected={() => props.selected}>
+          <strong>{props.podcast.title}</strong>
+        </SelectableText>

        <Show when={props.podcast.isSubscribed}>
-            <text fg={theme.success}>[+]</text>
+          <text fg={theme.success}>[+]</text>
        </Show>
      </box>

      {/* Author */}
      <Show when={props.podcast.author && !props.compact}>
-            <text fg={theme.textMuted}>by {props.podcast.author}</text>
+        <SelectableText
+          selected={() => props.selected}
+          fg={theme.textMuted}
+        >
+          by {props.podcast.author}
+        </SelectableText>
      </Show>

      {/* Description */}
      <Show when={props.podcast.description && !props.compact}>
-            <text fg={props.selected ? theme.text : theme.textMuted}>
+        <SelectableText
+          selected={() => props.selected}
+          fg={theme.text}
+        >
          {props.podcast.description!.length > 80
            ? props.podcast.description!.slice(0, 80) + "..."
            : props.podcast.description}
-        </text>
+        </SelectableText>
      </Show>

-      {/* Categories and Subscribe Button */}
-      <box
+      {/**<box
        flexDirection="row"
        justifyContent="space-between"
        marginTop={props.compact ? 0 : 1}
-      >
-        <box flexDirection="row" gap={1}>
-          <Show when={(props.podcast.categories ?? []).length > 0}>
-            <For each={(props.podcast.categories ?? []).slice(0, 2)}>
-                {(cat) => <text fg={theme.warning}>[{cat}]</text>}
-            </For>
-          </Show>
-        </box>
-
-        <Show when={props.selected}>
-          <box onMouseDown={handleSubscribeClick}>
-            <text fg={props.podcast.isSubscribed ? theme.error : theme.success}>
-              {props.podcast.isSubscribed ? "[Unsubscribe]" : "[Subscribe]"}
-            </text>
-          </box>
+      />**/}
+      <box flexDirection="row" gap={1}>
+        <Show when={(props.podcast.categories ?? []).length > 0}>
+          <For each={(props.podcast.categories ?? []).slice(0, 2)}>
+            {(cat) => <text fg={theme.warning}>[{cat}]</text>}
+          </For>
        </Show>
      </box>
-    </box>
+
+      <Show when={props.selected}>
+        <box onMouseDown={handleSubscribeClick}>
+          <text fg={props.podcast.isSubscribed ? theme.error : theme.success}>
+            {props.podcast.isSubscribed ? "[Unsubscribe]" : "[Subscribe]"}
+          </text>
+        </box>
+      </Show>
+    </SelectableBox>
  );
 }
--- a/src/pages/Feed/FeedDetail.tsx
+++ b/src/pages/Feed/FeedDetail.tsx
@@ -9,6 +9,7 @@ import type { Feed } from "@/types/feed";
 import type { Episode } from "@/types/episode";
 import { format } from "date-fns";
 import { useTheme } from "@/context/ThemeContext";
+import { SelectableBox, SelectableText } from "@/components/Selectable";

 interface FeedDetailProps {
  feed: Feed;
@@ -129,21 +130,21 @@ export function FeedDetail(props: FeedDetailProps) {

      {/* Episodes header */}
      <box flexDirection="row" justifyContent="space-between">
-        <text>
+        <text fg={theme.text}>
          <strong>Episodes</strong>
        </text>
-        <text fg="gray">({episodes().length} total)</text>
+        <text fg={theme.textMuted}>({episodes().length} total)</text>
      </box>

      {/* Episode list */}
      <scrollbox height={showInfo() ? 10 : 15} focused={props.focused}>
        <For each={episodes()}>
          {(episode, index) => (
-            <box
+            <SelectableBox
+              selected={() => index() === selectedIndex()}
              flexDirection="column"
              gap={0}
              padding={1}
-                    backgroundColor={index() === selectedIndex() ? theme.backgroundElement : undefined}
              onMouseDown={() => {
                setSelectedIndex(index());
                if (props.onPlayEpisode) {
@@ -151,20 +152,24 @@ export function FeedDetail(props: FeedDetailProps) {
                }
              }}
            >
-              <box flexDirection="row" gap={1}>
-                  <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>
+              <SelectableText
+                selected={() => index() === selectedIndex()}
+                fg={theme.primary}
+              >
+                {index() === selectedIndex() ? ">" : " "}
+              </SelectableText>
+              <SelectableText
+                selected={() => index() === selectedIndex()}
+                fg={theme.text}
+              >
+                {episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""}
+                {episode.title}
+              </SelectableText>
              <box flexDirection="row" gap={2} paddingLeft={2}>
                  <text fg={theme.textMuted}>{formatDate(episode.pubDate)}</text>
                  <text fg={theme.textMuted}>{formatDuration(episode.duration)}</text>
              </box>
-            </box>
+            </SelectableBox>
          )}
        </For>
      </scrollbox>
--- a/src/pages/Feed/FeedItem.tsx
+++ b/src/pages/Feed/FeedItem.tsx
@@ -6,6 +6,7 @@
 import type { Feed, FeedVisibility } from "@/types/feed";
 import { format } from "date-fns";
 import { useTheme } from "@/context/ThemeContext";
+import { SelectableBox, SelectableText } from "@/components/Selectable";

 interface FeedItemProps {
  feed: Feed;
@@ -43,68 +44,111 @@ export function FeedItem(props: FeedItemProps) {
  if (props.compact) {
    // Compact single-line view
    return (
-      <box
+      <SelectableBox
+        selected={() => props.isSelected}
        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>}
-      </box>
+        paddingLeft={1}
+        paddingRight={1}
+        onMouseDown={() => {}}
+      >
+        <SelectableText
+          selected={() => props.isSelected}
+          fg={theme.primary}
+        >
+          {props.isSelected ? ">" : " "}
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          fg={visibilityColor()}
+        >
+          {visibilityIcon()}
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          fg={theme.text}
+        >
+          {props.feed.customName || props.feed.podcast.title}
+        </SelectableText>
+        {props.showEpisodeCount && (
+          <SelectableText
+            selected={() => props.isSelected}
+            fg={theme.textMuted}
+          >
+            ({episodeCount()})
+          </SelectableText>
+        )}
+      </SelectableBox>
    );
  }

  // Full view with details
  return (
-    <box
+    <SelectableBox
+      selected={() => props.isSelected}
      flexDirection="column"
      gap={0}
-      border={props.isSelected}
-      borderColor={props.isSelected ? theme.primary : undefined}
-      backgroundColor={props.isSelected ? theme.backgroundElement : undefined}
      padding={1}
+      onMouseDown={() => {}}
    >
      {/* Title row */}
      <box flexDirection="row" gap={1}>
-        <text fg={props.isSelected ? theme.primary : theme.textMuted}>
+        <SelectableText
+          selected={() => props.isSelected}
+          fg={theme.primary}
+        >
          {props.isSelected ? ">" : " "}
-        </text>
-        <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>
-        </text>
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          fg={visibilityColor()}
+        >
+          {visibilityIcon()}
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          fg={theme.warning}
+        >
+          {pinnedIndicator()}
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          fg={theme.text}
+        >
+          <strong>{props.feed.customName || props.feed.podcast.title}</strong>
+        </SelectableText>
      </box>

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

      {props.feed.podcast.description && (
-        <box paddingLeft={4} paddingTop={0}>
-          <text fg={theme.textMuted}>
-            {props.feed.podcast.description.slice(0, 60)}
-            {props.feed.podcast.description.length > 60 ? "..." : ""}
-          </text>
-        </box>
+        <SelectableText
+          selected={() => props.isSelected}
+          paddingLeft={4}
+          paddingTop={0}
+          fg={theme.textMuted}
+        >
+          {props.feed.podcast.description.slice(0, 60)}
+          {props.feed.podcast.description.length > 60 ? "..." : ""}
+        </SelectableText>
      )}
-    </box>
+    </SelectableBox>
  );
 }
--- a/src/pages/Feed/FeedPage.tsx
+++ b/src/pages/Feed/FeedPage.tsx
@@ -10,6 +10,7 @@ import type { Episode } from "@/types/episode";
 import type { Feed } from "@/types/feed";
 import { useTheme } from "@/context/ThemeContext";
 import { PageProps } from "@/App";
+import { SelectableBox, SelectableText } from "@/components/Selectable";

 enum FeedPaneType {
  FEED = 1,
@@ -27,6 +28,18 @@ export function FeedPage(props: PageProps) {
    return format(date, "MMM d, yyyy");
  };

+  const episodesByDate = () => {
+    const groups: Record<string, { episode: Episode; feed: Feed }> = {};
+    const sortedEpisodes = allEpisodes();
+
+    for (const episode of sortedEpisodes) {
+      const dateKey = formatDate(new Date(episode.episode.pubDate));
+      groups[dateKey] = episode;
+    }
+
+    return groups;
+  };
+
  const formatDuration = (seconds: number): string => {
    const mins = Math.floor(seconds / 60);
    const hrs = Math.floor(mins / 60);
@@ -63,36 +76,43 @@ export function FeedPage(props: PageProps) {
          </box>
        }
      >
-        {/**TODO: figure out wtf to do here **/}
-        <scrollbox height="100%" focused={props.depth() == FeedPaneType.FEED}>
-          <For each={allEpisodes()}>
-            {(item, index) => (
-              <box
-                flexDirection="column"
-                gap={0}
-                paddingLeft={1}
-                paddingRight={1}
-                paddingTop={0}
-                paddingBottom={0}
-                backgroundColor={
-                  index() === selectedIndex() ? theme.backgroundElement : undefined
-                }
-                onMouseDown={() => setSelectedIndex(index())}
-              >
-                <box flexDirection="row" gap={1}>
-                  <text fg={index() === selectedIndex() ? theme.primary : theme.textMuted}>
-                    {index() === selectedIndex() ? ">" : " "}
-                  </text>
-                  <text fg={index() === selectedIndex() ? theme.text : theme.text}>
-                    {item.episode.title}
-                  </text>
+         <scrollbox height="100%" focused={props.depth() == FeedPaneType.FEED}>
+          <For each={Object.entries(episodesByDate()).sort(([a], [b]) => b.localeCompare(a))}>
+            {([date, episode], groupIndex) => (
+              <>
+                <box flexDirection="column" gap={0} paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1}>
+                  <text fg={theme.primary}>{date}</text>
                </box>
-                <box flexDirection="row" gap={2} paddingLeft={2}>
-                  <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>
+                <SelectableBox
+                  selected={() => groupIndex() === selectedIndex()}
+                  flexDirection="column"
+                  gap={0}
+                  paddingLeft={1}
+                  paddingRight={1}
+                  paddingTop={0}
+                  paddingBottom={0}
+                  onMouseDown={() => setSelectedIndex(groupIndex())}
+                >
+                  <SelectableText selected={() => groupIndex() === selectedIndex()}>
+                    {groupIndex() === selectedIndex() ? ">" : " "}
+                  </SelectableText>
+                  <SelectableText
+                    selected={() => groupIndex() === selectedIndex()}
+                    fg={theme.text}
+                  >
+                    {episode.episode.title}
+                  </SelectableText>
+                  <box flexDirection="row" gap={2} paddingLeft={2}>
+                    <text fg={theme.primary}>{episode.feed.podcast.title}</text>
+                    <text fg={theme.textMuted}>
+                      {formatDate(episode.episode.pubDate)}
+                    </text>
+                    <text fg={theme.textMuted}>
+                      {formatDuration(episode.episode.duration)}
+                    </text>
+                  </box>
+                </SelectableBox>
+              </>
            )}
          </For>
        </scrollbox>
--- 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>
  );
--- a/src/pages/Player/PlayerPage.tsx
+++ b/src/pages/Player/PlayerPage.tsx
@@ -29,7 +29,7 @@ export function PlayerPage(props: PageProps) {
  return (
    <box flexDirection="column" gap={1} width="100%">
      <box flexDirection="row" justifyContent="space-between">
-        <text>
+        <text fg={theme.text}>
          <strong>Now Playing</strong>
        </text>
        <text fg={theme.muted}>
@@ -40,7 +40,7 @@ export function PlayerPage(props: PageProps) {

      {audio.error() && <text fg={theme.error}>{audio.error()}</text>}

-      <box border padding={1} flexDirection="column" gap={1}>
+      <box border borderColor={theme.border} padding={1} flexDirection="column" gap={1}>
        <text fg={theme.text}>
          <strong>{audio.currentEpisode()?.title}</strong>
        </text>
--- a/src/pages/Player/RealtimeWaveform.tsx
+++ b/src/pages/Player/RealtimeWaveform.tsx
@@ -15,6 +15,7 @@ import {
 } from "@/utils/cavacore";
 import { AudioStreamReader } from "@/utils/audio-stream-reader";
 import { useAudio } from "@/hooks/useAudio";
+import { useTheme } from "@/context/ThemeContext";

 // ── Types ────────────────────────────────────────────────────────────

@@ -44,6 +45,7 @@ const SAMPLES_PER_FRAME = 512;
 // ── Component ────────────────────────────────────────────────────────

 export function RealtimeWaveform(props: RealtimeWaveformProps) {
+  const { theme } = useTheme();
  const audio = useAudio();

  // Frequency bar values (0.0–1.0 per bar)
@@ -247,8 +249,8 @@ export function RealtimeWaveform(props: RealtimeWaveformProps) {
  };

  return (
-    <box border padding={1} onMouseDown={handleClick}>
+    <box border borderColor={theme.border} padding={1} onMouseDown={handleClick}>
      {renderLine()}
    </box>
  );
-}
+}
--- a/src/pages/Search/ResultCard.tsx
+++ b/src/pages/Search/ResultCard.tsx
@@ -2,6 +2,7 @@ import { Show } from "solid-js";
 import type { SearchResult } from "@/types/source";
 import { SourceBadge } from "./SourceBadge";
 import { useTheme } from "@/context/ThemeContext";
+import { SelectableBox, SelectableText } from "@/components/Selectable";

 type ResultCardProps = {
  result: SearchResult;
@@ -15,12 +16,10 @@ export function ResultCard(props: ResultCardProps) {
  const podcast = () => props.result.podcast;

  return (
-    <box
+    <SelectableBox
+      selected={() => props.selected}
      flexDirection="column"
      padding={1}
-      border={props.selected}
-      borderColor={props.selected ? theme.primary : undefined}
-      backgroundColor={props.selected ? theme.backgroundElement : undefined}
      onMouseDown={props.onSelect}
    >
      <box
@@ -29,9 +28,12 @@ export function ResultCard(props: ResultCardProps) {
        alignItems="center"
      >
        <box flexDirection="row" gap={2} alignItems="center">
-            <text fg={props.selected ? theme.primary : theme.text}>
+            <SelectableText
+              selected={() => props.selected}
+              fg={theme.primary}
+            >
              <strong>{podcast().title}</strong>
-            </text>
+            </SelectableText>
          <SourceBadge
            sourceId={props.result.sourceId}
            sourceName={props.result.sourceName}
@@ -44,16 +46,24 @@ export function ResultCard(props: ResultCardProps) {
      </box>

      <Show when={podcast().author}>
-            <text fg={theme.textMuted}>by {podcast().author}</text>
+            <SelectableText
+              selected={() => props.selected}
+              fg={theme.textMuted}
+            >
+              by {podcast().author}
+            </SelectableText>
      </Show>

      <Show when={podcast().description}>
        {(description) => (
-            <text fg={props.selected ? theme.text : theme.textMuted}>
+            <SelectableText
+              selected={() => props.selected}
+              fg={theme.text}
+            >
            {description().length > 120
              ? description().slice(0, 120) + "..."
              : description()}
-          </text>
+          </SelectableText>
        )}
      </Show>

@@ -80,6 +90,6 @@ export function ResultCard(props: ResultCardProps) {
            <text fg={theme.primary}>[+] Add to Feeds</text>
        </box>
      </Show>
-    </box>
+    </SelectableBox>
  );
 }
--- a/src/pages/Search/SearchHistory.tsx
+++ b/src/pages/Search/SearchHistory.tsx
@@ -4,6 +4,7 @@

 import { For, Show } from "solid-js"
 import { useTheme } from "@/context/ThemeContext"
+import { SelectableBox, SelectableText } from "@/components/Selectable"

 type SearchHistoryProps = {
  history: string[]
@@ -52,23 +53,31 @@ export function SearchHistory(props: SearchHistoryProps) {
                const isSelected = () => index() === props.selectedIndex && props.focused

                return (
-                  <box
+                  <SelectableBox
+                    selected={isSelected}
                    flexDirection="row"
                    justifyContent="space-between"
                    padding={0}
                    paddingLeft={1}
                    paddingRight={1}
-                    backgroundColor={isSelected() ? theme.backgroundElement : undefined}
                    onMouseDown={() => handleSearchClick(index(), query)}
                  >
-                    <box flexDirection="row" gap={1}>
-                      <text fg={theme.textMuted}>{">"}</text>
-                      <text fg={isSelected() ? theme.primary : theme.text}>{query}</text>
-                    </box>
+                    <SelectableText
+                      selected={isSelected}
+                      fg={theme.textMuted}
+                    >
+                      {">"}
+                    </SelectableText>
+                    <SelectableText
+                      selected={isSelected}
+                      fg={theme.primary}
+                    >
+                      {query}
+                    </SelectableText>
                    <box onMouseDown={() => handleRemoveClick(query)} padding={0}>
                      <text fg={theme.error}>[x]</text>
                    </box>
-                  </box>
+                  </SelectableBox>
                )
              }}
            </For>
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -62,7 +62,7 @@ export function SearchPage(props: PageProps) {
    <box flexDirection="column" height="100%" gap={1} width="100%">
      {/* Search Header */}
      <box flexDirection="column" gap={1}>
-        <text>
+        <text fg={theme.text}>
          <strong>Search Podcasts</strong>
        </text>

@@ -101,7 +101,7 @@ export function SearchPage(props: PageProps) {
        {/* Main Content - Results or History */}
        <box flexDirection="row" height="100%" gap={2}>
          {/* Results Panel */}
-          <box flexDirection="column" flexGrow={1} border>
+          <box flexDirection="column" flexGrow={1} border borderColor={theme.border}>
            <box padding={1}>
              <text
                fg={props.depth() === SearchPaneType.RESULTS ? theme.primary : theme.muted}
@@ -134,7 +134,7 @@ export function SearchPage(props: PageProps) {
        </box>

        {/* History Sidebar */}
-        <box width={30} border>
+        <box width={30} border borderColor={theme.border}>
          <box padding={1} flexDirection="column">
            <box paddingBottom={1}>
              <text
--- a/src/pages/Settings/ExportDialog.tsx
+++ b/src/pages/Settings/ExportDialog.tsx
@@ -6,19 +6,21 @@ const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
 }

 import { SyncStatus } from "./SyncStatus"
+import { useTheme } from "@/context/ThemeContext"

 export function ExportDialog() {
+  const { theme } = useTheme();
  const filename = createSignal("podcast-sync.json")
  const format = createSignal<"json" | "xml">("json")

  return (
    <box border title="Export" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
      <box style={{ flexDirection: "row", gap: 1 }}>
-        <text>File:</text>
+        <text fg={theme.text}>File:</text>
        <input value={filename[0]()} onInput={filename[1]} style={{ width: 30 }} />
      </box>
      <box style={{ flexDirection: "row", gap: 1 }}>
-        <text>Format:</text>
+        <text fg={theme.text}>Format:</text>
        <tab_select
          options={[
            { name: "JSON", description: "Portable" },
@@ -27,8 +29,8 @@ export function ExportDialog() {
          onSelect={(index) => format[1](index === 0 ? "json" : "xml")}
        />
      </box>
-      <box border>
-        <text>Export {format[0]()} to {filename[0]()}</text>
+      <box border borderColor={theme.border}>
+        <text fg={theme.text}>Export {format[0]()} to {filename[0]()}</text>
      </box>
      <SyncStatus />
    </box>
--- a/src/pages/Settings/FilePicker.tsx
+++ b/src/pages/Settings/FilePicker.tsx
@@ -1,4 +1,5 @@
 import { detectFormat } from "@/utils/file-detector";
+import { useTheme } from "@/context/ThemeContext";

 type FilePickerProps = {
  value: string;
@@ -6,6 +7,7 @@ type FilePickerProps = {
 };

 export function FilePicker(props: FilePickerProps) {
+  const { theme } = useTheme();
  const format = detectFormat(props.value);

  return (
@@ -16,7 +18,7 @@ export function FilePicker(props: FilePickerProps) {
        placeholder="/path/to/sync-file.json"
        style={{ width: 40 }}
      />
-      <text>Format: {format}</text>
+      <text fg={theme.text}>Format: {format}</text>
    </box>
  );
 }
--- a/src/pages/Settings/ImportDialog.tsx
+++ b/src/pages/Settings/ImportDialog.tsx
@@ -6,15 +6,17 @@ const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
 }

 import { FilePicker } from "./FilePicker"
+import { useTheme } from "@/context/ThemeContext"

 export function ImportDialog() {
+  const { theme } = useTheme();
  const filePath = createSignal("")

  return (
    <box border title="Import" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
      <FilePicker value={filePath[0]()} onChange={filePath[1]} />
-      <box border>
-        <text>Import selected file</text>
+      <box border borderColor={theme.border}>
+        <text fg={theme.text}>Import selected file</text>
      </box>
    </box>
  )
--- a/src/pages/Settings/LoginScreen.tsx
+++ b/src/pages/Settings/LoginScreen.tsx
@@ -83,8 +83,8 @@ export function LoginScreen(props: LoginScreenProps) {
  };

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

@@ -92,7 +92,7 @@ export function LoginScreen(props: LoginScreenProps) {

      {/* Email field */}
      <box flexDirection="column" gap={0}>
-        <text fg={focusField() === "email" ? theme.primary : undefined}>
+        <text fg={focusField() === "email" ? theme.primary : theme.textMuted}>
          Email:
        </text>
        <input
@@ -107,7 +107,7 @@ export function LoginScreen(props: LoginScreenProps) {

      {/* Password field */}
      <box flexDirection="column" gap={0}>
-        <text fg={focusField() === "password" ? theme.primary : undefined}>
+        <text fg={focusField() === "password" ? theme.primary : theme.textMuted}>
          Password:
        </text>
        <input
@@ -126,6 +126,7 @@ export function LoginScreen(props: LoginScreenProps) {
      <box flexDirection="row" gap={2}>
        <box
          border
+          borderColor={theme.border}
          padding={1}
          backgroundColor={
            focusField() === "submit" ? theme.primary : undefined
@@ -148,6 +149,7 @@ export function LoginScreen(props: LoginScreenProps) {
      <box flexDirection="row" gap={2}>
        <box
          border
+          borderColor={theme.border}
          padding={1}
          backgroundColor={focusField() === "code" ? theme.primary : undefined}
        >
@@ -158,6 +160,7 @@ export function LoginScreen(props: LoginScreenProps) {

        <box
          border
+          borderColor={theme.border}
          padding={1}
          backgroundColor={focusField() === "oauth" ? theme.primary : undefined}
        >
--- a/src/pages/Settings/PreferencesPanel.tsx
+++ b/src/pages/Settings/PreferencesPanel.tsx
@@ -94,7 +94,7 @@ export function PreferencesPanel() {
          <text fg={focusField() === "theme" ? theme.primary : theme.textMuted}>
            Theme:
          </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
            <text fg={theme.text}>
              {THEME_LABELS.find((t) => t.value === settings().theme)?.label}
            </text>
@@ -106,7 +106,7 @@ export function PreferencesPanel() {
          <text fg={focusField() === "font" ? theme.primary : theme.textMuted}>
            Font Size:
          </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
            <text fg={theme.text}>{settings().fontSize}px</text>
          </box>
          <text fg={theme.textMuted}>[Left/Right]</text>
@@ -116,7 +116,7 @@ export function PreferencesPanel() {
          <text fg={focusField() === "speed" ? theme.primary : theme.textMuted}>
            Playback:
          </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
            <text fg={theme.text}>{settings().playbackSpeed}x</text>
          </box>
          <text fg={theme.textMuted}>[Left/Right]</text>
@@ -128,7 +128,7 @@ export function PreferencesPanel() {
          >
            Show Explicit:
          </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
            <text
              fg={preferences().showExplicit ? theme.success : theme.textMuted}
            >
@@ -142,7 +142,7 @@ export function PreferencesPanel() {
          <text fg={focusField() === "auto" ? theme.primary : theme.textMuted}>
            Auto Download:
          </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
            <text
              fg={preferences().autoDownload ? theme.success : theme.textMuted}
            >
--- a/src/pages/Settings/SettingsPage.tsx
+++ b/src/pages/Settings/SettingsPage.tsx
@@ -37,6 +37,7 @@ export function SettingsPage(props: PageProps) {
          {(section, index) => (
            <box
              border
+              borderColor={theme.border}
              padding={0}
              backgroundColor={
                activeSection() === section.id ? theme.primary : undefined
@@ -55,7 +56,7 @@ export function SettingsPage(props: PageProps) {
        </For>
      </box>

-      <box border flexGrow={1} padding={1} flexDirection="column" gap={1}>
+      <box border borderColor={theme.border} flexGrow={1} padding={1} flexDirection="column" gap={1}>
        {activeSection() === SettingsPaneType.SYNC && <SyncPanel />}
        {activeSection() === SettingsPaneType.SOURCES && (
          <SourceManager focused />
--- a/src/pages/Settings/SourceManager.tsx
+++ b/src/pages/Settings/SourceManager.tsx
@@ -8,6 +8,7 @@ import { useFeedStore } from "@/stores/feed";
 import { useTheme } from "@/context/ThemeContext";
 import { SourceType } from "@/types/source";
 import type { PodcastSource } from "@/types/source";
+import { SelectableBox, SelectableText } from "@/components/Selectable";

 interface SourceManagerProps {
  focused?: boolean;
@@ -166,12 +167,12 @@ export function SourceManager(props: SourceManagerProps) {
  const sourceLanguage = () => selectedSource()?.language || "en_us";

  return (
-    <box flexDirection="column" border padding={1} gap={1}>
+    <box flexDirection="column" border borderColor={theme.border} padding={1} gap={1}>
      <box flexDirection="row" justifyContent="space-between">
-        <text>
+        <text fg={theme.text}>
          <strong>Podcast Sources</strong>
        </text>
-        <box border padding={0} onMouseDown={props.onClose}>
+        <box border borderColor={theme.border} padding={0} onMouseDown={props.onClose}>
          <text fg={theme.primary}>[Esc] Close</text>
        </box>
      </box>
@@ -179,28 +180,24 @@ export function SourceManager(props: SourceManagerProps) {
      <text fg={theme.textMuted}>Manage where to search for podcasts</text>

      {/* Source list */}
-      <box border padding={1} flexDirection="column" gap={1}>
+      <box border borderColor={theme.border} padding={1} flexDirection="column" gap={1}>
        <text fg={focusArea() === "list" ? theme.primary : theme.textMuted}>
          Sources:
        </text>
-        <scrollbox height={6}>
-          <For each={sources()}>
-            {(source, index) => (
-              <box
-                flexDirection="row"
-                gap={1}
-                padding={0}
-                backgroundColor={
-                  focusArea() === "list" && index() === selectedIndex()
-                    ? theme.primary
-                    : undefined
-                }
-                onMouseDown={() => {
-                  setSelectedIndex(index());
-                  setFocusArea("list");
-                  feedStore.toggleSource(source.id);
-                }}
-              >
+          <scrollbox height={6}>
+            <For each={sources()}>
+              {(source, index) => (
+                <SelectableBox
+                  selected={() => focusArea() === "list" && index() === selectedIndex()}
+                  flexDirection="row"
+                  gap={1}
+                  padding={0}
+                  onMouseDown={() => {
+                    setSelectedIndex(index());
+                    setFocusArea("list");
+                    feedStore.toggleSource(source.id);
+                  }}
+                >
                <text
                  fg={
                    focusArea() === "list" && index() === selectedIndex()
@@ -212,20 +209,13 @@ export function SourceManager(props: SourceManagerProps) {
                    ? ">"
                    : " "}
                </text>
-                <text fg={source.enabled ? theme.success : theme.error}>
-                  {source.enabled ? "[x]" : "[ ]"}
-                </text>
-                <text fg={theme.accent}>{getSourceIcon(source)}</text>
-                <text
-                  fg={
-                    focusArea() === "list" && index() === selectedIndex()
-                      ? theme.text
-                      : undefined
-                  }
+                <SelectableText
+                  selected={() => focusArea() === "list" && index() === selectedIndex()}
+                  fg={theme.text}
                >
                  {source.name}
-                </text>
-              </box>
+                </SelectableText>
+              </SelectableBox>
            )}
          </For>
        </scrollbox>
@@ -243,6 +233,7 @@ export function SourceManager(props: SourceManagerProps) {
          <box flexDirection="row" gap={2}>
            <box
              border
+              borderColor={theme.border}
              padding={0}
              backgroundColor={
                focusArea() === "country" ? theme.primary : undefined
@@ -256,6 +247,7 @@ export function SourceManager(props: SourceManagerProps) {
            </box>
            <box
              border
+              borderColor={theme.border}
              padding={0}
              backgroundColor={
                focusArea() === "language" ? theme.primary : undefined
@@ -272,6 +264,7 @@ export function SourceManager(props: SourceManagerProps) {
            </box>
            <box
              border
+              borderColor={theme.border}
              padding={0}
              backgroundColor={
                focusArea() === "explicit" ? theme.primary : undefined
@@ -293,7 +286,7 @@ export function SourceManager(props: SourceManagerProps) {
      </box>

      {/* Add new source form */}
-      <box border padding={1} flexDirection="column" gap={1}>
+      <box border borderColor={theme.border} padding={1} flexDirection="column" gap={1}>
        <text
          fg={
            focusArea() === "add" || focusArea() === "url"
@@ -329,7 +322,7 @@ export function SourceManager(props: SourceManagerProps) {
          />
        </box>

-        <box border padding={0} width={15} onMouseDown={handleAddSource}>
+        <box border borderColor={theme.border} padding={0} width={15} onMouseDown={handleAddSource}>
          <text fg={theme.success}>[+] Add Source</text>
        </box>
      </box>
--- a/src/pages/Settings/SyncError.tsx
+++ b/src/pages/Settings/SyncError.tsx
@@ -1,14 +1,17 @@
+import { useTheme } from "@/context/ThemeContext"
+
 type SyncErrorProps = {
  message: string
  onRetry: () => void
 }

 export function SyncError(props: SyncErrorProps) {
+  const { theme } = useTheme();
  return (
    <box border title="Error" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
-      <text>{props.message}</text>
-      <box border onMouseDown={props.onRetry}>
-        <text>Retry</text>
+      <text fg={theme.text}>{props.message}</text>
+      <box border borderColor={theme.border} onMouseDown={props.onRetry}>
+        <text fg={theme.text}>Retry</text>
      </box>
    </box>
  )
--- a/src/pages/Settings/SyncPanel.tsx
+++ b/src/pages/Settings/SyncPanel.tsx
@@ -8,18 +8,20 @@ const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
 import { ImportDialog } from "./ImportDialog"
 import { ExportDialog } from "./ExportDialog"
 import { SyncStatus } from "./SyncStatus"
+import { useTheme } from "@/context/ThemeContext"

 export function SyncPanel() {
+  const { theme } = useTheme();
  const mode = createSignal<"import" | "export" | null>(null)

  return (
    <box style={{ flexDirection: "column", gap: 1 }}>
      <box style={{ flexDirection: "row", gap: 1 }}>
-        <box border onMouseDown={() => mode[1]("import")}>
-          <text>Import</text>
+        <box border borderColor={theme.border} onMouseDown={() => mode[1]("import")}>
+          <text fg={theme.text}>Import</text>
        </box>
-        <box border onMouseDown={() => mode[1]("export")}>
-          <text>Export</text>
+        <box border borderColor={theme.border} onMouseDown={() => mode[1]("export")}>
+          <text fg={theme.text}>Export</text>
        </box>
      </box>
      <SyncStatus />
--- a/src/pages/Settings/SyncProgress.tsx
+++ b/src/pages/Settings/SyncProgress.tsx
@@ -1,8 +1,11 @@
+import { useTheme } from "@/context/ThemeContext"
+
 type SyncProgressProps = {
  value: number
 }

 export function SyncProgress(props: SyncProgressProps) {
+  const { theme } = useTheme();
  const width = 30
  let filled = (props.value / 100) * width
  filled = filled >= 0 ? filled : 0
@@ -18,8 +21,8 @@ export function SyncProgress(props: SyncProgressProps) {

  return (
    <box style={{ flexDirection: "column" }}>
-      <text>{bar}</text>
-      <text>{props.value}%</text>
+      <text fg={theme.text}>{bar}</text>
+      <text fg={theme.text}>{props.value}%</text>
    </box>
  )
 }
--- a/src/pages/Settings/SyncStatus.tsx
+++ b/src/pages/Settings/SyncStatus.tsx
@@ -7,10 +7,12 @@ const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {

 import { SyncProgress } from "./SyncProgress"
 import { SyncError } from "./SyncError"
+import { useTheme } from "@/context/ThemeContext"

 type SyncState = "idle" | "syncing" | "complete" | "error"

 export function SyncStatus() {
+  const { theme } = useTheme();
  const state = createSignal<SyncState>("idle")
  const message = createSignal("Idle")
  const progress = createSignal(0)
@@ -35,15 +37,15 @@ export function SyncStatus() {
  }

  return (
-    <box border title="Sync Status" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
+    <box border title="Sync Status" borderColor={theme.border} style={{ padding: 1, flexDirection: "column", gap: 1 }}>
      <box style={{ flexDirection: "row", gap: 1 }}>
-        <text>Status:</text>
-        <text>{message[0]()}</text>
+        <text fg={theme.text}>Status:</text>
+        <text fg={theme.text}>{message[0]()}</text>
      </box>
      <SyncProgress value={progress[0]()} />
      {state[0]() === "error" ? <SyncError message={message[0]()} onRetry={() => toggle()} /> : null}
-      <box border onMouseDown={toggle}>
-        <text>Cycle Status</text>
+      <box border borderColor={theme.border} onMouseDown={toggle}>
+        <text fg={theme.text}>Cycle Status</text>
      </box>
    </box>
  )
--- a/src/pages/Settings/VisualizerSettings.tsx
+++ b/src/pages/Settings/VisualizerSettings.tsx
@@ -99,7 +99,7 @@ export function VisualizerSettings() {
          <text fg={focusField() === "bars" ? theme.primary : theme.textMuted}>
            Bars:
          </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
            <text fg={theme.text}>{viz().bars}</text>
          </box>
          <text fg={theme.textMuted}>[Left/Right +/-8]</text>
@@ -113,7 +113,7 @@ export function VisualizerSettings() {
          >
            Auto Sensitivity:
          </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
            <text
              fg={viz().sensitivity === 1 ? theme.success : theme.textMuted}
            >
@@ -127,7 +127,7 @@ export function VisualizerSettings() {
          <text fg={focusField() === "noise" ? theme.primary : theme.textMuted}>
            Noise Reduction:
          </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
            <text fg={theme.text}>{viz().noiseReduction.toFixed(2)}</text>
          </box>
          <text fg={theme.textMuted}>[Left/Right +/-0.05]</text>
@@ -139,7 +139,7 @@ export function VisualizerSettings() {
          >
            Low Cutoff:
          </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
            <text fg={theme.text}>{viz().lowCutOff} Hz</text>
          </box>
          <text fg={theme.textMuted}>[Left/Right +/-10]</text>
@@ -151,7 +151,7 @@ export function VisualizerSettings() {
          >
            High Cutoff:
          </text>
-          <box border padding={0}>
+          <box border borderColor={theme.border} padding={0}>
            <text fg={theme.text}>{viz().highCutOff} Hz</text>
          </box>
          <text fg={theme.textMuted}>[Left/Right +/-500]</text>
--- a/src/ui/command.tsx
+++ b/src/ui/command.tsx
@@ -15,6 +15,7 @@ import { useDialog } from "./dialog";
 import { useTheme } from "../context/ThemeContext";
 import { TextAttributes } from "@opentui/core";
 import { emit } from "../utils/event-bus";
+import { SelectableBox, SelectableText } from "@/components/Selectable";

 /**
 * Command option for the command palette.
@@ -281,37 +282,53 @@ function CommandDialog(props: {
      <box flexDirection="column" maxHeight={maxHeight} borderColor={theme.border}>
        <For each={filteredOptions().slice(0, 10)}>
          {(option, index) => (
-            <box
-              backgroundColor={
-                index() === selectedIndex() ? theme.primary : undefined
-              }
+            <SelectableBox
+              selected={() => index() === selectedIndex()}
+              flexDirection="column"
              padding={1}
+              onMouseDown={() => {
+                setSelectedIndex(index());
+                const selectedOption = filteredOptions()[index()];
+                if (selectedOption) {
+                  selectedOption.onSelect?.(dialog);
+                  dialog.clear();
+                }
+              }}
            >
              <box flexDirection="column" flexGrow={1}>
-                <box flexDirection="row" justifyContent="space-between">
-                  <text
-                    fg={
-                      index() === selectedIndex()
-                        ? theme.selectedListItemText
-                        : theme.text
-                    }
-                    attributes={
-                      index() === selectedIndex()
-                        ? TextAttributes.BOLD
-                        : undefined
-                    }
+                <SelectableText
+                  selected={() => index() === selectedIndex()}
+                  fg={
+                    index() === selectedIndex()
+                      ? theme.selectedListItemText
+                      : theme.text
+                  }
+                  attributes={
+                    index() === selectedIndex()
+                      ? TextAttributes.BOLD
+                      : undefined
+                  }
+                >
+                  {option.title}
+                </SelectableText>
+                <Show when={option.footer}>
+                  <SelectableText
+                    selected={() => index() === selectedIndex()}
+                    fg={theme.textMuted}
                  >
-                    {option.title}
-                  </text>
-                  <Show when={option.footer}>
-                    <text fg={theme.textMuted}>{option.footer}</text>
-                  </Show>
-                </box>
+                    {option.footer}
+                  </SelectableText>
+                </Show>
                <Show when={option.description}>
-                  <text fg={theme.textMuted}>{option.description}</text>
+                  <SelectableText
+                    selected={() => index() === selectedIndex()}
+                    fg={theme.textMuted}
+                  >
+                    {option.description}
+                  </SelectableText>
                </Show>
              </box>
-            </box>
+            </SelectableBox>
          )}
        </For>
        <Show when={filteredOptions().length === 0}>
Author	SHA1	Message	Date
Michael Freno	72000b362d	use of selectable	2026-02-11 21:57:17 -05:00
Michael Freno	9a2b790897	for consistency	2026-02-11 14:10:35 -05:00
Michael Freno	2dfc96321b	colors	2026-02-11 11:16:18 -05:00
Michael Freno	3d5bc84550	set	2026-02-10 15:30:53 -05:00