feat(dashboard init): ui

no breaking change, error

BREAKING CHANGE: new feature

package.json

@@ -61,6 +61,7 @@
     "@paralleldrive/cuid2": "^2.2.2",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-select": "^2.0.0",

src/app/(dashboard)/app/_components/active-button.tsx

@@ -19,14 +19,14 @@ export function ActiveButton({ href, label, icon }: Props) {
     <Button
       variant="ghost"
       className={cn(
-        'w-full justify-start gap-3 font-normal text-foreground-muted hover:text-foreground',
+        'justify-start gap-3 font-normal',
         pathname === href && 'text-foreground',
       )}
       asChild
     >
       <Link href={href}>
         {icon}
-        {label}
+        <span className="w-full truncate">{label}</span>
       </Link>
     </Button>
   );

src/app/(dashboard)/app/layout.tsx

@@ -1,13 +1,21 @@
 import {
+  BellIcon,
+  CircleHelpIcon,
   DiamondIcon,
+  FolderIcon,
   HomeIcon,
   ListChecksIcon,
+  MessageSquareMore,
+  PanelLeftCloseIcon,
   PenLineIcon,
   PuzzleIcon,
 } from 'lucide-react';
 import Image from 'next/image';
 import type { PropsWithChildren } from 'react';
 import { ActiveButton } from './_components/active-button';
+import { CreatePlusDropdownMenu } from './_components/create-plus-dropdown-menu';
+import { Button } from '@/primitives/button';
+import { UserButton } from '@clerk/nextjs';
 
 const iconSize = 15;
 
