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

feat(space): explicit end session close flow 적용

Browse Source
This commit is contained in:
corpi
2026-03-17 12:45:38 +09:00
parent 1d2ce85cfd
commit 4bbee36e1e
9 changed files with 272 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/widgets/space-focus-hud/ui/EndSessionConfirmModal.tsx Normal file
View File

@@ -0,0 +1,103 @@
'use client';
import { copy } from '@/shared/i18n';
import { cn } from '@/shared/lib/cn';
interface EndSessionConfirmModalProps {
open: boolean;
goal: string;
isPending?: boolean;
onClose: () => void;
onConfirm: () => void | Promise<void>;
}
export const EndSessionConfirmModal = ({
open,
goal,
isPending = false,
onClose,
onConfirm,
}: EndSessionConfirmModalProps) => {
const trimmedGoal = goal.trim();
return (
<div
className={cn(
'pointer-events-none fixed inset-0 z-[65] flex items-center justify-center px-4 transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',
open ? 'opacity-100' : 'opacity-0',
)}
aria-hidden={!open}
>
<div
className={cn(
'absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(5,7,11,0.2)_0%,rgba(2,6,23,0.58)_48%,rgba(2,6,23,0.78)_100%)] backdrop-blur-[10px] transition-opacity duration-300',
open ? 'opacity-100' : 'opacity-0',
)}
/>
<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)]',
open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-4 scale-[0.975]',
)}
role="dialog"
aria-modal="true"
aria-labelledby="end-session-confirm-title"
>
<div
aria-hidden
className="pointer-events-none absolute inset-0 bg-[radial-gradient(110%_90%_at_50%_0%,rgba(255,255,255,0.12)_0%,rgba(255,255,255,0.02)_42%,rgba(255,255,255,0)_100%)]"
/>
<div className="relative px-7 py-7 md:px-9 md:py-8">
<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">✦</span>
</div>
<p className="mt-5 text-[11px] font-medium tracking-[0.14em] text-white/34">
{copy.space.endSession.eyebrow}
</p>
<h3
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}
</h3>
<p className="mx-auto mt-3 max-w-[26rem] text-[14px] leading-[1.7] text-white/56">
{copy.space.endSession.description}
</p>
</header>
{trimmedGoal ? (
<div className="mt-6 rounded-[24px] border border-white/8 bg-black/14 px-5 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.endSession.goalLabel}
</p>
<p className="mt-2 text-[15px] font-medium leading-[1.45] tracking-[-0.01em] text-white/88">
{trimmedGoal}
</p>
</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>
</div>
</section>
</div>
);
};

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

