diff --git a/EXHAUSTIVE_TODO_LIST.md b/EXHAUSTIVE_TODO_LIST.md index 03609d403..598c6700e 100644 --- a/EXHAUSTIVE_TODO_LIST.md +++ b/EXHAUSTIVE_TODO_LIST.md @@ -3586,12 +3586,18 @@ Critical path dependencies: - **Result**: Tooltip component is ready to use, no dependency needed - **Rollback**: N/A (component already exists) -- [ ] **Action 10.4.1.2**: Add tooltips to advanced features +- [x] **Action 10.4.1.2**: Add tooltips to advanced features - **Scope**: Advanced UI elements - Add tooltips explaining usage - - **Dependencies**: Action 10.4.1.1 complete + - **Dependencies**: Action 10.4.1.1 complete ✅ - **Risk**: LOW 🔒 - - **Validation**: Tooltips appear on hover - - **Rollback**: Remove tooltips + - **Validation**: ✅ Tooltips added to advanced features: + - **AdvancedFilters component**: Added optional `tooltip` prop to explain what advanced filters are + - **LibraryPage view mode toggles**: Added tooltips to Grid and List view buttons explaining each view type + - **LibraryPage sort button**: Added tooltip explaining sorting functionality + - **LibraryPage bulk mode button**: Added tooltip explaining bulk selection mode (context-aware: different text when active vs inactive) + - **Tooltips use**: Tooltip component from `@/components/ui/tooltip` with hover trigger + - **Result**: Advanced features now have helpful tooltips that appear on hover, improving discoverability and reducing cognitive load + - **Rollback**: Remove tooltip props and Tooltip wrappers - [ ] **Action 10.4.1.3**: Create onboarding flow for new users (optional) - **Scope**: `apps/web/src/components/Onboarding.tsx` (create) - Guide new users through features diff --git a/apps/web/src/components/AdvancedFilters.tsx b/apps/web/src/components/AdvancedFilters.tsx index 2b5dde4c0..35a21fd29 100644 --- a/apps/web/src/components/AdvancedFilters.tsx +++ b/apps/web/src/components/AdvancedFilters.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { ChevronDown, ChevronUp, Filter } from 'lucide-react'; import { cn } from '@/lib/utils'; import { Collapsible } from './ui/collapsible'; +import { Tooltip } from './ui/tooltip'; export interface AdvancedFiltersProps { /** @@ -46,6 +47,12 @@ export interface AdvancedFiltersProps { * @default true */ showIcon?: boolean; + + /** + * Tooltip text to explain what advanced filters are + * If provided, wraps the trigger in a Tooltip component + */ + tooltip?: string; } /** @@ -87,6 +94,7 @@ export function AdvancedFilters({ className, contentClassName, showIcon = true, + tooltip, }: AdvancedFiltersProps) { const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen); @@ -103,16 +111,26 @@ export function AdvancedFilters({ const ChevronIcon = isOpen ? ChevronUp : ChevronDown; + const triggerContent = ( +
+ {showIcon && } + {label} + +
+ ); + + const collapsibleTrigger = tooltip ? ( + + {triggerContent} + + ) : ( + triggerContent + ); + return (
- {showIcon && } - {label} - -
- } + trigger={collapsibleTrigger} open={isOpen} onOpenChange={handleToggle} defaultOpen={defaultOpen} diff --git a/apps/web/src/features/library/pages/LibraryPage.tsx b/apps/web/src/features/library/pages/LibraryPage.tsx index 2562432e0..534c90d30 100644 --- a/apps/web/src/features/library/pages/LibraryPage.tsx +++ b/apps/web/src/features/library/pages/LibraryPage.tsx @@ -54,6 +54,7 @@ import { ConfirmationDialog } from '@/components/ui/confirmation-dialog'; import { LoadingState } from '@/components/ui/LoadingState'; import { Sidebar } from '@/components/ui/Sidebar'; import { BulkModeBanner } from '@/components/BulkModeBanner'; +import { Tooltip } from '@/components/ui/tooltip'; import { logger } from '@/utils/logger'; import { parseApiError } from '@/utils/apiErrorHandler'; import { cn } from '@/lib/utils'; @@ -370,49 +371,61 @@ export default function LibraryPagePremium() { )} - + +
- - + + + + + +
+ + + Trier par