diff --git a/components/EngagementForm.tsx b/components/EngagementForm.tsx index fe5acfd..364d027 100644 --- a/components/EngagementForm.tsx +++ b/components/EngagementForm.tsx @@ -204,11 +204,12 @@ export function EngagementForm({ config, cid, cs }: EngagementFormProps) { return () => observer.disconnect(); }, [load.kind, config.sections]); - const viewedSectionLabel = useMemo(() => { - if (!viewedSectionId) return null; - const s = config.sections.find((x) => x.id === viewedSectionId); - return s?.label ?? null; - }, [viewedSectionId, config.sections]); + const viewedSection = useMemo( + () => (viewedSectionId ? config.sections.find((x) => x.id === viewedSectionId) ?? null : null), + [viewedSectionId, config.sections], + ); + const viewedSectionLabel = viewedSection?.label ?? null; + const viewedRank = viewedSection?.rank ?? null; // ── Auto-save draft on idle ──────────────────────────────────────────── // Debounce — save 1.5s after the user stops editing. Uses watch's @@ -411,6 +412,7 @@ export function EngagementForm({ config, cid, cs }: EngagementFormProps) { draftSavedAt={draftSavedAt} orgName={load.data.orgName} viewedSectionLabel={viewedSectionLabel} + viewedRank={viewedRank} /> ); @@ -463,15 +465,22 @@ function resolveStageLabel( * Six small dots representing the six stages, with the current rank filled * and earlier ranks marked as visited. Quietly conveys progression without * pretending to be a "100% complete" progress bar. + * + * `pulse` adds a slow halo to the active pill — used in the floating + * submit bar (where the active rank moves as the user scrolls) to draw + * the eye to the changing indicator. Left off in the static header. */ -function StageProgress({ currentRank }: { currentRank: number }) { +function StageProgress({ currentRank, pulse = false }: { currentRank: number; pulse?: boolean }) { return (
{[0, 1, 2, 3, 4, 5].map((r) => ( ); - } else if (viewedSectionLabel) { + } else if (viewedSectionLabel && viewedRank != null) { secondary = ( -

- Viewing:{" "} - {viewedSectionLabel} - {isDirty && draftSavedAt && ( - · saved {formatRelative(draftSavedAt)} - )} -

+
+ +

+ {viewedSectionLabel} + {isDirty && draftSavedAt && ( + · saved {formatRelative(draftSavedAt)} + )} +

+
); } else if (isDirty && draftSavedAt) { secondary = (