added create channel page and refactor layout

src/app/nostr/channel/layout.tsx

@@ -0,0 +1,14 @@
+import Navigation from '@components/navigation';
+
+export default function ChannelLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="grid w-full grid-cols-4">
+      <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:mr-1.5">
+        <div className="h-full w-full rounded-lg">{children}</div>
+      </div>
+    </div>
+  );
+}

src/app/nostr/chat/layout.tsx

@@ -0,0 +1,14 @@
+import Navigation from '@components/navigation';
+
+export default function ChatLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="grid w-full grid-cols-4">
+      <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:mr-1.5">
+        <div className="h-full w-full rounded-lg">{children}</div>
+      </div>
+    </div>
+  );
+}

src/app/nostr/create-channel/layout.tsx

@@ -0,0 +1,14 @@
+import Navigation from '@components/navigation';
+
+export default function CreateChannelLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="grid w-full grid-cols-4">
+      <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:mr-1.5">
+        <div className="h-full w-full rounded-lg">{children}</div>
+      </div>
+    </div>
+  );
+}

src/app/nostr/create-channel/page.tsx

@@ -0,0 +1,8 @@
+export default function Page() {
+  return (
+    <div>
+      <h1>My page</h1>
+      <p>My page content</p>
+    </div>
+  );
+}

src/app/nostr/layout.tsx

@@ -1,6 +1,5 @@
 import AppHeader from '@components/appHeader';
 import MultiAccounts from '@components/multiAccounts';
-import Navigation from '@components/navigation';
 
 export default function NostrLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -16,22 +15,7 @@ export default function NostrLayout({ children }: { children: React.ReactNode })
           <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>
+          {children}
         </div>
       </div>
     </div>

src/app/nostr/newsfeed/layout.tsx

@@ -0,0 +1,22 @@
+import Navigation from '@components/navigation';
+
+export default function ChannelLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <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>
+  );
+}

src/app/nostr/user/layout.tsx

@@ -0,0 +1,14 @@
+import Navigation from '@components/navigation';
+
+export default function UserLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="grid w-full grid-cols-4">
+      <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:mr-1.5">
+        <div className="h-full w-full rounded-lg">{children}</div>
+      </div>
+    </div>
+  );
+}

src/components/channels/channelList.tsx

@@ -1,8 +1,9 @@
 import { ChannelListItem } from '@components/channels/channelListItem';
-import { CreateChannelModal } from '@components/channels/createChannelModal';
 
 import { DEFAULT_CHANNELS } from '@stores/constants';
 
+import { Plus } from 'iconoir-react';
+import Link from 'next/link';
 import { useState } from 'react';
 
 export default function ChannelList() {
@@ -10,23 +11,21 @@ export default function ChannelList() {
 
   return (
     <div className="flex flex-col gap-px">
-      {/*
-      <Link
-        href="/explore/channels"
-        className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
-      >
-        <div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800">
-          <Globe width={12} height={12} className="text-zinc-500" />
-        </div>
-        <div>
-          <h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Browse channels</h5>
-        </div>
-      </Link>
-      */}
       {list.map((item) => (
         <ChannelListItem key={item.event_id} data={item} />
       ))}
-      <CreateChannelModal />
+      <Link
+        prefetch={false}
+        href="/nostr/create-channel"
+        className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
+      >
+        <div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800">
+          <Plus width={12} height={12} className="text-zinc-500" />
+        </div>
+        <div>
+          <h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Add a new channel</h5>
+        </div>
+      </Link>
     </div>
   );
 }

src/components/multiAccounts/index.tsx

@@ -40,7 +40,7 @@ export default function MultiAccounts() {
       <div className="flex flex-col gap-4">
         <Link
           prefetch={false}
-          href="/explore"
+          href="/nostr/newsfeed/following"
           className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg bg-zinc-900 hover:bg-zinc-800"
         >
           <LumeSymbol className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" />