added app-header and updated navigation bar

src-tauri/src/main.rs

@@ -20,7 +20,7 @@ fn main() {
     .setup(|app| {
       let main_window = app.get_window("main").unwrap();
       // set inset for traffic lights
-      main_window.position_traffic_lights(8.0, 16.0);
+      main_window.position_traffic_lights(8.0, 20.0);
 
       Ok(())
     })
@@ -41,7 +41,7 @@ fn main() {
     .on_window_event(|e| {
       let apply_offset = || {
         let win = e.window();
-        win.position_traffic_lights(8.0, 16.0);
+        win.position_traffic_lights(8.0, 20.0);
       };
 
       match e.event() {

src/components/columns/account/index.tsx

@@ -23,7 +23,7 @@ export default function AccountColumn() {
   }, [getAccounts]);
 
   return (
-    <div className="flex h-full flex-col items-center justify-between px-2 pt-12 pb-4">
+    <div className="flex h-full flex-col items-center justify-between px-2 pt-4 pb-4">
       <div className="flex flex-col gap-4">
         {users.map((user, index) => (
           <Account key={index} user={user} current={currentUser.id} />

src/components/columns/navigator/index.tsx

@@ -1,72 +1,74 @@
 import ActiveLink from '@components/activeLink';
-import CreatePost from '@components/columns/navigator/createPost';
-import { UserDropdownMenu } from '@components/columns/navigator/userDropdownMenu';
+import Messages from '@components/columns/navigator/messages';
 
 import { PlusIcon } from '@radix-ui/react-icons';
-import { useLocalStorage } from '@rehooks/local-storage';
 
 export default function NavigatorColumn() {
-  const [currentUser]: any = useLocalStorage('current-user');
-  const profile = JSON.parse(currentUser.metadata);
-
   return (
-    <div className="flex h-full flex-col flex-wrap justify-between overflow-hidden px-2 pt-3 pb-4">
+    <div className="flex h-full flex-col flex-wrap justify-between overflow-hidden px-2 pt-4 pb-4">
       <div className="flex flex-col gap-4">
-        {/* Create post */}
-        <div className="flex flex-col rounded-lg bg-zinc-900 ring-1 ring-white/10">
-          <div className="flex flex-col p-2">
-            <div className="flex items-center justify-between">
-              <h5 className="font-semibold leading-tight text-zinc-100">{profile.display_name || ''}</h5>
-              <UserDropdownMenu pubkey={currentUser.id} />
+        {/* Create post
+          <div className="flex flex-col rounded-lg bg-zinc-900 ring-1 ring-white/10">
+            <div className="flex flex-col p-2">
+              <div className="flex items-center justify-between">
+                <h5 className="font-semibold leading-tight text-zinc-100">{profile.display_name || ''}</h5>
+                <UserDropdownMenu pubkey={currentUser.id} />
+              </div>
+              <span className="text-sm leading-tight text-zinc-500">@{profile.username || ''}</span>
+            </div>
+            <div className="p-2">
+              <CreatePost />
             </div>
-            <span className="text-sm leading-tight text-zinc-500">@{profile.username || ''}</span>
           </div>
-          <div className="p-2">
-            <CreatePost />
-          </div>
-        </div>
+        */}
         {/* Newsfeed */}
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-1">
           <div className="flex items-center justify-between px-2">
-            <h3 className="text-sm font-bold text-zinc-400">Newsfeed</h3>
+            <h3 className="text-xs font-bold uppercase tracking-wide text-zinc-300">Newsfeed</h3>
             <button
               type="button"
               className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
             >
-              <PlusIcon className="h-3 w-3 text-zinc-400 group-hover:text-zinc-100" />
+              <PlusIcon className="h-3 w-3 text-zinc-500 group-hover:text-zinc-100" />
             </button>
           </div>
-          <div className="flex flex-col gap-1 text-zinc-500">
+          <div className="flex flex-col gap-1 text-zinc-400">
             <ActiveLink
               href={`/newsfeed/following`}
-              activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white"
-              className="flex h-10 items-center gap-1 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
+              activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
+              className="flex h-8 items-center gap-2.5 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
             >
-              <span>#</span>
+              <div className="inline-flex h-5 w-5 items-center justify-center">
+                <span className="h-4 w-3.5 rounded bg-gradient-to-br from-fuchsia-500 via-purple-300 to-pink-300"></span>
+              </div>
               <span>following</span>
             </ActiveLink>
             <ActiveLink
-              href={`/newsfeed/global`}
-              activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white"
-              className="flex h-10 items-center gap-1 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
+              href={`/newsfeed/circle`}
+              activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
+              className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900"
             >
-              <span>#</span>
-              <span>global</span>
+              <div className="inline-flex h-5 w-5 items-center justify-center">
+                <span className="h-4 w-3.5 rounded bg-gradient-to-br from-amber-500 via-orange-200 to-yellow-300"></span>
+              </div>
+              <span>circle</span>
             </ActiveLink>
           </div>
         </div>
         {/* Messages */}
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-1">
           <div className="flex items-center justify-between px-2">
-            <h3 className="text-sm font-bold text-zinc-400">Direct Messages</h3>
+            <h3 className="text-xs font-bold uppercase tracking-wide text-zinc-300">Messages</h3>
             <button
               type="button"
               className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
             >
-              <PlusIcon className="h-3 w-3 text-zinc-400 group-hover:text-zinc-100" />
+              <PlusIcon className="h-3 w-3 text-zinc-500 group-hover:text-zinc-100" />
             </button>
           </div>
-          <div></div>
+          <div className="flex flex-col">
+            <Messages />
+          </div>
         </div>
       </div>
     </div>

src/components/columns/navigator/messages/index.tsx

@@ -0,0 +1,32 @@
+import Avatar from 'boring-avatars';
+import { useState } from 'react';
+import { Config, names, uniqueNamesGenerator } from 'unique-names-generator';
+
+const config: Config = {
+  dictionaries: [names],
+};
+
+export default function Messages() {
+  const [data] = useState([...Array(15)]);
+
+  return (
+    <>
+      {data.map((item, index) => (
+        <div
+          key={index}
+          className="flex h-8 cursor-pointer items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900"
+        >
+          <Avatar
+            size={20}
+            name={uniqueNamesGenerator(config).toString()}
+            variant="beam"
+            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
+          />
+          <div>
+            <p className="text-zinc-400">{uniqueNamesGenerator(config).toString()}</p>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}

src/components/columns/navigator/userDropdownMenu.tsx

@@ -1,61 +0,0 @@
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { DotsHorizontalIcon } from '@radix-ui/react-icons';
-import { writeText } from '@tauri-apps/api/clipboard';
-import { useRouter } from 'next/router';
-import { nip19 } from 'nostr-tools';
-import { memo } from 'react';
-
-export const UserDropdownMenu = memo(function ProfileMenu({ pubkey }: { pubkey: string }) {
-  const router = useRouter();
-
-  const viewProfile = () => {
-    router.push(`/profile/${pubkey}`);
-  };
-
-  const updateProfile = () => {
-    router.push('/profile/update');
-  };
-
-  const copyPubkey = async () => {
-    const npub = nip19.npubEncode(pubkey);
-    await writeText(npub);
-  };
-
-  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <button className="rounded-lg p-1 hover:bg-zinc-800">
-          <DotsHorizontalIcon className="h-4 w-4 text-zinc-300" />
-        </button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          className="min-w-[220px] rounded-md border border-white/20 bg-zinc-800 p-1 shadow-lg shadow-black/30 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-          sideOffset={2}
-        >
-          <DropdownMenu.Item
-            onClick={() => viewProfile()}
-            className="group relative flex h-[30px] select-none items-center rounded px-1 pl-6 text-sm leading-none text-zinc-100 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-400 data-[disabled]:text-zinc-400"
-          >
-            View profile
-          </DropdownMenu.Item>
-          <DropdownMenu.Item
-            onClick={() => updateProfile()}
-            className="group relative flex h-[30px] select-none items-center rounded px-1 pl-6 text-sm leading-none text-zinc-100 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-400 data-[disabled]:text-zinc-400"
-          >
-            Update profile
-          </DropdownMenu.Item>
-          <DropdownMenu.Item
-            onClick={() => copyPubkey()}
-            className="group relative flex h-[30px] select-none items-center rounded px-1 pl-6 text-sm leading-none text-zinc-100 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-400 data-[disabled]:text-zinc-400"
-          >
-            Copy public key
-          </DropdownMenu.Item>
-          <DropdownMenu.Item className="group relative flex h-[30px] select-none items-center rounded px-1 pl-6 text-sm leading-none text-zinc-100 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-400 data-[disabled]:text-zinc-400">
-            Log out
-          </DropdownMenu.Item>
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
-  );
-});

src/layouts/newsfeed.tsx

@@ -1,21 +0,0 @@
-import AccountColumn from '@components/columns/account';
-import NavigatorColumn from '@components/columns/navigator';
-
-export default function NewsFeedLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex h-full w-full flex-row">
-      <div className="relative h-full w-[70px] shrink-0 border-r border-zinc-900">
-        <div data-tauri-drag-region className="absolute top-0 left-0 h-12 w-full" />
-        <AccountColumn />
-      </div>
-      <div className="grid grow grid-cols-4">
-        <div className="col-span-1">
-          <NavigatorColumn />
-        </div>
-        <div className="col-span-3 m-3 ml-0 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
-          <div className="h-full w-full rounded-lg">{children}</div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/layouts/withSidebar.tsx

@@ -0,0 +1,29 @@
+import AccountColumn from '@components/columns/account';
+import NavigatorColumn from '@components/columns/navigator';
+
+export default function WithSidebarLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-screen w-full flex-col">
+      <div
+        data-tauri-drag-region
+        className="flex h-11 shrink-0 items-center border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
+      >
+        <p className="w-full text-center">Header</p>
+      </div>
+      <div className="relative flex h-full w-full flex-1 flex-row">
+        <div className="relative w-[67px] shrink-0 border-r border-zinc-900">
+          <div className="absolute top-0 left-0 h-12 w-full" />
+          <AccountColumn />
+        </div>
+        <div className="grid grow grid-cols-4">
+          <div className="col-span-1 border-r border-zinc-900">
+            <NavigatorColumn />
+          </div>
+          <div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
+            <div className="h-full w-full rounded-lg">{children}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/index.tsx

@@ -40,9 +40,9 @@ export default function Page() {
         <div className="flex flex-col items-center gap-2">
           <LumeSymbol className="h-16 w-16 text-black dark:text-white" />
           <div className="text-center">
-            <h3 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Did you know?</h3>
+            <h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-zinc-100">Did you know?</h3>
             <p className="font-medium text-zinc-300 dark:text-zinc-600">
-              no one can&apos;t stop you use bitcoin and nostr
+              No one can&apos;t stop you use bitcoin and nostr
             </p>
           </div>
         </div>

src/pages/newsfeed/circle.tsx

@@ -1,5 +1,5 @@
 import BaseLayout from '@layouts/base';
-import NewsFeedLayout from '@layouts/newsfeed';
+import WithSidebarLayout from '@layouts/withSidebar';
 
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
 
@@ -22,7 +22,7 @@ Page.getLayout = function getLayout(
 ) {
   return (
     <BaseLayout>
-      <NewsFeedLayout>{page}</NewsFeedLayout>
+      <WithSidebarLayout>{page}</WithSidebarLayout>
     </BaseLayout>
   );
 };

src/pages/newsfeed/following.tsx

@@ -1,5 +1,5 @@
 import BaseLayout from '@layouts/base';
-import NewsFeedLayout from '@layouts/newsfeed';
+import WithSidebarLayout from '@layouts/withSidebar';
 
 import { DatabaseContext } from '@components/contexts/database';
 import { NoteConnector } from '@components/note/connector';
@@ -137,7 +137,7 @@ Page.getLayout = function getLayout(
 ) {
   return (
     <BaseLayout>
-      <NewsFeedLayout>{page}</NewsFeedLayout>
+      <WithSidebarLayout>{page}</WithSidebarLayout>
     </BaseLayout>
   );
 };