use of selectable

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%"

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" ? "]" : " "}

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>
+  );
+}

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 fg={theme.text}>{shortcuts[0]?.keys ?? ""} </text>
-          <text>{shortcuts[0]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[0]?.action ?? ""}</text>
         </box>
         <box style={{ flexDirection: "row" }}>
-          <text>{shortcuts[1]?.keys ?? ""} </text>
+          <text fg={theme.text}>{shortcuts[1]?.keys ?? ""} </text>
-          <text>{shortcuts[1]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[1]?.action ?? ""}</text>
         </box>
         <box style={{ flexDirection: "row" }}>
-          <text>{shortcuts[2]?.keys ?? ""} </text>
+          <text fg={theme.text}>{shortcuts[2]?.keys ?? ""} </text>
-          <text>{shortcuts[2]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[2]?.action ?? ""}</text>
         </box>
         <box style={{ flexDirection: "row" }}>
-          <text>{shortcuts[3]?.keys ?? ""} </text>
+          <text fg={theme.text}>{shortcuts[3]?.keys ?? ""} </text>
-          <text>{shortcuts[3]?.action ?? ""}</text>
+          <text fg={theme.text}>{shortcuts[3]?.action ?? ""}</text>
         </box>
       </box>
     </box>

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
+            <SelectableText
-              style={{
+              selected={() => tab.id == props.activeTab}
-                fg: tab.id == props.activeTab ? "white" : theme.text,
+              alignSelf="center"
-                alignSelf: "center",
-              }}
             >
               {tab.label}
-            </text>
+            </SelectableText>
-          </box>
+          </SelectableBox>
         )}
       </For>
     </box>

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,
@@ -61,15 +62,17 @@ export function DiscoverPage(props: PageProps) {
                  discoverStore.selectedCategory() === category.id;
 
                return (
-                <box
+                 <SelectableBox
-                  border={isSelected()}
+                   selected={isSelected}
-                  backgroundColor={isSelected() ? theme.accent : undefined}
                    onMouseDown={() => handleCategorySelect(category.id)}
                  >
-                  <text fg={isSelected() ? theme.primary : theme.textMuted}>
+                   <SelectableText
+                     selected={isSelected}
+                     fg={theme.primary}
+                   >
                      {category.icon} {category.name}
-                  </text>
+                   </SelectableText>
-                </box>
+                 </SelectableBox>
                );
              }}
            </For>

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,17 +22,16 @@ 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}>
+        <SelectableText selected={() => props.selected}>
           <strong>{props.podcast.title}</strong>
-            </text>
+        </SelectableText>
 
         <Show when={props.podcast.isSubscribed}>
           <text fg={theme.success}>[+]</text>
