Merge pull request #21 from reyamir/fix/performance

Improved resource usage

next.config.js

@@ -1,6 +1,8 @@
-const removeImports = require('next-remove-imports')();
+/**
+ * @type {import('next').NextConfig}
+ */
 
-module.exports = removeImports({
+const nextConfig = {
   reactStrictMode: false,
   swcMinify: true,
   images: {
@@ -9,11 +11,10 @@ module.exports = removeImports({
   typescript: {
     ignoreBuildErrors: true,
   },
-  experimental: {
-    scrollRestoration: true,
-  },
   webpack: (config) => {
     config.experiments = { ...config.experiments, topLevelAwait: true };
     return config;
   },
-});
+};
+
+module.exports = nextConfig;

package.json

@@ -20,28 +20,23 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.5",
     "@radix-ui/react-tabs": "^1.0.3",
-    "@supabase/supabase-js": "^2.12.1",
-    "@tanstack/query-core": "^4.27.0",
-    "@tanstack/react-query": "^4.28.0",
-    "@tanstack/react-virtual": "3.0.0-beta.54",
+    "@supabase/supabase-js": "^2.13.0",
     "@tauri-apps/api": "^1.2.0",
-    "boring-avatars": "^1.7.0",
     "dayjs": "^1.11.7",
     "destr": "^1.2.2",
     "emoji-mart": "^5.5.2",
     "framer-motion": "^9.1.7",
     "jotai": "^2.0.3",
     "jotai-cache": "^0.3.0",
-    "jotai-tanstack-query": "^0.6.0",
     "next": "^13.2.4",
-    "next-remove-imports": "^1.0.10",
     "nostr-relaypool": "^0.5.18",
     "nostr-tools": "^1.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.8",
+    "react-hook-form": "^7.43.9",
     "react-player": "^2.12.0",
     "react-string-replace": "^1.1.0",
+    "react-virtuoso": "^4.1.1",
     "tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql",
     "unique-names-generator": "^4.7.1",
     "ws": "^8.13.0"
@@ -50,14 +45,14 @@
     "@tailwindcss/typography": "^0.5.9",
     "@tauri-apps/cli": "^1.2.3",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-    "@types/node": "^18.15.10",
-    "@types/react": "^18.0.30",
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.31",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^5.57.0",
     "autoprefixer": "^10.4.14",
     "csstype": "^3.1.1",
-    "eslint": "^8.36.0",
+    "eslint": "^8.37.0",
     "eslint-config-next": "^13.2.4",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-react": "^7.32.2",
@@ -66,9 +61,9 @@
     "lint-staged": "^13.2.0",
     "postcss": "^8.4.21",
     "prettier": "^2.8.7",
-    "prettier-plugin-tailwindcss": "^0.2.5",
+    "prettier-plugin-tailwindcss": "^0.2.6",
     "prop-types": "^15.8.1",
-    "tailwindcss": "^3.2.7",
+    "tailwindcss": "^3.3.1",
     "typescript": "^4.9.5"
   }
 }

src/components/appHeader/actions.tsx

@@ -1,7 +1,7 @@
 import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon } from '@radix-ui/react-icons';
 import { platform } from '@tauri-apps/api/os';
 import { useRouter } from 'next/router';
