migrated to nextjs 13 app dir

src/app/chats/[pubkey]/page.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { MessageList } from '@components/chats/messageList';
+import FormChat from '@components/form/chat';
+import { RelayContext } from '@components/relaysProvider';
+
+import useLocalStorage from '@rehooks/local-storage';
+import { useContext, useEffect, useState } from 'react';
+
+export default function Page({ params }: { params: { pubkey: string } }) {
+  const [pool, relays]: any = useContext(RelayContext);
+
+  const [activeAccount]: any = useLocalStorage('activeAccount', {});
+  const [messages, setMessages] = useState([]);
+
+  useEffect(() => {
+    const unsubscribe = pool.subscribe(
+      [
+        {
+          kinds: [4],
+          authors: [params.pubkey],
+          '#p': [activeAccount.pubkey],
+        },
+        {
+          kinds: [4],
+          authors: [activeAccount.pubkey],
+          '#p': [params.pubkey],
+        },
+      ],
+      relays,
+      (event: any) => {
+        setMessages((messages) => [event, ...messages]);
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [pool, relays, params.pubkey, activeAccount.pubkey]);
+
+  return (
+    <div className="flex h-full w-full flex-col justify-between">
+      <MessageList data={messages.sort((a, b) => a.created_at - b.created_at)} />
+      <div className="shrink-0 p-3">
+        <FormChat receiverPubkey={params.pubkey} />
+      </div>
+    </div>
+  );
+}

src/app/chats/layout.tsx

@@ -0,0 +1,39 @@
+import AppHeader from '@components/appHeader';
+import MultiAccounts from '@components/multiAccounts';
+import Navigation from '@components/navigation';
+
+export default function ChatsLayout({ 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 />
+        </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 rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:mr-1.5">
+              <div className="h-full w-full rounded-lg">{children}</div>
+            </div>
+            <div className="col-span-3 m-3 hidden overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:ml-1.5 xl:flex">
+              <div className="flex h-full w-full items-center justify-center">
+                <p className="select-text p-8 text-center text-zinc-400">
+                  This feature hasn&apos;t implemented yet, so resize Lume to the initial size for a better experience.
+                  I&apos;m sorry for this inconvenience, and I swear I will add it soon 😁
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}