From 9cde6c9bc34bb4601e4789aa58c1ea5097ea73be Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 15 Jun 2026 22:34:47 +0000
Subject: [PATCH 1/2] feat: add tooltips to Topbar icon buttons

- Wraps Notifications, User Menu, and Settings buttons in Topbar with Tooltip components.
- Improves accessibility and UX for sighted keyboard/mouse users.
- Records context-specific learning in Palette's journal.

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>
---
 .Jules/palette.md             |  3 ++
 src/components/nav/topbar.tsx | 68 +++++++++++++++++++++--------------
 2 files changed, 45 insertions(+), 26 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..4565fc06
--- /dev/null
+++ b/.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.
diff --git a/src/components/nav/topbar.tsx b/src/components/nav/topbar.tsx
index 9d1d921c..7d607535 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>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>
   )

From 827afe46547f0d1fbd73da0f5da22e4e18d36919 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 15 Jun 2026 22:44:56 +0000
Subject: [PATCH 2/2] feat: add tooltips to Topbar icon buttons

- Wraps Notifications, User Menu, and Settings buttons in Topbar with Tooltip components.
- Improves accessibility and UX for sighted keyboard/mouse users.
- Records context-specific learning in Palette's journal.

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>