seen_at db index, migrations, img crossorigin, errorpage clear opfs

packages/app/src/Components/ProxyImg.tsx

@@ -76,6 +76,7 @@ const ProxyImgComponent = forwardRef<HTMLImageElement, ProxyImgProps>(function P
       height={size}
       className={className}
       onError={handleImageError}
+      crossOrigin={props.crossOrigin ?? "anonymous"}
     />
   );
 });

packages/app/src/Pages/ErrorPage.tsx

@@ -3,22 +3,50 @@ import { useRouteError } from "react-router-dom";
 
 import AsyncButton from "@/Components/Button/AsyncButton";
 import { db } from "@/Db";
+import debug from "debug";
+
+const log = debug("ErrorPage");
 
 const ErrorPage = () => {
   const error = useRouteError();
 
   console.error(error);
+
+  const clearOPFSData = async () => {
+    if ("showDirectoryPicker" in window) {
+      try {
+        // Request access to the root directory
+        const rootDirectoryHandle = await window.showDirectoryPicker();
+        // Recursively delete contents
+        for await (const entry of rootDirectoryHandle.values()) {
+          if (entry.kind === "file") {
+            await entry.remove();
+          } else if (entry.kind === "directory") {
+            await entry.removeRecursively();
+          }
+        }
+        log("OPFS data cleared successfully.");
+      } catch (e) {
+        log("Error clearing OPFS data:", e);
+      }
+    } else {
+      log("File System Access API is not supported in this browser.");
+    }
+  };
+
+  const handleClearData = async () => {
+    await db.delete(); // Delete IndexedDB
+    globalThis.localStorage.clear(); // Clear localStorage
+    await clearOPFSData(); // Attempt to clear OPFS data
+    globalThis.location.href = "/"; // Redirect to home
+  };
+
   return (
     <div className="p-2">
       <h4>
         <FormattedMessage defaultMessage="An error has occured!" id="FfYsOb" />
       </h4>
-      <AsyncButton
-        onClick={async () => {
-          await db.delete();
-          globalThis.localStorage.clear();
-          globalThis.location.href = "/";
-        }}>
+      <AsyncButton onClick={handleClearData}>
         <FormattedMessage defaultMessage="Clear cache and reload" id="HWbkEK" />
       </AsyncButton>
       <h5>{error.message}</h5>