Add button to clear all saved canvas states

Introduces a 'Clear Cache' button to the Canvas widget UI, allowing users to clear all saved canvas states. Implements the clearAllCanvasStates function in db.js to handle the deletion of all canvas state entries from the database.

js/Canvas_view.js

@@ -2,6 +2,7 @@ import {app} from "../../scripts/app.js";
 import {api} from "../../scripts/api.js";
 import {$el} from "../../scripts/ui.js";
 import {Canvas} from "./Canvas.js";
+import { clearAllCanvasStates } from "./db.js";
 
 async function createCanvasWidget(node, widget, app) {
     const canvas = new Canvas(node, widget);
@@ -610,6 +611,24 @@ async function createCanvasWidget(node, widget, app) {
                         statusIndicator.setStatus('error');
                     }
                 }
+            }),
+            $el("button.painter-button", {
+                textContent: "Clear Cache",
+                style: {
+                    backgroundColor: "#d44a4a",
+                    borderColor: "#b42a2a",
+                },
+                onclick: async () => {
+                    if (confirm("Are you sure you want to clear all saved canvas states? This action cannot be undone.")) {
+                        try {
+                            await clearAllCanvasStates();
+                            alert("Canvas cache cleared successfully!");
+                        } catch (e) {
+                            console.error("Failed to clear canvas cache:", e);
+                            alert("Error clearing canvas cache. Check the console for details.");
+                        }
+                    }
+                }
             })
         ])
     ]);

js/db.js

@@ -94,4 +94,24 @@ export async function removeCanvasState(id) {
             resolve();
         };
     });
+}
+
+export async function clearAllCanvasStates() {
+    console.log("DB: Clearing all canvas states...");
+    const db = await openDB();
+    return new Promise((resolve, reject) => {
+        const transaction = db.transaction([STORE_NAME], 'readwrite');
+        const store = transaction.objectStore(STORE_NAME);
+        const request = store.clear();
+
+        request.onerror = (event) => {
+            console.error("DB: Error clearing canvas states:", event.target.error);
+            reject("Error clearing states.");
+        };
+
+        request.onsuccess = () => {
+            console.log("DB: All canvas states cleared successfully.");
+            resolve();
+        };
+    });
 }