@@ -1,11 +1,11 @@
import { useEffect, useRef, useState } from 'react';
import { copy } from '@/shared/i18n';
import { cn } from '@/shared/lib/cn';
import type { HudStatusLinePayload } from '@/shared/lib/useHudStatusLine';
import { ExitHoldButton } from '@/features/exit-hold';
import { GoalCompleteSheet } from './GoalCompleteSheet';
import { InlineMicrostep } from './InlineMicrostep';
import { ThoughtOrb } from './ThoughtOrb';
import { copy } from "@/shared/i18n";
import { cn } from "@/shared/lib/cn";
import type { HudStatusLinePayload } from "@/shared/lib/useHudStatusLine";
import { useEffect, useRef, useState } from "react";
import { EndSessionConfirmModal } from "./EndSessionConfirmModal";
import { GoalCompleteSheet } from "./GoalCompleteSheet";
import { InlineMicrostep } from "./InlineMicrostep";
import { ThoughtOrb } from "./ThoughtOrb";
interface SpaceFocusHudWidgetProps {
sessionId?: string | null;
@@ -15,16 +15,19 @@ interface SpaceFocusHudWidgetProps {
phaseStartedAt?: string | null;
timeDisplay?: string;
hasActiveSession?: boolean;
playbackState?: 'running' | 'paused';
sessionPhase?: 'focus' | 'break' | null;
onIntentUpdate: (payload: { goal?: string; microStep?: string | null }) => boolean | Promise<boolean>;
playbackState?: "running" | "paused";
sessionPhase?: "focus" | "break" | null;
onIntentUpdate: (payload: {
goal?: string;
microStep?: string | null;
}) => boolean | Promise<boolean>;
onGoalUpdate: (nextGoal: string) => boolean | Promise<boolean>;
onGoalFinish: () => boolean | Promise<boolean>;
onTimerFinish: () => boolean | Promise<boolean>;
onAddTenMinutes: () => boolean | Promise<boolean>;
onStatusMessage: (payload: HudStatusLinePayload) => void;
onCaptureThought: (note: string) => void;
onExitRequested: () => void;
onExitRequested: () => boolean | Promise<boolean>;
}
export const SpaceFocusHudWidget = ({
@@ -35,8 +38,8 @@ export const SpaceFocusHudWidget = ({
phaseStartedAt = null,
timeDisplay,
hasActiveSession = false,
playbackState = 'paused',
sessionPhase = 'focus',
playbackState = "paused",
sessionPhase = "focus",
onIntentUpdate,
onGoalUpdate,
onGoalFinish,
@@ -46,33 +49,42 @@ 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" | "complete" | "timer-complete"
>("none");
const [completePreferredView, setCompletePreferredView] = useState<
"choice" | "next"
>("choice");
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 normalizedGoal =
goal.trim().length > 0 ? goal.trim() : copy.space.focusHud.goalFallback;
const isCompleteOpen = overlay === "complete" || overlay === "timer-complete";
const timerCompletionSignature =
hasActiveSession &&
sessionPhase === 'focus' &&
sessionPhase === "focus" &&
remainingSeconds === 0 &&
phaseStartedAt
? `${sessionId ?? 'session'}:${phaseStartedAt}`
? `${sessionId ?? "session"}:${phaseStartedAt}`
: null;
useEffect(() => {
if (!hasActiveSession) {
setOverlay('none');
setOverlay("none");
setSavingIntent(false);
setCompletePreferredView('choice');
setCompletePreferredView("choice");
setEndSessionConfirmOpen(false);
setEndingSession(false);
timerPromptSignatureRef.current = null;
}
}, [hasActiveSession]);
useEffect(() => {
if (!visibleRef.current && playbackState === 'running') {
if (!visibleRef.current && playbackState === "running") {
onStatusMessage({
message: copy.space.focusHud.goalToast(normalizedGoal),
});
@@ -91,17 +103,12 @@ export const SpaceFocusHudWidget = ({
}
timerPromptSignatureRef.current = timerCompletionSignature;
setOverlay('timer-complete');
setOverlay("timer-complete");
}, [timerCompletionSignature]);
const handleOpenCompleteSheet = (preferredView: 'choice' | 'next' = 'choice') => {
setCompletePreferredView(preferredView);
setOverlay('complete');
};
const handleInlineMicrostepUpdate = async (nextStep: string | null) => {
if (isSavingIntent) return false;
setSavingIntent(true);
try {
const didUpdate = await onIntentUpdate({ microStep: nextStep });
@@ -118,22 +125,50 @@ 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 isFocusMode={hasActiveSession} onCaptureThought={onCaptureThought} />
<ThoughtOrb
isFocusMode={hasActiveSession}
onCaptureThought={onCaptureThought}
/>
<div className="pointer-events-none fixed inset-0 z-20 flex flex-col items-center justify-center pt-10 pb-32">
{/* The Monolith (Central Hub) */}
<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 ? "opacity-0 scale-95 blur-md" : "opacity-100 scale-100 blur-0"
)}>
<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
? "opacity-0 scale-95 blur-md"
: "opacity-100 scale-100 blur-0",
)}
>
{/* Massive Unstoppable Timer */}
<div className="relative group cursor-default">
<p className={cn(
"text-[8rem] md:text-[14rem] font-light tracking-tighter leading-none transition-colors duration-500",
sessionPhase === 'break' ? "text-emerald-300 drop-shadow-[0_0_40px_rgba(16,185,129,0.3)]" : "text-white drop-shadow-[0_0_40px_rgba(255,255,255,0.15)]"
)}>
<p
className={cn(
"text-[8rem] md:text-[14rem] font-light tracking-tighter leading-none transition-colors duration-500",
sessionPhase === "break"
? "text-emerald-300 drop-shadow-[0_0_40px_rgba(16,185,129,0.3)]"
: "text-white drop-shadow-[0_0_40px_rgba(255,255,255,0.15)]",
)}
>
{timeDisplay}
</p>
</div>
@@ -144,64 +179,66 @@ export const SpaceFocusHudWidget = ({
<h2 className="text-2xl md:text-4xl font-light tracking-tight text-white/95">
{normalizedGoal}
</h2>
{/* Kinetic Inline Microstep */}
<div className="mt-8 flex flex-col items-center w-full max-w-lg min-h-[4rem]">
<InlineMicrostep
microStep={microStep ?? null}
isBusy={isSavingIntent}
onUpdate={handleInlineMicrostepUpdate}
<InlineMicrostep
microStep={microStep ?? null}
isBusy={isSavingIntent}
onUpdate={handleInlineMicrostepUpdate}
/>
</div>
{hasActiveSession && (sessionPhase === 'focus' || sessionPhase === 'break') && (
<button
type="button"
onClick={() => handleOpenCompleteSheet('choice')}
className="mt-8 text-[11px] font-bold uppercase tracking-[0.25em] text-white/30 transition hover:text-white/70"
>
End Session
</button>
)}
{hasActiveSession &&
(sessionPhase === "focus" || sessionPhase === "break") && (
<button
type="button"
onClick={() => setEndSessionConfirmOpen(true)}
className="mt-8 text-[11px] font-bold uppercase tracking-[0.25em] text-white/30 transition hover:text-white/70"
>
{copy.space.endSession.trigger}
</button>
)}
</div>
</div>
</div>
<div className="pointer-events-none fixed inset-0 z-30">
<GoalCompleteSheet
open={isCompleteOpen}
currentGoal={goal}
mode={overlay === 'timer-complete' ? 'timer-complete' : 'manual'}
mode={overlay === "timer-complete" ? "timer-complete" : "manual"}
preferredView={completePreferredView}
onClose={() => setOverlay('none')}
onClose={() => setOverlay("none")}
onFinish={() =>
overlay === 'timer-complete'
overlay === "timer-complete"
? Promise.resolve(onTimerFinish())
: Promise.resolve(onGoalFinish())
}
onExtendTenMinutes={() => Promise.resolve(onAddTenMinutes())}
onRest={() => {
setOverlay('none');
setOverlay("none");
// The timer doesn't pause, they just rest within the flow.
}}
onConfirm={(nextGoal) => {
return overlay === 'timer-complete'
return overlay === "timer-complete"
? Promise.resolve(false)
: Promise.resolve(onGoalUpdate(nextGoal));
}}
/>
</div>
<EndSessionConfirmModal
open={isEndSessionConfirmOpen}
goal={goal}
isPending={isEndingSession}
onClose={() => {
if (isEndingSession) {
return;
}
{/* Emergency Tether (Exit) */}
<div className="fixed bottom-8 inset-x-0 z-40 flex justify-center pointer-events-none">
<div className="pointer-events-auto opacity-10 hover:opacity-100 transition-opacity duration-500">
<ExitHoldButton
variant="bar"
onConfirm={onExitRequested}
className="bg-black/20 text-white/70 hover:bg-black/40 hover:text-white border border-white/5 backdrop-blur-md px-6 py-2 rounded-full"
/>
</div>
</div>
setEndSessionConfirmOpen(false);
}}
onConfirm={handleEndSessionConfirm}
/>
</>
);
};