feat(widgets): redesign gate widgets — readable hierarchy, prominent select-all, styled controls

Titles + intro read as a clear prompt (comfortable line length), options as spaced choice rows, Other/Back/Exit as discreet secondary controls under a divider. Multiselect gets a prominent Select all/Deselect all at the head of the list with a live count. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-03 18:15:48 +02:00
parent 56ed8b29bd
commit cec6620c00
4 changed files with 102 additions and 49 deletions
@@ -1,12 +1,27 @@
 import { useState } from "react";
 import type { WidgetProps } from "./types";
+
 export function FreetextWidget({ descriptor, onRespond }: WidgetProps) {
  const [text, setText] = useState("");
  return (
-    <div className="space-y-2">
-      {descriptor.title && <p className="font-medium">{descriptor.title}</p>}
-      <textarea className="w-full border rounded p-2" value={text} onChange={(e) => setText(e.target.value)} />
-      <button className="border rounded px-3 py-1" onClick={() => onRespond({ id: descriptor.id, kind: "freetext", text })}>Send</button>
+    <div className="space-y-3">
+      {descriptor.title && (
+        <p className="text-[0.95rem] font-semibold leading-snug text-foreground">
+          {descriptor.title}
+        </p>
+      )}
+      <textarea
+        className="min-h-24 w-full resize-y rounded-lg border border-input bg-card p-3 text-sm outline-none transition-colors focus:border-primary/40 focus:ring-2 focus:ring-ring/20"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        placeholder="Type your answer…"
+      />
+      <button
+        className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-[oklch(var(--primary-hover))]"
+        onClick={() => onRespond({ id: descriptor.id, kind: "freetext", text })}
+      >
+        Send
+      </button>
    </div>
  );
 }
@@ -18,43 +18,56 @@ export function MultiselectWidget({ descriptor, onRespond }: WidgetProps) {
    });
  }

