refactor(ui): unify low-level controls and expand design system

2026-03-03 15:50:15 +01:00
parent 9a43980412
commit db7a0cef96
47 changed files with 1404 additions and 711 deletions
--- a/src/components/collaboration/ShareModal.tsx
+++ b/src/components/collaboration/ShareModal.tsx
@@ -2,12 +2,17 @@

 import { useState, useTransition } from 'react';
 import Link from 'next/link';
-import { Modal } from '@/components/ui/Modal';
-import { Input } from '@/components/ui/Input';
-import { Button } from '@/components/ui/Button';
-import { Badge } from '@/components/ui/Badge';
-import { Avatar } from '@/components/ui/Avatar';
-import { Select } from '@/components/ui/Select';
+import {
+  Modal,
+  Input,
+  Button,
+  Badge,
+  Avatar,
+  Select,
+  SegmentedControl,
+  IconButton,
+  IconTrash,
+} from '@/components/ui';
 import { getTeamMembersForShare, type TeamWithMembers, type Share } from '@/lib/share-utils';
 import type { ShareRole } from '@prisma/client';

@@ -117,24 +122,20 @@ export function ShareModal({

        {isOwner && (
          <form onSubmit={handleShare} className="space-y-4">
-            <div className="flex gap-2 border-b border-border pb-3 flex-wrap">
-              {tabs.map((tab) => (
-                <button
-                  key={tab.value}
-                  type="button"
-                  onClick={() => {
-                    setShareType(tab.value);
-                    resetForm();
-                  }}
-                  className={`flex-1 min-w-0 rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
-                    shareType === tab.value
-                      ? 'bg-primary text-primary-foreground'
-                      : 'bg-card-hover text-muted hover:text-foreground'
-                  }`}
-                >
-                  {tab.icon} {tab.label}
-                </button>
-              ))}
+            <div className="border-b border-border pb-3">
+              <SegmentedControl
+                value={shareType}
+                onChange={(value) => {
+                  setShareType(value);
+                  resetForm();
+                }}
+                fullWidth
+                className="flex w-full gap-2 border-0 bg-transparent p-0"
+                options={tabs.map((tab) => ({
+                  value: tab.value,
+                  label: `${tab.icon} ${tab.label}`,
+                }))}
+              />
            </div>

            {shareType === 'email' && (
@@ -271,25 +272,13 @@ export function ShareModal({
                      {share.role === 'EDITOR' ? 'Éditeur' : 'Lecteur'}
                    </Badge>
                    {isOwner && (
-                      <button
+                      <IconButton
+                        icon={<IconTrash className="h-4 w-4" />}
+                        label="Retirer l'accès"
+                        variant="destructive"
                        onClick={() => handleRemove(share.user.id)}
                        disabled={isPending}
-                        className="rounded p-1 text-muted hover:bg-destructive/10 hover:text-destructive"
-                        title="Retirer l'accès"
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                          className="h-4 w-4"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z"
-                            clipRule="evenodd"
-                          />
-                        </svg>
-                      </button>
+                      />
                    )}
                  </div>
                </li>
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { auth } from '@/lib/auth';
-import { RocketIcon } from '@/components/ui';
+import { RocketIcon, getButtonClassName } from '@/components/ui';
 import { ThemeToggle } from './ThemeToggle';
 import { UserMenu } from './UserMenu';
 import { WorkshopsDropdown } from './WorkshopsDropdown';
@@ -36,7 +36,7 @@ export async function Header() {
          ) : (
            <Link
              href="/login"
-              className="flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary-hover"
+              className={getButtonClassName({ size: 'sm' })}
            >
              Connexion
            </Link>
--- a/src/components/layout/NavLinks.tsx
+++ b/src/components/layout/NavLinks.tsx
@@ -5,6 +5,7 @@ import { usePathname } from 'next/navigation';

 export function NavLinks() {
  const pathname = usePathname();
+  const isDev = process.env.NODE_ENV !== 'production';

  const isActiveLink = (path: string) => pathname.startsWith(path);

@@ -38,6 +39,17 @@ export function NavLinks() {
      >
        👥 Équipes
      </Link>
+
+      {isDev && (
+        <Link
+          href="/design-system"
+          className={`text-sm font-medium transition-colors ${
+            isActiveLink('/design-system') ? 'text-primary' : 'text-muted hover:text-foreground'
+          }`}
+        >
+          🎨 UI Guide
+        </Link>
+      )}
    </>
  );
 }
--- a/src/components/layout/UserMenu.tsx
+++ b/src/components/layout/UserMenu.tsx
@@ -2,9 +2,7 @@

 import Link from 'next/link';
 import { signOut } from 'next-auth/react';
-import { useState, useRef } from 'react';
-import { Avatar } from '@/components/ui';
-import { useClickOutside } from '@/hooks/useClickOutside';
+import { Avatar, DropdownMenu } from '@/components/ui';

 interface UserMenuProps {
  userName: string | null | undefined;
@@ -12,51 +10,45 @@ interface UserMenuProps {
 }

 export function UserMenu({ userName, userEmail }: UserMenuProps) {
-  const [menuOpen, setMenuOpen] = useState(false);
-  const userMenuRef = useRef<HTMLDivElement>(null);
-  useClickOutside(userMenuRef, () => setMenuOpen(false), menuOpen);
-
  return (
-    <div ref={userMenuRef} className="relative">
-      <button
-        onClick={() => setMenuOpen(!menuOpen)}
-        className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card pl-1.5 pr-3 transition-colors hover:bg-card-hover"
-      >
-        <Avatar email={userEmail} name={userName} size={24} />
-        <span className="text-sm font-medium text-foreground">
-          {userName || userEmail.split('@')[0]}
-        </span>
-        <svg
-          className={`h-4 w-4 text-muted transition-transform ${menuOpen ? 'rotate-180' : ''}`}
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
+    <DropdownMenu
+      panelClassName="absolute right-0 z-20 mt-2 w-48 rounded-lg border border-border bg-card py-1 shadow-lg"
+      trigger={({ open, toggle }) => (
+        <button
+          onClick={toggle}
+          className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card pl-1.5 pr-3 transition-colors hover:bg-card-hover"
        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-      </button>
-
-      {menuOpen && (
-        <div className="absolute right-0 z-20 mt-2 w-48 rounded-lg border border-border bg-card py-1 shadow-lg">
+          <Avatar email={userEmail} name={userName} size={24} />
+          <span className="text-sm font-medium text-foreground">
+            {userName || userEmail.split('@')[0]}
+          </span>
+          <svg
+            className={`h-4 w-4 text-muted transition-transform ${open ? 'rotate-180' : ''}`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+      )}
+    >
+      {({ close }) => (
+        <>
          <div className="border-b border-border px-4 py-2">
            <p className="text-xs text-muted">Connecté en tant que</p>
            <p className="truncate text-sm font-medium text-foreground">{userEmail}</p>
          </div>
          <Link
            href="/profile"
-            onClick={() => setMenuOpen(false)}
+            onClick={close}
            className="block w-full px-4 py-2 text-left text-sm text-foreground hover:bg-card-hover"
          >
            👤 Mon Profil
          </Link>
          <Link
            href="/users"
-            onClick={() => setMenuOpen(false)}
+            onClick={close}
            className="block w-full px-4 py-2 text-left text-sm text-foreground hover:bg-card-hover"
          >
            👥 Utilisateurs
@@ -67,8 +59,8 @@ export function UserMenu({ userName, userEmail }: UserMenuProps) {
          >
            Se déconnecter
          </button>
-        </div>
+        </>
      )}
-    </div>
+    </DropdownMenu>
  );
 }
--- a/src/components/layout/WorkshopsDropdown.tsx
+++ b/src/components/layout/WorkshopsDropdown.tsx
@@ -2,52 +2,46 @@

 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { useState, useRef } from 'react';
+import { DropdownMenu } from '@/components/ui';
 import { WORKSHOPS } from '@/lib/workshops';
-import { useClickOutside } from '@/hooks/useClickOutside';

 export function WorkshopsDropdown() {
-  const [workshopsOpen, setWorkshopsOpen] = useState(false);
-  const workshopsDropdownRef = useRef<HTMLDivElement>(null);
-  useClickOutside(workshopsDropdownRef, () => setWorkshopsOpen(false), workshopsOpen);
  const pathname = usePathname();

  const isActiveLink = (path: string) => pathname.startsWith(path);

  return (
-    <div className="relative" ref={workshopsDropdownRef}>
-      <button
-        onClick={() => setWorkshopsOpen(!workshopsOpen)}
-        className={`flex items-center gap-1 text-sm font-medium transition-colors ${
-          WORKSHOPS.some((w) => isActiveLink(w.path))
-            ? 'text-primary'
-            : 'text-muted hover:text-foreground'
-        }`}
-      >
-        Nouvel atelier
-        <svg
-          className={`h-4 w-4 transition-transform ${workshopsOpen ? 'rotate-180' : ''}`}
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
+    <DropdownMenu
+      panelClassName="absolute left-0 z-20 mt-2 w-56 rounded-lg border border-border bg-card py-1 shadow-lg"
+      trigger={({ open, toggle }) => (
+        <button
+          onClick={toggle}
+          className={`flex items-center gap-1 text-sm font-medium transition-colors ${
+            WORKSHOPS.some((w) => isActiveLink(w.path))
+              ? 'text-primary'
+              : 'text-muted hover:text-foreground'
+          }`}
        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-      </button>
-
-      {workshopsOpen && (
-        <div className="absolute left-0 z-20 mt-2 w-56 rounded-lg border border-border bg-card py-1 shadow-lg">
+          Nouvel atelier
+          <svg
+            className={`h-4 w-4 transition-transform ${open ? 'rotate-180' : ''}`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+      )}
+    >
+      {({ close }) => (
+        <>
          {WORKSHOPS.map((w) => (
            <Link
              key={w.id}
              href={w.newPath}
              className="flex items-center gap-3 px-4 py-2.5 text-sm text-foreground hover:bg-card-hover"
-              onClick={() => setWorkshopsOpen(false)}
+              onClick={close}
            >
              <span className="text-lg">{w.icon}</span>
              <div>
@@ -56,8 +50,8 @@ export function WorkshopsDropdown() {
              </div>
            </Link>
          ))}
-        </div>
+        </>
      )}
-    </div>
+    </DropdownMenu>
  );
 }
--- a/src/components/moving-motivators/MotivatorBoard.tsx
+++ b/src/components/moving-motivators/MotivatorBoard.tsx
@@ -17,6 +17,7 @@ import {
  arrayMove,
 } from '@dnd-kit/sortable';
 import type { MotivatorCard as MotivatorCardType } from '@/lib/types';
+import { Button } from '@/components/ui';
 import { MotivatorCard } from './MotivatorCard';
 import { MotivatorSummary } from './MotivatorSummary';
 import { InfluenceZone } from './InfluenceZone';
@@ -167,12 +168,9 @@ export function MotivatorBoard({ sessionId, cards: initialCards, canEdit }: Moti

          {/* Next button */}
          <div className="flex justify-end">
-            <button
-              onClick={nextStep}
-              className="px-6 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors"
-            >
+            <Button onClick={nextStep} className="px-6">
              Suivant →
-            </button>
+            </Button>
          </div>
        </div>
      )}
@@ -197,18 +195,12 @@ export function MotivatorBoard({ sessionId, cards: initialCards, canEdit }: Moti

          {/* Navigation buttons */}
          <div className="flex justify-between">
-            <button
-              onClick={prevStep}
-              className="px-6 py-2 border border-border rounded-lg font-medium hover:bg-card transition-colors"
-            >
+            <Button onClick={prevStep} variant="outline" className="px-6">
              ← Retour
-            </button>
-            <button
-              onClick={nextStep}
-              className="px-6 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors"
-            >
+            </Button>
+            <Button onClick={nextStep} className="px-6">
              Voir le récapitulatif →
-            </button>
+            </Button>
          </div>
        </div>
      )}
@@ -226,12 +218,9 @@ export function MotivatorBoard({ sessionId, cards: initialCards, canEdit }: Moti

          {/* Navigation buttons */}
          <div className="flex justify-start">
-            <button
-              onClick={prevStep}
-              className="px-6 py-2 border border-border rounded-lg font-medium hover:bg-card transition-colors"
-            >
+            <Button onClick={prevStep} variant="outline" className="px-6">
              ← Modifier
-            </button>
+            </Button>
          </div>
        </div>
      )}
--- a/src/components/okrs/OKRCard.tsx
+++ b/src/components/okrs/OKRCard.tsx
@@ -3,8 +3,7 @@
 import { useTransition } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui';
-import { Badge } from '@/components/ui';
+import { Badge, Card, CardContent, CardHeader, CardTitle, IconButton, IconTrash } from '@/components/ui';
 import { getGravatarUrl } from '@/lib/gravatar';
 import type { OKR, KeyResult, OKRStatus, KeyResultStatus } from '@/lib/types';
 import { OKR_STATUS_LABELS, KEY_RESULT_STATUS_LABELS } from '@/lib/types';
@@ -143,32 +142,20 @@ export function OKRCard({ okr, teamId, isAdmin = false, compact = false }: OKRCa
              </div>
              <div className="flex items-center gap-1.5 flex-shrink-0 relative z-10">
                {isAdmin && (
-                  <button
+                  <IconButton
+                    icon={<IconTrash className="h-3 w-3" />}
+                    label="Supprimer l'OKR"
+                    variant="destructive"
+                    size="xs"
                    onClick={handleDelete}
-                    className="h-5 w-5 p-0 flex items-center justify-center rounded hover:bg-destructive/10 transition-colors flex-shrink-0"
+                    className="flex-shrink-0"
                    style={{
                      color: 'var(--destructive)',
                      border: '1px solid color-mix(in srgb, var(--destructive) 40%, transparent)',
                      backgroundColor: 'color-mix(in srgb, var(--destructive) 5%, transparent)',
                    }}
                    disabled={isPending}
-                    title="Supprimer l'OKR"
-                  >
-                    <svg
-                      className="h-3 w-3"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2.5}
-                        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>
+                  />
                )}
                <Badge
                  style={{
@@ -255,32 +242,20 @@ export function OKRCard({ okr, teamId, isAdmin = false, compact = false }: OKRCa
          {/* Action Zone */}
          <div className="flex items-center gap-2 flex-shrink-0 relative z-10">
            {isAdmin && (
-              <button
+              <IconButton
+                icon={<IconTrash className="h-4 w-4" />}
+                label="Supprimer l'OKR"
+                variant="destructive"
+                size="sm"
                onClick={handleDelete}
-                className="h-6 w-6 p-0 flex items-center justify-center rounded hover:bg-destructive/10 transition-colors flex-shrink-0"
+                className="flex-shrink-0"
                style={{
                  color: 'var(--destructive)',
                  border: '1px solid color-mix(in srgb, var(--destructive) 40%, transparent)',
                  backgroundColor: 'color-mix(in srgb, var(--destructive) 5%, transparent)',
                }}
                disabled={isPending}
-                title="Supprimer l'OKR"
-              >
-                <svg
-                  className="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2.5}
-                    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>
+              />
            )}
            <Badge
              style={{
--- a/src/components/okrs/OKRForm.tsx
+++ b/src/components/okrs/OKRForm.tsx
@@ -478,7 +478,7 @@ export function OKRForm({ teamMembers, onSubmit, onCancel, initialData }: OKRFor
        <Button
          type="submit"
          disabled={submitting}
-          className="bg-[var(--purple)] text-white hover:opacity-90 border-transparent"
+          variant="brand"
        >
          {submitting
            ? initialData?.teamMemberId
--- a/src/components/swot/ActionPanel.tsx
+++ b/src/components/swot/ActionPanel.tsx
@@ -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>
--- a/src/components/swot/SwotBoard.tsx
+++ b/src/components/swot/SwotBoard.tsx
@@ -6,6 +6,7 @@ import type { SwotItem, Action, ActionLink, SwotCategory } from '@prisma/client'
 import { SwotQuadrant } from './SwotQuadrant';
 import { SwotCard } from './SwotCard';
 import { ActionPanel } from './ActionPanel';
+import { Button } from '@/components/ui';
 import { moveSwotItem } from '@/actions/swot';

 type ActionWithLinks = Action & {
@@ -94,12 +95,9 @@ export function SwotBoard({ sessionId, items, actions }: SwotBoardProps) {
              </p>
            </div>
          </div>
-          <button
-            onClick={exitLinkMode}
-            className="rounded-lg border border-border bg-card px-4 py-2 text-sm font-medium hover:bg-card-hover"
-          >
+          <Button onClick={exitLinkMode} variant="outline" size="sm">
            Annuler
-          </button>
+          </Button>
        </div>
      )}

--- a/src/components/swot/SwotCard.tsx
+++ b/src/components/swot/SwotCard.tsx
@@ -3,7 +3,7 @@
 import { forwardRef, memo, useState, useTransition } from 'react';
 import type { SwotItem, SwotCategory } from '@prisma/client';
 import { updateSwotItem, deleteSwotItem, duplicateSwotItem } from '@/actions/swot';
-import { IconEdit, IconTrash, IconDuplicate, IconCheck } from '@/components/ui';
+import { IconEdit, IconTrash, IconDuplicate, IconCheck, IconButton } from '@/components/ui';

 interface SwotCardProps {
  item: SwotItem;
@@ -114,30 +114,32 @@ export const SwotCard = memo(
              {/* Actions (visible on hover) */}
              {!linkMode && (
                <div className="absolute right-1 top-1 flex gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
-                  <button
+                  <IconButton
+                    icon={<IconEdit />}
+                    label="Modifier"
                    onClick={(e) => {
                      e.stopPropagation();
                      setIsEditing(true);
                    }}
-                    className="rounded p-1 text-muted hover:bg-card-hover hover:text-foreground"
-                    aria-label="Modifier"
-                  >
-                    <IconEdit />
-                  </button>
-                  <button
-                    onClick={(e) => { e.stopPropagation(); handleDuplicate(); }}
-                    className="rounded p-1 text-muted hover:bg-primary/10 hover:text-primary"
-                    aria-label="Dupliquer"
-                  >
-                    <IconDuplicate />
-                  </button>
-                  <button
-                    onClick={(e) => { e.stopPropagation(); handleDelete(); }}
-                    className="rounded p-1 text-muted hover:bg-destructive/10 hover:text-destructive"
-                    aria-label="Supprimer"
-                  >
-                    <IconTrash />
-                  </button>
+                  />
+                  <IconButton
+                    icon={<IconDuplicate />}
+                    label="Dupliquer"
+                    variant="primary"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDuplicate();
+                    }}
+                  />
+                  <IconButton
+                    icon={<IconTrash />}
+                    label="Supprimer"
+                    variant="destructive"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDelete();
+                    }}
+                  />
                </div>
              )}

--- a/src/components/swot/SwotQuadrant.tsx
+++ b/src/components/swot/SwotQuadrant.tsx
@@ -4,7 +4,7 @@ import { forwardRef, useState, useTransition, useRef, ReactNode } from 'react';
 import type { SwotCategory } from '@prisma/client';
 import { createSwotItem } from '@/actions/swot';
 import { QuadrantHelpPanel } from './QuadrantHelp';
-import { IconPlus, InlineFormActions } from '@/components/ui';
+import { IconPlus, InlineAddItem } from '@/components/ui';

 interface SwotQuadrantProps {
  category: SwotCategory;
@@ -66,16 +66,6 @@ export const SwotQuadrant = forwardRef<HTMLDivElement, SwotQuadrantProps>(
      });
    }

-    function handleKeyDown(e: React.KeyboardEvent) {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        handleAdd();
-      } else if (e.key === 'Escape') {
-        setIsAdding(false);
-        setNewContent('');
-      }
-    }
-
    return (
      <div
        ref={ref}
@@ -129,32 +119,18 @@ export const SwotQuadrant = forwardRef<HTMLDivElement, SwotQuadrantProps>(

          {/* Add Form */}
          {isAdding && (
-            <div className="rounded-lg border border-border bg-card p-2 shadow-sm">
-              <textarea
-                autoFocus
-                value={newContent}
-                onChange={(e) => setNewContent(e.target.value)}
-                onKeyDown={handleKeyDown}
-                onBlur={(e) => {
-                  // Don't trigger on blur if clicking on a button
-                  if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-                    handleAdd();
-                  }
-                }}
-                placeholder="Décrivez cet élément..."
-                className="w-full resize-none rounded border-0 bg-transparent p-1 text-sm text-foreground placeholder:text-muted focus:outline-none focus:ring-0"
-                rows={2}
-                disabled={isPending}
-              />
-              <InlineFormActions
-                onCancel={() => { setIsAdding(false); setNewContent(''); }}
-                onSubmit={handleAdd}
-                isPending={isPending}
-                disabled={!newContent.trim()}
-                submitColorClass={`${styles.text} hover:bg-white/50`}
-                className="mt-1"
-              />
-            </div>
+            <InlineAddItem
+              value={newContent}
+              onChange={setNewContent}
+              onSubmit={handleAdd}
+              onCancel={() => {
+                setIsAdding(false);
+                setNewContent('');
+              }}
+              isPending={isPending}
+              placeholder="Décrivez cet élément..."
+              submitColorClass={`${styles.text} hover:bg-white/50`}
+            />
          )}
        </div>
      </div>
--- a/src/components/teams/AddMemberModal.tsx
+++ b/src/components/teams/AddMemberModal.tsx
@@ -153,7 +153,7 @@ export function AddMemberModal({
          <Button
            type="submit"
            disabled={!selectedUserId || loading}
-            className="bg-[var(--purple)] text-white hover:opacity-90 border-transparent"
+            variant="brand"
          >
            {loading ? 'Ajout...' : 'Ajouter'}
          </Button>
--- a/src/components/teams/DeleteTeamButton.tsx
+++ b/src/components/teams/DeleteTeamButton.tsx
@@ -42,7 +42,11 @@ export function DeleteTeamButton({ teamId, teamName }: DeleteTeamButtonProps) {
      <Button
        onClick={() => setShowModal(true)}
        variant="outline"
-        className="text-destructive border-destructive hover:bg-destructive/10"
+        size="sm"
+        style={{
+          color: 'var(--destructive)',
+          borderColor: 'var(--destructive)',
+        }}
      >
        Supprimer l&apos;équipe
      </Button>
@@ -63,7 +67,7 @@ export function DeleteTeamButton({ teamId, teamName }: DeleteTeamButtonProps) {
            supprimés.
          </p>
          <ModalFooter>
-            <Button variant="ghost" onClick={() => setShowModal(false)} disabled={isPending}>
+            <Button variant="outline" onClick={() => setShowModal(false)} disabled={isPending}>
              Annuler
            </Button>
            <Button variant="destructive" onClick={handleDelete} disabled={isPending}>
--- a/src/components/teams/MembersList.tsx
+++ b/src/components/teams/MembersList.tsx
@@ -75,10 +75,7 @@ export function MembersList({ members, teamId, isAdmin, onMemberUpdate }: Member
      <div className="mb-4 flex items-center justify-between">
        <h3 className="text-lg font-semibold text-foreground">Membres ({members.length})</h3>
        {isAdmin && (
-          <Button
-            onClick={() => setAddMemberOpen(true)}
-            className="bg-[var(--purple)] text-white hover:opacity-90 border-transparent"
-          >
+          <Button onClick={() => setAddMemberOpen(true)} variant="brand" size="sm">
            Ajouter un membre
          </Button>
        )}
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, ButtonHTMLAttributes } from 'react';

-type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'brand';
 type ButtonSize = 'sm' | 'md' | 'lg';

 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -15,6 +15,7 @@ const variantStyles: Record<ButtonVariant, string> = {
  outline: 'bg-transparent text-foreground hover:bg-card-hover border-border',
  ghost: 'bg-transparent text-foreground hover:bg-card-hover border-transparent',
  destructive: 'bg-destructive text-white hover:bg-destructive/90 border-transparent',
+  brand: 'bg-[var(--purple)] text-white hover:opacity-90 border-transparent',
 };

 const sizeStyles: Record<ButtonSize, string> = {
@@ -23,6 +24,28 @@ const sizeStyles: Record<ButtonSize, string> = {
  lg: 'h-12 px-6 text-base gap-2',
 };

+interface GetButtonClassNameOptions {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+}
+
+export function getButtonClassName({
+  variant = 'primary',
+  size = 'md',
+  className = '',
+}: GetButtonClassNameOptions = {}) {
+  return `
+    inline-flex items-center justify-center rounded-lg border font-medium
+    transition-colors focus-visible:outline-none focus-visible:ring-2
+    focus-visible:ring-ring focus-visible:ring-offset-2
+    disabled:pointer-events-none disabled:opacity-50
+    ${variantStyles[variant]}
+    ${sizeStyles[size]}
+    ${className}
+  `;
+}
+
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    { className = '', variant = 'primary', size = 'md', loading, disabled, children, ...props },
@@ -32,15 +55,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
      <button
        ref={ref}
        disabled={disabled || loading}
-        className={`
-          inline-flex items-center justify-center rounded-lg border font-medium
-          transition-colors focus-visible:outline-none focus-visible:ring-2
-          focus-visible:ring-ring focus-visible:ring-offset-2
-          disabled:pointer-events-none disabled:opacity-50
-          ${variantStyles[variant]}
-          ${sizeStyles[size]}
-          ${className}
-        `}
+        className={getButtonClassName({ variant, size, className })}
        {...props}
      >
        {loading && (
--- a/src/components/ui/Disclosure.tsx
+++ b/src/components/ui/Disclosure.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import { ReactNode, useId, useState } from 'react';
+
+interface DisclosureProps {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+  children: ReactNode;
+}
+
+export function Disclosure({
+  title,
+  subtitle,
+  defaultOpen = false,
+  className = '',
+  children,
+}: DisclosureProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const contentId = useId();
+
+  return (
+    <div className={`rounded-lg border border-border bg-card-hover ${className}`}>
+      <button
+        type="button"
+        onClick={() => setIsOpen((prev) => !prev)}
+        aria-expanded={isOpen}
+        aria-controls={contentId}
+        className="flex w-full items-center justify-between px-4 py-2.5 text-left transition-colors hover:bg-card"
+      >
+        <div className="min-w-0">
+          <div className="text-sm font-semibold text-foreground">{title}</div>
+          {subtitle && <div className="text-xs text-muted">{subtitle}</div>}
+        </div>
+        <svg
+          className={`h-4 w-4 shrink-0 text-muted transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      {isOpen && (
+        <div id={contentId} className="border-t border-border px-4 py-3">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/components/ui/DropdownMenu.tsx
+++ b/src/components/ui/DropdownMenu.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { ReactNode, useRef, useState } from 'react';
+import { useClickOutside } from '@/hooks/useClickOutside';
+
+interface DropdownMenuProps {
+  trigger: (options: { open: boolean; toggle: () => void }) => ReactNode;
+  children: (options: { close: () => void }) => ReactNode;
+  panelClassName?: string;
+  className?: string;
+}
+
+export function DropdownMenu({
+  trigger,
+  children,
+  panelClassName = '',
+  className = '',
+}: DropdownMenuProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useClickOutside(ref, () => setOpen(false), open);
+
+  return (
+    <div ref={ref} className={`relative ${className}`}>
+      {trigger({ open, toggle: () => setOpen((prev) => !prev) })}
+      {open && <div className={panelClassName}>{children({ close: () => setOpen(false) })}</div>}
+    </div>
+  );
+}
--- a/src/components/ui/FormField.tsx
+++ b/src/components/ui/FormField.tsx
@@ -0,0 +1,67 @@
+import { ChangeEventHandler, ReactNode } from 'react';
+import { Input } from './Input';
+
+interface FormFieldProps {
+  id?: string;
+  label?: string;
+  error?: string;
+  hint?: string;
+  className?: string;
+  children: ReactNode;
+}
+
+export function FormField({ id, label, error, hint, className = '', children }: FormFieldProps) {
+  return (
+    <div className={className || 'w-full'}>
+      {label && (
+        <label htmlFor={id} className="mb-2 block text-sm font-medium text-foreground">
+          {label}
+        </label>
+      )}
+      {children}
+      {hint && !error && <p className="mt-1 text-xs text-muted">{hint}</p>}
+      {error && <p className="mt-1.5 text-sm text-destructive">{error}</p>}
+    </div>
+  );
+}
+
+type BaseInputProps = {
+  id?: string;
+  name?: string;
+  value?: string | number;
+  defaultValue?: string | number;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  required?: boolean;
+  disabled?: boolean;
+  min?: string | number;
+  max?: string | number;
+  step?: string | number;
+  className?: string;
+};
+
+interface DateInputProps extends BaseInputProps {
+  label?: string;
+  error?: string;
+}
+
+export function DateInput({ label, error, className = '', ...props }: DateInputProps) {
+  return (
+    <FormField id={props.id} label={label} error={error}>
+      <Input type="date" className={className} {...props} />
+    </FormField>
+  );
+}
+
+interface NumberInputProps extends BaseInputProps {
+  label?: string;
+  error?: string;
+  hint?: string;
+}
+
+export function NumberInput({ label, error, hint, className = '', ...props }: NumberInputProps) {
+  return (
+    <FormField id={props.id} label={label} error={error} hint={hint}>
+      <Input type="number" className={className} {...props} />
+    </FormField>
+  );
+}
--- a/src/components/ui/IconButton.tsx
+++ b/src/components/ui/IconButton.tsx
@@ -0,0 +1,53 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type IconButtonVariant = 'default' | 'primary' | 'destructive' | 'ghost';
+type IconButtonSize = 'xs' | 'sm' | 'md';
+
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: ReactNode;
+  label: string;
+  variant?: IconButtonVariant;
+  size?: IconButtonSize;
+}
+
+const variantStyles: Record<IconButtonVariant, string> = {
+  default: 'text-muted hover:bg-card-hover hover:text-foreground border-transparent',
+  primary: 'text-muted hover:bg-primary/10 hover:text-primary border-transparent',
+  destructive:
+    'text-muted hover:bg-destructive/10 hover:text-destructive border-transparent',
+  ghost: 'text-muted hover:text-foreground border-transparent',
+};
+
+const sizeStyles: Record<IconButtonSize, string> = {
+  xs: 'h-6 w-6',
+  sm: 'h-7 w-7',
+  md: 'h-8 w-8',
+};
+
+export function IconButton({
+  icon,
+  label,
+  variant = 'default',
+  size = 'sm',
+  className = '',
+  type = 'button',
+  ...props
+}: IconButtonProps) {
+  return (
+    <button
+      type={type}
+      aria-label={label}
+      title={label}
+      className={`
+        inline-flex items-center justify-center rounded-md border
+        transition-colors disabled:pointer-events-none disabled:opacity-50
+        ${sizeStyles[size]}
+        ${variantStyles[variant]}
+        ${className}
+      `}
+      {...props}
+    >
+      {icon}
+    </button>
+  );
+}
--- a/src/components/ui/InlineAddItem.tsx
+++ b/src/components/ui/InlineAddItem.tsx
@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import { InlineFormActions } from './InlineFormActions';
+
+interface InlineAddItemProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  onCancel: () => void;
+  isPending: boolean;
+  placeholder?: string;
+  rows?: number;
+  extra?: ReactNode;
+  submitColorClass?: string;
+  className?: string;
+}
+
+export function InlineAddItem({
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  isPending,
+  placeholder,
+  rows = 2,
+  extra,
+  submitColorClass,
+  className = '',
+}: InlineAddItemProps) {
+  return (
+    <div className={`rounded-lg border border-border bg-card p-2 shadow-sm ${className}`}>
+      <textarea
+        autoFocus
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            onSubmit();
+          } else if (e.key === 'Escape') {
+            onCancel();
+          }
+        }}
+        placeholder={placeholder}
+        className="w-full resize-none rounded border-0 bg-transparent p-1 text-sm text-foreground placeholder:text-muted focus:outline-none focus:ring-0"
+        rows={rows}
+        disabled={isPending}
+      />
+      {extra}
+      <InlineFormActions
+        onCancel={onCancel}
+        onSubmit={onSubmit}
+        isPending={isPending}
+        disabled={!value.trim()}
+        submitColorClass={submitColorClass}
+        className="mt-1"
+      />
+    </div>
+  );
+}
--- a/src/components/ui/InlineEditor.tsx
+++ b/src/components/ui/InlineEditor.tsx
@@ -0,0 +1,68 @@
+import { ReactNode } from 'react';
+
+interface InlineEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSave: () => void;
+  onCancel: () => void;
+  isPending: boolean;
+  placeholder?: string;
+  rows?: number;
+  submitLabel?: string;
+  footer?: ReactNode;
+}
+
+export function InlineEditor({
+  value,
+  onChange,
+  onSave,
+  onCancel,
+  isPending,
+  placeholder,
+  rows = 2,
+  submitLabel = 'Enregistrer',
+  footer,
+}: InlineEditorProps) {
+  return (
+    <div className="space-y-2">
+      <textarea
+        autoFocus
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+            e.preventDefault();
+            onSave();
+          } else if (e.key === 'Escape') {
+            onCancel();
+          }
+        }}
+        className="w-full resize-none rounded border-0 bg-transparent p-0 text-sm text-foreground focus:outline-none focus:ring-0"
+        rows={rows}
+        disabled={isPending}
+        placeholder={placeholder}
+      />
+      {footer}
+      {!footer && (
+        <div className="flex justify-end gap-2">
+          <button
+            type="button"
+            className="rounded px-2 py-1 text-xs text-muted hover:bg-card-hover"
+            onClick={onCancel}
+            disabled={isPending}
+          >
+            Annuler
+          </button>
+          <button
+            type="button"
+            className="rounded px-2 py-1 text-xs font-medium text-primary hover:bg-primary/10"
+            onClick={onSave}
+            disabled={isPending || !value.trim()}
+          >
+            {submitLabel}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/components/ui/InlineFormActions.tsx
+++ b/src/components/ui/InlineFormActions.tsx
@@ -1,3 +1,5 @@
+import { Button } from './Button';
+
 interface InlineFormActionsProps {
  onCancel: () => void;
  onSubmit: () => void;
@@ -19,21 +21,27 @@ export function InlineFormActions({
 }: InlineFormActionsProps) {
  return (
    <div className={`flex justify-end gap-1 ${className}`}>
-      <button
+      <Button
+        type="button"
+        size="sm"
+        variant="ghost"
        onClick={onCancel}
-        className="rounded px-2 py-1 text-xs text-muted hover:bg-card-hover"
+        className="h-7 px-2 text-xs text-muted"
        disabled={isPending}
      >
        Annuler
-      </button>
-      <button
+      </Button>
+      <Button
+        type="button"
+        size="sm"
+        variant="ghost"
        onMouseDown={(e) => e.preventDefault()}
        onClick={onSubmit}
        disabled={isPending || disabled}
-        className={`rounded px-2 py-1 text-xs font-medium disabled:opacity-50 ${submitColorClass}`}
+        className={`h-7 px-2 text-xs ${submitColorClass}`}
      >
        {isPending ? '...' : submitLabel}
-      </button>
+      </Button>
    </div>
  );
 }
--- a/src/components/ui/SegmentedControl.tsx
+++ b/src/components/ui/SegmentedControl.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+export interface SegmentedOption<T extends string> {
+  value: T;
+  label: ReactNode;
+  disabled?: boolean;
+}
+
+interface SegmentedControlProps<T extends string> {
+  value: T;
+  options: SegmentedOption<T>[];
+  onChange: (value: T) => void;
+  size?: 'sm' | 'md';
+  fullWidth?: boolean;
+  className?: string;
+}
+
+const sizeStyles = {
+  sm: 'px-3 py-1.5 text-sm',
+  md: 'px-4 py-2 text-sm',
+} as const;
+
+export function SegmentedControl<T extends string>({
+  value,
+  options,
+  onChange,
+  size = 'md',
+  fullWidth = false,
+  className = '',
+}: SegmentedControlProps<T>) {
+  return (
+    <div
+      className={`inline-flex items-center gap-1 rounded-lg border border-border bg-card p-1 ${className}`}
+    >
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          disabled={option.disabled}
+          onClick={() => onChange(option.value)}
+          className={`
+            rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50
+            ${sizeStyles[size]}
+            ${fullWidth ? 'min-w-0 flex-1' : ''}
+            ${
+              value === option.value
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted hover:bg-card-hover hover:text-foreground'
+            }
+          `}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -1,8 +1,10 @@
 export { Avatar } from './Avatar';
 export { Badge } from './Badge';
-export { Button } from './Button';
+export { Button, getButtonClassName } from './Button';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
 export { CollaboratorDisplay } from './CollaboratorDisplay';
+export { Disclosure } from './Disclosure';
+export { DropdownMenu } from './DropdownMenu';
 export { EditableTitle } from './EditableTitle';
 export {
  EditableSessionTitle,
@@ -13,6 +15,9 @@ export {
  EditableGifMoodTitle,
 } from './EditableTitles';
 export { IconEdit, IconTrash, IconDuplicate, IconPlus, IconCheck, IconClose } from './Icons';
+export { IconButton } from './IconButton';
+export { InlineAddItem } from './InlineAddItem';
+export { InlineEditor } from './InlineEditor';
 export { InlineFormActions } from './InlineFormActions';
 export { PageHeader } from './PageHeader';
 export { SessionPageHeader } from './SessionPageHeader';
@@ -22,6 +27,8 @@ export { Modal, ModalFooter } from './Modal';
 export { RocketIcon } from './RocketIcon';
 export { Select } from './Select';
 export type { SelectOption } from './Select';
+export { SegmentedControl } from './SegmentedControl';
 export { Textarea } from './Textarea';
 export { ToggleGroup } from './ToggleGroup';
 export type { ToggleOption } from './ToggleGroup';
+export { FormField, DateInput, NumberInput } from './FormField';
--- a/src/components/weather/WeatherInfoPanel.tsx
+++ b/src/components/weather/WeatherInfoPanel.tsx
@@ -1,58 +1,36 @@
 'use client';

-import { useState } from 'react';
+import { Disclosure } from '@/components/ui';

 export function WeatherInfoPanel() {
-  const [isOpen, setIsOpen] = useState(false);
-
  return (
-    <div className="mb-6 rounded-lg border border-border bg-card-hover">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="w-full flex items-center justify-between px-4 py-2.5 text-left transition-colors hover:bg-card"
-      >
-        <h3 className="text-sm font-semibold text-foreground">
-          Les 4 axes de la météo personnelle
-        </h3>
-        <svg
-          className={`h-4 w-4 text-muted transition-transform ${isOpen ? 'rotate-180' : ''}`}
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-        </svg>
-      </button>
-      {isOpen && (
-        <div className="border-t border-border px-4 py-3">
-          <div className="grid gap-2.5 sm:grid-cols-2 lg:grid-cols-4">
-            <div>
-              <p className="text-xs font-medium text-foreground mb-0.5">☀️ Performance</p>
-              <p className="text-xs text-muted leading-relaxed">
-                Votre performance personnelle et l&apos;atteinte de vos objectifs
-              </p>
-            </div>
-            <div>
-              <p className="text-xs font-medium text-foreground mb-0.5">😊 Moral</p>
-              <p className="text-xs text-muted leading-relaxed">
-                Votre moral actuel et votre ressenti
-              </p>
-            </div>
-            <div>
-              <p className="text-xs font-medium text-foreground mb-0.5">🌊 Flux</p>
-              <p className="text-xs text-muted leading-relaxed">
-                Votre flux de travail personnel et les blocages éventuels
-              </p>
-            </div>
-            <div>
-              <p className="text-xs font-medium text-foreground mb-0.5">💎 Création de valeur</p>
-              <p className="text-xs text-muted leading-relaxed">
-                Votre création de valeur et votre apport
-              </p>
-            </div>
-          </div>
+    <Disclosure title="Les 4 axes de la météo personnelle" className="mb-6">
+      <div className="grid gap-2.5 sm:grid-cols-2 lg:grid-cols-4">
+        <div>
+          <p className="mb-0.5 text-xs font-medium text-foreground">☀️ Performance</p>
+          <p className="text-xs leading-relaxed text-muted">
+            Votre performance personnelle et l&apos;atteinte de vos objectifs
+          </p>
        </div>
-      )}
-    </div>
+        <div>
+          <p className="mb-0.5 text-xs font-medium text-foreground">😊 Moral</p>
+          <p className="text-xs leading-relaxed text-muted">
+            Votre moral actuel et votre ressenti
+          </p>
+        </div>
+        <div>
+          <p className="mb-0.5 text-xs font-medium text-foreground">🌊 Flux</p>
+          <p className="text-xs leading-relaxed text-muted">
+            Votre flux de travail personnel et les blocages éventuels
+          </p>
+        </div>
+        <div>
+          <p className="mb-0.5 text-xs font-medium text-foreground">💎 Création de valeur</p>
+          <p className="text-xs leading-relaxed text-muted">
+            Votre création de valeur et votre apport
+          </p>
+        </div>
+      </div>
+    </Disclosure>
  );
 }
--- a/src/components/weather/WeatherTrendChart.tsx
+++ b/src/components/weather/WeatherTrendChart.tsx
@@ -1,6 +1,7 @@
 'use client';

 import { useState } from 'react';
+import { Disclosure } from '@/components/ui';
 import type { WeatherHistoryPoint } from '@/services/weather';

 interface WeatherTrendChartProps {
@@ -63,7 +64,6 @@ function buildPath(
 const Y_TICKS = [1, 5, 10, 14, 19];

 export function WeatherTrendChart({ data, currentSessionId }: WeatherTrendChartProps) {
-  const [isOpen, setIsOpen] = useState(false);
  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);

  if (data.length < 2) return null;
@@ -71,27 +71,16 @@ export function WeatherTrendChart({ data, currentSessionId }: WeatherTrendChartP
  const hoveredPt = hoveredIdx !== null ? data[hoveredIdx] : null;

  return (
-    <div className="mb-6 rounded-lg border border-border bg-card-hover">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="w-full flex items-center justify-between px-4 py-2.5 text-left transition-colors hover:bg-card"
-      >
-        <h3 className="text-sm font-semibold text-foreground">
+    <Disclosure
+      className="mb-6"
+      title={
+        <>
          Évolution dans le temps
          <span className="ml-2 text-xs font-normal text-muted">{data.length} sessions</span>
-        </h3>
-        <svg
-          className={`h-4 w-4 text-muted transition-transform ${isOpen ? 'rotate-180' : ''}`}
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-        </svg>
-      </button>
-
-      {isOpen && (
-        <div className="border-t border-border px-4 py-4">
+        </>
+      }
+    >
+      <div className="py-1">
          {/* Legend */}
          <div className="flex flex-wrap gap-4 mb-3">
            {INDICATORS.map((ind) => (
@@ -300,8 +289,7 @@ export function WeatherTrendChart({ data, currentSessionId }: WeatherTrendChartP
          <p className="text-[10px] text-muted mt-1 text-right">
            Score 1 = ☀️ (meilleur) · Score 19 = dégradé
          </p>
-        </div>
-      )}
-    </div>
+      </div>
+    </Disclosure>
  );
 }
--- a/src/components/weekly-checkin/WeeklyCheckInCard.tsx
+++ b/src/components/weekly-checkin/WeeklyCheckInCard.tsx
@@ -4,7 +4,7 @@ import { forwardRef, memo, useState, useTransition } from 'react';
 import type { WeeklyCheckInItem } from '@prisma/client';
 import { updateWeeklyCheckInItem, deleteWeeklyCheckInItem } from '@/actions/weekly-checkin';
 import { WEEKLY_CHECK_IN_BY_CATEGORY, EMOTION_BY_TYPE } from '@/lib/types';
-import { IconEdit, IconTrash, InlineFormActions } from '@/components/ui';
+import { IconEdit, IconTrash, IconButton, InlineFormActions } from '@/components/ui';
 import { Select } from '@/components/ui/Select';

 interface WeeklyCheckInCardProps {
@@ -144,23 +144,23 @@ export const WeeklyCheckInCard = memo(

              {/* Actions (visible on hover) */}
              <div className="absolute right-1 top-1 flex gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
-                <button
+                <IconButton
+                  icon={<IconEdit />}
+                  label="Modifier"
                  onClick={(e) => {
                    e.stopPropagation();
                    setIsEditing(true);
                  }}
-                  className="rounded p-1 text-muted hover:bg-card-hover hover:text-foreground"
-                  aria-label="Modifier"
-                >
-                  <IconEdit />
-                </button>
-                <button
-                  onClick={(e) => { e.stopPropagation(); handleDelete(); }}
-                  className="rounded p-1 text-muted hover:bg-destructive/10 hover:text-destructive"
-                  aria-label="Supprimer"
-                >
-                  <IconTrash />
-                </button>
+                />
+                <IconButton
+                  icon={<IconTrash />}
+                  label="Supprimer"
+                  variant="destructive"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleDelete();
+                  }}
+                />
              </div>
            </>
          )}
--- a/src/components/weekly-checkin/WeeklyCheckInSection.tsx
+++ b/src/components/weekly-checkin/WeeklyCheckInSection.tsx
@@ -4,7 +4,7 @@ import { forwardRef, useState, useTransition, useRef, ReactNode } from 'react';
 import type { WeeklyCheckInCategory } from '@prisma/client';
 import { createWeeklyCheckInItem } from '@/actions/weekly-checkin';
 import { WEEKLY_CHECK_IN_BY_CATEGORY, EMOTION_BY_TYPE } from '@/lib/types';
-import { IconPlus, InlineFormActions } from '@/components/ui';
+import { IconPlus, InlineAddItem } from '@/components/ui';
 import { Select } from '@/components/ui/Select';

 interface WeeklyCheckInSectionProps {
@@ -44,17 +44,6 @@ export const WeeklyCheckInSection = forwardRef<HTMLDivElement, WeeklyCheckInSect
      });
    }

-    function handleKeyDown(e: React.KeyboardEvent) {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        handleAdd();
-      } else if (e.key === 'Escape') {
-        setIsAdding(false);
-        setNewContent('');
-        setNewEmotion('NONE');
-      }
-    }
-
    return (
      <div
        ref={ref}
@@ -93,53 +82,31 @@ export const WeeklyCheckInSection = forwardRef<HTMLDivElement, WeeklyCheckInSect

          {/* Add Form */}
          {isAdding && (
-            <div
-              className="rounded-lg border border-border bg-card p-2 shadow-sm"
-              onBlur={(e) => {
-                // Don't close if focus moves to another element in this container
-                const currentTarget = e.currentTarget;
-                const relatedTarget = e.relatedTarget as Node | null;
-                if (relatedTarget && currentTarget.contains(relatedTarget)) {
-                  return;
-                }
-                // Only add on blur if content is not empty
-                if (newContent.trim()) {
-                  handleAdd();
-                } else {
-                  setIsAdding(false);
-                  setNewContent('');
-                  setNewEmotion('NONE');
-                }
+            <InlineAddItem
+              value={newContent}
+              onChange={setNewContent}
+              onSubmit={handleAdd}
+              onCancel={() => {
+                setIsAdding(false);
+                setNewContent('');
+                setNewEmotion('NONE');
              }}
-            >
-              <textarea
-                autoFocus
-                value={newContent}
-                onChange={(e) => setNewContent(e.target.value)}
-                onKeyDown={handleKeyDown}
-                placeholder={`Décrivez ${config.title.toLowerCase()}...`}
-                className="w-full resize-none rounded border-0 bg-transparent p-1 text-sm text-foreground placeholder:text-muted focus:outline-none focus:ring-0"
-                rows={2}
-                disabled={isPending}
-              />
-              <div className="mt-2 flex items-center justify-between gap-2">
+              isPending={isPending}
+              placeholder={`Décrivez ${config.title.toLowerCase()}...`}
+              extra={
+                <div className="mt-2">
                <Select
                  value={newEmotion}
                  onChange={(e) => setNewEmotion(e.target.value as typeof newEmotion)}
-                  className="text-xs flex-1"
+                  className="text-xs"
                  options={Object.values(EMOTION_BY_TYPE).map((em) => ({
                    value: em.emotion,
                    label: `${em.icon} ${em.label}`,
                  }))}
                />
-                <InlineFormActions
-                  onCancel={() => { setIsAdding(false); setNewContent(''); setNewEmotion('NONE'); }}
-                  onSubmit={handleAdd}
-                  isPending={isPending}
-                  disabled={!newContent.trim()}
-                />
              </div>
-            </div>
+              }
+            />
          )}
        </div>
      </div>
--- a/src/components/year-review/YearReviewCard.tsx
+++ b/src/components/year-review/YearReviewCard.tsx
@@ -4,7 +4,7 @@ import { forwardRef, memo, useState, useTransition } from 'react';
 import type { YearReviewItem } from '@prisma/client';
 import { updateYearReviewItem, deleteYearReviewItem } from '@/actions/year-review';
 import { YEAR_REVIEW_BY_CATEGORY } from '@/lib/types';
-import { IconEdit, IconTrash } from '@/components/ui';
+import { IconEdit, IconTrash, IconButton } from '@/components/ui';

 interface YearReviewCardProps {
  item: YearReviewItem;
@@ -88,23 +88,23 @@ export const YearReviewCard = memo(

              {/* Actions (visible on hover) */}
              <div className="absolute right-1 top-1 flex gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
-                <button
+                <IconButton
+                  icon={<IconEdit />}
+                  label="Modifier"
                  onClick={(e) => {
                    e.stopPropagation();
                    setIsEditing(true);
                  }}
-                  className="rounded p-1 text-muted hover:bg-card-hover hover:text-foreground"
-                  aria-label="Modifier"
-                >
-                  <IconEdit />
-                </button>
-                <button
-                  onClick={(e) => { e.stopPropagation(); handleDelete(); }}
-                  className="rounded p-1 text-muted hover:bg-destructive/10 hover:text-destructive"
-                  aria-label="Supprimer"
-                >
-                  <IconTrash />
-                </button>
+                />
+                <IconButton
+                  icon={<IconTrash />}
+                  label="Supprimer"
+                  variant="destructive"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleDelete();
+                  }}
+                />
              </div>
            </>
          )}
--- a/src/components/year-review/YearReviewSection.tsx
+++ b/src/components/year-review/YearReviewSection.tsx
@@ -4,7 +4,7 @@ import { forwardRef, useState, useTransition, useRef, ReactNode } from 'react';
 import type { YearReviewCategory } from '@prisma/client';
 import { createYearReviewItem } from '@/actions/year-review';
 import { YEAR_REVIEW_BY_CATEGORY } from '@/lib/types';
-import { IconPlus, InlineFormActions } from '@/components/ui';
+import { IconPlus, InlineAddItem } from '@/components/ui';

 interface YearReviewSectionProps {
  category: YearReviewCategory;
@@ -40,16 +40,6 @@ export const YearReviewSection = forwardRef<HTMLDivElement, YearReviewSectionPro
      });
    }

-    function handleKeyDown(e: React.KeyboardEvent) {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        handleAdd();
-      } else if (e.key === 'Escape') {
-        setIsAdding(false);
-        setNewContent('');
-      }
-    }
-
    return (
      <div
        ref={ref}
@@ -88,31 +78,17 @@ export const YearReviewSection = forwardRef<HTMLDivElement, YearReviewSectionPro

          {/* Add Form */}
          {isAdding && (
-            <div className="rounded-lg border border-border bg-card p-2 shadow-sm">
-              <textarea
-                autoFocus
-                value={newContent}
-                onChange={(e) => setNewContent(e.target.value)}
-                onKeyDown={handleKeyDown}
-                onBlur={(e) => {
-                  // Don't trigger on blur if clicking on a button
-                  if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-                    handleAdd();
-                  }
-                }}
-                placeholder={`Décrivez ${config.title.toLowerCase()}...`}
-                className="w-full resize-none rounded border-0 bg-transparent p-1 text-sm text-foreground placeholder:text-muted focus:outline-none focus:ring-0"
-                rows={2}
-                disabled={isPending}
-              />
-              <InlineFormActions
-                onCancel={() => { setIsAdding(false); setNewContent(''); }}
-                onSubmit={handleAdd}
-                isPending={isPending}
-                disabled={!newContent.trim()}
-                className="mt-1"
-              />
-            </div>
+            <InlineAddItem
+              value={newContent}
+              onChange={setNewContent}
+              onSubmit={handleAdd}
+              onCancel={() => {
+                setIsAdding(false);
+                setNewContent('');
+              }}
+              isPending={isPending}
+              placeholder={`Décrivez ${config.title.toLowerCase()}...`}
+            />
          )}
        </div>
      </div>