-import { useLayoutEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export default function AppActions() {
   const router = useRouter();
@@ -19,7 +19,7 @@ export default function AppActions() {
     router.reload();
   };
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const getPlatform = async () => {
       const result = await platform();
       setOS(result);

src/components/appHeader/index.tsx

@@ -1,4 +1,3 @@
-import { PlusIcon } from '@radix-ui/react-icons';
 import dynamic from 'next/dynamic';
 
 const AppActions = dynamic(() => import('@components/appHeader/actions'), {

src/components/columns/account/active.tsx

@@ -1,7 +1,5 @@
 import { RelayContext } from '@components/relaysProvider';
 
-import { relaysAtom } from '@stores/relays';
-
 import { dateToUnix } from '@utils/getDate';
 import { createFollows } from '@utils/storage';
 import { tagsToArray } from '@utils/transform';
@@ -10,15 +8,13 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { AvatarIcon, ExitIcon, GearIcon } from '@radix-ui/react-icons';
 import { writeText } from '@tauri-apps/api/clipboard';
 import destr from 'destr';
-import { useAtomValue } from 'jotai';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { nip19 } from 'nostr-tools';
 import { memo, useContext, useEffect, useRef } from 'react';
 
 export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }) {
-  const pool: any = useContext(RelayContext);
-  const relays = useAtomValue(relaysAtom);
+  const [pool, relays]: any = useContext(RelayContext);
 
   const router = useRouter();
   const userData = destr(user.metadata);
@@ -77,7 +73,7 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
         <DropdownMenu.Content
-          className="min-w-[220px] rounded-md bg-zinc-900/80 p-1.5 shadow-input shadow-black/50 ring-1 ring-zinc-800 backdrop-blur-xl will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
+          className="min-w-[220px] rounded-md bg-zinc-900/80 p-1.5 shadow-input shadow-black/50 ring-1 ring-zinc-800 backdrop-blur-xl will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
           side="right"
           sideOffset={5}
           align="start"

src/components/columns/account/index.tsx

@@ -20,7 +20,7 @@ export default function AccountColumn() {
   }, [getAppVersion]);
 
   return (
-    <div className="flex h-full flex-col items-center justify-between px-2 pt-4 pb-4">
+    <div className="flex h-full flex-col items-center justify-between px-2 pb-4 pt-4">
       <div className="flex flex-col gap-4">
         <Link
           href="/explore"

src/components/columns/account/list.tsx

@@ -5,11 +5,11 @@ import { activeAccountAtom } from '@stores/account';
 
 import { getAccounts } from '@utils/storage';
 
-import { useAtom } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { useCallback, useEffect, useState } from 'react';
 
 export default function AccountList() {
-  const [activeAccount] = useAtom(activeAccountAtom);
+  const activeAccount: any = useAtomValue(activeAccountAtom);
   const [users, setUsers] = useState([]);
 
   const renderAccount = useCallback(

src/components/columns/navigator/chats.tsx

@@ -1,29 +1,14 @@
-import { MessageList } from '@components/columns/navigator/messages/list';
-
-import { activeAccountAtom } from '@stores/account';
-
-import { getAllFollowsByID } from '@utils/storage';
-
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { TriangleUpIcon } from '@radix-ui/react-icons';
-import { useAtom } from 'jotai';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
-export default function Messages() {
+export default function Chats() {
   const [open, setOpen] = useState(true);
-  const [follows, setFollows] = useState([]);
-  const [activeAccount] = useAtom(activeAccountAtom);
-
-  useEffect(() => {
-    getAllFollowsByID(activeAccount.id)
-      .then((res: any) => setFollows(res))
-      .catch(console.error);
-  }, [activeAccount.id]);
 
   return (
     <Collapsible.Root open={open} onOpenChange={setOpen} className="h-full shrink-0">
       <div className="flex h-full flex-col gap-1 px-2 pb-8">
-        <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 py-1 px-2">
+        <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
           <div
             className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
               open ? 'rotate-180' : ''
@@ -35,9 +20,7 @@ export default function Messages() {
             Chats
           </h3>
         </Collapsible.Trigger>
-        <Collapsible.Content className="h-full">
-          <MessageList data={follows} />
-        </Collapsible.Content>
+        <Collapsible.Content className="h-full"></Collapsible.Content>
       </div>
     </Collapsible.Root>
   );

src/components/columns/navigator/index.tsx

@@ -1,4 +1,4 @@
-import Messages from '@components/columns/navigator/messages';
+import Chats from '@components/columns/navigator/chats';
 import Newsfeed from '@components/columns/navigator/newsfeed';
 
 export default function NavigatorColumn() {
@@ -6,8 +6,8 @@ export default function NavigatorColumn() {
     <div className="relative flex h-full flex-col gap-1 overflow-hidden pt-4">
       {/* Newsfeed */}
       <Newsfeed />
-      {/* Messages */}
-      <Messages />
+      {/* Chats */}
+      <Chats />
     </div>
   );
 }

src/components/columns/navigator/messages/list.tsx

@@ -1,33 +0,0 @@
-import { UserMini } from '@components/user/mini';
-
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { Suspense, memo, useRef } from 'react';
-
-export const MessageList = memo(function MessageList({ data }: { data: any }) {
-  const parentRef = useRef(null);
-
-  const virtualizer = useVirtualizer({
-    count: data.length,
-    estimateSize: () => 32,
-    getScrollElement: () => parentRef.current,
-  });
-  const items = virtualizer.getVirtualItems();
-
-  return (
-    <div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
-      <Suspense fallback={<p className="text-sm text-zinc-400">Loading...</p>}>
-        {items.length > 0 && (
-          <div className="relative mb-24 w-full" style={{ height: virtualizer.getTotalSize() }}>
-            <div className="absolute top-0 left-0 w-full" style={{ transform: `translateY(${items[0].start}px)` }}>
-              {items.map((virtualRow) => (
-                <div key={virtualRow.key} data-index={virtualRow.index} ref={virtualizer.measureElement}>
-                  <UserMini pubkey={data[virtualRow.index].pubkey} />
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </Suspense>
-    </div>
-  );
-});

src/components/columns/navigator/newsfeed.tsx

@@ -10,7 +10,7 @@ export default function Newsfeed() {
   return (
     <Collapsible.Root open={open} onOpenChange={setOpen}>
       <div className="flex flex-col gap-1 px-2">
-        <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 py-1 px-2">
+        <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
           <div
             className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
               open ? 'rotate-180' : ''

src/components/form/base.tsx

@@ -4,21 +4,18 @@ import { RelayContext } from '@components/relaysProvider';
 
 import { activeAccountAtom } from '@stores/account';
 import { noteContentAtom } from '@stores/note';
-import { relaysAtom } from '@stores/relays';
 
 import { dateToUnix } from '@utils/getDate';
 
-import { PersonIcon } from '@radix-ui/react-icons';
 import { useAtom, useAtomValue } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext } from 'react';
 
 export default function FormBase() {
-  const pool: any = useContext(RelayContext);
+  const [pool, relays]: any = useContext(RelayContext);
 
-  const relays = useAtomValue(relaysAtom);
-  const [activeAccount] = useAtom(activeAccountAtom);
+  const activeAccount: any = useAtomValue(activeAccountAtom);
   const [value, setValue] = useAtom(noteContentAtom);
   const resetValue = useResetAtom(noteContentAtom);
 

src/components/form/comment.tsx

@@ -2,20 +2,18 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 import { RelayContext } from '@components/relaysProvider';
 
 import { activeAccountAtom } from '@stores/account';
-import { relaysAtom } from '@stores/relays';
 
 import { dateToUnix } from '@utils/getDate';
 
 import destr from 'destr';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext, useState } from 'react';
 
 export default function FormComment({ eventID }: { eventID: any }) {
-  const pool: any = useContext(RelayContext);
+  const [pool, relays]: any = useContext(RelayContext);
 
-  const relays = useAtomValue(relaysAtom);
-  const [activeAccount] = useAtom(activeAccountAtom);
+  const activeAccount: any = useAtomValue(activeAccountAtom);
   const [value, setValue] = useState('');
 
   const profile = destr(activeAccount.metadata);

src/components/imageWithFallback.tsx

@@ -1,4 +1,5 @@
-import Avatar from 'boring-avatars';
+import { DEFAULT_AVATAR } from '@stores/constants';
+
 import Image from 'next/image';
 import { memo, useEffect, useState } from 'react';
 
@@ -20,27 +21,6 @@ export const ImageWithFallback = memo(function ImageWithFallback({
   }, [src]);
 
   return (
-    <>
-      {error ? (
-        <Avatar
-          size={44}
-          name={alt}
-          variant="beam"
-          square={true}
-          colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
-        />
-      ) : (
-        <Image
-          src={src}
-          alt={alt}
-          fill={fill}
-          className={className}
-          onError={setError}
-          placeholder="blur"
-          blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
-          priority
-        />
-      )}
-    </>
+    <Image src={error ? DEFAULT_AVATAR : src} alt={alt} fill={fill} className={className} onError={setError} priority />
   );
 });

src/components/note/base.tsx

@@ -9,7 +9,6 @@ import { UserMention } from '@components/user/mention';
 import destr from 'destr';
 import { useRouter } from 'next/router';
 import { memo, useMemo } from 'react';
-import ReactPlayer from 'react-player/lazy';
 import reactStringReplace from 'react-string-replace';
 
 export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
@@ -21,10 +20,14 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
     const tags = destr(event.tags);
     // handle urls
     parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
-      if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
+      if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
         // image url
         return <ImagePreview key={match + i} url={match} />;
-      } else if (ReactPlayer.canPlay(match)) {
+      } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
+        // youtube
+        return <VideoPreview key={match + i} url={match} />;
+      } else if (match.match(/\.(mp4|webm)$/i)) {
+        // video
         return <VideoPreview key={match + i} url={match} />;
       } else {
         return (
@@ -80,7 +83,7 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
   return (
     <div
       onClick={(e) => openThread(e)}
-      className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-5 px-3 hover:bg-black/20"
+      className="relative z-10 m-0 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20"
     >
       <>{getParent}</>
       <div className="relative z-10 flex flex-col">

src/components/note/comment.tsx

@@ -7,7 +7,6 @@ import { UserMention } from '@components/user/mention';
 
 import destr from 'destr';
 import { memo, useMemo } from 'react';
-import ReactPlayer from 'react-player/lazy';
 import reactStringReplace from 'react-string-replace';
 
 export const NoteComment = memo(function NoteComment({ event }: { event: any }) {
@@ -17,10 +16,14 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
     const tags = destr(event.tags);
     // handle urls
     parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
-      if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
+      if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
         // image url
         return <ImagePreview key={match + i} url={match} />;
-      } else if (ReactPlayer.canPlay(match)) {
+      } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
+        // youtube
+        return <VideoPreview key={match + i} url={match} />;
+      } else if (match.match(/\.(mp4|webm)$/i)) {
+        // video
         return <VideoPreview key={match + i} url={match} />;
       } else {
         return (
@@ -42,6 +45,9 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
         if (tags[match][0] === 'p') {
           // @-mentions
           return <UserMention key={match + i} pubkey={tags[match][1]} />;
+        } else if (tags[match][0] === 'e') {
+          // note-mentions
+          return <NoteRepost key={match + i} id={tags[match][1]} />;
         } else {
           return;
         }
@@ -52,7 +58,7 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
   }, [event.content, event.tags]);
 
   return (
-    <div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-5 px-3 hover:bg-black/20">
+    <div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20">
       <div className="relative z-10 flex flex-col">
         <UserExtend pubkey={event.pubkey} time={event.created_at} />
         <div className="-mt-5 pl-[52px]">

src/components/note/connector.tsx

@@ -2,7 +2,6 @@ import { RelayContext } from '@components/relaysProvider';
 
 import { activeAccountAtom } from '@stores/account';
 import { hasNewerNoteAtom } from '@stores/note';
-import { relaysAtom } from '@stores/relays';
 
 import { dateToUnix } from '@utils/getDate';
 import { createCacheNote, getAllFollowsByID, updateLastLoginTime } from '@utils/storage';
@@ -10,15 +9,14 @@ import { pubkeyArray } from '@utils/transform';
 
 import { TauriEvent } from '@tauri-apps/api/event';
 import { appWindow, getCurrent } from '@tauri-apps/api/window';
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 
 export default function NoteConnector() {
-  const pool: any = useContext(RelayContext);
+  const [pool, relays]: any = useContext(RelayContext);
 
   const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
-  const relays = useAtomValue(relaysAtom);
-  const [activeAccount] = useAtom(activeAccountAtom);
+  const activeAccount: any = useAtomValue(activeAccountAtom);
 
   const [isOnline] = useState(true);
   const now = useRef(new Date());
@@ -53,7 +51,7 @@ export default function NoteConnector() {
 
   return (
     <>
-      <div className="inline-flex items-center gap-1 rounded-md py-1 px-1.5 hover:bg-zinc-900">
+      <div className="inline-flex items-center gap-1 rounded-md px-1.5 py-1 hover:bg-zinc-900">
         <span className="relative flex h-1.5 w-1.5">
           <span
             className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${

src/components/note/extend.tsx

@@ -7,7 +7,6 @@ import { UserMention } from '@components/user/mention';
 
 import destr from 'destr';
 import { memo, useMemo } from 'react';
-import ReactPlayer from 'react-player/lazy';
 import reactStringReplace from 'react-string-replace';
 
 export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
@@ -17,10 +16,14 @@ export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
     const tags = destr(event.tags);
     // handle urls
     parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
-      if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
+      if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
         // image url
         return <ImagePreview key={match + i} url={match} />;
-      } else if (ReactPlayer.canPlay(match)) {
+      } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
+        // youtube
+        return <VideoPreview key={match + i} url={match} />;
+      } else if (match.match(/\.(mp4|webm)$/i)) {
+        // video
         return <VideoPreview key={match + i} url={match} />;
       } else {
         return (
@@ -65,7 +68,7 @@ export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
             </div>
           </div>
         </div>
-        <div className="mt-5 flex items-center border-t border-b border-zinc-800 py-2">
+        <div className="mt-5 flex items-center border-b border-t border-zinc-800 py-2">
           <NoteMetadata
             eventID={event.id}
             eventPubkey={event.pubkey}

src/components/note/meta/comment.tsx

@@ -12,7 +12,7 @@ import CommentIcon from '@assets/icons/comment';
 import * as Dialog from '@radix-ui/react-dialog';
 import { SizeIcon } from '@radix-ui/react-icons';
 import destr from 'destr';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { useRouter } from 'next/router';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { memo, useContext, useState } from 'react';
@@ -31,10 +31,9 @@ export const NoteComment = memo(function NoteComment({
   eventContent: any;
 }) {
   const router = useRouter();
-  const pool: any = useContext(RelayContext);
+  const [pool, relays]: any = useContext(RelayContext);
 
-  const relays = useAtomValue(relaysAtom);
-  const [activeAccount] = useAtom(activeAccountAtom);
+  const activeAccount: any = useAtomValue(activeAccountAtom);
 
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -81,12 +80,12 @@ export const NoteComment = memo(function NoteComment({
                   <UserExtend pubkey={eventPubkey} time={eventTime} />
                 </div>
                 <div className="-mt-5 pl-[52px]">
-                  <div className="prose prose-zinc max-w-none break-words leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1">
+                  <div className="prose prose-zinc max-w-none break-words leading-tight dark:prose-invert prose-headings:mb-2 prose-headings:mt-3 prose-p:m-0 prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1">
                     {eventContent}
                   </div>
                 </div>
                 {/* divider */}
-                <div className="absolute top-0 left-[21px] h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
+                <div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
               </div>
               {/* comment form */}
               <div className="flex gap-2">

src/components/note/meta/reaction.tsx

@@ -1,14 +1,13 @@
 import { RelayContext } from '@components/relaysProvider';
 
 import { activeAccountAtom } from '@stores/account';
-import { relaysAtom } from '@stores/relays';
 
 import { dateToUnix } from '@utils/getDate';
 
 import LikeIcon from '@assets/icons/like';
 import LikedIcon from '@assets/icons/liked';
 
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { memo, useContext, useEffect, useState } from 'react';
 
@@ -21,10 +20,9 @@ export const NoteReaction = memo(function NoteReaction({
   eventID: string;
   eventPubkey: string;
 }) {
-  const pool: any = useContext(RelayContext);
+  const [pool, relays]: any = useContext(RelayContext);
 
-  const relays = useAtomValue(relaysAtom);
-  const [activeAccount] = useAtom(activeAccountAtom);
+  const activeAccount: any = useAtomValue(activeAccountAtom);
 
   const [isReact, setIsReact] = useState(false);
   const [like, setLike] = useState(0);

src/components/note/metadata.tsx

@@ -2,11 +2,8 @@ import { NoteComment } from '@components/note/meta/comment';
 import { NoteReaction } from '@components/note/meta/reaction';
 import { RelayContext } from '@components/relaysProvider';
 
-import { relaysAtom } from '@stores/relays';
-
 import { createCacheCommentNote } from '@utils/storage';
 
-import { useAtomValue } from 'jotai';
 import { useContext, useEffect, useState } from 'react';
 
 export default function NoteMetadata({
@@ -20,8 +17,7 @@ export default function NoteMetadata({
   eventTime: any;
   eventContent: any;
 }) {
-  const pool: any = useContext(RelayContext);
-  const relays = useAtomValue(relaysAtom);
+  const [pool, relays]: any = useContext(RelayContext);
 
   const [likes, setLikes] = useState(0);
   const [comments, setComments] = useState(0);

src/components/note/parent.tsx

@@ -6,20 +6,15 @@ import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
 import { UserMention } from '@components/user/mention';
 
-import { relaysAtom } from '@stores/relays';
-
 import { createCacheNote, getNoteByID } from '@utils/storage';
 
 import destr from 'destr';
-import { useAtomValue } from 'jotai';
 import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import ReactPlayer from 'react-player';
 import reactStringReplace from 'react-string-replace';
 
 export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
-  const pool: any = useContext(RelayContext);
+  const [pool, relays]: any = useContext(RelayContext);
 
-  const relays = useAtomValue(relaysAtom);
   const [event, setEvent] = useState(null);
   const unsubscribe = useRef(null);
 
@@ -68,10 +63,14 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
       const tags = destr(event.tags);
       // handle urls
       parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
-        if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
+        if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
           // image url
           return <ImagePreview key={match + i} url={match} />;
-        } else if (ReactPlayer.canPlay(match)) {
+        } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
+          // youtube
+          return <VideoPreview key={match + i} url={match} />;
+        } else if (match.match(/\.(mp4|webm)$/i)) {
+          // video
           return <VideoPreview key={match + i} url={match} />;
         } else {
           return (
@@ -109,7 +108,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
   if (event) {
     return (
       <div className="relative pb-5">
-        <div className="absolute top-0 left-[21px] h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
+        <div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
         <div className="relative z-10 flex flex-col">
           <UserExtend pubkey={event.pubkey} time={event.created_at} />
           <div className="-mt-5 pl-[52px]">

src/components/note/repost.tsx

@@ -2,19 +2,15 @@ import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
 import { UserMention } from '@components/user/mention';
 
-import { relaysAtom } from '@stores/relays';
-
 import { createCacheNote, getNoteByID } from '@utils/storage';
 
 import destr from 'destr';
-import { useAtomValue } from 'jotai';
 import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import reactStringReplace from 'react-string-replace';
 
 export const NoteRepost = memo(function NoteRepost({ id }: { id: string }) {
-  const pool: any = useContext(RelayContext);
+  const [pool, relays]: any = useContext(RelayContext);
 
-  const relays = useAtomValue(relaysAtom);
   const [event, setEvent] = useState(null);
   const unsubscribe = useRef(null);
 
@@ -91,7 +87,7 @@ export const NoteRepost = memo(function NoteRepost({ id }: { id: string }) {
 
   if (event) {
     return (
-      <div className="relative mt-3 mb-2 rounded-lg border border-zinc-700 bg-zinc-800 p-2 py-3">
+      <div className="relative mb-2 mt-3 rounded-lg border border-zinc-700 bg-zinc-800 p-2 py-3">
         <div className="relative z-10 flex flex-col">
           <UserExtend pubkey={event.pubkey} time={event.created_at} />
           <div className="-mt-5 pl-[52px]">

src/components/profile/followers.tsx

@@ -1,17 +1,12 @@
 import { RelayContext } from '@components/relaysProvider';
 import { UserFollow } from '@components/user/follow';
 
-import { relaysAtom } from '@stores/relays';
-
 import destr from 'destr';
-import { useAtomValue } from 'jotai';
 import { Author } from 'nostr-relaypool';
 import { useContext, useEffect, useState } from 'react';
 
 export default function ProfileFollowers({ id }: { id: string }) {
-  const pool: any = useContext(RelayContext);
-  const relays: any = useAtomValue(relaysAtom);
-
+  const [pool, relays]: any = useContext(RelayContext);
   const [followers, setFollowers] = useState(null);
 
   useEffect(() => {

src/components/profile/follows.tsx

@@ -1,16 +1,11 @@
 import { RelayContext } from '@components/relaysProvider';
 import { UserFollow } from '@components/user/follow';
 
-import { relaysAtom } from '@stores/relays';
-
-import { useAtomValue } from 'jotai';
 import { Author } from 'nostr-relaypool';
 import { useContext, useEffect, useState } from 'react';
 
 export default function ProfileFollows({ id }: { id: string }) {
-  const pool: any = useContext(RelayContext);
-  const relays: any = useAtomValue(relaysAtom);
-
+  const [pool, relays]: any = useContext(RelayContext);
   const [follows, setFollows] = useState(null);
 
   useEffect(() => {

src/components/profile/metadata.tsx

@@ -1,13 +1,11 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
 import { RelayContext } from '@components/relaysProvider';
 
-import { relaysAtom } from '@stores/relays';
+import { DEFAULT_AVATAR } from '@stores/constants';
 
 import { truncate } from '@utils/truncate';
 
-import Avatar from 'boring-avatars';
 import destr from 'destr';
-import { useAtomValue } from 'jotai';
 import Image from 'next/image';
 import { Author } from 'nostr-relaypool';
 import { useContext, useEffect, useState } from 'react';
@@ -15,9 +13,7 @@ import { useContext, useEffect, useState } from 'react';
 const DEFAULT_BANNER = 'https://bafybeiacwit7hjmdefqggxqtgh6ht5dhth7ndptwn2msl5kpkodudsr7py.ipfs.w3s.link/banner-1.jpg';
 
 export default function ProfileMetadata({ id }: { id: string }) {
-  const pool: any = useContext(RelayContext);
-  const relays: any = useAtomValue(relaysAtom);
-
+  const [pool, relays]: any = useContext(RelayContext);
   const [profile, setProfile] = useState(null);
 
   useEffect(() => {
@@ -38,17 +34,12 @@ export default function ProfileMetadata({ id }: { id: string }) {
         </div>
         <div className="relative -top-8 z-10 px-4">
           <div className="relative h-16 w-16 rounded-lg bg-zinc-900 ring-2 ring-zinc-900">
-            {profile?.picture ? (
-              <ImageWithFallback src={profile.picture} alt={id} fill={true} className="rounded-lg object-cover" />
-            ) : (
-              <Avatar
-                size={64}
-                name={id}
-                variant="beam"
-                square={true}
-                colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
-              />
-            )}
+            <ImageWithFallback
+              src={profile?.picture || DEFAULT_AVATAR}
+              alt={id}
+              fill={true}
+              className="rounded-lg object-cover"
+            />
           </div>
         </div>
       </div>

src/components/profile/notes.tsx

@@ -1,16 +1,11 @@
 import { NoteBase } from '@components/note/base';
 import { RelayContext } from '@components/relaysProvider';
 
-import { relaysAtom } from '@stores/relays';
-
-import { useAtomValue } from 'jotai';
 import { Author } from 'nostr-relaypool';
 import { useContext, useEffect, useState } from 'react';
 
 export default function ProfileNotes({ id }: { id: string }) {
-  const pool: any = useContext(RelayContext);
-  const relays: any = useAtomValue(relaysAtom);
-
+  const [pool, relays]: any = useContext(RelayContext);
   const [data, setData] = useState([]);
 
   useEffect(() => {

src/components/relaysProvider.tsx

@@ -3,7 +3,25 @@ import { createContext, useMemo } from 'react';
 
 export const RelayContext = createContext({});
 
-export default function RelayProvider({ relays, children }: { relays: Array<string>; children: React.ReactNode }) {
-  const value = useMemo(() => new RelayPool(relays, { useEventCache: false, logSubscriptions: false }), [relays]);
-  return <RelayContext.Provider value={value}>{children}</RelayContext.Provider>;
+const relays = [
+  'wss://relay.damus.io',
+  'wss://nostr-pub.wellorder.net',
+  'wss://nostr.bongbong.com',
+  'wss://nostr.zebedee.cloud',
+  'wss://nostr.fmt.wiz.biz',
+  'wss://relay.snort.social',
+  'wss://offchain.pub',
+  'wss://relay.current.fyi',
+  'wss://nostr.bitcoiner.social',
+  'wss://relay.nostr.info',
+  'wss://nostr-01.dorafactory.org',
+  'wss://nostr.zhongwen.world',
+  'wss://nostro.cc',
+  'wss://relay.nostr.net.in',
+  'wss://nos.lol',
+];
+
+export default function RelayProvider({ children }: { children: React.ReactNode }) {
+  const pool = useMemo(() => new RelayPool(relays, { useEventCache: false, logSubscriptions: false }), []);
+  return <RelayContext.Provider value={[pool, relays]}>{children}</RelayContext.Provider>;
 }

src/components/user/base.tsx

@@ -1,5 +1,7 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
 
+import { DEFAULT_AVATAR } from '@stores/constants';
+
 import { createCacheProfile } from '@utils/storage';
 import { truncate } from '@utils/truncate';
 
@@ -30,9 +32,12 @@ export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
   return (
     <div className="flex items-center gap-2">
       <div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
-        {profile?.picture && (
-          <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
-        )}
+        <ImageWithFallback
+          src={profile?.picture || DEFAULT_AVATAR}
+          alt={pubkey}
+          fill={true}
+          className="rounded-full object-cover"
+        />
       </div>
       <div className="flex w-full flex-1 flex-col items-start text-start">
         <span className="truncate font-medium leading-tight text-zinc-200">

src/components/user/extend.tsx

@@ -1,11 +1,12 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
 
+import { DEFAULT_AVATAR } from '@stores/constants';
+
 import { createCacheProfile, getCacheProfile } from '@utils/storage';
 import { truncate } from '@utils/truncate';
 
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import { fetch } from '@tauri-apps/api/http';
-import Avatar from 'boring-avatars';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import destr from 'destr';
@@ -52,22 +53,12 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
         onClick={(e) => openUserPage(e)}
         className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900 ring-fuchsia-500 ring-offset-1 ring-offset-zinc-900 group-hover:ring-1"
       >
-        {profile?.picture ? (
-          <ImageWithFallback
-            src={profile.picture}
-            alt={pubkey}
-            fill={true}
-            className="rounded-md border border-white/10 object-cover"
-          />
-        ) : (
-          <Avatar
-            size={44}
-            name={pubkey}
-            variant="beam"
-            square={true}
-            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
-          />
-        )}
+        <ImageWithFallback
+          src={profile?.picture || DEFAULT_AVATAR}
+          alt={pubkey}
+          fill={true}
+          className="rounded-md border border-white/10 object-cover"
+        />
       </div>
       <div className="flex w-full flex-1 items-start justify-between">
         <div className="flex w-full justify-between">

src/components/user/follow.tsx

@@ -1,5 +1,7 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
 
+import { DEFAULT_AVATAR } from '@stores/constants';
+
 import { createCacheProfile } from '@utils/storage';
 import { truncate } from '@utils/truncate';
 
@@ -30,9 +32,12 @@ export const UserFollow = memo(function UserFollow({ pubkey }: { pubkey: string
   return (
     <div className="flex items-center gap-2">
       <div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
-        {profile?.picture && (
-          <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
-        )}
+        <ImageWithFallback
+          src={profile?.picture || DEFAULT_AVATAR}
+          alt={pubkey}
+          fill={true}
+          className="rounded-full object-cover"
+        />
       </div>
       <div className="flex w-full flex-1 flex-col items-start text-start">
         <span className="truncate font-medium leading-tight text-zinc-200">

src/components/user/large.tsx

@@ -1,11 +1,12 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
 
+import { DEFAULT_AVATAR } from '@stores/constants';
+
 import { createCacheProfile, getCacheProfile } from '@utils/storage';
 import { truncate } from '@utils/truncate';
 
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import { fetch } from '@tauri-apps/api/http';
-import Avatar from 'boring-avatars';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import destr from 'destr';
@@ -42,22 +43,12 @@ export const UserLarge = memo(function UserLarge({ pubkey, time }: { pubkey: str
   return (
     <div className="flex items-center gap-2">
       <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
-        {profile?.picture ? (
-          <ImageWithFallback
-            src={profile.picture}
-            alt={pubkey}
-            fill={true}
-            className="rounded-md border border-white/10 object-cover"
-          />
-        ) : (
-          <Avatar
-            size={44}
-            name={pubkey}
-            variant="beam"
-            square={true}
-            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
-          />
-        )}
+        <ImageWithFallback
+          src={profile?.picture || DEFAULT_AVATAR}
+          alt={pubkey}
+          fill={true}
+          className="rounded-md border border-white/10 object-cover"
+        />
       </div>
       <div className="w-full flex-1">
         <div className="flex w-full justify-between">

src/components/user/mini.tsx

@@ -1,59 +1,44 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
 
-import { createCacheProfile, getCacheProfile } from '@utils/storage';
+import { DEFAULT_AVATAR } from '@stores/constants';
+
+import { getCacheProfile } from '@utils/storage';
 import { truncate } from '@utils/truncate';
 
-import { fetch } from '@tauri-apps/api/http';
-import Avatar from 'boring-avatars';
-import destr from 'destr';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
-export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
+export const UserMini = ({ pubkey }: { pubkey: string }) => {
   const [profile, setProfile] = useState(null);
 
-  const fetchProfile = useCallback(async (id: string) => {
-    const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
-      method: 'GET',
-      timeout: 30,
-    });
-    return res.data;
+  const fetchCacheProfile = useCallback(async (id: string) => {
+    const res = await getCacheProfile(id);
+    const data = JSON.parse(res.metadata);
+    setProfile(data);
   }, []);
 
   useEffect(() => {
-    getCacheProfile(pubkey).then((res) => {
-      if (res) {
-        setProfile(destr(res.metadata));
-      } else {
-        fetchProfile(pubkey)
-          .then((res: any) => {
-            setProfile(destr(res.content));
-            createCacheProfile(pubkey, res.content);
-          })
-          .catch(console.error);
-      }
-    });
-  }, [fetchProfile, pubkey]);
+    fetchCacheProfile(pubkey).catch(console.error);
+  }, [fetchCacheProfile, pubkey]);
 
-  return (
-    <div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
-      <div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
-        {profile?.picture ? (
-          <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded object-cover" />
-        ) : (
-          <Avatar
-            size={20}
-            name={pubkey}
-            variant="beam"
-            square={true}
-            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
+  if (profile) {
+    return (
+      <div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
+        <div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
+          <ImageWithFallback
+            src={profile?.picture || DEFAULT_AVATAR}
+            alt={pubkey}
+            fill={true}
+            className="rounded object-cover"
           />
-        )}
+        </div>
+        <div className="inline-flex w-full flex-1 flex-col overflow-hidden">
+          <p className="truncate leading-tight text-zinc-300">
+            {profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
+          </p>
+        </div>
       </div>
-      <div className="inline-flex w-full flex-1 flex-col overflow-hidden">
-        <p className="truncate leading-tight text-zinc-300">
-          {profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
-        </p>
-      </div>
-    </div>
-  );
-});
+    );
+  } else {
+    return <></>;
+  }
+};

src/layouts/withSidebar.tsx

@@ -13,7 +13,6 @@ export default function WithSidebarLayout({ children }: { children: React.ReactN
       </div>
       <div className="relative flex min-h-0 w-full flex-1">
         <div className="relative w-[68px] shrink-0 border-r border-zinc-900">
-          <div className="absolute top-0 left-0 h-12 w-full" />
           <AccountColumn />
         </div>
         <div className="grid w-full grid-cols-4 xl:grid-cols-5">

src/pages/_app.tsx

@@ -1,11 +1,5 @@
 import RelayProvider from '@components/relaysProvider';
 
-import { relaysAtom } from '@stores/relays';
-
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Provider, useAtomValue } from 'jotai';
-import { queryClientAtom } from 'jotai-tanstack-query';
-import { useHydrateAtoms } from 'jotai/react/utils';
 import type { NextPage } from 'next';
 import type { AppProps } from 'next/app';
 import { ReactElement, ReactNode } from 'react';
@@ -21,25 +15,9 @@ type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };
 
-const queryClient = new QueryClient();
-
-const HydrateAtoms = ({ children }) => {
-  useHydrateAtoms([[queryClientAtom, queryClient]]);
-  return children;
-};
-
 export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   // Use the layout defined at the page level, if available
   const getLayout = Component.getLayout ?? ((page) => page);
-  const relays = useAtomValue(relaysAtom);
 
-  return (
-    <QueryClientProvider client={queryClient}>
-      <Provider>
-        <HydrateAtoms>
-          <RelayProvider relays={relays}>{getLayout(<Component {...pageProps} />)}</RelayProvider>
-        </HydrateAtoms>
-      </Provider>
-    </QueryClientProvider>
-  );
+  return <RelayProvider>{getLayout(<Component {...pageProps} />)}</RelayProvider>;
 }

src/pages/index.tsx

@@ -1,38 +1,45 @@
 import BaseLayout from '@layouts/base';
 
-import { getAccounts } from '@utils/storage';
+import { activeAccountAtom } from '@stores/account';
+
+import { getActiveAccount } from '@utils/storage';
 
 import LumeSymbol from '@assets/icons/Lume';
 
+import { useSetAtom } from 'jotai';
 import { useRouter } from 'next/router';
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useEffect } from 'react';
 
 export default function Page() {
   const router = useRouter();
+  const setActiveAccount = useSetAtom(activeAccountAtom);
 
   useEffect(() => {
-    getAccounts()
+    getActiveAccount()
       .then((res: any) => {
-        if (res.length > 0) {
-          router.push('/init');
+        if (res) {
+          // update local storage
+          setActiveAccount(res);
+          // redirect
+          router.replace('/init');
         } else {
-          router.push('/onboarding');
+          router.replace('/onboarding');
         }
       })
       .catch(console.error);
-  }, [router]);
+  }, [router, setActiveAccount]);
 
   return (
     <div className="relative h-full overflow-hidden">
       {/* dragging area */}
-      <div data-tauri-drag-region className="absolute top-0 left-0 z-20 h-16 w-full bg-transparent" />
+      <div data-tauri-drag-region className="absolute left-0 top-0 z-20 h-16 w-full bg-transparent" />
       {/* end dragging area */}
       <div className="relative flex h-full flex-col items-center justify-center">
         <div className="flex flex-col items-center gap-2">
           <LumeSymbol className="h-16 w-16 text-black dark:text-white" />
           <div className="text-center">
             <h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
-              Here's an interesting fact:
+              Here&apos;s an interesting fact:
             </h3>
             <p className="font-medium text-zinc-300 dark:text-zinc-600">
               Bitcoin and Nostr can be used by anyone, and no one can stop you!

src/pages/init.tsx

@@ -11,7 +11,7 @@ import { pubkeyArray } from '@utils/transform';
 
 import LumeSymbol from '@assets/icons/Lume';
 
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { useRouter } from 'next/router';
 import {
   JSXElementConstructor,
@@ -27,12 +27,11 @@ import {
 
 export default function Page() {
   const router = useRouter();
-  const pool: any = useContext(RelayContext);
-
-  const relays = useAtomValue(relaysAtom);
-  const [activeAccount] = useAtom(activeAccountAtom);
+  const [pool, relays]: any = useContext(RelayContext);
 
+  const activeAccount: any = useAtomValue(activeAccountAtom);
   const [done, setDone] = useState(false);
+
   const now = useRef(new Date());
   const unsubscribe = useRef(null);
   const timer = useRef(null);
@@ -81,7 +80,7 @@ export default function Page() {
         }
       });
     } else {
-      router.push('/newsfeed/following');
+      router.replace('/newsfeed/following');
     }
 
     return () => {
@@ -93,7 +92,7 @@ export default function Page() {
   return (
     <div className="relative h-full overflow-hidden">
       {/* dragging area */}
-      <div data-tauri-drag-region className="absolute top-0 left-0 z-20 h-16 w-full bg-transparent" />
+      <div data-tauri-drag-region className="absolute left-0 top-0 z-20 h-16 w-full bg-transparent" />
       {/* end dragging area */}
       <div className="relative flex h-full flex-col items-center justify-center">
         <div className="flex flex-col items-center gap-2">

src/pages/newsfeed/[id].tsx

@@ -6,11 +6,8 @@ import { NoteComment } from '@components/note/comment';
 import { NoteExtend } from '@components/note/extend';
 import { RelayContext } from '@components/relaysProvider';
 
-import { relaysAtom } from '@stores/relays';
-
 import { getAllCommentNotes, getNoteByID } from '@utils/storage';
 
-import { useAtomValue } from 'jotai';
 import { useRouter } from 'next/router';
 import {
   JSXElementConstructor,
@@ -23,13 +20,11 @@ import {
 } from 'react';
 
 export default function Page() {
-  const pool: any = useContext(RelayContext);
+  const [pool, relays]: any = useContext(RelayContext);
 
   const router = useRouter();
   const id = router.query.id || null;
 
-  const relays: any = useAtomValue(relaysAtom);
-
   const [rootEvent, setRootEvent] = useState(null);
   const [comments, setComments] = useState([]);
 

src/pages/newsfeed/following.tsx

@@ -5,48 +5,109 @@ import FormBase from '@components/form/base';
 import { NoteBase } from '@components/note/base';
 import { Placeholder } from '@components/note/placeholder';
 
-import { notesAtom } from '@stores/note';
+import { hasNewerNoteAtom } from '@stores/note';
 
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { dateToUnix } from '@utils/getDate';
+import { getLatestNotes, getNotes } from '@utils/storage';
+
+import { ArrowUpIcon } from '@radix-ui/react-icons';
 import { useAtom } from 'jotai';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, Suspense, useRef } from 'react';
+import {
+  JSXElementConstructor,
+  ReactElement,
+  ReactFragment,
+  ReactPortal,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Virtuoso } from 'react-virtuoso';
 
 export default function Page() {
-  const [data]: any = useAtom(notesAtom);
-  const parentRef = useRef(null);
+  const [data, setData] = useState([]);
+  const [hasNewerNote, setHasNewerNote] = useAtom(hasNewerNoteAtom);
 
-  const virtualizer = useVirtualizer({
-    count: data.length,
-    estimateSize: () => 500,
-    getScrollElement: () => parentRef.current,
-    getItemKey: (index) => data[index].id,
-  });
-  const items = virtualizer.getVirtualItems();
+  const virtuosoRef = useRef(null);
+  const now = useRef(new Date());
+  const limit = useRef(20);
+  const offset = useRef(0);
+
+  const itemContent: any = useCallback(
+    (index: string | number) => {
+      return <NoteBase event={data[index]} />;
+    },
+    [data]
+  );
+
+  const computeItemKey = useCallback(
+    (index: string | number) => {
+      return data[index].id;
+    },
+    [data]
+  );
+
+  const initialData = useCallback(async () => {
+    const result: any = await getNotes(dateToUnix(now.current), limit.current, offset.current);
+    setData((data) => [...data, ...result]);
+  }, []);
+
+  const loadMore = useCallback(async () => {
+    offset.current += limit.current;
+    // next query
+    const result: any = await getNotes(dateToUnix(now.current), limit.current, offset.current);
+    setData((data) => [...data, ...result]);
+  }, []);
+
+  const loadLatest = useCallback(async () => {
+    offset.current += limit.current;
+    // next query
+    const result: any = await getLatestNotes(dateToUnix(now.current));
+    // update data
+    setData((data) => [...result, ...data]);
+    // hide newer trigger
+    setHasNewerNote(false);
+    // scroll to top
+    virtuosoRef.current.scrollToIndex({ index: 0 });
+  }, [setHasNewerNote]);
+
+  useEffect(() => {
+    initialData().catch(console.error);
+  }, [initialData]);
 
   return (
-    <div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
-      <div className="relative">
-        <FormBase />
-      </div>
-      <Suspense fallback={<Placeholder />}>
-        <div>
-          {items.length > 0 && (
-            <div className="relative w-full" style={{ height: virtualizer.getTotalSize() }}>
-              <div className="absolute top-0 left-0 w-full" style={{ transform: `translateY(${items[0].start}px)` }}>
-                {items.map((virtualRow) => (
-                  <div key={virtualRow.key} data-index={virtualRow.index} ref={virtualizer.measureElement}>
-                    <NoteBase event={data[virtualRow.index]} />
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
+    <div className="relative h-full w-full">
+      {hasNewerNote && (
+        <div className="absolute left-1/2 top-2 z-50 -translate-x-1/2 transform">
+          <button
+            onClick={() => loadLatest()}
+            className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 pl-3 pr-3.5 text-sm shadow-md shadow-fuchsia-800/20 active:translate-y-1"
+          >
+            <ArrowUpIcon className="h-3.5 w-3.5" />
+            Load latest
+          </button>
         </div>
-      </Suspense>
+      )}
+      <Virtuoso
+        ref={virtuosoRef}
+        data={data}
+        itemContent={itemContent}
+        computeItemKey={computeItemKey}
+        components={COMPONENTS}
+        overscan={200}
+        endReached={loadMore}
+        className="scrollbar-hide h-full w-full overflow-y-auto"
+      />
     </div>
   );
 }
 
+const COMPONENTS = {
+  Header: () => <FormBase />,
+  EmptyPlaceholder: () => <Placeholder />,
+  ScrollSeekPlaceholder: () => <Placeholder />,
+};
+
 Page.getLayout = function getLayout(
   page:
     | string

src/pages/onboarding/create/index.tsx

@@ -2,12 +2,9 @@ import BaseLayout from '@layouts/base';
 
 import { RelayContext } from '@components/relaysProvider';
 
-import { relaysAtom } from '@stores/relays';
-
 import { createAccount } from '@utils/storage';
 
 import { ArrowLeftIcon, EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
-import { useAtomValue } from 'jotai';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools';
@@ -20,9 +17,8 @@ const config: Config = {
 
 export default function Page() {
   const router = useRouter();
-  const pool: any = useContext(RelayContext);
+  const [pool, relays]: any = useContext(RelayContext);
 
-  const relays = useAtomValue(relaysAtom);
   const [type, setType] = useState('password');
   const [loading, setLoading] = useState(false);
 

src/pages/onboarding/create/step-2.tsx

@@ -3,13 +3,10 @@ import BaseLayout from '@layouts/base';
 import { RelayContext } from '@components/relaysProvider';
 import { UserBase } from '@components/user/base';
 
-import { relaysAtom } from '@stores/relays';
-
 import { createFollows } from '@utils/storage';
 
 import { CheckCircledIcon } from '@radix-ui/react-icons';
 import { createClient } from '@supabase/supabase-js';
-import { useAtomValue } from 'jotai';
 import { useRouter } from 'next/router';
 import { getEventHash, signEvent } from 'nostr-tools';
 import {
@@ -64,12 +61,11 @@ const initialList = [
 ];
 
 export default function Page() {
-  const pool: any = useContext(RelayContext);
+  const [pool, relays]: any = useContext(RelayContext);
 
   const router = useRouter();
   const { id, privkey }: any = router.query || '';
 
-  const relays = useAtomValue(relaysAtom);
   const [loading, setLoading] = useState(false);
   const [list, setList]: any = useState(initialList);
   const [follows, setFollows] = useState([]);
@@ -110,7 +106,7 @@ export default function Page() {
         if (res === 'ok') {
           // publish to relays
           pool.publish(event, relays);
-          router.push('/');
+          router.replace('/');
         }
       })
       .catch(console.error);

src/pages/onboarding/login/step-2.tsx

@@ -2,14 +2,11 @@ import BaseLayout from '@layouts/base';
 
 import { RelayContext } from '@components/relaysProvider';
 
-import { relaysAtom } from '@stores/relays';
-
 import { createAccount, createFollows } from '@utils/storage';
 import { tagsToArray } from '@utils/transform';
 import { truncate } from '@utils/truncate';
 
 import destr from 'destr';
-import { useAtomValue } from 'jotai';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { getPublicKey, nip19 } from 'nostr-tools';
@@ -24,13 +21,12 @@ import {
 } from 'react';
 
 export default function Page() {
-  const pool: any = useContext(RelayContext);
+  const [pool, relays]: any = useContext(RelayContext);
 
   const router = useRouter();
   const privkey: any = router.query.privkey || null;
   const pubkey = privkey ? getPublicKey(privkey) : null;
 
-  const relays = useAtomValue(relaysAtom);
   const [profile, setProfile] = useState(null);
   const [done, setDone] = useState(false);
 
@@ -77,7 +73,7 @@ export default function Page() {
 
   // submit then redirect to home
   const submit = () => {
-    router.push('/');
+    router.replace('/');
   };
 
   return (

src/stores/account.tsx

@@ -1,9 +1,12 @@
-import { isSSR } from '@utils/ssr';
-import { getActiveAccount } from '@utils/storage';
+import { atomWithStorage, createJSONStorage } from 'jotai/utils';
 
-import { atomWithCache } from 'jotai-cache';
+const createMyJsonStorage = () => {
+  const storage = createJSONStorage(() => localStorage);
+  const getItem = (key) => {
+    const value = storage.getItem(key);
+    return value;
+  };
+  return { ...storage, getItem };
+};
 
-export const activeAccountAtom = atomWithCache(async () => {
-  const response = isSSR ? {} : await getActiveAccount();
-  return response;
-});
+export const activeAccountAtom = atomWithStorage('activeAccount', {}, createMyJsonStorage());

src/stores/constants.tsx

@@ -0,0 +1 @@
+export const DEFAULT_AVATAR = 'https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp';

src/stores/note.tsx

@@ -1,24 +1,7 @@
-import { isSSR } from '@utils/ssr';
-import { getAllNotes } from '@utils/storage';
-
 import { atom } from 'jotai';
-import { atomsWithQuery } from 'jotai-tanstack-query';
 import { atomWithReset } from 'jotai/utils';
 
 // note content
 export const noteContentAtom = atomWithReset('');
 // notify user that connector has receive newer note
 export const hasNewerNoteAtom = atom(false);
-// query notes from database
-export const [notesAtom] = atomsWithQuery(() => ({
-  queryKey: ['notes'],
-  queryFn: async ({ queryKey: [] }) => {
-    const res = isSSR ? [] : await getAllNotes();
-    return res;
-  },
-  refetchInterval: 1000000,
-  refetchOnReconnect: true,
-  refetchOnWindowFocus: true,
-  refetchOnMount: true,
-  keepPreviousData: false,
-}));

src/utils/storage.tsx

@@ -89,9 +89,19 @@ export async function getCacheProfile(id) {
 }
 
 // get all notes
-export async function getAllNotes() {
+export async function getNotes(time, limit, offset) {
   const db = await connect();
-  return await db.select(`SELECT * FROM cache_notes GROUP BY parent_id ORDER BY created_at DESC LIMIT 500`);
+  return await db.select(
+    `SELECT * FROM cache_notes WHERE created_at <= "${time}" GROUP BY parent_id ORDER BY created_at DESC LIMIT "${limit}" OFFSET "${offset}"`
+  );
+}
+
+// get all latest notes
+export async function getLatestNotes(time) {
+  const db = await connect();
+  return await db.select(
+    `SELECT * FROM cache_notes WHERE created_at > "${time}" GROUP BY parent_id ORDER BY created_at DESC`
+  );
 }
 
 // get note by id