refactor code

bun.lock

···
         "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-dropdown-menu": "^2.1.15",
+        "@radix-ui/react-scroll-area": "^1.2.9",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tabs": "^1.1.12",
         "class-variance-authority": "^0.7.1",
···
         "react-dom": "19.1.0",
         "react-masonry-css": "^1.0.16",
         "tailwind-merge": "^3.3.1",
+        "zustand": "^5.0.7",
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
···
 
     "@poppinss/exception": ["@poppinss/exception@1.2.2", "", {}, "sha512-m7bpKCD4QMlFCjA/nKTs23fuvoVFoA83brRKmObCUNmi/9tVu8Ve3w4YQAnJu4q3Tjf5fr685HYIC/IA2zHRSg=="],
 
+    "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
+
     "@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
 
     "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w=="],
···
     "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
     "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.10", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q=="],
+
+    "@radix-ui/react-scroll-area": ["@radix-ui/react-scroll-area@1.2.9", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A=="],
 
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
···
     "youch-core": ["youch-core@0.3.3", "", { "dependencies": { "@poppinss/exception": "^1.2.2", "error-stack-parser-es": "^1.0.5" } }, "sha512-ho7XuGjLaJ2hWHoK8yFnsUGy2Y5uDpqSTq1FkHLK4/oqKtyUU1AFbOOxY4IpC9f0fTLjwYbslUz0Po5BpD1wrA=="],
 
     "zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
+
+    "zustand": ["zustand@5.0.7", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-Ot6uqHDW/O2VdYsKLLU8GQu8sCOM1LcoE8RwvLv9uuRT9s6SOHCKs0ZEOhxg+I1Ld+A1Q5lwx+UlKXXUoCZITg=="],
 
     "@atproto/jwk-jose/jose": ["jose@5.10.0", "", {}, "sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg=="],
 

next.config.ts

···
 import type { NextConfig } from "next";
-import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
+import { setupDevPlatform } from "@cloudflare/next-on-pages/next-dev";
 
 const nextConfig: NextConfig = {
   /* config options here */
···
   },
 };
 
- if (process.env.NODE_ENV === 'development') {
-   await setupDevPlatform();
- }
+// if (process.env.NODE_ENV === "development") {
+//   await setupDevPlatform();
+// }
 
 export default nextConfig;

package.json

···
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.12",
     "class-variance-authority": "^0.7.1",
···
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-masonry-css": "^1.0.16",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.3.1",
+    "zustand": "^5.0.7"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

src/app/[did]/[uri]/page.tsx

···
             <BskyImage
               embed={post.embed}
               fill
-              className="absolute inset-0 object-cover blur-3xl scale-110 z-0 opacity-10"
+              className="absolute inset-0 object-cover blur-3xl scale-110 z-0 opacity-30"
             />
 
             {/* Foreground Content */}

src/app/page.tsx

···
 "use client";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { useAuth } from "@/lib/useAuth";
-import {
-  AppBskyEmbedImages,
-  AppBskyFeedDefs,
-  AppBskyFeedPost,
-} from "@atproto/api";
-import { LoaderCircle } from "lucide-react";
-import Image from "next/image";
-import { useEffect, useRef, useState, useCallback } from "react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import Link from "next/link";
-import Masonry from "react-masonry-css";
-import { motion } from "motion/react";
 
-export const runtime = "edge";
+import { Feed } from "@/components/Feed";
+import { useFetchTimeline } from "@/lib/hooks/useTimeline";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { useRef, useEffect } from "react";
+import { useFeedStore } from "@/lib/stores/feeds";
+import { useFeeds } from "@/lib/hooks/useFeeds";
+import { LoaderCircle } from "lucide-react";
+import { useFeedDefsStore } from "@/lib/stores/feedDefs";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { useAuth } from "@/lib/useAuth";
 
 export default function Home() {
-  const [timeline, setTimeline] = useState<AppBskyFeedDefs.FeedViewPost[]>([]);
-  const [cursor, setCursor] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const { agent, session } = useAuth();
+  const { fetchFeed } = useFetchTimeline();
+  const feedStore = useFeedStore();
+  const { isLoading } = useFeeds();
+  const { feeds } = useFeedDefsStore();
+  const { session } = useAuth();
   const sentinelRef = useRef<HTMLDivElement>(null);
 
-  const seenImageUrls = new Set<string>();
-
-  const fetchFeed = useCallback(async () => {
-    if (!agent || loading) return [];
-    setLoading(true);
-    try {
-      const response = await agent.getTimeline({
-        cursor: cursor ?? undefined,
-        limit: 100,
-      });
-      if (!response.success) throw new Error("Failed to fetch timeline");
-
-      const nextCursor = response.data.cursor || null;
-      setCursor(nextCursor);
-
-      const filtered = response.data.feed.filter((it) => {
-        // Filter out reposts
-        if (it.reason?.$type === "app.bsky.feed.defs#reasonRepost")
-          return false;
-
-        // Must be an image embed
-        if (
-          !(
-            AppBskyEmbedImages.isMain(it.post.embed) ||
-            AppBskyEmbedImages.isView(it.post.embed)
-          )
-        ) {
-          return false;
-        }
-
-        // Check for new image URLs (to avoid repeats)
-        const images = (it.post.embed as AppBskyEmbedImages.View)?.images || [];
-        const hasNewImage = images.some(
-          (img) => !seenImageUrls.has(img.fullsize)
-        );
-        if (!hasNewImage) return false;
-
-        // Add seen image URLs
-        images.forEach((img) => seenImageUrls.add(img.fullsize));
-        return true;
-      });
-
-      return filtered;
-    } catch (err) {
-      console.error("Error fetching timeline", err);
-      return [];
-    } finally {
-      setLoading(false);
-    }
-  }, [agent, cursor, loading]);
-
-  // Initial + fill up to 15 images
-  useEffect(() => {
-    if (!agent) return;
-
-    const loadMinimumPosts = async () => {
-      let accumulated: AppBskyFeedDefs.FeedViewPost[] = [];
-      let newCursor = cursor;
-
-      while (
-        accumulated.flatMap(
-          (p) => (p.post.embed as AppBskyEmbedImages.View)?.images || []
-        ).length < 15
-      ) {
-        const batch = await fetchFeed();
-        if (batch.length === 0) break;
-        accumulated = [...accumulated, ...batch];
-        newCursor = cursor;
-      }
-
-      setTimeline(accumulated);
-    };
-
-    loadMinimumPosts();
-  }, [agent]);
-
-  // Load more on scroll to sentinel
   useEffect(() => {
     const observer = new IntersectionObserver(
-      async (entries) => {
-        const entry = entries[0];
-        if (entry.isIntersecting && !loading && cursor) {
-          const more = await fetchFeed();
-          setTimeline((prev) => [...prev, ...more]);
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          fetchFeed();
         }
       },
-      {
-        rootMargin: "200px",
-      }
+      { rootMargin: "200px" }
     );
 
     const sentinel = sentinelRef.current;
···
     return () => {
       if (sentinel) observer.unobserve(sentinel);
     };
-  }, [fetchFeed, cursor, loading]);
-
-  const breakpointColumnsObj = {
-    default: 5,
-    1536: 4,
-    1280: 3,
-    1024: 2,
-    768: 1,
-  };
-
-  console.log(session);
+  }, [fetchFeed]);
 
   if (session == null) {
     return (
···
     );
   }
 
