feat(micro): add pagination to TUI browser

- Implement offset-based pagination with 20 posts per page
- Add Previous/Next navigation controls
- Show current page and total pages in UI
- Automatically adjust page when deleting last post on a page
- Refactor showPostActions to return boolean indicating deletion

Co-authored-by: Justin Bennett <just-be-dev@users.noreply.github.com>

Author: github-actions[bot]

packages/micro/src/browse.ts

@@ -1,9 +1,11 @@
 import * as p from "@clack/prompts";
-import { desc, eq } from "drizzle-orm";
+import { count, desc, eq } from "drizzle-orm";
 import { getD1Database, microPosts } from "./db.ts";
 
 type Post = typeof microPosts.$inferSelect;
 
+const PAGE_SIZE = 20;
+
 export async function browse() {
   p.intro("Micro Blog Browser");
 
@@ -13,21 +15,34 @@ export async function browse() {
   try {
     const { db, dispose } = await getD1Database();
 
-    // Fetch all posts, newest first
-    const posts = await db.select().from(microPosts).orderBy(desc(microPosts.createdAt));
+    // Get total count
+    const [{ total }] = await db.select({ total: count() }).from(microPosts);
 
-    spinner.stop(`Found ${posts.length} post(s)`);
+    spinner.stop(`Found ${total} post(s)`);
 
-    if (posts.length === 0) {
+    if (total === 0) {
       p.note("No posts yet. Create one with 'micro post'", "Empty");
       await dispose();
       return;
     }
 
+    // Track pagination state
+    let currentPage = 0;
+    const totalPages = Math.ceil(total / PAGE_SIZE);
+
     // Show posts in a loop until user exits
     let shouldContinue = true;
 
     while (shouldContinue) {
+      // Fetch current page of posts
+      const offset = currentPage * PAGE_SIZE;
+      const posts = await db
+        .select()
+        .from(microPosts)
+        .orderBy(desc(microPosts.createdAt))
+        .limit(PAGE_SIZE)
+        .offset(offset);
+
       const options = posts.map((post) => {
         const preview =
           post.content.length > 60 ? post.content.substring(0, 60) + "..." : post.content;
@@ -39,14 +54,34 @@ export async function browse() {
         };
       });
 
+      // Add pagination controls
+      const hasPrevious = currentPage > 0;
+      const hasNext = currentPage < totalPages - 1;
+
+      if (hasPrevious) {
+        options.push({
+          value: -2,
+          label: "← Previous page",
+          hint: `Page ${currentPage}/${totalPages}`,
+        });
+      }
+
+      if (hasNext) {
+        options.push({
+          value: -3,
+          label: "Next page →",
+          hint: `Page ${currentPage + 2}/${totalPages}`,
+        });
+      }
+
       options.push({
         value: -1,
         label: "Exit",
         hint: "",
       });
 
       const selectedId = await p.select({
-        message: "Select a post to view options",
+        message: `Select a post to view options (Page ${currentPage + 1}/${totalPages})`,
         options,
       });
 
@@ -55,11 +90,34 @@ export async function browse() {
         continue;
       }
 
+      // Handle pagination
+      if (selectedId === -2) {
+        currentPage = Math.max(0, currentPage - 1);
+        continue;
+      }
+
+      if (selectedId === -3) {
+        currentPage = Math.min(totalPages - 1, currentPage + 1);
+        continue;
+      }
+
       const selectedPost = posts.find((p) => p.id === selectedId);
       if (!selectedPost) continue;
 
       // Show post details and actions
-      await showPostActions(db, selectedPost, posts);
+      const deleted = await showPostActions(db, selectedPost);
+
+      // If post was deleted, refresh the page
+      if (deleted) {
+        // Reload total count
+        const [{ total: newTotal }] = await db.select({ total: count() }).from(microPosts);
+        const newTotalPages = Math.ceil(newTotal / PAGE_SIZE);
+
+        // If we deleted the last post on a page, go back one page
+        if (currentPage >= newTotalPages && currentPage > 0) {
+          currentPage = newTotalPages - 1;
+        }
+      }
     }
 
     await dispose();
@@ -73,8 +131,7 @@ export async function browse() {
 async function showPostActions(
   db: ReturnType<typeof getD1Database> extends Promise<{ db: infer D }> ? D : never,
   post: Post,
-  allPosts: Post[],
-) {
+): Promise<boolean> {
   const syndicatedData =
     (post.syndicatedTo as Array<{ platform: string; id: string; url: string }> | null) || [];
   const syndicatedPlatforms = syndicatedData.map((s) => s.platform);
@@ -105,7 +162,7 @@ async function showPostActions(
   });
 
   if (p.isCancel(action) || action === "back") {
-    return;
+    return false;
   }
 
   switch (action) {
@@ -114,27 +171,27 @@ async function showPostActions(
       const url = `https://just-be.dev/micro#post-${post.id}`;
       console.log(`Opening: ${url}`);
       await Bun.spawn(["open", url]);
-      break;
+      return false;
     }
     case "open-bluesky": {
       const blueskyData = syndicatedData.find((s) => s.platform === "bluesky");
       if (!blueskyData) {
         p.note("This post hasn't been syndicated to Bluesky yet", "Not available");
-        break;
+        return false;
       }
       console.log(`Opening: ${blueskyData.url}`);
       await Bun.spawn(["open", blueskyData.url]);
-      break;
+      return false;
     }
     case "open-twitter": {
       const twitterData = syndicatedData.find((s) => s.platform === "twitter");
       if (!twitterData) {
         p.note("This post hasn't been syndicated to Twitter yet", "Not available");
-        break;
+        return false;
       }
       console.log(`Opening: ${twitterData.url}`);
       await Bun.spawn(["open", twitterData.url]);
-      break;
+      return false;
     }
     case "delete": {
       const confirmed = await p.confirm({
@@ -144,22 +201,18 @@ async function showPostActions(
 
       if (p.isCancel(confirmed) || !confirmed) {
         p.note("Delete cancelled", "Cancelled");
-        break;
+        return false;
       }
 
       const spinner = p.spinner();
       spinner.start("Deleting post...");
 
       await db.delete(microPosts).where(eq(microPosts.id, post.id));
 
-      // Remove from the posts array
-      const index = allPosts.findIndex((p) => p.id === post.id);
-      if (index > -1) {
-        allPosts.splice(index, 1);
-      }
-
       spinner.stop(`Post #${post.id} deleted successfully`);
-      break;
+      return true;
     }
   }
+
+  return false;
 }