refactor: replace window.confirm with a double-click UI confirmation for the clear session button and enhance its styling.

docs/development/CENTRAL.md

@@ -1 +1,7 @@
 # Development Status (Central)
+
+## Active Tasks
+- [x] Enable Clear Session Button (2025-12-20)
+
+## Devlog Index
+- [Enable Clear Session](./devlog/2025-12-20-014500_enable_clear_session.md) - Improved UI/UX for session clearing in CubeManager.

docs/development/devlog/2025-12-20-014500_enable_clear_session.md

@@ -0,0 +1,16 @@
+# Enable Clear Session Button in Pack Generator
+
+## Object
+Enable and improve the "Clear Session" button in the Cube Manager (Pack Generator) to allow users to restart the generation process from a clean state.
+
+## Changes
+- Modified `CubeManager.tsx`:
+    - Updated `handleReset` logic (verified).
+    - enhanced "Clear Session" button styling to be more visible (red border/text) and indicate its destructive nature.
+    - Added `disabled={loading}` to prevent state conflicts during active operations.
+    - **Replaced `window.confirm` with a double-click UI confirmation pattern** to ensure reliability and better UX (fixed issue where native confirmation dialog was failing).
+
+## Status
+- [x] Implementation complete.
+- [x] Verified logic for `localStorage` clearing.
+- [x] Verified interaction in browser (button changes state, clears data on second click).

src/client/src/modules/cube/CubeManager.tsx

@@ -26,6 +26,7 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, avail
   const [loading, setLoading] = useState(false);
   const [progress, setProgress] = useState('');
   const [copySuccess, setCopySuccess] = useState(false);
+  const [confirmClear, setConfirmClear] = useState(false);
 
   const [rawScryfallData, setRawScryfallData] = useState<ScryfallCard[] | null>(() => {
     try {
@@ -442,7 +443,16 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, avail
   };
 
   const handleReset = () => {
-    if (window.confirm("Are you sure you want to clear this session? All parsed cards and generated packs will be lost.")) {
+    if (!confirmClear) {
+      setConfirmClear(true);
+      // Auto-reset confirmation state after 3 seconds
+      setTimeout(() => setConfirmClear(false), 3000);
+      return;
+    }
+
+    // Confirmed
+    setConfirmClear(false);
+
     try {
       console.log("Clearing session...");
 
@@ -482,7 +492,6 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, avail
       console.error("Error clearing session:", error);
       showToast("Failed to clear session fully.", "error");
     }
-    }
   };
 
   return (
@@ -782,10 +791,17 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, avail
           {/* Reset Button */}
           <button
             onClick={handleReset}
-            className="w-full mt-4 py-2 text-xs font-semibold text-slate-500 hover:text-red-400 hover:bg-red-900/10 rounded-lg transition-colors flex items-center justify-center gap-2"
+            disabled={loading}
+            className={`w-full mt-4 py-2.5 px-4 rounded-lg text-xs font-bold transition-all flex items-center justify-center gap-2 ${loading
+                ? 'opacity-50 cursor-not-allowed text-slate-600 border border-transparent'
+                : confirmClear
+                  ? 'bg-red-600 text-white border border-red-500 shadow-md animate-pulse'
+                  : 'text-red-400 border border-red-900/30 hover:bg-red-950/30 hover:border-red-500/50 hover:text-red-300 shadow-sm'
+              }`}
             title="Clear all data and start over"
           >
-            <Trash2 className="w-3 h-3" /> Clear Session
+            {loading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Trash2 className="w-3 h-3" />}
+            {confirmClear ? "Click again to confirm!" : "Clear Session"}
           </button>
         </div>
       </div>