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,46 +443,54 @@ 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) {
-      try {
+      setConfirmClear(true);
-        console.log("Clearing session...");
+      // Auto-reset confirmation state after 3 seconds
+      setTimeout(() => setConfirmClear(false), 3000);
+      return;
+    }
 
-        // 1. Reset Parent State (App.tsx)
+    // Confirmed
-        setPacks([]);
+    setConfirmClear(false);
-        setAvailableLands([]);
 
-        // 2. Explicitly clear parent persistence keys to ensure they are gone immediately
+    try {
-        localStorage.removeItem('generatedPacks');
+      console.log("Clearing session...");
-        localStorage.removeItem('availableLands');
 
-        // 3. Reset Local State to Defaults
+      // 1. Reset Parent State (App.tsx)
-        // This will trigger the useEffect hooks to update localStorage accordingly
+      setPacks([]);
-        setInputText('');
+      setAvailableLands([]);
-        setRawScryfallData(null);
-        setProcessedData(null);
-        setSelectedSets([]);
-        setSearchTerm(''); // Clear search
 
-        setFilters({
+      // 2. Explicitly clear parent persistence keys to ensure they are gone immediately
-          ignoreBasicLands: false,
+      localStorage.removeItem('generatedPacks');
-          ignoreCommander: false,
+      localStorage.removeItem('availableLands');
-          ignoreTokens: false
-        });
 
-        setGenSettings({
+      // 3. Reset Local State to Defaults
-          mode: 'mixed',
+      // This will trigger the useEffect hooks to update localStorage accordingly
-          rarityMode: 'peasant'
+      setInputText('');
-        });
+      setRawScryfallData(null);
+      setProcessedData(null);
+      setSelectedSets([]);
+      setSearchTerm(''); // Clear search
 
-        setSourceMode('upload');
+      setFilters({
-        setNumBoxes(1);
+        ignoreBasicLands: false,
-        setGameTypeFilter('all');
+        ignoreCommander: false,
+        ignoreTokens: false
+      });
 
-        showToast("Session cleared successfully.", "success");
+      setGenSettings({
-      } catch (error) {
+        mode: 'mixed',
-        console.error("Error clearing session:", error);
+        rarityMode: 'peasant'
-        showToast("Failed to clear session fully.", "error");
+      });
-      }
+
+      setSourceMode('upload');
+      setNumBoxes(1);
+      setGameTypeFilter('all');
+
+      showToast("Session cleared successfully.", "success");
+    } catch (error) {
+      console.error("Error clearing session:", error);
+      showToast("Failed to clear session fully.", "error");
     }
   };
 
@@ -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>