From f35475801365d179f2d8d7b4e20f620f9a5b6afe Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Fri, 31 Mar 2023 08:27:42 +0700
Subject: [PATCH 1/6] temporary set hardcoded relay list

---
 src/components/columns/account/active.tsx |  8 ++------
 src/components/form/base.tsx              |  7 ++-----
 src/components/form/comment.tsx           |  8 +++-----
 src/components/note/connector.tsx         | 10 ++++------
 src/components/note/meta/comment.tsx      | 11 +++++------
 src/components/note/meta/reaction.tsx     |  8 +++-----
 src/components/note/metadata.tsx          |  6 +-----
 src/components/note/parent.tsx            |  8 ++------
 src/components/note/repost.tsx            |  8 ++------
 src/components/profile/followers.tsx      |  7 +------
 src/components/profile/follows.tsx        |  7 +------
 src/components/profile/metadata.tsx       |  7 +------
 src/components/profile/notes.tsx          |  7 +------
 src/components/relaysProvider.tsx         | 24 ++++++++++++++++++++---
 src/pages/_app.tsx                        |  7 ++-----
 src/pages/init.tsx                        |  9 ++++-----
 src/pages/newsfeed/[id].tsx               |  7 +------
 src/pages/onboarding/create/index.tsx     |  6 +-----
 src/pages/onboarding/create/step-2.tsx    |  6 +-----
 src/pages/onboarding/login/step-2.tsx     |  6 +-----
 20 files changed, 59 insertions(+), 108 deletions(-)

diff --git a/src/components/columns/account/active.tsx b/src/components/columns/account/active.tsx
index 07e94106..a2f28c86 100644
--- a/src/components/columns/account/active.tsx
+++ b/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"
diff --git a/src/components/form/base.tsx b/src/components/form/base.tsx
index d73d698f..a20d4680 100644
--- a/src/components/form/base.tsx
+++ b/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 = useAtomValue(activeAccountAtom);
   const [value, setValue] = useAtom(noteContentAtom);
   const resetValue = useResetAtom(noteContentAtom);
 
diff --git a/src/components/form/comment.tsx b/src/components/form/comment.tsx
index fb799e77..cd3d5d85 100644
--- a/src/components/form/comment.tsx
+++ b/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 = useAtomValue(activeAccountAtom);
   const [value, setValue] = useState('');
 
   const profile = destr(activeAccount.metadata);
diff --git a/src/components/note/connector.tsx b/src/components/note/connector.tsx
index daf1c413..52d3ab36 100644
--- a/src/components/note/connector.tsx
+++ b/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 = 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 ${
diff --git a/src/components/note/meta/comment.tsx b/src/components/note/meta/comment.tsx
index 5476b45d..0b93302b 100644
--- a/src/components/note/meta/comment.tsx
+++ b/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 = 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">
diff --git a/src/components/note/meta/reaction.tsx b/src/components/note/meta/reaction.tsx
index 779b9905..6078d064 100644
--- a/src/components/note/meta/reaction.tsx
+++ b/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 = useAtomValue(activeAccountAtom);
 
   const [isReact, setIsReact] = useState(false);
   const [like, setLike] = useState(0);
diff --git a/src/components/note/metadata.tsx b/src/components/note/metadata.tsx
index 31c6d3a9..0f7c0be4 100644
--- a/src/components/note/metadata.tsx
+++ b/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);
diff --git a/src/components/note/parent.tsx b/src/components/note/parent.tsx
index f6013bf8..6f445ae9 100644
--- a/src/components/note/parent.tsx
+++ b/src/components/note/parent.tsx
@@ -6,20 +6,16 @@ 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);
 
@@ -109,7 +105,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]">
diff --git a/src/components/note/repost.tsx b/src/components/note/repost.tsx
index 503cb4b3..99b00334 100644
--- a/src/components/note/repost.tsx
+++ b/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]">
diff --git a/src/components/profile/followers.tsx b/src/components/profile/followers.tsx
index db7eca53..5645b764 100644
--- a/src/components/profile/followers.tsx
+++ b/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(() => {
diff --git a/src/components/profile/follows.tsx b/src/components/profile/follows.tsx
index 76ebd791..14cda816 100644
--- a/src/components/profile/follows.tsx
+++ b/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(() => {
diff --git a/src/components/profile/metadata.tsx b/src/components/profile/metadata.tsx
index 60be0da9..e3d9bc7a 100644
--- a/src/components/profile/metadata.tsx
+++ b/src/components/profile/metadata.tsx
@@ -1,13 +1,10 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
 import { RelayContext } from '@components/relaysProvider';
 
-import { relaysAtom } from '@stores/relays';
-
 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 +12,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(() => {
diff --git a/src/components/profile/notes.tsx b/src/components/profile/notes.tsx
index 11892f0d..d1a315c2 100644
--- a/src/components/profile/notes.tsx
+++ b/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(() => {
diff --git a/src/components/relaysProvider.tsx b/src/components/relaysProvider.tsx
index 592a035c..777030cf 100644
--- a/src/components/relaysProvider.tsx
+++ b/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>;
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index e607694b..d2c6e264 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,9 +1,7 @@
 import RelayProvider from '@components/relaysProvider';
 
-import { relaysAtom } from '@stores/relays';
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Provider, useAtomValue } from 'jotai';
+import { Provider } from 'jotai';
 import { queryClientAtom } from 'jotai-tanstack-query';
 import { useHydrateAtoms } from 'jotai/react/utils';
 import type { NextPage } from 'next';
@@ -31,13 +29,12 @@ const HydrateAtoms = ({ 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>
+          <RelayProvider>{getLayout(<Component {...pageProps} />)}</RelayProvider>
         </HydrateAtoms>
       </Provider>
     </QueryClientProvider>
diff --git a/src/pages/init.tsx b/src/pages/init.tsx
index 344843d7..9ed040f3 100644
--- a/src/pages/init.tsx
+++ b/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,10 +27,9 @@ import {
 
 export default function Page() {
   const router = useRouter();
-  const pool: any = useContext(RelayContext);
+  const [pool, relays]: any = useContext(RelayContext);
 
-  const relays = useAtomValue(relaysAtom);
-  const [activeAccount] = useAtom(activeAccountAtom);
+  const activeAccount = useAtomValue(activeAccountAtom);
 
   const [done, setDone] = useState(false);
   const now = useRef(new Date());
@@ -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">
diff --git a/src/pages/newsfeed/[id].tsx b/src/pages/newsfeed/[id].tsx
index 26735c08..8fb1509d 100644
--- a/src/pages/newsfeed/[id].tsx
+++ b/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([]);
 
diff --git a/src/pages/onboarding/create/index.tsx b/src/pages/onboarding/create/index.tsx
index e6703ea9..70e3c265 100644
--- a/src/pages/onboarding/create/index.tsx
+++ b/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);
 
diff --git a/src/pages/onboarding/create/step-2.tsx b/src/pages/onboarding/create/step-2.tsx
index b08090bd..e137910a 100644
--- a/src/pages/onboarding/create/step-2.tsx
+++ b/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([]);
diff --git a/src/pages/onboarding/login/step-2.tsx b/src/pages/onboarding/login/step-2.tsx
index 7882ef1e..f55b893d 100644
--- a/src/pages/onboarding/login/step-2.tsx
+++ b/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);
 

From bc610827163ce5ce1eee59bb75006b1294e2ed34 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Fri, 31 Mar 2023 10:14:31 +0700
Subject: [PATCH 2/6] refactor image with fallback and added virtuoso

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 14 ++++
 .../navigator/{messages => chats}/index.tsx   | 25 +-----
 src/components/columns/navigator/index.tsx    |  6 +-
 .../columns/navigator/messages/list.tsx       | 33 --------
 src/components/imageWithFallback.tsx          | 26 +------
 src/components/user/mini.tsx                  | 77 ++++++++-----------
 src/stores/constants.tsx                      |  1 +
 8 files changed, 57 insertions(+), 126 deletions(-)
 rename src/components/columns/navigator/{messages => chats}/index.tsx (57%)
 delete mode 100644 src/components/columns/navigator/messages/list.tsx
 create mode 100644 src/stores/constants.tsx

diff --git a/package.json b/package.json
index 0c50c4b3..fda01962 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "react-hook-form": "^7.43.8",
     "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"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 96dc9c39..d55cb2c1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -52,6 +52,7 @@ specifiers:
   react-hook-form: ^7.43.8
   react-player: ^2.12.0
   react-string-replace: ^1.1.0
+  react-virtuoso: ^4.1.1
   tailwindcss: ^3.2.7
   tauri-plugin-sql-api: github:tauri-apps/tauri-plugin-sql
   typescript: ^4.9.5
@@ -89,6 +90,7 @@ dependencies:
   react-hook-form: 7.43.8_react@18.2.0
   react-player: 2.12.0_react@18.2.0
   react-string-replace: 1.1.0
+  react-virtuoso: 4.1.1_biqbaboplfbrettd7655fr4n2y
   tauri-plugin-sql-api: github.com/tauri-apps/tauri-plugin-sql/3a8b9a6b244df7512bc5ef8692cebdedbab3ccce
   unique-names-generator: 4.7.1
   ws: 8.13.0
@@ -4514,6 +4516,18 @@ packages:
       tslib: 2.5.0
     dev: false
 
+  /react-virtuoso/4.1.1_biqbaboplfbrettd7655fr4n2y:
+    resolution:
+      { integrity: sha512-G2lyifG5UIRZI9vgcBt+6OLDL6CO5/O6YiGS+O9z+VNRjVSTioSwfBC7sVSLspYq7iyL60aIXlVqSKVJiSVhlg== }
+    engines: { node: '>=10' }
+    peerDependencies:
+      react: '>=16 || >=17 || >= 18'
+      react-dom: '>=16 || >=17 || >= 18'
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /react/18.2.0:
     resolution:
       { integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== }
diff --git a/src/components/columns/navigator/messages/index.tsx b/src/components/columns/navigator/chats/index.tsx
similarity index 57%
rename from src/components/columns/navigator/messages/index.tsx
rename to src/components/columns/navigator/chats/index.tsx
index b0852b3d..f9169731 100644
--- a/src/components/columns/navigator/messages/index.tsx
+++ b/src/components/columns/navigator/chats/index.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>
   );
diff --git a/src/components/columns/navigator/index.tsx b/src/components/columns/navigator/index.tsx
index 4b65af68..324e1582 100644
--- a/src/components/columns/navigator/index.tsx
+++ b/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>
   );
 }
diff --git a/src/components/columns/navigator/messages/list.tsx b/src/components/columns/navigator/messages/list.tsx
deleted file mode 100644
index 0dc60dc2..00000000
--- a/src/components/columns/navigator/messages/list.tsx
+++ /dev/null
@@ -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>
-  );
-});
diff --git a/src/components/imageWithFallback.tsx b/src/components/imageWithFallback.tsx
index eebf871f..dcf3ed97 100644
--- a/src/components/imageWithFallback.tsx
+++ b/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 />
   );
 });
diff --git a/src/components/user/mini.tsx b/src/components/user/mini.tsx
index ee29f09d..b5fa2bdd 100644
--- a/src/components/user/mini.tsx
+++ b/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 <></>;
+  }
+};
diff --git a/src/stores/constants.tsx b/src/stores/constants.tsx
new file mode 100644
index 00000000..85705f9a
--- /dev/null
+++ b/src/stores/constants.tsx
@@ -0,0 +1 @@
+export const DEFAULT_AVATAR = 'https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp';

From 990bf985719e1666987785a92bea21a4622276cf Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Fri, 31 Mar 2023 11:36:23 +0700
Subject: [PATCH 3/6] refactor newsfeed to use react-virtuoso

---
 src/components/note/base.tsx     |   2 +-
 src/pages/newsfeed/following.tsx | 121 +++++++++++++++++++++++--------
 src/stores/note.tsx              |  17 -----
 src/utils/storage.tsx            |  14 +++-
 4 files changed, 104 insertions(+), 50 deletions(-)

diff --git a/src/components/note/base.tsx b/src/components/note/base.tsx
index 53f035eb..15bdc045 100644
--- a/src/components/note/base.tsx
+++ b/src/components/note/base.tsx
@@ -80,7 +80,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 py-5 px-3 hover:bg-black/20"
     >
       <>{getParent}</>
       <div className="relative z-10 flex flex-col">
diff --git a/src/pages/newsfeed/following.tsx b/src/pages/newsfeed/following.tsx
index d9dbc998..39ac11cf 100644
--- a/src/pages/newsfeed/following.tsx
+++ b/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 top-2 left-1/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
diff --git a/src/stores/note.tsx b/src/stores/note.tsx
index 443ebc38..920ab931 100644
--- a/src/stores/note.tsx
+++ b/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,
-}));
diff --git a/src/utils/storage.tsx b/src/utils/storage.tsx
index 708aa4a1..e9a5a812 100644
--- a/src/utils/storage.tsx
+++ b/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

