corpi/viberoom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(space): unify end session flow and en-first copy

Browse Source
This commit is contained in:
corpi
2026-03-17 14:04:13 +09:00
parent 5026138ad9
commit 2afbe3ce7a
10 changed files with 609 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/widgets/space-focus-hud/ui/SpaceFocusHudWidget.tsx
View File

@@ -49,21 +49,14 @@ export const SpaceFocusHudWidget = ({
onCaptureThought,
onExitRequested,
}: SpaceFocusHudWidgetProps) => {
const [overlay, setOverlay] = useState<
"none" | "complete" | "timer-complete"
>("none");
const [completePreferredView, setCompletePreferredView] = useState<
"choice" | "next"
>("choice");
const [overlay, setOverlay] = useState<"none" | "end-session" | "timer-complete">("none");
const [isSavingIntent, setSavingIntent] = useState(false);
const [isEndSessionConfirmOpen, setEndSessionConfirmOpen] = useState(false);
const [isEndingSession, setEndingSession] = useState(false);
const visibleRef = useRef(false);
const timerPromptSignatureRef = useRef<string | null>(null);
const normalizedGoal =
goal.trim().length > 0 ? goal.trim() : copy.space.focusHud.goalFallback;
const isCompleteOpen = overlay === "complete" || overlay === "timer-complete";
const isTimerCompleteOpen = overlay === "timer-complete";
const timerCompletionSignature =
hasActiveSession &&
sessionPhase === "focus" &&
@@ -76,9 +69,6 @@ export const SpaceFocusHudWidget = ({
if (!hasActiveSession) {
setOverlay("none");
setSavingIntent(false);
setCompletePreferredView("choice");
setEndSessionConfirmOpen(false);
setEndingSession(false);
timerPromptSignatureRef.current = null;
}
}, [hasActiveSession]);
@@ -93,6 +83,14 @@ export const SpaceFocusHudWidget = ({
visibleRef.current = true;
}, [normalizedGoal, onStatusMessage, playbackState]);
useEffect(() => {
if (overlay !== "timer-complete" || timerCompletionSignature) {
return;
}
setOverlay("none");
}, [overlay, timerCompletionSignature]);
useEffect(() => {
if (!timerCompletionSignature) {
return;
@@ -103,16 +101,9 @@ export const SpaceFocusHudWidget = ({
}
timerPromptSignatureRef.current = timerCompletionSignature;
setEndSessionConfirmOpen(false);
setOverlay("timer-complete");
}, [timerCompletionSignature]);
const handleOpenGoalComplete = () => {
setEndSessionConfirmOpen(false);
setCompletePreferredView("choice");
setOverlay("complete");
};
const handleInlineMicrostepUpdate = async (nextStep: string | null) => {
if (isSavingIntent) return false;
@@ -132,24 +123,6 @@ export const SpaceFocusHudWidget = ({
}
};
const handleEndSessionConfirm = async () => {
if (isEndingSession) {
return;
}
setEndingSession(true);
try {
const didEnd = await onExitRequested();
if (didEnd) {
setEndSessionConfirmOpen(false);
}
} finally {
setEndingSession(false);
}
};
return (
<>
<ThoughtOrb
@@ -161,7 +134,7 @@ export const SpaceFocusHudWidget = ({
<div
className={cn(
"pointer-events-auto flex flex-col items-center text-center max-w-4xl px-6 transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]",
isCompleteOpen
overlay !== "none"
? "opacity-0 scale-95 blur-md"
: "opacity-100 scale-100 blur-0",
)}
@@ -201,19 +174,8 @@ export const SpaceFocusHudWidget = ({
<div className="mt-8 flex items-center gap-4">
<button
type="button"
onClick={handleOpenGoalComplete}
onClick={() => setOverlay("end-session")}
className="text-[11px] font-bold uppercase tracking-[0.25em] text-white/34 transition hover:text-white/76"
>
{copy.space.focusHud.completeAction}
</button>
<span aria-hidden className="h-3 w-px bg-white/10" />
<button
type="button"
onClick={() => {
setOverlay("none");
setEndSessionConfirmOpen(true);
}}
className="text-[11px] font-bold uppercase tracking-[0.25em] text-white/30 transition hover:text-white/70"
>
{copy.space.endSession.trigger}
</button>
@@ -224,40 +186,20 @@ export const SpaceFocusHudWidget = ({
</div>
<div className="pointer-events-none fixed inset-0 z-30">
<GoalCompleteSheet
open={isCompleteOpen}
open={isTimerCompleteOpen}
currentGoal={goal}
mode={overlay === "timer-complete" ? "timer-complete" : "manual"}
preferredView={completePreferredView}
onClose={() => setOverlay("none")}
onFinish={() =>
overlay === "timer-complete"
? Promise.resolve(onTimerFinish())
: Promise.resolve(onGoalCompleteFinish())
}
onFinish={() => Promise.resolve(onTimerFinish())}
onExtendTenMinutes={() => Promise.resolve(onAddTenMinutes())}
onRest={() => {
setOverlay("none");
// The timer doesn't pause, they just rest within the flow.
}}
onConfirm={(nextGoal) => {
return overlay === "timer-complete"
? Promise.resolve(false)
: Promise.resolve(onGoalUpdate(nextGoal));
}}
/>
</div>
<EndSessionConfirmModal
open={isEndSessionConfirmOpen}
goal={goal}
isPending={isEndingSession}
onClose={() => {
if (isEndingSession) {
return;
}
setEndSessionConfirmOpen(false);
}}
onConfirm={handleEndSessionConfirm}
open={overlay === "end-session"}
currentGoal={goal}
onClose={() => setOverlay("none")}
onAdvanceGoal={(nextGoal) => Promise.resolve(onGoalUpdate(nextGoal))}
onFinishHere={() => Promise.resolve(onGoalCompleteFinish())}
onEndSession={() => Promise.resolve(onExitRequested())}
/>
</>
);