fix: display error message when local storage quota is exceeded (#9961)

* fix: display error message when local storage quota is exceeded

* add danger alert instead of toast

* tweak text

---------

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

excalidraw-app/data/LocalData.ts

@@ -27,6 +27,8 @@ import {
   get,
 } from "idb-keyval";
 
+import { appJotaiStore, atom } from "excalidraw-app/app-jotai";
+
 import type { LibraryPersistedData } from "@excalidraw/excalidraw/data/library";
 import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
 import type { ExcalidrawElement, FileId } from "@excalidraw/element/types";
@@ -45,6 +47,8 @@ import { updateBrowserStateVersion } from "./tabSync";
 
 const filesStore = createStore("files-db", "files-store");
 
+export const localStorageQuotaExceededAtom = atom(false);
+
 class LocalFileManager extends FileManager {
   clearObsoleteFiles = async (opts: { currentFileIds: FileId[] }) => {
     await entries(filesStore).then((entries) => {
@@ -69,6 +73,9 @@ const saveDataStateToLocalStorage = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
 ) => {
+  const localStorageQuotaExceeded = appJotaiStore.get(
+    localStorageQuotaExceededAtom,
+  );
   try {
     const _appState = clearAppStateForLocalStorage(appState);
 
@@ -88,12 +95,22 @@ const saveDataStateToLocalStorage = (
       JSON.stringify(_appState),
     );
     updateBrowserStateVersion(STORAGE_KEYS.VERSION_DATA_STATE);
+    if (localStorageQuotaExceeded) {
+      appJotaiStore.set(localStorageQuotaExceededAtom, false);
+    }
   } catch (error: any) {
     // Unable to access window.localStorage
     console.error(error);
+    if (isQuotaExceededError(error) && !localStorageQuotaExceeded) {
+      appJotaiStore.set(localStorageQuotaExceededAtom, true);
+    }
   }
 };
 
+const isQuotaExceededError = (error: any) => {
+  return error instanceof DOMException && error.name === "QuotaExceededError";
+};
+
 type SavingLockTypes = "collaboration";
 
 export class LocalData {