@@ -40,24 +40,31 @@ export function PodcastCard(props: PodcastCardProps) {
 
       {/* 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)}>
@@ -73,7 +80,6 @@ export function PodcastCard(props: PodcastCardProps) {
           </text>
         </box>
       </Show>
-      </box>
+    </SelectableBox>
-    </box>
   );
 }

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}>
+              <SelectableText
-                  <text fg={index() === selectedIndex() ? theme.primary : theme.textMuted}>
+                selected={() => index() === selectedIndex()}
+                fg={theme.primary}
+              >
                 {index() === selectedIndex() ? ">" : " "}
-                  </text>
+              </SelectableText>
-                  <text fg={index() === selectedIndex() ? theme.text : undefined}>
+              <SelectableText
+                selected={() => index() === selectedIndex()}
+                fg={theme.text}
+              >
                 {episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""}
                 {episode.title}
-                  </text>
+              </SelectableText>
-              </box>
               <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>

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}
+        onMouseDown={() => {}}
+      >
+        <SelectableText
+          selected={() => props.isSelected}
+          fg={theme.primary}
         >
-      <text fg={props.isSelected ? theme.primary : theme.textMuted}>
           {props.isSelected ? ">" : " "}
-      </text>
+        </SelectableText>
-      <text fg={visibilityColor()}>{visibilityIcon()}</text>
+        <SelectableText
-      <text fg={props.isSelected ? theme.text : theme.accent}>
+          selected={() => props.isSelected}
+          fg={visibilityColor()}
+        >
+          {visibilityIcon()}
+        </SelectableText>
+        <SelectableText
+          selected={() => props.isSelected}
+          fg={theme.text}
+        >
           {props.feed.customName || props.feed.podcast.title}
-      </text>
+        </SelectableText>
-      {props.showEpisodeCount && <text fg={theme.textMuted}>({episodeCount()})</text>}
+        {props.showEpisodeCount && (
-      </box>
+          <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>
+        </SelectableText>
-        <text fg={visibilityColor()}>{visibilityIcon()}</text>
+        <SelectableText
-        <text fg={theme.warning}>{pinnedIndicator()}</text>
+          selected={() => props.isSelected}
-        <text fg={props.isSelected ? theme.text : theme.text}>
+          fg={visibilityColor()}
-          <strong>
+        >
-            {props.feed.customName || props.feed.podcast.title}
+          {visibilityIcon()}
-          </strong>
+        </SelectableText>
-        </text>
+        <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}>
+        <SelectableText
-          <text fg={theme.textMuted}>
+          selected={() => props.isSelected}
+          paddingLeft={4}
+          paddingTop={0}
+          fg={theme.textMuted}
+        >
           {props.feed.podcast.description.slice(0, 60)}
           {props.feed.podcast.description.length > 60 ? "..." : ""}
-          </text>
+        </SelectableText>
-        </box>
       )}
-    </box>
+    </SelectableBox>
   );
 }

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()}>
+          <For each={Object.entries(episodesByDate()).sort(([a], [b]) => b.localeCompare(a))}>
-            {(item, index) => (
+            {([date, episode], groupIndex) => (
-              <box
+              <>
+                <box flexDirection="column" gap={0} paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1}>
+                  <text fg={theme.primary}>{date}</text>
+                </box>
+                <SelectableBox
+                  selected={() => groupIndex() === selectedIndex()}
                   flexDirection="column"
                   gap={0}
                   paddingLeft={1}
                   paddingRight={1}
                   paddingTop={0}
                   paddingBottom={0}
-                backgroundColor={
+                  onMouseDown={() => setSelectedIndex(groupIndex())}
-                  index() === selectedIndex() ? theme.backgroundElement : undefined
-                }
-                onMouseDown={() => setSelectedIndex(index())}
                 >
-                <box flexDirection="row" gap={1}>
+                  <SelectableText selected={() => groupIndex() === selectedIndex()}>
-                  <text fg={index() === selectedIndex() ? theme.primary : theme.textMuted}>
+                    {groupIndex() === selectedIndex() ? ">" : " "}
-                    {index() === selectedIndex() ? ">" : " "}
+                  </SelectableText>
-                  </text>
+                  <SelectableText
-                  <text fg={index() === selectedIndex() ? theme.text : theme.text}>
+                    selected={() => groupIndex() === selectedIndex()}
-                    {item.episode.title}
+                    fg={theme.text}
-                  </text>
+                  >
-                </box>
+                    {episode.episode.title}
+                  </SelectableText>
                   <box flexDirection="row" gap={2} paddingLeft={2}>
-                  <text fg={theme.primary}>{item.feed.podcast.title}</text>
+                    <text fg={theme.primary}>{episode.feed.podcast.title}</text>
-                  <text fg={theme.textMuted}>{formatDate(item.episode.pubDate)}</text>
+                    <text fg={theme.textMuted}>
-                  <text fg={theme.textMuted}>{formatDuration(item.episode.duration)}</text>
+                      {formatDate(episode.episode.pubDate)}
-                </box>
+                    </text>
+                    <text fg={theme.textMuted}>
+                      {formatDuration(episode.episode.duration)}
+                    </text>
                   </box>
+                </SelectableBox>
+              </>
             )}
           </For>
         </scrollbox>

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>
@@ -210,11 +215,21 @@ export function MyShowsPage(props: PageProps) {
                     onMouseDown={() => setEpisodeIndex(index())}
                   >
                     <box flexDirection="row" gap={1}>
-                          <text fg={index() === episodeIndex() ? theme.primary : theme.muted}>
+                      <text
+                        fg={
+                          index() === episodeIndex()
+                            ? theme.surface
+                            : theme.text
+                        }
+                      >
                         {index() === episodeIndex() ? ">" : " "}
                       </text>
                       <text
-                            fg={index() === episodeIndex() ? theme.text : undefined}
+                        fg={
+                          index() === episodeIndex()
+                            ? theme.surface
+                            : theme.text
+                        }
                       >
                         {episode.episodeNumber
                           ? `#${episode.episodeNumber} `
@@ -223,8 +238,14 @@ export function MyShowsPage(props: PageProps) {
                       </text>
                     </box>
                     <box flexDirection="row" gap={2} paddingLeft={2}>
-                          <text fg={theme.muted}>{formatDate(episode.pubDate)}</text>
+                      <text
-                          <text fg={theme.muted}>{formatDuration(episode.duration)}</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)}

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>

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,7 +249,7 @@ export function RealtimeWaveform(props: RealtimeWaveformProps) {
   };
 
   return (
-    <box border padding={1} onMouseDown={handleClick}>
+    <box border borderColor={theme.border} padding={1} onMouseDown={handleClick}>
       {renderLine()}
     </box>
   );

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>
   );
 }

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}>
+                    <SelectableText
-                      <text fg={theme.textMuted}>{">"}</text>
+                      selected={isSelected}
-                      <text fg={isSelected() ? theme.primary : theme.text}>{query}</text>
+                      fg={theme.textMuted}
-                    </box>
+                    >
+                      {">"}
+                    </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>

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

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>
+      <box border borderColor={theme.border}>
-        <text>Export {format[0]()} to {filename[0]()}</text>
+        <text fg={theme.text}>Export {format[0]()} to {filename[0]()}</text>
       </box>
       <SyncStatus />
     </box>

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>
   );
 }

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>
+      <box border borderColor={theme.border}>
-        <text>Import selected file</text>
+        <text fg={theme.text}>Import selected file</text>
       </box>
     </box>
   )

src/pages/Settings/LoginScreen.tsx

@@ -83,8 +83,8 @@ export function LoginScreen(props: LoginScreenProps) {
   };
 
   return (
-    <box flexDirection="column" border padding={2} gap={1}>
+    <box flexDirection="column" border borderColor={theme.border} padding={2} gap={1}>
-      <text>
+      <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}
         >

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}
             >

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 />

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,22 +180,18 @@ 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
+                <SelectableBox
+                  selected={() => focusArea() === "list" && index() === selectedIndex()}
                   flexDirection="row"
                   gap={1}
                   padding={0}
-                backgroundColor={
-                  focusArea() === "list" && index() === selectedIndex()
-                    ? theme.primary
-                    : undefined
-                }
                   onMouseDown={() => {
                     setSelectedIndex(index());
                     setFocusArea("list");
@@ -212,20 +209,13 @@ export function SourceManager(props: SourceManagerProps) {
                     ? ">"
                     : " "}
                 </text>
-                <text fg={source.enabled ? theme.success : theme.error}>
+                <SelectableText
-                  {source.enabled ? "[x]" : "[ ]"}
+                  selected={() => focusArea() === "list" && index() === selectedIndex()}
-                </text>
+                  fg={theme.text}
-                <text fg={theme.accent}>{getSourceIcon(source)}</text>
-                <text
-                  fg={
-                    focusArea() === "list" && index() === selectedIndex()
-                      ? theme.text
-                      : undefined
-                  }
                 >
                   {source.name}
-                </text>
+                </SelectableText>
-              </box>
+              </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>

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>
+      <text fg={theme.text}>{props.message}</text>
-      <box border onMouseDown={props.onRetry}>
+      <box border borderColor={theme.border} onMouseDown={props.onRetry}>
-        <text>Retry</text>
+        <text fg={theme.text}>Retry</text>
       </box>
     </box>
   )

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")}>
+        <box border borderColor={theme.border} onMouseDown={() => mode[1]("import")}>
-          <text>Import</text>
+          <text fg={theme.text}>Import</text>
         </box>
-        <box border onMouseDown={() => mode[1]("export")}>
+        <box border borderColor={theme.border} onMouseDown={() => mode[1]("export")}>
-          <text>Export</text>
+          <text fg={theme.text}>Export</text>
         </box>
       </box>
       <SyncStatus />

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 fg={theme.text}>{bar}</text>
-      <text>{props.value}%</text>
+      <text fg={theme.text}>{props.value}%</text>
     </box>
   )
 }

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 fg={theme.text}>Status:</text>
-        <text>{message[0]()}</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}>
+      <box border borderColor={theme.border} onMouseDown={toggle}>
-        <text>Cycle Status</text>
+        <text fg={theme.text}>Cycle Status</text>
       </box>
     </box>
   )

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>

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,15 +282,22 @@ function CommandDialog(props: {
       <box flexDirection="column" maxHeight={maxHeight} borderColor={theme.border}>
         <For each={filteredOptions().slice(0, 10)}>
           {(option, index) => (
-            <box
+            <SelectableBox
-              backgroundColor={
+              selected={() => index() === selectedIndex()}
-                index() === selectedIndex() ? theme.primary : undefined
+              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">
+                <SelectableText
-                  <text
+                  selected={() => index() === selectedIndex()}
                   fg={
                     index() === selectedIndex()
                       ? theme.selectedListItemText
@@ -302,16 +310,25 @@ function CommandDialog(props: {
                   }
                 >
                   {option.title}
-                  </text>
+                </SelectableText>
                 <Show when={option.footer}>
-                    <text fg={theme.textMuted}>{option.footer}</text>
+                  <SelectableText
+                    selected={() => index() === selectedIndex()}
+                    fg={theme.textMuted}
+                  >
+                    {option.footer}
+                  </SelectableText>
                 </Show>
-                </box>
                 <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}>