use route group

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">

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>

src/app/channels/layout.tsx

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

src/app/newsfeed/layout.tsx

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

src/app/users/layout.tsx

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

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 segments = useSelectedLayoutSegments();
-  const isActive = href.includes(segment);
+  const isActive = href.includes(segments[1]);
 
   return (
     <Link href={href} className={`${className}` + ' ' + (isActive ? `${activeClassName}` : '')}>

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>
+        <div>{collector && <EventCollector />}</div>
-          <EventCollector />
-        </div>
       </div>
     </div>
   );