continued out the reuse

src/pages/Feed/FeedItem.tsx

@@ -54,26 +54,26 @@ export function FeedItem(props: FeedItemProps) {
       >
         <SelectableText
           selected={() => props.isSelected}
-          fg={theme.primary}
+          primary
         >
           {props.isSelected ? ">" : " "}
         </SelectableText>
         <SelectableText
           selected={() => props.isSelected}
-          fg={visibilityColor()}
+          tertiary
         >
           {visibilityIcon()}
         </SelectableText>
         <SelectableText
           selected={() => props.isSelected}
-          fg={theme.text}
+          primary
         >
           {props.feed.customName || props.feed.podcast.title}
         </SelectableText>
         {props.showEpisodeCount && (
           <SelectableText
             selected={() => props.isSelected}
-            fg={theme.textMuted}
+            tertiary
           >
             ({episodeCount()})
           </SelectableText>
@@ -95,25 +95,25 @@ export function FeedItem(props: FeedItemProps) {
       <box flexDirection="row" gap={1}>
         <SelectableText
           selected={() => props.isSelected}
-          fg={theme.primary}
+          primary
         >
           {props.isSelected ? ">" : " "}
         </SelectableText>
         <SelectableText
           selected={() => props.isSelected}
-          fg={visibilityColor()}
+          tertiary
         >
           {visibilityIcon()}
         </SelectableText>
         <SelectableText
           selected={() => props.isSelected}
-          fg={theme.warning}
+          secondary
         >
           {pinnedIndicator()}
         </SelectableText>
         <SelectableText
           selected={() => props.isSelected}
-          fg={theme.text}
+          primary
         >
           <strong>{props.feed.customName || props.feed.podcast.title}</strong>
         </SelectableText>
@@ -123,7 +123,7 @@ export function FeedItem(props: FeedItemProps) {
         {props.showEpisodeCount && (
           <SelectableText
             selected={() => props.isSelected}
-            fg={theme.textMuted}
+            tertiary
           >
             {episodeCount()} episodes ({unplayedCount()} new)
           </SelectableText>
@@ -131,7 +131,7 @@ export function FeedItem(props: FeedItemProps) {
         {props.showLastUpdated && (
           <SelectableText
             selected={() => props.isSelected}
-            fg={theme.textMuted}
+            tertiary
           >
             Updated: {formatDate(props.feed.lastUpdated)}
           </SelectableText>
@@ -143,7 +143,7 @@ export function FeedItem(props: FeedItemProps) {
           selected={() => props.isSelected}
           paddingLeft={4}
           paddingTop={0}
-          fg={theme.textMuted}
+          tertiary
         >
           {props.feed.podcast.description.slice(0, 60)}
           {props.feed.podcast.description.length > 60 ? "..." : ""}

src/pages/Feed/FeedPage.tsx

@@ -80,9 +80,9 @@ export function FeedPage(props: PageProps) {
           <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="column" gap={0} paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1}>
+                   <SelectableText selected={() => false} primary>{date}</SelectableText>
+                 </box>
                 <SelectableBox
                   selected={() => groupIndex() === selectedIndex()}
                   flexDirection="column"
@@ -93,23 +93,25 @@ export function FeedPage(props: PageProps) {
                   paddingBottom={0}
                   onMouseDown={() => setSelectedIndex(groupIndex())}
                 >
-                  <SelectableText selected={() => groupIndex() === selectedIndex()}>
+                   <SelectableText selected={() => groupIndex() === selectedIndex()} primary>
                     {groupIndex() === selectedIndex() ? ">" : " "}
                   </SelectableText>
                   <SelectableText
                     selected={() => groupIndex() === selectedIndex()}
-                    fg={theme.text}
+                    primary
                   >
                     {episode.episode.title}
                   </SelectableText>
                   <box flexDirection="row" gap={2} paddingLeft={2}>
-                    <text fg={theme.primary}>{episode.feed.podcast.title}</text>
-                    <text fg={theme.textMuted}>
+                    <SelectableText selected={() => groupIndex() === selectedIndex()} primary>
+                      {episode.feed.podcast.title}
+                    </SelectableText>
+                    <SelectableText selected={() => groupIndex() === selectedIndex()} tertiary>
                       {formatDate(episode.episode.pubDate)}
-                    </text>
-                    <text fg={theme.textMuted}>
+                    </SelectableText>
+                    <SelectableText selected={() => groupIndex() === selectedIndex()} tertiary>
                       {formatDuration(episode.episode.duration)}
-                    </text>
+                    </SelectableText>
                   </box>
                 </SelectableBox>
               </>