From 06e9fa13f075bae5d7ecc7cb2e6d3b6973ccaf4b Mon Sep 17 00:00:00 2001
From: floatGray <599316783@qq.com>
Date: Wed, 22 Nov 2023 15:12:24 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=8C=85=E7=9A=84=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E5=8F=B7=EF=BC=8C=E5=AE=8C=E6=88=90=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(main)/layout.tsx                        |  14 ++
 components/action-tooltip.tsx                |  35 +++
 components/navigation/navigation-action.tsx  |  25 ++
 components/navigation/navigation-item.tsx    |  45 ++++
 components/navigation/navigation-sidebar.tsx |  58 +++++
 components/ui/scroll-area.tsx                |  48 ++++
 components/ui/separator.tsx                  |  31 +++
 components/ui/tooltip.tsx                    |  30 +++
 middleware.ts                                |   2 +-
 next.config.js                               |   2 +-
 package-lock.json                            | 226 ++++++++++++++-----
 package.json                                 |   7 +-
 12 files changed, 467 insertions(+), 56 deletions(-)
 create mode 100644 app/(main)/layout.tsx
 create mode 100644 components/action-tooltip.tsx
 create mode 100644 components/navigation/navigation-action.tsx
 create mode 100644 components/navigation/navigation-item.tsx
 create mode 100644 components/navigation/navigation-sidebar.tsx
 create mode 100644 components/ui/scroll-area.tsx
 create mode 100644 components/ui/separator.tsx
 create mode 100644 components/ui/tooltip.tsx

diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
new file mode 100644
index 0000000..2a56475
--- /dev/null
+++ b/app/(main)/layout.tsx
@@ -0,0 +1,14 @@
+import { NavigationSidebar } from '@/components/navigation/navigation-sidebar';
+
+const MainLayout = async ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="h-full">
+      <div className="hidden md:flex h-full w-[72px] z-30 flex-col fixed inset-y-0">
+        <NavigationSidebar />
+      </div>
+      <main className="md:pl-[72px] h-full">{children}</main>
+    </div>
+  );
+};
+
+export default MainLayout;
diff --git a/components/action-tooltip.tsx b/components/action-tooltip.tsx
new file mode 100644
index 0000000..d04ec9a
--- /dev/null
+++ b/components/action-tooltip.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+
+interface ActionTooltipProps {
+  label: string;
+  children: React.ReactNode;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  align?: 'start' | 'center' | 'end';
+}
+
+export const ActionTooltip = ({
+  label,
+  children,
+  side,
+  align,
+}: ActionTooltipProps) => {
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={50}>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side={side} align={align}>
+          <p className="font-semibold text-sm capitalize">
+            {label.toLowerCase()}
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
diff --git a/components/navigation/navigation-action.tsx b/components/navigation/navigation-action.tsx
new file mode 100644
index 0000000..3c7103d
--- /dev/null
+++ b/components/navigation/navigation-action.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { Plus } from 'lucide-react';
+
+import { ActionTooltip } from '@/components/action-tooltip';
+
+export const NavigationAction = () => {
+  return (
+    <div>
+      <ActionTooltip side="right" align="center" label="增加一个服务器">
+        <button
+          onClick={() => console.log('增加一个服务器')}
+          className="group flex items-center"
+        >
+          <div className="flex mx-3 h-[48px] w-[48px] rounded-[24px] group-hover:rounded-[16px] transition-all overflow-hidden items-center justify-center bg-background dark:bg-neutral-700 group-hover:bg-emerald-500">
+            <Plus
+              className="group-hover:text-white transition text-emerald-500"
+              size={25}
+            />
+          </div>
+        </button>
+      </ActionTooltip>
+    </div>
+  );
+};
diff --git a/components/navigation/navigation-item.tsx b/components/navigation/navigation-item.tsx
new file mode 100644
index 0000000..9b9f0ab
--- /dev/null
+++ b/components/navigation/navigation-item.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import Image from 'next/image';
+import { useParams, useRouter } from 'next/navigation';
+
+import { cn } from '@/lib/utils';
+import { ActionTooltip } from '@/components/action-tooltip';
+
+interface NavigationItemProps {
+  id: string;
+  imageUrl: string;
+  name: string;
+}
+
+export const NavigationItem = ({ id, imageUrl, name }: NavigationItemProps) => {
+  const params = useParams();
+  const router = useRouter();
+
+  const onClick = () => {
+    router.push(`/servers/${id}`);
+  };
+
+  return (
+    <ActionTooltip side="right" align="center" label={name}>
+      <button onClick={onClick} className="group relative flex items-center">
+        <div
+          className={cn(
+            'absolute left-0 bg-primary rounded-r-full transition-all w-[4px]',
+            params?.serverId !== id && 'group-hover:h-[20px]',
+            params?.serverId === id ? 'h-[36px]' : 'h-[8px]'
+          )}
+        />
+        <div
+          className={cn(
+            'relative group flex mx-3 h-[48px] w-[48px] rounded-[24px] group-hover:rounded-[16px] transition-all overflow-hidden',
+            params?.serverId === id &&
+              'bg-primary/10 text-primary rounded-[16px]'
+          )}
+        >
+          <Image fill src={imageUrl} alt="Channel" />
+        </div>
+      </button>
+    </ActionTooltip>
+  );
+};
diff --git a/components/navigation/navigation-sidebar.tsx b/components/navigation/navigation-sidebar.tsx
new file mode 100644
index 0000000..20270d0
--- /dev/null
+++ b/components/navigation/navigation-sidebar.tsx
@@ -0,0 +1,58 @@
+import { redirect } from 'next/navigation';
+import { UserButton } from '@clerk/nextjs';
+
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { ModeToggle } from '@/components/mode-toggle';
+import { Separator } from '@/components/ui/separator';
+import { currentProfile } from '@/lib/current-profile';
+import { db } from '@/lib/db';
+
+import { NavigationAction } from './navigation-action';
+import { NavigationItem } from './navigation-item';
+
+export const NavigationSidebar = async () => {
+  const profile = await currentProfile();
+
+  if (!profile) {
+    return redirect('/');
+  }
+
+  const servers = await db.server.findMany({
+    where: {
+      members: {
+        some: {
+          profileId: profile.id,
+        },
+      },
+    },
+  });
+
+  return (
+    <div className="space-y-4 flex flex-col items-center h-full text-primary w-full dark:bg-[#1E1F22] bg-[#E3E5E8] py-3">
+      <NavigationAction />
+      <Separator className="h-[2px] bg-zinc-300 dark:bg-zinc-700 rounded-md w-10 mx-auto" />
+      <ScrollArea className="flex-1 w-full">
+        {servers.map((server) => (
+          <div key={server.id} className="mb-4">
+            <NavigationItem
+              id={server.id}
+              name={server.name}
+              imageUrl={server.imageUrl}
+            />
+          </div>
+        ))}
+      </ScrollArea>
+      <div className="pb-3 mt-auto flex items-center flex-col gap-y-4">
+        <ModeToggle />
+        <UserButton
+          afterSignOutUrl="/"
+          appearance={{
+            elements: {
+              avatarBox: 'h-[48px] w-[48px]',
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..0b4a48d
--- /dev/null
+++ b/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
new file mode 100644
index 0000000..12d81c4
--- /dev/null
+++ b/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
new file mode 100644
index 0000000..30fc44d
--- /dev/null
+++ b/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/middleware.ts b/middleware.ts
index d67aeb2..2856444 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -4,7 +4,7 @@ import { authMiddleware } from '@clerk/nextjs';
 // Please edit this to allow other routes to be public as needed.
 // See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
 export default authMiddleware({
-  publicRoutes: ['api/uploadthing'],
+  publicRoutes: ['/api/uploadthing'],
 });
 
 export const config = {
diff --git a/next.config.js b/next.config.js
index 99d6ff8..1d6f638 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    domains: ['uploadthing.com'],
+    domains: ['uploadthing.com','utfs.io'],
   },
 };
 
diff --git a/package-lock.json b/package-lock.json
index 27670aa..9437b08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,20 +14,23 @@
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-scroll-area": "^1.0.5",
+        "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-tooltip": "^1.0.7",
         "@uploadthing/react": "^6.0.0",
         "axios": "^1.6.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
         "lucide-react": "^0.292.0",
-        "next": "^14.0.3",
+        "next": "^14.0.1",
         "next-themes": "^0.2.1",
         "react": "^18",
         "react-dom": "^18",
         "react-hook-form": "^7.48.2",
         "tailwind-merge": "^2.0.0",
         "tailwindcss-animate": "^1.0.7",
-        "uploadthing": "^6.0.1",
+        "uploadthing": "^6.0.3",
         "uuid": "^9.0.1",
         "zod": "^3.22.4"
       },
@@ -363,9 +366,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmmirror.com/@next/env/-/env-14.0.3.tgz",
-      "integrity": "sha512-7xRqh9nMvP5xrW4/+L0jgRRX+HoNRGnfJpD+5Wq6/13j3dsdzxO3BCXn7D3hMqsDb+vjZnJq+vI7+EtgrYZTeA=="
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/@next/env/-/env-14.0.1.tgz",
+      "integrity": "sha512-Ms8ZswqY65/YfcjrlcIwMPD7Rg/dVjdLapMcSHG26W6O67EJDF435ShW4H4LXi1xKO1oRc97tLXUpx8jpLe86A=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "14.0.2",
@@ -377,9 +380,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmmirror.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.3.tgz",
-      "integrity": "sha512-64JbSvi3nbbcEtyitNn2LEDS/hcleAFpHdykpcnrstITFlzFgB/bW0ER5/SJJwUPj+ZPY+z3e+1jAfcczRLVGw==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.1.tgz",
+      "integrity": "sha512-JyxnGCS4qT67hdOKQ0CkgFTp+PXub5W1wsGvIq98TNbF3YEIN7iDekYhYsZzc8Ov0pWEsghQt+tANdidITCLaw==",
       "cpu": [
         "arm64"
       ],
@@ -392,9 +395,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmmirror.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.3.tgz",
-      "integrity": "sha512-RkTf+KbAD0SgYdVn1XzqE/+sIxYGB7NLMZRn9I4Z24afrhUpVJx6L8hsRnIwxz3ERE2NFURNliPjJ2QNfnWicQ==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.1.tgz",
+      "integrity": "sha512-625Z7bb5AyIzswF9hvfZWa+HTwFZw+Jn3lOBNZB87lUS0iuCYDHqk3ujuHCkiyPtSC0xFBtYDLcrZ11mF/ap3w==",
       "cpu": [
         "x64"
       ],
@@ -407,9 +410,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmmirror.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.3.tgz",
-      "integrity": "sha512-3tBWGgz7M9RKLO6sPWC6c4pAw4geujSwQ7q7Si4d6bo0l6cLs4tmO+lnSwFp1Tm3lxwfMk0SgkJT7EdwYSJvcg==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.1.tgz",
+      "integrity": "sha512-iVpn3KG3DprFXzVHM09kvb//4CNNXBQ9NB/pTm8LO+vnnnaObnzFdS5KM+w1okwa32xH0g8EvZIhoB3fI3mS1g==",
       "cpu": [
         "arm64"
       ],
@@ -422,9 +425,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmmirror.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.3.tgz",
-      "integrity": "sha512-v0v8Kb8j8T23jvVUWZeA2D8+izWspeyeDGNaT2/mTHWp7+37fiNfL8bmBWiOmeumXkacM/AB0XOUQvEbncSnHA==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.1.tgz",
+      "integrity": "sha512-mVsGyMxTLWZXyD5sen6kGOTYVOO67lZjLApIj/JsTEEohDDt1im2nkspzfV5MvhfS7diDw6Rp/xvAQaWZTv1Ww==",
       "cpu": [
         "arm64"
       ],
@@ -437,9 +440,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmmirror.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.3.tgz",
-      "integrity": "sha512-VM1aE1tJKLBwMGtyBR21yy+STfl0MapMQnNrXkxeyLs0GFv/kZqXS5Jw/TQ3TSUnbv0QPDf/X8sDXuMtSgG6eg==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.1.tgz",
+      "integrity": "sha512-wMqf90uDWN001NqCM/auRl3+qVVeKfjJdT9XW+RMIOf+rhUzadmYJu++tp2y+hUbb6GTRhT+VjQzcgg/QTD9NQ==",
       "cpu": [
         "x64"
       ],
@@ -452,9 +455,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmmirror.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.3.tgz",
-      "integrity": "sha512-64EnmKy18MYFL5CzLaSuUn561hbO1Gk16jM/KHznYP3iCIfF9e3yULtHaMy0D8zbHfxset9LTOv6cuYKJgcOxg==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.1.tgz",
+      "integrity": "sha512-ol1X1e24w4j4QwdeNjfX0f+Nza25n+ymY0T2frTyalVczUmzkVD7QGgPTZMHfR1aLrO69hBs0G3QBYaj22J5GQ==",
       "cpu": [
         "x64"
       ],
@@ -467,9 +470,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmmirror.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.3.tgz",
-      "integrity": "sha512-WRDp8QrmsL1bbGtsh5GqQ/KWulmrnMBgbnb+59qNTW1kVi1nG/2ndZLkcbs2GX7NpFLlToLRMWSQXmPzQm4tog==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.1.tgz",
+      "integrity": "sha512-WEmTEeWs6yRUEnUlahTgvZteh5RJc4sEjCQIodJlZZ5/VJwVP8p2L7l6VhzQhT4h7KvLx/Ed4UViBdne6zpIsw==",
       "cpu": [
         "arm64"
       ],
@@ -482,9 +485,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmmirror.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.3.tgz",
-      "integrity": "sha512-EKffQeqCrj+t6qFFhIFTRoqb2QwX1mU7iTOvMyLbYw3QtqTw9sMwjykyiMlZlrfm2a4fA84+/aeW+PMg1MjuTg==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.1.tgz",
+      "integrity": "sha512-oFpHphN4ygAgZUKjzga7SoH2VGbEJXZa/KL8bHCAwCjDWle6R1SpiGOdUdA8EJ9YsG1TYWpzY6FTbUA+iAJeww==",
       "cpu": [
         "ia32"
       ],
@@ -497,9 +500,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmmirror.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.3.tgz",
-      "integrity": "sha512-ERhKPSJ1vQrPiwrs15Pjz/rvDHZmkmvbf/BjPN/UCOI++ODftT0GtasDPi0j+y6PPJi5HsXw+dpRaXUaw4vjuQ==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.1.tgz",
+      "integrity": "sha512-FFp3nOJ/5qSpeWT0BZQ+YE1pSMk4IMpkME/1DwKBwhg4mJLB9L+6EXuJi4JEwaJdl5iN+UUlmUD3IsR1kx5fAg==",
       "cpu": [
         "x64"
       ],
@@ -616,6 +619,14 @@
       "resolved": "https://registry.npmmirror.com/@prisma/engines-version/-/engines-version-5.6.0-32.e95e739751f42d8ca026f6b910f5a2dc5adeaeee.tgz",
       "integrity": "sha512-UoFgbV1awGL/3wXuUK3GDaX2SolqczeeJ5b4FVec9tzeGbSWJboPSbT0psSrmgYAKiKnkOPFSLlH6+b+IyOwAw=="
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/number/-/number-1.0.1.tgz",
+      "integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@radix-ui/primitive/-/primitive-1.0.1.tgz",
@@ -1072,6 +1083,60 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.5.tgz",
+      "integrity": "sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
+      "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
@@ -1090,6 +1155,40 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz",
+      "integrity": "sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -1196,6 +1295,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
+      "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/rect": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@radix-ui/rect/-/rect-1.0.1.tgz",
@@ -1493,9 +1615,9 @@
       "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ=="
     },
     "node_modules/@uploadthing/shared": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/@uploadthing/shared/-/shared-6.0.0.tgz",
-      "integrity": "sha512-1utPnQxluUxShO095IGOeU3NT0nERVSlY97R8c0dcIoDc689CRX7BFrBws58PuWuAhmPp2Mjyo1e9wn3rSBjgg==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/@uploadthing/shared/-/shared-6.0.2.tgz",
+      "integrity": "sha512-yFOhvzBG8VB2qmEGWDuW/tV/ZcfRZ4a6rX7i9/ZS3IqHA0FO7CKa8yitltAl3yRdSI9it88iMEQg7Ah/ve8D4A==",
       "peerDependencies": {
         "@uploadthing/mime-types": "^0.2.2"
       },
@@ -3812,11 +3934,11 @@
       "dev": true
     },
     "node_modules/next": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmmirror.com/next/-/next-14.0.3.tgz",
-      "integrity": "sha512-AbYdRNfImBr3XGtvnwOxq8ekVCwbFTv/UJoLwmaX89nk9i051AEY4/HAWzU0YpaTDw8IofUpmuIlvzWF13jxIw==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/next/-/next-14.0.1.tgz",
+      "integrity": "sha512-s4YaLpE4b0gmb3ggtmpmV+wt+lPRuGtANzojMQ2+gmBpgX9w5fTbjsy6dXByBuENsdCX5pukZH/GxdFgO62+pA==",
       "dependencies": {
-        "@next/env": "14.0.3",
+        "@next/env": "14.0.1",
         "@swc/helpers": "0.5.2",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001406",
@@ -3831,15 +3953,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.0.3",
-        "@next/swc-darwin-x64": "14.0.3",
-        "@next/swc-linux-arm64-gnu": "14.0.3",
-        "@next/swc-linux-arm64-musl": "14.0.3",
-        "@next/swc-linux-x64-gnu": "14.0.3",
-        "@next/swc-linux-x64-musl": "14.0.3",
-        "@next/swc-win32-arm64-msvc": "14.0.3",
-        "@next/swc-win32-ia32-msvc": "14.0.3",
-        "@next/swc-win32-x64-msvc": "14.0.3"
+        "@next/swc-darwin-arm64": "14.0.1",
+        "@next/swc-darwin-x64": "14.0.1",
+        "@next/swc-linux-arm64-gnu": "14.0.1",
+        "@next/swc-linux-arm64-musl": "14.0.1",
+        "@next/swc-linux-x64-gnu": "14.0.1",
+        "@next/swc-linux-x64-musl": "14.0.1",
+        "@next/swc-win32-arm64-msvc": "14.0.1",
+        "@next/swc-win32-ia32-msvc": "14.0.1",
+        "@next/swc-win32-x64-msvc": "14.0.1"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -5171,12 +5293,12 @@
       }
     },
     "node_modules/uploadthing": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmmirror.com/uploadthing/-/uploadthing-6.0.1.tgz",
-      "integrity": "sha512-1gXOTAbRx/l27TLZlZCOhucOxIwGCR6H865AgYQuWQQaYmg/EvS94udcu/+cRKHvjEvDEclUE20qCDXrROTSUg==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmmirror.com/uploadthing/-/uploadthing-6.0.3.tgz",
+      "integrity": "sha512-KH+FWHUg9zsJT+pYcVOa3p6WiPBJ8Qdgv+HUArkW8C5wF6nnDFhBFIg6hEa499Q5mcO4UOY5hLeBGMJu/C+abQ==",
       "dependencies": {
         "@uploadthing/mime-types": "^0.2.2",
-        "@uploadthing/shared": "^6.0.0"
+        "@uploadthing/shared": "^6.0.2"
       },
       "engines": {
         "node": ">=18.13.0"
diff --git a/package.json b/package.json
index 20f5928..d0801ff 100644
--- a/package.json
+++ b/package.json
@@ -15,20 +15,23 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@uploadthing/react": "^6.0.0",
     "axios": "^1.6.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-react": "^0.292.0",
-    "next": "^14.0.3",
+    "next": "^14.0.1",
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.48.2",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
-    "uploadthing": "^6.0.1",
+    "uploadthing": "^6.0.3",
     "uuid": "^9.0.1",
     "zod": "^3.22.4"
   },