feat: enhance SettingsDialog with user settings management

- Added UserSettings interface and default settings for embed lock debounce time.
- Integrated settings management into SettingsDialog, allowing users to adjust embed lock debounce time via a range input.
- Updated normalizeCanvasData to preserve user settings when normalizing canvas data.
- Improved styles for SettingsDialog to enhance user experience and organization.

Author: atyrode

src/frontend/src/ExcalidrawWrapper.tsx

@@ -59,6 +59,7 @@ export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
     }
   }, [isAuthenticated]);
 
+  
   // Handlers for closing modals
   const handleCloseBackupsModal = () => {
     setShowBackupsModal(false);
@@ -122,6 +123,7 @@ export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
 
         {showSettingsModal && (
           <SettingsDialog
+            excalidrawAPI={excalidrawAPI}
             onClose={handleCloseSettingsModal}
           />
         )}

src/frontend/src/types/settings.ts

@@ -0,0 +1,16 @@
+/**
+ * Types for user settings
+ */
+
+export interface UserSettings {
+  /**
+   * The debounce time in milliseconds for the embed lock
+   * Range: 150ms to 5000ms (5 seconds)
+   * Default: 350ms
+   */
+  embedLockDebounceTime?: number;
+}
+
+export const DEFAULT_SETTINGS: UserSettings = {
+  embedLockDebounceTime: 350, // Default value from CustomEmbeddableRenderer.tsx
+};

src/frontend/src/ui/SettingsDialog.scss

@@ -6,8 +6,6 @@
     right: 0;
     bottom: 0;
     z-index: 1000;
-    background-color: rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(1px);
   }
 
   &__title-container {
@@ -37,4 +35,41 @@
     color: #888;
     font-style: italic;
   }
+
+  &__section {
+    margin-bottom: 1.5rem;
+  }
+
+  &__section-title {
+    margin: 0 0 1rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-primary-color);
+  }
+
+  &__setting {
+    margin-bottom: 1rem;
+    padding: 0.5rem;
+    border-radius: 4px;
+    background-color: var(--dialog-bg-color);
+  }
+
+  &__label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--text-primary-color);
+  }
+
+  &__range-container {
+    margin: 1rem 0;
+  }
+
+  &__range-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.8rem;
+    color: var(--text-primary-color);
+    opacity: 0.7;
+  }
 }

src/frontend/src/ui/SettingsDialog.tsx

@@ -1,15 +1,31 @@
-import React, { useState, useCallback } from "react";
-import { Dialog } from "@atyrode/excalidraw";
+import React, { useState, useCallback, useEffect } from "react";
+import { Dialog, Range } from "@atyrode/excalidraw";
+import { UserSettings, DEFAULT_SETTINGS } from "../types/settings";
 import "./SettingsDialog.scss";
 
 interface SettingsDialogProps {
+  excalidrawAPI?: any;
   onClose?: () => void;
 }
 
 const SettingsDialog: React.FC<SettingsDialogProps> = ({
+  excalidrawAPI,
   onClose,
 }) => {
   const [modalIsShown, setModalIsShown] = useState(true);
+  const [settings, setSettings] = useState<UserSettings>(DEFAULT_SETTINGS);
+
+  // Get current settings from excalidrawAPI when component mounts
+  useEffect(() => {
+    if (excalidrawAPI) {
+      const appState = excalidrawAPI.getAppState();
+      const userSettings = appState?.pad?.userSettings || {};
+      setSettings({
+        ...DEFAULT_SETTINGS,
+        ...userSettings
+      });
+    }
+  }, [excalidrawAPI]);
 
   const handleClose = useCallback(() => {
     setModalIsShown(false);
@@ -18,11 +34,61 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
     }
   }, [onClose]);
 
