From ab635c0460b156760bf210b3ecc19b9b8e349637 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sat, 22 Apr 2023 09:26:18 +0700
Subject: [PATCH] added create channel page and refactor layout

---
 src/app/nostr/channel/layout.tsx        | 14 ++++++++++++
 src/app/nostr/chat/layout.tsx           | 14 ++++++++++++
 src/app/nostr/create-channel/layout.tsx | 14 ++++++++++++
 src/app/nostr/create-channel/page.tsx   |  8 +++++++
 src/app/nostr/layout.tsx                | 18 +--------------
 src/app/nostr/newsfeed/layout.tsx       | 22 +++++++++++++++++++
 src/app/nostr/user/layout.tsx           | 14 ++++++++++++
 src/components/channels/channelList.tsx | 29 ++++++++++++-------------
 src/components/multiAccounts/index.tsx  |  2 +-
 9 files changed, 102 insertions(+), 33 deletions(-)
 create mode 100644 src/app/nostr/channel/layout.tsx
 create mode 100644 src/app/nostr/chat/layout.tsx
 create mode 100644 src/app/nostr/create-channel/layout.tsx
 create mode 100644 src/app/nostr/create-channel/page.tsx
 create mode 100644 src/app/nostr/newsfeed/layout.tsx
 create mode 100644 src/app/nostr/user/layout.tsx

diff --git a/src/app/nostr/channel/layout.tsx b/src/app/nostr/channel/layout.tsx
new file mode 100644
index 00000000..a1f2e612
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/nostr/chat/layout.tsx b/src/app/nostr/chat/layout.tsx
new file mode 100644
index 00000000..e9cc8953
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/nostr/create-channel/layout.tsx b/src/app/nostr/create-channel/layout.tsx
new file mode 100644
index 00000000..64aa6c53
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/nostr/create-channel/page.tsx b/src/app/nostr/create-channel/page.tsx
new file mode 100644
index 00000000..ed162df8
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/nostr/layout.tsx b/src/app/nostr/layout.tsx
index 0da145e3..ba210383 100644
--- a/src/app/nostr/layout.tsx
+++ b/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>
diff --git a/src/app/nostr/newsfeed/layout.tsx b/src/app/nostr/newsfeed/layout.tsx
new file mode 100644
index 00000000..834f131b
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/nostr/user/layout.tsx b/src/app/nostr/user/layout.tsx
new file mode 100644
index 00000000..b11d422f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/channels/channelList.tsx b/src/components/channels/channelList.tsx
index e6ecb109..f09f3377 100644
--- a/src/components/channels/channelList.tsx
+++ b/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>
   );
 }
diff --git a/src/components/multiAccounts/index.tsx b/src/components/multiAccounts/index.tsx
index 853b1623..b305c6b3 100644
--- a/src/components/multiAccounts/index.tsx
+++ b/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" />