refactor: simplify SettingsDialog state update logic

- Replaced the specific embedLockDebounceTime handler with a more generic updateSetting function to streamline state updates for various settings.
- Removed unused styles from SettingsDialog.scss to enhance code clarity and maintainability.

Author: atyrode

src/frontend/src/ui/SettingsDialog.scss

@@ -1,8 +1,4 @@
 .settings-dialog {
-
-  .control-label {
-    font-size: 0px;
-  }
 
   &__wrapper {
     position: absolute;
@@ -34,15 +30,6 @@
     flex-direction: column;
   }
 
-  &__empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    color: #888;
-    font-style: italic;
-  }
-
   &__section {
     margin-bottom: 1.5rem;
   }
@@ -72,11 +59,4 @@
     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

@@ -35,12 +35,17 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
     }
   }, [onClose]);
 
-  const handleEmbedLockDebounceTimeChange = (value: number) => {
+  /**
+   * Updates a specific setting and syncs it with the excalidraw app state
+   * @param key The setting key to update
+   * @param value The new value for the setting
+   */
+  const updateSetting = <K extends keyof UserSettings>(key: K, value: UserSettings[K]) => {
     if (!excalidrawAPI) return;
 
     const newSettings = {
       ...settings,
-      embedLockDebounceTime: value
+      [key]: value
     };
 
     setSettings(newSettings);
@@ -72,14 +77,14 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
           <div className="settings-dialog__range-container">
           <Range
             value={Math.round(((settings.embedLockDebounceTime || 350) - 150) / 4850 * 100)}
-            onChange={(value) => handleEmbedLockDebounceTimeChange(
+            onChange={(value) => updateSetting(
+              'embedLockDebounceTime',
               // Map 0-100 range to 150-5000ms
               Math.round(150 + (value / 100) * 4850)
             )}
             min={0}
             max={100}
             step={1}
-            label="Embed Lock Time"
             minLabel="150ms"
             maxLabel="5000ms"
             showValueBubble={false}