adding the ui

clio-ui/components/Tweaks.jsx

@@ -0,0 +1,52 @@
+// Tweaks panel for RecordingsViewer
+// Loaded after tweaks-panel.jsx
+
+function TweaksApp() {
+  const { TweaksPanel, TweakSection, TweakToggle, TweakRadio, TweakColor, useTweaks } = window;
+
+  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
+    "accentColor": "oklch(0.75 0.15 65)",
+    "density": "normal",
+    "monoTimestamps": true,
+    "showQualityColors": true,
+    "sidebarCollapsed": false
+  }/*EDITMODE-END*/);
+
+  // Apply tweaks to CSS vars live
+  React.useEffect(() => {
+    const root = document.documentElement;
+    // Accent color
+    root.style.setProperty('--amber', tweaks.accentColor);
+    // Density
+    const pad = tweaks.density === 'compact' ? '6px 10px' : tweaks.density === 'comfortable' ? '14px 18px' : '9px 12px';
+    root.style.setProperty('--row-padding', pad);
+    // Monospace timestamps
+    document.querySelectorAll('.mono-ts').forEach(el => {
+      el.style.fontFamily = tweaks.monoTimestamps ? 'var(--font-mono)' : 'var(--font-sans)';
+    });
+  }, [tweaks]);
+
+  return (
+    <TweaksPanel>
+      <TweakSection label="Appearance">
+        <TweakColor label="Accent color" value={tweaks.accentColor} onChange={v => setTweak('accentColor', v)} />
+        <TweakRadio
+          label="Density"
+          value={tweaks.density}
+          options={[{ label: 'Compact', value: 'compact' }, { label: 'Normal', value: 'normal' }, { label: 'Airy', value: 'comfortable' }]}
+          onChange={v => setTweak('density', v)}
+        />
+      </TweakSection>
+      <TweakSection label="Display">
+        <TweakToggle label="Monospace timestamps" value={tweaks.monoTimestamps} onChange={v => setTweak('monoTimestamps', v)} />
+        <TweakToggle label="Quality color coding" value={tweaks.showQualityColors} onChange={v => setTweak('showQualityColors', v)} />
+      </TweakSection>
+    </TweaksPanel>
+  );
+}
+
+// Mount tweaks panel in a separate div
+const tweaksRoot = document.createElement('div');
+tweaksRoot.id = 'tweaks-root';
+document.body.appendChild(tweaksRoot);
+ReactDOM.createRoot(tweaksRoot).render(<TweaksApp />);