From ed8f5a16519bc4bf5ba7eb81397ba0c703bb2c77 Mon Sep 17 00:00:00 2001
From: marko-kraemer <markokraemer.mail@gmail.com>
Date: Tue, 15 Apr 2025 19:37:56 +0100
Subject: [PATCH] wip

---
 frontend/package.json                         |  2 +-
 frontend/src/app/dashboard/layout.tsx         | 26 ++++++++++++++
 frontend/src/app/dashboard/page.tsx           | 27 ---------------
 frontend/src/app/globals.css                  |  4 +--
 .../dashboard/sidebar/nav-agents.tsx          | 34 ++++++-------------
 .../dashboard/sidebar/sidebar-left.tsx        | 14 ++++----
 frontend/src/components/ui/dropdown-menu.tsx  |  8 ++---
 7 files changed, 51 insertions(+), 64 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index d240f835..28092e3f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next devn --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
diff --git a/frontend/src/app/dashboard/layout.tsx b/frontend/src/app/dashboard/layout.tsx
index 14adb467..61a76790 100644
--- a/frontend/src/app/dashboard/layout.tsx
+++ b/frontend/src/app/dashboard/layout.tsx
@@ -5,6 +5,14 @@ import {
   SidebarProvider,
   SidebarTrigger,
 } from "@/components/ui/sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/components/ui/breadcrumb"
+import { Separator } from "@/components/ui/separator"
+
 interface DashboardLayoutProps {
   children: React.ReactNode
 }
