finish restucture

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