From c7e2b9430ad43593c2d8df9e151363513317ecb8 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Fri, 31 Mar 2023 15:10:16 +0700
Subject: [PATCH 4/6] clean up

---
 package.json                             |  14 +-
 pnpm-lock.yaml                           | 408 +++++++++++++----------
 src/components/columns/account/index.tsx |   2 +-
 src/components/note/base.tsx             |   2 +-
 src/layouts/withSidebar.tsx              |   1 -
 src/pages/_app.tsx                       |  21 +-
 src/pages/index.tsx                      |   8 +-
 src/pages/init.tsx                       |   2 +-
 src/pages/newsfeed/following.tsx         |   2 +-
 src/pages/onboarding/create/step-2.tsx   |   2 +-
 src/pages/onboarding/login/step-2.tsx    |   2 +-
 11 files changed, 242 insertions(+), 222 deletions(-)

diff --git a/package.json b/package.json
index fda01962..2e9fdfd0 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@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",
+    "@supabase/supabase-js": "^2.13.0",
     "@tanstack/query-core": "^4.27.0",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-virtual": "3.0.0-beta.54",
@@ -39,7 +39,7 @@
     "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",
@@ -51,14 +51,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",
@@ -67,9 +67,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"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d55cb2c1..fe1c852b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,7 +9,7 @@ specifiers:
   '@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
+  '@supabase/supabase-js': ^2.13.0
   '@tailwindcss/typography': ^0.5.9
   '@tanstack/query-core': ^4.27.0
   '@tanstack/react-query': ^4.28.0
@@ -17,8 +17,8 @@ specifiers:
   '@tauri-apps/api': ^1.2.0
   '@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
@@ -28,7 +28,7 @@ specifiers:
   dayjs: ^1.11.7
   destr: ^1.2.2
   emoji-mart: ^5.5.2
-  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
@@ -45,15 +45,15 @@ specifiers:
   nostr-tools: ^1.8.1
   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
   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
-  tailwindcss: ^3.2.7
+  tailwindcss: ^3.3.1
   tauri-plugin-sql-api: github:tauri-apps/tauri-plugin-sql
   typescript: ^4.9.5
   unique-names-generator: ^4.7.1
@@ -63,12 +63,12 @@ dependencies:
   '@emoji-mart/data': 1.1.2
   '@emoji-mart/react': 1.1.1_kyrnz3vmphzqyjjk2ivrm6bcsu
   '@radix-ui/react-collapsible': 1.0.2_biqbaboplfbrettd7655fr4n2y
-  '@radix-ui/react-dialog': 1.0.3_4qaawyptjkcgzqorucvhm3koke
-  '@radix-ui/react-dropdown-menu': 2.0.4_4qaawyptjkcgzqorucvhm3koke
+  '@radix-ui/react-dialog': 1.0.3_6ayuu6vm2uqggsikytom4xssc4
+  '@radix-ui/react-dropdown-menu': 2.0.4_6ayuu6vm2uqggsikytom4xssc4
   '@radix-ui/react-icons': 1.3.0_react@18.2.0
-  '@radix-ui/react-popover': 1.0.5_4qaawyptjkcgzqorucvhm3koke
+  '@radix-ui/react-popover': 1.0.5_6ayuu6vm2uqggsikytom4xssc4
   '@radix-ui/react-tabs': 1.0.3_biqbaboplfbrettd7655fr4n2y
-  '@supabase/supabase-js': 2.12.1
+  '@supabase/supabase-js': 2.13.0
   '@tanstack/query-core': 4.27.0
   '@tanstack/react-query': 4.28.0_biqbaboplfbrettd7655fr4n2y
   '@tanstack/react-virtual': 3.0.0-beta.54_react@18.2.0
@@ -87,7 +87,7 @@ dependencies:
   nostr-tools: 1.8.1
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
-  react-hook-form: 7.43.8_react@18.2.0
+  react-hook-form: 7.43.9_react@18.2.0
   react-player: 2.12.0_react@18.2.0
   react-string-replace: 1.1.0
   react-virtuoso: 4.1.1_biqbaboplfbrettd7655fr4n2y
@@ -96,28 +96,28 @@ dependencies:
   ws: 8.13.0
 
 devDependencies:
-  '@tailwindcss/typography': 0.5.9_tailwindcss@3.2.7
+  '@tailwindcss/typography': 0.5.9_tailwindcss@3.3.1
   '@tauri-apps/cli': 1.2.3
   '@trivago/prettier-plugin-sort-imports': 4.1.1_prettier@2.8.7
-  '@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_5t5646cukn2kik5kiydglap3vi
-  '@typescript-eslint/parser': 5.57.0_vgl77cfdswitgr47lm5swmv43m
+  '@typescript-eslint/eslint-plugin': 5.57.0_x4rubgibnu7ujqspfqdeho4yiu
+  '@typescript-eslint/parser': 5.57.0_ip5up2nocltd47wbnuyybe5dxu
   autoprefixer: 10.4.14_postcss@8.4.21
   csstype: 3.1.1
-  eslint: 8.36.0
-  eslint-config-next: 13.2.4_vgl77cfdswitgr47lm5swmv43m
-  eslint-config-prettier: 8.8.0_eslint@8.36.0
-  eslint-plugin-react: 7.32.2_eslint@8.36.0
-  eslint-plugin-react-hooks: 4.6.0_eslint@8.36.0
+  eslint: 8.37.0
+  eslint-config-next: 13.2.4_ip5up2nocltd47wbnuyybe5dxu
+  eslint-config-prettier: 8.8.0_eslint@8.37.0
+  eslint-plugin-react: 7.32.2_eslint@8.37.0
+  eslint-plugin-react-hooks: 4.6.0_eslint@8.37.0
   husky: 8.0.3
   lint-staged: 13.2.0
   postcss: 8.4.21
   prettier: 2.8.7
-  prettier-plugin-tailwindcss: 0.2.5_yk5p2qt6yzw3zyyilt4azle7eu
+  prettier-plugin-tailwindcss: 0.2.6_yk5p2qt6yzw3zyyilt4azle7eu
   prop-types: 15.8.1
-  tailwindcss: 3.2.7_postcss@8.4.21
+  tailwindcss: 3.3.1_postcss@8.4.21
   typescript: 4.9.5
 
 packages:
@@ -410,31 +410,31 @@ packages:
     dev: false
     optional: true
 