+  if (isLoading)
+    return (
+      <div className="flex justify-center py-6 text-sm text-black/70 dark:text-white/70">
+        <LoaderCircle className="animate-spin" />
+      </div>
+    );
+
   return (
-    <div className="items-center justify-items-center">
-      <div className="h-5" />
-      <main className="px-5">
-        <Masonry
-          breakpointCols={breakpointColumnsObj}
-          className="flex -mx-2 w-auto"
-          columnClassName="px-2 space-y-4"
+    <main className="px-5">
+      <Tabs defaultValue="timeline" className="w-full">
+        <TabsList
+          className="flex w-full overflow-x-auto whitespace-nowrap no-scrollbar px-4 space-x-4"
+          style={{ justifyItems: "unset" }}
         >
-          {timeline.flatMap((post) => {
-            if (!AppBskyEmbedImages.isView(post.post.embed)) return;
-            const images = post.post.embed.images || [];
-            if (images.length === 0) return [];
-            const t: string = (post.post.record.text as string) || "";
-            const maxLength = 100;
-            return images.map((image, index) => (
-              <Link
-                href={`/${post.post.author.did}/${post.post.uri
-                  .split("/")
-                  .pop()}?image=${index}`}
-                key={image.fullsize}
-                className="block"
-              >
-                <motion.div
-                  initial={{ opacity: 0, y: 5 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.5, ease: "easeOut" }}
-                  whileTap={{ scale: 0.99 }}
-                  className="group relative w-full min-h-[120px] min-w-[120px] overflow-hidden rounded-xl bg-gray-900"
-                >
-                  {/* Blurred background */}
-                  <Image
-                    src={image.fullsize}
-                    alt=""
-                    fill
-                    placeholder="blur"
-                    blurDataURL={image.thumb}
-                    className="object-cover filter blur-xl scale-110 opacity-30"
-                  />
+          <TabsTrigger value="timeline" className="shrink-0 ml-10">
+            Timeline
+          </TabsTrigger>
+          {Object.entries(feeds).map(([value, it]) => (
+            <TabsTrigger key={value} value={value} className="shrink-0">
+              {it?.displayName}
+            </TabsTrigger>
+          ))}
+        </TabsList>
 
-                  {/* Centered foreground image */}
-                  <div className="relative z-10 flex items-center justify-center w-full min-h-[120px]">
-                    <Image
-                      src={image.fullsize}
-                      alt={image.alt}
-                      placeholder="blur"
-                      blurDataURL={image.thumb}
-                      width={image?.aspectRatio?.width ?? 400}
-                      height={image?.aspectRatio?.height ?? 400}
-                      className="object-contain max-w-full max-h-full rounded-lg"
-                    />
-                  </div>
+        <TabsContent value="timeline">
+          <Feed
+            feed={feedStore.timeline.posts.map((it) => it.post)}
+            isLoading={feedStore.timeline.isLoading}
+          />
+        </TabsContent>
 
-                  {/* Hover overlay */}
-                  <div className="absolute inset-0 z-20 bg-black/40 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-3">
-                    <div className="text-sm mb-1">
-                      {AppBskyFeedPost.isRecord(post.post.record) && (
-                        <>
-                          {t.length > maxLength
-                            ? t.slice(0, maxLength) + "…"
-                            : t}
-                        </>
-                      )}
-                    </div>
-                    <div className="text-xs flex gap-2">
-                      <Avatar>
-                        <AvatarImage src={post.post.author.avatar} />
-                        <AvatarFallback>
-                          {post.post.author.displayName ||
-                            post.post.author.handle}
-                        </AvatarFallback>
-                      </Avatar>
-                      {post.post.author.displayName || post.post.author.handle}
-                    </div>
-                  </div>
-                </motion.div>
-              </Link>
-            ));
-          })}
-        </Masonry>
-        <div ref={sentinelRef} className="h-1 col-span-full" />
-        {loading && (
-          <div className="col-span-full flex justify-center text-sm text-black/70 dark:text-white/70">
-            <LoaderCircle className="animate-spin" />
-          </div>
-        )}
-      </main>
+        {Object.entries(feeds).map(([value]) => (
+          <TabsContent key={value} value={value}></TabsContent>
+        ))}
+      </Tabs>
 
-      {/* <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center"></footer> */}
-    </div>
+      <div ref={sentinelRef} className="h-1" />
+    </main>
   );
 }