-  function selectAll() {
-    setChecked(new Set(options.map((o) => o.id)));
-  }
-
-  function deselectAll() {
-    setChecked(new Set());
-  }
-
  const isDisabled = descriptor.allow_empty === false && checked.size === 0;

  return (
-    <div className="space-y-2">
-      {descriptor.title && <p className="font-medium">{descriptor.title}</p>}
-      <div className="flex gap-2">
-        <button className="text-sm border rounded px-2 py-1" onClick={allChecked ? deselectAll : selectAll}>
-          {allChecked ? "Deselect all" : "Select all"}
+    <div className="space-y-4">
+      {descriptor.title && (
+        <p className="text-[0.95rem] font-semibold leading-snug text-foreground">
+          {descriptor.title}
+        </p>
+      )}
+      <div className="flex flex-col">
+        {/* Prominent select-all control at the head of the list. */}
+        <div className="flex items-center justify-between border-b border-border/60 pb-2">
+          <button
+            className="text-sm font-semibold text-primary transition-colors hover:text-[oklch(var(--primary-hover))]"
+            onClick={() =>
+              setChecked(allChecked ? new Set() : new Set(options.map((o) => o.id)))
+            }
+          >
+            {allChecked ? "Deselect all" : "Select all"}
+          </button>
+          <span className="text-xs tabular-nums text-muted-foreground">
+            {checked.size} / {options.length} selected
+          </span>
+        </div>
+        <div className="flex flex-col gap-1 pt-2">
+          {options.map((o) => (
+            <label
+              key={o.id}
+              className="flex cursor-pointer items-center gap-2.5 rounded-lg border border-transparent px-2.5 py-2 text-sm text-foreground transition-colors hover:bg-accent"
+            >
+              <input
+                type="checkbox"
+                className="size-4 shrink-0 accent-[oklch(var(--primary))]"
+                checked={checked.has(o.id)}
+                onChange={() => toggle(o.id)}
+              />
+              <span>{o.label}</span>
+            </label>
+          ))}
+        </div>
+      </div>
+      <div>
+        <button
+          className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-[oklch(var(--primary-hover))] disabled:cursor-not-allowed disabled:opacity-50"
+          disabled={isDisabled}
+          onClick={() => onRespond({ id: descriptor.id, kind: "multiselect", choices: Array.from(checked) })}
+        >
+          Confirm
        </button>
      </div>
-      <div className="flex flex-col gap-1">
-        {options.map((o) => (
-          <label key={o.id} className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
-              checked={checked.has(o.id)}
-              onChange={() => toggle(o.id)}
-            />
-            {o.label}
-          </label>
-        ))}
-      </div>
-      <button
-        className="border rounded px-3 py-1 disabled:opacity-50 disabled:cursor-not-allowed"
-        disabled={isDisabled}
-        onClick={() => onRespond({ id: descriptor.id, kind: "multiselect", choices: Array.from(checked) })}
-      >
-        Confirm
-      </button>
      <ReservedControls
        reserved={descriptor.reserved}
        onControl={(c, t) => onRespond({ id: descriptor.id, control: c, ...(t !== undefined ? { text: t } : {}) })}
@@ -13,12 +13,12 @@ export function ReservedControls({
  const [text, setText] = useState("");
  if (!reserved?.length) return null;
  return (
-    <div className="flex flex-col gap-2 pt-2">
-      <div className="flex gap-2">
+    <div className="flex flex-col gap-2 border-t border-border/60 pt-3">
+      <div className="flex flex-wrap gap-2">
        {reserved.map((c) => (
          <button
            key={c}
-            className="text-sm border rounded px-2 py-1"
+            className="rounded-md border border-border/60 px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
            onClick={() => (c === "other" ? setOtherOpen(true) : onControl(c))}
          >
            {LABELS[c] ?? c}
@@ -26,14 +26,15 @@ export function ReservedControls({
        ))}
      </div>
      {otherOpen && (
-        <div className="flex flex-col gap-1">
+        <div className="flex flex-col gap-2">
          <textarea
-            className="w-full border rounded p-2"
+            className="min-h-20 w-full resize-y rounded-lg border border-input bg-card p-3 text-sm outline-none transition-colors focus:border-primary/40 focus:ring-2 focus:ring-ring/20"
            value={text}
            onChange={(e) => setText(e.target.value)}
+            placeholder="Describe your alternative…"
          />
          <button
-            className="text-sm border rounded px-2 py-1 self-start disabled:opacity-50 disabled:cursor-not-allowed"
+            className="self-start rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-[oklch(var(--primary-hover))] disabled:cursor-not-allowed disabled:opacity-50"
            disabled={!text.trim()}
            onClick={() => onControl("freetext", text)}
          >
@@ -1,19 +1,43 @@
 import type { WidgetProps } from "./types";
 import { ReservedControls } from "./ReservedControls";
+
 export function SelectWidget({ descriptor, onRespond }: WidgetProps) {
  return (
-    <div className="space-y-2">
-      {descriptor.title && <p className="font-medium">{descriptor.title}</p>}
-      {descriptor.intro && <p className="text-sm text-muted-foreground">{descriptor.intro}</p>}
+    <div className="space-y-4">
+      {(descriptor.title || descriptor.intro) && (
+        <div className="space-y-1.5">
+          {descriptor.title && (
+            <p className="text-[0.95rem] font-semibold leading-snug text-foreground">
+              {descriptor.title}
+            </p>
+          )}
+          {descriptor.intro && (
+            <p className="max-w-[68ch] whitespace-pre-wrap text-sm leading-relaxed text-muted-foreground">
+              {descriptor.intro}
+            </p>
+          )}
+        </div>
+      )}
      <div className="flex flex-col gap-2">
        {descriptor.options?.map((o) => (
-          <button key={o.id} className="border rounded px-3 py-2 text-left hover:bg-accent"
-            onClick={() => onRespond({ id: descriptor.id, kind: "select", choices: [o.id] })}>
-            {o.label}{o.recommended && <span className="ml-2 text-xs text-green-600">(consigliato)</span>}
+          <button
+            key={o.id}
+            className="flex items-center justify-between gap-3 rounded-lg border border-border bg-card px-4 py-3 text-left text-sm text-foreground transition-colors hover:border-primary/40 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+            onClick={() => onRespond({ id: descriptor.id, kind: "select", choices: [o.id] })}
+          >
+            <span>{o.label}</span>
+            {o.recommended && (
+              <span className="shrink-0 rounded-full bg-[oklch(var(--success)/0.16)] px-2 py-0.5 text-[0.65rem] font-medium text-[oklch(0.5_0.13_165)]">
+                consigliato
+              </span>
+            )}
          </button>
        ))}
      </div>
-      <ReservedControls reserved={descriptor.reserved} onControl={(c, t) => onRespond({ id: descriptor.id, control: c, ...(t !== undefined ? { text: t } : {}) })} />
+      <ReservedControls
+        reserved={descriptor.reserved}
+        onControl={(c, t) => onRespond({ id: descriptor.id, control: c, ...(t !== undefined ? { text: t } : {}) })}
+      />
    </div>
  );
 }