wip: restructure

.prettierrc

@@ -8,17 +8,7 @@
   "endOfLine": "lf",
   "bracketSpacing": true,
   "bracketSameLine": false,
-  "importOrder": [
-    "^@app/(.*)$",
-    "^@pages/(.*)$",
-    "^@components/(.*)$",
-    "^@stores/(.*)$",
-    "^@utils/(.*)$",
-    "^@assets/(.*)$",
-    "^@renderer/(.*)$",
-    "<THIRD_PARTY_MODULES>",
-    "^[./]"
-  ],
+  "importOrder": ["^@lume/(.*)$", "<THIRD_PARTY_MODULES>", "^[./]"],
   "importOrderSeparation": true,
   "importOrderSortSpecifiers": true,
   "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],

src/channel/_default.page.tsx

@@ -0,0 +1 @@
+export { LayoutChannel as Layout } from './layout';

src/channel/layout.tsx

@@ -0,0 +1,29 @@
+import AppHeader from '@lume/shared/appHeader';
+import MultiAccounts from '@lume/shared/multiAccounts';
+import Navigation from '@lume/shared/navigation';
+
+export function LayoutChannel({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
+      <div className="flex h-screen w-full flex-col">
+        <div
+          data-tauri-drag-region
+          className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
+        >
+          <AppHeader collector={true} />
+        </div>
+        <div className="relative flex min-h-0 w-full flex-1">
+          <div className="relative w-[68px] shrink-0 border-r border-zinc-900">
+            <MultiAccounts />
+          </div>
+          <div className="grid w-full grid-cols-4 xl:grid-cols-5">
+            <div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
+              <Navigation />
+            </div>
+            <div className="col-span-3 m-3 overflow-hidden xl:col-span-4">{children}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/channel/pages/index.page.tsx

@@ -1,31 +1,29 @@
-import { AccountContext } from '@components/accountProvider';
-import { ChannelBlackList } from '@components/channels/channelBlackList';
-import { ChannelProfile } from '@components/channels/channelProfile';
-import { UpdateChannelModal } from '@components/channels/updateChannelModal';
-import { FormChannel } from '@components/form/channel';
-import NewsfeedLayout from '@components/layouts/newsfeed';
-import { RelayContext } from '@components/relaysProvider';
-
-import { channelMessagesAtom, channelReplyAtom } from '@stores/channel';
-import { FULL_RELAYS } from '@stores/constants';
-
-import { dateToUnix, hoursAgo } from '@utils/getDate';
-import { usePageContext } from '@utils/hooks/usePageContext';
-import { arrayObjToPureArr } from '@utils/transform';
+import { AccountContext } from '@lume/shared/accountProvider';
+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';
+import { dateToUnix, hoursAgo } from '@lume/utils/getDate';
+import { usePageContext } from '@lume/utils/hooks/usePageContext';
+import { arrayObjToPureArr } from '@lume/utils/transform';
 
 import { useSetAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
 import { Suspense, lazy, useContext, useRef } from 'react';
 import useSWRSubscription from 'swr/subscription';
 
-const ChannelMessages = lazy(() => import('@components/channels/messages'));
+const ChannelMessages = lazy(() => import('@lume/shared/channels/messages'));
 
 let mutedList: any = [];
 let activeMutedList: any = [];
 let activeHidedList: any = [];
 
 if (typeof window !== 'undefined') {
-  const { getBlacklist, getActiveBlacklist, getActiveAccount } = await import('@utils/storage');
+  const { getBlacklist, getActiveBlacklist, getActiveAccount } = await import('@lume/utils/storage');
   const activeAccount = await getActiveAccount();
   activeHidedList = await getActiveBlacklist(activeAccount.id, 43);
   activeMutedList = await getActiveBlacklist(activeAccount.id, 44);

src/chat/_default.page.tsx

@@ -0,0 +1 @@
+export { LayoutChat as Layout } from './layout';

src/chat/layout.tsx

@@ -0,0 +1,29 @@
+import AppHeader from '@lume/shared/appHeader';
+import MultiAccounts from '@lume/shared/multiAccounts';
+import Navigation from '@lume/shared/navigation';
+
+export function LayoutChat({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
+      <div className="flex h-screen w-full flex-col">
+        <div
+          data-tauri-drag-region
+          className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
+        >
+          <AppHeader collector={true} />
+        </div>
+        <div className="relative flex min-h-0 w-full flex-1">
+          <div className="relative w-[68px] shrink-0 border-r border-zinc-900">
+            <MultiAccounts />
+          </div>
+          <div className="grid w-full grid-cols-4 xl:grid-cols-5">
+            <div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
+              <Navigation />
+            </div>
+            <div className="col-span-3 m-3 overflow-hidden xl:col-span-4">{children}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/chat/pages/index.page.tsx

@@ -1,13 +1,11 @@
-import { AccountContext } from '@components/accountProvider';
-import { MessageListItem } from '@components/chats/messageListItem';
-import FormChat from '@components/form/chat';
-import NewsfeedLayout from '@components/layouts/newsfeed';
-import { RelayContext } from '@components/relaysProvider';
-
-import { FULL_RELAYS } from '@stores/constants';
-
-import { usePageContext } from '@utils/hooks/usePageContext';
-import { sortMessages } from '@utils/transform';
+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';
+import { sortMessages } from '@lume/utils/transform';
 
 import { useContext } from 'react';
 import useSWRSubscription from 'swr/subscription';

src/newsfeed/_default.page.tsx

@@ -0,0 +1 @@
+export { LayoutNewsfeed as Layout } from './layout';

src/newsfeed/layout.tsx

@@ -0,0 +1,29 @@
+import AppHeader from '@lume/shared/appHeader';
+import MultiAccounts from '@lume/shared/multiAccounts';
+import Navigation from '@lume/shared/navigation';
+
+export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
+      <div className="flex h-screen w-full flex-col">
+        <div
+          data-tauri-drag-region
+          className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
+        >
+          <AppHeader collector={true} />
+        </div>
+        <div className="relative flex min-h-0 w-full flex-1">
+          <div className="relative w-[68px] shrink-0 border-r border-zinc-900">
+            <MultiAccounts />
+          </div>
+          <div className="grid w-full grid-cols-4 xl:grid-cols-5">
+            <div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
+              <Navigation />
+            </div>
+            <div className="col-span-3 m-3 overflow-hidden xl:col-span-4">{children}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/newsfeed/pages/circle/index.page.tsx

@@ -0,0 +1,9 @@
+export function Page() {
+  return (
+    <div className="relative h-full w-full rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
+      <div className="flex h-full w-full items-center justify-center">
+        <p className="text-sm text-zinc-400">Sorry, this feature under development, it will come in the next version</p>
+      </div>
+    </div>
+  );
+}

src/newsfeed/pages/following/index.page.tsx

@@ -0,0 +1,114 @@
+import FormBase from '@lume/shared/form/base';
+import { NoteBase } from '@lume/shared/note/base';
+import { Placeholder } from '@lume/shared/note/placeholder';
+import { NoteQuoteRepost } from '@lume/shared/note/quoteRepost';
+import { hasNewerNoteAtom } from '@lume/stores/note';
+import { countTotalNotes, getNotes } from '@lume/utils/storage';
+
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { ArrowUp } from 'iconoir-react';
+import { useAtom } from 'jotai';
+import { useEffect, useRef } from 'react';
+
+const ITEM_PER_PAGE = 20;
+const TIME = Math.floor(Date.now() / 1000);
+
+let totalNotes = 0;
+
+if (typeof window !== 'undefined') {
+  const result = await countTotalNotes();
+  totalNotes = result.total;
+}
+
+export function Page() {
+  const [hasNewerNote] = useAtom(hasNewerNoteAtom);
+
+  const { status, error, data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage }: any = useInfiniteQuery({
+    queryKey: ['following'],
+    queryFn: async ({ pageParam = 0 }) => {
+      return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
+    },
+    getNextPageParam: (lastPage) => (lastPage.nextCursor <= totalNotes ? lastPage.nextCursor : 'undefined'),
+  });
+
+  const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
+  const parentRef = useRef();
+
+  const rowVirtualizer = useVirtualizer({
+    count: hasNextPage ? allRows.length + 1 : allRows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 400,
+    overscan: 5,
+  });
+
+  const itemsVirtualizer = rowVirtualizer.getVirtualItems();
+
+  useEffect(() => {
+    const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
+
+    if (!lastItem) {
+      return;
+    }
+
+    if (lastItem.index >= allRows.length - 1 && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
+
+  return (
+    <div className="relative h-full w-full rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
+      {hasNewerNote && (
+        <div className="absolute left-1/2 top-2 z-50 -translate-x-1/2 transform">
+          <button 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">
+            <ArrowUp width={14} height={14} />
+            Load latest
+          </button>
+        </div>
+      )}
+      {status === 'loading' ? (
+        <Placeholder />
+      ) : status === 'error' ? (
+        <div>{error.message}</div>
+      ) : (
+        <div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
+          <FormBase />
+          <div
+            className="relative w-full"
+            style={{
+              height: `${rowVirtualizer.getTotalSize()}px`,
+            }}
+          >
+            <div
+              className="absolute left-0 top-0 w-full"
+              style={{
+                transform: `translateY(${itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin}px)`,
+              }}
+            >
+              {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                const note = allRows[virtualRow.index];
+                if (note) {
+                  if (note.kind === 1) {
+                    return (
+                      <div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
+                        <NoteBase key={note.event_id} event={note} />
+                      </div>
+                    );
+                  } else {
+                    return (
+                      <div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
+                        <NoteQuoteRepost key={note.event_id} event={note} />
+                      </div>
+                    );
+                  }
+                }
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+      <div>{isFetching && !isFetchingNextPage ? 'Background Updating...' : null}</div>
+    </div>
+  );
+}

src/onboarding/_default.page.tsx

@@ -0,0 +1 @@
+export { LayoutOnboarding as Layout } from './layout';

src/onboarding/layout.tsx

@@ -0,0 +1,47 @@
+import { ArrowLeft, ArrowRight } from 'iconoir-react';
+
+let platformName = 'darwin';
+
+if (typeof window !== 'undefined') {
+  const { platform } = await import('@tauri-apps/api/os');
+  platformName = await platform();
+}
+
+export function LayoutOnboarding({ children }: { children: React.ReactNode }) {
+  const goBack = () => {
+    window.history.back();
+  };
+
+  const goForward = () => {
+    window.history.forward();
+  };
+
+  return (
+    <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-white">
+      <div className="flex h-screen w-full flex-col">
+        <div
+          data-tauri-drag-region
+          className="relative h-11 shrink-0 border border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
+        >
+          <div data-tauri-drag-region className="flex h-full w-full flex-1 items-center px-2">
+            <div className={`flex h-full items-center gap-2 ${platformName === 'darwin' ? 'pl-[68px]' : ''}`}>
+              <button
+                onClick={() => goBack()}
+                className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
+              >
+                <ArrowLeft width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
+              </button>
+              <button
+                onClick={() => goForward()}
+                className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
+              >
+                <ArrowRight width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className="relative flex min-h-0 w-full flex-1">{children}</div>
+      </div>
+    </div>
+  );
+}

src/onboarding/pages/create/index.page.tsx

@@ -0,0 +1,160 @@
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { WRITEONLY_RELAYS } from '@lume/stores/constants';
+import { createAccount } from '@lume/utils/storage';
+
+import { EyeClose, EyeEmpty } from 'iconoir-react';
+import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools';
+import { useCallback, useContext, useMemo, useState } from 'react';
+import { navigate } from 'vite-plugin-ssr/client/router';
+
+export function Page() {
+  const pool: any = useContext(RelayContext);
+
+  const [type, setType] = useState('password');
+  const [loading, setLoading] = useState(false);
+
+  const privkey = useMemo(() => generatePrivateKey(), []);
+  const name = 'Pleb';
+
+  const pubkey = getPublicKey(privkey);
+  const npub = nip19.npubEncode(pubkey);
+  const nsec = nip19.nsecEncode(privkey);
+
+  // auto-generated profile metadata
+  const metadata: any = useMemo(
+    () => ({
+      display_name: name,
+      name: name,
+      username: name.toLowerCase(),
+      picture: 'https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp',
+    }),
+    [name]
+  );
+
+  // toggle privatek key
+  const showPrivateKey = () => {
+    if (type === 'password') {
+      setType('text');
+    } else {
+      setType('password');
+    }
+  };
+
+  // create account and broadcast to all relays
+  const submit = useCallback(async () => {
+    setLoading(true);
+
+    // build event
+    const event: any = {
+      content: JSON.stringify(metadata),
+      created_at: Math.floor(Date.now() / 1000),
+      kind: 0,
+      pubkey: pubkey,
+      tags: [],
+    };
+    event.id = getEventHash(event);
+    event.sig = signEvent(event, privkey);
+    // insert to database
+    createAccount(pubkey, privkey, metadata);
+    // broadcast
+    pool.publish(event, WRITEONLY_RELAYS);
+    // redirect to next step
+    navigate(`/onboarding/create/step-2?pubkey=${pubkey}&privkey=${privkey}`, { overwriteLastHistoryEntry: true });
+  }, [pool, pubkey, privkey, metadata]);
+
+  return (
+    <div className="grid h-full w-full grid-rows-5">
+      <div className="row-span-1 mx-auto flex w-full max-w-md items-center justify-center">
+        <h1 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium text-transparent">
+          Create new account
+        </h1>
+      </div>
+      <div className="row-span-4">
+        <div className="mx-auto w-full max-w-md">
+          <div className="mb-8 flex flex-col gap-4">
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-semibold text-zinc-400">Public Key</label>
+              <div className="relative shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
+                <input
+                  readOnly
+                  value={npub}
+                  className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-600"
+                />
+              </div>
+            </div>
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-semibold text-zinc-400">Private Key</label>
+              <div className="relative shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
+                <input
+                  readOnly
+                  type={type}
+                  value={nsec}
+                  className="relative w-full rounded-lg border border-black/5 py-2.5 pl-3.5 pr-11 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-600"
+                />
+                <button
+                  onClick={() => showPrivateKey()}
+                  className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
+                >
+                  {type === 'password' ? (
+                    <EyeClose width={20} height={20} className="text-zinc-500 group-hover:text-zinc-200" />
+                  ) : (
+                    <EyeEmpty width={20} height={20} className="text-zinc-500 group-hover:text-zinc-200" />
+                  )}
+                </button>
+              </div>
+            </div>
+            <div className="flex flex-col gap-1">
+              <label className="text-sm font-semibold text-zinc-400">Default Profile (you can change it later)</label>
+              <div className="relative w-full shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
+                <div className="relative w-full rounded-lg border border-black/5 px-3.5 py-4 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200  dark:shadow-black/10 dark:placeholder:text-zinc-600">
+                  <div className="flex space-x-2">
+                    <div className="relative h-11 w-11 rounded-md">
+                      <img src={metadata.picture} alt="default avatar" className="h-11 w-11 rounded-md object-cover" />
+                    </div>
+                    <div className="flex-1 space-y-2 py-1">
+                      <div className="flex items-center gap-1">
+                        <p className="font-semibold">{metadata.display_name}</p>
+                        <p className="text-zinc-400">@{metadata.username}</p>
+                      </div>
+                      <div className="space-y-1">
+                        <div className="grid grid-cols-3 gap-4">
+                          <div className="col-span-2 h-2 rounded bg-zinc-700"></div>
+                          <div className="col-span-1 h-2 rounded bg-zinc-700"></div>
+                        </div>
+                        <div className="h-2 rounded bg-zinc-700"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="flex h-10 items-center justify-center">
+            {loading === true ? (
+              <svg
+                className="h-5 w-5 animate-spin 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>
+            ) : (
+              <button
+                onClick={() => submit()}
+                className="w-full transform rounded-lg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+              >
+                <span className="drop-shadow-lg">Continue →</span>
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,13 +1,10 @@
-import OnboardingLayout from '@components/layouts/onboarding';
-import { RelayContext } from '@components/relaysProvider';
-import { UserBase } from '@components/user/base';
-
-import { WRITEONLY_RELAYS } from '@stores/constants';
-
-import { usePageContext } from '@utils/hooks/usePageContext';
-import { fetchProfileMetadata } from '@utils/hooks/useProfile';
-import { createPleb, updateAccount } from '@utils/storage';
-import { arrayToNIP02 } from '@utils/transform';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { UserBase } from '@lume/shared/user/base';
+import { WRITEONLY_RELAYS } from '@lume/stores/constants';
+import { usePageContext } from '@lume/utils/hooks/usePageContext';
+import { fetchProfileMetadata } from '@lume/utils/hooks/useProfile';
+import { createPleb, updateAccount } from '@lume/utils/storage';
+import { arrayToNIP02 } from '@lume/utils/transform';
 
 import { createClient } from '@supabase/supabase-js';
 import { CheckCircle } from 'iconoir-react';
@@ -124,67 +121,65 @@ export function Page() {
   }, []);
 
   return (
-    <OnboardingLayout>
-      <div className="relative grid h-full w-full grid-rows-5">
-        <div className="row-span-1 flex items-center justify-center">
-          <div className="text-center">
-            <h1 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium leading-tight text-transparent">
-              Personalized your newsfeed
-            </h1>
-            <h3 className="text-lg text-zinc-500">
-              Follow at least{' '}
-              <span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
-                {follows.length}/10
-              </span>{' '}
-              plebs
-            </h3>
-          </div>
+    <div className="relative grid h-full w-full grid-rows-5">
+      <div className="row-span-1 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium leading-tight text-transparent">
+            Personalized your newsfeed
+          </h1>
+          <h3 className="text-lg text-zinc-500">
+            Follow at least{' '}
+            <span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
+              {follows.length}/10
+            </span>{' '}
+            plebs
+          </h3>
         </div>
-        <div className="row-span-4 h-full w-full overflow-y-auto">
-          <div className="grid grid-cols-4 gap-4 px-8 py-4">
-            {list.map((item: { pubkey: string }, index: Key) => (
-              <button
-                key={index}
-                onClick={() => toggleFollow(item.pubkey)}
-                className="flex transform items-center justify-between rounded-lg bg-zinc-900 p-2 ring-amber-100 hover:ring-1 active:translate-y-1"
-              >
-                <UserBase pubkey={item.pubkey} />
-                {follows.includes(item.pubkey) && (
-                  <div>
-                    <CheckCircle width={16} height={16} className="text-zinc-400" />
-                  </div>
-                )}
-              </button>
-            ))}
-          </div>
-        </div>
-        {follows.length >= 10 && (
-          <div className="fixed bottom-0 left-0 z-10 flex h-24 w-full items-center justify-center">
+      </div>
+      <div className="row-span-4 h-full w-full overflow-y-auto">
+        <div className="grid grid-cols-4 gap-4 px-8 py-4">
+          {list.map((item: { pubkey: string }, index: Key) => (
             <button
-              onClick={() => submit()}
-              className="relative z-20 inline-flex w-36 transform items-center justify-center rounded-full bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 shadow-xl active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+              key={index}
+              onClick={() => toggleFollow(item.pubkey)}
+              className="flex transform items-center justify-between rounded-lg bg-zinc-900 p-2 ring-amber-100 hover:ring-1 active:translate-y-1"
             >
-              {loading === true ? (
-                <svg
-                  className="h-5 w-5 animate-spin text-zinc-900"
-                  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>
-              ) : (
-                <span className="drop-shadow-lg">Done! Go to newsfeed</span>
+              <UserBase pubkey={item.pubkey} />
+              {follows.includes(item.pubkey) && (
+                <div>
+                  <CheckCircle width={16} height={16} className="text-zinc-400" />
+                </div>
               )}
             </button>
-          </div>
-        )}
+          ))}
+        </div>
       </div>
-    </OnboardingLayout>
+      {follows.length >= 10 && (
+        <div className="fixed bottom-0 left-0 z-10 flex h-24 w-full items-center justify-center">
+          <button
+            onClick={() => submit()}
+            className="relative z-20 inline-flex w-36 transform items-center justify-center rounded-full bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 shadow-xl active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+          >
+            {loading === true ? (
+              <svg
+                className="h-5 w-5 animate-spin text-zinc-900"
+                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>
+            ) : (
+              <span className="drop-shadow-lg">Done! Go to newsfeed</span>
+            )}
+          </button>
+        </div>
+      )}
+    </div>
   );
 }

src/onboarding/pages/import/index.page.tsx

@@ -0,0 +1,124 @@
+import { onboardingAtom } from '@lume/stores/onboarding';
+
+import { useSetAtom } from 'jotai';
+import { getPublicKey, nip19 } from 'nostr-tools';
+import { Resolver, useForm } from 'react-hook-form';
+import { navigate } from 'vite-plugin-ssr/client/router';
+
+type FormValues = {
+  key: string;
+};
+
+const resolver: Resolver<FormValues> = async (values) => {
+  return {
+    values: values.key ? values : {},
+    errors: !values.key
+      ? {
+          key: {
+            type: 'required',
+            message: 'This is required.',
+          },
+        }
+      : {},
+  };
+};
+
+export function Page() {
+  const setOnboardingPrivkey = useSetAtom(onboardingAtom);
+
+  const {
+    register,
+    setError,
+    handleSubmit,
+    formState: { errors, isDirty, isValid, isSubmitting },
+  } = useForm<FormValues>({ resolver });
+
+  const onSubmit = async (data: any) => {
+    try {
+      let privkey = data['key'];
+
+      if (privkey.substring(0, 4) === 'nsec') {
+        privkey = nip19.decode(privkey).data;
+      }
+
+      if (typeof getPublicKey(privkey) === 'string') {
+        setOnboardingPrivkey((prev) => ({ ...prev, privkey: privkey }));
+        navigate(`/onboarding/import/step-2`);
+      }
+    } catch (error) {
+      setError('key', {
+        type: 'custom',
+        message: 'Private Key is invalid, please check again',
+      });
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="mx-auto w-full max-w-md">
+        <div className="mb-8 text-center">
+          <h1 className="text-2xl font-semibold text-zinc-200">Import your key</h1>
+        </div>
+        <div className="flex flex-col gap-4">
+          <div>
+            {/* #TODO: add function */}
+            <button className="inline-flex w-full transform items-center justify-center gap-1.5 rounded-lg bg-zinc-900 px-3.5 py-2.5 font-medium text-zinc-400 active:translate-y-1">
+              <div className="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-0.5 text-xs font-medium ring-1 ring-inset ring-zinc-400/20">
+                <span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
+                  Coming soon
+                </span>
+              </div>
+              <span>Continue with Nostr Connect</span>
+            </button>
+          </div>
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-zinc-800"></div>
+            </div>
+            <div className="relative flex justify-center">
+              <span className="bg-zinc-950 px-2 text-sm text-zinc-500">or</span>
+            </div>
+          </div>
+          <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-3">
+            <div className="flex flex-col gap-0.5">
+              <div className="relative shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
+                <input
+                  {...register('key', { required: true, minLength: 32 })}
+                  type={'password'}
+                  placeholder="Paste private key here..."
+                  className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 text-center shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+                />
+              </div>
+              <span className="text-xs text-red-400">{errors.key && <p>{errors.key.message}</p>}</span>
+            </div>
+            <div className="flex h-9 items-center justify-center">
+              {isSubmitting ? (
+                <svg
+                  className="h-5 w-5 animate-spin 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>
+              ) : (
+                <button
+                  type="submit"
+                  disabled={!isDirty || !isValid}
+                  className="w-full transform rounded-lg bg-fuchsia-500 px-3.5 py-2.5 font-medium text-white shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
+                >
+                  <span className="drop-shadow-lg">Continue →</span>
+                </button>
+              )}
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

src/onboarding/pages/import/step-2/index.page.tsx

@@ -0,0 +1,89 @@
+import { DEFAULT_AVATAR, READONLY_RELAYS } from '@lume/stores/constants';
+import { onboardingAtom } from '@lume/stores/onboarding';
+import { shortenKey } from '@lume/utils/shortenKey';
+
+import { useAtom } from 'jotai';
+import { RelayPool } from 'nostr-relaypool';
+import { getPublicKey } from 'nostr-tools';
+import { useMemo } from 'react';
+import useSWRSubscription from 'swr/subscription';
+
+export function Page() {
+  const [onboarding, setOnboarding] = useAtom(onboardingAtom);
+  const pubkey = useMemo(() => (onboarding.privkey ? getPublicKey(onboarding.privkey) : ''), [onboarding.privkey]);
+
+  const submit = () => {
+    console.log('click');
+  };
+
+  const { data: user, error } = useSWRSubscription(
+    pubkey
+      ? [
+          {
+            kinds: [0, 3],
+            authors: [pubkey],
+          },
+        ]
+      : null,
+    (key, { next }) => {
+      const pool = new RelayPool(READONLY_RELAYS);
+
+      const unsubscribe = pool.subscribe(key, READONLY_RELAYS, (event: any) => {
+        switch (event.kind) {
+          case 0:
+            // update state
+            next(null, JSON.parse(event.content));
+            // create account
+            setOnboarding((prev) => ({ ...prev, metadata: event.content }));
+            break;
+          case 3:
+            console.log(event);
+            break;
+          default:
+            break;
+        }
+      });
+
+      return () => {
+        unsubscribe();
+      };
+    }
+  );
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="mx-auto w-full max-w-md">
+        <div className="mb-8 text-center">
+          <h1 className="text-2xl font-semibold">Continue with</h1>
+        </div>
+        <div className="w-full rounded-lg border border-zinc-800 bg-zinc-900 p-4">
+          {error && <div>Failed to load profile</div>}
+          {!user ? (
+            <div className="h-44 w-full animate-pulse bg-zinc-800"></div>
+          ) : (
+            <div className="flex flex-col gap-4">
+              <div className="flex items-center gap-2">
+                <img
+                  className="relative inline-flex h-11 w-11 rounded-lg ring-2 ring-zinc-900"
+                  src={user.picture || DEFAULT_AVATAR}
+                  alt={pubkey}
+                />
+                <div>
+                  <h3 className="font-medium leading-none text-zinc-200">{user.display_name || user.name}</h3>
+                  <p className="text-sm text-zinc-400">{user.nip05 || shortenKey(pubkey)}</p>
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => submit()}
+                className="w-full transform rounded-lg bg-fuchsia-500 px-3.5 py-2.5 font-medium text-white shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
+              >
+                <span className="drop-shadow-lg">Continue →</span>
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/onboarding/pages/index/index.page.tsx

@@ -1,5 +1,3 @@
-import OnboardingLayout from '@components/layouts/onboarding';
-
 import { ArrowRight } from 'iconoir-react';
 
 const PLEBS = [
@@ -74,45 +72,43 @@ const InfiniteLoopSlider = ({ children, duration, reverse }: { children: any; du
 
 export function Page() {
   return (
-    <OnboardingLayout>
-      <div className="grid h-full w-full grid-rows-5">
-        <div className="row-span-3 overflow-hidden">
-          <div className="relaive flex w-full max-w-full shrink-0 flex-col gap-4 overflow-hidden p-4">
-            {[...new Array(ROWS)].map((_, i) => (
-              <InfiniteLoopSlider key={i} duration={random(DURATION - 5000, DURATION + 20000)} reverse={i % 2}>
-                {shuffle(PLEBS)
-                  .slice(0, PLEBS_PER_ROW)
-                  .map((tag) => (
-                    <div key={tag} className="relative mr-4 h-11 w-11 gap-2 rounded-md bg-zinc-900 shadow-xl">
-                      <img src={tag} alt={tag} className="h-11 w-11 rounded-md border border-zinc-900" />
-                    </div>
-                  ))}
-              </InfiniteLoopSlider>
-            ))}
-            <div className="pointer-events-none absolute inset-0 bg-fade" />
-          </div>
-        </div>
-        <div className="row-span-2 flex w-full flex-col items-center gap-4 overflow-hidden pt-6 min-[1050px]:gap-8 min-[1050px]:pt-10">
-          <h1 className="animate-moveBg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-5xl font-bold leading-none text-transparent">
-            Let&apos;s start!
-          </h1>
-          <div className="mt-4 flex flex-col items-center gap-1.5">
-            <a
-              href="/onboarding/create"
-              className="relative inline-flex h-14 w-64 items-center justify-center gap-2 rounded-full bg-zinc-900 px-6 text-lg font-medium ring-1 ring-zinc-800 hover:bg-zinc-800"
-            >
-              Create new key
-              <ArrowRight width={20} height={20} />
-            </a>
-            <a
-              href="/onboarding/login"
-              className="inline-flex h-14 w-64 items-center justify-center gap-2 rounded-full px-6 text-base font-medium text-zinc-300 hover:bg-zinc-800"
-            >
-              Login with private key
-            </a>
-          </div>
+    <div className="grid h-full w-full grid-rows-5">
+      <div className="row-span-3 overflow-hidden">
+        <div className="relaive flex w-full max-w-full shrink-0 flex-col gap-4 overflow-hidden p-4">
+          {[...new Array(ROWS)].map((_, i) => (
+            <InfiniteLoopSlider key={i} duration={random(DURATION - 5000, DURATION + 20000)} reverse={i % 2}>
+              {shuffle(PLEBS)
+                .slice(0, PLEBS_PER_ROW)
+                .map((tag) => (
+                  <div key={tag} className="relative mr-4 h-11 w-11 gap-2 rounded-md bg-zinc-900 shadow-xl">
+                    <img src={tag} alt={tag} className="h-11 w-11 rounded-md border border-zinc-900" />
+                  </div>
+                ))}
+            </InfiniteLoopSlider>
+          ))}
+          <div className="pointer-events-none absolute inset-0 bg-fade" />
         </div>
       </div>
-    </OnboardingLayout>
+      <div className="row-span-2 flex w-full flex-col items-center gap-4 overflow-hidden pt-6 min-[1050px]:gap-8 min-[1050px]:pt-10">
+        <h1 className="animate-moveBg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-5xl font-bold leading-none text-transparent">
+          Let&apos;s start!
+        </h1>
+        <div className="mt-4 flex flex-col items-center gap-1.5">
+          <a
+            href="/onboarding/create"
+            className="relative inline-flex h-14 w-64 items-center justify-center gap-2 rounded-full bg-zinc-900 px-6 text-lg font-medium ring-1 ring-zinc-800 hover:bg-zinc-800"
+          >
+            Create new key
+            <ArrowRight width={20} height={20} />
+          </a>
+          <a
+            href="/onboarding/import"
+            className="inline-flex h-14 w-64 items-center justify-center gap-2 rounded-full px-6 text-base font-medium text-zinc-300 hover:bg-zinc-800"
+          >
+            Login with private key
+          </a>
+        </div>
+      </div>
+    </div>
   );
 }

src/pages/newsfeed/circle/index.page.tsx

@@ -1,15 +0,0 @@
-import NewsfeedLayout from '@components/layouts/newsfeed';
-
-export function Page() {
-  return (
-    <NewsfeedLayout>
-      <div className="relative h-full w-full rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
-        <div className="flex h-full w-full items-center justify-center">
-          <p className="text-sm text-zinc-400">
-            Sorry, this feature under development, it will come in the next version
-          </p>
-        </div>
-      </div>
-    </NewsfeedLayout>
-  );
-}

src/pages/newsfeed/following/index.page.tsx

@@ -1,119 +0,0 @@
-import FormBase from '@components/form/base';
-import NewsfeedLayout from '@components/layouts/newsfeed';
-import { NoteBase } from '@components/note/base';
-import { Placeholder } from '@components/note/placeholder';
-import { NoteQuoteRepost } from '@components/note/quoteRepost';
-
-import { hasNewerNoteAtom } from '@stores/note';
-
-import { countTotalNotes, getNotes } from '@utils/storage';
-
-import { useInfiniteQuery } from '@tanstack/react-query';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { ArrowUp } from 'iconoir-react';
-import { useAtom } from 'jotai';
-import { useEffect, useRef } from 'react';
-
-const ITEM_PER_PAGE = 20;
-const TIME = Math.floor(Date.now() / 1000);
-
-let totalNotes = 0;
-
-if (typeof window !== 'undefined') {
-  const result = await countTotalNotes();
-  totalNotes = result.total;
-}
-
-export function Page() {
-  const [hasNewerNote] = useAtom(hasNewerNoteAtom);
-
-  const { status, error, data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage }: any = useInfiniteQuery({
-    queryKey: ['following'],
-    queryFn: async ({ pageParam = 0 }) => {
-      return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
-    },
-    getNextPageParam: (lastPage) => (lastPage.nextCursor <= totalNotes ? lastPage.nextCursor : 'undefined'),
-  });
-
-  const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
-  const parentRef = useRef();
-
-  const rowVirtualizer = useVirtualizer({
-    count: hasNextPage ? allRows.length + 1 : allRows.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 400,
-    overscan: 5,
-  });
-
-  const itemsVirtualizer = rowVirtualizer.getVirtualItems();
-
-  useEffect(() => {
-    const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
-
-    if (!lastItem) {
-      return;
-    }
-
-    if (lastItem.index >= allRows.length - 1 && hasNextPage && !isFetchingNextPage) {
-      fetchNextPage();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
-
-  return (
-    <NewsfeedLayout>
-      <div className="relative h-full w-full rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
-        {hasNewerNote && (
-          <div className="absolute left-1/2 top-2 z-50 -translate-x-1/2 transform">
-            <button 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">
-              <ArrowUp width={14} height={14} />
-              Load latest
-            </button>
-          </div>
-        )}
-        {status === 'loading' ? (
-          <Placeholder />
-        ) : status === 'error' ? (
-          <div>{error.message}</div>
-        ) : (
-          <div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
-            <FormBase />
-            <div
-              className="relative w-full"
-              style={{
-                height: `${rowVirtualizer.getTotalSize()}px`,
-              }}
-            >
-              <div
-                className="absolute left-0 top-0 w-full"
-                style={{
-                  transform: `translateY(${itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin}px)`,
-                }}
-              >
-                {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-                  const note = allRows[virtualRow.index];
-                  if (note) {
-                    if (note.kind === 1) {
-                      return (
-                        <div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
-                          <NoteBase key={note.event_id} event={note} />
-                        </div>
-                      );
-                    } else {
-                      return (
-                        <div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
-                          <NoteQuoteRepost key={note.event_id} event={note} />
-                        </div>
-                      );
-                    }
-                  }
-                })}
-              </div>
-            </div>
-          </div>
-        )}
-        <div>{isFetching && !isFetchingNextPage ? 'Background Updating...' : null}</div>
-      </div>
-    </NewsfeedLayout>
-  );
-}

src/pages/onboarding/create/index.page.tsx

@@ -1,169 +0,0 @@
-import OnboardingLayout from '@components/layouts/onboarding';
-import { RelayContext } from '@components/relaysProvider';
-
-import { WRITEONLY_RELAYS } from '@stores/constants';
-
-import { createAccount } from '@utils/storage';
-
-import { EyeClose, EyeEmpty } from 'iconoir-react';
-import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools';
-import { useCallback, useContext, useMemo, useState } from 'react';
-import { navigate } from 'vite-plugin-ssr/client/router';
-
-export function Page() {
-  const pool: any = useContext(RelayContext);
-
-  const [type, setType] = useState('password');
-  const [loading, setLoading] = useState(false);
-
-  const privkey = useMemo(() => generatePrivateKey(), []);
-  const name = 'Pleb';
-
-  const pubkey = getPublicKey(privkey);
-  const npub = nip19.npubEncode(pubkey);
-  const nsec = nip19.nsecEncode(privkey);
-
-  // auto-generated profile metadata
-  const metadata: any = useMemo(
-    () => ({
-      display_name: name,
-      name: name,
-      username: name.toLowerCase(),
-      picture: 'https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp',
-    }),
-    [name]
-  );
-
-  // toggle privatek key
-  const showPrivateKey = () => {
-    if (type === 'password') {
-      setType('text');
-    } else {
-      setType('password');
-    }
-  };
-
-  // create account and broadcast to all relays
-  const submit = useCallback(async () => {
-    setLoading(true);
-
-    // build event
-    const event: any = {
-      content: JSON.stringify(metadata),
-      created_at: Math.floor(Date.now() / 1000),
-      kind: 0,
-      pubkey: pubkey,
-      tags: [],
-    };
-    event.id = getEventHash(event);
-    event.sig = signEvent(event, privkey);
-    // insert to database
-    createAccount(pubkey, privkey, metadata);
-    // broadcast
-    pool.publish(event, WRITEONLY_RELAYS);
-    // redirect to next step
-    navigate(`/onboarding/create/step-2?pubkey=${pubkey}&privkey=${privkey}`, { overwriteLastHistoryEntry: true });
-  }, [pool, pubkey, privkey, metadata]);
-
-  return (
-    <OnboardingLayout>
-      <div className="grid h-full w-full grid-rows-5">
-        <div className="row-span-1 mx-auto flex w-full max-w-md items-center justify-center">
-          <h1 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium text-transparent">
-            Create new account
-          </h1>
-        </div>
-        <div className="row-span-4">
-          <div className="mx-auto w-full max-w-md">
-            <div className="mb-8 flex flex-col gap-4">
-              <div className="flex flex-col gap-1">
-                <label className="text-sm font-semibold text-zinc-400">Public Key</label>
-                <div className="relative shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
-                  <input
-                    readOnly
-                    value={npub}
-                    className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-600"
-                  />
-                </div>
-              </div>
-              <div className="flex flex-col gap-1">
-                <label className="text-sm font-semibold text-zinc-400">Private Key</label>
-                <div className="relative shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
-                  <input
-                    readOnly
-                    type={type}
-                    value={nsec}
-                    className="relative w-full rounded-lg border border-black/5 py-2.5 pl-3.5 pr-11 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-600"
-                  />
-                  <button
-                    onClick={() => showPrivateKey()}
-                    className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
-                  >
-                    {type === 'password' ? (
-                      <EyeClose width={20} height={20} className="text-zinc-500 group-hover:text-zinc-200" />
-                    ) : (
-                      <EyeEmpty width={20} height={20} className="text-zinc-500 group-hover:text-zinc-200" />
-                    )}
-                  </button>
-                </div>
-              </div>
-              <div className="flex flex-col gap-1">
-                <label className="text-sm font-semibold text-zinc-400">Default Profile (you can change it later)</label>
-                <div className="relative w-full shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
-                  <div className="relative w-full rounded-lg border border-black/5 px-3.5 py-4 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200  dark:shadow-black/10 dark:placeholder:text-zinc-600">
-                    <div className="flex space-x-2">
-                      <div className="relative h-11 w-11 rounded-md">
-                        <img
-                          src={metadata.picture}
-                          alt="default avatar"
-                          className="h-11 w-11 rounded-md object-cover"
-                        />
-                      </div>
-                      <div className="flex-1 space-y-2 py-1">
-                        <div className="flex items-center gap-1">
-                          <p className="font-semibold">{metadata.display_name}</p>
-                          <p className="text-zinc-400">@{metadata.username}</p>
-                        </div>
-                        <div className="space-y-1">
-                          <div className="grid grid-cols-3 gap-4">
-                            <div className="col-span-2 h-2 rounded bg-zinc-700"></div>
-                            <div className="col-span-1 h-2 rounded bg-zinc-700"></div>
-                          </div>
-                          <div className="h-2 rounded bg-zinc-700"></div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flex h-10 items-center justify-center">
-              {loading === true ? (
-                <svg
-                  className="h-5 w-5 animate-spin 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>
-              ) : (
-                <button
-                  onClick={() => submit()}
-                  className="w-full transform rounded-lg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
-                >
-                  <span className="drop-shadow-lg">Continue →</span>
-                </button>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </OnboardingLayout>
-  );
-}

src/pages/onboarding/login/index.page.tsx

@@ -1,121 +0,0 @@
-import OnboardingLayout from '@components/layouts/onboarding';
-
-import { CableTag } from 'iconoir-react';
-import { getPublicKey, nip19 } from 'nostr-tools';
-import { Resolver, useForm } from 'react-hook-form';
-import { navigate } from 'vite-plugin-ssr/client/router';
-
-type FormValues = {
-  key: string;
-};
-
-const resolver: Resolver<FormValues> = async (values) => {
-  return {
-    values: values.key ? values : {},
-    errors: !values.key
-      ? {
-          key: {
-            type: 'required',
-            message: 'This is required.',
-          },
-        }
-      : {},
-  };
-};
-
-export function Page() {
-  const {
-    register,
-    setError,
-    handleSubmit,
-    formState: { errors, isDirty, isValid, isSubmitting },
-  } = useForm<FormValues>({ resolver });
-
-  const onSubmit = async (data: any) => {
-    try {
-      let privkey = data['key'];
-
-      if (privkey.substring(0, 4) === 'nsec') {
-        privkey = nip19.decode(privkey).data;
-      }
-      if (typeof getPublicKey(privkey) === 'string') {
-        navigate(`/onboarding/login/step-2?privkey=${privkey}`, { overwriteLastHistoryEntry: true });
-      }
-    } catch (error) {
-      setError('key', {
-        type: 'custom',
-        message: 'Private Key is invalid, please check again',
-      });
-    }
-  };
-
-  return (
-    <OnboardingLayout>
-      <div className="grid h-full w-full grid-rows-5">
-        <div className="row-span-1 mx-auto flex w-full max-w-md items-center justify-center">
-          <h1 className="bg-gradient-to-br from-zinc-200 via-white to-zinc-300 bg-clip-text text-3xl font-semibold text-transparent">
-            Login with Private Key
-          </h1>
-        </div>
-        <form onSubmit={handleSubmit(onSubmit)} className="row-span-4">
-          <div className="mx-auto w-full max-w-md">
-            <div className="flex flex-col gap-4">
-              <div>
-                {/* #TODO: add function */}
-                <button className="inline-flex w-full transform items-center justify-center gap-1.5 rounded-lg bg-zinc-700 px-3.5 py-2.5 font-medium text-zinc-200 shadow-input ring-1 ring-zinc-600 active:translate-y-1">
-                  {/* #TODO: change to nostr connect logo */}
-                  <CableTag width={20} height={20} className="text-fuchsia-500" />
-                  <span>Continue with Nostr Connect</span>
-                </button>
-              </div>
-              <div className="relative">
-                <div className="absolute inset-0 flex items-center">
-                  <div className="w-full border-t border-zinc-800"></div>
-                </div>
-                <div className="relative flex justify-center">
-                  <span className="bg-black px-2 text-sm text-zinc-500">or</span>
-                </div>
-              </div>
-              <div className="flex flex-col gap-0.5">
-                <div className="relative shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
-                  <input
-                    {...register('key', { required: true, minLength: 32 })}
-                    type={'password'}
-                    placeholder="Paste private key here..."
-                    className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 text-center shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
-                  />
-                </div>
-                <span className="text-xs text-red-400">{errors.key && <p>{errors.key.message}</p>}</span>
-              </div>
-            </div>
-            <div className="mt-3 flex h-10 items-center justify-center">
-              {isSubmitting ? (
-                <svg
-                  className="h-5 w-5 animate-spin 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>
-              ) : (
-                <button
-                  type="submit"
-                  disabled={!isDirty || !isValid}
-                  className="w-full transform rounded-lg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
-                >
-                  <span className="drop-shadow-lg">Continue →</span>
-                </button>
-              )}
-            </div>
-          </div>
-        </form>
-      </div>
-    </OnboardingLayout>
-  );
-}

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

@@ -1,156 +0,0 @@
-import OnboardingLayout from '@components/layouts/onboarding';
-import { RelayContext } from '@components/relaysProvider';
-
-import { DEFAULT_AVATAR, READONLY_RELAYS } from '@stores/constants';
-
-import { usePageContext } from '@utils/hooks/usePageContext';
-import { fetchProfileMetadata } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
-import { createAccount, createPleb, updateAccount } from '@utils/storage';
-import { nip02ToArray } from '@utils/transform';
-
-import { getPublicKey } from 'nostr-tools';
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { navigate } from 'vite-plugin-ssr/client/router';
-
-export function Page() {
-  const pageContext = usePageContext();
-  const searchParams = pageContext.urlParsed.search;
-
-  const privkey = searchParams.privkey;
-  const pubkey = useMemo(() => (privkey ? getPublicKey(privkey) : ''), [privkey]);
-
-  const pool: any = useContext(RelayContext);
-  const [profile, setProfile] = useState({ metadata: null });
-  const [done, setDone] = useState(false);
-
-  const timeout = useRef(null);
-  const nip02 = useRef(null);
-
-  const createPlebs = useCallback(async (tags: string[]) => {
-    for (const tag of tags) {
-      fetchProfileMetadata(tag[1])
-        .then((res: any) => createPleb(tag[1], res.content))
-        .catch(console.error);
-    }
-  }, []);
-
-  const submit = () => {
-    // update account's folllows with NIP-02 tag list
-    const arr = nip02ToArray(nip02.current);
-    updateAccount('follows', arr, pubkey);
-    // create plebs (saved nostr profile)
-    createPlebs(nip02.current);
-    // redirect to splashscreen
-    navigate('/', { overwriteLastHistoryEntry: true });
-  };
-
-  useEffect(() => {
-    const unsubscribe = pool.subscribe(
-      [
-        {
-          kinds: [0, 3],
-          authors: [pubkey],
-        },
-      ],
-      READONLY_RELAYS,
-      (event: any) => {
-        switch (event.kind) {
-          case 0:
-            // create account
-            createAccount(pubkey, privkey, event.content);
-            // update state
-            setProfile({
-              metadata: JSON.parse(event.content),
-            });
-            break;
-          case 3:
-            nip02.current = event.tags;
-            break;
-          default:
-            break;
-        }
-      },
-      undefined,
-      () => {
-        timeout.current = setTimeout(() => setDone(true), 5000);
-      },
-      {
-        unsubscribeOnEose: true,
-        logAllEvents: false,
-      }
-    );
-
-    return () => {
-      unsubscribe();
-      clearTimeout(timeout.current);
-    };
-  }, [pool, pubkey, privkey]);
-
-  return (
-    <OnboardingLayout>
-      <div className="grid h-full w-full grid-rows-5">
-        <div className="row-span-1 flex items-center justify-center">
-          <h1 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium text-transparent">
-            Bringing back your profile...
-          </h1>
-        </div>
-        <div className="row-span-4 flex flex-col gap-8">
-          <div className="mx-auto w-full max-w-md">
-            <div className="mb-4 flex flex-col gap-2">
-              <div className="w-full rounded-lg bg-zinc-900 p-4 shadow-input ring-1 ring-zinc-800">
-                <div className="flex space-x-4">
-                  <div className="relative h-10 w-10 rounded-full">
-                    <img
-                      className="h-10 w-10 rounded-full object-cover"
-                      src={profile.metadata?.picture || DEFAULT_AVATAR}
-                      alt="avatar"
-                    />
-                  </div>
-                  <div className="flex-1 space-y-4 py-1">
-                    <div className="flex items-center gap-2">
-                      <p className="font-semibold">{profile.metadata?.display_name || profile.metadata?.name}</p>
-                      <span className="leading-tight text-zinc-500">·</span>
-                      <p className="text-zinc-500">@{profile.metadata?.username || (pubkey && shortenKey(pubkey))}</p>
-                    </div>
-                    <div className="space-y-3">
-                      <div className="grid grid-cols-3 gap-4">
-                        <div className="col-span-2 h-2 rounded bg-zinc-700"></div>
-                        <div className="col-span-1 h-2 rounded bg-zinc-700"></div>
-                      </div>
-                      <div className="h-2 rounded bg-zinc-700"></div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flex items-center justify-center">
-              {done === false ? (
-                <svg
-                  className="h-5 w-5 animate-spin 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>
-              ) : (
-                <button
-                  onClick={() => submit()}
-                  className="inline-flex w-full transform items-center justify-center rounded-lg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
-                >
-                  <span className="drop-shadow-lg">Done! Go to newsfeed</span>
-                </button>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </OnboardingLayout>
-  );
-}

src/pages/user/index.page.tsx

@@ -1,18 +0,0 @@
-import NewsfeedLayout from '@components/layouts/newsfeed';
-
-import { usePageContext } from '@utils/hooks/usePageContext';
-
-export function Page() {
-  const pageContext = usePageContext();
-  const searchParams: any = pageContext.urlParsed.search;
-
-  const pubkey = searchParams.pubkey;
-
-  return (
-    <NewsfeedLayout>
-      <div className="scrollbar-hide h-full w-full overflow-y-auto">
-        <p>{pubkey}</p>
-      </div>
-    </NewsfeedLayout>
-  );
-}

src/renderer/_default.page.client.tsx

@@ -1,12 +1,14 @@
-import '@renderer/index.css';
-import { Shell } from '@renderer/shell';
-import { PageContextClient } from '@renderer/types';
+import '@lume/renderer/index.css';
+import { Shell } from '@lume/renderer/shell';
+import { PageContextClient } from '@lume/renderer/types';
 
 import { StrictMode } from 'react';
 import { Root, createRoot, hydrateRoot } from 'react-dom/client';
 import 'vidstack/styles/defaults.css';
 
 export const clientRouting = true;
+export const hydrationCanBeAborted = true;
+
 let root: Root;
 
 export async function render(pageContext: PageContextClient) {

src/renderer/_default.page.server.tsx

@@ -1,5 +1,5 @@
-import { Shell } from '@renderer/shell';
-import { PageContextServer } from '@renderer/types';
+import { Shell } from '@lume/renderer/shell';
+import { PageContextServer } from '@lume/renderer/types';
 
 import { StrictMode } from 'react';
 import ReactDOMServer from 'react-dom/server';

src/renderer/layoutDefault.tsx

@@ -0,0 +1,3 @@
+export function LayoutDefault({ children }: { children: React.ReactNode }) {
+  return <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">{children}</div>;
+}

src/renderer/shell.tsx

@@ -1,22 +1,23 @@
-import AccountProvider from '@components/accountProvider';
-import RelayProvider from '@components/relaysProvider';
-
-import { PageContextProvider } from '@utils/hooks/usePageContext';
+import AccountProvider from '@lume/shared/accountProvider';
+import { PageContextProvider } from '@lume/utils/hooks/usePageContext';
 
 import { PageContext } from '@renderer/types';
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
+import { LayoutDefault } from './layoutDefault';
+
 const queryClient = new QueryClient();
 
 export function Shell({ children, pageContext }: { children: React.ReactNode; pageContext: PageContext }) {
+  const Layout = (pageContext.exports.Layout as React.ElementType) || (LayoutDefault as React.ElementType);
+
   return (
     <PageContextProvider pageContext={pageContext}>
-      <RelayProvider>
+      <Layout>
         <AccountProvider>
           <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
         </AccountProvider>
-      </RelayProvider>
+      </Layout>
     </PageContextProvider>
   );
 }

src/shared/accountProvider.tsx

@@ -5,7 +5,7 @@ export const AccountContext = createContext({});
 let activeAccount: any = { id: '', pubkey: '', follows: null, metadata: {} };
 
 if (typeof window !== 'undefined') {
-  const { getActiveAccount } = await import('@utils/storage');
+  const { getActiveAccount } = await import('@lume/utils/storage');
   activeAccount = await getActiveAccount();
 }
 

src/shared/activeLink.tsx

@@ -1,4 +1,4 @@
-import { usePageContext } from '@utils/hooks/usePageContext';
+import { usePageContext } from '@lume/utils/hooks/usePageContext';
 
 import { twMerge } from 'tailwind-merge';
 

src/shared/appHeader.tsx

@@ -1,4 +1,4 @@
-import EventCollector from '@components/eventCollector';
+import EventCollector from '@lume/shared/eventCollector';
 
 import { ArrowLeft, ArrowRight, Refresh } from 'iconoir-react';
 

src/shared/avatarUploader.tsx

@@ -1,4 +1,4 @@
-import { createBlobFromFile } from '@utils/createBlobFromFile';
+import { createBlobFromFile } from '@lume/utils/createBlobFromFile';
 
 import { open } from '@tauri-apps/api/dialog';
 import { Body, fetch } from '@tauri-apps/api/http';

src/shared/channels/channelBlackList.tsx

@@ -1,4 +1,4 @@
-import { UserMuted } from '@components/user/muted';
+import { UserMuted } from '@lume/shared/user/muted';
 
 import { Popover, Transition } from '@headlessui/react';
 import { MicMute } from 'iconoir-react';

src/shared/channels/channelList.tsx

@@ -1,10 +1,10 @@
-import { ChannelListItem } from '@components/channels/channelListItem';
-import { CreateChannelModal } from '@components/channels/createChannelModal';
+import { ChannelListItem } from '@lume/shared/channels/channelListItem';
+import { CreateChannelModal } from '@lume/shared/channels/createChannelModal';
 
 let channels: any = [];
 
 if (typeof window !== 'undefined') {
-  const { getChannels } = await import('@utils/storage');
+  const { getChannels } = await import('@lume/utils/storage');
   channels = await getChannels(100, 0);
 }
 

src/shared/channels/channelListItem.tsx

@@ -1,7 +1,6 @@
-import { DEFAULT_AVATAR } from '@stores/constants';
-
-import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
-import { usePageContext } from '@utils/hooks/usePageContext';
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { useChannelMetadata } from '@lume/utils/hooks/useChannelMetadata';
+import { usePageContext } from '@lume/utils/hooks/usePageContext';
 
 import { twMerge } from 'tailwind-merge';
 

src/shared/channels/channelProfile.tsx

@@ -1,6 +1,5 @@
-import { DEFAULT_AVATAR } from '@stores/constants';
-
-import { useChannelProfile } from '@utils/hooks/useChannelProfile';
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { useChannelProfile } from '@lume/utils/hooks/useChannelProfile';
 
 import { Copy } from 'iconoir-react';
 import { nip19 } from 'nostr-tools';

src/shared/channels/createChannelModal.tsx

@@ -1,11 +1,9 @@
-import { AccountContext } from '@components/accountProvider';
-import { AvatarUploader } from '@components/avatarUploader';
-import { RelayContext } from '@components/relaysProvider';
-
-import { DEFAULT_AVATAR, WRITEONLY_RELAYS } from '@stores/constants';
-
-import { dateToUnix } from '@utils/getDate';
-import { createChannel } from '@utils/storage';
+import { AccountContext } from '@lume/shared/accountProvider';
+import { AvatarUploader } from '@lume/shared/avatarUploader';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { DEFAULT_AVATAR, WRITEONLY_RELAYS } from '@lume/stores/constants';
+import { dateToUnix } from '@lume/utils/getDate';
+import { createChannel } from '@lume/utils/storage';
 
 import { Dialog, Transition } from '@headlessui/react';
 import { Cancel, Plus } from 'iconoir-react';

src/shared/channels/messages/hideMessageButton.tsx

@@ -1,10 +1,8 @@
-import { AccountContext } from '@components/accountProvider';
-import { RelayContext } from '@components/relaysProvider';
-import Tooltip from '@components/tooltip';
-
-import { WRITEONLY_RELAYS } from '@stores/constants';
-
-import { dateToUnix } from '@utils/getDate';
+import { AccountContext } from '@lume/shared/accountProvider';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import Tooltip from '@lume/shared/tooltip';
+import { WRITEONLY_RELAYS } from '@lume/stores/constants';
+import { dateToUnix } from '@lume/utils/getDate';
 
 import { EyeClose } from 'iconoir-react';
 import { getEventHash, signEvent } from 'nostr-tools';

src/shared/channels/messages/index.tsx

@@ -1,7 +1,6 @@
-import { ChannelMessageItem } from '@components/channels/messages/item';
-import { Placeholder } from '@components/note/placeholder';
-
-import { sortedChannelMessagesAtom } from '@stores/channel';
+import { ChannelMessageItem } from '@lume/shared/channels/messages/item';
+import { Placeholder } from '@lume/shared/note/placeholder';
+import { sortedChannelMessagesAtom } from '@lume/stores/channel';
 
 import { useAtomValue } from 'jotai';
 import { useCallback, useRef } from 'react';

src/shared/channels/messages/item.tsx

@@ -1,9 +1,8 @@
-import { HideMessageButton } from '@components/channels/messages/hideMessageButton';
-import { MuteButton } from '@components/channels/messages/muteButton';
-import { ReplyButton } from '@components/channels/messages/replyButton';
-import { MessageUser } from '@components/chats/messageUser';
-
-import { messageParser } from '@utils/parser';
+import { HideMessageButton } from '@lume/shared/channels/messages/hideMessageButton';
+import { MuteButton } from '@lume/shared/channels/messages/muteButton';
+import { ReplyButton } from '@lume/shared/channels/messages/replyButton';
+import { MessageUser } from '@lume/shared/chats/messageUser';
+import { messageParser } from '@lume/utils/parser';
 
 import { memo } from 'react';
 

src/shared/channels/messages/muteButton.tsx

@@ -1,10 +1,8 @@
-import { AccountContext } from '@components/accountProvider';
-import { RelayContext } from '@components/relaysProvider';
-import Tooltip from '@components/tooltip';
-
-import { WRITEONLY_RELAYS } from '@stores/constants';
-
-import { dateToUnix } from '@utils/getDate';
+import { AccountContext } from '@lume/shared/accountProvider';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import Tooltip from '@lume/shared/tooltip';
+import { WRITEONLY_RELAYS } from '@lume/stores/constants';
+import { dateToUnix } from '@lume/utils/getDate';
 
 import { MicMute } from 'iconoir-react';
 import { getEventHash, signEvent } from 'nostr-tools';

src/shared/channels/messages/replyButton.tsx

@@ -1,6 +1,5 @@
-import Tooltip from '@components/tooltip';
-
-import { channelReplyAtom } from '@stores/channel';
+import Tooltip from '@lume/shared/tooltip';
+import { channelReplyAtom } from '@lume/stores/channel';
 
 import { Reply } from 'iconoir-react';
 import { useSetAtom } from 'jotai';

src/shared/channels/updateChannelModal.tsx

@@ -1,11 +1,9 @@
-import { AccountContext } from '@components/accountProvider';
-import { AvatarUploader } from '@components/avatarUploader';
-import { RelayContext } from '@components/relaysProvider';
-
-import { DEFAULT_AVATAR, WRITEONLY_RELAYS } from '@stores/constants';
-
-import { dateToUnix } from '@utils/getDate';
-import { getChannel, updateChannelMetadata } from '@utils/storage';
+import { AccountContext } from '@lume/shared/accountProvider';
+import { AvatarUploader } from '@lume/shared/avatarUploader';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { DEFAULT_AVATAR, WRITEONLY_RELAYS } from '@lume/stores/constants';
+import { dateToUnix } from '@lume/utils/getDate';
+import { getChannel, updateChannelMetadata } from '@lume/utils/storage';
 
 import { Dialog, Transition } from '@headlessui/react';
 import { Cancel, EditPencil } from 'iconoir-react';

src/shared/chats/chatList.tsx

@@ -1,15 +1,14 @@
-import { AccountContext } from '@components/accountProvider';
-import { ChatListItem } from '@components/chats/chatListItem';
-import { ChatModal } from '@components/chats/chatModal';
-
-import { DEFAULT_AVATAR } from '@stores/constants';
+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('@utils/storage');
+  const { getChats, getActiveAccount } = await import('@lume/utils/storage');
   const activeAccount = await getActiveAccount();
 
   list = await getChats(activeAccount.id);

src/shared/chats/chatListItem.tsx

@@ -1,8 +1,7 @@
-import { DEFAULT_AVATAR } from '@stores/constants';
-
-import { usePageContext } from '@utils/hooks/usePageContext';
-import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { usePageContext } from '@lume/utils/hooks/usePageContext';
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
 
 import { twMerge } from 'tailwind-merge';
 

src/shared/chats/chatModalUser.tsx

@@ -1,6 +1,5 @@
-import { DEFAULT_AVATAR } from '@stores/constants';
-
-import { shortenKey } from '@utils/shortenKey';
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { shortenKey } from '@lume/utils/shortenKey';
 
 import { navigate } from 'vite-plugin-ssr/client/router';
 

src/shared/chats/messageList.tsx

@@ -1,8 +1,7 @@
-import { AccountContext } from '@components/accountProvider';
-import { MessageListItem } from '@components/chats/messageListItem';
-import { Placeholder } from '@components/note/placeholder';
-
-import { sortedChatMessagesAtom } from '@stores/chat';
+import { AccountContext } from '@lume/shared/accountProvider';
+import { MessageListItem } from '@lume/shared/chats/messageListItem';
+import { Placeholder } from '@lume/shared/note/placeholder';
+import { sortedChatMessagesAtom } from '@lume/stores/chat';
 
 import { useAtomValue } from 'jotai';
 import { useCallback, useContext, useRef } from 'react';

src/shared/chats/messageListItem.tsx

@@ -1,6 +1,5 @@
-import { MessageUser } from '@components/chats/messageUser';
-
-import { useDecryptMessage } from '@utils/hooks/useDecryptMessage';
+import { MessageUser } from '@lume/shared/chats/messageUser';
+import { useDecryptMessage } from '@lume/utils/hooks/useDecryptMessage';
 
 import { memo } from 'react';
 

src/shared/chats/messageUser.tsx

@@ -1,7 +1,6 @@
-import { DEFAULT_AVATAR } from '@stores/constants';
-
-import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
 
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';

src/shared/eventCollector.tsx

@@ -1,13 +1,11 @@
-import { AccountContext } from '@components/accountProvider';
-import { NetworkStatusIndicator } from '@components/networkStatusIndicator';
-import { RelayContext } from '@components/relaysProvider';
-
-import { READONLY_RELAYS } from '@stores/constants';
-import { hasNewerNoteAtom } from '@stores/note';
-
-import { dateToUnix } from '@utils/getDate';
-import { createChat, createNote, updateAccount } from '@utils/storage';
-import { getParentID, nip02ToArray } from '@utils/transform';
+import { AccountContext } from '@lume/shared/accountProvider';
+import { NetworkStatusIndicator } from '@lume/shared/networkStatusIndicator';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { READONLY_RELAYS } from '@lume/stores/constants';
+import { hasNewerNoteAtom } from '@lume/stores/note';
+import { dateToUnix } from '@lume/utils/getDate';
+import { createChat, createNote, updateAccount } from '@lume/utils/storage';
+import { getParentID, nip02ToArray } from '@lume/utils/transform';
 
 import { useSetAtom } from 'jotai';
 import { useCallback, useContext, useEffect, useRef } from 'react';

src/shared/form/base.tsx

@@ -1,11 +1,9 @@
-import { AccountContext } from '@components/accountProvider';
-import { ImagePicker } from '@components/form/imagePicker';
-import { RelayContext } from '@components/relaysProvider';
-
-import { WRITEONLY_RELAYS } from '@stores/constants';
-import { noteContentAtom } from '@stores/note';
-
-import { dateToUnix } from '@utils/getDate';
+import { AccountContext } from '@lume/shared/accountProvider';
+import { ImagePicker } from '@lume/shared/form/imagePicker';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { WRITEONLY_RELAYS } from '@lume/stores/constants';
+import { noteContentAtom } from '@lume/stores/note';
+import { dateToUnix } from '@lume/utils/getDate';
 
 import { useAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';

src/shared/form/channel.tsx

@@ -1,12 +1,10 @@
-import { AccountContext } from '@components/accountProvider';
-import { ImagePicker } from '@components/form/imagePicker';
-import { RelayContext } from '@components/relaysProvider';
-import { UserMini } from '@components/user/mini';
-
-import { channelContentAtom, channelReplyAtom } from '@stores/channel';
-import { FULL_RELAYS } from '@stores/constants';
-
-import { dateToUnix } from '@utils/getDate';
+import { AccountContext } from '@lume/shared/accountProvider';
+import { ImagePicker } from '@lume/shared/form/imagePicker';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { UserMini } from '@lume/shared/user/mini';
+import { channelContentAtom, channelReplyAtom } from '@lume/stores/channel';
+import { FULL_RELAYS } from '@lume/stores/constants';
+import { dateToUnix } from '@lume/utils/getDate';
 
 import { Cancel } from 'iconoir-react';
 import { useAtom, useAtomValue } from 'jotai';

src/shared/form/chat.tsx

@@ -1,11 +1,9 @@
-import { AccountContext } from '@components/accountProvider';
-import { ImagePicker } from '@components/form/imagePicker';
-import { RelayContext } from '@components/relaysProvider';
-
-import { chatContentAtom } from '@stores/chat';
-import { FULL_RELAYS } from '@stores/constants';
-
-import { dateToUnix } from '@utils/getDate';
+import { AccountContext } from '@lume/shared/accountProvider';
+import { ImagePicker } from '@lume/shared/form/imagePicker';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { chatContentAtom } from '@lume/stores/chat';
+import { FULL_RELAYS } from '@lume/stores/constants';
+import { dateToUnix } from '@lume/utils/getDate';
 
 import { useAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';

src/shared/form/comment.tsx

@@ -1,9 +1,7 @@
-import { AccountContext } from '@components/accountProvider';
-import { RelayContext } from '@components/relaysProvider';
-
-import { WRITEONLY_RELAYS } from '@stores/constants';
-
-import { dateToUnix } from '@utils/getDate';
+import { AccountContext } from '@lume/shared/accountProvider';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { WRITEONLY_RELAYS } from '@lume/stores/constants';
+import { dateToUnix } from '@lume/utils/getDate';
 
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext, useState } from 'react';

src/shared/form/imagePicker.tsx

@@ -1,8 +1,7 @@
-import { channelContentAtom } from '@stores/channel';
-import { chatContentAtom } from '@stores/chat';
-import { noteContentAtom } from '@stores/note';
-
-import { createBlobFromFile } from '@utils/createBlobFromFile';
+import { channelContentAtom } from '@lume/stores/channel';
+import { chatContentAtom } from '@lume/stores/chat';
+import { noteContentAtom } from '@lume/stores/note';
+import { createBlobFromFile } from '@lume/utils/createBlobFromFile';
 
 import { open } from '@tauri-apps/api/dialog';
 import { Body, fetch } from '@tauri-apps/api/http';

src/shared/icons/lume.tsx

@@ -1,4 +1,4 @@
-export default function LumeSymbol({ className }: { className: string }) {
+export default function LumeIcon({ className }: { className: string }) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={className}>
       <path

src/shared/layouts/channel.tsx

@@ -1,6 +1,6 @@
-import AppHeader from '@components/appHeader';
-import MultiAccounts from '@components/multiAccounts';
-import Navigation from '@components/navigation';
+import AppHeader from '@lume/shared/appHeader';
+import MultiAccounts from '@lume/shared/multiAccounts';
+import Navigation from '@lume/shared/navigation';
 
 export default function ChannelLayout({ children }: { children: React.ReactNode }) {
   return (

src/shared/layouts/newsfeed.tsx

@@ -1,6 +1,6 @@
-import AppHeader from '@components/appHeader';
-import MultiAccounts from '@components/multiAccounts';
-import Navigation from '@components/navigation';
+import AppHeader from '@lume/shared/appHeader';
+import MultiAccounts from '@lume/shared/multiAccounts';
+import Navigation from '@lume/shared/navigation';
 
 export default function NewsfeedLayout({ children }: { children: React.ReactNode }) {
   return (

src/shared/layouts/onboarding.tsx

@@ -1,4 +1,4 @@
-import AppHeader from '@components/appHeader';
+import AppHeader from '@lume/shared/appHeader';
 
 export default function OnboardingLayout({ children }: { children: React.ReactNode }) {
   return (

src/shared/multiAccounts/activeAccount.tsx

@@ -1,4 +1,4 @@
-import { DEFAULT_AVATAR } from '@stores/constants';
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
 
 export const ActiveAccount = ({ user }: { user: any }) => {
   const userData = JSON.parse(user.metadata);

src/shared/multiAccounts/inactiveAccount.tsx

@@ -1,4 +1,4 @@
-import { DEFAULT_AVATAR } from '@stores/constants';
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
 
 import { memo } from 'react';
 

src/shared/multiAccounts/index.tsx

@@ -1,18 +1,16 @@
-import { AccountContext } from '@components/accountProvider';
-import { ActiveAccount } from '@components/multiAccounts/activeAccount';
-import { InactiveAccount } from '@components/multiAccounts/inactiveAccount';
-
-import { APP_VERSION } from '@stores/constants';
+import { AccountContext } from '@lume/shared/accountProvider';
+import { ActiveAccount } from '@lume/shared/multiAccounts/activeAccount';
+import { InactiveAccount } from '@lume/shared/multiAccounts/inactiveAccount';
+import { APP_VERSION } from '@lume/stores/constants';
 
 import LumeSymbol from '@assets/icons/Lume';
-
 import { Plus } from 'iconoir-react';
 import { useContext } from 'react';
 
 let accounts: any = [];
 
 if (typeof window !== 'undefined') {
-  const { getAccounts } = await import('@utils/storage');
+  const { getAccounts } = await import('@lume/utils/storage');
   accounts = await getAccounts();
 }
 

src/shared/navigation.tsx

@@ -1,6 +1,6 @@
-import ActiveLink from '@components/activeLink';
-import ChannelList from '@components/channels/channelList';
-import ChatList from '@components/chats/chatList';
+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';

src/shared/networkStatusIndicator.tsx

@@ -1,4 +1,4 @@
-import { useNetworkStatus } from '@utils/hooks/useNetworkStatus';
+import { useNetworkStatus } from '@lume/utils/hooks/useNetworkStatus';
 
 export const NetworkStatusIndicator = () => {
   const isOnline = useNetworkStatus();

src/shared/note/base.tsx

@@ -1,8 +1,7 @@
-import { NoteMetadata } from '@components/note/metadata';
-import { NoteParent } from '@components/note/parent';
-import { UserExtend } from '@components/user/extend';
-
-import { contentParser } from '@utils/parser';
+import { NoteMetadata } from '@lume/shared/note/metadata';
+import { NoteParent } from '@lume/shared/note/parent';
+import { UserExtend } from '@lume/shared/user/extend';
+import { contentParser } from '@lume/utils/parser';
 
 import { memo } from 'react';
 import { navigate } from 'vite-plugin-ssr/client/router';

src/shared/note/comment.tsx

@@ -1,9 +1,9 @@
-import { NoteMetadata } from '@components/note/metadata';
-import { ImagePreview } from '@components/note/preview/image';
-import { VideoPreview } from '@components/note/preview/video';
-import { NoteQuote } from '@components/note/quote';
-import { UserExtend } from '@components/user/extend';
-import { UserMention } from '@components/user/mention';
+import { NoteMetadata } from '@lume/shared/note/metadata';
+import { ImagePreview } from '@lume/shared/note/preview/image';
+import { VideoPreview } from '@lume/shared/note/preview/video';
+import { NoteQuote } from '@lume/shared/note/quote';
+import { UserExtend } from '@lume/shared/user/extend';
+import { UserMention } from '@lume/shared/user/mention';
 
 import destr from 'destr';
 import { memo, useMemo } from 'react';

src/shared/note/extend.tsx

@@ -1,9 +1,9 @@
-import { NoteMetadata } from '@components/note/metadata';
-import { ImagePreview } from '@components/note/preview/image';
-import { VideoPreview } from '@components/note/preview/video';
-import { NoteQuote } from '@components/note/quote';
-import { UserLarge } from '@components/user/large';
-import { UserMention } from '@components/user/mention';
+import { NoteMetadata } from '@lume/shared/note/metadata';
+import { ImagePreview } from '@lume/shared/note/preview/image';
+import { VideoPreview } from '@lume/shared/note/preview/video';
+import { NoteQuote } from '@lume/shared/note/quote';
+import { UserLarge } from '@lume/shared/user/large';
+import { UserMention } from '@lume/shared/user/mention';
 
 import destr from 'destr';
 import { memo, useMemo } from 'react';

src/shared/note/meta/comment.tsx

@@ -1,10 +1,8 @@
-import { AccountContext } from '@components/accountProvider';
-import { RelayContext } from '@components/relaysProvider';
-import { UserExtend } from '@components/user/extend';
-
-import { WRITEONLY_RELAYS } from '@stores/constants';
-
-import { dateToUnix } from '@utils/getDate';
+import { AccountContext } from '@lume/shared/accountProvider';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { UserExtend } from '@lume/shared/user/extend';
+import { WRITEONLY_RELAYS } from '@lume/stores/constants';
+import { dateToUnix } from '@lume/utils/getDate';
 
 import { Dialog, Transition } from '@headlessui/react';
 import { ChatLines, OpenNewWindow } from 'iconoir-react';

src/shared/note/meta/reaction.tsx

@@ -1,9 +1,7 @@
-import { AccountContext } from '@components/accountProvider';
-import { RelayContext } from '@components/relaysProvider';
-
-import { WRITEONLY_RELAYS } from '@stores/constants';
-
-import { dateToUnix } from '@utils/getDate';
+import { AccountContext } from '@lume/shared/accountProvider';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { WRITEONLY_RELAYS } from '@lume/stores/constants';
+import { dateToUnix } from '@lume/utils/getDate';
 
 import { Heart } from 'iconoir-react';
 import { getEventHash, signEvent } from 'nostr-tools';

src/shared/note/parent.tsx

@@ -1,10 +1,8 @@
-import { NoteMetadata } from '@components/note/metadata';
-import { RelayContext } from '@components/relaysProvider';
-import { UserExtend } from '@components/user/extend';
-
-import { READONLY_RELAYS } from '@stores/constants';
-
-import { contentParser } from '@utils/parser';
+import { NoteMetadata } from '@lume/shared/note/metadata';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { UserExtend } from '@lume/shared/user/extend';
+import { READONLY_RELAYS } from '@lume/stores/constants';
+import { contentParser } from '@lume/utils/parser';
 
 import { memo, useContext } from 'react';
 import useSWRSubscription from 'swr/subscription';

src/shared/note/quote.tsx

@@ -1,9 +1,7 @@
-import { RelayContext } from '@components/relaysProvider';
-import { UserExtend } from '@components/user/extend';
-
-import { READONLY_RELAYS } from '@stores/constants';
-
-import { contentParser } from '@utils/parser';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { UserExtend } from '@lume/shared/user/extend';
+import { READONLY_RELAYS } from '@lume/stores/constants';
+import { contentParser } from '@lume/utils/parser';
 
 import { memo, useContext } from 'react';
 import useSWRSubscription from 'swr/subscription';

src/shared/note/quoteRepost.tsx

@@ -1,7 +1,6 @@
-import { RootNote } from '@components/note/rootNote';
-import { UserQuoteRepost } from '@components/user/quoteRepost';
-
-import { getQuoteID } from '@utils/transform';
+import { RootNote } from '@lume/shared/note/rootNote';
+import { UserQuoteRepost } from '@lume/shared/user/quoteRepost';
+import { getQuoteID } from '@lume/utils/transform';
 
 import { memo } from 'react';
 

src/shared/note/rootNote.tsx

@@ -1,10 +1,8 @@
-import { NoteMetadata } from '@components/note/metadata';
-import { RelayContext } from '@components/relaysProvider';
-import { UserExtend } from '@components/user/extend';
-
-import { READONLY_RELAYS } from '@stores/constants';
-
-import { contentParser } from '@utils/parser';
+import { NoteMetadata } from '@lume/shared/note/metadata';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { UserExtend } from '@lume/shared/user/extend';
+import { READONLY_RELAYS } from '@lume/stores/constants';
+import { contentParser } from '@lume/utils/parser';
 
 import { memo, useContext } from 'react';
 import useSWRSubscription from 'swr/subscription';

src/shared/profile/followers.tsx

@@ -1,7 +1,6 @@
-import { RelayContext } from '@components/relaysProvider';
-import { UserFollow } from '@components/user/follow';
-
-import { READONLY_RELAYS } from '@stores/constants';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { UserFollow } from '@lume/shared/user/follow';
+import { READONLY_RELAYS } from '@lume/stores/constants';
 
 import destr from 'destr';
 import { Author } from 'nostr-relaypool';

src/shared/profile/follows.tsx

@@ -1,7 +1,6 @@
-import { RelayContext } from '@components/relaysProvider';
-import { UserFollow } from '@components/user/follow';
-
-import { READONLY_RELAYS } from '@stores/constants';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { UserFollow } from '@lume/shared/user/follow';
+import { READONLY_RELAYS } from '@lume/stores/constants';
 
 import { Author } from 'nostr-relaypool';
 import { useContext, useEffect, useState } from 'react';

src/shared/profile/metadata.tsx

@@ -1,8 +1,6 @@
-import { RelayContext } from '@components/relaysProvider';
-
-import { DEFAULT_AVATAR, READONLY_RELAYS } from '@stores/constants';
-
-import { shortenKey } from '@utils/shortenKey';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { DEFAULT_AVATAR, READONLY_RELAYS } from '@lume/stores/constants';
+import { shortenKey } from '@lume/utils/shortenKey';
 
 import destr from 'destr';
 import { Author } from 'nostr-relaypool';

src/shared/profile/notes.tsx

@@ -1,7 +1,6 @@
-import { NoteBase } from '@components/note/base';
-import { RelayContext } from '@components/relaysProvider';
-
-import { READONLY_RELAYS } from '@stores/constants';
+import { NoteBase } from '@lume/shared/note/base';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { READONLY_RELAYS } from '@lume/stores/constants';
 
 import { Author } from 'nostr-relaypool';
 import { useContext, useEffect, useState } from 'react';

src/shared/relaysProvider.tsx

@@ -1,4 +1,4 @@
-import { READONLY_RELAYS } from '@stores/constants';
+import { READONLY_RELAYS } from '@lume/stores/constants';
 
 import { RelayPool } from 'nostr-relaypool';
 import { createContext, useMemo } from 'react';

src/shared/user/base.tsx

@@ -1,7 +1,6 @@
-import { DEFAULT_AVATAR } from '@stores/constants';
-
-import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
 
 import { memo } from 'react';
 

src/shared/user/extend.tsx

@@ -1,7 +1,6 @@
-import { DEFAULT_AVATAR } from '@stores/constants';
-
-import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
 
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';

src/shared/user/follow.tsx

@@ -1,7 +1,6 @@
-import { DEFAULT_AVATAR } from '@stores/constants';
-
-import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
 
 export const UserFollow = ({ pubkey }: { pubkey: string }) => {
   const profile = useProfile(pubkey);

src/shared/user/large.tsx

@@ -1,7 +1,6 @@
-import { DEFAULT_AVATAR } from '@stores/constants';
-
-import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
 
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';

src/shared/user/mention.tsx

@@ -1,5 +1,5 @@
-import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
 
 export const UserMention = ({ pubkey }: { pubkey: string }) => {
   const profile = useProfile(pubkey);

src/shared/user/mini.tsx

@@ -1,7 +1,6 @@
-import { DEFAULT_AVATAR } from '@stores/constants';
-
-import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
 
 export const UserMini = ({ pubkey }: { pubkey: string }) => {
   const profile = useProfile(pubkey);

src/shared/user/muted.tsx

@@ -1,7 +1,6 @@
-import { DEFAULT_AVATAR } from '@stores/constants';
-
-import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
 
 import { useState } from 'react';
 
@@ -10,7 +9,7 @@ export const UserMuted = ({ data }: { data: any }) => {
   const [status, setStatus] = useState(data.status);
 
   const unmute = async () => {
-    const { updateItemInBlacklist } = await import('@utils/storage');
+    const { updateItemInBlacklist } = await import('@lume/utils/storage');
     const res = await updateItemInBlacklist(data.content, 0);
     if (res) {
       setStatus(0);
@@ -18,7 +17,7 @@ export const UserMuted = ({ data }: { data: any }) => {
   };
 
   const mute = async () => {
-    const { updateItemInBlacklist } = await import('@utils/storage');
+    const { updateItemInBlacklist } = await import('@lume/utils/storage');
     const res = await updateItemInBlacklist(data.content, 1);
     if (res) {
       setStatus(1);

src/shared/user/quoteRepost.tsx

@@ -1,7 +1,6 @@
-import { DEFAULT_AVATAR } from '@stores/constants';
-
-import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
 
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';

src/splashscreen/_default.page.route.tsx

@@ -0,0 +1 @@
+export const filesystemRoutingRoot = '/';

src/splashscreen/pages/index.page.tsx

@@ -1,8 +1,7 @@
-import { RelayContext } from '@components/relaysProvider';
-
-import { READONLY_RELAYS } from '@stores/constants';
-
-import { dateToUnix, hoursAgo } from '@utils/getDate';
+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,
@@ -11,10 +10,8 @@ import {
   getActiveAccount,
   getLastLogin,
   updateLastLogin,
-} from '@utils/storage';
-import { getParentID } from '@utils/transform';
-
-import LumeSymbol from '@assets/icons/Lume';
+} from '@lume/utils/storage';
+import { getParentID } from '@lume/utils/transform';
 
 import { useContext, useEffect, useRef } from 'react';
 import { navigate } from 'vite-plugin-ssr/client/router';
@@ -150,7 +147,7 @@ export function Page() {
       }
       clearTimeout(timeout);
     };
-  }, []);
+  }, [pool]);
 
   return (
     <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
@@ -160,7 +157,7 @@ export function Page() {
         {/* 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" />
+            <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:

src/stores/onboarding.tsx

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const onboardingAtom = atom({ pubkey: null, privkey: null, metadata: null, follows: null });

src/utils/broadcast.tsx

@@ -1,4 +1,4 @@
-import { WRITEONLY_RELAYS } from '@stores/constants';
+import { WRITEONLY_RELAYS } from '@lume/stores/constants';
 
 import { getEventHash, signEvent } from 'nostr-tools';
 

src/utils/hooks/useChannelMetadata.tsx

@@ -1,9 +1,7 @@
-import { RelayContext } from '@components/relaysProvider';
-
-import { READONLY_RELAYS } from '@stores/constants';
-
-import { updateChannelMetadata } from '@utils/storage';
-import { getChannel } from '@utils/storage';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { READONLY_RELAYS } from '@lume/stores/constants';
+import { updateChannelMetadata } from '@lume/utils/storage';
+import { getChannel } from '@lume/utils/storage';
 
 import { useCallback, useContext, useEffect, useState } from 'react';
 

src/utils/hooks/useChannelProfile.tsx

@@ -1,6 +1,5 @@
-import { RelayContext } from '@components/relaysProvider';
-
-import { READONLY_RELAYS } from '@stores/constants';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { READONLY_RELAYS } from '@lume/stores/constants';
 
 import { useContext } from 'react';
 import useSWRSubscription from 'swr/subscription';

src/utils/hooks/useDecryptMessage.tsx

@@ -1,4 +1,4 @@
-import { messageParser } from '@utils/parser';
+import { messageParser } from '@lume/utils/parser';
 
 import { nip04 } from 'nostr-tools';
 import { useCallback, useEffect, useState } from 'react';