src/components/Feed.tsx

···
+"use client";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { useAuth } from "@/lib/useAuth";
+import {
+  AppBskyEmbedImages,
+  AppBskyFeedDefs,
+  AppBskyFeedPost,
+} from "@atproto/api";
+import { LoaderCircle } from "lucide-react";
+import { useEffect, useRef, useState, useCallback } from "react";
+import { motion } from "motion/react";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import Link from "next/link";
+import Masonry from "react-masonry-css";
+import { PostView } from "@atproto/api/dist/client/types/app/bsky/feed/defs";
+
+function getText(post: PostView) {
+  if (!AppBskyFeedPost.isRecord(post.record)) return;
+  return (post.record as AppBskyFeedPost.Record).text;
+}
+
+export function Feed({
+  feed,
+  isLoading = false,
+}: {
+  feed: PostView[];
+  isLoading?: boolean;
+}) {
+  const breakpointColumnsObj = {
+    default: 5,
+    1536: 4,
+    1280: 3,
+    1024: 2,
+    768: 1,
+  };
+
+  return (
+    <>
+      <Masonry
+        breakpointCols={breakpointColumnsObj}
+        className="flex -mx-2 w-auto"
+        columnClassName="px-2 space-y-4"
+      >
+        {feed.flatMap((post) => {
+          if (!AppBskyEmbedImages.isView(post.embed)) return [];
+          const images = post.embed.images || [];
+          if (images.length === 0) return [];
+          const t: string = getText(post) || "";
+          const maxLength = 100;
+          return images.map((image, index) => (
+            <Link
+              href={`/${post.author.did}/${post.uri
+                .split("/")
+                .pop()}?image=${index}`}
+              key={image.fullsize}
+              className="block"
+            >
+              <motion.div
+                initial={{ opacity: 0, y: 5 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, ease: "easeOut" }}
+                whileTap={{ scale: 0.99 }}
+                className="group relative w-full min-h-[120px] min-w-[120px] overflow-hidden rounded-xl bg-gray-900"
+              >
+                {/* Blurred background */}
+                <Image
+                  src={image.fullsize}
+                  alt=""
+                  fill
+                  placeholder="blur"
+                  blurDataURL={image.thumb}
+                  className="object-cover filter blur-xl scale-110 opacity-30"
+                />
+
+                {/* Centered foreground image */}
+                <div className="relative z-10 flex items-center justify-center w-full min-h-[120px]">
+                  <Image
+                    src={image.fullsize}
+                    alt={image.alt}
+                    placeholder="blur"
+                    blurDataURL={image.thumb}
+                    width={image?.aspectRatio?.width ?? 400}
+                    height={image?.aspectRatio?.height ?? 400}
+                    className="object-contain max-w-full max-h-full rounded-lg"
+                  />
+                </div>
+
+                {/* Bottom: Avatar, display name, and handle */}
+                <div className="absolute inset-0 z-20 bg-black/40 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-between p-3">
+                  <div className="w-fit self-start" />
+
+                  <div className="flex flex-col gap-2">
+                    <div className="flex items-center gap-2">
+                      <Avatar>
+                        <AvatarImage src={post.author.avatar} />
+                        <AvatarFallback>
+                          {post.author.displayName || post.author.handle}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="flex flex-col leading-tight">
+                        <span>
+                          {post.author.displayName || post.author.handle}
+                        </span>
+                        <span className="text-white/70 text-[0.75rem]">
+                          @{post.author.handle}
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="text-sm">
+                      {t.length > maxLength ? t.slice(0, maxLength) + "…" : t}
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            </Link>
+          ));
+        })}
+      </Masonry>
+
+      {isLoading && (
+        <div className="flex justify-center py-6 text-sm text-black/70 dark:text-white/70">
+          <LoaderCircle className="animate-spin" />
+        </div>
+      )}
+    </>
+  );
+}