@@ -41,22 +49,83 @@ const sideMenuStaticLinks = [
 
 export default function AppLayout({ children }: PropsWithChildren) {
   return (
-    <main className="flex min-h-dvh gap-8 p-4">
-      <aside className="w-[220px]">
-        <div className="flex items-center gap-3 pl-3 pt-4">
-          <Image src="/logo.png" width={35} height={35} alt="Noodle Logo" />
-          <span>Noodle</span>
+    <main className="flex min-h-dvh gap-4 p-4">
+      <aside className="flex w-[200px] flex-col justify-between">
+        <div>
+          <div className="flex items-center gap-3 pl-3 pt-4">
+            <Image src="/logo.png" width={35} height={35} alt="Enoflow Logo" />
+            <span>Enoflow</span>
+          </div>
+
+          <ul className="mt-8 flex flex-col">
+            {sideMenuStaticLinks.map(({ icon, label, href }) => (
+              <li key={label} className="flex flex-1 flex-col">
+                <ActiveButton icon={icon} label={label} href={href} />
+              </li>
+            ))}
+          </ul>
+
+          <div className="mt-6 space-y-2">
+            <h3 className="pl-4 text-xs text-gray">Modules</h3>
+            <ul className="flex flex-col">
+              <li className="flex flex-1 flex-col">
+                <ActiveButton
+                  href="/modules/ai"
+                  icon={<FolderIcon size={15} strokeWidth={1.5} />}
+                  label="Artificial Intelligence"
+                />
+              </li>
+              <li className="flex flex-1 flex-col">
+                <ActiveButton
+                  href="/modules/databases"
+                  icon={<FolderIcon size={15} strokeWidth={1.5} />}
+                  label="Databases"
+                />
+              </li>
+            </ul>
+          </div>
         </div>
 
-        <ul className="mt-8">
-          {sideMenuStaticLinks.map(({ icon, label, href }) => (
-            <li key={label}>
-              <ActiveButton icon={icon} label={label} href={href} />
-            </li>
-          ))}
-        </ul>
+        <div className="mb-6 flex flex-col">
+          <Button
+            variant="ghost"
+            className="justify-start gap-3 font-normal"
+            asChild
+          >
+            <a href="mailto:[email protected]">
+              <MessageSquareMore size={15} strokeWidth={1.5} /> Feedback
+            </a>
+          </Button>
+          <Button
+            variant="ghost"
+            className="justify-start gap-3 font-normal"
+            asChild
+          >
+            <a href="mailto:[email protected]">
+              <CircleHelpIcon size={15} strokeWidth={1.5} /> Help & Support
+            </a>
+          </Button>
+        </div>
       </aside>
-      <div className="flex-1 rounded-lg border p-6">{children}</div>
+
+      <div className="flex flex-1 flex-col rounded-xl border px-6 pb-6 pt-4">
+        <nav className="mb-6 flex items-center justify-between">
+          <div>
+            <Button variant="ghost" size="icon" className="-ml-2">
+              <PanelLeftCloseIcon strokeWidth={1.5} size={18} />
+            </Button>
+          </div>
+          <div className="flex items-center gap-4">
+            <CreatePlusDropdownMenu />
+            <Button variant="ghost" size="icon">
+              <BellIcon size={18} />
+            </Button>
+            <UserButton />
+          </div>
+        </nav>
+
+        {children}
+      </div>
     </main>
   );
 }

src/app/(dashboard)/app/page.tsx

@@ -1,14 +1,18 @@
-import { SignOutButton } from '@clerk/nextjs';
-
-/**
- * This is the main page for the dashboard.
- * @returns A Next.js RSC page component.
- */
 export default function DashboardHome() {
   return (
-    <main>
-      <h1>Hello world, this is the dashboard.</h1>
-      <SignOutButton />
-    </main>
+    <div className="flex flex-1">
+      <div className="flex-1">
+        <div className="space-y-3">
+          <h1 className="text-4xl font-semibold">Good afternoon, Caleb!</h1>
+          <p className="max-w-prose text-balance text-sm leading-6 text-foreground-muted">
+            “The final wisdom of life requires not the annulment of incongruity
+            but the achievement of serenity within and above it.” - Reinhold
+            Niebuhr
+          </p>
+        </div>
+        <div>More content</div>
+      </div>
+      <div className="min-w-[280px] rounded-lg border p-4">Right side</div>
+    </div>
   );
 }

src/app/(dashboard)/layout.tsx

@@ -12,7 +12,15 @@ import type { PropsWithChildren } from 'react';
 export default function DashboardLayout({ children }: PropsWithChildren) {
   return (
     <ClerkProvider
-      appearance={{ baseTheme: dark, variables: { colorPrimary: '#F9617B' } }}
+      appearance={{
+        baseTheme: dark,
+        variables: { colorPrimary: '#F9617B' },
+        elements: {
+          userButtonPopoverMain: 'bg-gray-subtle',
+          navbar: 'bg-gradient-to-r from-gray-subtle to-gray-subtle',
+          pageScrollBox: 'bg-gray-subtle',
+        },
+      }}
     >
       <TRPCReactProvider>{children}</TRPCReactProvider>
     </ClerkProvider>

src/primitives/button.tsx

@@ -17,7 +17,8 @@ const buttonVariants = cva(
         destructive: 'bg-red text-white hover:bg-red-solid-hover',
         outline:
           'border border-gray-subtle-border bg-gray-element text-foreground-muted hover:bg-gray-element-hover hover:text-foreground',
-        ghost: 'hover:bg-gray-element',
+        ghost:
+          'text-foreground-muted hover:bg-gray-element hover:text-foreground',
         link: 'relative bg-gradient-to-br from-salmon to-pink bg-clip-text text-transparent before:absolute before:bottom-0 before:h-px before:w-[calc(100%-24px)] before:rounded-full before:bg-gradient-to-br before:from-salmon before:to-pink hover:opacity-90',
       },
       size: {

src/primitives/input.tsx

@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-9 w-full rounded-md border border-gray-subtle-border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-gray-solid focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-pink-solid-hover disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-9 w-full rounded-md border border-gray-subtle-border bg-gray-subtle px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-gray-solid focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-pink-solid-hover disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}