@skillcdn/console 0.3.1 → 0.4.0

package/src/components/calendar.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, type SyntheticEvent, useState } from "react";
+import { type CSSProperties, type ReactNode, type SyntheticEvent, useState } from "react";
 import {
   OPEN_TASK_STATES,
   type RestCategory,
@@ -25,7 +25,8 @@ import {
   weekOf,
 } from "../dates.js";
 import { useLanguage, useWords } from "../i18n/index.js";
-import { Avatar, CategoryBadge, cx, PersonChip, personName, StateBadge, Time } from "./ui.js";
+import { TaskList } from "./task-list.js";
+import { CategoryBadge, cx, PersonChip, personName, StateBadge, Time, Workers } from "./ui.js";
 
 // The calendar of a project (ADR-0019): the month as a grid, or one week on its own. A task
 // planned from a start to a due day lies across its days as a bar, in a lane of its own within
@@ -140,6 +141,17 @@ function onDays(tasks: readonly RestTask[]): ReadonlyMap<string, readonly RestTa
   return on;
 }
 
+/** The tasks of one day: those on it alone and those lying across it, the open ones first. */
+export function tasksOn(day: string, tasks: readonly RestTask[]): RestTask[] {
+  return tasks
+    .filter((task) =>
+      spans(task)
+        ? (task.startsOn ?? day) <= day && day <= (task.dueOn ?? day)
+        : (task.dueOn ?? task.startsOn) === day,
+    )
+    .sort((a, b) => Number(isOpen(b)) - Number(isOpen(a)) || a.number - b.number);
+}
+
 /** How a task reads: struck through once it is over, and marked once its due day is past. */
 const tone = (task: RestTask, now: string): string =>
   cx(
@@ -262,12 +274,18 @@ export function TaskTip(props: TaskTipProps) {
           </dd>
         </div>
         <div>
-          <dt>{words.task.assignee}</dt>
+          <dt>{words.task.workers}</dt>
           <dd>
-            {task.assignee === null ? (
+            {task.workers.length === 0 ? (
               <span className="sc-muted">{words.common.nobody}</span>
             ) : (
-              <PersonChip person={task.assignee} />
+              <ul className="sc-worker-list">
+                {task.workers.map((worker) => (
+                  <li key={worker.id}>
+                    <PersonChip person={worker} />
+                  </li>
+                ))}
+              </ul>
             )}
           </dd>
         </div>
@@ -337,6 +355,10 @@ interface WeekRowProps {
   readonly onPoint: (task: RestTask, day: string, item: HTMLElement) => void;
   /** It left. */
   readonly onLeave: () => void;
+  /** The day whose tasks are listed under the month, where a day can be picked. */
+  readonly picked?: string | null | undefined;
+  /** A day's number was pressed: given, each number is a button. */
+  readonly onPick?: ((day: string) => void) | undefined;
 }
 
 /** The goals that aim at each day, by day: those with a target day, still planned or worked towards. */
@@ -356,9 +378,29 @@ function goalsOnDays(goals: readonly RestGoal[]): ReadonlyMap<string, readonly R
   return on;
 }
 
+/** How many days a bar has in the week, for its title to run along: a custom property the stylesheet reads. */
+const spanStyle = (span: number): CSSProperties => ({ "--sc-span": span }) as CSSProperties;
+
+/** How many of a day's own tasks a cell shows before the way to the rest. */
+export const DAY_SHOWN = 3;
+
 /** One week as a row of cells: the bars across the days in their lanes, then the tasks on each day. */
 function WeekRow(props: WeekRowProps) {
   const { week, segments, now } = props;
+  const words = useWords().calendar;
+  const { tag } = useLanguage();
+  // The days a person opened in this week, each showing all of its tasks.
+  const [opened, setOpened] = useState<ReadonlySet<string>>(() => new Set());
+  const toggle = (day: string) =>
+    setOpened((before) => {
+      const after = new Set(before);
+      if (after.has(day)) {
+        after.delete(day);
+      } else {
+        after.add(day);
+      }
+      return after;
+    });
   const pointing = (task: RestTask, day: string) => ({
     onMouseEnter: (event: SyntheticEvent<HTMLElement>) =>
       props.onPoint(task, day, event.currentTarget),
@@ -371,99 +413,158 @@ function WeekRow(props: WeekRowProps) {
       <TaskTip task={task} goals={props.goals} place={props.pointed.place} />
     ) : null;
   const who = (task: RestTask): ReactNode =>
-    props.people === true && task.assignee !== null ? (
-      <Avatar person={task.assignee} size="xs" />
-    ) : null;
+    props.people === true ? <Workers workers={task.workers} size="xs" shown={2} /> : null;
   const lanes = segments.reduce((most, segment) => Math.max(most, segment.lane + 1), 0);
   return (
     <tr>
-      {week.map((cell, column) => (
-        <td
-          key={cell.day}
-          className={cx(
-            "sc-calendar-cell",
-            !cell.inMonth && "sc-calendar-cell-outside",
-            cell.day === now && "sc-calendar-cell-today",
-          )}
-        >
-          <span className="sc-calendar-day">{Number(cell.day.slice(8))}</span>
-          {props.goalHref !== undefined &&
-            (props.goalsOn?.get(cell.day) ?? []).map((goal) => (
-              <a
-                key={goal.id}
-                className={cx(
-                  "sc-calendar-goal",
-                  `sc-category-${goal.category?.color ?? "gray"}`,
-                  goal.state === "done" && "sc-calendar-over",
-                )}
-                href={props.goalHref?.(goal)}
-              >
-                <span className="sc-calendar-flag" aria-hidden="true" />
-                <span className="sc-calendar-task-title">{goal.title}</span>
-              </a>
-            ))}
-          {Array.from({ length: lanes }, (_, lane) => {
-            const segment = segments.find(
-              (candidate) =>
-                candidate.lane === lane && candidate.from <= column && column <= candidate.to,
-            );
-            if (segment === undefined) {
-              // The lane is someone else's on this day: the bars below keep their height.
-              // biome-ignore lint/suspicious/noArrayIndexKey: an empty lane is nothing but its position, and the lanes of a week never reorder
-              return <span key={lane} className="sc-calendar-lane" aria-hidden="true" />;
-            }
-            const { task } = segment;
-            return (
-              <a
-                key={task.id}
-                className={cx(
-                  "sc-calendar-bar",
-                  `sc-category-${task.category?.color ?? "gray"}`,
-                  segment.from === column && segment.begins && "sc-calendar-bar-begins",
-                  segment.to === column && segment.ends && "sc-calendar-bar-ends",
-                  tone(task, now),
-                )}
-                href={props.taskHref(task)}
-                {...pointing(task, cell.day)}
-              >
-                {segment.from === column && (
-                  <>
-                    {props.markOf?.(task)}
-                    {who(task)}
-                    <span className="sc-calendar-task-title">{task.title}</span>
-                  </>
-                )}
-                {tipIn(task, cell.day)}
-              </a>
-            );
-          })}
-          {(props.on.get(cell.day) ?? []).map((task) => {
-            const mark = props.markOf?.(task);
-            return (
-              <a
-                key={task.id}
-                className={cx("sc-calendar-task", tone(task, now))}
-                href={props.taskHref(task)}
-                {...pointing(task, cell.day)}
+      {week.map((cell, column) => {
+        const number = Number(cell.day.slice(8));
+        // Everything on the day: its own tasks and the bars crossing it, for a phone's count.
+        const total =
+          (props.on.get(cell.day)?.length ?? 0) +
+          segments.filter((segment) => segment.from <= column && column <= segment.to).length;
+        return (
+          <td
+            key={cell.day}
+            className={cx(
+              "sc-calendar-cell",
+              !cell.inMonth && "sc-calendar-cell-outside",
+              cell.day === now && "sc-calendar-cell-today",
+              props.picked === cell.day && "sc-calendar-cell-picked",
+            )}
+          >
+            {props.onPick === undefined ? (
+              <span className="sc-calendar-day">{number}</span>
+            ) : (
+              <button
+                type="button"
+                className="sc-calendar-day"
+                aria-pressed={props.picked === cell.day}
+                aria-label={words.onDay(formatDay(cell.day, tag))}
+                onClick={() => props.onPick?.(cell.day)}
               >
-                {mark === undefined || mark === null ? (
-                  <span
-                    className={cx(
-                      "sc-calendar-dot",
-                      `sc-category-${task.category?.color ?? "gray"}`,
-                    )}
-                  />
-                ) : (
-                  mark
-                )}
-                {who(task)}
-                <span className="sc-calendar-task-title">{task.title}</span>
-                {tipIn(task, cell.day)}
-              </a>
-            );
-          })}
-        </td>
-      ))}
+                {number}
+              </button>
+            )}
+            {props.goalHref !== undefined &&
+              (props.goalsOn?.get(cell.day) ?? []).map((goal) => (
+                <a
+                  key={goal.id}
+                  className={cx(
+                    "sc-calendar-goal",
+                    `sc-category-${goal.category?.color ?? "gray"}`,
+                    goal.state === "done" && "sc-calendar-over",
+                  )}
+                  href={props.goalHref?.(goal)}
+                >
+                  <span className="sc-calendar-flag" aria-hidden="true" />
+                  <span className="sc-calendar-task-title">{goal.title}</span>
+                </a>
+              ))}
+            {Array.from({ length: lanes }, (_, lane) => {
+              const segment = segments.find(
+                (candidate) =>
+                  candidate.lane === lane && candidate.from <= column && column <= candidate.to,
+              );
+              if (segment === undefined) {
+                // The lane is someone else's on this day: the bars below keep their height.
+                // biome-ignore lint/suspicious/noArrayIndexKey: an empty lane is nothing but its position, and the lanes of a week never reorder
+                return <span key={lane} className="sc-calendar-lane" aria-hidden="true" />;
+              }
+              const { task } = segment;
+              // The first piece carries the title; with more days in the week, the title runs along
+              // the bar as far as they reach, over the pieces after it, instead of stopping at the
+              // first day's edge.
+              const span = segment.to - segment.from + 1;
+              const spanning = segment.from === column && span > 1;
+              // Every piece of the task under the pointer lights together, in every week it crosses.
+              const pointed = props.pointed !== null && props.pointed.task.id === task.id;
+              return (
+                <a
+                  key={task.id}
+                  className={cx(
+                    "sc-calendar-bar",
+                    `sc-category-${task.category?.color ?? "gray"}`,
+                    segment.from === column && segment.begins && "sc-calendar-bar-begins",
+                    segment.to === column && segment.ends && "sc-calendar-bar-ends",
+                    spanning && "sc-calendar-bar-spanning",
+                    pointed && "sc-calendar-bar-pointed",
+                    tone(task, now),
+                  )}
+                  style={spanning ? spanStyle(span) : undefined}
+                  href={props.taskHref(task)}
+                  {...pointing(task, cell.day)}
+                >
+                  {segment.from === column && (
+                    <>
+                      {props.markOf?.(task)}
+                      {who(task)}
+                      <span
+                        className={cx(
+                          "sc-calendar-task-title",
+                          spanning && "sc-calendar-task-title-spanning",
+                        )}
+                      >
+                        {task.title}
+                      </span>
+                    </>
+                  )}
+                  {tipIn(task, cell.day)}
+                </a>
+              );
+            })}
+            {(() => {
+              const all = props.on.get(cell.day) ?? [];
+              const open = opened.has(cell.day);
+              const shown = open || all.length <= DAY_SHOWN + 1 ? all : all.slice(0, DAY_SHOWN);
+              return (
+                <>
+                  {shown.map((task) => {
+                    const mark = props.markOf?.(task);
+                    return (
+                      <a
+                        key={task.id}
+                        className={cx("sc-calendar-task", tone(task, now))}
+                        href={props.taskHref(task)}
+                        {...pointing(task, cell.day)}
+                      >
+                        {mark === undefined || mark === null ? (
+                          <span
+                            className={cx(
+                              "sc-calendar-dot",
+                              `sc-category-${task.category?.color ?? "gray"}`,
+                            )}
+                          />
+                        ) : (
+                          mark
+                        )}
+                        {who(task)}
+                        <span className="sc-calendar-task-title">{task.title}</span>
+                        {tipIn(task, cell.day)}
+                      </a>
+                    );
+                  })}
+                  {all.length > DAY_SHOWN + 1 && (
+                    <button
+                      type="button"
+                      className="sc-calendar-more"
+                      aria-expanded={open}
+                      onClick={() => toggle(cell.day)}
+                    >
+                      {open ? words.fewer : words.more(all.length - DAY_SHOWN)}
+                    </button>
+                  )}
+                </>
+              );
+            })()}
+            {total > DAY_SHOWN && (
+              <span className="sc-calendar-count" aria-hidden="true">
+                {total}
+              </span>
+            )}
+          </td>
+        );
+      })}
     </tr>
   );
 }
@@ -472,9 +573,12 @@ export function Calendar(props: CalendarProps) {
   const words = useWords().calendar;
   const { tag } = useLanguage();
   const [pointed, point, leave] = usePointed();
+  // The day whose tasks are listed under the month, once its number is pressed.
+  const [picked, setPicked] = useState<string | null>(null);
   const now = props.today ?? todayOf();
   const firstDay = firstDayOfWeek(deviceLanguage(tag), props.weekStart);
   const weeks = monthGrid(props.month, firstDay);
+  const onPicked = picked === null ? [] : tasksOn(picked, props.tasks);
   const on = onDays(props.tasks);
   const goalsOn = props.goalHref === undefined ? undefined : goalsOnDays(props.goals ?? []);
   const inMonth = (day: string) => monthOf(day) === props.month;
@@ -539,10 +643,35 @@ export function Calendar(props: CalendarProps) {
               onPoint={point}
               onLeave={leave}
               people
+              picked={picked}
+              onPick={(day) => setPicked((before) => (before === day ? null : day))}
             />
           ))}
         </tbody>
       </table>
+      {picked !== null && (
+        <section className="sc-calendar-day-list" aria-label={words.onDay(formatDay(picked, tag))}>
+          <div className="sc-calendar-day-list-head">
+            <h3 className="sc-calendar-day-list-title">
+              {formatDay(picked, tag)} <span className="sc-column-count">{onPicked.length}</span>
+            </h3>
+            <button
+              type="button"
+              className="sc-button sc-button-ghost sc-button-sm"
+              onClick={() => setPicked(null)}
+            >
+              {words.close}
+            </button>
+          </div>
+          <TaskList
+            tasks={onPicked}
+            taskHref={props.taskHref}
+            today={now}
+            showState
+            empty={<p className="sc-muted">{words.nothingOnDay}</p>}
+          />
+        </section>
+      )}
       {(props.categories ?? []).length > 0 && (
         <dl className="sc-calendar-legend" aria-label={words.legend.title}>
           {(props.categories ?? []).map((category) => (
@@ -644,39 +773,44 @@ export function Week(props: WeekProps) {
 
 /** One person's share of the open work, as the table of who has what says it. */
 export interface WorkloadRow {
-  /** The person, or nobody for the tasks assigned to no one. */
+  /** The person, or nobody for the tasks with no worker. */
   readonly person: RestPerson | undefined;
   readonly open: number;
   readonly inProgress: number;
-  /** Open, and due within the next seven days from today. */
-  readonly dueSoon: number;
+  /** Open, and due from today through the last day of this week, as the workspace begins its weeks (ADR-0039). */
+  readonly dueThisWeek: number;
   /** Open, and past its day. */
   readonly overdue: number;
 }
 
-/** Who has what, from the open tasks: by login, with the unassigned last. */
-export function workloadOf(tasks: readonly RestTask[], today: string): WorkloadRow[] {
+/**
+ * Who has what, from the open tasks: a task counted for each of its workers, by name, and the
+ * tasks with none last; this week is the days from today through the week's last day, the week
+ * beginning on `firstDay` (1 for Monday, 7 for Sunday).
+ */
+export function workloadOf(tasks: readonly RestTask[], today: string, firstDay = 1): WorkloadRow[] {
+  const weekEnd = weekOf(today, firstDay).at(-1) ?? today;
   const rows = new Map<string, { person: RestPerson | undefined; tasks: RestTask[] }>();
   for (const task of tasks.filter(isOpen)) {
-    const key = task.assignee?.id ?? "";
-    const row = rows.get(key);
-    if (row === undefined) {
-      rows.set(key, { person: task.assignee ?? undefined, tasks: [task] });
-    } else {
-      row.tasks.push(task);
+    const workers: readonly (RestPerson | undefined)[] =
+      task.workers.length === 0 ? [undefined] : task.workers;
+    for (const worker of workers) {
+      const key = worker?.id ?? "";
+      const row = rows.get(key);
+      if (row === undefined) {
+        rows.set(key, { person: worker, tasks: [task] });
+      } else {
+        row.tasks.push(task);
+      }
     }
   }
   const count = (list: readonly RestTask[]): Omit<WorkloadRow, "person"> => ({
     open: list.length,
     inProgress: list.filter((task) => task.state === "in_progress" || task.state === "in_review")
       .length,
-    dueSoon: list.filter((task) => {
-      if (task.dueOn === null) {
-        return false;
-      }
-      const days = daysBetween(today, task.dueOn);
-      return days >= 0 && days <= 7;
-    }).length,
+    dueThisWeek: list.filter(
+      (task) => task.dueOn !== null && task.dueOn >= today && task.dueOn <= weekEnd,
+    ).length,
     overdue: list.filter((task) => task.dueOn !== null && task.dueOn < today).length,
   });
   return [...rows.values()]
@@ -695,14 +829,21 @@ export function workloadOf(tasks: readonly RestTask[], today: string): WorkloadR
 export interface WorkloadProps {
   readonly tasks: readonly RestTask[];
   readonly today?: string | undefined;
-  /** Where the board is, narrowed to one person's tasks, or to the unassigned. */
+  /** The day the week begins on, as the workspace says (ADR-0035); the language's when left out. */
+  readonly weekStart?: WeekStart | undefined;
+  /** Where the board is, narrowed to one person's tasks, or to those with no worker. */
   readonly personHref?: ((person: RestPerson | undefined) => string) | undefined;
 }
 
-/** Who has what: a row per person, and what of theirs is late or due soon. */
+/** Who has what: a row per person, and what of theirs is late or due this week. */
 export function Workload(props: WorkloadProps) {
   const words = useWords().calendar.workload;
-  const rows = workloadOf(props.tasks, props.today ?? todayOf());
+  const { tag } = useLanguage();
+  const rows = workloadOf(
+    props.tasks,
+    props.today ?? todayOf(),
+    firstDayOfWeek(deviceLanguage(tag), props.weekStart),
+  );
   if (rows.length === 0) {
     return null;
   }
@@ -713,7 +854,7 @@ export function Workload(props: WorkloadProps) {
           <th scope="col">{words.person}</th>
           <th scope="col">{words.open}</th>
           <th scope="col">{words.inProgress}</th>
-          <th scope="col">{words.dueSoon}</th>
+          <th scope="col">{words.dueThisWeek}</th>
           <th scope="col">{words.overdue}</th>
         </tr>
       </thead>
@@ -731,7 +872,7 @@ export function Workload(props: WorkloadProps) {
               <th scope="row">{href === undefined ? who : <a href={href}>{who}</a>}</th>
               <td>{row.open}</td>
               <td>{row.inProgress}</td>
-              <td className={cx(row.dueSoon > 0 && "sc-workload-soon")}>{row.dueSoon}</td>
+              <td className={cx(row.dueThisWeek > 0 && "sc-workload-soon")}>{row.dueThisWeek}</td>
               <td className={cx(row.overdue > 0 && "sc-workload-late")}>{row.overdue}</td>
             </tr>
           );

package/src/components/decision-form.tsx

@@ -1,4 +1,4 @@
-import { type FormEvent, useState } from "react";
+import { type FormEvent, useMemo, useState } from "react";
 import {
   MAX_BODY_LENGTH,
   MAX_OPTION_LABEL_LENGTH,
@@ -6,31 +6,60 @@ import {
   MAX_QUESTION_LENGTH,
   MIN_OPTIONS,
   type RestDecisionInput,
+  type RestPerson,
   type RestTask,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { Button } from "./ui.js";
+import { Picker, type PickerSearch } from "./picker.js";
+import { type TaskSearch, taskLabel } from "./task-form.js";
+import { Button, PersonChip, personName } from "./ui.js";
 
-// Raising a decision: the question, what a person needs to know, and the options to choose from.
+// Raising a decision: the question, what a person needs to know, the options to choose from,
+// and who is to answer (ADR-0042): the person raising it, unless they name another of the
+// project. The task it is about is the page's, when raised from a task; otherwise it is found
+// by searching the board a page at a time (ADR-0037), never picked from the board whole.
 
 export interface DecisionFormProps {
-  /** The tasks the decision may be about. */
-  readonly tasks: readonly RestTask[];
-  /** The task it is about from the start, when raised from a task's page. */
+  /** The task it is about from the start, when raised from a task's page; the field is not shown then. */
   readonly taskId?: string | undefined;
+  /** What words find among the tasks of the project, a page at a time; left out, the decision is about no task in particular. */
+  readonly findTasks?: TaskSearch | undefined;
+  /** Who may be named to answer: the people of the project; left out, the field is not shown and the raiser answers. */
+  readonly deciders?: readonly RestPerson[] | undefined;
+  /** Whoever raises it: who answers unless another is named. */
+  readonly me?: RestPerson | undefined;
   readonly busy?: boolean | undefined;
   readonly error?: string | undefined;
   readonly onSubmit: (input: RestDecisionInput) => void;
   readonly onCancel?: (() => void) | undefined;
 }
 
+/** The people of the project found by the words typed, a page at a time, as a picker searches. */
+export function peopleSearch(people: readonly RestPerson[]): PickerSearch<RestPerson> {
+  return async (query, page) => {
+    const words = query.trim().toLowerCase();
+    const found = people.filter(
+      (person) =>
+        words.length === 0 ||
+        personName(person).toLowerCase().includes(words) ||
+        person.login.toLowerCase().includes(words),
+    );
+    return {
+      items: found.slice(page.offset, page.offset + page.limit),
+      more: found.length > page.offset + page.limit,
+    };
+  };
+}
+
 export function DecisionForm(props: DecisionFormProps) {
   const words = useWords();
   const form = words.decisions.form;
   const [question, setQuestion] = useState("");
   const [body, setBody] = useState("");
-  const [taskId, setTaskId] = useState(props.taskId ?? "");
+  const [about, setAbout] = useState<RestTask | undefined>(undefined);
   const [options, setOptions] = useState<readonly string[]>(["", ""]);
+  const [decider, setDecider] = useState<RestPerson | undefined>(props.me);
+  const findDeciders = useMemo(() => peopleSearch(props.deciders ?? []), [props.deciders]);
 
   const labels = options.map((option) => option.trim()).filter((option) => option.length > 0);
   const ready = question.trim().length > 0 && labels.length >= MIN_OPTIONS;
@@ -41,7 +70,8 @@ export function DecisionForm(props: DecisionFormProps) {
       question: question.trim(),
       body,
       options: labels.map((label) => ({ label })),
-      taskId: taskId === "" ? null : taskId,
+      taskId: props.taskId ?? about?.id ?? null,
+      ...(decider === undefined || decider.id === props.me?.id ? {} : { deciderId: decider.id }),
     });
   };
 
@@ -68,22 +98,40 @@ export function DecisionForm(props: DecisionFormProps) {
           onChange={(event) => setBody(event.target.value)}
         />
       </label>
-      {props.taskId === undefined && props.tasks.length > 0 && (
-        <label className="sc-field">
+      {props.taskId === undefined && props.findTasks !== undefined && (
+        <div className="sc-field">
           <span className="sc-field-label">{form.about}</span>
-          <select
-            className="sc-input"
-            value={taskId}
-            onChange={(event) => setTaskId(event.target.value)}
-          >
-            <option value="">{form.noTask}</option>
-            {props.tasks.map((task) => (
-              <option key={task.id} value={task.id}>
-                #{task.number} {task.title}
-              </option>
-            ))}
-          </select>
-        </label>
+          <Picker
+            value={about}
+            search={props.findTasks}
+            keyOf={(task) => task.id}
+            render={taskLabel}
+            label={form.about}
+            placeholder={form.noTask}
+            disabled={props.busy}
+            onChange={setAbout}
+          />
+        </div>
+      )}
+      {props.deciders !== undefined && (
+        <div className="sc-field">
+          <span className="sc-field-label">{form.decider}</span>
+          <Picker
+            value={decider}
+            search={findDeciders}
+            keyOf={(person) => person.id}
+            render={(person) => (
+              <>
+                <PersonChip person={person} size="sm" />
+                {person.id === props.me?.id && <span className="sc-muted"> {form.me}</span>}
+              </>
+            )}
+            label={form.decider}
+            placeholder={form.deciderPlaceholder}
+            disabled={props.busy}
+            onChange={(person) => setDecider(person ?? props.me)}
+          />
+        </div>
       )}
       <fieldset className="sc-field sc-options">
         <legend className="sc-field-label">{form.options}</legend>