From 623620af33755d28cab656538d750f736f54e7a0 Mon Sep 17 00:00:00 2001
From: biersoeckli <meow@biersoeckli.ch>
Date: Sun, 1 Dec 2024 15:27:57 +0000
Subject: [PATCH] optimized sidebar

---
 package.json                               |  1 +
 src/app/project/create-app-dialog.tsx      |  3 +-
 src/app/projects/create-project-dialog.tsx |  1 +
 src/app/projects/project-page.tsx          |  3 +-
 src/app/sidebar.tsx                        | 87 ++++++++++++++--------
 src/components/ui/avatar.tsx               | 50 +++++++++++++
 yarn.lock                                  | 43 +++++++++--
 7 files changed, 148 insertions(+), 40 deletions(-)
 create mode 100644 src/components/ui/avatar.tsx

diff --git a/package.json b/package.json
index d38f592..62d42b3 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^5.21.1",
     "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
diff --git a/src/app/project/create-app-dialog.tsx b/src/app/project/create-app-dialog.tsx
index 66cae1d..06aaa26 100644
--- a/src/app/project/create-app-dialog.tsx
+++ b/src/app/project/create-app-dialog.tsx
@@ -6,6 +6,7 @@ import { Toast } from "@/frontend/utils/toast.utils";
 import { createApp } from "./actions";
 import { redirect } from "next/navigation";
 import { useRouter } from "next/navigation";
