Only save the themeColor setting on end of input (#5618)

* Only save the themeColor setting on end of input

Closes #4463 by making this input sliders less eager to write to disk,
which was gumming up the works.

* fmt

src/lib/settings/initialSettings.tsx

@@ -154,25 +154,42 @@ export function createSettings() {
         defaultValue: '264.5',
         description: 'The hue of the primary theme color for the app',
         validate: (v) => Number(v) >= 0 && Number(v) < 360,
-        Component: ({ value, updateValue }) => (
-          <div className="flex item-center gap-4 px-2 m-0 py-0">
-            <div
-              className="w-4 h-4 rounded-full bg-primary border border-solid border-chalkboard-100 dark:border-chalkboard-30"
-              style={{
-                backgroundColor: `oklch(var(--primary-lightness) var(--primary-chroma) ${value})`,
-              }}
-            />
-            <input
-              type="range"
-              onChange={(e) => updateValue(e.currentTarget.value)}
-              value={value}
-              min={0}
-              max={259}
-              step={1}
-              className="block flex-1"
-            />
-          </div>
-        ),
+        Component: ({ value, updateValue }) => {
+          const preview = (e: React.SyntheticEvent) =>
+            e.isTrusted &&
+            'value' in e.currentTarget &&
+            document.documentElement.style.setProperty(
+              `--primary-hue`,
+              String(e.currentTarget.value)
+            )
+          const save = (e: React.SyntheticEvent) =>
+            e.isTrusted &&
+            'value' in e.currentTarget &&
+            e.currentTarget.value &&
+            updateValue(String(e.currentTarget.value))
+          return (
+            <div className="flex item-center gap-4 px-2 m-0 py-0">
+              <div
+                className="w-4 h-4 rounded-full bg-primary border border-solid border-chalkboard-100 dark:border-chalkboard-30"
+                style={{
+                  backgroundColor: `oklch(var(--primary-lightness) var(--primary-chroma) var(--primary-hue))`,
+                }}
+              />
+              <input
+                type="range"
+                onInput={preview}
+                onMouseUp={save}
+                onKeyUp={save}
+                onPointerUp={save}
+                defaultValue={value}
+                min={0}
+                max={259}
+                step={1}
+                className="block flex-1"
+              />
+            </div>
+          )
+        },
       }),
       /**
        * Whether to show the debug panel, which lets you see