add initial data page

src/app/channel/pages/index.page.tsx

@@ -3,7 +3,6 @@ import { ChannelBlackList } from '@lume/shared/channels/channelBlackList';
 import { ChannelProfile } from '@lume/shared/channels/channelProfile';
 import { UpdateChannelModal } from '@lume/shared/channels/updateChannelModal';
 import { FormChannel } from '@lume/shared/form/channel';
-import NewsfeedLayout from '@lume/shared/layouts/newsfeed';
 import { RelayContext } from '@lume/shared/relaysProvider';
 import { channelMessagesAtom, channelReplyAtom } from '@lume/stores/channel';
 import { FULL_RELAYS } from '@lume/stores/constants';
@@ -80,26 +79,24 @@ export function Page() {
   });
 
   return (
-    <NewsfeedLayout>
-      <div className="flex h-full flex-col justify-between gap-2">
-        <div className="flex h-11 w-full shrink-0 items-center justify-between">
-          <div>
-            <ChannelProfile id={id} pubkey={channelPubkey} />
-          </div>
-          <div className="flex items-center gap-2">
-            <ChannelBlackList blacklist={mutedList} />
-            {activeAccount.pubkey === channelPubkey && <UpdateChannelModal id={id} />}
-          </div>
+    <div className="flex h-full flex-col justify-between gap-2">
+      <div className="flex h-11 w-full shrink-0 items-center justify-between">
+        <div>
+          <ChannelProfile id={id} pubkey={channelPubkey} />
         </div>
-        <div className="relative flex w-full flex-1 flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
-          <Suspense fallback={<p>Loading...</p>}>
-            <ChannelMessages />
-          </Suspense>
-          <div className="shrink-0 p-3">
-            <FormChannel eventId={id} />
-          </div>
+        <div className="flex items-center gap-2">
+          <ChannelBlackList blacklist={mutedList} />
+          {activeAccount.pubkey === channelPubkey && <UpdateChannelModal id={id} />}
         </div>
       </div>
-    </NewsfeedLayout>
+      <div className="relative flex w-full flex-1 flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
+        <Suspense fallback={<p>Loading...</p>}>
+          <ChannelMessages />
+        </Suspense>
+        <div className="shrink-0 p-3">
+          <FormChannel eventId={id} />
+        </div>
+      </div>
+    </div>
   );
 }

src/app/chat/pages/index.page.tsx

@@ -1,7 +1,6 @@
 import { AccountContext } from '@lume/shared/accountProvider';
 import { MessageListItem } from '@lume/shared/chats/messageListItem';
 import FormChat from '@lume/shared/form/chat';
-import NewsfeedLayout from '@lume/shared/layouts/newsfeed';
 import { RelayContext } from '@lume/shared/relaysProvider';
 import { FULL_RELAYS } from '@lume/stores/constants';
 import { usePageContext } from '@lume/utils/hooks/usePageContext';
