From a87ede0ae77e61886d5bb662c7926a73d5381c6b Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 26 Jun 2026 22:38:16 +0000
Subject: [PATCH] feat(ux): Add tooltips to Topbar icon-only buttons

    This UX enhancement adds tooltips to the icon-only buttons (Notifications, User Account, Settings) in the application Topbar. While these buttons already had `aria-label` attributes for screen readers, they lacked visual context for sighted users, which is a standard UX best practice for icon-only actions.

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>
---
 src/components/nav/topbar.tsx | 68 +++++++++++++++++++++--------------
 1 file changed, 42 insertions(+), 26 deletions(-)

diff --git a/src/components/nav/topbar.tsx b/src/components/nav/topbar.tsx
index 9d1d921c..ae37214d 100644
--- a/src/components/nav/topbar.tsx
+++ b/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>My Account</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>
   )