+import { Plus } from "lucide-react";
 
 
 export function CreateAppDialog({
@@ -33,6 +34,6 @@ export function CreateAppDialog({
         description="Name your new App."
         fieldName="Name"
         onResult={createAppFunc}>
-        <Button>Create App</Button>
+        <Button><Plus /> Create App</Button>
     </InputDialog>
 }
\ No newline at end of file
diff --git a/src/app/projects/create-project-dialog.tsx b/src/app/projects/create-project-dialog.tsx
index a589163..2b0d3e2 100644
--- a/src/app/projects/create-project-dialog.tsx
+++ b/src/app/projects/create-project-dialog.tsx
@@ -20,6 +20,7 @@ export function CreateProjectDialog({ children }: { children?: React.ReactNode }
         title="Create Project"
         description="Name your new project."
         fieldName="Name"
+        OKButton="Create Project"
         onResult={createProj}>
         {children}
     </InputDialog>
diff --git a/src/app/projects/project-page.tsx b/src/app/projects/project-page.tsx
index b905101..08bb38c 100644
--- a/src/app/projects/project-page.tsx
+++ b/src/app/projects/project-page.tsx
@@ -17,6 +17,7 @@ import {
 } from "@/components/ui/breadcrumb"
 import { useBreadcrumbs } from "@/frontend/states/zustand.states";
 import ProjectsBreadcrumbs from "./projects-breadcrumbs";
+import { Plus } from "lucide-react";
 
 export default async function ProjectPage() {
 
@@ -28,7 +29,7 @@ export default async function ProjectPage() {
             <div className="flex gap-4">
                 <h2 className="text-3xl font-bold tracking-tight flex-1">Projects</h2>
                 <CreateProjectDialog>
-                    <Button>Create Project</Button>
+                    <Button><Plus /> Create Project</Button>
                 </CreateProjectDialog>
             </div>
             <ProjectsTable data={data} />
diff --git a/src/app/sidebar.tsx b/src/app/sidebar.tsx
index 63d2d4f..fe4e2da 100644
--- a/src/app/sidebar.tsx
+++ b/src/app/sidebar.tsx
@@ -14,20 +14,18 @@ import {
   SidebarMenuSub,
   SidebarMenuSubItem
 } from "@/components/ui/sidebar"
-import { AppleIcon, Calendar, ChartNoAxesCombined, ChevronDown, ChevronUp, FolderClosed, Home, Inbox, Plus, Search, Server, Settings, Settings2, User, User2 } from "lucide-react"
+import { AppleIcon, BookOpen, Boxes, Calendar, ChartNoAxesCombined, ChevronDown, ChevronUp, FolderClosed, Home, Inbox, Info, Plus, Radio, Search, Server, Settings, Settings2, User, User2 } from "lucide-react"
 import Link from "next/link"
 import { CreateProjectDialog } from "./projects/create-project-dialog"
 import projectService from "@/server/services/project.service"
 import { getAuthUserSession, getUserSession } from "@/server/utils/action-wrapper.utils"
 import { SidebarLogoutButton } from "./sidebar-logout-button"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
 
-const monitoringMenu = [
-  {
-    title: "Overall Cluster",
-    url: "/Montioring",
-    icon: Home,
-  },
-]
 
 const settingsMenu = [
   {
@@ -59,7 +57,42 @@ export async function AppSidebar() {
 
   return (
     <Sidebar collapsible="icon">
-      <SidebarHeader />
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton size="lg"
+                  className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <Boxes className="size-4" />
+                  </div>
+                  <div className="grid flex-1 text-left text-sm leading-tight my-4">
+                    <span className="truncate font-semibold">QuickStack</span>
+                    <span className="truncate text-xs">Admin Panel</span>
+                  </div>
+                  <ChevronDown className="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-[--radix-popper-anchor-width]">
+                <Link href="https://quickstack.dev" target="_blank">
+                  <DropdownMenuItem>
+                    <Info />
+                    <span>QuickStack Website</span>
+                  </DropdownMenuItem>
+                </Link>
+                <Link href="https://docs.quickstack.dev" target="_blank">
+                  <DropdownMenuItem>
+                    <BookOpen />
+                    <span>QuickStack Docs</span>
+                  </DropdownMenuItem>
+                </Link>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
       <SidebarContent>
         <SidebarGroup>
           <SidebarGroupLabel>Menu</SidebarGroupLabel>
@@ -102,27 +135,12 @@ export async function AppSidebar() {
             <SidebarMenu>
               <Collapsible defaultOpen className="group/collapsible">
                 <SidebarMenuItem>
-                  <CollapsibleTrigger asChild>
-                    <SidebarMenuButton asChild>
-                      <Link href="/monitoring">
-                        <ChartNoAxesCombined />
-                        <span>Monitoring</span>
-                      </Link>
-                    </SidebarMenuButton>
-                  </CollapsibleTrigger>
-                  <CollapsibleContent>
-                    <SidebarMenuSub>
-                      {monitoringMenu.map((item) => (
-                        <SidebarMenuSubItem key={item.title}>
-                          <SidebarMenuButton asChild>
-                            <Link href={item.url}>
-                              <span>{item.title}</span>
-                            </Link>
-                          </SidebarMenuButton>
-                        </SidebarMenuSubItem>
-                      ))}
-                    </SidebarMenuSub>
-                  </CollapsibleContent>
+                  <SidebarMenuButton asChild>
+                    <Link href="/monitoring">
+                      <ChartNoAxesCombined />
+                      <span>Monitoring</span>
+                    </Link>
+                  </SidebarMenuButton>
                 </SidebarMenuItem>
               </Collapsible>
             </SidebarMenu>
@@ -169,8 +187,13 @@ export async function AppSidebar() {
           <SidebarMenuItem>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <SidebarMenuButton>
-                  <User2 /> {session.email}
+                <SidebarMenuButton
+                  size="lg"
+                  className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                  <Avatar className="h-8 w-8 rounded-lg">
+                    <AvatarFallback className="rounded-lg">{session.email.substring(0, 1) || 'Q'}</AvatarFallback>
+                  </Avatar>
+                  {session.email}
                   <ChevronUp className="ml-auto" />
                 </SidebarMenuButton>
               </DropdownMenuTrigger>
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..a5e435b
--- /dev/null
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/frontend/utils/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/yarn.lock b/yarn.lock
index 19bee11..00b3088 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -452,6 +452,16 @@
   dependencies:
     "@radix-ui/react-primitive" "2.0.0"
 
+"@radix-ui/react-avatar@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-avatar/-/react-avatar-1.1.1.tgz#5848d2ed5f34d18b36fc7e2d227c41fca8600ea1"
+  integrity sha512-eoOtThOmxeoizxpX6RiEsQZ2wj5r4+zoeqAwO0cBaFQGjJwIH3dIX0OCxNrCyrrdxG+vBweMETh3VziQG7c1kw==
+  dependencies:
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-checkbox@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.1.2.tgz#6465b800420923ecc39cbeaa8f357b5f09dbfd52"
@@ -466,6 +476,20 @@
     "@radix-ui/react-use-previous" "1.1.0"
     "@radix-ui/react-use-size" "1.1.0"
 
+"@radix-ui/react-collapsible@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.1.1.tgz#1382cc9ec48f8b473c14f3779d317f0cdf6da5e9"
+  integrity sha512-1///SnrfQHJEofLokyczERxQbWfCGQlQ2XsCZMucVs6it+lq9iw4vXy+uDn1edlb58cOZOWSldnfPAYcT4O/Yg==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-presence" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-collection@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.0.tgz#f18af78e46454a2360d103c2251773028b7724ed"
@@ -826,6 +850,13 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.6.0"
 
+"@radix-ui/react-separator@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.1.0.tgz#ee0f4d86003b0e3ea7bc6ccab01ea0adee32663e"
+  integrity sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+
 "@radix-ui/react-slot@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
@@ -855,7 +886,7 @@
     "@radix-ui/react-roving-focus" "1.1.0"
     "@radix-ui/react-use-controllable-state" "1.1.0"
 
-"@radix-ui/react-tooltip@^1.1.3":
+"@radix-ui/react-tooltip@^1.1.4":
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.1.4.tgz#152d8485859b80d395d6b3229f676fef3cec56b3"
   integrity sha512-QpObUH/ZlpaO4YgHSaYzrLO2VuO+ZBFFgGzjMUPwtiYnAzzNNDPJeEGRrT7qNOrWm/Jr08M1vlp+vTHtnSQ0Uw==
@@ -1615,7 +1646,7 @@ chownr@^3.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-3.0.0.tgz#9855e64ecd240a9cc4267ce8a4aa5d24a1da15e4"
   integrity sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==
 
-class-variance-authority@^0.7.0:
+class-variance-authority@^0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.7.1.tgz#4008a798a0e4553a781a57ac5177c9fb5d043787"
   integrity sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==
@@ -3120,10 +3151,10 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-lucide-react@^0.453.0:
-  version "0.453.0"
-  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.453.0.tgz#d37909a45a29d89680383a202ee861224b05ba6a"
-  integrity sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==
+lucide-react@^0.462.0:
+  version "0.462.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.462.0.tgz#cb95b1dde558be51b7ae247290f7bb5f197880bf"
+  integrity sha512-NTL7EbAao9IFtuSivSZgrAh4fZd09Lr+6MTkqIxuHaH2nnYiYIzXPo06cOxHg9wKLdj6LL8TByG4qpePqwgx/g==
 
 make-dir@^3.1.0:
   version "3.1.0"