@@ -46,41 +45,39 @@ export function Page() {
   );
 
   return (
-    <NewsfeedLayout>
-      <div className="relative flex h-full w-full flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
-        <div className="scrollbar-hide flex h-full w-full flex-col-reverse overflow-y-auto">
-          {error && <div>failed to load</div>}
-          {!data ? (
-            <div className="flex h-min min-h-min w-full animate-pulse select-text flex-col px-5 py-2 hover:bg-black/20">
-              <div className="flex flex-col">
-                <div className="group flex items-start gap-3">
-                  <div className="bg-zinc relative h-9 w-9 shrink rounded-md bg-zinc-700"></div>
-                  <div className="flex w-full flex-1 items-start justify-between">
-                    <div className="flex items-baseline gap-2 text-sm">
-                      <span className="h-2 w-16 bg-zinc-700"></span>
-                    </div>
+    <div className="relative flex h-full w-full flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
+      <div className="scrollbar-hide flex h-full w-full flex-col-reverse overflow-y-auto">
+        {error && <div>failed to load</div>}
+        {!data ? (
+          <div className="flex h-min min-h-min w-full animate-pulse select-text flex-col px-5 py-2 hover:bg-black/20">
+            <div className="flex flex-col">
+              <div className="group flex items-start gap-3">
+                <div className="bg-zinc relative h-9 w-9 shrink rounded-md bg-zinc-700"></div>
+                <div className="flex w-full flex-1 items-start justify-between">
+                  <div className="flex items-baseline gap-2 text-sm">
+                    <span className="h-2 w-16 bg-zinc-700"></span>
                   </div>
                 </div>
-                <div className="-mt-[17px] pl-[48px]">
-                  <div className="h-3 w-full bg-zinc-700"></div>
-                </div>
+              </div>
+              <div className="-mt-[17px] pl-[48px]">
+                <div className="h-3 w-full bg-zinc-700"></div>
               </div>
             </div>
-          ) : (
-            sortMessages(data).map((message) => (
-              <MessageListItem
-                key={message.id}
-                data={message}
-                userPubkey={activeAccount.pubkey}
-                userPrivkey={activeAccount.privkey}
-              />
-            ))
-          )}
-        </div>
-        <div className="shrink-0 p-3">
-          <FormChat receiverPubkey={pubkey} />
-        </div>
+          </div>
+        ) : (
+          sortMessages(data).map((message) => (
+            <MessageListItem
+              key={message.id}
+              data={message}
+              userPubkey={activeAccount.pubkey}
+              userPrivkey={activeAccount.privkey}
+            />
+          ))
+        )}
       </div>
-    </NewsfeedLayout>
+      <div className="shrink-0 p-3">
+        <FormChat receiverPubkey={pubkey} />
+      </div>
+    </div>
   );
 }

src/app/index/pages/index.page.tsx

@@ -1,153 +1,25 @@
 import LumeIcon from '@lume/shared/icons/lume';
-import { RelayContext } from '@lume/shared/relaysProvider';
-import { READONLY_RELAYS } from '@lume/stores/constants';
-import { dateToUnix, hoursAgo } from '@lume/utils/getDate';
-import {
-  addToBlacklist,
-  countTotalNotes,
-  createChat,
-  createNote,
-  getActiveAccount,
-  getLastLogin,
-  updateLastLogin,
-} from '@lume/utils/storage';
-import { getParentID } from '@lume/utils/transform';
+import { getActiveAccount } from '@lume/utils/storage';
 
-import { useContext, useEffect, useRef } from 'react';
+import useSWR from 'swr';
 import { navigate } from 'vite-plugin-ssr/client/router';
 
