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