wip

apps/website/components/ui/RangeField.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import Input from '@/components/ui/Input';
+import { useCallback, useRef, useState, useEffect } from 'react';
 
 interface RangeFieldProps {
   label: string;
@@ -12,14 +12,12 @@ interface RangeFieldProps {
   helperText?: string;
   error?: string;
   disabled?: boolean;
-  /**
-   * Optional unit label, defaults to "min".
-   */
   unitLabel?: string;
-  /**
-   * Optional override for the right-hand range hint.
-   */
   rangeHint?: string;
+  /** Show large value display above slider */
+  showLargeValue?: boolean;
+  /** Compact mode - single line */
+  compact?: boolean;
 }
 
 export default function RangeField({
@@ -34,97 +32,240 @@ export default function RangeField({
   disabled,
   unitLabel = 'min',
   rangeHint,
+  showLargeValue = false,
+  compact = false,
 }: RangeFieldProps) {
-  const clampedValue = Number.isFinite(value)
-    ? Math.min(Math.max(value, min), max)
+  const [localValue, setLocalValue] = useState(value);
+  const [isDragging, setIsDragging] = useState(false);
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Sync local value with prop when not dragging
+  useEffect(() => {
+    if (!isDragging) {
+      setLocalValue(value);
+    }
+  }, [value, isDragging]);
+
+  const clampedValue = Number.isFinite(localValue)
+    ? Math.min(Math.max(localValue, min), max)
     : min;
 
-  const handleSliderChange = (raw: string) => {
-    const parsed = parseInt(raw, 10);
-    if (Number.isNaN(parsed)) {
-      return;
-    }
-    const next = Math.min(Math.max(parsed, min), max);
-    onChange(next);
-  };
-
-  const handleNumberChange = (raw: string) => {
-    if (raw.trim() === '') {
-      // Allow the field to clear without jumping the slider;
-      // keep the previous value until the user types a number.
-      return;
-    }
-    const parsed = parseInt(raw, 10);
-    if (Number.isNaN(parsed)) {
-      return;
-    }
-    const next = Math.min(Math.max(parsed, min), max);
-    onChange(next);
-  };
-
-  const rangePercent =
-    ((clampedValue - min) / Math.max(max - min, 1)) * 100;
+  const rangePercent = ((clampedValue - min) / Math.max(max - min, 1)) * 100;
 
   const effectiveRangeHint =
-    rangeHint ??
-    (min === 0
-      ? `Up to ${max} ${unitLabel}`
-      : `${min}–${max} ${unitLabel}`);
+    rangeHint ?? (min === 0 ? `Up to ${max} ${unitLabel}` : `${min}–${max} ${unitLabel}`);
+
+  const calculateValueFromPosition = useCallback(
+    (clientX: number) => {
+      if (!sliderRef.current) return clampedValue;
+      const rect = sliderRef.current.getBoundingClientRect();
+      const percent = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);
+      const rawValue = min + percent * (max - min);
+      const steppedValue = Math.round(rawValue / step) * step;
+      return Math.min(Math.max(steppedValue, min), max);
+    },
+    [min, max, step, clampedValue]
+  );
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      if (disabled) return;
+      e.preventDefault();
+      setIsDragging(true);
+      const newValue = calculateValueFromPosition(e.clientX);
+      setLocalValue(newValue);
+      onChange(newValue);
+      (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    },
+    [disabled, calculateValueFromPosition, onChange]
+  );
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (!isDragging || disabled) return;
+      const newValue = calculateValueFromPosition(e.clientX);
+      setLocalValue(newValue);
+      onChange(newValue);
+    },
+    [isDragging, disabled, calculateValueFromPosition, onChange]
+  );
+
+  const handlePointerUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value;
+    if (raw === '') {
+      setLocalValue(min);
+      return;
+    }
+    const parsed = parseInt(raw, 10);
+    if (!Number.isNaN(parsed)) {
+      const clamped = Math.min(Math.max(parsed, min), max);
+      setLocalValue(clamped);
+      onChange(clamped);
+    }
+  };
+
+  const handleInputBlur = () => {
+    // Ensure value is synced on blur
+    onChange(clampedValue);
+  };
+
+  // Quick preset buttons for common values
+  const quickPresets = [
+    Math.round(min + (max - min) * 0.25),
+    Math.round(min + (max - min) * 0.5),
+    Math.round(min + (max - min) * 0.75),
+  ].filter((v, i, arr) => arr.indexOf(v) === i && v !== clampedValue);
+
+  if (compact) {
+    return (
+      <div className="space-y-1.5">
+        <div className="flex items-center justify-between gap-3">
+          <label className="text-xs font-medium text-gray-400 shrink-0">{label}</label>
+          <div className="flex items-center gap-2 flex-1 max-w-[200px]">
+            <div
+              ref={sliderRef}
+              className={`relative flex-1 h-6 cursor-pointer touch-none ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+              onPointerDown={handlePointerDown}
+              onPointerMove={handlePointerMove}
+              onPointerUp={handlePointerUp}
+            >
+              {/* Track background */}
+              <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 h-1.5 rounded-full bg-charcoal-outline" />
+              {/* Track fill */}
+              <div
+                className="absolute top-1/2 -translate-y-1/2 left-0 h-1.5 rounded-full bg-primary-blue transition-all duration-75"
+                style={{ width: `${rangePercent}%` }}
+              />
+              {/* Thumb */}
+              <div
+                className={`
+                  absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-4 h-4 rounded-full
+                  bg-white border-2 border-primary-blue shadow-md
+                  transition-transform duration-75
+                  ${isDragging ? 'scale-125 shadow-[0_0_12px_rgba(25,140,255,0.5)]' : ''}
+                `}
+                style={{ left: `${rangePercent}%` }}
+              />
+            </div>
+            <div className="flex items-center gap-1 shrink-0">
+              <span className="text-sm font-semibold text-white w-8 text-right">{clampedValue}</span>
+              <span className="text-[10px] text-gray-500">{unitLabel}</span>
+            </div>
+          </div>
+        </div>
+        {error && <p className="text-[10px] text-warning-amber">{error}</p>}
+      </div>
+    );
+  }
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-3">
       <div className="flex items-baseline justify-between gap-2">
-        <label className="block text-sm font-medium text-gray-300">
-          {label}
-        </label>
-        <p className="text-[11px] text-gray-500">
-          {effectiveRangeHint}
-        </p>
+        <label className="block text-sm font-medium text-gray-300">{label}</label>
+        <span className="text-[10px] text-gray-500">{effectiveRangeHint}</span>
       </div>
 
-      <div className="space-y-2">
-        <div className="relative">
-          <div className="pointer-events-none absolute inset-y-0 left-0 right-0 rounded-full bg-charcoal-outline/60" />
-          <div
-            className="pointer-events-none absolute inset-y-0 left-0 rounded-full bg-primary-blue"
-            style={{ width: `${rangePercent}%` }}
-          />
+      {showLargeValue && (
+        <div className="flex items-baseline gap-1">
+          <span className="text-3xl font-bold text-white tabular-nums">{clampedValue}</span>
+          <span className="text-sm text-gray-400">{unitLabel}</span>
+        </div>
+      )}
+
+      {/* Custom slider */}
+      <div
+        ref={sliderRef}
+        className={`relative h-8 cursor-pointer touch-none select-none ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+      >
+        {/* Track background */}
+        <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 h-2 rounded-full bg-charcoal-outline/80" />
+        
+        {/* Track fill with gradient */}
+        <div
+          className="absolute top-1/2 -translate-y-1/2 left-0 h-2 rounded-full bg-gradient-to-r from-primary-blue to-neon-aqua transition-all duration-75"
+          style={{ width: `${rangePercent}%` }}
+        />
+
+        {/* Tick marks */}
+        <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 flex justify-between px-1">
+          {[0, 25, 50, 75, 100].map((tick) => (
+            <div
+              key={tick}
+              className={`w-0.5 h-1 rounded-full transition-colors ${
+                rangePercent >= tick ? 'bg-white/40' : 'bg-charcoal-outline'
+              }`}
+            />
+          ))}
+        </div>
+
+        {/* Thumb */}
+        <div
+          className={`
+            absolute top-1/2 -translate-y-1/2 -translate-x-1/2
+            w-5 h-5 rounded-full bg-white border-2 border-primary-blue
+            shadow-[0_2px_8px_rgba(0,0,0,0.3)]
+            transition-all duration-75
+            ${isDragging ? 'scale-125 shadow-[0_0_16px_rgba(25,140,255,0.6)]' : 'hover:scale-110'}
+          `}
+          style={{ left: `${rangePercent}%` }}
+        />
+      </div>
+
+      {/* Value input and quick presets */}
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
           <input
-            type="range"
+            ref={inputRef}
+            type="number"
             min={min}
             max={max}
             step={step}
             value={clampedValue}
-            onChange={(e) => handleSliderChange(e.target.value)}
+            onChange={handleInputChange}
+            onBlur={handleInputBlur}
             disabled={disabled}
-            className="relative z-10 h-2 w-full appearance-none bg-transparent focus:outline-none accent-primary-blue"
+            className={`
+              w-16 px-2 py-1.5 text-sm font-medium text-center rounded-lg
+              bg-iron-gray border border-charcoal-outline text-white
+              focus:border-primary-blue focus:ring-1 focus:ring-primary-blue focus:outline-none
+              transition-colors
+              ${error ? 'border-warning-amber' : ''}
+              ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+            `}
           />
-        </div>
-
-        <div className="flex items-center gap-2">
-          <div className="max-w-[96px]">
-            <Input
-              type="number"
-              value={Number.isFinite(value) ? String(clampedValue) : ''}
-              onChange={(e) => handleNumberChange(e.target.value)}
-              min={min}
-              max={max}
-              step={step}
-              disabled={disabled}
-              className="px-3 py-2 text-sm"
-              error={!!error}
-            />
-          </div>
           <span className="text-xs text-gray-400">{unitLabel}</span>
         </div>
+
+        {quickPresets.length > 0 && (
+          <div className="flex gap-1">
+            {quickPresets.slice(0, 3).map((preset) => (
+              <button
+                key={preset}
+                type="button"
+                onClick={() => {
+                  setLocalValue(preset);
+                  onChange(preset);
+                }}
+                disabled={disabled}
+                className="px-2 py-1 text-[10px] rounded bg-charcoal-outline/50 text-gray-400 hover:bg-charcoal-outline hover:text-white transition-colors"
+              >
+                {preset}
+              </button>
+            ))}
+          </div>
+        )}
       </div>
 
-      {helperText && (
-        <p className="text-xs text-gray-500">{helperText}</p>
-      )}
-      {error && (
-        <p className="text-xs text-warning-amber mt-1">{error}</p>
-      )}
+      {helperText && <p className="text-xs text-gray-500">{helperText}</p>}
+      {error && <p className="text-xs text-warning-amber">{error}</p>}
     </div>
   );
 }