finish restucture

src/app/channel/_default.page.tsx

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

src/app/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/app/channel/pages/index.page.tsx

@@ -0,0 +1,105 @@
+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('@lume/shared/channels/messages'));
+
+let mutedList: any = [];
+let activeMutedList: any = [];
+let activeHidedList: any = [];
+
+if (typeof window !== 'undefined') {
+  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);
+  mutedList = await getBlacklist(activeAccount.id, 44);
+}
+
+export function Page() {
+  const pageContext = usePageContext();
+  const searchParams: any = pageContext.urlParsed.search;
+
+  const id = searchParams.id;
+  const channelPubkey = searchParams.pubkey;
+
+  const pool: any = useContext(RelayContext);
+  const activeAccount: any = useContext(AccountContext);
+
+  const setChannelMessages = useSetAtom(channelMessagesAtom);
+  const resetChannelMessages = useResetAtom(channelMessagesAtom);
+  const resetChannelReply = useResetAtom(channelReplyAtom);
+
+  const now = useRef(new Date());
+  const hided = arrayObjToPureArr(activeHidedList);
+  const muted = arrayObjToPureArr(activeMutedList);
+
+  useSWRSubscription(id, () => {
+    // reset channel reply
+    resetChannelReply();
+    // reset channel messages
+    resetChannelMessages();
+    // subscribe for new messages
+    const unsubscribe = pool.subscribe(
+      [
+        {
+          '#e': [id],
+          kinds: [42],
+          since: dateToUnix(hoursAgo(48, now.current)),
+        },
+      ],
+      FULL_RELAYS,
+      (event: { kind: number; tags: string[][]; pubkey: string; id: string }) => {
+        if (muted.includes(event.pubkey)) {
+          console.log('muted');
+        } else if (hided.includes(event.id)) {
+          console.log('hided');
+        } else {
+          setChannelMessages((prev) => [...prev, event]);
+        }
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  });
+
+  return (
+    <NewsfeedLayout>
+      <div className="flex h-full flex-col justify-between gap-2">
+        <div className="flex h-11 w-full shrink-0 items-center justify-between">
+          <div>
+            <ChannelProfile id={id} pubkey={channelPubkey} />
+          </div>
+          <div className="flex items-center gap-2">
+            <ChannelBlackList blacklist={mutedList} />
+            {activeAccount.pubkey === channelPubkey && <UpdateChannelModal id={id} />}
+          </div>
+        </div>
+        <div className="relative flex w-full flex-1 flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
+          <Suspense fallback={<p>Loading...</p>}>
+            <ChannelMessages />
+          </Suspense>
+          <div className="shrink-0 p-3">
+            <FormChannel eventId={id} />
+          </div>
+        </div>
+      </div>
+    </NewsfeedLayout>
+  );
+}

src/app/chat/_default.page.tsx

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

src/app/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/app/chat/pages/index.page.tsx

@@ -0,0 +1,86 @@
+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';
+
+export function Page() {
+  const pageContext = usePageContext();
+  const searchParams: any = pageContext.urlParsed.search;
+
+  const pubkey = searchParams.pubkey;
+
+  const pool: any = useContext(RelayContext);
+  const activeAccount: any = useContext(AccountContext);
+
+  const { data, error } = useSWRSubscription(
+    pubkey
+      ? [
+          {
+            kinds: [4],
+            authors: [pubkey],
+            '#p': [activeAccount.pubkey],
+          },
+          {
+            kinds: [4],
+            authors: [activeAccount.pubkey],
+            '#p': [pubkey],
+          },
+        ]
+      : null,
+    (key, { next }) => {
+      const unsubscribe = pool.subscribe(key, FULL_RELAYS, (event: any) => {
+        next(null, (prev) => (prev ? [event, ...prev] : [event]));
+      });
+
+      return () => {
+        unsubscribe();
+      };
+    }
+  );
+
+  return (
+    <NewsfeedLayout>
+      <div className="relative flex h-full w-full flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
+        <div className="scrollbar-hide flex h-full w-full flex-col-reverse overflow-y-auto">
+          {error && <div>failed to load</div>}
+          {!data ? (
+            <div className="flex h-min min-h-min w-full animate-pulse select-text flex-col px-5 py-2 hover:bg-black/20">
+              <div className="flex flex-col">
+                <div className="group flex items-start gap-3">
+                  <div className="bg-zinc relative h-9 w-9 shrink rounded-md bg-zinc-700"></div>
+                  <div className="flex w-full flex-1 items-start justify-between">
+                    <div className="flex items-baseline gap-2 text-sm">
+                      <span className="h-2 w-16 bg-zinc-700"></span>
+                    </div>
+                  </div>
+                </div>
+                <div className="-mt-[17px] pl-[48px]">
+                  <div className="h-3 w-full bg-zinc-700"></div>
+                </div>
+              </div>
+            </div>
+          ) : (
+            sortMessages(data).map((message) => (
+              <MessageListItem
+                key={message.id}
+                data={message}
+                userPubkey={activeAccount.pubkey}
+                userPrivkey={activeAccount.privkey}
+              />
+            ))
+          )}
+        </div>
+        <div className="shrink-0 p-3">
+          <FormChat receiverPubkey={pubkey} />
+        </div>
+      </div>
+    </NewsfeedLayout>
+  );
+}

src/app/index/_default.page.route.tsx

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

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

@@ -0,0 +1,189 @@
+import LumeIcon from '@lume/shared/icons/lume';
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { READONLY_RELAYS } from '@lume/stores/constants';
+import { dateToUnix, hoursAgo } from '@lume/utils/getDate';
+import {
+  addToBlacklist,
+  countTotalNotes,
+  createChat,
+  createNote,
+  getActiveAccount,
+  getLastLogin,
+  updateLastLogin,
+} from '@lume/utils/storage';
+import { getParentID } from '@lume/utils/transform';
+
+import { useContext, useEffect, useRef } from 'react';
+import { navigate } from 'vite-plugin-ssr/client/router';
+
+export function Page() {
+  const pool: any = useContext(RelayContext);
+  const now = useRef(new Date());
+
+  useEffect(() => {
+    let unsubscribe: () => void;
+    let timeout: any;
+
+    const fetchInitalData = async (account: { pubkey: string; id: number }, tags: string) => {
+      const lastLogin = await getLastLogin();
+      const notes = await countTotalNotes();
+
+      const follows = JSON.parse(tags);
+      const query = [];
+
+      let since: number;
+
+      if (notes.total === 0) {
+        since = dateToUnix(hoursAgo(24, now.current));
+      } else {
+        if (parseInt(lastLogin) > 0) {
+          since = parseInt(lastLogin);
+        } else {
+          since = dateToUnix(hoursAgo(24, now.current));
+        }
+      }
+
+      // kind 1 (notes) query
+      query.push({
+        kinds: [1, 6],
+        authors: follows,
+        since: since,
+        until: dateToUnix(now.current),
+      });
+
+      // kind 4 (chats) query
+      query.push({
+        kinds: [4],
+        '#p': [account.pubkey],
+        since: 0,
+        until: dateToUnix(now.current),
+      });
+
+      // kind 43, 43 (mute user, hide message) query
+      query.push({
+        authors: [account.pubkey],
+        kinds: [43, 44],
+        since: 0,
+        until: dateToUnix(now.current),
+      });
+
+      // subscribe relays
+      unsubscribe = pool.subscribe(
+        query,
+        READONLY_RELAYS,
+        (event: { kind: number; tags: string[]; id: string; pubkey: string; content: string; created_at: number }) => {
+          switch (event.kind) {
+            // short text note
+            case 1:
+              const parentID = getParentID(event.tags, event.id);
+              // insert event to local database
+              createNote(
+                event.id,
+                account.id,
+                event.pubkey,
+                event.kind,
+                event.tags,
+                event.content,
+                event.created_at,
+                parentID
+              );
+              break;
+            // chat
+            case 4:
+              if (event.pubkey !== account.pubkey) {
+                createChat(account.id, event.pubkey, event.created_at);
+              }
+              break;
+            // repost
+            case 6:
+              createNote(
+                event.id,
+                account.id,
+                event.pubkey,
+                event.kind,
+                event.tags,
+                event.content,
+                event.created_at,
+                event.id
+              );
+              break;
+            // hide message (channel only)
+            case 43:
+              if (event.tags[0][0] === 'e') {
+                addToBlacklist(account.id, event.tags[0][1], 43, 1);
+              }
+            // mute user (channel only)
+            case 44:
+              if (event.tags[0][0] === 'p') {
+                addToBlacklist(account.id, event.tags[0][1], 44, 1);
+              }
+            default:
+              break;
+          }
+        },
+        undefined,
+        () => {
+          updateLastLogin(dateToUnix(now.current));
+          timeout = setTimeout(() => {
+            navigate('/app/newsfeed/following', { overwriteLastHistoryEntry: true });
+          }, 5000);
+        }
+      );
+    };
+
+    getActiveAccount()
+      .then((res: any) => {
+        if (res) {
+          fetchInitalData(res, res.follows);
+        } else {
+          navigate('/auth', { overwriteLastHistoryEntry: true });
+        }
+      })
+      .catch(console.error);
+
+    return () => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+      clearTimeout(timeout);
+    };
+  }, [pool]);
+
+  return (
+    <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
+      <div className="relative h-full overflow-hidden">
+        {/* dragging area */}
+        <div data-tauri-drag-region className="absolute left-0 top-0 z-20 h-16 w-full bg-transparent" />
+        {/* end dragging area */}
+        <div className="relative flex h-full flex-col items-center justify-center">
+          <div className="flex flex-col items-center gap-2">
+            <LumeIcon className="h-16 w-16 text-black dark:text-white" />
+            <div className="text-center">
+              <h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
+                Here&apos;s an interesting fact:
+              </h3>
+              <p className="font-medium text-zinc-300 dark:text-zinc-600">
+                Bitcoin and Nostr can be used by anyone, and no one can stop you!
+              </p>
+            </div>
+          </div>
+          <div className="absolute bottom-16 left-1/2 -translate-x-1/2 transform">
+            <svg
+              className="h-5 w-5 animate-spin text-black dark:text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/newsfeed/_default.page.tsx

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

src/app/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/app/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/app/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>
+  );
+}