CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Create flow UX updates

Browse Source
This commit is contained in:
adilallo
2026-04-11 00:22:02 -06:00
parent ec5afd1464
commit a5c6b8971f
33 changed files with 1010 additions and 931 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/create/final-review/page.tsx
+50 -116
View File
@@ -1,136 +1,70 @@
"use client";
import { useState, useEffect, useMemo } from "react";
import { useMediaQuery } from "../../hooks/useMediaQuery";
import HeaderLockup from "../../components/type/HeaderLockup";
import { useMemo } from "react";
import RuleCard from "../../components/cards/RuleCard";
import type { Category } from "../../components/cards/RuleCard/RuleCard.types";
import { useMessages, useTranslation } from "../../contexts/MessagesContext";
import { useCreateFlow } from "../context/CreateFlowContext";
import {
CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS,
CreateFlowLockupCardStepShell,
} from "../components/CreateFlowLockupCardStepShell";
const TITLE = "Review your CommunityRule";
const DESCRIPTION =
"Here's what other people will see. Make sure everything looks good before you finalize everything. Once the rule is finalized, you must use one of your decision-making mechanisms to edit it again.";
const RULE_CARD_TITLE_FALLBACK = "Your community";
const RULE_CARD_DESCRIPTION_FALLBACK =
"Add a short description of your community on earlier steps when that field is available. For now, this card shows your community name.";
/** Static categories for final review (read-only display). */
const FINAL_REVIEW_CATEGORIES: Category[] = [
{
name: "Values",
chipOptions: [
{ id: "v1", label: "Consciousness", state: "unselected" },
{ id: "v2", label: "Ecology", state: "unselected" },
{ id: "v3", label: "Abundance", state: "unselected" },
{ id: "v4", label: "Art", state: "unselected" },
{ id: "v5", label: "Decisiveness", state: "unselected" },
],
},
{
name: "Communication",
chipOptions: [{ id: "c1", label: "Signal", state: "unselected" }],
},
{
name: "Membership",
chipOptions: [{ id: "m1", label: "Open Admission", state: "unselected" }],
},
{
name: "Decision-making",
chipOptions: [
{ id: "d1", label: "Lazy Consensus", state: "unselected" },
{ id: "d2", label: "Modified Consensus", state: "unselected" },
],
},
{
name: "Conflict management",
chipOptions: [
{ id: "cf1", label: "Code of Conduct", state: "unselected" },
{ id: "cf2", label: "Restorative Justice", state: "unselected" },
],
},
];
function buildFinalReviewCategories(
rows: { name: string; chips: string[] }[],
): Category[] {
return rows.map((cat) => ({
name: cat.name,
chipOptions: cat.chips.map((label, idx) => ({
id: `${cat.name}-${idx}`,
label,
state: "unselected" as const,
})),
}));
}
/**
* Final review step (right before completed).
* Figma: 20907-212767 (full-size), 20976-220705 (small breakpoint).
* Figma: 20907-212767 (full-size), 20976-220705 (below `md`).
*/
export default function FinalReviewPage() {
const { state } = useCreateFlow();
const [isMounted, setIsMounted] = useState(false);
const isMdOrLarger = useMediaQuery("(min-width: 640px)");
const t = useTranslation("create.finalReview");
const m = useMessages();
const finalReviewCategories = useMemo(
() => buildFinalReviewCategories(m.create.finalReview.categories),
[m.create.finalReview.categories],
);
const ruleCardTitle = useMemo(() => {
const t = typeof state.title === "string" ? state.title.trim() : "";
return t.length > 0 ? t : RULE_CARD_TITLE_FALLBACK;
}, [state.title]);
const raw = typeof state.title === "string" ? state.title.trim() : "";
return raw.length > 0 ? raw : t("ruleCardTitleFallback");
}, [state.title, t]);
const ruleCardDescription = useMemo(() => {
const s = typeof state.summary === "string" ? state.summary.trim() : "";
return s.length > 0 ? s : RULE_CARD_DESCRIPTION_FALLBACK;
}, [state.summary]);
// Avoid flash: only use breakpoint after mount so SSR and first paint use same layout (desktop).
useEffect(() => {
// eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: defer layout breakpoint until after mount to prevent flash
setIsMounted(true);
}, []);
const showDesktopLayout = !isMounted || isMdOrLarger;
if (showDesktopLayout) {
return (
<div className="w-full max-w-[1280px] shrink-0 px-5 md:px-12">
<div className="flex w-full flex-col gap-4 min-w-0 sm:grid sm:grid-cols-2 sm:gap-[var(--measures-spacing-1200,48px)]">
<div className="min-w-0 flex flex-col justify-center">
<HeaderLockup
title={TITLE}
description={DESCRIPTION}
justification="left"
size="L"
/>
</div>
<div className="min-w-0 w-full flex flex-col items-stretch">
<RuleCard
title={ruleCardTitle}
description={ruleCardDescription}
size="L"
expanded={true}
backgroundColor="bg-[#c9fef9]"
logoUrl="/assets/Vector_MutualAid.svg"
logoAlt={ruleCardTitle}
categories={FINAL_REVIEW_CATEGORIES}
className="rounded-[24px] !max-w-full !w-full min-w-0"
onClick={() => {}}
/>
</div>
</div>
</div>
);
}
const raw =
typeof state.summary === "string" ? state.summary.trim() : "";
return raw.length > 0 ? raw : t("ruleCardDescriptionFallback");
}, [state.summary, t]);
return (
<div className="w-full flex flex-col items-center px-5 min-w-0">
<div className="flex flex-col gap-4 w-full max-w-[639px]">
<HeaderLockup
title={TITLE}
description={DESCRIPTION}
justification="left"
size="M"
/>
<RuleCard
title={ruleCardTitle}
description={ruleCardDescription}
size="L"
expanded={true}
backgroundColor="bg-[#c9fef9]"
logoUrl="/assets/Vector_MutualAid.svg"
logoAlt={ruleCardTitle}
categories={FINAL_REVIEW_CATEGORIES}
className="w-full rounded-[12px] p-4"
onClick={() => {}}
/>
</div>
</div>
<CreateFlowLockupCardStepShell
lockupTitle={t("title")}
lockupDescription={t("description")}
>
<RuleCard
title={ruleCardTitle}
description={ruleCardDescription}
size="L"
expanded={true}
backgroundColor="bg-[#c9fef9]"
logoUrl="/assets/Vector_MutualAid.svg"
logoAlt={ruleCardTitle}
categories={finalReviewCategories}
className={CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS}
onClick={() => {}}
/>
</CreateFlowLockupCardStepShell>
);
}