-  /@eslint-community/eslint-utils/4.4.0_eslint@8.36.0:
+  /@eslint-community/eslint-utils/4.4.0_eslint@8.37.0:
     resolution:
       { integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
     dependencies:
-      eslint: 8.36.0
+      eslint: 8.37.0
       eslint-visitor-keys: 3.4.0
     dev: true
 
-  /@eslint-community/regexpp/4.4.1:
+  /@eslint-community/regexpp/4.5.0:
     resolution:
-      { integrity: sha512-BISJ6ZE4xQsuL/FmsyRaiffpq977bMlsKfGHTQrOGFErfByxIe6iZTxPf/00Zon9b9a7iUykfQwejN3s2ZW/Bw== }
+      { integrity: sha512-vITaYzIcNmjn5tF5uxcZ/ft7/RXGrMUIS9HalWckEOF6ESiwXKoMzAQf2UW0aVd6rnOeExTJVd5hmWXucBKGXQ== }
     engines: { node: ^12.0.0 || ^14.0.0 || >=16.0.0 }
     dev: true
 
-  /@eslint/eslintrc/2.0.1:
+  /@eslint/eslintrc/2.0.2:
     resolution:
-      { integrity: sha512-eFRmABvW2E5Ho6f5fHLqgena46rOj7r7OKHYfLElqcBfGFHHpjBhivyi5+jOEQuSpdc/1phIZJlbC2te+tZNIw== }
+      { integrity: sha512-3W4f5tDUra+pA+FzgugqL2pRimUTDJWKr7BINqOpkZrC0uYI0NIc0/JFgBROCU07HR6GieA5m3/rsPIhDmCXTQ== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     dependencies:
       ajv: 6.12.6
       debug: 4.3.4
-      espree: 9.5.0
+      espree: 9.5.1
       globals: 13.20.0
       ignore: 5.2.4
       import-fresh: 3.3.0
@@ -445,9 +445,9 @@ packages:
       - supports-color
     dev: true
 
-  /@eslint/js/8.36.0:
+  /@eslint/js/8.37.0:
     resolution:
-      { integrity: sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg== }
+      { integrity: sha512-x5vzdtOOGgFVDCUs81QRB2+liax8rFg3+7hqM+QhBG0/G3F1ZsoYl97UrqgHgQ9KKT7G6c4V+aTUCgu/n22v1A== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     dev: true
 
@@ -463,7 +463,7 @@ packages:
       '@floating-ui/core': 0.7.3
     dev: false
 
-  /@floating-ui/react-dom/0.7.2_4qaawyptjkcgzqorucvhm3koke:
+  /@floating-ui/react-dom/0.7.2_6ayuu6vm2uqggsikytom4xssc4:
     resolution:
       { integrity: sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg== }
     peerDependencies:
@@ -473,7 +473,7 @@ packages:
       '@floating-ui/dom': 0.5.4
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
-      use-isomorphic-layout-effect: 1.1.2_2thlp7g7odiqm7dwhn3rlhxaa4
+      use-isomorphic-layout-effect: 1.1.2_o2wclmlv6kymw75psj4clbbe6a
     transitivePeerDependencies:
       - '@types/react'
     dev: false
@@ -832,7 +832,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-dialog/1.0.3_4qaawyptjkcgzqorucvhm3koke:
+  /@radix-ui/react-dialog/1.0.3_6ayuu6vm2uqggsikytom4xssc4:
     resolution:
       { integrity: sha512-owNhq36kNPqC2/a+zJRioPg6HHnTn5B/sh/NjTY8r4W9g1L5VJlrzZIVcBr7R9Mg8iLjVmh6MGgMlfoVf/WO/A== }
     peerDependencies:
@@ -855,7 +855,7 @@ packages:
       aria-hidden: 1.2.3
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
-      react-remove-scroll: 2.5.5_2thlp7g7odiqm7dwhn3rlhxaa4
+      react-remove-scroll: 2.5.5_o2wclmlv6kymw75psj4clbbe6a
     transitivePeerDependencies:
       - '@types/react'
     dev: false
@@ -887,7 +887,7 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-dropdown-menu/2.0.4_4qaawyptjkcgzqorucvhm3koke:
+  /@radix-ui/react-dropdown-menu/2.0.4_6ayuu6vm2uqggsikytom4xssc4:
     resolution:
       { integrity: sha512-y6AT9+MydyXcByivdK1+QpjWoKaC7MLjkS/cH1Q3keEyMvDkiY85m8o2Bi6+Z1PPUlCsMULopxagQOSfN0wahg== }
     peerDependencies:
@@ -899,7 +899,7 @@ packages:
       '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
       '@radix-ui/react-context': 1.0.0_react@18.2.0
       '@radix-ui/react-id': 1.0.0_react@18.2.0
-      '@radix-ui/react-menu': 2.0.4_4qaawyptjkcgzqorucvhm3koke
+      '@radix-ui/react-menu': 2.0.4_6ayuu6vm2uqggsikytom4xssc4
       '@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0
       react: 18.2.0
@@ -953,7 +953,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-menu/2.0.4_4qaawyptjkcgzqorucvhm3koke:
+  /@radix-ui/react-menu/2.0.4_6ayuu6vm2uqggsikytom4xssc4:
     resolution:
       { integrity: sha512-mzKR47tZ1t193trEqlQoJvzY4u9vYfVH16ryBrVrCAGZzkgyWnMQYEZdUkM7y8ak9mrkKtJiqB47TlEnubeOFQ== }
     peerDependencies:
@@ -970,7 +970,7 @@ packages:
       '@radix-ui/react-focus-guards': 1.0.0_react@18.2.0
       '@radix-ui/react-focus-scope': 1.0.2_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-id': 1.0.0_react@18.2.0
-      '@radix-ui/react-popper': 1.1.1_4qaawyptjkcgzqorucvhm3koke
+      '@radix-ui/react-popper': 1.1.1_6ayuu6vm2uqggsikytom4xssc4
       '@radix-ui/react-portal': 1.0.2_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y
@@ -980,12 +980,12 @@ packages:
       aria-hidden: 1.2.3
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
-      react-remove-scroll: 2.5.5_2thlp7g7odiqm7dwhn3rlhxaa4
+      react-remove-scroll: 2.5.5_o2wclmlv6kymw75psj4clbbe6a
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /@radix-ui/react-popover/1.0.5_4qaawyptjkcgzqorucvhm3koke:
+  /@radix-ui/react-popover/1.0.5_6ayuu6vm2uqggsikytom4xssc4:
     resolution:
       { integrity: sha512-GRHZ8yD12MrN2NLobHPE8Rb5uHTxd9x372DE9PPNnBjpczAQHcZ5ne0KXG4xpf+RDdXSzdLv9ym6mYJCDTaUZg== }
     peerDependencies:
@@ -1000,7 +1000,7 @@ packages:
       '@radix-ui/react-focus-guards': 1.0.0_react@18.2.0
       '@radix-ui/react-focus-scope': 1.0.2_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-id': 1.0.0_react@18.2.0
-      '@radix-ui/react-popper': 1.1.1_4qaawyptjkcgzqorucvhm3koke
+      '@radix-ui/react-popper': 1.1.1_6ayuu6vm2uqggsikytom4xssc4
       '@radix-ui/react-portal': 1.0.2_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y
@@ -1009,12 +1009,12 @@ packages:
       aria-hidden: 1.2.3
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
-      react-remove-scroll: 2.5.5_2thlp7g7odiqm7dwhn3rlhxaa4
+      react-remove-scroll: 2.5.5_o2wclmlv6kymw75psj4clbbe6a
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /@radix-ui/react-popper/1.1.1_4qaawyptjkcgzqorucvhm3koke:
+  /@radix-ui/react-popper/1.1.1_6ayuu6vm2uqggsikytom4xssc4:
     resolution:
       { integrity: sha512-keYDcdMPNMjSC8zTsZ8wezUMiWM9Yj14wtF3s0PTIs9srnEPC9Kt2Gny1T3T81mmSeyDjZxsD9N5WCwNNb712w== }
     peerDependencies:
@@ -1022,7 +1022,7 @@ packages:
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.21.0
-      '@floating-ui/react-dom': 0.7.2_4qaawyptjkcgzqorucvhm3koke
+      '@floating-ui/react-dom': 0.7.2_6ayuu6vm2uqggsikytom4xssc4
       '@radix-ui/react-arrow': 1.0.2_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
       '@radix-ui/react-context': 1.0.0_react@18.2.0
@@ -1275,9 +1275,9 @@ packages:
       - encoding
     dev: false
 
-  /@supabase/supabase-js/2.12.1:
+  /@supabase/supabase-js/2.13.0:
     resolution:
-      { integrity: sha512-sni5tYUCjLd57xuFbL8iGP/hAq2rS/Bxh3StrGjO0v78bMcS+WPh6E/WV5SstvOrxS78RKI8fASm3jk8/UjVXA== }
+      { integrity: sha512-D37k5BIwYa4/XNe9eEPz8W0L8MS5w0j16wFDd0twClJC/z+wA4tbcaeWm5Q8IsMeExPa0LrdSrQwPI5bBg6trg== }
     dependencies:
       '@supabase/functions-js': 2.1.0
       '@supabase/gotrue-js': 2.16.0
@@ -1297,7 +1297,7 @@ packages:
       tslib: 2.5.0
     dev: false
 
-  /@tailwindcss/typography/0.5.9_tailwindcss@3.2.7:
+  /@tailwindcss/typography/0.5.9_tailwindcss@3.3.1:
     resolution:
       { integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg== }
     peerDependencies:
@@ -1307,7 +1307,7 @@ packages:
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.2.7_postcss@8.4.21
+      tailwindcss: 3.3.1_postcss@8.4.21
     dev: true
 
   /@tanstack/query-core/4.27.0:
@@ -1492,9 +1492,9 @@ packages:
       { integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== }
     dev: true
 
-  /@types/node/18.15.10:
+  /@types/node/18.15.11:
     resolution:
-      { integrity: sha512-9avDaQJczATcXgfmMAW3MIWArOO7A+m90vuCFLr8AotWf8igO/mRoYukrk2cqZVtv38tHs33retzHEilM7FpeQ== }
+      { integrity: sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q== }
 
   /@types/phoenix/1.5.5:
     resolution:
@@ -1509,12 +1509,12 @@ packages:
     resolution:
       { integrity: sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw== }
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.31
     dev: true
 
-  /@types/react/18.0.30:
+  /@types/react/18.0.31:
     resolution:
-      { integrity: sha512-AnME2cHDH11Pxt/yYX6r0w448BfTwQOLEhQEjCdwB7QskEI7EKtxhGUsExTQe/MsY3D9D5rMtu62WRocw9A8FA== }
+      { integrity: sha512-EEG67of7DsvRDU6BLLI0p+k1GojDLz9+lZsnCpCRTa/lOokvyPBvp8S5x+A24hME3yyQuIipcP70KJ6H7Qupww== }
     dependencies:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.3
@@ -1533,10 +1533,10 @@ packages:
     resolution:
       { integrity: sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ== }
     dependencies:
-      '@types/node': 18.15.10
+      '@types/node': 18.15.11
     dev: false
 
-  /@typescript-eslint/eslint-plugin/5.57.0_5t5646cukn2kik5kiydglap3vi:
+  /@typescript-eslint/eslint-plugin/5.57.0_x4rubgibnu7ujqspfqdeho4yiu:
     resolution:
       { integrity: sha512-itag0qpN6q2UMM6Xgk6xoHa0D0/P+M17THnr4SVgqn9Rgam5k/He33MA7/D7QoJcdMxHFyX7U9imaBonAX/6qA== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
@@ -1548,13 +1548,13 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@eslint-community/regexpp': 4.4.1
-      '@typescript-eslint/parser': 5.57.0_vgl77cfdswitgr47lm5swmv43m
+      '@eslint-community/regexpp': 4.5.0
+      '@typescript-eslint/parser': 5.57.0_ip5up2nocltd47wbnuyybe5dxu
       '@typescript-eslint/scope-manager': 5.57.0
-      '@typescript-eslint/type-utils': 5.57.0_vgl77cfdswitgr47lm5swmv43m
-      '@typescript-eslint/utils': 5.57.0_vgl77cfdswitgr47lm5swmv43m
+      '@typescript-eslint/type-utils': 5.57.0_ip5up2nocltd47wbnuyybe5dxu
+      '@typescript-eslint/utils': 5.57.0_ip5up2nocltd47wbnuyybe5dxu
       debug: 4.3.4
-      eslint: 8.36.0
+      eslint: 8.37.0
       grapheme-splitter: 1.0.4
       ignore: 5.2.4
       natural-compare-lite: 1.4.0
@@ -1565,7 +1565,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.57.0_vgl77cfdswitgr47lm5swmv43m:
+  /@typescript-eslint/parser/5.57.0_ip5up2nocltd47wbnuyybe5dxu:
     resolution:
       { integrity: sha512-orrduvpWYkgLCyAdNtR1QIWovcNZlEm6yL8nwH/eTxWLd8gsP+25pdLHYzL2QdkqrieaDwLpytHqycncv0woUQ== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
@@ -1580,7 +1580,7 @@ packages:
       '@typescript-eslint/types': 5.57.0
       '@typescript-eslint/typescript-estree': 5.57.0_typescript@4.9.5
       debug: 4.3.4
-      eslint: 8.36.0
+      eslint: 8.37.0
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
@@ -1595,7 +1595,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.57.0
     dev: true
 
-  /@typescript-eslint/type-utils/5.57.0_vgl77cfdswitgr47lm5swmv43m:
+  /@typescript-eslint/type-utils/5.57.0_ip5up2nocltd47wbnuyybe5dxu:
     resolution:
       { integrity: sha512-kxXoq9zOTbvqzLbdNKy1yFrxLC6GDJFE2Yuo3KqSwTmDOFjUGeWSakgoXT864WcK5/NAJkkONCiKb1ddsqhLXQ== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
@@ -1607,9 +1607,9 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/typescript-estree': 5.57.0_typescript@4.9.5
-      '@typescript-eslint/utils': 5.57.0_vgl77cfdswitgr47lm5swmv43m
+      '@typescript-eslint/utils': 5.57.0_ip5up2nocltd47wbnuyybe5dxu
       debug: 4.3.4
-      eslint: 8.36.0
+      eslint: 8.37.0
       tsutils: 3.21.0_typescript@4.9.5
       typescript: 4.9.5
     transitivePeerDependencies:
@@ -1644,20 +1644,20 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.57.0_vgl77cfdswitgr47lm5swmv43m:
+  /@typescript-eslint/utils/5.57.0_ip5up2nocltd47wbnuyybe5dxu:
     resolution:
       { integrity: sha512-ps/4WohXV7C+LTSgAL5CApxvxbMkl9B9AUZRtnEFonpIxZDIT7wC1xfvuJONMidrkB9scs4zhtRyIwHh4+18kw== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0_eslint@8.36.0
+      '@eslint-community/eslint-utils': 4.4.0_eslint@8.37.0
       '@types/json-schema': 7.0.11
       '@types/semver': 7.3.13
       '@typescript-eslint/scope-manager': 5.57.0
       '@typescript-eslint/types': 5.57.0
       '@typescript-eslint/typescript-estree': 5.57.0_typescript@4.9.5
-      eslint: 8.36.0
+      eslint: 8.37.0
       eslint-scope: 5.1.1
       semver: 7.3.8
     transitivePeerDependencies:
@@ -1683,28 +1683,6 @@ packages:
       acorn: 8.8.2
     dev: true
 
-  /acorn-node/1.8.2:
-    resolution:
-      { integrity: sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A== }
-    dependencies:
-      acorn: 7.4.1
-      acorn-walk: 7.2.0
-      xtend: 4.0.2
-    dev: true
-
-  /acorn-walk/7.2.0:
-    resolution:
-      { integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA== }
-    engines: { node: '>=0.4.0' }
-    dev: true
-
-  /acorn/7.4.1:
-    resolution:
-      { integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A== }
-    engines: { node: '>=0.4.0' }
-    hasBin: true
-    dev: true
-
   /acorn/8.8.2:
     resolution:
       { integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw== }
@@ -1802,6 +1780,11 @@ packages:
     engines: { node: '>=12' }
     dev: true
 
+  /any-promise/1.3.0:
+    resolution:
+      { integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A== }
+    dev: true
+
   /anymatch/3.1.3:
     resolution:
       { integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw== }
@@ -1915,7 +1898,7 @@ packages:
       postcss: ^8.1.0
     dependencies:
       browserslist: 4.21.5
-      caniuse-lite: 1.0.30001472
+      caniuse-lite: 1.0.30001473
       fraction.js: 4.2.0
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -2002,8 +1985,8 @@ packages:
     engines: { node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7 }
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001472
-      electron-to-chromium: 1.4.341
+      caniuse-lite: 1.0.30001473
+      electron-to-chromium: 1.4.347
       node-releases: 2.0.10
       update-browserslist-db: 1.0.10_browserslist@4.21.5
 
@@ -2035,9 +2018,9 @@ packages:
     engines: { node: '>= 6' }
     dev: true
 
-  /caniuse-lite/1.0.30001472:
+  /caniuse-lite/1.0.30001473:
     resolution:
-      { integrity: sha512-xWC/0+hHHQgj3/vrKYY0AAzeIUgr7L9wlELIcAvZdDUHlhL/kNxMdnQLOSOQfP8R51ZzPhmHdyMkI0MMpmxCfg== }
+      { integrity: sha512-ewDad7+D2vlyy+E4UJuVfiBsU69IL+8oVmTuZnH5Q6CIUbxNfI50uVpRHbUPDD6SUaN2o0Lh4DhTrvLG/Tn1yg== }
 
   /chalk/2.4.2:
     resolution:
@@ -2150,6 +2133,12 @@ packages:
     engines: { node: '>=14' }
     dev: true
 
+  /commander/4.1.1:
+    resolution:
+      { integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA== }
+    engines: { node: '>= 6' }
+    dev: true
+
   /commondir/1.0.1:
     resolution:
       { integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg== }
@@ -2298,11 +2287,6 @@ packages:
       object-keys: 1.1.1
     dev: true
 
-  /defined/1.0.1:
-    resolution:
-      { integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q== }
-    dev: true
-
   /destr/1.2.2:
     resolution:
       { integrity: sha512-lrbCJwD9saUQrqUfXvl6qoM+QN3W7tLV5pAOs+OqOmopCCz/JkE05MHedJR1xfk4IAnZuJXPVuN5+7jNA2ZCiA== }
@@ -2313,17 +2297,6 @@ packages:
       { integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ== }
     dev: false
 
-  /detective/5.2.1:
-    resolution:
-      { integrity: sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw== }
-    engines: { node: '>=0.8.0' }
-    hasBin: true
-    dependencies:
-      acorn-node: 1.8.2
-      defined: 1.0.1
-      minimist: 1.2.8
-    dev: true
-
   /didyoumean/1.2.2:
     resolution:
       { integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw== }
@@ -2363,9 +2336,9 @@ packages:
       { integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA== }
     dev: true
 
-  /electron-to-chromium/1.4.341:
+  /electron-to-chromium/1.4.347:
     resolution:
-      { integrity: sha512-R4A8VfUBQY9WmAhuqY5tjHRf5fH2AAf6vqitBOE0y6u2PgHgqHSrhZmu78dIX3fVZtjqlwJNX1i2zwC3VpHtQQ== }
+      { integrity: sha512-LNi3+/9nV0vT6Bz1OsSoZ/w7IgNuWdefZ7mjKNjZxyRlI/ag6uMXxsxAy5Etvuixq3Q26exw2fc4bNYvYQqXSw== }
 
   /emoji-mart/5.5.2:
     resolution:
@@ -2518,7 +2491,7 @@ packages:
     engines: { node: '>=10' }
     dev: true
 
-  /eslint-config-next/13.2.4_vgl77cfdswitgr47lm5swmv43m:
+  /eslint-config-next/13.2.4_ip5up2nocltd47wbnuyybe5dxu:
     resolution:
       { integrity: sha512-lunIBhsoeqw6/Lfkd6zPt25w1bn0znLA/JCL+au1HoEpSb4/PpsOYsYtgV/q+YPsoKIOzFyU5xnb04iZnXjUvg== }
     peerDependencies:
@@ -2530,28 +2503,28 @@ packages:
     dependencies:
       '@next/eslint-plugin-next': 13.2.4
       '@rushstack/eslint-patch': 1.2.0
-      '@typescript-eslint/parser': 5.57.0_vgl77cfdswitgr47lm5swmv43m
-      eslint: 8.36.0
+      '@typescript-eslint/parser': 5.57.0_ip5up2nocltd47wbnuyybe5dxu
+      eslint: 8.37.0
       eslint-import-resolver-node: 0.3.7
-      eslint-import-resolver-typescript: 3.5.3_eakrjjutlgqjxe5ydhtnd4qdmy
-      eslint-plugin-import: 2.27.5_pd4t7prljtzlsex5wwnvwlxguy
-      eslint-plugin-jsx-a11y: 6.7.1_eslint@8.36.0
-      eslint-plugin-react: 7.32.2_eslint@8.36.0
-      eslint-plugin-react-hooks: 4.6.0_eslint@8.36.0
+      eslint-import-resolver-typescript: 3.5.4_rbts4wm34tb3x7owcp777e4f4y
+      eslint-plugin-import: 2.27.5_f66okp2kqrdiymeqhgaog6g5pu
+      eslint-plugin-jsx-a11y: 6.7.1_eslint@8.37.0
+      eslint-plugin-react: 7.32.2_eslint@8.37.0
+      eslint-plugin-react-hooks: 4.6.0_eslint@8.37.0
       typescript: 4.9.5
     transitivePeerDependencies:
       - eslint-import-resolver-webpack
       - supports-color
     dev: true
 
-  /eslint-config-prettier/8.8.0_eslint@8.36.0:
+  /eslint-config-prettier/8.8.0_eslint@8.37.0:
     resolution:
       { integrity: sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA== }
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
-      eslint: 8.36.0
+      eslint: 8.37.0
     dev: true
 
   /eslint-import-resolver-node/0.3.7:
@@ -2565,9 +2538,9 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-import-resolver-typescript/3.5.3_eakrjjutlgqjxe5ydhtnd4qdmy:
+  /eslint-import-resolver-typescript/3.5.4_rbts4wm34tb3x7owcp777e4f4y:
     resolution:
-      { integrity: sha512-njRcKYBc3isE42LaTcJNVANR3R99H9bAxBDMNDr2W7yq5gYPxbU3MkdhsQukxZ/Xg9C2vcyLlDsbKfRDg0QvCQ== }
+      { integrity: sha512-9xUpnedEmSfG57sN1UvWPiEhfJ8bPt0Wg2XysA7Mlc79iFGhmJtRUg9LxtkK81FhMUui0YuR2E8iUsVhePkh4A== }
     engines: { node: ^14.18.0 || >=16.0.0 }
     peerDependencies:
       eslint: '*'
@@ -2575,8 +2548,8 @@ packages:
     dependencies:
       debug: 4.3.4
       enhanced-resolve: 5.12.0
-      eslint: 8.36.0
-      eslint-plugin-import: 2.27.5_pd4t7prljtzlsex5wwnvwlxguy
+      eslint: 8.37.0
+      eslint-plugin-import: 2.27.5_f66okp2kqrdiymeqhgaog6g5pu
       get-tsconfig: 4.5.0
       globby: 13.1.3
       is-core-module: 2.11.0
@@ -2586,7 +2559,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-module-utils/2.7.4_2ziz7fpmdx7whwdyfdgqtprsqy:
+  /eslint-module-utils/2.7.4_kilwkdng6ctuxxd7dfjxtekdra:
     resolution:
       { integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA== }
     engines: { node: '>=4' }
@@ -2608,16 +2581,16 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.57.0_vgl77cfdswitgr47lm5swmv43m
+      '@typescript-eslint/parser': 5.57.0_ip5up2nocltd47wbnuyybe5dxu
       debug: 3.2.7
-      eslint: 8.36.0
+      eslint: 8.37.0
       eslint-import-resolver-node: 0.3.7
-      eslint-import-resolver-typescript: 3.5.3_eakrjjutlgqjxe5ydhtnd4qdmy
+      eslint-import-resolver-typescript: 3.5.4_rbts4wm34tb3x7owcp777e4f4y
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-import/2.27.5_pd4t7prljtzlsex5wwnvwlxguy:
+  /eslint-plugin-import/2.27.5_f66okp2kqrdiymeqhgaog6g5pu:
     resolution:
       { integrity: sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow== }
     engines: { node: '>=4' }
@@ -2628,15 +2601,15 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.57.0_vgl77cfdswitgr47lm5swmv43m
+      '@typescript-eslint/parser': 5.57.0_ip5up2nocltd47wbnuyybe5dxu
       array-includes: 3.1.6
       array.prototype.flat: 1.3.1
       array.prototype.flatmap: 1.3.1
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 8.36.0
+      eslint: 8.37.0
       eslint-import-resolver-node: 0.3.7
-      eslint-module-utils: 2.7.4_2ziz7fpmdx7whwdyfdgqtprsqy
+      eslint-module-utils: 2.7.4_kilwkdng6ctuxxd7dfjxtekdra
       has: 1.0.3
       is-core-module: 2.11.0
       is-glob: 4.0.3
@@ -2651,7 +2624,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-jsx-a11y/6.7.1_eslint@8.36.0:
+  /eslint-plugin-jsx-a11y/6.7.1_eslint@8.37.0:
     resolution:
       { integrity: sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA== }
     engines: { node: '>=4.0' }
@@ -2667,7 +2640,7 @@ packages:
       axobject-query: 3.1.1
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
-      eslint: 8.36.0
+      eslint: 8.37.0
       has: 1.0.3
       jsx-ast-utils: 3.3.3
       language-tags: 1.0.5
@@ -2677,17 +2650,17 @@ packages:
       semver: 6.3.0
     dev: true
 
-  /eslint-plugin-react-hooks/4.6.0_eslint@8.36.0:
+  /eslint-plugin-react-hooks/4.6.0_eslint@8.37.0:
     resolution:
       { integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g== }
     engines: { node: '>=10' }
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
     dependencies:
-      eslint: 8.36.0
+      eslint: 8.37.0
     dev: true
 
-  /eslint-plugin-react/7.32.2_eslint@8.36.0:
+  /eslint-plugin-react/7.32.2_eslint@8.37.0:
     resolution:
       { integrity: sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg== }
     engines: { node: '>=4' }
@@ -2698,7 +2671,7 @@ packages:
       array.prototype.flatmap: 1.3.1
       array.prototype.tosorted: 1.1.1
       doctrine: 2.1.0
-      eslint: 8.36.0
+      eslint: 8.37.0
       estraverse: 5.3.0
       jsx-ast-utils: 3.3.3
       minimatch: 3.1.2
@@ -2736,16 +2709,16 @@ packages:
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     dev: true
 
-  /eslint/8.36.0:
+  /eslint/8.37.0:
     resolution:
-      { integrity: sha512-Y956lmS7vDqomxlaaQAHVmeb4tNMp2FWIvU/RnU5BD3IKMD/MJPr76xdyr68P8tV1iNMvN2mRK0yy3c+UjL+bw== }
+      { integrity: sha512-NU3Ps9nI05GUoVMxcZx1J8CNR6xOvUT4jAUMH5+z8lpp3aEdPVCImKw6PWG4PY+Vfkpr+jvMpxs/qoE7wq0sPw== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     hasBin: true
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0_eslint@8.36.0
-      '@eslint-community/regexpp': 4.4.1
-      '@eslint/eslintrc': 2.0.1
-      '@eslint/js': 8.36.0
+      '@eslint-community/eslint-utils': 4.4.0_eslint@8.37.0
+      '@eslint-community/regexpp': 4.5.0
+      '@eslint/eslintrc': 2.0.2
+      '@eslint/js': 8.37.0
       '@humanwhocodes/config-array': 0.11.8
       '@humanwhocodes/module-importer': 1.0.1
       '@nodelib/fs.walk': 1.2.8
@@ -2757,7 +2730,7 @@ packages:
       escape-string-regexp: 4.0.0
       eslint-scope: 7.1.1
       eslint-visitor-keys: 3.4.0
-      espree: 9.5.0
+      espree: 9.5.1
       esquery: 1.5.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
@@ -2786,9 +2759,9 @@ packages:
       - supports-color
     dev: true
 
-  /espree/9.5.0:
+  /espree/9.5.1:
     resolution:
-      { integrity: sha512-JPbJGhKc47++oo4JkEoTe2wjy4fmMwvFpgJT9cQzmfXKp22Dr6Hf1tdCteLz1h0P3t+mGvWZ+4Uankvh8+c6zw== }
+      { integrity: sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg== }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     dependencies:
       acorn: 8.8.2
@@ -3062,6 +3035,18 @@ packages:
       is-glob: 4.0.3
     dev: true
 
+  /glob/7.1.6:
+    resolution:
+      { integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA== }
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    dev: true
+
   /glob/7.1.7:
     resolution:
       { integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ== }
@@ -3518,6 +3503,12 @@ packages:
       { integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw== }
     dev: true
 
+  /jiti/1.18.2:
+    resolution:
+      { integrity: sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg== }
+    hasBin: true
+    dev: true
+
   /jotai-cache/0.3.0_jotai@2.0.3:
     resolution:
       { integrity: sha512-hV6DUD1frRpW0EN8Ss7n4KNaMZRBokQw6KPT3seA4P35QRXctMNUn4pHRlg3hzO+KBPpEZw+fyKlWAqagmuIwQ== }
@@ -3640,6 +3631,11 @@ packages:
     engines: { node: '>=10' }
     dev: true
 
+  /lines-and-columns/1.2.4:
+    resolution:
+      { integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== }
+    dev: true
+
   /lint-staged/13.2.0:
     resolution:
       { integrity: sha512-GbyK5iWinax5Dfw5obm2g2ccUiZXNGtAS4mCbJ0Lv4rq6iEtfBSjOYdcbOtAIFtM114t0vdpViDDetjVTSd8Vw== }
@@ -3829,6 +3825,15 @@ packages:
       { integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== }
     dev: true
 
+  /mz/2.7.0:
+    resolution:
+      { integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q== }
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+    dev: true
+
   /nanoid/3.3.6:
     resolution:
       { integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== }
@@ -3886,7 +3891,7 @@ packages:
     dependencies:
       '@next/env': 13.2.4
       '@swc/helpers': 0.4.14
-      caniuse-lite: 1.0.30001472
+      caniuse-lite: 1.0.30001473
       postcss: 8.4.14
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
@@ -4214,6 +4219,12 @@ packages:
     engines: { node: '>=0.10.0' }
     dev: true
 
+  /pirates/4.0.5:
+    resolution:
+      { integrity: sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ== }
+    engines: { node: '>= 6' }
+    dev: true
+
   /pkg-dir/4.2.0:
     resolution:
       { integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ== }
@@ -4324,9 +4335,9 @@ packages:
     engines: { node: '>= 0.8.0' }
     dev: true
 
-  /prettier-plugin-tailwindcss/0.2.5_yk5p2qt6yzw3zyyilt4azle7eu:
+  /prettier-plugin-tailwindcss/0.2.6_yk5p2qt6yzw3zyyilt4azle7eu:
     resolution:
-      { integrity: sha512-vZ/iKieyCx0WTxHbkf5E1rBlv/ybFk8WTT4hL5W2jlVxum2Zbe0jMUpuQdDrpa4z2vnPiJ5KIWCqL/kd16fKYg== }
+      { integrity: sha512-F+7XCl9RLF/LPrGdUMHWpsT6TM31JraonAUyE6eBmpqymFvDwyl0ETHsKFHP1NG+sEfv8bmKqnTxEbWQbHPlBA== }
     engines: { node: '>=12.17.0' }
     peerDependencies:
       '@ianvs/prettier-plugin-sort-imports': '*'
@@ -4427,9 +4438,9 @@ packages:
       { integrity: sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg== }
     dev: false
 
-  /react-hook-form/7.43.8_react@18.2.0:
+  /react-hook-form/7.43.9_react@18.2.0:
     resolution:
-      { integrity: sha512-BQm+Ge5KjTk1EchDBRhdP8Pkb7MArO2jFF+UWYr3rtvh6197khi22uloLqlWeuY02ItlCzPunPsFt1/q9wQKnw== }
+      { integrity: sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ== }
     engines: { node: '>=12.22.0' }
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18
@@ -4455,7 +4466,7 @@ packages:
       react-fast-compare: 3.2.1
     dev: false
 
-  /react-remove-scroll-bar/2.3.4_2thlp7g7odiqm7dwhn3rlhxaa4:
+  /react-remove-scroll-bar/2.3.4_o2wclmlv6kymw75psj4clbbe6a:
     resolution:
       { integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A== }
     engines: { node: '>=10' }
@@ -4466,13 +4477,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.31
       react: 18.2.0
-      react-style-singleton: 2.2.1_2thlp7g7odiqm7dwhn3rlhxaa4
+      react-style-singleton: 2.2.1_o2wclmlv6kymw75psj4clbbe6a
       tslib: 2.5.0
     dev: false
 
-  /react-remove-scroll/2.5.5_2thlp7g7odiqm7dwhn3rlhxaa4:
+  /react-remove-scroll/2.5.5_o2wclmlv6kymw75psj4clbbe6a:
     resolution:
       { integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw== }
     engines: { node: '>=10' }
@@ -4483,13 +4494,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.31
       react: 18.2.0
-      react-remove-scroll-bar: 2.3.4_2thlp7g7odiqm7dwhn3rlhxaa4
-      react-style-singleton: 2.2.1_2thlp7g7odiqm7dwhn3rlhxaa4
+      react-remove-scroll-bar: 2.3.4_o2wclmlv6kymw75psj4clbbe6a
+      react-style-singleton: 2.2.1_o2wclmlv6kymw75psj4clbbe6a
       tslib: 2.5.0
-      use-callback-ref: 1.3.0_2thlp7g7odiqm7dwhn3rlhxaa4
-      use-sidecar: 1.1.2_2thlp7g7odiqm7dwhn3rlhxaa4
+      use-callback-ref: 1.3.0_o2wclmlv6kymw75psj4clbbe6a
+      use-sidecar: 1.1.2_o2wclmlv6kymw75psj4clbbe6a
     dev: false
 
   /react-string-replace/1.1.0:
@@ -4498,7 +4509,7 @@ packages:
     engines: { node: '>=0.12.0' }
     dev: false
 
-  /react-style-singleton/2.2.1_2thlp7g7odiqm7dwhn3rlhxaa4:
+  /react-style-singleton/2.2.1_o2wclmlv6kymw75psj4clbbe6a:
     resolution:
       { integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g== }
     engines: { node: '>=10' }
@@ -4509,7 +4520,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.31
       get-nonce: 1.0.1
       invariant: 2.2.4
       react: 18.2.0
@@ -4894,6 +4905,20 @@ packages:
       react: 18.2.0
     dev: false
 
+  /sucrase/3.31.0:
+    resolution:
+      { integrity: sha512-6QsHnkqyVEzYcaiHsOKkzOtOgdJcb8i54x6AV2hDwyZcY9ZyykGZVw6L/YN98xC0evwTP6utsWWrKRaa8QlfEQ== }
+    engines: { node: '>=8' }
+    hasBin: true
+    dependencies:
+      commander: 4.1.1
+      glob: 7.1.6
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.5
+      ts-interface-checker: 0.1.13
+    dev: true
+
   /supports-color/5.5.0:
     resolution:
       { integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== }
@@ -4924,9 +4949,9 @@ packages:
       tslib: 2.5.0
     dev: true
 
-  /tailwindcss/3.2.7_postcss@8.4.21:
+  /tailwindcss/3.3.1_postcss@8.4.21:
     resolution:
-      { integrity: sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ== }
+      { integrity: sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g== }
     engines: { node: '>=12.13.0' }
     hasBin: true
     peerDependencies:
@@ -4935,12 +4960,12 @@ packages:
       arg: 5.0.2
       chokidar: 3.5.3
       color-name: 1.1.4
-      detective: 5.2.1
       didyoumean: 1.2.2
       dlv: 1.1.3
       fast-glob: 3.2.12
       glob-parent: 6.0.2
       is-glob: 4.0.3
+      jiti: 1.18.2
       lilconfig: 2.1.0
       micromatch: 4.0.5
       normalize-path: 3.0.0
@@ -4955,6 +4980,7 @@ packages:
       postcss-value-parser: 4.2.0
       quick-lru: 5.1.1
       resolve: 1.22.1
+      sucrase: 3.31.0
     transitivePeerDependencies:
       - ts-node
     dev: true
@@ -4970,6 +4996,21 @@ packages:
       { integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw== }
     dev: true
 
+  /thenify-all/1.6.0:
+    resolution:
+      { integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA== }
+    engines: { node: '>=0.8' }
+    dependencies:
+      thenify: 3.3.1
+    dev: true
+
+  /thenify/3.3.1:
+    resolution:
+      { integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw== }
+    dependencies:
+      any-promise: 1.3.0
+    dev: true
+
   /through/2.3.8:
     resolution:
       { integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg== }
@@ -5001,6 +5042,11 @@ packages:
       { integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw== }
     dev: false
 
+  /ts-interface-checker/0.1.13:
+    resolution:
+      { integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA== }
+    dev: true
+
   /tsconfig-paths/3.14.2:
     resolution:
       { integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g== }
@@ -5117,7 +5163,7 @@ packages:
     dependencies:
       punycode: 2.3.0
 
-  /use-callback-ref/1.3.0_2thlp7g7odiqm7dwhn3rlhxaa4:
+  /use-callback-ref/1.3.0_o2wclmlv6kymw75psj4clbbe6a:
     resolution:
       { integrity: sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w== }
     engines: { node: '>=10' }
@@ -5128,12 +5174,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.31
       react: 18.2.0
       tslib: 2.5.0
     dev: false
 
-  /use-isomorphic-layout-effect/1.1.2_2thlp7g7odiqm7dwhn3rlhxaa4:
+  /use-isomorphic-layout-effect/1.1.2_o2wclmlv6kymw75psj4clbbe6a:
     resolution:
       { integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA== }
     peerDependencies:
@@ -5143,11 +5189,11 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.31
       react: 18.2.0
     dev: false
 
-  /use-sidecar/1.1.2_2thlp7g7odiqm7dwhn3rlhxaa4:
+  /use-sidecar/1.1.2_o2wclmlv6kymw75psj4clbbe6a:
     resolution:
       { integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw== }
     engines: { node: '>=10' }
@@ -5158,7 +5204,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.31
       detect-node-es: 1.1.0
       react: 18.2.0
       tslib: 2.5.0
@@ -5303,12 +5349,6 @@ packages:
         optional: true
     dev: false
 
-  /xtend/4.0.2:
-    resolution:
-      { integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ== }
-    engines: { node: '>=0.4' }
-    dev: true
-
   /yaeti/0.0.6:
     resolution:
       { integrity: sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug== }
diff --git a/src/components/columns/account/index.tsx b/src/components/columns/account/index.tsx
index 83cd14bf..79856a62 100644
--- a/src/components/columns/account/index.tsx
+++ b/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"
diff --git a/src/components/note/base.tsx b/src/components/note/base.tsx
index 15bdc045..c97977a0 100644
--- a/src/components/note/base.tsx
+++ b/src/components/note/base.tsx
@@ -80,7 +80,7 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
   return (
     <div
       onClick={(e) => openThread(e)}
-      className="relative z-10 m-0 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">
diff --git a/src/layouts/withSidebar.tsx b/src/layouts/withSidebar.tsx
index c2b6384a..b474448f 100644
--- a/src/layouts/withSidebar.tsx
+++ b/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">
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index d2c6e264..3af65f2f 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,9 +1,5 @@
 import RelayProvider from '@components/relaysProvider';
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Provider } 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';
@@ -19,24 +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);
 
-  return (
-    <QueryClientProvider client={queryClient}>
-      <Provider>
-        <HydrateAtoms>
-          <RelayProvider>{getLayout(<Component {...pageProps} />)}</RelayProvider>
-        </HydrateAtoms>
-      </Provider>
-    </QueryClientProvider>
-  );
+  return <RelayProvider>{getLayout(<Component {...pageProps} />)}</RelayProvider>;
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 639ef292..de7bbdc7 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -14,9 +14,9 @@ export default function Page() {
     getAccounts()
       .then((res: any) => {
         if (res.length > 0) {
-          router.push('/init');
+          router.replace('/init');
         } else {
-          router.push('/onboarding');
+          router.replace('/onboarding');
         }
       })
       .catch(console.error);
@@ -25,14 +25,14 @@ 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">
           <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!
diff --git a/src/pages/init.tsx b/src/pages/init.tsx
index 9ed040f3..d3b09d2b 100644
--- a/src/pages/init.tsx
+++ b/src/pages/init.tsx
@@ -80,7 +80,7 @@ export default function Page() {
         }
       });
     } else {
-      router.push('/newsfeed/following');
+      router.replace('/newsfeed/following');
     }
 
     return () => {
diff --git a/src/pages/newsfeed/following.tsx b/src/pages/newsfeed/following.tsx
index 39ac11cf..f7fd0446 100644
--- a/src/pages/newsfeed/following.tsx
+++ b/src/pages/newsfeed/following.tsx
@@ -78,7 +78,7 @@ export default function Page() {
   return (
     <div className="relative h-full w-full">
       {hasNewerNote && (
-        <div className="absolute top-2 left-1/2 z-50 -translate-x-1/2 transform">
+        <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"
diff --git a/src/pages/onboarding/create/step-2.tsx b/src/pages/onboarding/create/step-2.tsx
index e137910a..9c8e6bd5 100644
--- a/src/pages/onboarding/create/step-2.tsx
+++ b/src/pages/onboarding/create/step-2.tsx
@@ -106,7 +106,7 @@ export default function Page() {
         if (res === 'ok') {
           // publish to relays
           pool.publish(event, relays);
-          router.push('/');
+          router.replace('/');
         }
       })
       .catch(console.error);
diff --git a/src/pages/onboarding/login/step-2.tsx b/src/pages/onboarding/login/step-2.tsx
index f55b893d..9e40f6c0 100644
--- a/src/pages/onboarding/login/step-2.tsx
+++ b/src/pages/onboarding/login/step-2.tsx
@@ -73,7 +73,7 @@ export default function Page() {
 
   // submit then redirect to home
   const submit = () => {
-    router.push('/');
+    router.replace('/');
   };
 
   return (

From 5b88b335a164f79b69a59c1ab9a93848c39cdc42 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Fri, 31 Mar 2023 16:06:40 +0700
Subject: [PATCH 5/6] refactor active account and clean up

---
 next.config.js                        |  13 +-
 package.json                          |   6 -
 pnpm-lock.yaml                        | 457 ++------------------------
 src/components/form/base.tsx          |   2 +-
 src/components/form/comment.tsx       |   2 +-
 src/components/note/connector.tsx     |   2 +-
 src/components/note/meta/comment.tsx  |   2 +-
 src/components/note/meta/reaction.tsx |   2 +-
 src/components/user/base.tsx          |  11 +-
 src/components/user/extend.tsx        |  25 +-
 src/components/user/follow.tsx        |  11 +-
 src/components/user/large.tsx         |  24 +-
 src/pages/index.tsx                   |  15 +-
 src/pages/init.tsx                    |   2 +-
 src/stores/account.tsx                |  17 +-
 15 files changed, 101 insertions(+), 490 deletions(-)

diff --git a/next.config.js b/next.config.js
index 3bd71dbc..a9e008bb 100644
--- a/next.config.js
+++ b/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;
diff --git a/package.json b/package.json
index 2e9fdfd0..6edca038 100644
--- a/package.json
+++ b/package.json
@@ -21,20 +21,14 @@
     "@radix-ui/react-popover": "^1.0.5",
     "@radix-ui/react-tabs": "^1.0.3",
     "@supabase/supabase-js": "^2.13.0",
-    "@tanstack/query-core": "^4.27.0",
-    "@tanstack/react-query": "^4.28.0",
-    "@tanstack/react-virtual": "3.0.0-beta.54",
     "@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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fe1c852b..b2b8a461 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,9 +11,6 @@ specifiers:
   '@radix-ui/react-tabs': ^1.0.3
   '@supabase/supabase-js': ^2.13.0
   '@tailwindcss/typography': ^0.5.9
-  '@tanstack/query-core': ^4.27.0
-  '@tanstack/react-query': ^4.28.0
-  '@tanstack/react-virtual': 3.0.0-beta.54
   '@tauri-apps/api': ^1.2.0
   '@tauri-apps/cli': ^1.2.3
   '@trivago/prettier-plugin-sort-imports': ^4.1.1
@@ -23,7 +20,6 @@ specifiers:
   '@typescript-eslint/eslint-plugin': ^5.57.0
   '@typescript-eslint/parser': ^5.57.0
   autoprefixer: ^10.4.14
-  boring-avatars: ^1.7.0
   csstype: ^3.1.1
   dayjs: ^1.11.7
   destr: ^1.2.2
@@ -37,10 +33,8 @@ specifiers:
   husky: ^8.0.3
   jotai: ^2.0.3
   jotai-cache: ^0.3.0
-  jotai-tanstack-query: ^0.6.0
   lint-staged: ^13.2.0
   next: ^13.2.4
-  next-remove-imports: ^1.0.10
   nostr-relaypool: ^0.5.18
   nostr-tools: ^1.8.1
   postcss: ^8.4.21
@@ -69,20 +63,14 @@ dependencies:
   '@radix-ui/react-popover': 1.0.5_6ayuu6vm2uqggsikytom4xssc4
   '@radix-ui/react-tabs': 1.0.3_biqbaboplfbrettd7655fr4n2y
   '@supabase/supabase-js': 2.13.0
-  '@tanstack/query-core': 4.27.0
-  '@tanstack/react-query': 4.28.0_biqbaboplfbrettd7655fr4n2y
-  '@tanstack/react-virtual': 3.0.0-beta.54_react@18.2.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_biqbaboplfbrettd7655fr4n2y
   jotai: 2.0.3_react@18.2.0
   jotai-cache: 0.3.0_jotai@2.0.3
-  jotai-tanstack-query: 0.6.0_jqgumvl52k2nlr5n23qdneaa6y
   next: 13.2.4_biqbaboplfbrettd7655fr4n2y
-  next-remove-imports: 1.0.10
   nostr-relaypool: 0.5.18_ws@8.13.0
   nostr-tools: 1.8.1
   react: 18.2.0
@@ -121,51 +109,13 @@ devDependencies:
   typescript: 4.9.5
 
 packages:
-  /@ampproject/remapping/2.2.0:
-    resolution:
-      { integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w== }
-    engines: { node: '>=6.0.0' }
-    dependencies:
-      '@jridgewell/gen-mapping': 0.1.1
-      '@jridgewell/trace-mapping': 0.3.17
-    dev: false
-
   /@babel/code-frame/7.18.6:
     resolution:
       { integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q== }
     engines: { node: '>=6.9.0' }
     dependencies:
       '@babel/highlight': 7.18.6
-
-  /@babel/compat-data/7.21.0:
-    resolution:
-      { integrity: sha512-gMuZsmsgxk/ENC3O/fRw5QY8A9/uxQbbCEypnLIiYYc/qVJtEV7ouxC3EllIIwNzMqAQee5tanFabWsUOutS7g== }
-    engines: { node: '>=6.9.0' }
-    dev: false
-
-  /@babel/core/7.21.3:
-    resolution:
-      { integrity: sha512-qIJONzoa/qiHghnm0l1n4i/6IIziDpzqc36FBs4pzMhDUraHqponwJLiAKm1hGLP3OSB/TVNz6rMwVGpwxxySw== }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@ampproject/remapping': 2.2.0
-      '@babel/code-frame': 7.18.6
-      '@babel/generator': 7.21.3
-      '@babel/helper-compilation-targets': 7.20.7_@babel+core@7.21.3
-      '@babel/helper-module-transforms': 7.21.2
-      '@babel/helpers': 7.21.0
-      '@babel/parser': 7.21.3
-      '@babel/template': 7.20.7
-      '@babel/traverse': 7.21.3
-      '@babel/types': 7.21.3
-      convert-source-map: 1.9.0
-      debug: 4.3.4
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
+    dev: true
 
   /@babel/generator/7.17.7:
     resolution:
@@ -177,36 +127,11 @@ packages:
       source-map: 0.5.7
     dev: true
 
-  /@babel/generator/7.21.3:
-    resolution:
-      { integrity: sha512-QS3iR1GYC/YGUnW7IdggFeN5c1poPUurnGttOV/bZgPGV+izC/D8HnD6DLwod0fsatNyVn1G3EVWMYIF0nHbeA== }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/types': 7.21.3
-      '@jridgewell/gen-mapping': 0.3.2
-      '@jridgewell/trace-mapping': 0.3.17
-      jsesc: 2.5.2
-    dev: false
-
-  /@babel/helper-compilation-targets/7.20.7_@babel+core@7.21.3:
-    resolution:
-      { integrity: sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ== }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/compat-data': 7.21.0
-      '@babel/core': 7.21.3
-      '@babel/helper-validator-option': 7.21.0
-      browserslist: 4.21.5
-      lru-cache: 5.1.1
-      semver: 6.3.0
-    dev: false
-
   /@babel/helper-environment-visitor/7.18.9:
     resolution:
       { integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg== }
     engines: { node: '>=6.9.0' }
+    dev: true
 
   /@babel/helper-function-name/7.21.0:
     resolution:
@@ -215,6 +140,7 @@ packages:
     dependencies:
       '@babel/template': 7.20.7
       '@babel/types': 7.21.3
+    dev: true
 
   /@babel/helper-hoist-variables/7.18.6:
     resolution:
@@ -222,39 +148,7 @@ packages:
     engines: { node: '>=6.9.0' }
     dependencies:
       '@babel/types': 7.21.3
-
-  /@babel/helper-module-imports/7.18.6:
-    resolution:
-      { integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA== }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/types': 7.21.3
-    dev: false
-
-  /@babel/helper-module-transforms/7.21.2:
-    resolution:
-      { integrity: sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ== }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/helper-environment-visitor': 7.18.9
-      '@babel/helper-module-imports': 7.18.6
-      '@babel/helper-simple-access': 7.20.2
-      '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/helper-validator-identifier': 7.19.1
-      '@babel/template': 7.20.7
-      '@babel/traverse': 7.21.3
-      '@babel/types': 7.21.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@babel/helper-simple-access/7.20.2:
-    resolution:
-      { integrity: sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA== }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/types': 7.21.3
-    dev: false
+    dev: true
 
   /@babel/helper-split-export-declaration/7.18.6:
     resolution:
@@ -262,34 +156,19 @@ packages:
     engines: { node: '>=6.9.0' }
     dependencies:
       '@babel/types': 7.21.3
+    dev: true
 
   /@babel/helper-string-parser/7.19.4:
     resolution:
       { integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw== }
     engines: { node: '>=6.9.0' }
+    dev: true
 
   /@babel/helper-validator-identifier/7.19.1:
     resolution:
       { integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w== }
     engines: { node: '>=6.9.0' }
-
-  /@babel/helper-validator-option/7.21.0:
-    resolution:
-      { integrity: sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ== }
-    engines: { node: '>=6.9.0' }
-    dev: false
-
-  /@babel/helpers/7.21.0:
-    resolution:
-      { integrity: sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA== }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/template': 7.20.7
-      '@babel/traverse': 7.21.3
-      '@babel/types': 7.21.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
+    dev: true
 
   /@babel/highlight/7.18.6:
     resolution:
@@ -299,6 +178,7 @@ packages:
       '@babel/helper-validator-identifier': 7.19.1
       chalk: 2.4.2
       js-tokens: 4.0.0
+    dev: true
 
   /@babel/parser/7.21.3:
     resolution:
@@ -307,6 +187,7 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.17.0
+    dev: true
 
   /@babel/runtime/7.21.0:
     resolution:
@@ -323,6 +204,7 @@ packages:
       '@babel/code-frame': 7.18.6
       '@babel/parser': 7.21.3
       '@babel/types': 7.21.3
+    dev: true
 
   /@babel/traverse/7.17.3:
     resolution:
@@ -343,25 +225,6 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/traverse/7.21.3:
-    resolution:
-      { integrity: sha512-XLyopNeaTancVitYZe2MlUEvgKb6YVVPXzofHgqHijCImG33b/uTurMS488ht/Hbsb2XK3U2BnSTxKVNGV3nGQ== }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/code-frame': 7.18.6
-      '@babel/generator': 7.21.3
-      '@babel/helper-environment-visitor': 7.18.9
-      '@babel/helper-function-name': 7.21.0
-      '@babel/helper-hoist-variables': 7.18.6
-      '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/parser': 7.21.3
-      '@babel/types': 7.21.3
-      debug: 4.3.4
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
   /@babel/types/7.17.0:
     resolution:
       { integrity: sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw== }
@@ -369,6 +232,7 @@ packages:
     dependencies:
       '@babel/helper-validator-identifier': 7.19.1
       to-fast-properties: 2.0.0
+    dev: true
 
   /@babel/types/7.21.3:
     resolution:
@@ -378,6 +242,7 @@ packages:
       '@babel/helper-string-parser': 7.19.4
       '@babel/helper-validator-identifier': 7.19.1
       to-fast-properties: 2.0.0
+    dev: true
 
   /@emoji-mart/data/1.1.2:
     resolution:
@@ -511,37 +376,12 @@ packages:
       graceful-fs: 4.2.11
     dev: false
 
-  /@jridgewell/gen-mapping/0.1.1:
-    resolution:
-      { integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w== }
-    engines: { node: '>=6.0.0' }
-    dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.14
-    dev: false
-
-  /@jridgewell/gen-mapping/0.3.2:
-    resolution:
-      { integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A== }
-    engines: { node: '>=6.0.0' }
-    dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.14
-      '@jridgewell/trace-mapping': 0.3.17
-    dev: false
-
   /@jridgewell/resolve-uri/3.1.0:
     resolution:
       { integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w== }
     engines: { node: '>=6.0.0' }
     dev: false
 
-  /@jridgewell/set-array/1.1.2:
-    resolution:
-      { integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw== }
-    engines: { node: '>=6.0.0' }
-    dev: false
-
   /@jridgewell/sourcemap-codec/1.4.14:
     resolution:
       { integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw== }
@@ -1310,45 +1150,6 @@ packages:
       tailwindcss: 3.3.1_postcss@8.4.21
     dev: true
 
-  /@tanstack/query-core/4.27.0:
-    resolution:
-      { integrity: sha512-sm+QncWaPmM73IPwFlmWSKPqjdTXZeFf/7aEmWh00z7yl2FjqophPt0dE1EHW9P1giMC5rMviv7OUbSDmWzXXA== }
-    dev: false
-
-  /@tanstack/react-query/4.28.0_biqbaboplfbrettd7655fr4n2y:
-    resolution:
-      { integrity: sha512-8cGBV5300RHlvYdS4ea+G1JcZIt5CIuprXYFnsWggkmGoC0b5JaqG0fIX3qwDL9PTNkKvG76NGThIWbpXivMrQ== }
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-native: '*'
-    peerDependenciesMeta:
-      react-dom:
-        optional: true
-      react-native:
-        optional: true
-    dependencies:
-      '@tanstack/query-core': 4.27.0
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-      use-sync-external-store: 1.2.0_react@18.2.0
-    dev: false
-
-  /@tanstack/react-virtual/3.0.0-beta.54_react@18.2.0:
-    resolution:
-      { integrity: sha512-D1mDMf4UPbrtHRZZriCly5bXTBMhylslm4dhcHqTtDJ6brQcgGmk8YD9JdWBGWfGSWPKoh2x1H3e7eh+hgPXtQ== }
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@tanstack/virtual-core': 3.0.0-beta.54
-      react: 18.2.0
-    dev: false
-
-  /@tanstack/virtual-core/3.0.0-beta.54:
-    resolution:
-      { integrity: sha512-jtkwqdP2rY2iCCDVAFuaNBH3fiEi29aTn2RhtIoky8DTTiCdc48plpHHreLwmv1PICJ4AJUUESaq3xa8fZH8+g== }
-    dev: false
-
   /@tauri-apps/api/1.2.0:
     resolution:
       { integrity: sha512-lsI54KI6HGf7VImuf/T9pnoejfgkNoXveP14pVV7XarrQ46rOejIVJLFqHI9sRReJMGdh2YuCoI3cc/yCWCsrw== }
@@ -1486,6 +1287,7 @@ packages:
   /@types/json-schema/7.0.11:
     resolution:
       { integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ== }
+    dev: true
 
   /@types/json5/0.0.29:
     resolution:
@@ -1699,26 +1501,6 @@ packages:
       indent-string: 4.0.0
     dev: true
 
-  /ajv-formats/2.1.1:
-    resolution:
-      { integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA== }
-    peerDependenciesMeta:
-      ajv:
-        optional: true
-    dependencies:
-      ajv: 8.12.0
-    dev: false
-
-  /ajv-keywords/5.1.0_ajv@8.12.0:
-    resolution:
-      { integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw== }
-    peerDependencies:
-      ajv: ^8.8.2
-    dependencies:
-      ajv: 8.12.0
-      fast-deep-equal: 3.1.3
-    dev: false
-
   /ajv/6.12.6:
     resolution:
       { integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g== }
@@ -1729,16 +1511,6 @@ packages:
       uri-js: 4.4.1
     dev: true
 
-  /ajv/8.12.0:
-    resolution:
-      { integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA== }
-    dependencies:
-      fast-deep-equal: 3.1.3
-      json-schema-traverse: 1.0.0
-      require-from-string: 2.0.2
-      uri-js: 4.4.1
-    dev: false
-
   /ansi-escapes/4.3.2:
     resolution:
       { integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ== }
@@ -1765,6 +1537,7 @@ packages:
     engines: { node: '>=4' }
     dependencies:
       color-convert: 1.9.3
+    dev: true
 
   /ansi-styles/4.3.0:
     resolution:
@@ -1925,28 +1698,6 @@ packages:
       deep-equal: 2.2.0
     dev: true
 
-  /babel-loader/9.1.2_@babel+core@7.21.3:
-    resolution:
-      { integrity: sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA== }
-    engines: { node: '>= 14.15.0' }
-    peerDependencies:
-      '@babel/core': ^7.12.0
-      webpack: '>=5'
-    dependencies:
-      '@babel/core': 7.21.3
-      find-cache-dir: 3.3.2
-      schema-utils: 4.0.0
-    dev: false
-
-  /babel-plugin-transform-remove-imports/1.7.0_@babel+core@7.21.3:
-    resolution:
-      { integrity: sha512-gprmWf6ry5qrnxMyiDaxZpXzZJP6R9FRA+p0AImLIWRmSEGtlKcFprHKeGMZYkII9rJR6Q1hYou+n1fk6rWf2g== }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.21.3
-    dev: false
-
   /balanced-match/1.0.2:
     resolution:
       { integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== }
@@ -1958,11 +1709,6 @@ packages:
     engines: { node: '>=8' }
     dev: true
 
-  /boring-avatars/1.7.0:
-    resolution:
-      { integrity: sha512-ZNHd8J7C/V0IjQMGQowLJ5rScEFU23WxePigH6rqKcT2Esf0qhYvYxw8s9i3srmlfCnCV00ddBjaoGey1eNOfA== }
-    dev: false
-
   /brace-expansion/1.1.11:
     resolution:
       { integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA== }
@@ -1989,6 +1735,7 @@ packages:
       electron-to-chromium: 1.4.347
       node-releases: 2.0.10
       update-browserslist-db: 1.0.10_browserslist@4.21.5
+    dev: true
 
   /bufferutil/4.0.7:
     resolution:
@@ -2030,6 +1777,7 @@ packages:
       ansi-styles: 3.2.1
       escape-string-regexp: 1.0.5
       supports-color: 5.5.0
+    dev: true
 
   /chalk/4.1.2:
     resolution:
@@ -2104,6 +1852,7 @@ packages:
       { integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== }
     dependencies:
       color-name: 1.1.3
+    dev: true
 
   /color-convert/2.0.1:
     resolution:
@@ -2116,6 +1865,7 @@ packages:
   /color-name/1.1.3:
     resolution:
       { integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== }
+    dev: true
 
   /color-name/1.1.4:
     resolution:
@@ -2139,21 +1889,11 @@ packages:
     engines: { node: '>= 6' }
     dev: true
 
-  /commondir/1.0.1:
-    resolution:
-      { integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg== }
-    dev: false
-
   /concat-map/0.0.1:
     resolution:
       { integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg== }
     dev: true
 
-  /convert-source-map/1.9.0:
-    resolution:
-      { integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== }
-    dev: false
-
   /cross-fetch/3.1.5:
     resolution:
       { integrity: sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw== }
@@ -2237,6 +1977,7 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.2
+    dev: true
 
   /deep-equal/2.2.0:
     resolution:
@@ -2339,6 +2080,7 @@ packages:
   /electron-to-chromium/1.4.347:
     resolution:
       { integrity: sha512-LNi3+/9nV0vT6Bz1OsSoZ/w7IgNuWdefZ7mjKNjZxyRlI/ag6uMXxsxAy5Etvuixq3Q26exw2fc4bNYvYQqXSw== }
+    dev: true
 
   /emoji-mart/5.5.2:
     resolution:
@@ -2479,11 +2221,13 @@ packages:
     resolution:
       { integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw== }
     engines: { node: '>=6' }
+    dev: true
 
   /escape-string-regexp/1.0.5:
     resolution:
       { integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg== }
     engines: { node: '>=0.8.0' }
+    dev: true
 
   /escape-string-regexp/4.0.0:
     resolution:
@@ -2829,6 +2573,7 @@ packages:
   /fast-deep-equal/3.1.3:
     resolution:
       { integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== }
+    dev: true
 
   /fast-glob/3.2.12:
     resolution:
@@ -2875,25 +2620,6 @@ packages:
       to-regex-range: 5.0.1
     dev: true
 
-  /find-cache-dir/3.3.2:
-    resolution:
-      { integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig== }
-    engines: { node: '>=8' }
-    dependencies:
-      commondir: 1.0.1
-      make-dir: 3.1.0
-      pkg-dir: 4.2.0
-    dev: false
-
-  /find-up/4.1.0:
-    resolution:
-      { integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw== }
-    engines: { node: '>=8' }
-    dependencies:
-      locate-path: 5.0.0
-      path-exists: 4.0.0
-    dev: false
-
   /find-up/5.0.0:
     resolution:
       { integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng== }
@@ -2978,12 +2704,6 @@ packages:
       { integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ== }
     dev: true
 
-  /gensync/1.0.0-beta.2:
-    resolution:
-      { integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg== }
-    engines: { node: '>=6.9.0' }
-    dev: false
-
   /get-intrinsic/1.2.0:
     resolution:
       { integrity: sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q== }
@@ -3075,6 +2795,7 @@ packages:
     resolution:
       { integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== }
     engines: { node: '>=4' }
+    dev: true
 
   /globals/13.20.0:
     resolution:
@@ -3152,6 +2873,7 @@ packages:
     resolution:
       { integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw== }
     engines: { node: '>=4' }
+    dev: true
 
   /has-flag/4.0.0:
     resolution:
@@ -3518,17 +3240,6 @@ packages:
       jotai: 2.0.3_react@18.2.0
     dev: false
 
-  /jotai-tanstack-query/0.6.0_jqgumvl52k2nlr5n23qdneaa6y:
-    resolution:
-      { integrity: sha512-87oD6MnjrgfLWeCJXB/dQt4xyCmyFYZeG9jw4Y2lIprtwLKS5s/vCEjNP5fnYG2nuPBkopiRECTEqtIysvHSxg== }
-    peerDependencies:
-      '@tanstack/query-core': '*'
-      jotai: '>=1.11.0'
-    dependencies:
-      '@tanstack/query-core': 4.27.0
-      jotai: 2.0.3_react@18.2.0
-    dev: false
-
   /jotai/2.0.3_react@18.2.0:
     resolution:
       { integrity: sha512-MMjhSPAL3RoeZD9WbObufRT2quThEAEknHHridf2ma8Ml7ZVQmUiHk0ssdbR3F0h3kcwhYqSGJ59OjhPge7RRg== }
@@ -3564,17 +3275,13 @@ packages:
       { integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA== }
     engines: { node: '>=4' }
     hasBin: true
+    dev: true
 
   /json-schema-traverse/0.4.1:
     resolution:
       { integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg== }
     dev: true
 
-  /json-schema-traverse/1.0.0:
-    resolution:
-      { integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug== }
-    dev: false
-
   /json-stable-stringify-without-jsonify/1.0.1:
     resolution:
       { integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw== }
@@ -3588,13 +3295,6 @@ packages:
       minimist: 1.2.8
     dev: true
 
-  /json5/2.2.3:
-    resolution:
-      { integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== }
-    engines: { node: '>=6' }
-    hasBin: true
-    dev: false
-
   /jsx-ast-utils/3.3.3:
     resolution:
       { integrity: sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw== }
@@ -3685,14 +3385,6 @@ packages:
       { integrity: sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA== }
     dev: false
 
-  /locate-path/5.0.0:
-    resolution:
-      { integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g== }
-    engines: { node: '>=8' }
-    dependencies:
-      p-locate: 4.1.0
-    dev: false
-
   /locate-path/6.0.0:
     resolution:
       { integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw== }
@@ -3739,13 +3431,6 @@ packages:
     dependencies:
       js-tokens: 4.0.0
 
-  /lru-cache/5.1.1:
-    resolution:
-      { integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w== }
-    dependencies:
-      yallist: 3.1.1
-    dev: false
-
   /lru-cache/6.0.0:
     resolution:
       { integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA== }
@@ -3754,14 +3439,6 @@ packages:
       yallist: 4.0.0
     dev: true
 
-  /make-dir/3.1.0:
-    resolution:
-      { integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw== }
-    engines: { node: '>=8' }
-    dependencies:
-      semver: 6.3.0
-    dev: false
-
   /memoize-one/5.2.1:
     resolution:
       { integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== }
@@ -3819,6 +3496,7 @@ packages:
   /ms/2.1.2:
     resolution:
       { integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== }
+    dev: true
 
   /ms/2.1.3:
     resolution:
@@ -3850,18 +3528,6 @@ packages:
       { integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw== }
     dev: true
 
-  /next-remove-imports/1.0.10:
-    resolution:
-      { integrity: sha512-BTlwYD86PyU0YuO2/CVfm+82WZiUpkspH7YkzFBM/nua/d8zouw+/4eUhLl278dtZXIlarmhpH47cWwred4w6Q== }
-    dependencies:
-      '@babel/core': 7.21.3
-      babel-loader: 9.1.2_@babel+core@7.21.3
-      babel-plugin-transform-remove-imports: 1.7.0_@babel+core@7.21.3
-    transitivePeerDependencies:
-      - supports-color
-      - webpack
-    dev: false
-
   /next-tick/1.1.0:
     resolution:
       { integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ== }
@@ -3937,6 +3603,7 @@ packages:
   /node-releases/2.0.10:
     resolution:
       { integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w== }
+    dev: true
 
   /normalize-path/3.0.0:
     resolution:
@@ -4108,14 +3775,6 @@ packages:
       word-wrap: 1.2.3
     dev: true
 
-  /p-limit/2.3.0:
-    resolution:
-      { integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w== }
-    engines: { node: '>=6' }
-    dependencies:
-      p-try: 2.2.0
-    dev: false
-
   /p-limit/3.1.0:
     resolution:
       { integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ== }
@@ -4124,14 +3783,6 @@ packages:
       yocto-queue: 0.1.0
     dev: true
 
-  /p-locate/4.1.0:
-    resolution:
-      { integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A== }
-    engines: { node: '>=8' }
-    dependencies:
-      p-limit: 2.3.0
-    dev: false
-
   /p-locate/5.0.0:
     resolution:
       { integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw== }
@@ -4148,12 +3799,6 @@ packages:
       aggregate-error: 3.1.0
     dev: true
 
-  /p-try/2.2.0:
-    resolution:
-      { integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ== }
-    engines: { node: '>=6' }
-    dev: false
-
   /parent-module/1.0.1:
     resolution:
       { integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g== }
@@ -4166,6 +3811,7 @@ packages:
     resolution:
       { integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w== }
     engines: { node: '>=8' }
+    dev: true
 
   /path-is-absolute/1.0.1:
     resolution:
@@ -4225,14 +3871,6 @@ packages:
     engines: { node: '>= 6' }
     dev: true
 
-  /pkg-dir/4.2.0:
-    resolution:
-      { integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ== }
-    engines: { node: '>=8' }
-    dependencies:
-      find-up: 4.1.0
-    dev: false
-
   /postcss-import/14.1.0_postcss@8.4.21:
     resolution:
       { integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw== }
@@ -4410,6 +4048,7 @@ packages:
     resolution:
       { integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA== }
     engines: { node: '>=6' }
+    dev: true
 
   /queue-microtask/1.2.3:
     resolution:
@@ -4576,12 +4215,6 @@ packages:
       functions-have-names: 1.2.3
     dev: true
 
-  /require-from-string/2.0.2:
-    resolution:
-      { integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw== }
-    engines: { node: '>=0.10.0' }
-    dev: false
-
   /resolve-from/4.0.0:
     resolution:
       { integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== }
@@ -4672,21 +4305,11 @@ packages:
       loose-envify: 1.4.0
     dev: false
 
-  /schema-utils/4.0.0:
-    resolution:
-      { integrity: sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg== }
-    engines: { node: '>= 12.13.0' }
-    dependencies:
-      '@types/json-schema': 7.0.11
-      ajv: 8.12.0
-      ajv-formats: 2.1.1
-      ajv-keywords: 5.1.0_ajv@8.12.0
-    dev: false
-
   /semver/6.3.0:
     resolution:
       { integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== }
     hasBin: true
+    dev: true
 
   /semver/7.3.8:
     resolution:
@@ -4925,6 +4548,7 @@ packages:
     engines: { node: '>=4' }
     dependencies:
       has-flag: 3.0.0
+    dev: true
 
   /supports-color/7.2.0:
     resolution:
@@ -5028,6 +4652,7 @@ packages:
     resolution:
       { integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog== }
     engines: { node: '>=4' }
+    dev: true
 
   /to-regex-range/5.0.1:
     resolution:
@@ -5156,12 +4781,14 @@ packages:
       browserslist: 4.21.5
       escalade: 3.1.1
       picocolors: 1.0.0
+    dev: true
 
   /uri-js/4.4.1:
     resolution:
       { integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg== }
     dependencies:
       punycode: 2.3.0
+    dev: true
 
   /use-callback-ref/1.3.0_o2wclmlv6kymw75psj4clbbe6a:
     resolution:
@@ -5210,15 +4837,6 @@ packages:
       tslib: 2.5.0
     dev: false
 
-  /use-sync-external-store/1.2.0_react@18.2.0:
-    resolution:
-      { integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== }
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /utf-8-validate/5.0.10:
     resolution:
       { integrity: sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ== }
@@ -5355,11 +4973,6 @@ packages:
     engines: { node: '>=0.10.32' }
     dev: false
 
-  /yallist/3.1.1:
-    resolution:
-      { integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== }
-    dev: false
-
   /yallist/4.0.0:
     resolution:
       { integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== }
diff --git a/src/components/form/base.tsx b/src/components/form/base.tsx
index a20d4680..1a940502 100644
--- a/src/components/form/base.tsx
+++ b/src/components/form/base.tsx
@@ -15,7 +15,7 @@ import { useContext } from 'react';
 export default function FormBase() {
   const [pool, relays]: any = useContext(RelayContext);
 
-  const activeAccount = useAtomValue(activeAccountAtom);
+  const activeAccount: any = useAtomValue(activeAccountAtom);
   const [value, setValue] = useAtom(noteContentAtom);
   const resetValue = useResetAtom(noteContentAtom);
 
diff --git a/src/components/form/comment.tsx b/src/components/form/comment.tsx
index cd3d5d85..f8212896 100644
--- a/src/components/form/comment.tsx
+++ b/src/components/form/comment.tsx
@@ -13,7 +13,7 @@ import { useContext, useState } from 'react';
 export default function FormComment({ eventID }: { eventID: any }) {
   const [pool, relays]: any = useContext(RelayContext);
 
-  const activeAccount = useAtomValue(activeAccountAtom);
+  const activeAccount: any = useAtomValue(activeAccountAtom);
   const [value, setValue] = useState('');
 
   const profile = destr(activeAccount.metadata);
diff --git a/src/components/note/connector.tsx b/src/components/note/connector.tsx
index 52d3ab36..12ef9ac7 100644
--- a/src/components/note/connector.tsx
+++ b/src/components/note/connector.tsx
@@ -16,7 +16,7 @@ export default function NoteConnector() {
   const [pool, relays]: any = useContext(RelayContext);
 
   const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
-  const activeAccount = useAtomValue(activeAccountAtom);
+  const activeAccount: any = useAtomValue(activeAccountAtom);
 
   const [isOnline] = useState(true);
   const now = useRef(new Date());
diff --git a/src/components/note/meta/comment.tsx b/src/components/note/meta/comment.tsx
index 0b93302b..7ea74e15 100644
--- a/src/components/note/meta/comment.tsx
+++ b/src/components/note/meta/comment.tsx
@@ -33,7 +33,7 @@ export const NoteComment = memo(function NoteComment({
   const router = useRouter();
   const [pool, relays]: any = useContext(RelayContext);
 
-  const activeAccount = useAtomValue(activeAccountAtom);
+  const activeAccount: any = useAtomValue(activeAccountAtom);
 
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState('');
diff --git a/src/components/note/meta/reaction.tsx b/src/components/note/meta/reaction.tsx
index 6078d064..018d196b 100644
--- a/src/components/note/meta/reaction.tsx
+++ b/src/components/note/meta/reaction.tsx
@@ -22,7 +22,7 @@ export const NoteReaction = memo(function NoteReaction({
 }) {
   const [pool, relays]: any = useContext(RelayContext);
 
-  const activeAccount = useAtomValue(activeAccountAtom);
+  const activeAccount: any = useAtomValue(activeAccountAtom);
 
   const [isReact, setIsReact] = useState(false);
   const [like, setLike] = useState(0);
diff --git a/src/components/user/base.tsx b/src/components/user/base.tsx
index b55649bf..d8feabba 100644
--- a/src/components/user/base.tsx
+++ b/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">
diff --git a/src/components/user/extend.tsx b/src/components/user/extend.tsx
index 2f92863a..8672de8c 100644
--- a/src/components/user/extend.tsx
+++ b/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">
diff --git a/src/components/user/follow.tsx b/src/components/user/follow.tsx
index 3eb92435..58b34778 100644
--- a/src/components/user/follow.tsx
+++ b/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">
diff --git a/src/components/user/large.tsx b/src/components/user/large.tsx
index 81c79855..c2f5b53d 100644
--- a/src/components/user/large.tsx
+++ b/src/components/user/large.tsx
@@ -1,5 +1,7 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
 
+import { DEFAULT_AVATAR } from '@stores/constants';
+
 import { createCacheProfile, getCacheProfile } from '@utils/storage';
 import { truncate } from '@utils/truncate';
 
@@ -42,22 +44,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">
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index de7bbdc7..7b816aa6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,26 +1,33 @@
 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) {
+        if (res) {
+          // update local storage
+          setActiveAccount(res);
+          // redirect
           router.replace('/init');
         } else {
           router.replace('/onboarding');
         }
       })
       .catch(console.error);
-  }, [router]);
+  }, [router, setActiveAccount]);
 
   return (
     <div className="relative h-full overflow-hidden">
diff --git a/src/pages/init.tsx b/src/pages/init.tsx
index d3b09d2b..19ff5fc8 100644
--- a/src/pages/init.tsx
+++ b/src/pages/init.tsx
@@ -29,7 +29,7 @@ export default function Page() {
   const router = useRouter();
   const [pool, relays]: any = useContext(RelayContext);
 
-  const activeAccount = useAtomValue(activeAccountAtom);
+  const activeAccount: any = useAtomValue(activeAccountAtom);
 
   const [done, setDone] = useState(false);
   const now = useRef(new Date());
diff --git a/src/stores/account.tsx b/src/stores/account.tsx
index eb884ac8..f5568ba4 100644
--- a/src/stores/account.tsx
+++ b/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());

From 8e66af972d018b8e544cdae6e52bdb2e32f5ee62 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Fri, 31 Mar 2023 18:38:20 +0700
Subject: [PATCH 6/6] updated note component

---
 src/components/appHeader/actions.tsx          |  4 ++--
 src/components/appHeader/index.tsx            |  1 -
 src/components/columns/account/list.tsx       |  4 ++--
 .../navigator/{chats/index.tsx => chats.tsx}  |  0
 .../{newsfeed/index.tsx => newsfeed.tsx}      |  2 +-
 src/components/note/base.tsx                  |  9 ++++++---
 src/components/note/comment.tsx               | 14 +++++++++----
 src/components/note/extend.tsx                | 11 ++++++----
 src/components/note/parent.tsx                |  9 ++++++---
 src/components/profile/metadata.tsx           | 20 ++++++++-----------
 src/components/user/large.tsx                 |  1 -
 src/pages/init.tsx                            |  2 +-
 12 files changed, 43 insertions(+), 34 deletions(-)
 rename src/components/columns/navigator/{chats/index.tsx => chats.tsx} (100%)
 rename src/components/columns/navigator/{newsfeed/index.tsx => newsfeed.tsx} (98%)

diff --git a/src/components/appHeader/actions.tsx b/src/components/appHeader/actions.tsx
index 27dd6628..e370dfa9 100644
--- a/src/components/appHeader/actions.tsx
+++ b/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);
diff --git a/src/components/appHeader/index.tsx b/src/components/appHeader/index.tsx
index 9a0c8134..b4e3df47 100644
--- a/src/components/appHeader/index.tsx
+++ b/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'), {
diff --git a/src/components/columns/account/list.tsx b/src/components/columns/account/list.tsx
index a5a8457d..a92141bc 100644
--- a/src/components/columns/account/list.tsx
+++ b/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(
diff --git a/src/components/columns/navigator/chats/index.tsx b/src/components/columns/navigator/chats.tsx
similarity index 100%
rename from src/components/columns/navigator/chats/index.tsx
rename to src/components/columns/navigator/chats.tsx
diff --git a/src/components/columns/navigator/newsfeed/index.tsx b/src/components/columns/navigator/newsfeed.tsx
similarity index 98%
rename from src/components/columns/navigator/newsfeed/index.tsx
rename to src/components/columns/navigator/newsfeed.tsx
index 9bbcc2cd..9a1318c7 100644
--- a/src/components/columns/navigator/newsfeed/index.tsx
+++ b/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' : ''
diff --git a/src/components/note/base.tsx b/src/components/note/base.tsx
index c97977a0..f0c9e2c7 100644
--- a/src/components/note/base.tsx
+++ b/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 (
diff --git a/src/components/note/comment.tsx b/src/components/note/comment.tsx
index 132945db..9868cb03 100644
--- a/src/components/note/comment.tsx
+++ b/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]">
diff --git a/src/components/note/extend.tsx b/src/components/note/extend.tsx
index a1f58d42..1c9679cc 100644
--- a/src/components/note/extend.tsx
+++ b/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}
diff --git a/src/components/note/parent.tsx b/src/components/note/parent.tsx
index 6f445ae9..e48e9694 100644
--- a/src/components/note/parent.tsx
+++ b/src/components/note/parent.tsx
@@ -10,7 +10,6 @@ import { createCacheNote, getNoteByID } from '@utils/storage';
 
 import destr from 'destr';
 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 }) {
@@ -64,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 (
diff --git a/src/components/profile/metadata.tsx b/src/components/profile/metadata.tsx
index e3d9bc7a..75bad040 100644
--- a/src/components/profile/metadata.tsx
+++ b/src/components/profile/metadata.tsx
@@ -1,9 +1,10 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
 import { RelayContext } from '@components/relaysProvider';
 
+import { DEFAULT_AVATAR } from '@stores/constants';
+
 import { truncate } from '@utils/truncate';
 
-import Avatar from 'boring-avatars';
 import destr from 'destr';
 import Image from 'next/image';
 import { Author } from 'nostr-relaypool';
@@ -33,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>
diff --git a/src/components/user/large.tsx b/src/components/user/large.tsx
index c2f5b53d..634ab02e 100644
--- a/src/components/user/large.tsx
+++ b/src/components/user/large.tsx
@@ -7,7 +7,6 @@ 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';
diff --git a/src/pages/init.tsx b/src/pages/init.tsx
index 19ff5fc8..562318e4 100644
--- a/src/pages/init.tsx
+++ b/src/pages/init.tsx
@@ -30,8 +30,8 @@ export default function Page() {
   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);