getting keybinds going

src/pages/Feed/FeedPage.tsx

@@ -5,6 +5,7 @@
 
 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";
@@ -18,10 +19,14 @@ enum FeedPaneType {
 }
 export const FeedPaneCount = 1;
 
+/** Episodes to load per batch */
+const ITEMS_PER_BATCH = 50;
+
 export function FeedPage(props: PageProps) {
   const feedStore = useFeedStore();
   const [selectedIndex, setSelectedIndex] = createSignal(0);
   const [isRefreshing, setIsRefreshing] = createSignal(false);
+  const [loadedEpisodesCount, setLoadedEpisodesCount] = createSignal(ITEMS_PER_BATCH);
 
   const allEpisodes = () => feedStore.getAllEpisodesChronological();
 
@@ -29,9 +34,14 @@ export function FeedPage(props: PageProps) {
     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 = allEpisodes();
+    const sortedEpisodes = paginatedEpisodes();
 
     for (const episode of sortedEpisodes) {
       const dateKey = formatDate(new Date(episode.episode.pubDate));
@@ -54,6 +64,11 @@ export function FeedPage(props: PageProps) {
     setIsRefreshing(false);
   };
 
+  const handleScrollDown = async () => {
+    if (feedStore.isLoadingMore() || !feedStore.hasMoreEpisodes()) return;
+    await feedStore.loadMoreEpisodes();
+  };
+
   const { theme } = useTheme();
   return (
     <box
@@ -131,6 +146,12 @@ export function FeedPage(props: PageProps) {
               );
             }}
           </For>
+          {/* Loading indicator */}
+          <Show when={feedStore.isLoadingMore()}>
+            <box padding={1}>
+              <text fg={theme.textMuted}>Loading more episodes...</text>
+            </box>
+          </Show>
         </scrollbox>
       </Show>
     </box>