Walk Create Community through the Figma screens and restore a chosen logo after reload, so a guest can leave without saving until they reach the email step.

app/(app)/create/screens/select/CommunitySizeSelectScreen.tsx

@@ -5,6 +5,7 @@ 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 { useCreateFlowContinueAttempt } from "../../context/CreateFlowContinueAttemptContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
 
@@ -48,6 +49,7 @@ export function CommunitySizeSelectScreen() {
   const m = useMessages();
   const cs = m.create.community.communitySize;
   const { markCreateFlowInteraction, updateState, state } = useCreateFlow();
+  const { attempted } = useCreateFlowContinueAttempt();
 
   const [communitySizeOptions, setCommunitySizeOptions] = useState<
     ChipOption[]
@@ -87,6 +89,9 @@ export function CommunitySizeSelectScreen() {
     persistSelection(withSoleSelection(communitySizeOptions, nextId));
   };
 
+  const showSizeError =
+    attempted && soleSizeId(state.selectedCommunitySizeIds) == null;
+
   const multiSelectBlock = (
     <MultiSelect
       formHeader={false}
@@ -94,6 +99,7 @@ export function CommunitySizeSelectScreen() {
       options={communitySizeOptions}
       onChipClick={handleCommunitySizeClick}
       addButton={false}
+      errorMessage={showSizeError ? cs.pickOneError : undefined}
     />
   );