src/components/SaveButton.tsx

···
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useAuth } from "@/lib/useAuth";
+import { useState } from "react";
+import { Button } from "./ui/button";
+import { PostView } from "@atproto/api/dist/client/types/app/bsky/feed/defs";
+import { LoaderCircle } from "lucide-react";
+
+function SaveButton(post: PostView) {
+  const { login } = useAuth();
+  const [handle, setHandle] = useState("");
+  const [isLoading, setLoading] = useState(false);
+  return (
+    <Dialog>
+      <DialogTrigger>
+        <Button size="sm" className="cursor-pointer">
+          Login
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Save post to board</DialogTitle>
+          <DialogDescription className="pt-5"></DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            onClick={() => {
+              setLoading(true);
+              login(handle);
+            }}
+            disabled={!handle}
+            className="cursor-pointer"
+          >
+            {isLoading && <LoaderCircle className="animate-spin ml-2" />}
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/ui/scroll-area.tsx

···
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

src/lib/hooks/useFeeds.tsx

···
+import { useEffect, useState } from "react";
+import { useAuth } from "@/lib/useAuth";
+import { useFeedDefsStore } from "../stores/feedDefs";
+import { AtUri } from "@atproto/api";
+
+export function useFeeds() {
+  const { agent } = useAuth();
+  const store = useFeedDefsStore();
+  const [isLoading, setLoading] = useState(store.feeds == null);
+
+  useEffect(() => {
+    if (agent == null) return;
+    const loadFeeds = async () => {
+      try {
+        const prefs = await agent.getPreferences();
+        if (prefs?.savedFeeds == null) return;
+
+        for (const feed of prefs.savedFeeds) {
+          if (!feed.value.startsWith("at")) continue;
+          const urip = AtUri.make(feed.value);
+
+          console.log("host", urip.host);
+          if (!urip.host.startsWith("did:")) {
+            const res = await agent.resolveHandle({ handle: urip.host });
+            urip.host = res.data.did;
+          }
+
+          console.log("Fetching feed defs", feed);
+          if (feed.type == "feed") {
+            const feedDef = await agent.app.bsky.feed.getFeedGenerators({
+              feeds: [urip.toString()],
+            });
+
+            store.setFeedDef(feed.value, feedDef.data.feeds[0]);
+          } else if (feed.type == "list") {
+            const listDef = await agent.app.bsky.graph.getList({
+              list: urip.toString(),
+            });
+
+            store.setFeedDef(feed.value, {
+              displayName: listDef.data.list.name,
+            });
+          }
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadFeeds();
+  }, [agent]);
+
+  return { isLoading };
+}

src/lib/hooks/useTimeline.tsx

···
+// lib/hooks/useFetchTimeline.ts
+import { useEffect, useRef, useCallback } from "react";
+import { AppBskyEmbedImages } from "@atproto/api";
+import { useAuth } from "@/lib/useAuth";
+import { useFeedStore } from "../stores/feeds";
+
+export function useFetchTimeline() {
+  const { agent } = useAuth();
+  const { timeline, setTimeline, appendTimeline, setTimelineLoading } =
+    useFeedStore();
+  const seenImageUrls = useRef<Set<string>>(new Set());
+
+  const fetchFeed = useCallback(async () => {
+    if (!agent || timeline.isLoading) return;
+    setTimelineLoading(true);
+    try {
+      const response = await agent.getTimeline({
+        cursor: timeline.cursor,
+        limit: 100,
+      });
+      if (!response.success) throw new Error("Failed to fetch timeline");
+
+      const newCursor = response.data.cursor;
+
+      const filtered = response.data.feed.filter((it) => {
+        if (it.reason?.$type === "app.bsky.feed.defs#reasonRepost")
+          return false;
+        if (
+          !(
+            AppBskyEmbedImages.isMain(it.post.embed) ||
+            AppBskyEmbedImages.isView(it.post.embed)
+          )
+        )
+          return false;
+
+        const images = (it.post.embed as AppBskyEmbedImages.View)?.images || [];
+        const hasNew = images.some(
+          (img) => !seenImageUrls.current.has(img.fullsize)
+        );
+        if (!hasNew) return false;
+
+        images.forEach((img) => seenImageUrls.current.add(img.fullsize));
+        return true;
+      });
+
+      appendTimeline(filtered, newCursor);
+    } catch (err) {
+      console.error("Fetch failed", err);
+    } finally {
+      setTimelineLoading(false);
+    }
+  }, [agent, timeline]);
+
+  useEffect(() => {
+    const loadMinimum = async () => {
+      while (
+        timeline.posts.flatMap(
+          (p) => (p.post.embed as AppBskyEmbedImages.View)?.images || []
+        ).length < 30
+      ) {
+        await fetchFeed();
+        if (!timeline.cursor) break;
+      }
+    };
+    loadMinimum();
+  }, [agent]);
+
+  return { fetchFeed };
+}

src/lib/stores/feedDefs.tsx

···
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+export interface BasicFeedItem {
+  displayName: string;
+}
+
+type FeedDefsState = {
+  feeds: Record<string, BasicFeedItem>;
+  setFeedDef: (id: string, feed: BasicFeedItem) => void;
+};
+
+export const useFeedDefsStore = create<FeedDefsState>()(
+  persist(
+    (set) => ({
+      feeds: {},
+      setFeedDef: (id, feed) =>
+        set((state) => ({
+          feeds: {
+            ...state.feeds,
+            [id]: feed,
+          },
+        })),
+    }),
+    {
+      name: "feed-defs",
+      partialize: (state) => ({
+        feeds: state.feeds, // Only persist this part
+      }),
+    }
+  )
+);

src/lib/stores/feeds.tsx

···
+import { AppBskyFeedDefs } from "@atproto/api";
+import { PostView } from "@atproto/api/dist/client/types/app/bsky/feed/defs";
+import { create } from "zustand";
+import { combine } from "zustand/middleware";
+
+type Post = AppBskyFeedDefs.FeedViewPost;
+
+type FeedState = {
+  posts: PostView[];
+  isLoading: boolean;
+  cursor?: string;
+};
+
+type FeedMap = Record<string, FeedState>;
+
+export const useFeedStore = create(
+  combine(
+    {
+      timeline: {
+        posts: [] as Post[],
+        isLoading: false,
+        cursor: undefined as string | undefined,
+      },
+      customFeeds: {} as FeedMap,
+    },
+    (set, get) => ({
+      // TIMELINE METHODS
+      setTimeline: (posts: Post[], cursor?: string) =>
+        set({
+          timeline: {
+            posts,
+            isLoading: false,
+            cursor,
+          },
+        }),
+
+      appendTimeline: (newPosts: Post[], cursor?: string) =>
+        set((state) => {
+          const existing = state.timeline.posts;
+          const deduped = [
+            ...existing,
+            ...newPosts.filter(
+              (p) => !existing.some((ep) => ep.post.uri === p.post.uri)
+            ),
+          ];
+          return {
+            timeline: {
+              posts: deduped,
+              isLoading: false,
+              cursor,
+            },
+          };
+        }),
+
+      setTimelineLoading: (isLoading: boolean) =>
+        set((state) => ({
+          timeline: {
+            ...state.timeline,
+            isLoading,
+          },
+        })),
+
+      // CUSTOM FEED METHODS
+      setCustomFeed: (feedId: string, posts: PostView[], cursor?: string) =>
+        set((state) => ({
+          customFeeds: {
+            ...state.customFeeds,
+            [feedId]: {
+              posts,
+              isLoading: false,
+              cursor,
+            },
+          },
+        })),
+
+      appendCustomFeed: (
+        feedId: string,
+        newPosts: PostView[],
+        cursor?: string
+      ) => {
+        const current = get().customFeeds[feedId] || {
+          posts: [],
+          isLoading: false,
+          cursor: undefined,
+        };
+        const deduped = [
+          ...current.posts,
+          ...newPosts.filter(
+            (p) => !current.posts.some((ep) => ep.uri === p.uri)
+          ),
+        ];
+        set((state) => ({
+          customFeeds: {
+            ...state.customFeeds,
+            [feedId]: {
+              posts: deduped,
+              isLoading: false,
+              cursor,
+            },
+          },
+        }));
+      },
+
+      setCustomFeedLoading: (feedId: string, isLoading: boolean) => {
+        const current = get().customFeeds[feedId] || {
+          posts: [],
+          isLoading: false,
+          cursor: undefined,
+        };
+        set((state) => ({
+          customFeeds: {
+            ...state.customFeeds,
+            [feedId]: {
+              ...current,
+              isLoading,
+            },
+          },
+        }));
+      },
+    })
+  )
+);

src/nav/navbar.tsx

···
               value={handle}
               onChange={(e) => setHandle(e.target.value)}
               placeholder="example.bsky.social"
-              className="text-white"
+              className="dark:text-white text-black"
             />
           </DialogDescription>
         </DialogHeader>