updated navigator column

src/components/columns/navigator/index.tsx

@@ -1,63 +1,13 @@
-import ActiveLink from '@components/activeLink';
 import Messages from '@components/columns/navigator/messages';
-
-import { PlusIcon } from '@radix-ui/react-icons';
-import useLocalStorage from '@rehooks/local-storage';
+import Newsfeed from '@components/columns/navigator/newsfeed';
 
 export default function NavigatorColumn() {
-  const [follows] = useLocalStorage('follows');
-
   return (
-    <div className="flex h-full flex-col gap-4 pt-4">
+    <div className="relative flex h-full flex-col gap-4 pt-4">
       {/* Newsfeed */}
-      <div className="flex flex-col gap-1 px-2">
-        <div className="flex items-center justify-between px-2">
-          <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-500 group-hover:text-zinc-100" />
-          </button>
-        </div>
-        <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 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"
-          >
-            <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/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"
-          >
-            <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>
+      <Newsfeed />
       {/* Messages */}
-      <div className="flex flex-col gap-1 px-2">
-        <div className="flex items-center justify-between px-2">
-          <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-500 group-hover:text-zinc-100" />
-          </button>
-        </div>
-        <div className="flex flex-col">
-          <Messages data={follows} />
-        </div>
-      </div>
+      <Messages />
     </div>
   );
 }

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

@@ -1,15 +1,34 @@
-import { UserMini } from '@components/user/mini';
+import { MessageList } from '@components/columns/navigator/messages/list';
 
-import { Key } from 'react';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { ChevronUpIcon } from '@radix-ui/react-icons';
+import useLocalStorage from '@rehooks/local-storage';
+import { useState } from 'react';
 
-export default function Messages({ data }: { data: any }) {
-  console.log(data);
+export default function Messages() {
+  const [open, setOpen] = useState(true);
+  const [follows] = useLocalStorage('follows');
 
   return (
-    <>
-      {data.map((item: string, index: Key) => (
-        <UserMini key={index} pubkey={item} />
-      ))}
-    </>
+    <Collapsible.Root open={open} onOpenChange={setOpen}>
+      <div className="flex flex-col gap-1 px-2 pb-8">
+        <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 rounded-md py-1 px-2 hover:bg-zinc-900">
+          <button
+            type="button"
+            className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
+              open ? 'rotate-180' : ''
+            }`}
+          >
+            <ChevronUpIcon className="h-4 w-4 text-zinc-500" />
+          </button>
+          <h3 className="bg-gradient-to-r from-red-300 via-pink-100 to-blue-300 bg-clip-text text-xs font-bold uppercase tracking-wide text-transparent">
+            Messages
+          </h3>
+        </Collapsible.Trigger>
+        <Collapsible.Content className="flex flex-col">
+          <MessageList data={follows} />
+        </Collapsible.Content>
+      </div>
+    </Collapsible.Root>
   );
 }

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

@@ -0,0 +1,13 @@
+import { UserMini } from '@components/user/mini';
+
+import { Key, memo } from 'react';
+
+export const MessageList = memo(function MessageList({ data }: { data: any }) {
+  return (
+    <>
+      {data.map((item: string, index: Key) => (
+        <UserMini key={index} pubkey={item} />
+      ))}
+    </>
+  );
+});

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

@@ -0,0 +1,51 @@
+import ActiveLink from '@components/activeLink';
+
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { ChevronUpIcon } from '@radix-ui/react-icons';
+import { useState } from 'react';
+
+export default function Newsfeed() {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <Collapsible.Root open={open} onOpenChange={setOpen}>
+      <div className="flex flex-col px-2">
+        <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 rounded-md py-1 px-2 hover:bg-zinc-900">
+          <button
+            type="button"
+            className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
+              open ? 'rotate-180' : ''
+            }`}
+          >
+            <ChevronUpIcon className="h-4 w-4 text-zinc-500" />
+          </button>
+          <h3 className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-xs font-bold uppercase tracking-wide text-transparent">
+            Newsfeed
+          </h3>
+        </Collapsible.Trigger>
+        <Collapsible.Content 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 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"
+          >
+            <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/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"
+          >
+            <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>
+        </Collapsible.Content>
+      </div>
+    </Collapsible.Root>
+  );
+}

src/components/user/mini.tsx

@@ -53,7 +53,7 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
 
   return (
     <div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
-      <div className="relative h-5 w-5 overflow-hidden rounded-full">
+      <div className="relative h-5 w-5 shrink-0 overflow-hidden rounded-full">
         {profile.picture ? (
           <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
         ) : (
@@ -65,8 +65,8 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
           />
         )}
       </div>
-      <div className="flex flex-col">
-        <p className="leading-tight text-zinc-300">
+      <div className="inline-flex w-full flex-1 flex-col overflow-hidden">
+        <p className="truncate leading-tight text-zinc-300">
           {profile.display_name ? profile.display_name : truncate(pubkey, 16, ' .... ')}
         </p>
       </div>