more organized backend and better mobile control columns

webui/src/components/HornControl.jsx

@@ -17,8 +17,12 @@ export default function HornControl({
   active,
   heat = 0,
   className = '',
+  defaultShowSettings = true,
+  showSettingsToggle = false,
+  compactSettings = false,
 }) {
   const [pressed, setPressed] = useState(false);
+  const [showSettings, setShowSettings] = useState(defaultShowSettings);
   const { value: hornSettings, save: saveHornSettings } = useSettingsNamespace(
     'horn',
     HORN_SETTINGS_DEFAULTS,
@@ -40,7 +44,7 @@ export default function HornControl({
   const clampedHeat = Math.max(0, Math.min(1, Number(heat) || 0));
   const buttonClasses = useMemo(() => {
     const base =
-      'group relative flex w-full flex-col gap-0.5 overflow-hidden rounded-xl border-2 px-1 py-1.5 text-xs font-semibold';
+      'group relative flex w-full flex-col gap-0.5 overflow-hidden rounded-xl border-2 px-1 py-1.5 text-xs font-semibold select-none no-touch-select';
     const active = 'border-fuchsia-300/70 bg-fuchsia-700 text-fuchsia-50';
     const inactive = 'border-cyan-300/70 bg-cyan-900 text-cyan-50 hover:bg-cyan-800';
     return [base, isActive ? active : inactive, 'disabled:opacity-50', className]
@@ -95,18 +99,31 @@ export default function HornControl({
   const handlePointerDown = (event) => {
     if (disabled) return;
     const tag = event.target?.tagName?.toLowerCase();
-    if (tag === 'input' || tag === 'select' || tag === 'option' || tag === 'label') return;
+    if (tag === 'input' || tag === 'select' || tag === 'option' || tag === 'label' || tag === 'button') return;
     event.preventDefault();
     start();
   };
 
   const handlePointerUp = (event) => {
     const tag = event.target?.tagName?.toLowerCase();
-    if (tag === 'input' || tag === 'select' || tag === 'option' || tag === 'label') return;
+    if (tag === 'input' || tag === 'select' || tag === 'option' || tag === 'label' || tag === 'button') return;
     event.preventDefault();
     stop();
   };
 
+  const settingsToggle = showSettingsToggle ? (
+    <button
+      type="button"
+      onClick={(event) => {
+        event.preventDefault();
+        setShowSettings((prev) => !prev);
+      }}
+      className="rounded bg-black/40 px-1 py-0.5 text-[0.6rem] font-semibold text-white/90 hover:text-white"
+    >
+      {showSettings ? 'Hide' : 'Settings'}
+    </button>
+  ) : null;
+
   return (
     <div
       role="button"
@@ -116,6 +133,7 @@ export default function HornControl({
       onPointerUp={handlePointerUp}
       onPointerLeave={stop}
       onPointerCancel={stop}
+      onContextMenu={(event) => event.preventDefault()}
       onBlur={stop}
       className={buttonClasses}
     >
@@ -144,6 +162,7 @@ export default function HornControl({
             </span>
           ) : null}
         </span>
+        {settingsToggle}
         <span
           className={`rounded px-1 py-0.5 text-[0.65rem] font-semibold ${
             isActive ? 'bg-fuchsia-200 text-fuchsia-900' : 'bg-slate-800 text-slate-200'
@@ -152,33 +171,67 @@ export default function HornControl({
           {isActive ? 'Honk' : 'Hold'}
         </span>
       </div>
-      <div className="relative z-10 grid grid-cols-[minmax(0,1.2fr)_repeat(4,minmax(0,1fr))] items-center gap-0.5 text-[0.65rem]">
-        <label className="flex items-center gap-0.5 text-slate-200">
-          <span className="text-slate-300">Wave</span>
-          <select
-            value={formattedWaveform}
-            onChange={updateWaveform}
-            className="rounded border border-slate-700 bg-slate-900 px-1 py-[2px] text-[0.65rem] text-slate-100"
-          >
-            <option value="saw">Saw</option>
-            <option value="sine">Sine</option>
-          </select>
-        </label>
-        {freqs.map((freq, idx) => (
-          <label key={`horn-freq-${idx}`} className="flex items-center gap-0.5 text-slate-200">
-            <span className="text-[0.6rem] text-slate-400">{idx + 1}</span>
-            <input
-              type="number"
-              min={0}
-              max={5000}
-              step={1}
-              value={freq}
-              onChange={(event) => updateFreq(idx, event.target.value)}
-              className="w-full rounded border border-slate-700 bg-slate-900 px-1 py-[2px] text-right text-[0.65rem] font-mono text-slate-100"
-            />
-          </label>
-        ))}
-      </div>
+      {showSettings ? (
+        compactSettings ? (
+          <div className="relative z-10 flex flex-col gap-0.5 text-[0.65rem]">
+            <label className="flex items-center justify-between gap-0.5 text-slate-200">
+              <span className="text-slate-300">Wave</span>
+              <select
+                value={formattedWaveform}
+                onChange={updateWaveform}
+                className="rounded border border-slate-700 bg-slate-900 px-1 py-[2px] text-[0.65rem] text-slate-100"
+              >
+                <option value="saw">Saw</option>
+                <option value="sine">Sine</option>
+              </select>
+            </label>
+            <div className="grid grid-cols-2 gap-0.5">
+              {freqs.map((freq, idx) => (
+                <label key={`horn-freq-${idx}`} className="flex items-center gap-0.5 text-slate-200">
+                  <span className="text-[0.6rem] text-slate-400">{idx + 1}</span>
+                  <input
+                    type="number"
+                    min={0}
+                    max={5000}
+                    step={1}
+                    value={freq}
+                    onChange={(event) => updateFreq(idx, event.target.value)}
+                    className="w-full rounded border border-slate-700 bg-slate-900 px-1 py-[2px] text-right text-[0.65rem] font-mono text-slate-100"
+                  />
+                </label>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div className="relative z-10 grid grid-cols-[minmax(0,1.2fr)_repeat(4,minmax(0,1fr))] items-center gap-0.5 text-[0.65rem]">
+            <label className="flex items-center gap-0.5 text-slate-200">
+              <span className="text-slate-300">Wave</span>
+              <select
+                value={formattedWaveform}
+                onChange={updateWaveform}
+                className="rounded border border-slate-700 bg-slate-900 px-1 py-[2px] text-[0.65rem] text-slate-100"
+              >
+                <option value="saw">Saw</option>
+                <option value="sine">Sine</option>
+              </select>
+            </label>
+            {freqs.map((freq, idx) => (
+              <label key={`horn-freq-${idx}`} className="flex items-center gap-0.5 text-slate-200">
+                <span className="text-[0.6rem] text-slate-400">{idx + 1}</span>
+                <input
+                  type="number"
+                  min={0}
+                  max={5000}
+                  step={1}
+                  value={freq}
+                  onChange={(event) => updateFreq(idx, event.target.value)}
+                  className="w-full rounded border border-slate-700 bg-slate-900 px-1 py-[2px] text-right text-[0.65rem] font-mono text-slate-100"
+                />
+              </label>
+            ))}
+          </div>
+        )
+      ) : null}
     </div>
   );
 }