App reorganization

2026-04-18 14:12:49 -06:00
parent f866d11ff8
commit e9dab04b34
288 changed files with 2698 additions and 5029 deletions
@@ -0,0 +1,106 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import MultiSelect from "../../../../components/controls/MultiSelect";
+import type { ChipOption } from "../../../../components/controls/MultiSelect/MultiSelect.types";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import { useCreateFlow } from "../../context/CreateFlowContext";
+import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
+import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
+
+function chipRowsFromLabels(
+  rows: readonly { label: string }[],
+): ChipOption[] {
+  return rows.map((row, i) => ({
+    id: String(i + 1),
+    label: row.label,
+    state: "unselected" as const,
+  }));
+}
+
+function selectedIdsFromOptions(options: ChipOption[]): string[] {
+  return options
+    .filter((o) => o.state === "selected")
+    .map((o) => o.id);
+}
+
+/** Create Community — Figma `20094:41317`, chips only (layout tokens shared with structure select). */
+export function CommunitySizeSelectScreen() {
+  const m = useMessages();
+  const cs = m.create.communitySize;
+  const { markCreateFlowInteraction, updateState, state } = useCreateFlow();
+
+  const [communitySizeOptions, setCommunitySizeOptions] = useState<
+    ChipOption[]
+  >(() => {
+    const base = chipRowsFromLabels(cs.communitySizes);
+    const selected = new Set(state.selectedCommunitySizeIds ?? []);
+    return base.map((opt) => ({
+      ...opt,
+      state: selected.has(opt.id) ? ("selected" as const) : ("unselected" as const),
+    }));
+  });
+
+  useEffect(() => {
+    const selected = new Set(state.selectedCommunitySizeIds ?? []);
+    setCommunitySizeOptions((prev) =>
+      prev.map((opt) =>
+        opt.state === "custom"
+          ? opt
+          : {
+              ...opt,
+              state: selected.has(opt.id)
+                ? ("selected" as const)
+                : ("unselected" as const),
+            },
+      ),
+    );
+  }, [state.selectedCommunitySizeIds]);
+
+  const persistSelection = (next: ChipOption[]) => {
+    markCreateFlowInteraction();
+    setCommunitySizeOptions(next);
+    updateState({
+      selectedCommunitySizeIds: selectedIdsFromOptions(next),
+    });
+  };
+
+  const handleCommunitySizeClick = (chipId: string) => {
+    const next: ChipOption[] = communitySizeOptions.map((opt) =>
+      opt.id === chipId
+        ? {
+            ...opt,
+            state:
+              opt.state === "selected"
+                ? ("unselected" as const)
+                : ("selected" as const),
+          }
+        : opt,
+    );
+    persistSelection(next);
+  };
+
+  const multiSelectBlock = (
+    <MultiSelect
+      formHeader={false}
+      size="m"
+      options={communitySizeOptions}
+      onChipClick={handleCommunitySizeClick}
+      addButton={false}
+    />
+  );
+
+  return (
+    <CreateFlowTwoColumnSelectShell
+      header={
+        <CreateFlowHeaderLockup
+          title={cs.header.title}
+          description={cs.header.description}
+          justification="left"
+        />
+      }
+    >
+      {multiSelectBlock}
+    </CreateFlowTwoColumnSelectShell>
+  );
+}