From c7ad1c041651cdbe5099e2417036c0c749a686a6 Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Sat, 4 Oct 2025 06:25:04 +0200 Subject: [PATCH] feat: replace SVGs with lucide-react icons across components - Updated ProfilePage, AuthButton, RecentTasks, WelcomeSection, DesktopControls, MobileControls, and various Kanban components to use lucide-react icons instead of SVGs for improved consistency and maintainability. - Icons replaced include Check, User, Mail, Calendar, Shield, Save, X, Loader2, Filter, Target, List, Grid3X3, ChevronDown, ChevronRight, Edit, Trash2, and Plus. --- src/app/profile/page.tsx | 49 +++++-------------- src/components/AuthButton.tsx | 9 ++-- src/components/dashboard/RecentTasks.tsx | 5 +- src/components/dashboard/WelcomeSection.tsx | 18 ++----- src/components/kanban/DesktopControls.tsx | 43 +++------------- src/components/kanban/KanbanFilters.tsx | 16 +----- src/components/kanban/MobileControls.tsx | 33 +++---------- src/components/kanban/ObjectivesBoard.tsx | 10 ++-- src/components/kanban/SwimlanesBase.tsx | 10 ++-- .../kanban/filters/GeneralFilters.tsx | 23 ++------- .../settings/index/SettingsNavigation.tsx | 10 +--- src/components/settings/tags/TagsGrid.tsx | 14 ++---- .../settings/tags/TagsManagement.tsx | 5 +- src/components/ui/Dropdown.tsx | 10 ++-- src/components/ui/Header.tsx | 17 ++----- src/components/ui/RecentTaskTimeline.tsx | 5 +- src/components/ui/TagDisplay.tsx | 9 ++-- 17 files changed, 68 insertions(+), 218 deletions(-) diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx index 67cc6eb..1a598d0 100644 --- a/src/app/profile/page.tsx +++ b/src/app/profile/page.tsx @@ -7,6 +7,7 @@ import { Button } from '@/components/ui/Button' import { Input } from '@/components/ui/Input' import { Header } from '@/components/ui/Header' import { updateProfile, getProfile } from '@/actions/profile' +import { Check, User, Mail, Calendar, Shield, Save, X, Loader2 } from 'lucide-react' interface UserProfile { id: string @@ -155,16 +156,12 @@ export default function ProfilePage() { className="w-24 h-24 rounded-full object-cover border-4 border-[var(--primary)]/30 shadow-lg" />
- - - +
) : (
- - - +
)} @@ -182,9 +179,7 @@ export default function ProfilePage() { {profile.role}
- - - + Membre depuis {new Date(profile.createdAt).toLocaleDateString('fr-FR')} @@ -198,17 +193,13 @@ export default function ProfilePage() { {/* Informations générales */}

- - - + Informations générales

- - - +
{profile.email}
Email principal
@@ -216,9 +207,7 @@ export default function ProfilePage() {
- - - +
{profile.role}
Rôle utilisateur
@@ -227,9 +216,7 @@ export default function ProfilePage() { {profile.lastLoginAt && (
- - - +
{new Date(profile.lastLoginAt).toLocaleString('fr-FR')} @@ -244,9 +231,7 @@ export default function ProfilePage() { {/* Formulaire de modification */}

- - - + Modifier le profil

@@ -320,18 +305,14 @@ export default function ProfilePage() { {error && (
- - - + {error}
)} {success && (
- - - + {success}
)} @@ -344,16 +325,12 @@ export default function ProfilePage() { > {isPending ? (
- - - + Sauvegarde...
) : (
- - - + Sauvegarder les modifications
)} diff --git a/src/components/AuthButton.tsx b/src/components/AuthButton.tsx index 3091921..8a6eeaa 100644 --- a/src/components/AuthButton.tsx +++ b/src/components/AuthButton.tsx @@ -3,6 +3,7 @@ import { useSession, signOut } from 'next-auth/react' import { useRouter } from 'next/navigation' import { Button } from '@/components/ui/Button' +import { User, LogOut } from 'lucide-react' export function AuthButton() { const { data: session, status } = useSession() @@ -44,9 +45,7 @@ export function AuthButton() { className="w-10 h-10 rounded-full object-cover" /> ) : ( - - - + )}
) diff --git a/src/components/dashboard/RecentTasks.tsx b/src/components/dashboard/RecentTasks.tsx index f8103f5..ffd3ac4 100644 --- a/src/components/dashboard/RecentTasks.tsx +++ b/src/components/dashboard/RecentTasks.tsx @@ -5,6 +5,7 @@ import { Card } from '@/components/ui/Card'; import { RecentTaskTimeline } from '@/components/ui/RecentTaskTimeline'; import { useTasksContext } from '@/contexts/TasksContext'; import Link from 'next/link'; +import { Clipboard } from 'lucide-react'; interface RecentTasksProps { tasks: Task[]; @@ -49,9 +50,7 @@ export function RecentTasks({ tasks, selectedSources = [], hiddenSources = [] }: {recentTasks.length === 0 ? (
- - - +

Aucune tâche disponible

Créez votre première tâche pour commencer

diff --git a/src/components/dashboard/WelcomeSection.tsx b/src/components/dashboard/WelcomeSection.tsx index e74a80c..8373cb5 100644 --- a/src/components/dashboard/WelcomeSection.tsx +++ b/src/components/dashboard/WelcomeSection.tsx @@ -2,6 +2,7 @@ import { useSession } from 'next-auth/react'; import { useState, useEffect, useRef } from 'react'; +import { Check, User, ArrowRight } from 'lucide-react'; const WELCOME_GREETINGS = [ "Bienvenue", @@ -216,16 +217,12 @@ export function WelcomeSection() { className="relative w-20 h-20 rounded-full object-cover border-4 border-[var(--primary)]/40 shadow-2xl transition-all duration-500 group-hover:scale-110 group-hover:border-[var(--accent)]/60" />
- - - +
) : (
- - - +
)}
@@ -282,14 +279,9 @@ export function WelcomeSection() { >
- - - + />
diff --git a/src/components/kanban/DesktopControls.tsx b/src/components/kanban/DesktopControls.tsx index 29f4034..da5dee3 100644 --- a/src/components/kanban/DesktopControls.tsx +++ b/src/components/kanban/DesktopControls.tsx @@ -5,6 +5,7 @@ import { Button, ToggleButton, SearchInput, ControlPanel, ControlSection, Contro import { IntegrationFilter } from '@/components/dashboard/IntegrationFilter'; import { FontSizeToggle } from '@/components/ui/FontSizeToggle'; import type { KanbanFilters } from '@/lib/types'; +import { Filter, Target, Calendar, Plus, List, Grid3X3, Layout } from 'lucide-react'; interface DesktopControlsProps { showFilters: boolean; @@ -94,11 +95,7 @@ export function DesktopControls({ isActive={showFilters} count={activeFiltersCount} onClick={onToggleFilters} - icon={ - - - - } + icon={} > Filtres @@ -107,11 +104,7 @@ export function DesktopControls({ variant="accent" isActive={showObjectives} onClick={onToggleObjectives} - icon={ - - - - } + icon={} > Objectifs @@ -121,11 +114,7 @@ export function DesktopControls({ isActive={kanbanFilters.showWithDueDate} onClick={handleDueDateFilterToggle} title={kanbanFilters.showWithDueDate ? "Afficher toutes les tâches" : "Afficher seulement les tâches avec date de fin"} - icon={ - - - - } + icon={} /> @@ -144,15 +133,7 @@ export function DesktopControls({ isActive={compactView} onClick={onToggleCompactView} title={compactView ? "Vue détaillée" : "Vue compacte"} - icon={ - - {compactView ? ( - - ) : ( - - )} - - } + icon={compactView ? : } > {compactView ? 'Détaillée' : 'Compacte'} @@ -162,15 +143,7 @@ export function DesktopControls({ isActive={swimlanesByTags} onClick={onToggleSwimlanes} title={swimlanesByTags ? "Vue standard" : "Vue swimlanes"} - icon={ - - {swimlanesByTags ? ( - - ) : ( - - )} - - } + icon={swimlanesByTags ? : } > {swimlanesByTags ? 'Standard' : 'Swimlanes'} @@ -186,9 +159,7 @@ export function DesktopControls({ onClick={onCreateTask} className="flex items-center gap-2" > - - - + Nouvelle tâche diff --git a/src/components/kanban/KanbanFilters.tsx b/src/components/kanban/KanbanFilters.tsx index d6fb3fd..8e3c563 100644 --- a/src/components/kanban/KanbanFilters.tsx +++ b/src/components/kanban/KanbanFilters.tsx @@ -13,6 +13,7 @@ import { PriorityFilters } from './filters/PriorityFilters'; import { TagFilters } from './filters/TagFilters'; import { GeneralFilters } from './filters/GeneralFilters'; import { ColumnFilters } from './filters/ColumnFilters'; +import { Layout, Grid3X3 } from 'lucide-react'; import type { KanbanFilters } from '@/lib/types'; @@ -138,20 +139,7 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH isActive={!!filters.swimlanesByTags} onClick={handleSwimlanesToggle} title="Mode d'affichage" - icon={ - - {filters.swimlanesByTags ? ( - - ) : ( - - )} - - } + icon={filters.swimlanesByTags ? : } > {!filters.swimlanesByTags ? 'Normal' diff --git a/src/components/kanban/MobileControls.tsx b/src/components/kanban/MobileControls.tsx index 8c3cadc..77d3957 100644 --- a/src/components/kanban/MobileControls.tsx +++ b/src/components/kanban/MobileControls.tsx @@ -5,6 +5,7 @@ import { Button, ToggleButton, ControlPanel } from '@/components/ui'; import { IntegrationFilter } from '@/components/dashboard/IntegrationFilter'; import { FontSizeToggle } from '@/components/ui/FontSizeToggle'; import type { KanbanFilters } from '@/lib/types'; +import { Menu, Plus, Filter, Target, List, Grid3X3 } from 'lucide-react'; interface MobileControlsProps { showFilters: boolean; @@ -43,11 +44,7 @@ export function MobileControls({ isActive={isMenuOpen} count={activeFiltersCount} onClick={() => setIsMenuOpen(!isMenuOpen)} - icon={ - - - - } + icon={} > Options @@ -59,9 +56,7 @@ export function MobileControls({ className="flex items-center gap-2" size="sm" > - - - + Nouvelle
@@ -82,11 +77,7 @@ export function MobileControls({ onToggleFilters(); setIsMenuOpen(false); }} - icon={ - - - - } + icon={} > Filtres @@ -98,11 +89,7 @@ export function MobileControls({ onToggleObjectives(); setIsMenuOpen(false); }} - icon={ - - - - } + icon={} > Objectifs @@ -123,15 +110,7 @@ export function MobileControls({ setIsMenuOpen(false); }} className="w-full" - icon={ - - {compactView ? ( - - ) : ( - - )} - - } + icon={compactView ? : } > Vue {compactView ? 'détaillée' : 'compacte'} diff --git a/src/components/kanban/ObjectivesBoard.tsx b/src/components/kanban/ObjectivesBoard.tsx index 10a6644..f78245c 100644 --- a/src/components/kanban/ObjectivesBoard.tsx +++ b/src/components/kanban/ObjectivesBoard.tsx @@ -7,6 +7,7 @@ import { Task, TaskStatus } from '@/lib/types'; import { TaskCard } from './TaskCard'; import { Card, CardHeader, CardContent } from '@/components/ui/Card'; import { Badge } from '@/components/ui/Badge'; +import { ChevronDown } from 'lucide-react'; import { DndContext, DragEndEvent, @@ -156,16 +157,11 @@ export function ObjectivesBoard({ className="lg:hidden p-1 hover:bg-[var(--accent)]/20 rounded transition-colors" aria-label={isCollapsed ? "Développer" : "Réduire"} > - - - + />
diff --git a/src/components/kanban/SwimlanesBase.tsx b/src/components/kanban/SwimlanesBase.tsx index 47fc2cf..95029ea 100644 --- a/src/components/kanban/SwimlanesBase.tsx +++ b/src/components/kanban/SwimlanesBase.tsx @@ -8,6 +8,7 @@ import { useState } from 'react'; import { useUserPreferences } from '@/contexts/UserPreferencesContext'; import { useDragAndDrop } from '@/hooks/useDragAndDrop'; import { getAllStatuses, getTechStyle } from '@/lib/status-config'; +import { ChevronRight } from 'lucide-react'; import { Card, CardHeader, ColumnHeader, DropZone } from '@/components/ui'; import { DndContext, @@ -229,14 +230,9 @@ export function SwimlanesBase({ onClick={() => toggleSwimlane(swimlane.key)} className="flex items-center gap-2 hover:bg-[var(--card-hover)] rounded p-1 -m-1 transition-colors w-full" > - - - + /> {swimlane.color && (
- - - } + icon={} > Avec date de fin @@ -41,16 +33,7 @@ export function GeneralFilters({ - - - } + icon={} > Complété les 7 derniers jours diff --git a/src/components/settings/index/SettingsNavigation.tsx b/src/components/settings/index/SettingsNavigation.tsx index 242142b..31d166a 100644 --- a/src/components/settings/index/SettingsNavigation.tsx +++ b/src/components/settings/index/SettingsNavigation.tsx @@ -2,6 +2,7 @@ import { Card, CardContent } from '@/components/ui/Card'; import Link from 'next/link'; +import { ChevronRight } from 'lucide-react'; interface SettingsPage { href: string; @@ -50,14 +51,7 @@ export function SettingsNavigation({ settingsPages }: SettingsNavigationProps) {
- - - +
diff --git a/src/components/settings/tags/TagsGrid.tsx b/src/components/settings/tags/TagsGrid.tsx index 780f1ca..acd4142 100644 --- a/src/components/settings/tags/TagsGrid.tsx +++ b/src/components/settings/tags/TagsGrid.tsx @@ -3,6 +3,7 @@ import { Button } from '@/components/ui/Button'; import { Card } from '@/components/ui/Card'; import { Tag } from '@/lib/types'; +import { Edit, Trash2, Loader2 } from 'lucide-react'; interface TagsGridProps { tags: (Tag & { usage?: number })[]; @@ -74,9 +75,7 @@ export function TagsGrid({ onClick={() => onEditTag(tag)} className="h-7 w-7 p-0 text-[var(--muted-foreground)] hover:text-[var(--foreground)]" > - - - +
diff --git a/src/components/settings/tags/TagsManagement.tsx b/src/components/settings/tags/TagsManagement.tsx index 51e4c72..7338a57 100644 --- a/src/components/settings/tags/TagsManagement.tsx +++ b/src/components/settings/tags/TagsManagement.tsx @@ -9,6 +9,7 @@ import { TagForm } from '@/components/forms/TagForm'; import { TagsStats } from './TagsStats'; import { TagsFilters } from './TagsFilters'; import { TagsGrid } from './TagsGrid'; +import { Plus } from 'lucide-react'; interface TagsManagementProps { tags: (Tag & { usage: number })[]; @@ -112,9 +113,7 @@ export function TagsManagement({ tags, onRefreshTags, onDeleteTag }: TagsManagem onClick={() => setIsCreateModalOpen(true)} className="flex items-center gap-2" > - - - + Nouveau tag diff --git a/src/components/ui/Dropdown.tsx b/src/components/ui/Dropdown.tsx index 7c60bc0..e0754ef 100644 --- a/src/components/ui/Dropdown.tsx +++ b/src/components/ui/Dropdown.tsx @@ -3,6 +3,7 @@ import { useState, useRef, useEffect, useCallback, ReactNode } from 'react'; import { createPortal } from 'react-dom'; import { cn } from '@/lib/utils'; +import { ChevronDown } from 'lucide-react'; export type DropdownPlacement = | 'top-start' @@ -255,14 +256,9 @@ export function Dropdown({ )} > {trigger} - - - + /> ); diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx index 10630b4..5626e33 100644 --- a/src/components/ui/Header.tsx +++ b/src/components/ui/Header.tsx @@ -9,6 +9,7 @@ import { Theme, THEME_CONFIG, getThemeIcon } from '@/lib/ui-config'; import { useKeyboardShortcutsModal } from '@/contexts/KeyboardShortcutsContext'; import { AuthButton } from '@/components/AuthButton'; import { useSession, signOut } from 'next-auth/react'; +import { Check, X, Menu } from 'lucide-react'; interface HeaderProps { title?: string; @@ -144,9 +145,7 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s {themeOption.icon} {themeOption.label} {theme === themeOption.value && ( - - - + )} ))} @@ -163,13 +162,9 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s title="Toggle menu" > {mobileMenuOpen ? ( - - - + ) : ( - - - + )} @@ -259,9 +254,7 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s {themeOption.icon} {themeOption.label} {theme === themeOption.value && ( - - - + )} ))} diff --git a/src/components/ui/RecentTaskTimeline.tsx b/src/components/ui/RecentTaskTimeline.tsx index 6adcc7c..76bc608 100644 --- a/src/components/ui/RecentTaskTimeline.tsx +++ b/src/components/ui/RecentTaskTimeline.tsx @@ -5,6 +5,7 @@ import { TaskStatus } from '@/lib/types'; import { PriorityBadge } from './PriorityBadge'; import { TagDisplay } from './TagDisplay'; import { formatDateForDisplay } from '@/lib/date-utils'; +import { ChevronRight } from 'lucide-react'; interface RecentTaskTimelineProps extends HTMLAttributes { title: string; @@ -120,9 +121,7 @@ export function RecentTaskTimeline({ {/* Arrow indicator */}
- - - +
); diff --git a/src/components/ui/TagDisplay.tsx b/src/components/ui/TagDisplay.tsx index f9cf612..4fedc01 100644 --- a/src/components/ui/TagDisplay.tsx +++ b/src/components/ui/TagDisplay.tsx @@ -2,6 +2,7 @@ import { Tag } from '@/lib/types'; import { Badge } from './Badge'; +import { Edit, Trash2 } from 'lucide-react'; interface TagDisplayProps { tags: string[]; @@ -134,9 +135,7 @@ export function TagList({ className="p-1 text-slate-400 hover:text-cyan-400 transition-colors" title="Éditer le tag" > - - - + )} @@ -146,9 +145,7 @@ export function TagList({ className="p-1 text-slate-400 hover:text-red-400 transition-colors" title="Supprimer le tag" > - - - + )}