use of selectable

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>