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

Let core-value meaning and signals be edited on first open with Add Value, confirm discard when closing without adding, and pin Keep editing to the footer back slot.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-08-19 21:56:52 -06:00
co-authored by Cursor
parent d6d6a5e055
commit e9951f260b
9 changed files with 136 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(app)/create/CreateFlowLayoutClient.tsx
+11 -8
View File
@@ -84,6 +84,7 @@ import { SignedInDraftHydration } from "./SignedInDraftHydration";
import { CreateFlowPendingAvatarFlush } from "./components/CreateFlowPendingAvatarFlush";
import Alert from "../../components/modals/Alert";
import Create from "../../components/modals/Create";
import { MODAL_FOOTER_START_SLOT_CLASS } from "../../components/modals/ModalFooter";
import Share from "../../components/modals/Share";
import {
CreateFlowDraftSaveBannerProvider,
@@ -637,14 +638,16 @@ function CreateFlowLayoutContent({
nextButtonText={messages.create.topNav.leaveConfirmProceed}
onNext={() => closeLeaveConfirm(true)}
footerContent={
<Button
buttonType="ghost"
palette="default"
size="xsmall"
onClick={() => closeLeaveConfirm(false)}
>
{messages.create.topNav.leaveConfirmCancel}
</Button>
<div className={MODAL_FOOTER_START_SLOT_CLASS}>
<Button
buttonType="ghost"
palette="default"
size="xsmall"
onClick={() => closeLeaveConfirm(false)}
>
{messages.create.topNav.leaveConfirmCancel}
</Button>
</div>
}
backdropVariant="blurredYellow"
ariaLabel={messages.create.topNav.leaveConfirmTitle}
app/(app)/create/components/methodEditFields/CoreValueEditFields.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ import type { CoreValueDetailEntry } from "../../types";
export interface CoreValueEditFieldsProps {
value: CoreValueDetailEntry;
onChange: (_next: CoreValueDetailEntry) => void;
/** View mode until the user taps **Customize**. */
/** Disable meaning/signals. Create-flow core-values omits this; final-review locks until Customize. */
readOnly?: boolean;
}
app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
+54 -225
View File
@@ -8,7 +8,7 @@ import ContentLockup from "../../../../components/type/ContentLockup";
import { useMessages } from "../../../../contexts/MessagesContext";
import { buildCoreValueChipOptionsFromDraft } from "../../../../../lib/create/coreValueChipOptionsFromDraft";
import { useCreateFlow } from "../../context/CreateFlowContext";
import { useDiscardCustomizeConfirm } from "../../hooks/useDiscardCustomizeConfirm";
import { useAsyncConfirm } from "../../../../hooks/useAsyncConfirm";
import type {
CommunityStructureChipSnapshotRow,
CoreValueDetailEntry,
@@ -16,14 +16,7 @@ import type {
import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
import { CoreValueEditFields } from "../../components/methodEditFields";
import MethodCardCustomizeModalHeader from "../../components/MethodCardCustomizeModalHeader";
import { buildCustomRuleModalKebabMenu } from "../../components/customRuleModalKebabMenu";
import {
captureMethodCardCustomizeSnapshot,
isMethodCardCustomizeSessionDirty,
type MethodCardCustomizeSnapshot,
type MethodCardHeaderDraft,
} from "../../../../../lib/create/methodCardCustomizeSession";
import {
duplicateCoreValueChipInDraft,
MAX_SELECTED_CORE_VALUES,
@@ -37,8 +30,7 @@ const MAX_CORE_VALUES = MAX_SELECTED_CORE_VALUES;
* Why three sessions, not two:
*
* - `pending` — preset chip just selected; modal opened to capture
* meaning/signals. Dismiss = unselect the chip (keep it in the
* preset row, just not selected).
* meaning/signals. Close (X) confirms, then unselects the chip.
* - `customPending` — brand-new custom chip just created via the Add
* value flow; modal opened with empty fields. Dismiss = drop the
* chip entirely (it was never confirmed via the Add Value button).
@@ -101,13 +93,11 @@ export function CoreValuesSelectScreen() {
[cv.values],
);
const { confirmDiscard, confirmDirtyCustomizeCancel, confirmDialog } =
useDiscardCustomizeConfirm();
const { requestConfirm, confirmDialog } = useAsyncConfirm();
const { markCreateFlowInteraction, updateState, replaceState, state } =
useCreateFlow();
const coreCustomizeSnapshotRef =
useRef<MethodCardCustomizeSnapshot<CoreValueDetailEntry> | null>(null);
const initialDraftRef = useRef<CoreValueDetailEntry | null>(null);
const pendingEphemeralCoreDuplicateRef = useRef<string | null>(null);
const [coreValueOptions, setCoreValueOptions] = useState<ChipOption[]>(() =>
@@ -123,9 +113,6 @@ export function CoreValuesSelectScreen() {
);
const [modalSession, setModalSession] = useState<ModalSession | null>(null);
const [draft, setDraft] = useState<CoreValueDetailEntry>(EMPTY_DETAIL);
const [modalEditUnlocked, setModalEditUnlocked] = useState(false);
const [customizeHeaderDraft, setCustomizeHeaderDraft] =
useState<MethodCardHeaderDraft | null>(null);
useEffect(() => {
setCoreValueOptions(
@@ -190,12 +177,11 @@ export function CoreValuesSelectScreen() {
valueLabel: string,
seedDetail?: CoreValueDetailEntry,
) => {
setDraft(seedDetail ?? getInitialTexts(chipId, valueLabel));
const initial = seedDetail ?? getInitialTexts(chipId, valueLabel);
initialDraftRef.current = { ...initial };
setDraft(initial);
setActiveModalChipId(chipId);
setModalSession(session);
setModalEditUnlocked(false);
setCustomizeHeaderDraft(null);
coreCustomizeSnapshotRef.current = null;
markCreateFlowInteraction();
},
[getInitialTexts, markCreateFlowInteraction],
@@ -209,87 +195,36 @@ export function CoreValuesSelectScreen() {
[markCreateFlowInteraction],
);
const resetCustomizeSession = useCallback(() => {
coreCustomizeSnapshotRef.current = null;
setModalEditUnlocked(false);
setCustomizeHeaderDraft(null);
}, []);
const finalizeModalDismiss = useCallback(() => {
pendingEphemeralCoreDuplicateRef.current = null;
resetCustomizeSession();
initialDraftRef.current = null;
setActiveModalChipId(null);
setModalSession(null);
}, [resetCustomizeSession]);
}, []);
const handleCustomize = useCallback(() => {
if (!activeModalChipId) return;
const chipLabelNow =
coreValueOptions.find((o) => o.id === activeModalChipId)?.label ?? "";
if (!chipLabelNow) return;
markCreateFlowInteraction();
const headerDraft: MethodCardHeaderDraft = {
title: chipLabelNow,
description: "",
};
coreCustomizeSnapshotRef.current = captureMethodCardCustomizeSnapshot(
draft,
null,
headerDraft,
);
setCustomizeHeaderDraft(headerDraft);
setModalEditUnlocked(true);
}, [activeModalChipId, coreValueOptions, draft, markCreateFlowInteraction]);
const handleCancelCustomize = useCallback(async () => {
if (!modalEditUnlocked) return;
const snap = coreCustomizeSnapshotRef.current;
if (!snap) {
resetCustomizeSession();
return;
const confirmLeaveWithoutSaving = useCallback(async () => {
const isPendingAdd =
modalSession === "pending" || modalSession === "customPending";
const initial = initialDraftRef.current;
const editingDirty =
modalSession === "editing" &&
initial != null &&
(draft.meaning !== initial.meaning || draft.signals !== initial.signals);
if (!isPendingAdd && !editingDirty) {
return true;
}
if (
!(await confirmDirtyCustomizeCancel(
snap,
draft,
null,
customizeHeaderDraft,
))
) {
return;
}
setDraft(structuredClone(snap.pendingDraft));
resetCustomizeSession();
}, [
confirmDirtyCustomizeCancel,
customizeHeaderDraft,
draft,
modalEditUnlocked,
resetCustomizeSession,
]);
return requestConfirm({
title: cv.detailModal.discardTitle,
description: isPendingAdd
? cv.detailModal.discardPendingDescription
: cv.detailModal.discardEditsDescription,
proceedText: cv.detailModal.discardProceed,
cancelText: cv.detailModal.discardKeepEditing,
});
}, [cv.detailModal, draft, modalSession, requestConfirm]);
const syncLabelFromCustomizeHeaderToOptions = useCallback(() => {
if (!activeModalChipId || !customizeHeaderDraft) return coreValueOptions;
const trimmed = customizeHeaderDraft.title.trim();
if (!trimmed) return coreValueOptions;
return coreValueOptions.map((opt) =>
opt.id === activeModalChipId ? { ...opt, label: trimmed } : opt,
);
}, [activeModalChipId, customizeHeaderDraft, coreValueOptions]);
const handleDuplicateCoreChip = useCallback(async () => {
const handleDuplicateCoreChip = useCallback(() => {
if (!activeModalChipId || !modalSession) return;
if (
!(await confirmDiscard(
modalEditUnlocked,
coreCustomizeSnapshotRef.current,
draft,
null,
customizeHeaderDraft,
))
) {
return;
}
markCreateFlowInteraction();
const priorEphemeral = pendingEphemeralCoreDuplicateRef.current;
let outcome: ReturnType<typeof duplicateCoreValueChipInDraft> | null = null;
@@ -312,7 +247,6 @@ export function CoreValuesSelectScreen() {
if (!outcome) {
return;
}
resetCustomizeSession();
pendingEphemeralCoreDuplicateRef.current = outcome.newId;
openModal(
outcome.newId,
@@ -322,30 +256,15 @@ export function CoreValuesSelectScreen() {
);
}, [
activeModalChipId,
confirmDiscard,
customizeHeaderDraft,
draft,
markCreateFlowInteraction,
modalEditUnlocked,
modalKebabMenu.duplicateTitleSuffix,
modalSession,
openModal,
replaceState,
resetCustomizeSession,
]);
const handleRemoveFromKebab = useCallback(async () => {
if (
!(await confirmDiscard(
modalEditUnlocked,
coreCustomizeSnapshotRef.current,
draft,
null,
customizeHeaderDraft,
))
) {
return;
}
const handleRemoveFromKebab = useCallback(() => {
markCreateFlowInteraction();
const ep = pendingEphemeralCoreDuplicateRef.current;
@@ -386,28 +305,16 @@ export function CoreValuesSelectScreen() {
finalizeModalDismiss();
}, [
activeModalChipId,
confirmDiscard,
coreValueOptions,
customizeHeaderDraft,
draft,
finalizeModalDismiss,
markCreateFlowInteraction,
modalEditUnlocked,
modalSession,
persistCoreValues,
replaceState,
]);
const handleModalDismiss = useCallback(async () => {
if (
!(await confirmDiscard(
modalEditUnlocked,
coreCustomizeSnapshotRef.current,
draft,
null,
customizeHeaderDraft,
))
) {
if (!(await confirmLeaveWithoutSaving())) {
return;
}
@@ -436,93 +343,39 @@ export function CoreValuesSelectScreen() {
finalizeModalDismiss();
}, [
activeModalChipId,
confirmDiscard,
confirmLeaveWithoutSaving,
coreValueOptions,
customizeHeaderDraft,
draft,
finalizeModalDismiss,
modalEditUnlocked,
modalSession,
persistCoreValues,
replaceState,
]);
const coreCustomizeSaveDisabled = useMemo(() => {
if (!modalEditUnlocked) return false;
const snap = coreCustomizeSnapshotRef.current;
if (!snap) return true;
return !isMethodCardCustomizeSessionDirty(
snap,
draft,
null,
customizeHeaderDraft,
);
}, [customizeHeaderDraft, draft, modalEditUnlocked]);
const handleModalConfirm = useCallback(() => {
if (!activeModalChipId || !modalSession) return;
if (modalEditUnlocked && customizeHeaderDraft) {
if (coreCustomizeSaveDisabled) {
return;
}
markCreateFlowInteraction();
pendingEphemeralCoreDuplicateRef.current = null;
const nextOpts = syncLabelFromCustomizeHeaderToOptions();
persistCoreValues(nextOpts);
updateState({
coreValueDetailsByChipId: {
...(state.coreValueDetailsByChipId ?? {}),
[activeModalChipId]: draft,
},
});
resetCustomizeSession();
return;
}
if (modalSession === "pending" || modalSession === "customPending") {
markCreateFlowInteraction();
pendingEphemeralCoreDuplicateRef.current = null;
updateState({
coreValueDetailsByChipId: {
...(state.coreValueDetailsByChipId ?? {}),
[activeModalChipId]: draft,
},
});
resetCustomizeSession();
setActiveModalChipId(null);
setModalSession(null);
}
markCreateFlowInteraction();
pendingEphemeralCoreDuplicateRef.current = null;
updateState({
coreValueDetailsByChipId: {
...(state.coreValueDetailsByChipId ?? {}),
[activeModalChipId]: draft,
},
});
finalizeModalDismiss();
}, [
activeModalChipId,
coreCustomizeSaveDisabled,
customizeHeaderDraft,
draft,
finalizeModalDismiss,
markCreateFlowInteraction,
modalEditUnlocked,
modalSession,
persistCoreValues,
resetCustomizeSession,
state.coreValueDetailsByChipId,
syncLabelFromCustomizeHeaderToOptions,
updateState,
]);
const modalChipLabel =
coreValueOptions.find((o) => o.id === activeModalChipId)?.label ?? "";
const modalFieldsLocked =
!modalEditUnlocked &&
Boolean(
modalSession === "pending" ||
modalSession === "customPending" ||
modalSession === "editing",
);
const showFooterPrimary =
modalEditUnlocked ||
modalSession === "pending" ||
modalSession === "customPending";
const showFooterPrimary = Boolean(modalSession);
const kebabMenuItems = useMemo(() => {
if (!modalSession || !activeModalChipId) return [];
@@ -530,8 +383,6 @@ export function CoreValuesSelectScreen() {
(o) => o.state === "selected",
).length;
return buildCustomRuleModalKebabMenu(modalKebabMenu, {
showCustomize: !modalEditUnlocked,
onCustomize: handleCustomize,
onDuplicate:
modalSession !== "editing" || selectedCount >= MAX_CORE_VALUES
? undefined
@@ -542,10 +393,8 @@ export function CoreValuesSelectScreen() {
}, [
activeModalChipId,
coreValueOptions,
handleCustomize,
handleDuplicateCoreChip,
handleRemoveFromKebab,
modalEditUnlocked,
modalKebabMenu,
modalSession,
]);
@@ -675,41 +524,22 @@ export function CoreValuesSelectScreen() {
onClose={handleModalDismiss}
backdropVariant="blurredYellow"
headerContent={
modalEditUnlocked && customizeHeaderDraft ? (
<MethodCardCustomizeModalHeader
titleLabel={detailModal.customizeValueNameLabel}
descriptionLabel=""
titleValue={customizeHeaderDraft.title}
descriptionValue=""
onTitleChange={(title) =>
setCustomizeHeaderDraft((prev) =>
prev ? { ...prev, title } : null,
)
}
onDescriptionChange={() => {}}
showDescription={false}
<div className="bg-[var(--color-surface-default-primary)] px-[24px] py-[12px] shrink-0">
<ContentLockup
title={modalChipLabel}
description={detailModal.subtitle}
variant="modal"
alignment="left"
/>
) : (
<div className="bg-[var(--color-surface-default-primary)] px-[24px] py-[12px] shrink-0">
<ContentLockup
title={modalChipLabel}
description={detailModal.subtitle}
variant="modal"
alignment="left"
/>
</div>
)
</div>
}
showBackButton={modalEditUnlocked}
onBack={handleCancelCustomize}
backButtonText={modalKebabMenu.cancelCustomize}
showBackButton={false}
showNextButton={showFooterPrimary}
nextButtonDisabled={
modalEditUnlocked && coreCustomizeSaveDisabled
}
onNext={handleModalConfirm}
nextButtonText={
modalEditUnlocked ? modalKebabMenu.saveEdits : detailModal.addValueButton
modalSession === "editing"
? modalKebabMenu.saveEdits
: detailModal.addValueButton
}
kebabTriggerAriaLabel={modalKebabMenu.triggerAriaLabel}
kebabMenuAriaLabel={modalKebabMenu.menuAriaLabel}
@@ -719,7 +549,6 @@ export function CoreValuesSelectScreen() {
ariaLabel={modalChipLabel || "Core value details"}
>
<CoreValueEditFields
readOnly={modalFieldsLocked}
value={draft}
onChange={handleDraftChange}
/>
app/components/modals/ModalFooter/ModalFooter.types.ts
+4
View File
@@ -23,3 +23,7 @@ export interface ModalFooterProps {
footerContent?: React.ReactNode;
className?: string;
}
/** Left footer slot for confirm-dialog cancel; matches Back (`left` / `top` 16 / 12). */
export const MODAL_FOOTER_START_SLOT_CLASS =
"absolute left-[16px] top-[12px] flex min-h-[40px] items-center";
app/components/modals/ModalFooter/index.tsx
+1
View File
@@ -1,2 +1,3 @@
export { default } from "./ModalFooter.container";
export type { ModalFooterProps } from "./ModalFooter.types";
export { MODAL_FOOTER_START_SLOT_CLASS } from "./ModalFooter.types";
app/hooks/useAsyncConfirm.tsx
+11 -8
View File
@@ -3,6 +3,7 @@
import { useCallback, useRef, useState } from "react";
import Button from "../components/buttons/Button";
import Create from "../components/modals/Create";
import { MODAL_FOOTER_START_SLOT_CLASS } from "../components/modals/ModalFooter";
import type { CreateModalBackdropVariant } from "../components/modals/Create/CreateModalFrame.view";
export type AsyncConfirmOptions = {
@@ -58,14 +59,16 @@ export function useAsyncConfirm() {
nextButtonText={options.proceedText}
onNext={() => close(true)}
footerContent={
<Button
buttonType="ghost"
palette="default"
size="xsmall"
onClick={() => close(false)}
>
{options.cancelText}
</Button>
<div className={MODAL_FOOTER_START_SLOT_CLASS}>
<Button
buttonType="ghost"
palette="default"
size="xsmall"
onClick={() => close(false)}
>
{options.cancelText}
</Button>
</div>
}
backdropVariant={options.backdropVariant ?? "blurredYellow"}
ariaLabel={options.ariaLabel ?? options.title}