feat: add settings and access dashboard slice

apps/dashboard/src/features/settings/risk-dialog.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+
+interface RiskDialogProps {
+  reasons: string[];
+  isPending: boolean;
+  onCancel(): void;
+  onConfirm(): void;
+}
+
+export function RiskDialog({ reasons, isPending, onCancel, onConfirm }: RiskDialogProps) {
+  const cancelButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    cancelButtonRef.current?.focus();
+  }, []);
+
+  return (
+    <div aria-labelledby="risk-settings-title" aria-modal="true" className="dialog-backdrop" role="dialog">
+      <div className="dialog-card">
+        <span className="eyebrow">Confirm operational risk</span>
+        <h2 id="risk-settings-title">Confirm risky settings</h2>
+        <ul className="risk-list">
+          {reasons.map((reason) => <li key={reason}>{reason}</li>)}
+        </ul>
+        <div className="dialog-actions">
+          <button className="button secondary" disabled={isPending} onClick={onCancel} ref={cancelButtonRef} type="button">Cancel</button>
+          <button className="button danger" disabled={isPending} onClick={onConfirm} type="button">
+            {isPending ? 'Applying…' : 'Apply risky settings'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}