chore: placement menu leftpanel and ux create add projects

web-app/src/containers/LeftPanel.tsx

@@ -1,4 +1,4 @@
-import { Link, useRouterState } from '@tanstack/react-router'
+import { Link, useRouterState, useNavigate } from '@tanstack/react-router'
 import { useLeftPanel } from '@/hooks/useLeftPanel'
 import { cn } from '@/lib/utils'
 import {
@@ -58,6 +58,9 @@
     route: route.project,
     isEnabled: true,
   },
+]
+
+const secondaryMenus = [
   {
     title: 'common:assistants',
     icon: IconClipboardSmile,
@@ -82,6 +85,7 @@
   const open = useLeftPanel((state) => state.open)
   const setLeftPanel = useLeftPanel((state) => state.setLeftPanel)
   const { t } = useTranslation()
+  const navigate = useNavigate()
   const [searchTerm, setSearchTerm] = useState('')
   const { isAuthenticated } = useAuth()
 
@@ -98,10 +102,10 @@
   // Use click outside hook for panel with debugging
   useClickOutside(
     () => {
       if (isSmallScreen && open) {
         setLeftPanel(false)
       }
     },
     null,
     [
       panelRef.current,
@@ -113,28 +117,28 @@
   // Auto-collapse panel only when window is resized
   useEffect(() => {
     const handleResize = () => {
       const currentIsSmallScreen = window.innerWidth <= 768
 
       // Skip on initial mount
       if (isInitialMountRef.current) {
         isInitialMountRef.current = false
         prevScreenSizeRef.current = currentIsSmallScreen
         return
       }
 
       // Only trigger if the screen size actually changed
       if (
         prevScreenSizeRef.current !== null &&
         prevScreenSizeRef.current !== currentIsSmallScreen
       ) {
         if (currentIsSmallScreen && open) {
           setLeftPanel(false)
         } else if (!open) {
           setLeftPanel(true)
         }
         prevScreenSizeRef.current = currentIsSmallScreen
       }
     }
 
     // Add resize listener
     window.addEventListener('resize', handleResize)
@@ -180,9 +184,9 @@
 
   const filteredProjects = useMemo(() => {
     if (!searchTerm) return folders
     return folders.filter((folder) =>
       folder.name.toLowerCase().includes(searchTerm.toLowerCase())
     )
   }, [folders, searchTerm])
 
   // Memoize categorized threads based on filteredThreads
@@ -196,32 +200,37 @@
 
   // Project handlers
   const handleProjectDelete = (id: string) => {
     setDeletingProjectId(id)
     setDeleteProjectConfirmOpen(true)
   }
 
   const confirmProjectDelete = () => {
     if (deletingProjectId) {
       deleteFolder(deletingProjectId)
       setDeleteProjectConfirmOpen(false)
       setDeletingProjectId(null)
     }
   }
 
   const handleProjectSave = (name: string) => {
     if (editingProjectKey) {
       updateFolder(editingProjectKey, name)
     } else {
-      addFolder(name)
+      const newProject = addFolder(name)
+      // Navigate to the newly created project
+      navigate({
+        to: '/project/$projectId',
+        params: { projectId: newProject.id },
+      })
     }
     setProjectDialogOpen(false)
     setEditingProjectKey(null)
   }
 
   // Disable body scroll when panel is open on small screens
   useEffect(() => {
     if (isSmallScreen && open) {
       document.body.style.overflow = 'hidden'
     } else {
       document.body.style.overflow = ''
     }
@@ -487,7 +496,7 @@
           )}
 
           <div className="flex flex-col h-full overflow-y-scroll w-[calc(100%+6px)]">
-            <div className="flex flex-col w-full h-full overflow-y-auto overflow-x-hidden">
+            <div className="flex flex-col w-full h-full overflow-y-auto overflow-x-hidden mb-3">
               <div className="h-full w-full overflow-y-auto">
                 {favoritedThreads.length > 0 && (
                   <>
@@ -607,6 +616,44 @@
                 </div>
               </div>
             </div>
+
+            {secondaryMenus.map((menu) => {
+              if (!menu.isEnabled) {
+                return null
+              }
+
+              // Regular menu items must have route and icon
+              if (!menu.route || !menu.icon) return null
+
+              const isActive = (() => {
+                // Settings routes
+                if (menu.route.includes(route.settings.index)) {
+                  return currentPath.includes(route.settings.index)
+                }
+
+                // Default exact match for other routes
+                return currentPath === menu.route
+              })()
+              return (
+                <Link
+                  key={menu.title}
+                  to={menu.route}
+                  onClick={() => isSmallScreen && setLeftPanel(false)}
+                  data-test-id={`menu-${menu.title}`}
+                  activeOptions={{ exact: true }}
+                  className={cn(
+                    'flex items-center gap-1.5 cursor-pointer hover:bg-left-panel-fg/10 py-1 px-1 rounded',
+                    isActive && 'bg-left-panel-fg/10'
+                  )}
+                >
+                  <menu.icon size={18} className="text-left-panel-fg/70" />
+                  <span className="font-medium text-left-panel-fg/90">
+                    {t(menu.title)}
+                  </span>
+                </Link>
+              )
+            })}
+
             {PlatformFeatures[PlatformFeature.AUTHENTICATION] && (
               <div className="space-y-1 shrink-0 py-1">
                 <div>

web-app/src/containers/ThreadList.tsx

@@ -185,7 +185,10 @@ const SortableItem = memo(
             <DropdownMenuTrigger asChild>
               <IconDots
                 size={14}
-                className="text-left-panel-fg/60 shrink-0 cursor-pointer px-0.5 -mr-1 data-[state=open]:bg-left-panel-fg/10 rounded group-hover/thread-list:data-[state=closed]:size-5 size-5 data-[state=closed]:size-0"
+                className={cn(
+                  'text-left-panel-fg/60 shrink-0 cursor-pointer px-0.5 -mr-1 data-[state=open]:bg-left-panel-fg/10 rounded group-hover/thread-list:data-[state=closed]:size-5 size-5 data-[state=closed]:size-0',
+                  variant === 'project' && 'text-main-view-fg/60'
+                )}
                 onClick={(e) => {
                   e.preventDefault()
                   e.stopPropagation()

web-app/src/hooks/useThreadManagement.ts

@@ -13,7 +13,7 @@ type ThreadFolder = {
 type ThreadManagementState = {
   folders: ThreadFolder[]
   setFolders: (folders: ThreadFolder[]) => void
-  addFolder: (name: string) => void
+  addFolder: (name: string) => ThreadFolder
   updateFolder: (id: string, name: string) => void
   deleteFolder: (id: string) => void
   getFolderById: (id: string) => ThreadFolder | undefined
@@ -37,6 +37,7 @@ export const useThreadManagement = create<ThreadManagementState>()(
         set((state) => ({
           folders: [...state.folders, newFolder],
         }))
+        return newFolder
       },
 
       updateFolder: (id, name) => {

web-app/src/routes/project/index.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useState, useMemo } from 'react'
 
 import { useThreadManagement } from '@/hooks/useThreadManagement'
@@ -31,6 +31,7 @@ function Project() {
 
 function ProjectContent() {
   const { t } = useTranslation()
+  const navigate = useNavigate()
   const { folders, addFolder, updateFolder, deleteFolder, getFolderById } =
     useThreadManagement()
   const threads = useThreads((state) => state.threads)
@@ -59,7 +60,12 @@ function ProjectContent() {
     if (editingKey) {
       updateFolder(editingKey, name)
     } else {
-      addFolder(name)
+      const newProject = addFolder(name)
+      // Navigate to the newly created project
+      navigate({
+        to: '/project/$projectId',
+        params: { projectId: newProject.id },
+      })
     }
     setOpen(false)
     setEditingKey(null)