Edit flow configured

app/(app)/create/screens/card/CommunicationMethodsScreen.tsx

@@ -14,15 +14,11 @@
  * the chip selection and any user edits as a `communicationMethodDetailsById[id]` override.
  */
 
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback } from "react";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
-import {
-  deriveCompactCards,
-  rankMethodsByScore,
-  useFacetRecommendations,
-} from "../../hooks/useFacetRecommendations";
+import { useMethodCardDeckOrdering } from "../../hooks/useMethodCardDeckOrdering";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../../components/cards/CardStack";
 import Create from "../../../../components/modals/Create";
@@ -49,32 +45,10 @@ export function CommunicationMethodsScreen() {
 
   const selectedIds = state.selectedCommunicationMethodIds ?? [];
 
-  const { scoresBySlug, hasAnyFacets } =
-    useFacetRecommendations("communication");
-  const rankedMethods = useMemo(
-    () => rankMethodsByScore(comm.methods, scoresBySlug),
-    [comm.methods, scoresBySlug],
-  );
-
-  const { compactCardIds, recommendedIds } = useMemo(
-    () => deriveCompactCards(rankedMethods, scoresBySlug, hasAnyFacets, 5),
-    [rankedMethods, scoresBySlug, hasAnyFacets],
-  );
-
-  const sampleCards = useMemo(
-    () =>
-      rankedMethods.map((entry) => ({
-        id: entry.id,
-        label: entry.label,
-        supportText: entry.supportText,
-        recommended: recommendedIds.has(entry.id),
-      })),
-    [rankedMethods, recommendedIds],
-  );
-
-  const methodById = useMemo(
-    () => new Map(rankedMethods.map((entry) => [entry.id, entry])),
-    [rankedMethods],
+  const { sampleCards, compactCardIds, methodById } = useMethodCardDeckOrdering(
+    "communication",
+    comm.methods,
+    selectedIds,
   );
 
   const title = expanded ? comm.page.expandedTitle : comm.page.compactTitle;

app/(app)/create/screens/card/ConflictManagementScreen.tsx

@@ -12,15 +12,11 @@
  * any user edits as a `conflictManagementDetailsById[id]` override.
  */
 
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback } from "react";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
-import {
-  deriveCompactCards,
-  rankMethodsByScore,
-  useFacetRecommendations,
-} from "../../hooks/useFacetRecommendations";
+import { useMethodCardDeckOrdering } from "../../hooks/useMethodCardDeckOrdering";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../../components/cards/CardStack";
 import Create from "../../../../components/modals/Create";
@@ -47,32 +43,10 @@ export function ConflictManagementScreen() {
 
   const selectedIds = state.selectedConflictManagementIds ?? [];
 
-  const { scoresBySlug, hasAnyFacets } =
-    useFacetRecommendations("conflictManagement");
-  const rankedMethods = useMemo(
-    () => rankMethodsByScore(cm.methods, scoresBySlug),
-    [cm.methods, scoresBySlug],
-  );
-
-  const { compactCardIds, recommendedIds } = useMemo(
-    () => deriveCompactCards(rankedMethods, scoresBySlug, hasAnyFacets, 5),
-    [rankedMethods, scoresBySlug, hasAnyFacets],
-  );
-
-  const sampleCards = useMemo(
-    () =>
-      rankedMethods.map((entry) => ({
-        id: entry.id,
-        label: entry.label,
-        supportText: entry.supportText,
-        recommended: recommendedIds.has(entry.id),
-      })),
-    [rankedMethods, recommendedIds],
-  );
-
-  const methodById = useMemo(
-    () => new Map(rankedMethods.map((entry) => [entry.id, entry])),
-    [rankedMethods],
+  const { sampleCards, compactCardIds, methodById } = useMethodCardDeckOrdering(
+    "conflictManagement",
+    cm.methods,
+    selectedIds,
   );
 
   const title = expanded ? cm.page.expandedTitle : cm.page.compactTitle;

app/(app)/create/screens/card/MembershipMethodsScreen.tsx

@@ -13,15 +13,11 @@
  * DB-driven content.
  */
 
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback } from "react";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
-import {
-  deriveCompactCards,
-  rankMethodsByScore,
-  useFacetRecommendations,
-} from "../../hooks/useFacetRecommendations";
+import { useMethodCardDeckOrdering } from "../../hooks/useMethodCardDeckOrdering";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../../components/cards/CardStack";
 import Create from "../../../../components/modals/Create";
@@ -48,32 +44,10 @@ export function MembershipMethodsScreen() {
 
   const selectedIds = state.selectedMembershipMethodIds ?? [];
 
-  const { scoresBySlug, hasAnyFacets } =
-    useFacetRecommendations("membership");
-  const rankedMethods = useMemo(
-    () => rankMethodsByScore(mem.methods, scoresBySlug),
-    [mem.methods, scoresBySlug],
-  );
-
-  const { compactCardIds, recommendedIds } = useMemo(
-    () => deriveCompactCards(rankedMethods, scoresBySlug, hasAnyFacets, 5),
-    [rankedMethods, scoresBySlug, hasAnyFacets],
-  );
-
-  const sampleCards = useMemo(
-    () =>
-      rankedMethods.map((entry) => ({
-        id: entry.id,
-        label: entry.label,
-        supportText: entry.supportText,
-        recommended: recommendedIds.has(entry.id),
-      })),
-    [rankedMethods, recommendedIds],
-  );
-
-  const methodById = useMemo(
-    () => new Map(rankedMethods.map((entry) => [entry.id, entry])),
-    [rankedMethods],
+  const { sampleCards, compactCardIds, methodById } = useMethodCardDeckOrdering(
+    "membership",
+    mem.methods,
+    selectedIds,
   );
 
   const title = expanded ? mem.page.expandedTitle : mem.page.compactTitle;

app/(app)/create/screens/review/FinalReviewScreen.tsx

@@ -15,18 +15,31 @@ import {
   type FinalReviewCategoryRowDetailed,
 } from "../../../../../lib/create/buildFinalReviewCategories";
 import { applyFinalReviewChipEditPatch } from "../../../../../lib/create/applyFinalReviewChipEditPatch";
-import type { TemplateChipDetail } from "../../../../../lib/create/templateReviewMapping";
+import type {
+  TemplateChipDetail,
+  TemplateFacetGroupKey,
+} from "../../../../../lib/create/templateReviewMapping";
 import {
   FinalReviewChipEditModal,
   type FinalReviewChipEditPatch,
   type FinalReviewChipEditTarget,
 } from "../../components/FinalReviewChipEditModal";
 import { FinalReviewCommunityContextEditModal } from "../../components/FinalReviewCommunityContextEditModal";
+import { useCreateFlowNavigation } from "../../hooks/useCreateFlowNavigation";
+import { createFlowStepForFacetGroup } from "../../utils/facetGroupToCreateFlowStep";
 import {
   getAssetPath,
   vectorMarkPath,
 } from "../../../../../lib/assetUtils";
 
+const FACET_FALLBACK_ORDER: readonly TemplateFacetGroupKey[] = [
+  "coreValues",
+  "communication",
+  "membership",
+  "decisionApproaches",
+  "conflictManagement",
+] as const;
+
 /**
  * `finalReview.json.categories` ships a demo ordering + localized names
  * (Values / Communication / Membership / Decision-making / Conflict
@@ -75,6 +88,7 @@ export function FinalReviewScreen({
   variant?: "default" | "editPublished";
 } = {}) {
   const { state, updateState, markCreateFlowInteraction } = useCreateFlow();
+  const { goToStep } = useCreateFlowNavigation();
   const mdUp = useCreateFlowMdUp();
   const t = useTranslation("create.reviewAndComplete.finalReview");
   const m = useMessages();
@@ -116,13 +130,23 @@ export function FinalReviewScreen({
     const derived = buildFinalReviewCategoryRowsDetailed(state, names);
     const rowsToRender: readonly FinalReviewCategoryRowDetailed[] =
       derived.length > 0 ? derived : fallbackRows;
+    const usingFallbackRows = derived.length === 0;
 
     const lookup = new Map<
       string,
       { target: FinalReviewChipEditTarget | null; readOnly: TemplateChipDetail }
     >();
 
-    const cats: Category[] = rowsToRender.map((row) => {
+    const cats: Category[] = rowsToRender.map((row, rowIndex) => {
+      const effectiveGroupKey: TemplateFacetGroupKey | null =
+        row.groupKey ??
+        (usingFallbackRows && rowIndex < FACET_FALLBACK_ORDER.length
+          ? FACET_FALLBACK_ORDER[rowIndex]
+          : null);
+
+      const reviewReturn =
+        variant === "editPublished" ? ("edit-rule" as const) : ("final-review" as const);
+
       const chipOptions = row.entries.map((entry, idx) => {
         const chipId = `${row.name}-${idx}`;
         const readOnly: TemplateChipDetail = {
@@ -150,6 +174,7 @@ export function FinalReviewScreen({
       return {
         name: row.name,
         chipOptions,
+        addButton: effectiveGroupKey != null,
         onChipClick: (_categoryName: string, chipId: string) => {
           const hit = lookup.get(chipId);
           if (!hit) return;
@@ -160,6 +185,15 @@ export function FinalReviewScreen({
             setActiveReadOnlyDetail(hit.readOnly);
           }
         },
+        onAddClick:
+          effectiveGroupKey != null
+            ? () => {
+                markCreateFlowInteraction();
+                goToStep(createFlowStepForFacetGroup(effectiveGroupKey), {
+                  reviewReturn,
+                });
+              }
+            : undefined,
       };
     });
     return { categories: cats, chipLookup: lookup };
@@ -167,6 +201,8 @@ export function FinalReviewScreen({
     m.create.reviewAndComplete.finalReview.categories,
     state,
     markCreateFlowInteraction,
+    goToStep,
+    variant,
   ]);
   void chipLookup;
 

app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx

@@ -23,15 +23,10 @@ import Create from "../../../../components/modals/Create";
 import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import InfoMessageBox from "../../../../components/controls/InfoMessageBox";
 import type { InfoMessageBoxItem } from "../../../../components/controls/InfoMessageBox/InfoMessageBox.types";
-import type { CardStackItem } from "../../../../components/cards/CardStack/CardStack.types";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
-import {
-  deriveCompactCards,
-  rankMethodsByScore,
-  useFacetRecommendations,
-} from "../../hooks/useFacetRecommendations";
+import { useMethodCardDeckOrdering } from "../../hooks/useMethodCardDeckOrdering";
 import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
 import { DecisionApproachEditFields } from "../../components/methodEditFields";
 import { decisionApproachPresetFor } from "../../../../../lib/create/finalReviewChipPresets";
@@ -62,32 +57,10 @@ export function DecisionApproachesScreen() {
     [da.messageBox.items],
   );
 
-  const { scoresBySlug, hasAnyFacets } =
-    useFacetRecommendations("decisionApproaches");
-  const rankedMethods = useMemo(
-    () => rankMethodsByScore(da.methods, scoresBySlug),
-    [da.methods, scoresBySlug],
-  );
-
-  const { compactCardIds, recommendedIds } = useMemo(
-    () => deriveCompactCards(rankedMethods, scoresBySlug, hasAnyFacets, 5),
-    [rankedMethods, scoresBySlug, hasAnyFacets],
-  );
-
-  const sampleCards: CardStackItem[] = useMemo(
-    () =>
-      rankedMethods.map((entry) => ({
-        id: entry.id,
-        label: entry.label,
-        supportText: entry.supportText,
-        recommended: recommendedIds.has(entry.id),
-      })),
-    [rankedMethods, recommendedIds],
-  );
-
-  const methodById = useMemo(
-    () => new Map(rankedMethods.map((entry) => [entry.id, entry])),
-    [rankedMethods],
+  const { sampleCards, compactCardIds, methodById } = useMethodCardDeckOrdering(
+    "decisionApproaches",
+    da.methods,
+    selectedIds,
   );
 
   const sidebarDescription = (