fix: improve sidebar hover line and add tooltip (#464)

Improves the sidebar collapse affordance. The edge rail now shows a
"Toggle Sidebar" tooltip with the keyboard shortcut. Consolidates the
toggle shortcut on Cmd/Ctrl+B and keeps Ctrl+S binding for users with
muscle memory.

| Before | After |
| ------- | ------- |
| <img width="896" height="1454" alt="CleanShot 2026-06-25 at 16 10
59@2x"
src="https://github.com/user-attachments/assets/578c980a-47d1-43aa-8a39-937c466c1aef"
/> | <img width="906" height="1484" alt="CleanShot 2026-06-25 at 16 10
44@2x"
src="https://github.com/user-attachments/assets/4a951673-fc9d-4c65-b6a1-2dc05b50770d"
/> |

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: drankou

src/features/dashboard/sidebar/rail.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { Kbd } from '@/ui/primitives/kbd'
+import { SidebarRail, useSidebar } from '@/ui/primitives/sidebar'
+
+export default function DashboardSidebarRail() {
+  const { state } = useSidebar()
+
+  return (
+    <SidebarRail
+      // Remount on toggle so the hover tooltip dismisses instead of lingering
+      // and re-anchoring when the rail moves out from under a stationary cursor.
+      key={state}
+      tooltip={
+        <>
+          <span className="text-fg-secondary text-xs">Toggle Sidebar</span>
+          <Kbd keys={['cmd', 'b']} clientOnlyProps={{ disable: true }} />
+        </>
+      }
+    />
+  )
+}

src/features/dashboard/sidebar/sidebar.tsx

@@ -1,19 +1,16 @@
-import {
-  Sidebar,
-  type SidebarProps,
-  SidebarRail,
-} from '@/ui/primitives/sidebar'
+import { Sidebar, type SidebarProps } from '@/ui/primitives/sidebar'
 import DashboardSidebarContent from './content'
 import DashboardSidebarFooter from './footer'
 import DashboardSidebarHeader from './header'
+import DashboardSidebarRail from './rail'
 
 export default function DashboardSidebar(props: SidebarProps) {
   return (
     <Sidebar collapsible="icon" {...props}>
       <DashboardSidebarHeader />
       <DashboardSidebarContent />
       <DashboardSidebarFooter />
-      <SidebarRail />
+      <DashboardSidebarRail />
     </Sidebar>
   )
 }

src/features/dashboard/sidebar/toggle.tsx

@@ -15,6 +15,7 @@ export default function DashboardSidebarToggle() {
 
   const isOpen = open || openMobile
 
+  // Undocumented fallback so users used to the old Ctrl+S shortcut aren't confused.
   useKeydown((event) => {
     if (event.key === 's' && event.ctrlKey) {
       event.preventDefault()
@@ -47,7 +48,7 @@ export default function DashboardSidebarToggle() {
           </motion.span>
         )}
       </AnimatePresence>
-      <ShortcutTooltip keys={['ctrl', 's']}>
+      <ShortcutTooltip keys={['cmd', 'b']}>
         <IconButton onClick={toggleSidebar}>
           {isOpen ? <CollapseLeftIcon /> : <ExpandRightIcon />}
         </IconButton>

src/ui/primitives/sidebar.tsx

@@ -249,6 +249,10 @@ function Sidebar({
           side === 'left'
             ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
             : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Hover line: 2px pseudo-element overlaying the border edge (no layout shift).
+          'after:pointer-events-none after:absolute after:inset-y-0 after:z-10 after:w-0.5 after:bg-stroke after:opacity-0 after:transition-opacity after:duration-150 after:content-[""]',
+          'group-data-[side=left]:after:-right-px group-data-[side=right]:after:-left-px',
+          'has-[[data-sidebar=rail]:hover]:after:opacity-100',
           // Adjust the padding for floating and inset variants.
           variant === 'floating' || variant === 'inset'
             ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
@@ -299,29 +303,51 @@ function SidebarTrigger({
   )
 }
 
-function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
+function SidebarRail({
+  className,
+  tooltip,
+  ...props
+}: React.ComponentProps<'button'> & { tooltip?: React.ReactNode }) {
   const { toggleSidebar } = useSidebar()
 
-  return (
+  const rail = (
     <button
       data-sidebar="rail"
       data-slot="sidebar-rail"
       aria-label="Toggle Sidebar"
       tabIndex={-1}
       onClick={toggleSidebar}
-      title="Toggle Sidebar"
       className={cn(
-        'hover:after:bg-stroke absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+        // Hover line is drawn on the Sidebar container (has-[rail:hover]); the rail
+        // itself is just the hit area.
         'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
         '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-        'hover:group-data-[collapsible=offcanvas]:bg-bg group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        'hover:group-data-[collapsible=offcanvas]:bg-bg group-data-[collapsible=offcanvas]:translate-x-0',
         '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
         '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
         className
       )}
       {...props}
     />
   )
+
+  if (!tooltip) {
+    return rail
+  }
+
+  return (
+    <Tooltip delayDuration={300}>
+      <TooltipTrigger asChild>{rail}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        className="flex items-center gap-2 py-1.5 pr-2 normal-case"
+      >
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  )
 }
 
 function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {