app/frontend/src/components/Dashboard/ui/glass/Controls.tsx

/**
 * Liquid glass: the controls.
 *
 * A press is answered by the light moving — a soft glow that follows the
 * pointer across the surface — and by the control giving very slightly. Every
 * one of these is a `ui/core` hook in a different coat.
 */
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown } from "lucide-react"
import { motion } from "motion/react"

import { cn } from "@/lib/utils"
import { asOriginal, text } from "../core/config"
import type {
  ButtonProps,
  InputProps,
  SegmentedProps,
  SelectProps,
  SliderProps,
  SwitchProps,
} from "../core/contract"
import {
  usePress,
  useSegmented,
  useSliderDrag,
  useSwitch,
} from "../core/controls"
import { useLook } from "../core/look"
import { LOOK } from "../core/motion"

export function Button({
  variant = "tonal",
  pressed,
  disabled,
  label,
  onClick,
  children,
}: ButtonProps) {
  const { onPointerDown } = usePress()
  return (
    <motion.button
      type="button"
      className="gl-button gl-pressable w-full"
      data-variant={variant}
      aria-pressed={pressed}
      aria-label={label}
      disabled={disabled}
      whileTap={{ scale: 0.97 }}
      transition={LOOK.glass.spring}
      onPointerDown={onPointerDown}
      onClick={onClick}
    >
      <span className="gl-glow" aria-hidden />
      <span className="gl-lift min-w-0 truncate">{children}</span>
    </motion.button>
  )
}

export function Switch(props: SwitchProps) {
  const { buttonProps } = useSwitch(props)
  const { onPointerDown } = usePress()
  return (
    <button
      {...buttonProps}
      className="gl-switch gl-pressable"
      onPointerDown={onPointerDown}
    >
      <span className="gl-glow" aria-hidden />
      <motion.span
        layout
        transition={LOOK.glass.spring}
        className="gl-switch-thumb"
      />
    </button>
  )
}

export function Slider(props: SliderProps) {
  const { fraction, inputProps, marks } = useSliderDrag(props)
  const orientation = props.orientation ?? "horizontal"
  return (
    <div
      className={cn(
        "dui-slider gl-slider",
        orientation === "horizontal" && "w-full",
      )}
      data-orientation={orientation}
      style={{ "--dui-fraction": fraction } as React.CSSProperties}
    >
      <div className="dui-slider-body">
        <span className="dui-slider-rail" aria-hidden>
          <span className="dui-slider-fill" />
        </span>
        {/* The control itself, laid transparent over what is drawn: it keeps
            the keyboard, the pointer and every `aria-`, and owes the look
            nothing. */}
        <input {...inputProps} className="dui-slider-input" />
        <span className="dui-slider-thumb" aria-hidden />
      </div>
      {marks.length > 0 ? (
        // Decoration: the input itself announces min, max and where it stands.
        <div aria-hidden className="dui-ticks">
          {marks.map((mark) => (
            <span
              key={mark.percent}
              className="absolute top-0"
              // Shifted by its own share of itself: the first label sits flush
              // left and the last flush right, so neither hangs off the tile.
              style={{
                left: `${mark.percent}%`,
                transform: `translateX(-${mark.percent}%)`,
              }}
            >
              {mark.label}
            </span>
          ))}
        </div>
      ) : null}
    </div>
  )
}

export function Segmented(props: SegmentedProps) {
  const { chosen, thumbId, groupProps, itemProps } = useSegmented(props)
  const vertical = props.orientation === "vertical"
  const { onPointerDown } = usePress()
  return (
    <div
      {...groupProps}
      data-testid={props.testId}
      className="gl-segmented"
      style={
        vertical
          ? undefined
          : {
              gridTemplateColumns: `repeat(${props.options.length}, minmax(0, 1fr))`,
            }
      }
    >
      {props.options.map(([value, label], index) => (
        <button
          key={value}
          {...itemProps(index)}
          className="gl-segment gl-pressable"
          onPointerDown={onPointerDown}
        >
          {index === chosen ? (
            <motion.span
              aria-hidden
              layoutId={thumbId}
              transition={LOOK.glass.spring}
              className="gl-segment-thumb"
            />
          ) : null}
          <span className="gl-glow" aria-hidden />
          <span className="gl-segment-label">{label}</span>
        </button>
      ))}
    </div>
  )
}

export function Select({
  value,
  options,
  label,
  disabled,
  onChange,
}: SelectProps) {
  // The menu is portalled to `body`, which is outside the canvas — so it
  // re-states the dashboard's own colours rather than borrowing the app's.
  const { style } = useLook()
  return (
    <SelectPrimitive.Root
      value={value}
      onValueChange={(selected) => onChange(asOriginal(selected, options))}
    >
      <SelectPrimitive.Trigger
        aria-label={label}
        disabled={disabled}
        className="gl-field gl-pressable justify-between"
      >
        <span className="gl-glow" aria-hidden />
        <span className="gl-lift min-w-0 truncate">
          <SelectPrimitive.Value placeholder="Choose" />
        </span>
        <SelectPrimitive.Icon asChild>
          <ChevronDown
            className="gl-lift size-4 shrink-0 opacity-60"
            aria-hidden
          />
        </SelectPrimitive.Icon>
      </SelectPrimitive.Trigger>
      <SelectPrimitive.Portal>
        <SelectPrimitive.Content
          position="popper"
          sideOffset={4}
          style={style}
          className="gl-menu z-50 max-h-64 min-w-[var(--radix-select-trigger-width)] overflow-y-auto p-1 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
        >
          <SelectPrimitive.Viewport>
            {options.map((option) => (
              <SelectPrimitive.Item
                key={text(option.value)}
                value={text(option.value)}
                className="flex cursor-pointer select-none items-center justify-between gap-2 rounded-xl px-3 py-2 text-sm outline-none data-[highlighted]:bg-white/15"
              >
                <SelectPrimitive.ItemText>
                  {option.label ?? text(option.value)}
                </SelectPrimitive.ItemText>
                <SelectPrimitive.ItemIndicator>
                  <Check className="size-4" aria-hidden />
                </SelectPrimitive.ItemIndicator>
              </SelectPrimitive.Item>
            ))}
          </SelectPrimitive.Viewport>
        </SelectPrimitive.Content>
      </SelectPrimitive.Portal>
    </SelectPrimitive.Root>
  )
}

export function Input({
  value,
  type,
  label,
  disabled,
  onChange,
  onCommit,
}: InputProps) {
  return (
    <input
      className="gl-field"
      value={value}
      type={type}
      aria-label={label}
      disabled={disabled}
      onChange={(event) => onChange(event.target.value)}
      onBlur={onCommit}
      onKeyDown={(event) => {
        if (event.key === "Enter") onCommit()
      }}
    />
  )
}