Skip to content

🎨 Palette: Add tooltips to dashboard navigation #75

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
google-labs-jules wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

🎨 Palette: Add tooltips to dashboard navigation #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
90 changes: 57 additions & 33 deletions src/components/dashboard/FramerDashboardLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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">
Expand All @@ -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
Expand Down
Loading