use of selectable

src/components/Selectable.tsx

@@ -6,14 +6,12 @@ export function SelectableBox({
   selected,
   children,
   ...props
-}: {
-  selected: () => boolean;
-  children: JSXElement;
-} & BoxOptions) {
+}: { 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}

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"

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

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;
@@ -139,11 +140,11 @@ export function FeedDetail(props: FeedDetailProps) {
       <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>

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,70 +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={() => {}}
       >
-        <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={props.isSelected ? theme.text : theme.accent}>
+        </SelectableText>
+        <SelectableText
+          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>
+          <SelectableText
+            selected={() => props.isSelected}
+            fg={theme.textMuted}
+          >
+            ({episodeCount()})
+          </SelectableText>
         )}
-      </box>
+      </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.primary : 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}>
+        </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>
-        </text>
+        </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}>
+          <SelectableText
+            selected={() => props.isSelected}
+            fg={theme.textMuted}
+          >
             Updated: {formatDate(props.feed.lastUpdated)}
-          </text>
+          </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>
   );
 }

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>

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

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;
@@ -183,24 +184,20 @@ export function SourceManager(props: SourceManagerProps) {
         <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>

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