From 5b37f7804390cdc6ace3d16eed11e854c4a140d3 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 24 Jan 2026 23:20:03 +0000
Subject: [PATCH] feat(dashboard): add tooltips to navigation buttons

Add tooltips to the Notifications, Profile, Command, and Mobile Menu buttons in the dashboard layout.
Add `aria-label` to the Mobile Menu button for accessibility.

- Wraps icon-only buttons in `Tooltip` components.
- Ensures all interactive elements have accessible names and visual descriptions on hover.
- Improves dashboard navigation usability.
---
 .Jules/palette.md                             |  3 +
 .../dashboard/FramerDashboardLayout.tsx       | 90 ++++++++++++-------
 2 files changed, 60 insertions(+), 33 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..dc1f4d3
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-01-24 - Icon-only buttons missing tooltips
+**Learning:** While some icon-only buttons have `aria-label`, many lack visual tooltips (e.g., in `FramerDashboardLayout`), which hinders usability for sighted users who rely on hover for clarification.
+**Action:** Systematically check for and add `Tooltip` wrappers to all `size="icon"` buttons or buttons containing only icons, ensuring `TooltipProvider` context is available.
diff --git a/src/components/dashboard/FramerDashboardLayout.tsx b/src/components/dashboard/FramerDashboardLayout.tsx
index 6452f2f..ca9d59c 100644
--- a/src/components/dashboard/FramerDashboardLayout.tsx
+++ b/src/components/dashboard/FramerDashboardLayout.tsx
@@ -6,6 +6,7 @@ import Link from 'next/link'
 import { signOut as nextAuthSignOut } from 'next-auth/react'
 import { Bell, ChevronRight, Compass, Menu, Search, Sparkles, Users } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { FluxLensLogo } from '@/components/FluxLensLogo'
 import {
   AnimatedGradientBackground,
@@ -213,28 +214,38 @@ export function FramerDashboardLayout({
                     )}
                   </div>
                   <div className="hidden sm:block">
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        setCommandOpen((prev) => !prev)
-                      }}
-                      className="inline-flex items-center gap-1 rounded-full border border-white/10 bg-white/10 px-3 py-2 text-xs font-semibold text-white shadow-lg shadow-black/30 transition hover:bg-white/15"
-                    >
-                      <Compass className="size-4" />
-                      Command
-                    </button>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            setCommandOpen((prev) => !prev)
+                          }}
+                          className="inline-flex items-center gap-1 rounded-full border border-white/10 bg-white/10 px-3 py-2 text-xs font-semibold text-white shadow-lg shadow-black/30 transition hover:bg-white/15"
+                        >
+                          <Compass className="size-4" />
+                          Command
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>Open Command Palette (⌘K)</TooltipContent>
+                    </Tooltip>
                   </div>
                   <div ref={notifRef} className="relative">
-                    <button
-                      className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/15 bg-white/10 text-white shadow-sm hover:border-white/30"
-                      onClick={() => {
-                        setNotificationsOpen((prev) => !prev)
-                        setProfileOpen(false)
-                      }}
-                      aria-label="Notifications"
-                    >
-                      <Bell className="size-5" />
-                    </button>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/15 bg-white/10 text-white shadow-sm hover:border-white/30"
+                          onClick={() => {
+                            setNotificationsOpen((prev) => !prev)
+                            setProfileOpen(false)
+                          }}
+                          aria-label="Notifications"
+                        >
+                          <Bell className="size-5" />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>Notifications</TooltipContent>
+                    </Tooltip>
                     {notificationsOpen && (
                       <div className="absolute right-0 top-12 z-30 w-72 rounded-2xl border border-white/10 bg-neutral-900/95 p-3 shadow-lg shadow-black/30 backdrop-blur">
                         <div className="mb-2 flex items-center justify-between">
@@ -259,20 +270,33 @@ export function FramerDashboardLayout({
                       </div>
                     )}
                   </div>
-                  <button className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/15 bg-white/10 text-white shadow-sm hover:border-white/30 lg:hidden">
-                    <Menu className="size-5" />
-                  </button>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/15 bg-white/10 text-white shadow-sm hover:border-white/30 lg:hidden"
+                        aria-label="Open menu"
+                      >
+                        <Menu className="size-5" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>Open Menu</TooltipContent>
+                  </Tooltip>
                   <div ref={profileRef} className="relative hidden sm:block">
-                    <button
-                      className="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white text-sm font-semibold shadow-lg shadow-black/30 border border-white/10"
-                      onClick={() => {
-                        setProfileOpen((prev) => !prev)
-                        setNotificationsOpen(false)
-                      }}
-                      aria-label="Profile menu"
-                    >
-                      FL
-                    </button>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          className="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white text-sm font-semibold shadow-lg shadow-black/30 border border-white/10"
+                          onClick={() => {
+                            setProfileOpen((prev) => !prev)
+                            setNotificationsOpen(false)
+                          }}
+                          aria-label="Profile menu"
+                        >
+                          FL
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>Profile & Settings</TooltipContent>
+                    </Tooltip>
                     {profileOpen && (
                       <div className="absolute right-0 top-12 z-30 w-52 rounded-2xl border border-white/10 bg-neutral-900/95 p-2 shadow-lg shadow-black/30 backdrop-blur">
                         <button