[wip] added channel explore page

src/app/explore/channels/page.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { BrowseChannelItem } from '@components/channels/browseChannelItem';
+
+import { getChannels } from '@utils/storage';
+
+import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
+import { VirtuosoGrid } from 'react-virtuoso';
+
+export default function Page() {
+  const [data, setData] = useState([]);
+
+  const virtuosoRef = useRef(null);
+  const limit = useRef(20);
+  const offset = useRef(0);
+
+  const itemContent: any = useCallback(
+    (index: string | number) => {
+      return <BrowseChannelItem key={data[index].event_id} data={data[index]} />;
+    },
+    [data]
+  );
+
+  const computeItemKey = useCallback(
+    (index: string | number) => {
+      return data[index].event_id;
+    },
+    [data]
+  );
+
+  const initialData = useCallback(async () => {
+    const result: any = await getChannels(limit.current, offset.current);
+    console.log(result);
+    setData((data) => [...data, ...result]);
+  }, [setData]);
+
+  const loadMore = useCallback(async () => {
+    offset.current += limit.current;
+    // query next page
+    const result: any = await getChannels(limit.current, offset.current);
+    setData((data) => [...data, ...result]);
+  }, [setData]);
+
+  useEffect(() => {
+    initialData().catch(console.error);
+  }, [initialData]);
+
+  return (
+    <div className="h-full w-full">
+      <div className="mx-auto h-full w-full max-w-2xl px-4">
+        <Suspense fallback={<>Loading...</>}>
+          <VirtuosoGrid
+            ref={virtuosoRef}
+            data={data}
+            itemContent={itemContent}
+            itemClassName="col-span-1"
+            listClassName="grid grid-cols-2 gap-4"
+            computeItemKey={computeItemKey}
+            overscan={200}
+            endReached={loadMore}
+            className="scrollbar-hide h-full w-full overflow-y-auto overflow-x-hidden"
+          />
+        </Suspense>
+      </div>
+    </div>
+  );
+}

src/app/explore/layout.tsx

@@ -0,0 +1,23 @@
+import AppHeader from '@components/appHeader';
+import MultiAccounts from '@components/multiAccounts';
+
+export default function NostrLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
+      <div className="flex h-screen w-full flex-col">
+        <div
+          data-tauri-drag-region
+          className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
+        >
+          <AppHeader collector={true} />
+        </div>
+        <div className="relative flex min-h-0 w-full flex-1">
+          <div className="relative w-[68px] shrink-0 border-r border-zinc-900">
+            <MultiAccounts />
+          </div>
+          <div className="w-full">{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/nostr/channels/page.tsx

@@ -1,25 +0,0 @@
-'use client';
-
-import { BrowseChannelItem } from '@components/channels/browseChannelItem';
-
-import { getChannels } from '@utils/storage';
-
-import { useEffect, useState } from 'react';
-
-export default function Page() {
-  const [list, setList] = useState([]);
-
-  useEffect(() => {
-    getChannels(100, 0)
-      .then((res) => setList(res))
-      .catch(console.error);
-  }, []);
-
-  return (
-    <div className="h-full w-full overflow-y-auto">
-      {list.map((channel) => (
-        <BrowseChannelItem key={channel.id} data={channel} />
-      ))}
-    </div>
-  );
-}