feat: add Range component for adjustable settings

- Introduced a new Range component for user input, allowing adjustable values with labels and a value bubble.
- Integrated the Range component into SettingsDialog for managing embed lock debounce time, enhancing user experience with visual feedback.
- Added corresponding styles in Range.scss for improved UI consistency.

Author: atyrode

src/frontend/src/ui/Range.scss

@@ -0,0 +1,71 @@
+:root {
+  --slider-thumb-size: 16px;
+}
+
+.control-label {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-size: 0.9rem;
+  color: var(--text-primary-color);
+}
+
+.range-wrapper {
+  position: relative;
+  padding-top: 10px;
+  padding-bottom: 25px;
+  width: 100%;
+}
+
+.range-input {
+  width: 100%;
+  height: 4px;
+  -webkit-appearance: none;
+  background: var(--color-slider-track);
+  border-radius: 2px;
+  outline: none;
+}
+
+.range-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--slider-thumb-size);
+  height: var(--slider-thumb-size);
+  background: var(--color-slider-thumb);
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+}
+
+.range-input::-moz-range-thumb {
+  width: var(--slider-thumb-size);
+  height: var(--slider-thumb-size);
+  background: var(--color-slider-thumb);
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+}
+
+.value-bubble {
+  position: absolute;
+  bottom: 0;
+  transform: translateX(-50%);
+  font-size: 12px;
+  color: var(--text-primary-color);
+}
+
+.min-label, .zero-label {
+  position: absolute;
+  bottom: 0;
+  left: 4px;
+  font-size: 12px;
+  color: var(--text-primary-color);
+}
+
+.max-label {
+  position: absolute;
+  bottom: 0;
+  right: 4px;
+  font-size: 12px;
+  color: var(--text-primary-color);
+}

src/frontend/src/ui/Range.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect } from "react";
+
+import "./Range.scss";
+
+export type RangeProps = {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+  minLabel?: string;
+  maxLabel?: string;
+  showValueBubble?: boolean;
+};
+
+export const Range = ({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  minLabel,
+  maxLabel,
+  showValueBubble = true,
+}: RangeProps) => {
+  const rangeRef = React.useRef<HTMLInputElement>(null);
+  const valueRef = React.useRef<HTMLDivElement>(null);
+  
+  useEffect(() => {
+    if (rangeRef.current) {
+      const rangeElement = rangeRef.current;
+      
+      // Update value bubble position if it exists
+      if (showValueBubble && valueRef.current) {
+        const valueElement = valueRef.current;
+        const inputWidth = rangeElement.offsetWidth;
+        const thumbWidth = 16; // Match the --slider-thumb-size CSS variable
+        const position =
+          ((value - min) / (max - min)) * (inputWidth - thumbWidth) + thumbWidth / 2;
+        valueElement.style.left = `${position}px`;
+      }
+      
+      // Calculate percentage for gradient
+      const percentage = ((value - min) / (max - min)) * 100;
+      rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${percentage}%, var(--button-bg) ${percentage}%, var(--button-bg) 100%)`;
+    }
+  }, [value, min, max, showValueBubble]);
+
+  return (
+    <label className="control-label">
+      <div className="range-wrapper">
+        <input
+          ref={rangeRef}
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          onChange={(event) => {
+            onChange(+event.target.value);
+          }}
+          value={value}
+          className="range-input"
+        />
+        {showValueBubble && (
+          <div className="value-bubble" ref={valueRef}>
+            {value !== min ? value : null}
+          </div>
+        )}
+        {min === 0 ? (
+          <div className="zero-label">{minLabel || min}</div>
+        ) : (
+          <div className="min-label">{minLabel || min}</div>
+        )}
+        <div className="max-label">{maxLabel || max}</div>
+      </div>
+    </label>
+  );
+};

src/frontend/src/ui/SettingsDialog.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useEffect } from "react";
-import { Dialog, Range } from "@atyrode/excalidraw";
+import { Dialog } from "@atyrode/excalidraw";
+import { Range } from "./Range";
 import { UserSettings, DEFAULT_SETTINGS } from "../types/settings";
 import "./SettingsDialog.scss";
 
@@ -69,23 +70,20 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
             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>
+          <Range
+            value={Math.round(((settings.embedLockDebounceTime || 350) - 150) / 4850 * 100)}
+            onChange={(value) => handleEmbedLockDebounceTimeChange(
+              // 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}
+          />
           </div>
         </div>
       </div>