updated navigator column

2024-09-18 03:03:31 +00:00 · 2023-03-16 08:18:04 +07:00 · 2023-03-16 08:18:04 +07:00 · e5bd58eca8
commit e5bd58eca8
parent 58fb8e0a33
9 changed files with 132 additions and 73 deletions
--- a/package.json
+++ b/package.json
@ -12,6 +12,7 @@
    "**/*": "prettier --write --ignore-unknown"
  },
  "dependencies": {
+    "@radix-ui/react-collapsible": "^1.0.2",
    "@radix-ui/react-dialog": "^1.0.3",
    "@radix-ui/react-dropdown-menu": "^2.0.4",
    "@radix-ui/react-icons": "^1.2.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -1,6 +1,7 @@
 lockfileVersion: 5.4

 specifiers:
+  '@radix-ui/react-collapsible': ^1.0.2
  '@radix-ui/react-dialog': ^1.0.3
  '@radix-ui/react-dropdown-menu': ^2.0.4
  '@radix-ui/react-icons': ^1.2.0
@ -52,6 +53,7 @@ specifiers:
  ws: ^8.13.0

 dependencies:
+  '@radix-ui/react-collapsible': 1.0.2_biqbaboplfbrettd7655fr4n2y
  '@radix-ui/react-dialog': 1.0.3_zula6vjvt3wdocc4mwcxqa6nzi
  '@radix-ui/react-dropdown-menu': 2.0.4_zula6vjvt3wdocc4mwcxqa6nzi
  '@radix-ui/react-icons': 1.2.0_react@18.2.0
@ -737,6 +739,26 @@ packages:
      react-dom: 18.2.0_react@18.2.0
    dev: false

+  /@radix-ui/react-collapsible/1.0.2_biqbaboplfbrettd7655fr4n2y:
+    resolution:
+      { integrity: sha512-QNiDT6Au8jUU0K1WV+HEd4loH7C5CKQjeXxskwqyiyAkyCmW7qlQM5vSSJCIoQC+OVPyhgafSmGudRP8Qm1/gA== }
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-id': 1.0.0_react@18.2.0
+      '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
  /@radix-ui/react-collection/1.0.2_biqbaboplfbrettd7655fr4n2y:
    resolution:
      { integrity: sha512-s8WdQQ6wNXpaxdZ308KSr8fEWGrg4un8i4r/w7fhiS4ElRNjk5rRcl0/C6TANG2LvLOGIxtzo/jAg6Qf73TEBw== }
--- a/src/components/columns/navigator/index.tsx
+++ b/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>
  );
 }
--- a/src/components/columns/navigator/messages/index.tsx
+++ b/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>
  );
 }
--- a/src/components/columns/navigator/messages/list.tsx
+++ b/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} />
+      ))}
+    </>
+  );
+});
--- a/src/components/columns/navigator/newsfeed/index.tsx
+++ b/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>
+  );
+}
--- a/src/components/user/mini.tsx
+++ b/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>
--- a/src/layouts/withSidebar.tsx
+++ b/src/layouts/withSidebar.tsx
@ -11,13 +11,13 @@ export default function WithSidebarLayout({ children }: { children: React.ReactN
      >
        <AppHeader />
      </div>
-      <div className="relative flex h-full w-full flex-1 flex-row">
+      <div className="relative flex min-h-0 w-full flex-1">
        <div className="relative w-[68px] 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">
+        <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">
            <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">
--- a/src/pages/onboarding/login/step-2.tsx
+++ b/src/pages/onboarding/login/step-2.tsx
@ -5,7 +5,6 @@ import { RelayContext } from '@components/contexts/relay';

 import { useLocalStorage } from '@rehooks/local-storage';
 import Image from 'next/image';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { getPublicKey, nip19 } from 'nostr-tools';
 import {
@ -62,6 +61,10 @@ export default function Page() {
    [db, pubkey]
  );

+  const submit = () => {
+    router.push('/');
+  };
+
  useEffect(() => {
    relayPool.subscribe(
      [
@ -122,12 +125,12 @@ export default function Page() {
              </div>
            </div>
          </div>
-          <Link
-            href="/"
+          <button
+            onClick={() => submit()}
            className="inline-flex w-full transform items-center justify-center rounded-lg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
          >
            <span className="drop-shadow-lg">Done →</span>
-          </Link>
+          </button>
        </div>
      </div>
    </div>