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

277
src/widgets/space-focus-hud/ui/EndSessionConfirmModal.tsx
View File

@@ -1,24 +1,132 @@
'use client';
import { type FormEvent, useEffect, useRef, useState } from 'react';
import { copy } from '@/shared/i18n';
import { cn } from '@/shared/lib/cn';
import { HUD_FIELD } from './overlayStyles';
type EndSessionStage = 'decision' | 'finished' | 'unfinished' | 'next';
interface EndSessionConfirmModalProps {
open: boolean;
goal: string;
isPending?: boolean;
currentGoal: string;
onClose: () => void;
onConfirm: () => void | Promise<void>;
onAdvanceGoal: (nextGoal: string) => Promise<boolean> | boolean;
onFinishHere: () => Promise<boolean> | boolean;
onEndSession: () => Promise<boolean> | boolean;
}
export const EndSessionConfirmModal = ({
open,
goal,
isPending = false,
currentGoal,
onClose,
onConfirm,
onAdvanceGoal,
onFinishHere,
onEndSession,
}: EndSessionConfirmModalProps) => {
const trimmedGoal = goal.trim();
const inputRef = useRef<HTMLInputElement | null>(null);
const [stage, setStage] = useState<EndSessionStage>('decision');
const [draft, setDraft] = useState('');
const [submissionMode, setSubmissionMode] = useState<'next' | 'finish' | 'end' | null>(null);
const trimmedGoal = currentGoal.trim();
const trimmedDraft = draft.trim();
const isSubmitting = submissionMode !== null;
const canConfirmNext = trimmedDraft.length > 0;
useEffect(() => {
if (!open) {
setStage('decision');
setDraft('');
setSubmissionMode(null);
return;
}
if (stage !== 'next') {
return;
}
const rafId = window.requestAnimationFrame(() => {
inputRef.current?.focus();
});
return () => {
window.cancelAnimationFrame(rafId);
};
}, [open, stage]);
const handleFinishHere = async () => {
if (isSubmitting) {
return;
}
setSubmissionMode('finish');
try {
const didFinish = await onFinishHere();
if (didFinish) {
onClose();
}
} finally {
setSubmissionMode(null);
}
};
const handleEndSession = async () => {
if (isSubmitting) {
return;
}
setSubmissionMode('end');
try {
const didEnd = await onEndSession();
if (didEnd) {
onClose();
}
} finally {
setSubmissionMode(null);
}
};
const handleAdvanceGoal = async (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (!canConfirmNext || isSubmitting) {
return;
}
setSubmissionMode('next');
try {
const didAdvance = await onAdvanceGoal(trimmedDraft);
if (didAdvance) {
onClose();
}
} finally {
setSubmissionMode(null);
}
};
const title =
stage === 'finished'
? copy.space.endSession.finishedTitle
: stage === 'unfinished'
? copy.space.endSession.unfinishedTitle
: stage === 'next'
? copy.space.goalComplete.nextTitle
: copy.space.endSession.title;
const description =
stage === 'finished'
? copy.space.endSession.finishedDescription
: stage === 'unfinished'
? copy.space.endSession.unfinishedDescription
: stage === 'next'
? copy.space.goalComplete.nextDescription
: copy.space.endSession.description;
return (
<div
@@ -37,7 +145,7 @@ export const EndSessionConfirmModal = ({
<section
className={cn(
'relative w-full max-w-[34rem] overflow-hidden rounded-[30px] border border-white/12 bg-[linear-gradient(180deg,rgba(18,22,30,0.95)_0%,rgba(8,11,17,0.93)_100%)] text-white shadow-[0_28px_90px_rgba(2,6,23,0.52)] transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',
'relative w-full max-w-[38rem] overflow-hidden rounded-[30px] border border-white/12 bg-[linear-gradient(180deg,rgba(18,22,30,0.95)_0%,rgba(8,11,17,0.93)_100%)] text-white shadow-[0_28px_90px_rgba(2,6,23,0.52)] transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',
open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-4 scale-[0.975]',
)}
role="dialog"
@@ -50,6 +158,15 @@ export const EndSessionConfirmModal = ({
/>
<div className="relative px-7 py-7 md:px-9 md:py-8">
<header className="text-center">
<button
type="button"
onClick={onClose}
disabled={isSubmitting}
className="absolute right-0 top-0 inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/[0.04] text-[12px] text-white/64 transition-all hover:border-white/16 hover:bg-white/[0.08] hover:text-white disabled:cursor-not-allowed disabled:opacity-30"
aria-label={copy.modal.closeAriaLabel}
>
✕
</button>
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.06] shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
<span className="text-[20px] text-white/88">✦</span>
</div>
@@ -60,10 +177,10 @@ export const EndSessionConfirmModal = ({
id="end-session-confirm-title"
className="mx-auto mt-2 max-w-[24rem] text-[1.65rem] font-light leading-[1.16] tracking-[-0.03em] text-white/96 md:text-[1.9rem]"
>
{copy.space.endSession.title}
{title}
</h3>
<p className="mx-auto mt-3 max-w-[26rem] text-[14px] leading-[1.7] text-white/56">
{copy.space.endSession.description}
<p className="mx-auto mt-3 max-w-[28rem] text-[14px] leading-[1.7] text-white/56">
{description}
</p>
</header>
@@ -78,24 +195,126 @@ export const EndSessionConfirmModal = ({
</div>
) : null}
<footer className="mt-6 grid grid-cols-2 gap-3">
<button
type="button"
onClick={onClose}
disabled={isPending}
className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white/72 transition-all duration-200 hover:border-white/16 hover:bg-white/[0.07] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
>
{copy.space.endSession.cancelButton}
</button>
<button
type="button"
onClick={() => void onConfirm()}
disabled={isPending}
className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/14 bg-white/[0.12] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white transition-all duration-200 hover:border-white/22 hover:bg-white/[0.17] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
>
{isPending ? copy.space.endSession.confirmPending : copy.space.endSession.confirmButton}
</button>
</footer>
{stage === 'decision' ? (
<footer className="mt-6 grid grid-cols-2 gap-3">
<button
type="button"
onClick={() => setStage('finished')}
disabled={isSubmitting}
className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/14 bg-white/[0.12] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white transition-all duration-200 hover:border-white/22 hover:bg-white/[0.17] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
>
{copy.space.endSession.finishedAnswer}
</button>
<button
type="button"
onClick={() => setStage('unfinished')}
disabled={isSubmitting}
className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white/72 transition-all duration-200 hover:border-white/16 hover:bg-white/[0.07] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
>
{copy.space.endSession.unfinishedAnswer}
</button>
</footer>
) : null}
{stage === 'finished' ? (
<footer className="mt-6 grid grid-cols-3 gap-3">
<button
type="button"
onClick={() => setStage('decision')}
disabled={isSubmitting}
className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white/72 transition-all duration-200 hover:border-white/16 hover:bg-white/[0.07] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
>
{copy.space.endSession.backButton}
</button>
<button
type="button"
onClick={() => setStage('next')}
disabled={isSubmitting}
className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white/72 transition-all duration-200 hover:border-white/16 hover:bg-white/[0.07] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
>
{copy.space.endSession.nextBlockButton}
</button>
<button
type="button"
onClick={handleFinishHere}
disabled={isSubmitting}
className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/14 bg-white/[0.12] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white transition-all duration-200 hover:border-white/22 hover:bg-white/[0.17] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
>
{submissionMode === 'finish'
? copy.space.goalComplete.finishPending
: copy.space.endSession.finishHereButton}
</button>
</footer>
) : null}
{stage === 'unfinished' ? (
<footer className="mt-6 grid grid-cols-2 gap-3">
<button
type="button"
onClick={() => setStage('decision')}
disabled={isSubmitting}
className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white/72 transition-all duration-200 hover:border-white/16 hover:bg-white/[0.07] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
>
{copy.space.endSession.backButton}
</button>
<button
type="button"
onClick={handleEndSession}
disabled={isSubmitting}
className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/14 bg-white/[0.12] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white transition-all duration-200 hover:border-white/22 hover:bg-white/[0.17] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
>
{submissionMode === 'end'
? copy.space.endSession.confirmPending
: copy.space.endSession.endHereButton}
</button>
</footer>
) : null}
{stage === 'next' ? (
<form className="mt-6 space-y-4" onSubmit={handleAdvanceGoal}>
<div className="text-left">
<label
htmlFor="end-session-next-goal"
className="text-[11px] font-medium tracking-[0.12em] text-white/36"
>
{copy.space.endSession.nextGoalLabel}
</label>
<input
ref={inputRef}
id="end-session-next-goal"
value={draft}
onChange={(event) => setDraft(event.target.value)}
placeholder={copy.space.endSession.nextGoalPlaceholder}
className={cn(HUD_FIELD, 'mt-2 h-[3.25rem] rounded-[20px] bg-white/[0.05]')}
/>
</div>
<footer className="grid grid-cols-2 gap-3 pt-2">
<button
type="button"
onClick={() => {
if (isSubmitting) {
return;
}
setStage('finished');
}}
disabled={isSubmitting}
className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white/72 transition-all duration-200 hover:border-white/16 hover:bg-white/[0.07] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
>
{copy.space.endSession.backButton}
</button>
<button
type="submit"
disabled={!canConfirmNext || isSubmitting}
className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/14 bg-white/[0.12] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white transition-all duration-200 hover:border-white/22 hover:bg-white/[0.17] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
>
{submissionMode === 'next'
? copy.space.goalComplete.confirmPending
: copy.space.endSession.nextGoalConfirmButton}
</button>
</footer>
</form>
) : null}
</div>
</section>
</div>

282
src/widgets/space-focus-hud/ui/GoalCompleteSheet.tsx
View File

@@ -1,118 +1,46 @@
'use client';
import type { FormEvent } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { useMemo, useState } from 'react';
import { copy } from '@/shared/i18n';
import { cn } from '@/shared/lib/cn';
import { HUD_FIELD } from './overlayStyles';
interface GoalCompleteSheetProps {
open: boolean;
currentGoal: string;
preferredView?: 'choice' | 'next';
mode?: 'manual' | 'timer-complete';
onConfirm: (nextGoal: string) => Promise<boolean> | boolean;
onFinish: () => Promise<boolean> | boolean;
onExtendTenMinutes?: () => Promise<boolean> | boolean;
onRest: () => void;
onClose: () => void;
}
export const GoalCompleteSheet = ({
open,
currentGoal,
preferredView = 'choice',
mode = 'manual',
onConfirm,
onFinish,
onExtendTenMinutes,
onRest,
onClose,
}: GoalCompleteSheetProps) => {
const inputRef = useRef<HTMLInputElement | null>(null);
const [draft, setDraft] = useState('');
const [submissionMode, setSubmissionMode] = useState<'next' | 'finish' | 'extend' | null>(null);
const [view, setView] = useState<'choice' | 'next'>('choice');
const isTimerCompleteMode = mode === 'timer-complete';
const [submissionMode, setSubmissionMode] = useState<'finish' | 'extend' | null>(null);
useEffect(() => {
if (!open) {
const timeoutId = window.setTimeout(() => {
setDraft('');
setView(preferredView);
}, 0);
return () => {
window.clearTimeout(timeoutId);
};
}
if (isTimerCompleteMode || view !== 'next') {
return;
}
const rafId = window.requestAnimationFrame(() => {
inputRef.current?.focus();
});
return () => {
window.cancelAnimationFrame(rafId);
};
}, [isTimerCompleteMode, open, preferredView, view]);
useEffect(() => {
if (!open) {
return;
}
setView(preferredView);
}, [open, preferredView]);
const placeholder = useMemo(() => {
const trimmed = currentGoal.trim();
if (!trimmed) {
return copy.space.goalComplete.placeholderFallback;
}
return copy.space.goalComplete.placeholderExample(trimmed);
}, [currentGoal]);
const canConfirm = draft.trim().length > 0;
const isSubmitting = submissionMode !== null;
const trimmedCurrentGoal = currentGoal.trim();
const title =
isTimerCompleteMode
? copy.space.goalComplete.timerTitle
: view === 'next'
? copy.space.goalComplete.nextTitle
: copy.space.goalComplete.title;
const description =
isTimerCompleteMode
? copy.space.goalComplete.timerDescription
: view === 'next'
? copy.space.goalComplete.nextDescription
: copy.space.goalComplete.description;
const isSubmitting = submissionMode !== null;
const canExtend = Boolean(onExtendTenMinutes);
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (!canConfirm || isSubmitting) {
return;
const goalCard = useMemo(() => {
if (!trimmedCurrentGoal) {
return null;
}
setSubmissionMode('next');
try {
const didAdvance = await onConfirm(draft.trim());
if (didAdvance) {
onClose();
}
} finally {
setSubmissionMode(null);
}
};
return (
<div className="rounded-[24px] border border-white/8 bg-black/14 px-4 py-4 text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
<p className="text-[10px] font-medium uppercase tracking-[0.22em] text-white/34">
{copy.space.goalComplete.currentGoalLabel}
</p>
<p className="mt-2 text-[15px] font-medium leading-[1.45] tracking-[-0.01em] text-white/88">
{trimmedCurrentGoal}
</p>
</div>
);
}, [trimmedCurrentGoal]);
const handleFinish = async () => {
if (isSubmitting) {
@@ -150,32 +78,6 @@ export const GoalCompleteSheet = ({
}
};
const baseButtonClass =
'inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40';
const secondaryButtonClass =
'border-white/10 bg-white/[0.04] text-white/72 hover:border-white/16 hover:bg-white/[0.07] hover:text-white';
const primaryButtonClass =
'border-white/14 bg-white/[0.12] text-white hover:border-white/22 hover:bg-white/[0.17]';
const breakButtonClass =
'border-emerald-200/14 bg-[rgba(16,38,31,0.44)] text-emerald-50 hover:border-emerald-200/20 hover:bg-[rgba(16,38,31,0.58)]';
const renderGoalCard = () => {
if (!trimmedCurrentGoal) {
return null;
}
return (
<div className="rounded-[24px] border border-white/8 bg-black/14 px-4 py-4 text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
<p className="text-[10px] font-medium uppercase tracking-[0.22em] text-white/34">
{copy.space.goalComplete.currentGoalLabel}
</p>
<p className="mt-2 text-[15px] font-medium leading-[1.45] tracking-[-0.01em] text-white/88">
{trimmedCurrentGoal}
</p>
</div>
);
};
return (
<div
className={cn(
@@ -194,8 +96,7 @@ export const GoalCompleteSheet = ({
<section
className={cn(
'relative w-full max-w-[42rem] overflow-hidden rounded-[30px] border border-white/12 bg-[linear-gradient(180deg,rgba(18,22,30,0.94)_0%,rgba(9,12,18,0.92)_100%)] text-white shadow-[0_28px_90px_rgba(2,6,23,0.48)] transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',
open ? 'pointer-events-auto' : 'pointer-events-none',
open ? 'translate-y-0 scale-100' : 'translate-y-4 scale-[0.975]',
open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-4 scale-[0.975]',
)}
role="dialog"
aria-modal="true"
@@ -211,134 +112,49 @@ export const GoalCompleteSheet = ({
/>
<div className="relative px-7 py-7 md:px-9 md:py-8">
<header className="relative text-center">
{isTimerCompleteMode ? null : (
<button
type="button"
onClick={onClose}
disabled={isSubmitting}
className="absolute right-0 top-0 inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/[0.04] text-[12px] text-white/64 transition-all hover:border-white/16 hover:bg-white/[0.08] hover:text-white disabled:cursor-not-allowed disabled:opacity-30"
aria-label={copy.space.goalComplete.closeAriaLabel}
>
✕
</button>
)}
<header className="text-center">
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.06] shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
<span className="text-[20px] text-white/88">{isTimerCompleteMode ? '⌛' : '✦'}</span>
<span className="text-[20px] text-white/88">⌛</span>
</div>
<p className="mt-5 text-[11px] font-medium tracking-[0.14em] text-white/34">GOAL COMPLETE</p>
<p className="mt-5 text-[11px] font-medium tracking-[0.14em] text-white/34">
{copy.space.completionResult.eyebrow}
</p>
<h3
id="goal-complete-title"
className="mx-auto mt-2 max-w-[28rem] text-[1.65rem] font-light leading-[1.16] tracking-[-0.03em] text-white/96 md:text-[1.9rem]"
>
{title}
{copy.space.goalComplete.timerTitle}
</h3>
<p className="mx-auto mt-3 max-w-[28rem] text-[14px] leading-[1.7] text-white/56">
{description}
{copy.space.goalComplete.timerDescription}
</p>
</header>
<div className="mt-6 space-y-4">
{renderGoalCard()}
{goalCard}
{isTimerCompleteMode ? (
<footer className="grid grid-cols-2 gap-3 pt-2">
<button
type="button"
onClick={handleExtend}
disabled={isSubmitting}
className={cn(baseButtonClass, secondaryButtonClass)}
>
{submissionMode === 'extend'
? copy.space.goalComplete.extendPending
: copy.space.goalComplete.extendButton}
</button>
<button
type="button"
onClick={handleFinish}
disabled={isSubmitting}
className={cn(baseButtonClass, primaryButtonClass)}
>
{submissionMode === 'finish'
? copy.space.goalComplete.timerFinishPending
: copy.space.goalComplete.timerFinishButton}
</button>
</footer>
) : view === 'choice' ? (
<footer className="grid grid-cols-3 gap-3 pt-2">
<button
type="button"
onClick={onRest}
disabled={isSubmitting}
className={cn(baseButtonClass, breakButtonClass)}
>
{copy.space.goalComplete.restButton}
</button>
<button
type="button"
onClick={handleFinish}
disabled={isSubmitting}
className={cn(baseButtonClass, secondaryButtonClass)}
>
{submissionMode === 'finish'
? copy.space.goalComplete.finishPending
: copy.space.goalComplete.finishButton}
</button>
<button
type="button"
onClick={() => setView('next')}
disabled={isSubmitting}
className={cn(baseButtonClass, primaryButtonClass)}
>
{copy.space.goalComplete.chooseNextButton}
</button>
</footer>
) : (
<form className="space-y-4" onSubmit={handleSubmit}>
<div className="text-left">
<label
htmlFor="goal-complete-next-goal"
className="text-[11px] font-medium tracking-[0.12em] text-white/36"
>
{copy.space.goalComplete.nextGoalLabel}
</label>
<input
ref={inputRef}
id="goal-complete-next-goal"
value={draft}
onChange={(event) => setDraft(event.target.value)}
placeholder={placeholder}
className={cn(HUD_FIELD, 'mt-2 h-[3.25rem] rounded-[20px] bg-white/[0.05]')}
/>
</div>
<footer className="grid grid-cols-2 gap-3 pt-2">
<button
type="button"
onClick={() => {
if (isSubmitting) {
return;
}
setView('choice');
}}
disabled={isSubmitting}
className={cn(baseButtonClass, secondaryButtonClass)}
>
{copy.space.goalComplete.backButton}
</button>
<button
type="submit"
disabled={!canConfirm || isSubmitting}
className={cn(baseButtonClass, primaryButtonClass)}
>
{submissionMode === 'next'
? copy.space.goalComplete.confirmPending
: copy.space.goalComplete.confirmButton}
</button>
</footer>
</form>
)}
<footer className="grid grid-cols-2 gap-3 pt-2">
<button
type="button"
onClick={handleExtend}
disabled={isSubmitting || !canExtend}
className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white/72 transition-all duration-200 hover:border-white/16 hover:bg-white/[0.07] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
>
{submissionMode === 'extend'
? copy.space.goalComplete.extendPending
: copy.space.goalComplete.extendButton}
</button>
<button
type="button"
onClick={handleFinish}
disabled={isSubmitting}
className="inline-flex min-h-[3.5rem] items-center justify-center rounded-[18px] border border-white/14 bg-white/[0.12] px-4 py-3 text-center text-[13px] font-medium tracking-[0.01em] text-white transition-all duration-200 hover:border-white/22 hover:bg-white/[0.17] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/12 disabled:cursor-not-allowed disabled:opacity-40"
>
{submissionMode === 'finish'
? copy.space.goalComplete.timerFinishPending
: copy.space.goalComplete.timerFinishButton}
</button>
</footer>
</div>
</div>
</section>

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())}
/>
</>
);