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

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>
+  );
+}