@@ -17,6 +25,24 @@ export default async function DashboardLayout({
     <SidebarProvider>
       <SidebarLeft />
       <SidebarInset>
+        <header className="bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <Separator
+              orientation="vertical"
+              className="mr-2 data-[orientation=vertical]:h-4"
+            />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="line-clamp-1">
+                    AGENTS
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
         {children}
       </SidebarInset>
       {/* <SidebarRight /> */}
diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
index 82c67973..c9eddea3 100644
--- a/frontend/src/app/dashboard/page.tsx
+++ b/frontend/src/app/dashboard/page.tsx
@@ -1,33 +1,6 @@
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@/components/ui/breadcrumb"
-import { Separator } from "@/components/ui/separator"
-import { SidebarTrigger } from "@/components/ui/sidebar"
-
 export default function Page() {
   return (
     <>
-      <header className="bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2">
-        <div className="flex flex-1 items-center gap-2 px-3">
-          <SidebarTrigger />
-          <Separator
-            orientation="vertical"
-            className="mr-2 data-[orientation=vertical]:h-4"
-          />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbPage className="line-clamp-1">
-                  Project Management & Task Tracking
-                </BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-      </header>
       <div className="flex flex-1 flex-col gap-4 p-4">
         <div className="bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl" />
         <div className="bg-muted/50 mx-auto h-[100vh] w-full max-w-3xl rounded-xl" />
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index e16a2c0f..957dea3a 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -231,8 +231,8 @@
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
   --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(100% 0 0);
-  --accent-foreground: oklch(96.7% 0.003 264.54);
+  --accent: oklch(95% 0.02 260);
+  --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
diff --git a/frontend/src/components/dashboard/sidebar/nav-agents.tsx b/frontend/src/components/dashboard/sidebar/nav-agents.tsx
index 82b247b7..3fd2288e 100644
--- a/frontend/src/components/dashboard/sidebar/nav-agents.tsx
+++ b/frontend/src/components/dashboard/sidebar/nav-agents.tsx
@@ -7,6 +7,7 @@ import {
   MoreHorizontal,
   Trash2,
   StarOff,
+  Plus,
 } from "lucide-react"
 
 import {
@@ -30,7 +31,7 @@ import Link from "next/link"
 
 export function NavAgents() {
   const { isMobile } = useSidebar()
-  const [agents, setAgents] = useState<{name: string, url: string, emoji: string}[]>([])
+  const [agents, setAgents] = useState<{name: string, url: string}[]>([])
   const [isLoading, setIsLoading] = useState(true)
 
   // Load agents dynamically from the API
@@ -45,13 +46,9 @@ export function NavAgents() {
           if (threads && threads.length > 0) {
             // For each thread in the project, create an agent entry
             for (const thread of threads) {
-              // Generate a simple emoji based on the project name hash
-              const emoji = getEmojiFromName(project.name)
-              
               agentsList.push({
                 name: project.name,
-                url: `/dashboard/agents/${thread.thread_id}`,
-                emoji: emoji
+                url: `/dashboard/agents/${thread.thread_id}`
               })
             }
           }
@@ -68,17 +65,6 @@ export function NavAgents() {
     loadAgents()
   }, [])
 
-  // Function to generate emoji from name
-  const getEmojiFromName = (name: string) => {
-    const emojis = ["📊", "📝", "💼", "🔍", "✅", "📈", "💡", "🎯", "🗂️", "🤖", "💬", "📚"]
-    // Simple hash function to pick a consistent emoji for the same name
-    let hash = 0
-    for (let i = 0; i < name.length; i++) {
-      hash = name.charCodeAt(i) + ((hash << 5) - hash)
-    }
-    return emojis[Math.abs(hash) % emojis.length]
-  }
-
   // Get only the latest 20 agents for the sidebar
   const recentAgents = agents.slice(0, 20)
 
@@ -86,6 +72,14 @@ export function NavAgents() {
     <SidebarGroup className="group-data-[collapsible=icon]:hidden">
       <div className="flex justify-between items-center">
         <SidebarGroupLabel>Agents</SidebarGroupLabel>
+        <Link 
+          href="/dashboard/agents/new" 
+          className="text-muted-foreground hover:text-foreground h-8 w-8 flex items-center justify-center rounded-md"
+          title="New Agent"
+        >
+          <Plus className="h-4 w-4" />
+          <span className="sr-only">New Agent</span>
+        </Link>
       </div>
 
       <SidebarMenu>
@@ -106,7 +100,6 @@ export function NavAgents() {
               <SidebarMenuItem key={`agent-${index}`}>
                 <SidebarMenuButton asChild>
                   <Link href={item.url} title={item.name}>
-                    <span>{item.emoji}</span>
                     <span>{item.name}</span>
                   </Link>
                 </SidebarMenuButton>
@@ -122,11 +115,6 @@ export function NavAgents() {
                     side={isMobile ? "bottom" : "right"}
                     align={isMobile ? "end" : "start"}
                   >
-                    <DropdownMenuItem>
-                      <StarOff className="text-muted-foreground" />
-                      <span>Remove from agents</span>
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator />
                     <DropdownMenuItem>
                       <LinkIcon className="text-muted-foreground" />
                       <span>Copy Link</span>
diff --git a/frontend/src/components/dashboard/sidebar/sidebar-left.tsx b/frontend/src/components/dashboard/sidebar/sidebar-left.tsx
index 9f2ca57d..c790bda8 100644
--- a/frontend/src/components/dashboard/sidebar/sidebar-left.tsx
+++ b/frontend/src/components/dashboard/sidebar/sidebar-left.tsx
@@ -24,19 +24,19 @@ import { createClient } from "@/lib/supabase/client"
 
 // Only keep necessary data
 const navSecondaryItems = [
-  {
-    title: "Help",
-    url: "#",
-    icon: HelpCircle,
-  },
+  // {
+  //   title: "Help",
+  //   url: "https://www.kortix.ai/help",
+  //   icon: HelpCircle,
+  // },
   {
     title: "Careers",
-    url: "#",
+    url: "https://www.kortix.ai/careers",
     icon: BookOpen,
   },
   {
     title: "Book Demo",
-    url: "#",
+    url: "https://cal.com/marko-kraemer/15min",
     icon: CalendarClock,
   },
 ]
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
index ec51e9cc..c43c9048 100644
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -74,7 +74,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -128,7 +128,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -211,7 +211,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        "focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
         className
       )}
       {...props}