+const fetcher = () => getActiveAccount();
+
 export function Page() {
-  const pool: any = useContext(RelayContext);
-  const now = useRef(new Date());
+  const { data, isLoading } = useSWR('account', fetcher, {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+  });
 
-  useEffect(() => {
-    let unsubscribe: () => void;
-    let timeout: any;
+  if (!isLoading && !data) {
+    navigate('/auth', { overwriteLastHistoryEntry: true });
+  }
 
-    const fetchInitalData = async (account: { pubkey: string; id: number }, tags: string) => {
-      const lastLogin = await getLastLogin();
-      const notes = await countTotalNotes();
-
-      const follows = JSON.parse(tags);
-      const query = [];
-
-      let since: number;
-
-      if (notes.total === 0) {
-        since = dateToUnix(hoursAgo(24, now.current));
-      } else {
-        if (parseInt(lastLogin) > 0) {
-          since = parseInt(lastLogin);
-        } else {
-          since = dateToUnix(hoursAgo(24, now.current));
-        }
-      }
-
-      // kind 1 (notes) query
-      query.push({
-        kinds: [1, 6],
-        authors: follows,
-        since: since,
-        until: dateToUnix(now.current),
-      });
-
-      // kind 4 (chats) query
-      query.push({
-        kinds: [4],
-        '#p': [account.pubkey],
-        since: 0,
-        until: dateToUnix(now.current),
-      });
-
-      // kind 43, 43 (mute user, hide message) query
-      query.push({
-        authors: [account.pubkey],
-        kinds: [43, 44],
-        since: 0,
-        until: dateToUnix(now.current),
-      });
-
-      // subscribe relays
-      unsubscribe = pool.subscribe(
-        query,
-        READONLY_RELAYS,
-        (event: { kind: number; tags: string[]; id: string; pubkey: string; content: string; created_at: number }) => {
-          switch (event.kind) {
-            // short text note
-            case 1:
-              const parentID = getParentID(event.tags, event.id);
-              // insert event to local database
-              createNote(
-                event.id,
-                account.id,
-                event.pubkey,
-                event.kind,
-                event.tags,
-                event.content,
-                event.created_at,
-                parentID
-              );
-              break;
-            // chat
-            case 4:
-              if (event.pubkey !== account.pubkey) {
-                createChat(account.id, event.pubkey, event.created_at);
-              }
-              break;
-            // repost
-            case 6:
-              createNote(
-                event.id,
-                account.id,
-                event.pubkey,
-                event.kind,
-                event.tags,
-                event.content,
-                event.created_at,
-                event.id
-              );
-              break;
-            // hide message (channel only)
-            case 43:
-              if (event.tags[0][0] === 'e') {
-                addToBlacklist(account.id, event.tags[0][1], 43, 1);
-              }
-            // mute user (channel only)
-            case 44:
-              if (event.tags[0][0] === 'p') {
-                addToBlacklist(account.id, event.tags[0][1], 44, 1);
-              }
-            default:
-              break;
-          }
-        },
-        undefined,
-        () => {
-          updateLastLogin(dateToUnix(now.current));
-          timeout = setTimeout(() => {
-            navigate('/app/newsfeed/following', { overwriteLastHistoryEntry: true });
-          }, 5000);
-        }
-      );
-    };
-
-    getActiveAccount()
-      .then((res: any) => {
-        if (res) {
-          fetchInitalData(res, res.follows);
-        } else {
-          navigate('/auth', { overwriteLastHistoryEntry: true });
-        }
-      })
-      .catch(console.error);
-
-    return () => {
-      if (unsubscribe) {
-        unsubscribe();
-      }
-      clearTimeout(timeout);
-    };
-  }, [pool]);
+  if (!isLoading && data) {
+    navigate('/app/inital-data', { overwriteLastHistoryEntry: true });
+  }
 
   return (
     <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">

src/app/inital-data/pages/index.page.tsx

@@ -0,0 +1,182 @@
+import LumeIcon from '@lume/shared/icons/lume';
+import { FULL_RELAYS } from '@lume/stores/constants';
+import { dateToUnix, hoursAgo } from '@lume/utils/getDate';
+import {
+  addToBlacklist,
+  countTotalNotes,
+  createChat,
+  createNote,
+  getActiveAccount,
+  getLastLogin,
+  updateLastLogin,
+} from '@lume/utils/storage';
+import { getParentID, nip02ToArray } from '@lume/utils/transform';
+
+import { RelayPool } from 'nostr-relaypool';
+import { useEffect, useRef } from 'react';
+import { navigate } from 'vite-plugin-ssr/client/router';
+
+export function Page() {
+  const now = useRef(new Date());
+
+  useEffect(() => {
+    let unsubscribe: () => void;
+    let timeout: any;
+
+    const fetchInitalData = async () => {
+      const account = await getActiveAccount();
+      const lastLogin = await getLastLogin();
+      const notes = await countTotalNotes();
+
+      const pool = new RelayPool(FULL_RELAYS);
+      const follows = nip02ToArray(JSON.parse(account.follows));
+      const query = [];
+
+      let since: number;
+
+      if (notes === 0) {
+        since = dateToUnix(hoursAgo(24, now.current));
+      } else {
+        if (parseInt(lastLogin) > 0) {
+          since = parseInt(lastLogin);
+        } else {
+          since = dateToUnix(hoursAgo(24, now.current));
+        }
+      }
+
+      // kind 1 (notes) query
+      query.push({
+        kinds: [1, 6],
+        authors: follows,
+        since: since,
+        until: dateToUnix(now.current),
+      });
+
+      // kind 4 (chats) query
+      query.push({
+        kinds: [4],
+        '#p': [account.pubkey],
+        since: 0,
+        until: dateToUnix(now.current),
+      });
+
+      // kind 43, 43 (mute user, hide message) query
+      query.push({
+        authors: [account.pubkey],
+        kinds: [43, 44],
+        since: 0,
+        until: dateToUnix(now.current),
+      });
+
+      // subscribe relays
+      unsubscribe = pool.subscribe(
+        query,
+        FULL_RELAYS,
+        (event: any) => {
+          switch (event.kind) {
+            // short text note
+            case 1:
+              const parentID = getParentID(event.tags, event.id);
+              // insert event to local database
+              createNote(
+                event.id,
+                account.id,
+                event.pubkey,
+                event.kind,
+                event.tags,
+                event.content,
+                event.created_at,
+                parentID
+              );
+              break;
+            // chat
+            case 4:
+              if (event.pubkey !== account.pubkey) {
+                createChat(account.id, event.pubkey, event.created_at);
+              }
+              break;
+            // repost
+            case 6:
+              createNote(
+                event.id,
+                account.id,
+                event.pubkey,
+                event.kind,
+                event.tags,
+                event.content,
+                event.created_at,
+                event.id
+              );
+              break;
+            // hide message (channel only)
+            case 43:
+              if (event.tags[0][0] === 'e') {
+                addToBlacklist(account.id, event.tags[0][1], 43, 1);
+              }
+            // mute user (channel only)
+            case 44:
+              if (event.tags[0][0] === 'p') {
+                addToBlacklist(account.id, event.tags[0][1], 44, 1);
+              }
+            default:
+              break;
+          }
+        },
+        undefined,
+        () => {
+          updateLastLogin(dateToUnix(now.current));
+          timeout = setTimeout(() => {
+            navigate('/app/newsfeed/following', { overwriteLastHistoryEntry: true });
+          }, 5000);
+        }
+      );
+    };
+
+    fetchInitalData().catch(console.error);
+
+    return () => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  return (
+    <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
+      <div className="relative h-full overflow-hidden">
+        {/* dragging area */}
+        <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">
+            <LumeIcon 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&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!
+              </p>
+            </div>
+          </div>
+          <div className="absolute bottom-16 left-1/2 -translate-x-1/2 transform">
+            <svg
+              className="h-5 w-5 animate-spin text-black dark:text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/shared/chats/chatList.tsx

@@ -1,19 +1,9 @@
 import { AccountContext } from '@lume/shared/accountProvider';
-import { ChatListItem } from '@lume/shared/chats/chatListItem';
 import { ChatModal } from '@lume/shared/chats/chatModal';
 import { DEFAULT_AVATAR } from '@lume/stores/constants';
 
 import { useContext } from 'react';
 
-let list: any = [];
-
-if (typeof window !== 'undefined') {
-  const { getChats, getActiveAccount } = await import('@lume/utils/storage');
-  const activeAccount = await getActiveAccount();
-
-  list = await getChats(activeAccount.id);
-}
-
 export default function ChatList() {
   const activeAccount: any = useContext(AccountContext);
   const profile = typeof window !== 'undefined' ? JSON.parse(activeAccount.metadata) : null;
@@ -37,9 +27,6 @@ export default function ChatList() {
           </h5>
         </div>
       </a>
-      {list.map((item: { id: string; pubkey: string }) => (
-        <ChatListItem key={item.id} pubkey={item.pubkey} />
-      ))}
       <ChatModal />
     </div>
   );

src/shared/navigation.tsx

@@ -1,6 +1,5 @@
 import ActiveLink from '@lume/shared/activeLink';
 import ChannelList from '@lume/shared/channels/channelList';
-import ChatList from '@lume/shared/chats/chatList';
 
 import { Disclosure } from '@headlessui/react';
 import { Bonfire, NavArrowUp, PeopleTag } from 'iconoir-react';
@@ -80,9 +79,7 @@ export default function Navigation() {
               </div>
               <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Chats</h3>
             </Disclosure.Button>
-            <Disclosure.Panel>
-              <ChatList />
-            </Disclosure.Panel>
+            <Disclosure.Panel></Disclosure.Panel>
           </div>
         )}
       </Disclosure>

src/utils/storage.tsx

@@ -77,7 +77,7 @@ export async function countTotalChannels() {
 export async function countTotalNotes() {
   const db = await connect();
   const result = await db.select('SELECT COUNT(*) AS "total" FROM notes;');
-  return result[0];
+  return result[0].total;
 }
 
 // get all notes