Protect toolbox data after IndexedDB startup failures

website/src/main.jsx

@@ -6,6 +6,7 @@ import "./styles/main.scss";
 import { AppOverlays } from "./components/AppOverlays.jsx";
 import { AppErrorBoundary } from "./components/AppErrorBoundary.jsx";
 import { Shell } from "./components/Shell.jsx";
+import { Icon } from "./components/Icon.jsx";
 import { useIndexedToolboxes } from "./features/toolboxes/storage/useIndexedToolboxes.js";
 import { useToolboxActions } from "./features/toolboxes/useToolboxActions.js";
 import { useAppData } from "./hooks/useAppData.js";
@@ -102,6 +103,24 @@ function App() {
     );
   }
 
+  if (!store.ready) {
+    const content = siteContent.toolboxes.storageStatus;
+    return (
+      <main className="startup-error">
+        <section className="empty nds-empty-state" aria-busy={!store.loadError}>
+          <h1>{store.loadError ? content.errorTitle : content.loadingTitle}</h1>
+          <p>{store.loadError ? content.errorMessage : content.loadingMessage}</p>
+          {store.loadError && <>
+            <p role="alert">{store.loadError}</p>
+            <button className="nds-button" data-size="sm" data-variant="primary" type="button" onClick={store.retryLoad}>
+              <Icon name="refresh" />{content.retryLabel}
+            </button>
+          </>}
+        </section>
+      </main>
+    );
+  }
+
   return (
     <Shell route={route} content={siteContent} games={games} toolboxes={store.toolboxes} links={store.links} drawerGameId={drawerGameId} actions={actions}>
       <AppErrorBoundary route={route}>
@@ -151,6 +170,7 @@ function App() {
         </Suspense>
       )}
       <AppOverlays
+        storageErrorTitle={siteContent.toolboxes.storageStatus.writeErrorTitle}
         actions={actions}
         confirmModal={confirmModal}
         setConfirmModal={setConfirmModal}