feat: add navigation link to projects in CanvasMenubar and enhance AppSidebar with tooltip for expand button

frontend/src/app/platform/PlatformPage.tsx

@@ -2,65 +2,30 @@
  * Platform: main layout with sidebar and header. Renders child routes (projects list or canvas) via Outlet.
  */
 
-import React from 'react'
-import { Link, Outlet, useParams, useLocation } from 'react-router-dom'
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb'
-import { Separator } from '@/components/ui/separator'
-import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
+import React, { useEffect, useState } from 'react'
+import { Outlet, useParams } from 'react-router-dom'
+import { SidebarProvider } from '@/components/ui/sidebar'
 import { PlatformProvider, usePlatform } from './platformContext'
 import { AppSidebar } from './AppSidebar'
 
 function PlatformLayoutInner() {
   const { projectId } = useParams<{ projectId: string }>()
-  const location = useLocation()
   const { projects } = usePlatform()
-  const project = projectId ? projects.find((p) => p.id === projectId) : null
-  const isProjectsList = location.pathname === '/projects'
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+
+  useEffect(() => {
+    if (projectId) setSidebarOpen(false)
+    else setSidebarOpen(true)
+  }, [projectId])
 
   return (
-    <SidebarProvider>
+    <SidebarProvider open={sidebarOpen} onOpenChange={setSidebarOpen}>
       <AppSidebar />
-      <SidebarInset className="flex min-h-0 flex-1 flex-col">
-        <header className="flex h-12 shrink-0 items-center gap-2 border-b border-border/40 px-1 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
-          <div className="flex items-center gap-2 px-2">
-            <SidebarTrigger className="-ml-1" />
-            <Separator orientation="vertical" className="mr-2 h-4" />
-            <Breadcrumb>
-              <BreadcrumbList>
-                {isProjectsList ? (
-                  <BreadcrumbItem>
-                    <BreadcrumbPage className="line-clamp-1">Projects</BreadcrumbPage>
-                  </BreadcrumbItem>
-                ) : (
-                  <>
-                    <BreadcrumbItem className="hidden md:block">
-                      <BreadcrumbLink asChild>
-                        <Link to="/projects">Projects</Link>
-                      </BreadcrumbLink>
-                    </BreadcrumbItem>
-                    <BreadcrumbSeparator className="hidden md:block" />
-                    <BreadcrumbItem>
-                      <BreadcrumbPage className="line-clamp-1">
-                        {project ? project.name : 'Project'}
-                      </BreadcrumbPage>
-                    </BreadcrumbItem>
-                  </>
-                )}
-              </BreadcrumbList>
-            </Breadcrumb>
-          </div>
-        </header>
+      <div className="relative flex min-h-0 w-full flex-1 flex-col bg-background">
         <div className="flex min-h-0 flex-1 flex-col">
           <Outlet />
         </div>
-      </SidebarInset>
+      </div>
     </SidebarProvider>
   )
 }