+  const handleEmbedLockDebounceTimeChange = (value: number) => {
+    if (!excalidrawAPI) return;
+
+    const newSettings = {
+      ...settings,
+      embedLockDebounceTime: value
+    };
+    
+    setSettings(newSettings);
+    
+    // Update the appState
+    const appState = excalidrawAPI.getAppState();
+    const updatedAppState = {
+      ...appState,
+      pad: {
+        ...appState.pad,
+        userSettings: newSettings
+      }
+    };
+    
+    excalidrawAPI.updateScene({
+      appState: updatedAppState
+    });
+  };
+
   // Dialog content
   const dialogContent = (
     <div className="settings-dialog__content">
-      {/* Settings content will go here in the future */}
-      <div className="settings-dialog__empty">Settings dialog is empty for now</div>
+      <div className="settings-dialog__section">
+        <h3 className="settings-dialog__section-title">Embed Settings</h3>
+        <div className="settings-dialog__setting">
+          <label className="settings-dialog__label">
+            Embed Lock Debounce Time: {settings.embedLockDebounceTime}ms
+          </label>
+          <div className="settings-dialog__range-container">
+            <Range
+              updateData={(value) => handleEmbedLockDebounceTimeChange(
+                // Map 0-100 range to 150-5000ms
+                Math.round(150 + (value / 100) * 4850)
+              )}
+              appState={{
+                currentItemOpacity: 
+                  // Map 150-5000ms to 0-100 range
+                  Math.round(((settings.embedLockDebounceTime || 350) - 150) / 4850 * 100)
+              }}
+              elements={[]}
+              testId="embed-lock-debounce-time"
+            />
+          </div>
+          <div className="settings-dialog__range-labels">
+            <span>150ms</span>
+            <span>5000ms</span>
+          </div>
+        </div>
+      </div>
     </div>
   );
 

src/frontend/src/utils/canvasUtils.ts

@@ -1,9 +1,6 @@
+import { DEFAULT_SETTINGS } from '../types/settings';
+
 /**
- * Normalizes canvas data by removing width and height properties from appState
- * and resetting collaborators to an empty Map.
- * 
- * This is necessary when loading canvas data to ensure it fits properly in the current viewport
- * and doesn't carry over collaborator information that might be stale.
  * 
  * @param data The canvas data to normalize
  * @returns Normalized canvas data
@@ -21,13 +18,23 @@ export function normalizeCanvasData(data: any) {
     delete appState.height;
   }
 
+  // Preserve existing pad settings if they exist, otherwise create new ones
+  const existingPad = appState.pad || {};
+  const existingUserSettings = existingPad.userSettings || {};
+  
+  // Merge existing user settings with default settings
   appState.pad = { 
     moduleBorderOffset: {
       left: 10,
       right: 10,
       top: 40,
       bottom: 10,
     },
+    // Merge existing user settings with default settings
+    userSettings: {
+      ...DEFAULT_SETTINGS,
+      ...existingUserSettings
+    }
   };
 
   // Reset collaborators (https://github.com/excalidraw/excalidraw/issues/8637)

src/frontend/yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@atyrode/excalidraw@^0.18.0-3":
-  version "0.18.0-3"
-  resolved "https://registry.yarnpkg.com/@atyrode/excalidraw/-/excalidraw-0.18.0-3.tgz#445176d5b9828f033205a46f227fd76e722019ec"
-  integrity sha512-iWLyYMZNV9VQCcWAtrLmg52NkfCw1CDrigXXRrxa3H2KW6nyrlbFm3KZAF5Y0mOJDYzAtxclPvHoTvcRruMjGg==
+"@atyrode/excalidraw@^0.18.0-4":
+  version "0.18.0-4"
+  resolved "https://registry.yarnpkg.com/@atyrode/excalidraw/-/excalidraw-0.18.0-4.tgz#3350bd09533cb424105fa615ec0e2e4e243f798e"
+  integrity sha512-MDYAXT34cNmhoc49eC7iuoweGHsirKKH0VnwDT9CJPWTjUfOrXp/NsL1PHyFIyhBu14NI1osSpGTD0qi1FPegQ==
   dependencies:
     "@braintree/sanitize-url" "6.0.2"
     "@excalidraw/laser-pointer" "1.3.1"