refactor(ui): unify low-level controls and expand design system
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 2m57s

This commit is contained in:
2026-03-03 15:50:15 +01:00
parent 9a43980412
commit db7a0cef96
47 changed files with 1404 additions and 711 deletions

View File

@@ -2,7 +2,18 @@
import { useState, useTransition } from 'react';
import type { SwotItem, Action, ActionLink, SwotCategory } from '@prisma/client';
import { Button, Badge, Modal, ModalFooter, Input, Textarea, Select } from '@/components/ui';
import {
Button,
Badge,
Modal,
ModalFooter,
Input,
Textarea,
Select,
IconButton,
IconEdit,
IconTrash,
} from '@/components/ui';
import { createAction, updateAction, deleteAction } from '@/actions/swot';
type ActionWithLinks = Action & {
@@ -202,44 +213,19 @@ export function ActionPanel({
<div className="flex items-start justify-between gap-2">
<h3 className="font-medium text-foreground line-clamp-2">{action.title}</h3>
<div className="flex shrink-0 items-center gap-1">
<button
<IconButton
icon={<IconEdit />}
label="Modifier"
onClick={() => openEditModal(action)}
className="rounded p-1 text-muted opacity-0 transition-opacity hover:bg-card-hover hover:text-foreground group-hover:opacity-100"
aria-label="Modifier"
>
<svg
className="h-3.5 w-3.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
/>
</svg>
</button>
<button
className="opacity-0 transition-opacity group-hover:opacity-100"
/>
<IconButton
icon={<IconTrash />}
label="Supprimer"
variant="destructive"
onClick={() => handleDelete(action.id)}
className="rounded p-1 text-muted opacity-0 transition-opacity hover:bg-destructive/10 hover:text-destructive group-hover:opacity-100"
aria-label="Supprimer"
>
<svg
className="h-3.5 w-3.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</button>
className="opacity-0 transition-opacity group-hover:opacity-100"
/>
</div>
</div>
@@ -377,35 +363,37 @@ export function ActionPanel({
<label className="mb-2 block text-sm font-medium text-foreground">Priorité</label>
<div className="flex gap-2">
{priorityLabels.map((label, index) => (
<button
<Button
key={index}
type="button"
variant="outline"
size="sm"
onClick={() => setPriority(index)}
className={`
flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition-colors
flex-1
${
priority === index
? index === 2
? 'border-destructive bg-destructive/10 text-destructive'
: index === 1
? 'border-warning bg-warning/10 text-warning'
: 'border-primary bg-primary/10 text-primary'
: 'border-primary bg-primary/10 text-primary'
: 'border-border bg-card text-muted hover:bg-card-hover'
}
`}
>
{label}
</button>
</Button>
))}
</div>
</div>
</div>
<ModalFooter>
<Button type="button" variant="outline" onClick={closeModal}>
<Button type="button" variant="outline" size="sm" onClick={closeModal}>
Annuler
</Button>
<Button type="submit" loading={isPending}>
<Button type="submit" size="sm" loading={isPending}>
{editingAction ? 'Enregistrer' : "Créer l'action"}
</Button>
</ModalFooter>