🎨 Palette: Add tooltips to Topbar icon buttons

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-06-15 - Missing Tooltips on Icon-Only Buttons in Topbar
+**Learning:** The Topbar component has icon-only buttons for Notifications, User Menu, and Settings. They use `aria-label`, which is good for screen readers, but sighted keyboard and mouse users don't get any visual context. The lack of tooltips is an accessibility and UX miss for sighted users who may not immediately recognize the icons, or who navigate with a keyboard and need visual confirmation of where their focus is.
+**Action:** Add tooltips to the icon-only buttons in the Topbar component, wrapping the `Button` components with `Tooltip` and `TooltipTrigger`, and providing a `TooltipContent` with a clear description of the button's action. This improves UX for all users.

src/components/nav/topbar.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { Search, Bell, User, Settings as SettingsIcon, Command } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -53,27 +54,37 @@ export function Topbar() {
       {/* Right Side - Actions */}
       <div className="flex items-center gap-2">
         {/* Notifications */}
-        <Button
-          variant="ghost"
-          size="icon"
-          className="text-neutral-medium hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors duration-150"
-          aria-label="Notifications"
-        >
-          <Bell className="size-4" />
-        </Button>
-
-        {/* User Menu */}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
+        <Tooltip>
+          <TooltipTrigger asChild>
             <Button
               variant="ghost"
               size="icon"
               className="text-neutral-medium hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors duration-150"
-              aria-label="User menu"
+              aria-label="Notifications"
             >
-              <User className="size-4" />
+              <Bell className="size-4" />
             </Button>
-          </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent>Notifications</TooltipContent>
+        </Tooltip>
+
+        {/* User Menu */}
+        <DropdownMenu>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="text-neutral-medium hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors duration-150"
+                  aria-label="User menu"
+                >
+                  <User className="size-4" />
+                </Button>
+              </DropdownMenuTrigger>
+            </TooltipTrigger>
+            <TooltipContent>User menu</TooltipContent>
+          </Tooltip>
           <DropdownMenuContent
             align="end"
             className="bg-[var(--background)] border border-[var(--border)] text-[var(--foreground)]"
@@ -94,17 +105,22 @@ export function Topbar() {
         </DropdownMenu>
 
         {/* Settings Link */}
-        <Button
-          variant="ghost"
-          size="icon"
-          className="text-neutral-medium hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors duration-150"
-          aria-label="Settings"
-          asChild
-        >
-          <a href="/settings">
-            <SettingsIcon className="size-4" />
-          </a>
-        </Button>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="text-neutral-medium hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors duration-150"
+              aria-label="Settings"
+              asChild
+            >
+              <a href="/settings">
+                <SettingsIcon className="size-4" />
+              </a>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Settings</TooltipContent>
+        </Tooltip>
       </div>
     </header>
   )