From 2b0a4e240272c6e28b46a56019b9e6c3b2b0cd4f Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Mon, 17 Apr 2023 16:36:27 +0700
Subject: [PATCH] use route group

---
 src/app/{ => (default)}/page.tsx              |  0
 src/app/{ => (nostr)}/channels/[id]/page.tsx  |  0
 src/app/{ => (nostr)}/channels/page.tsx       |  0
 src/app/{ => (nostr)}/chats/[pubkey]/page.tsx |  0
 src/app/{ => (nostr)}/explore/page.tsx        |  0
 src/app/{chats => (nostr)}/layout.tsx         |  4 +-
 src/app/{ => (nostr)}/newsfeed/[id]/page.tsx  |  0
 .../{ => (nostr)}/newsfeed/circle/page.tsx    |  0
 .../{ => (nostr)}/newsfeed/following/page.tsx |  0
 src/app/{ => (nostr)}/users/[id]/page.tsx     |  0
 .../create/[...slug]/page.tsx                 |  0
 .../create/page.tsx                           |  0
 .../{onboarding => (onboarding)}/layout.tsx   |  6 ++-
 .../login/[...slug]/page.tsx                  |  0
 .../login/page.tsx                            |  0
 .../{ => (onboarding)}/onboarding/page.tsx    |  0
 src/app/channels/layout.tsx                   | 39 -------------------
 src/app/newsfeed/layout.tsx                   | 39 -------------------
 src/app/users/layout.tsx                      | 39 -------------------
 src/components/activeLink.tsx                 |  6 +--
 src/components/appHeader/index.tsx            |  6 +--
 21 files changed, 12 insertions(+), 127 deletions(-)
 rename src/app/{ => (default)}/page.tsx (100%)
 rename src/app/{ => (nostr)}/channels/[id]/page.tsx (100%)
 rename src/app/{ => (nostr)}/channels/page.tsx (100%)
 rename src/app/{ => (nostr)}/chats/[pubkey]/page.tsx (100%)
 rename src/app/{ => (nostr)}/explore/page.tsx (100%)
 rename src/app/{chats => (nostr)}/layout.tsx (94%)
 rename src/app/{ => (nostr)}/newsfeed/[id]/page.tsx (100%)
 rename src/app/{ => (nostr)}/newsfeed/circle/page.tsx (100%)
 rename src/app/{ => (nostr)}/newsfeed/following/page.tsx (100%)
 rename src/app/{ => (nostr)}/users/[id]/page.tsx (100%)
 rename src/app/{onboarding => (onboarding)}/create/[...slug]/page.tsx (100%)
 rename src/app/{onboarding => (onboarding)}/create/page.tsx (100%)
 rename src/app/{onboarding => (onboarding)}/layout.tsx (81%)
 rename src/app/{onboarding => (onboarding)}/login/[...slug]/page.tsx (100%)
 rename src/app/{onboarding => (onboarding)}/login/page.tsx (100%)
 rename src/app/{ => (onboarding)}/onboarding/page.tsx (100%)
 delete mode 100644 src/app/channels/layout.tsx
 delete mode 100644 src/app/newsfeed/layout.tsx
 delete mode 100644 src/app/users/layout.tsx

diff --git a/src/app/page.tsx b/src/app/(default)/page.tsx
similarity index 100%
rename from src/app/page.tsx
rename to src/app/(default)/page.tsx
diff --git a/src/app/channels/[id]/page.tsx b/src/app/(nostr)/channels/[id]/page.tsx
similarity index 100%
rename from src/app/channels/[id]/page.tsx
rename to src/app/(nostr)/channels/[id]/page.tsx
diff --git a/src/app/channels/page.tsx b/src/app/(nostr)/channels/page.tsx
similarity index 100%
rename from src/app/channels/page.tsx
rename to src/app/(nostr)/channels/page.tsx
diff --git a/src/app/chats/[pubkey]/page.tsx b/src/app/(nostr)/chats/[pubkey]/page.tsx
similarity index 100%
rename from src/app/chats/[pubkey]/page.tsx
rename to src/app/(nostr)/chats/[pubkey]/page.tsx
diff --git a/src/app/explore/page.tsx b/src/app/(nostr)/explore/page.tsx
similarity index 100%
rename from src/app/explore/page.tsx
rename to src/app/(nostr)/explore/page.tsx
diff --git a/src/app/chats/layout.tsx b/src/app/(nostr)/layout.tsx
similarity index 94%
rename from src/app/chats/layout.tsx
rename to src/app/(nostr)/layout.tsx
index d4c9f183..0da145e3 100644
--- a/src/app/chats/layout.tsx
+++ b/src/app/(nostr)/layout.tsx
@@ -2,7 +2,7 @@ import AppHeader from '@components/appHeader';
 import MultiAccounts from '@components/multiAccounts';
 import Navigation from '@components/navigation';
 
-export default function ChatsLayout({ children }: { children: React.ReactNode }) {
+export default function NostrLayout({ 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">
@@ -10,7 +10,7 @@ export default function ChatsLayout({ children }: { children: React.ReactNode })
           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 />
+          <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">
diff --git a/src/app/newsfeed/[id]/page.tsx b/src/app/(nostr)/newsfeed/[id]/page.tsx
similarity index 100%
rename from src/app/newsfeed/[id]/page.tsx
rename to src/app/(nostr)/newsfeed/[id]/page.tsx
diff --git a/src/app/newsfeed/circle/page.tsx b/src/app/(nostr)/newsfeed/circle/page.tsx
similarity index 100%
rename from src/app/newsfeed/circle/page.tsx
rename to src/app/(nostr)/newsfeed/circle/page.tsx
diff --git a/src/app/newsfeed/following/page.tsx b/src/app/(nostr)/newsfeed/following/page.tsx
similarity index 100%
rename from src/app/newsfeed/following/page.tsx
rename to src/app/(nostr)/newsfeed/following/page.tsx
diff --git a/src/app/users/[id]/page.tsx b/src/app/(nostr)/users/[id]/page.tsx
similarity index 100%
rename from src/app/users/[id]/page.tsx
rename to src/app/(nostr)/users/[id]/page.tsx
diff --git a/src/app/onboarding/create/[...slug]/page.tsx b/src/app/(onboarding)/create/[...slug]/page.tsx
similarity index 100%
rename from src/app/onboarding/create/[...slug]/page.tsx
rename to src/app/(onboarding)/create/[...slug]/page.tsx
diff --git a/src/app/onboarding/create/page.tsx b/src/app/(onboarding)/create/page.tsx
similarity index 100%
rename from src/app/onboarding/create/page.tsx
rename to src/app/(onboarding)/create/page.tsx
diff --git a/src/app/onboarding/layout.tsx b/src/app/(onboarding)/layout.tsx
similarity index 81%
rename from src/app/onboarding/layout.tsx
rename to src/app/(onboarding)/layout.tsx
index e36675e9..d8acb346 100644
--- a/src/app/onboarding/layout.tsx
+++ b/src/app/(onboarding)/layout.tsx
@@ -1,3 +1,5 @@
+import AppHeader from '@components/appHeader';
+
 export default function OnboardingLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
@@ -5,7 +7,9 @@ export default function OnboardingLayout({ children }: { children: React.ReactNo
         <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"
-        ></div>
+        >
+          <AppHeader collector={false} />
+        </div>
         <div className="relative flex min-h-0 w-full flex-1">{children}</div>
       </div>
     </div>
diff --git a/src/app/onboarding/login/[...slug]/page.tsx b/src/app/(onboarding)/login/[...slug]/page.tsx
similarity index 100%
rename from src/app/onboarding/login/[...slug]/page.tsx
rename to src/app/(onboarding)/login/[...slug]/page.tsx
diff --git a/src/app/onboarding/login/page.tsx b/src/app/(onboarding)/login/page.tsx
similarity index 100%
rename from src/app/onboarding/login/page.tsx
rename to src/app/(onboarding)/login/page.tsx
diff --git a/src/app/onboarding/page.tsx b/src/app/(onboarding)/onboarding/page.tsx
similarity index 100%
rename from src/app/onboarding/page.tsx
rename to src/app/(onboarding)/onboarding/page.tsx
diff --git a/src/app/channels/layout.tsx b/src/app/channels/layout.tsx
deleted file mode 100644
index da513f42..00000000
--- a/src/app/channels/layout.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import AppHeader from '@components/appHeader';
-import MultiAccounts from '@components/multiAccounts';
-import Navigation from '@components/navigation';
-
-export default function ChannelsLayout({ 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>
-  );
-}
diff --git a/src/app/newsfeed/layout.tsx b/src/app/newsfeed/layout.tsx
deleted file mode 100644
index 1aa8e3ea..00000000
--- a/src/app/newsfeed/layout.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import AppHeader from '@components/appHeader';
-import MultiAccounts from '@components/multiAccounts';
-import Navigation from '@components/navigation';
-
-export default function Layout({ 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>
-  );
-}
diff --git a/src/app/users/layout.tsx b/src/app/users/layout.tsx
deleted file mode 100644
index 7b83fff6..00000000
--- a/src/app/users/layout.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import AppHeader from '@components/appHeader';
-import MultiAccounts from '@components/multiAccounts';
-import Navigation from '@components/navigation';
-
-export default function UsersLayout({ 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>
-  );
-}
diff --git a/src/components/activeLink.tsx b/src/components/activeLink.tsx
index 844a6e32..e215c144 100644
--- a/src/components/activeLink.tsx
+++ b/src/components/activeLink.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { useSelectedLayoutSegment } from 'next/navigation';
+import { useSelectedLayoutSegments } from 'next/navigation';
 
 export const ActiveLink = ({
   href,
@@ -14,8 +14,8 @@ export const ActiveLink = ({
   activeClassName: string;
   children: React.ReactNode;
 }) => {
-  const segment = useSelectedLayoutSegment();
-  const isActive = href.includes(segment);
+  const segments = useSelectedLayoutSegments();
+  const isActive = href.includes(segments[1]);
 
   return (
     <Link href={href} className={`${className}` + ' ' + (isActive ? `${activeClassName}` : '')}>
diff --git a/src/components/appHeader/index.tsx b/src/components/appHeader/index.tsx
index 1a8c0314..4c72fca8 100644
--- a/src/components/appHeader/index.tsx
+++ b/src/components/appHeader/index.tsx
@@ -8,15 +8,13 @@ const EventCollector = dynamic(() => import('@components/eventCollector'), {
   ssr: false,
 });
 
-export default function AppHeader() {
+export default function AppHeader({ collector }: { collector: boolean }) {
   return (
     <div data-tauri-drag-region className="flex h-full w-full flex-1 items-center px-2">
       <AppActions />
       <div data-tauri-drag-region className="flex h-full w-full items-center justify-between">
         <div className="flex h-full items-center divide-x divide-zinc-900 px-4 pt-px"></div>
-        <div>
-          <EventCollector />
-        </div>
+        <div>{collector && <EventCollector />}</div>
       </div>
     </div>
   );