feat: Introduce SnapshotList component for managing user snapshots and exports, leveraging a new ConfirmModal.

2026-10-20 05:28:11 +02:00 · 2026-02-22 14:43:48 +01:00
1 parent bab862bf5c
commit 43c625c3ec
@@ -0,0 +1,128 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { X, AlertTriangle } from "lucide-react";
+
+interface ConfirmModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title?: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: "danger" | "default";
+}
+
+export function ConfirmModal({
+    isOpen,
+    onClose,
+    onConfirm,
+    title = "Confirmation",
+    message,
+    confirmLabel = "OK",
+    cancelLabel = "Annuler",
+    variant = "default",
+}: ConfirmModalProps) {
+    const [isVisible, setIsVisible] = useState(false);
+    const confirmBtnRef = useRef<HTMLButtonElement>(null);
+
+    useEffect(() => {
+        if (isOpen) {
+            setIsVisible(true);
+            setTimeout(() => confirmBtnRef.current?.focus(), 50);
+        } else {
+            setIsVisible(false);
+        }
+    }, [isOpen]);
+
+    const handleClose = () => {
+        setIsVisible(false);
+        setTimeout(onClose, 250);
+    };
+
+    const handleConfirm = () => {
+        setIsVisible(false);
+        setTimeout(onConfirm, 250);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === "Escape") handleClose();
+        if (e.key === "Enter") handleConfirm();
+    };
+
+    if (!isOpen && !isVisible) return null;
+
+    const isDanger = variant === "danger";
+
+    return (
+        <div
+            className={`fixed inset-0 z-[200] flex items-center justify-center p-4 transition-all duration-250 ${isVisible ? "opacity-100 backdrop-blur-sm" : "opacity-0"}`}
+            onKeyDown={handleKeyDown}
+        >
+            {/* Backdrop */}
+            <div
+                className="fixed inset-0"
+                style={{ background: "rgba(0,0,0,0.55)" }}
+                onClick={handleClose}
+            />
+
+            {/* Panel */}
+            <div
+                className={`relative w-full max-w-sm rounded-2xl overflow-hidden shadow-2xl transition-all duration-250 ${isVisible ? "scale-100 translate-y-0" : "scale-95 translate-y-4"}`}
+                style={{ background: "var(--bg-surface)", border: "1px solid var(--border)" }}
+            >
+                {/* Accent bar */}
+                <div
+                    className="absolute top-0 left-0 w-full h-0.5"
+                    style={{
+                        background: isDanger
+                            ? "linear-gradient(to right, var(--accent-error), #fb7185)"
+                            : "linear-gradient(to right, var(--accent), var(--accent-success))"
+                    }}
+                />
+
+                {/* Close button */}
+                <button
+                    onClick={handleClose}
+                    className="absolute top-4 right-4 p-1.5 rounded-lg hover:bg-[var(--bg-elevated)] text-[var(--text-muted)] transition-colors"
+                >
+                    <X className="w-4 h-4" />
+                </button>
+
+                <div className="p-7">
+                    {/* Icon + Title */}
+                    <div className="flex items-center gap-3 mb-4">
+                        <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${isDanger ? "bg-[var(--accent-error-bg)] border border-[var(--accent-error)]" : "bg-[var(--accent-bg)] border border-[var(--accent-border)]"}`}>
+                            <AlertTriangle className={`w-5 h-5 ${isDanger ? "text-[var(--accent-error)]" : "text-[var(--accent)]"}`} />
+                        </div>
+                        <h3 className="text-base font-bold text-[var(--text-primary)]">{title}</h3>
+                    </div>
+
+                    {/* Message */}
+                    <p className="text-sm text-[var(--text-secondary)] mb-7 leading-relaxed pl-[52px]">
+                        {message}
+                    </p>
+
+                    {/* Actions */}
+                    <div className="flex gap-3 justify-end">
+                        <button
+                            onClick={handleClose}
+                            className="apple-btn-secondary"
+                        >
+                            {cancelLabel}
+                        </button>
+                        <button
+                            ref={confirmBtnRef}
+                            onClick={handleConfirm}
+                            className={`apple-btn-primary ${isDanger ? "!bg-[var(--accent-error)] hover:opacity-90" : ""}`}
+                            style={isDanger ? { background: "var(--accent-error)" } : undefined}
+                        >
+                            {confirmLabel}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}