feat: enhance workspace switcher and rail with tooltips and layout adjustments

web/components/workbench-header.tsx

@@ -21,7 +21,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { WorkspaceSwitcher } from "@/components/workspace-switcher"
 import { useAuth } from "@/components/auth-provider"
 import { useNotifications } from "@/components/notification-provider"
 import { useI18n } from "@/i18n/provider"
@@ -32,13 +31,7 @@ export function WorkbenchHeader() {
 
   return (
     <header className="flex h-(--header-height) shrink-0 items-center border-b border-border/70 bg-background/88 backdrop-blur supports-[backdrop-filter]:bg-background/76">
-      <div className="flex w-full min-w-0 items-center justify-between gap-3 px-3 lg:px-4">
-        <div className="min-w-0">
-          <WorkspaceSwitcher
-            currentWorkspace="workbench"
-            className="h-10 border-0 bg-transparent px-1.5 shadow-none hover:bg-muted"
-          />
-        </div>
+      <div className="flex w-full min-w-0 items-center justify-end gap-3 px-3 lg:px-4">
         <div className="flex min-w-0 items-center justify-end gap-2">
           <div className="hidden sm:block">
             <RealtimeConnectionStatus status={realtimeStatus} compact />

web/components/workbench-rail.tsx

@@ -6,6 +6,12 @@ import { usePathname } from "next/navigation"
 
 import { useI18n } from "@/i18n/provider"
 import { cn } from "@/lib/utils"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { WorkspaceSwitcher } from "@/components/workspace-switcher"
 
 const workbenchRailItems = [
   {
@@ -22,34 +28,56 @@ const workbenchRailItems = [
   },
 ]
 
+function normalizePath(path: string | null | undefined) {
+  if (!path) {
+    return ""
+  }
+  return path.length > 1 ? path.replace(/\/+$/, "") : path
+}
+
 export function WorkbenchRail() {
   const t = useI18n()
   const pathname = usePathname()
+  const currentPath = normalizePath(pathname)
 
   return (
     <aside className="flex h-svh w-16 shrink-0 flex-col items-center border-r border-border/70 bg-sidebar px-2 py-3 text-sidebar-foreground">
+      <div className="mb-4 flex w-full justify-center">
+        <WorkspaceSwitcher currentWorkspace="workbench" variant="rail" />
+      </div>
       <nav className="flex w-full flex-col items-center gap-2">
         {workbenchRailItems.map((item) => {
           const Icon = item.icon
+          const itemPath = normalizePath(item.href)
           const isActive =
             item.key === "conversations"
-              ? pathname === "/workbench" || pathname?.startsWith("/workbench/")
-              : pathname === item.href || pathname?.startsWith(`${item.href}/`)
+              ? currentPath === "/workbench"
+              : currentPath === itemPath || currentPath.startsWith(`${itemPath}/`)
+          const title = t(item.titleKey)
 
           return (
-            <Link
-              key={item.key}
-              href={item.href}
-              aria-label={t(item.titleKey)}
-              className={cn(
-                "flex h-13 w-12 flex-col items-center justify-center gap-1 rounded-lg text-[11px] leading-none text-sidebar-foreground/75 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-                isActive &&
-                  "bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary hover:text-sidebar-primary-foreground"
-              )}
-            >
-              <Icon className="size-4" />
-              <span className="max-w-full truncate">{t(item.titleKey)}</span>
-            </Link>
+            <Tooltip key={item.key}>
+              <TooltipTrigger
+                render={
+                  <Link
+                    href={item.href}
+                    aria-label={title}
+                    aria-current={isActive ? "page" : undefined}
+                    className={cn(
+                      "flex size-11 items-center justify-center rounded-lg bg-transparent text-sidebar-foreground/65 transition-colors hover:text-sidebar-foreground",
+                      isActive &&
+                        "bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary hover:text-sidebar-primary-foreground"
+                    )}
+                  />
+                }
+              >
+                <Icon className="size-4" />
+                <span className="sr-only">{title}</span>
+              </TooltipTrigger>
+              <TooltipContent side="right" align="center">
+                {title}
+              </TooltipContent>
+            </Tooltip>
           )
         })}
       </nav>

web/components/workspace-switcher.tsx

@@ -39,7 +39,7 @@ export const workspaceOptions: WorkspaceOption[] = [
 
 type WorkspaceSwitcherProps = {
   currentWorkspace: WorkspaceKey
-  variant?: "sidebar" | "header"
+  variant?: "sidebar" | "header" | "rail"
   className?: string
   trigger?: ReactElement
 }
@@ -58,26 +58,43 @@ export function WorkspaceSwitcher({
     variant === "header" &&
       "h-9 rounded-md border border-border/70 bg-background px-2.5 shadow-xs hover:bg-muted",
     variant === "sidebar" && "data-[slot=sidebar-menu-button]:p-1.5!",
+    variant === "rail" &&
+      "relative size-11 rounded-lg border-0 bg-transparent p-0 shadow-none hover:bg-sidebar-accent",
     className
   )
-  const triggerContent = (
-    <>
-      <img
-        src="/images/logo.svg"
-        alt={t("app.brand")}
-        width="32"
-        height="32"
-        className="size-7 shrink-0 object-contain"
-      />
-      <div className="grid min-w-0 flex-1 text-left leading-tight">
-        <span className="truncate text-sm font-semibold">{t("app.brand")}</span>
-        <span className="truncate text-xs text-muted-foreground">
-          {t(currentOption.labelKey)}
+  const triggerContent =
+    variant === "rail" ? (
+      <>
+        <img
+          src="/images/logo.svg"
+          alt={t("app.brand")}
+          width="32"
+          height="32"
+          className="size-7 shrink-0 object-contain"
+        />
+        <span className="sr-only">
+          {t("workspace.switchWorkspace")} - {t(currentOption.labelKey)}
         </span>
-      </div>
-      <ChevronsUpDownIcon className="ml-auto size-4 shrink-0 text-muted-foreground" />
-    </>
-  )
+        <ChevronsUpDownIcon className="absolute bottom-0.5 right-0.5 size-3 rounded-full bg-sidebar text-sidebar-foreground/70" />
+      </>
+    ) : (
+      <>
+        <img
+          src="/images/logo.svg"
+          alt={t("app.brand")}
+          width="32"
+          height="32"
+          className="size-7 shrink-0 object-contain"
+        />
+        <div className="grid min-w-0 flex-1 text-left leading-tight">
+          <span className="truncate text-sm font-semibold">{t("app.brand")}</span>
+          <span className="truncate text-xs text-muted-foreground">
+            {t(currentOption.labelKey)}
+          </span>
+        </div>
+        <ChevronsUpDownIcon className="ml-auto size-4 shrink-0 text-muted-foreground" />
+      </>
+    )
 
   return (
     <DropdownMenu>
@@ -90,7 +107,7 @@ export function WorkspaceSwitcher({
       </DropdownMenuTrigger>
       <DropdownMenuContent
         align="start"
-        side={variant === "sidebar" ? "right" : "bottom"}
+        side={variant === "sidebar" || variant === "rail" ? "right" : "bottom"}
         sideOffset={8}
         className="w-60 min-w-60"
       >