feat(ui): require confirmation before delete actions

- add a reusable modal component and export it from the shared ui barrel

- gate all delete and remove flows behind explicit confirmation dialogs

- use a solid modal surface color token with fallback to avoid transparent body

client/src/pages/snippet/SnippetsPage.tsx

@@ -5,7 +5,16 @@ import { Settings, Pencil, Trash2, Plus, Download, Braces } from 'lucide-react';
 import { parse as yamlParse } from 'yaml';
 import { snippets } from '../../api';
 import type { Snippet } from '../../api';
-import { Breadcrumbs, Button, Card, ContextMenu, MarkdownContent, Timestamp, UuidBadge } from '../../ui';
+import {
+  Breadcrumbs,
+  Button,
+  Card,
+  ContextMenu,
+  MarkdownContent,
+  Modal,
+  Timestamp,
+  UuidBadge,
+} from '../../ui';
 import styles from '../Page.module.css';
 
 function firstParagraphBlocks(markdown: string, limit = 2): { preview: string; truncated: boolean } {
@@ -105,6 +114,8 @@ export function SnippetsPage() {
   const [items, setItems] = useState<Snippet[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const load = () => {
@@ -119,9 +130,20 @@ export function SnippetsPage() {
     load();
   }, []);
 
-  const handleDelete = async (id: string) => {
-    await snippets.remove(id);
-    load();
+  const requestDelete = (id: string) => {
+    setDeleteId(id);
+  };
+
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    setDeleting(true);
+    try {
+      await snippets.remove(deleteId);
+      load();
+      setDeleteId(null);
+    } finally {
+      setDeleting(false);
+    }
   };
 
   const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -162,12 +184,30 @@ export function SnippetsPage() {
       {!loading && (
         <div className={styles.envGrid}>
           {items.map((s) => (
-            <SnippetCard key={s.id} snippet={s} onDelete={handleDelete} />
+            <SnippetCard key={s.id} snippet={s} onDelete={requestDelete} />
           ))}
           {items.length === 0 && <p className={styles.muted}>{t('snippets.empty')}</p>}
           <AddSnippetCard />
         </div>
       )}
+
+      <Modal
+        open={deleteId != null}
+        title={t('snippets.action_delete')}
+        onClose={() => !deleting && setDeleteId(null)}
+        footer={(
+          <>
+            <Button variant="secondary" onClick={() => setDeleteId(null)} disabled={deleting}>
+              Cancel
+            </Button>
+            <Button variant="danger" onClick={handleDelete} disabled={deleting}>
+              {t('snippets.action_delete')}
+            </Button>
+          </>
+        )}
+      >
+        Are you sure you want to delete this snippet?
+      </Modal>
     </div>
   );
 }