working indicator (simpler)

src/pages/Feed/FeedPage.tsx

@@ -1,18 +1,17 @@
 /**
  * FeedPage - Shows latest episodes across all subscribed shows
- * Reverse chronological order, like an inbox/timeline
+ * Reverse chronological order, grouped by date
  */
 
 import { createSignal, For, Show } from "solid-js";
 import { useFeedStore } from "@/stores/feed";
-import { useKeyboard } from "@opentui/solid";
 import { format } from "date-fns";
 import type { Episode } from "@/types/episode";
 import type { Feed } from "@/types/feed";
 import { useTheme } from "@/context/ThemeContext";
 import { SelectableBox, SelectableText } from "@/components/Selectable";
-import { se } from "date-fns/locale";
 import { useNavigation } from "@/context/NavigationContext";
+import { LoadingIndicator } from "@/components/LoadingIndicator";
 
 enum FeedPaneType {
   FEED = 1,
@@ -31,22 +30,25 @@ export function FeedPage() {
 
   const allEpisodes = () => feedStore.getAllEpisodesChronological();
 
-  const formatDate = (date: Date): string => {
-    return format(date, "MMM d, yyyy");
-  };
-
   const paginatedEpisodes = () => {
     const episodes = allEpisodes();
     return episodes.slice(0, loadedEpisodesCount());
   };
 
-  const episodesByDate = () => {
-    const groups: Record<string, { episode: Episode; feed: Feed }> = {};
-    const sortedEpisodes = paginatedEpisodes();
+  const formatDate = (date: Date): string => {
+    return format(date, "MMM d, yyyy");
+  };
 
-    for (const episode of sortedEpisodes) {
-      const dateKey = formatDate(new Date(episode.episode.pubDate));
-      groups[dateKey] = episode;
+  const groupEpisodesByDate = () => {
+    const groups: Record<string, Array<{ episode: Episode; feed: Feed }>> = {};
+    const episodes = paginatedEpisodes();
+
+    for (const item of episodes) {
+      const dateKey = formatDate(new Date(item.episode.pubDate));
+      if (!groups[dateKey]) {
+        groups[dateKey] = [];
+      }
+      groups[dateKey].push(item);
     }
 
     return groups;
@@ -59,12 +61,6 @@ export function FeedPage() {
     return `${mins}m`;
   };
 
-  const handleRefresh = async () => {
-    setIsRefreshing(true);
-    await feedStore.refreshAllFeeds();
-    setIsRefreshing(false);
-  };
-
   const { theme } = useTheme();
   return (
     <box
@@ -89,65 +85,47 @@ export function FeedPage() {
         }
       >
         <scrollbox height="100%" focused={nav.activeDepth == FeedPaneType.FEED}>
-          <For
-            each={Object.entries(episodesByDate()).sort(([a], [b]) =>
-              b.localeCompare(a),
+          <For each={Object.entries(groupEpisodesByDate()).sort(([a], [b]) => b.localeCompare(a))}>
+            {([date, episodes]) => (
+              <box flexDirection="column" gap={1} padding={1}>
+                <SelectableText selected={() => false} primary>
+                  {date}
+                </SelectableText>
+                <For each={episodes}>
+                  {(item) => (
+                    <SelectableBox
+                      selected={() => false}
+                      flexDirection="column"
+                      gap={0}
+                      paddingLeft={1}
+                      paddingRight={1}
+                      paddingTop={0}
+                      paddingBottom={0}
+                      onMouseDown={() => {
+                        // Selection is handled by App's keyboard navigation
+                      }}
+                    >
+                      <SelectableText selected={() => false} primary>
+                        {item.episode.title}
+                      </SelectableText>
+                      <box flexDirection="row" gap={2} paddingLeft={2}>
+                        <SelectableText selected={() => false} primary>
+                          {item.feed.podcast.title}
+                        </SelectableText>
+                        <SelectableText selected={() => false} tertiary>
+                          {formatDuration(item.episode.duration)}
+                        </SelectableText>
+                      </box>
+                    </SelectableBox>
+                  )}
+                </For>
+              </box>
             )}
-          >
-            {([date, episode], groupIndex) => {
-              const selected = () => groupIndex() === 1; // TODO: Manage selections locally
-              return (
-                <>
-                  <box
-                    flexDirection="column"
-                    gap={0}
-                    paddingLeft={1}
-                    paddingRight={1}
-                    paddingTop={1}
-                    paddingBottom={1}
-                  >
-                    <SelectableText selected={() => false} primary>
-                      {date}
-                    </SelectableText>
-                  </box>
-                  <SelectableBox
-                    selected={selected}
-                    flexDirection="column"
-                    gap={0}
-                    paddingLeft={1}
-                    paddingRight={1}
-                    paddingTop={0}
-                    paddingBottom={0}
-                    onMouseDown={() => {
-                      // Selection is handled by App's keyboard navigation
-                    }}
-                  >
-                    <SelectableText selected={selected} primary>
-                      {selected() ? ">" : " "}
-                    </SelectableText>
-                    <SelectableText selected={selected} primary>
-                      {episode.episode.title}
-                    </SelectableText>
-                    <box flexDirection="row" gap={2} paddingLeft={2}>
-                      <SelectableText selected={selected} primary>
-                        {episode.feed.podcast.title}
-                      </SelectableText>
-                      <SelectableText selected={selected} tertiary>
-                        {formatDate(episode.episode.pubDate)}
-                      </SelectableText>
-                      <SelectableText selected={selected} tertiary>
-                        {formatDuration(episode.episode.duration)}
-                      </SelectableText>
-                    </box>
-                  </SelectableBox>
-                </>
-              );
-            }}
           </For>
           {/* Loading indicator */}
           <Show when={feedStore.isLoadingMore()}>
             <box padding={1}>
-              <text fg={theme.textMuted}>Loading more episodes...</text>
+              <LoadingIndicator />
             </box>
           </Show>
         </scrollbox>