feat(space): explicit end session close flow 적용
This commit is contained in:
@@ -1 +0,0 @@
|
||||
export * from './ui/ExitHoldButton';
|
||||
@@ -1,141 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
const HOLD_DURATION_MS = 1000;
|
||||
const BOOST_DURATION_MS = 50;
|
||||
const COMPLETE_HOLD_MS = 160;
|
||||
|
||||
const mapProgress = (elapsedMs: number) => {
|
||||
if (elapsedMs <= 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (elapsedMs <= BOOST_DURATION_MS) {
|
||||
return 0.2 * (elapsedMs / BOOST_DURATION_MS);
|
||||
}
|
||||
|
||||
const tailElapsedMs = Math.min(elapsedMs - BOOST_DURATION_MS, HOLD_DURATION_MS - BOOST_DURATION_MS);
|
||||
return 0.2 + 0.8 * (tailElapsedMs / (HOLD_DURATION_MS - BOOST_DURATION_MS));
|
||||
};
|
||||
|
||||
export const useHoldToConfirm = (onConfirm: () => void) => {
|
||||
const frameRef = useRef<number | null>(null);
|
||||
const confirmTimeoutRef = useRef<number | null>(null);
|
||||
const completeTimeoutRef = useRef<number | null>(null);
|
||||
const startRef = useRef<number | null>(null);
|
||||
const confirmedRef = useRef(false);
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [isHolding, setHolding] = useState(false);
|
||||
const [isCompleted, setCompleted] = useState(false);
|
||||
|
||||
const clearFrame = () => {
|
||||
if (frameRef.current !== null) {
|
||||
window.cancelAnimationFrame(frameRef.current);
|
||||
frameRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const clearTimers = () => {
|
||||
if (confirmTimeoutRef.current !== null) {
|
||||
window.clearTimeout(confirmTimeoutRef.current);
|
||||
confirmTimeoutRef.current = null;
|
||||
}
|
||||
|
||||
if (completeTimeoutRef.current !== null) {
|
||||
window.clearTimeout(completeTimeoutRef.current);
|
||||
completeTimeoutRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const reset = (withCompleted = false) => {
|
||||
clearFrame();
|
||||
clearTimers();
|
||||
startRef.current = null;
|
||||
confirmedRef.current = false;
|
||||
setHolding(false);
|
||||
setCompleted(withCompleted);
|
||||
setProgress(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
clearFrame();
|
||||
clearTimers();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const step = (timestamp: number) => {
|
||||
if (startRef.current === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const elapsedMs = timestamp - startRef.current;
|
||||
const nextProgress = mapProgress(elapsedMs);
|
||||
const clampedProgress = Math.min(nextProgress, 1);
|
||||
setProgress(clampedProgress);
|
||||
|
||||
if (clampedProgress >= 1 && !confirmedRef.current) {
|
||||
confirmedRef.current = true;
|
||||
if (confirmTimeoutRef.current !== null) {
|
||||
window.clearTimeout(confirmTimeoutRef.current);
|
||||
confirmTimeoutRef.current = null;
|
||||
}
|
||||
setHolding(false);
|
||||
setCompleted(true);
|
||||
onConfirm();
|
||||
|
||||
completeTimeoutRef.current = window.setTimeout(() => {
|
||||
reset(false);
|
||||
}, COMPLETE_HOLD_MS);
|
||||
return;
|
||||
}
|
||||
|
||||
frameRef.current = window.requestAnimationFrame(step);
|
||||
};
|
||||
|
||||
const start = () => {
|
||||
if (isHolding || isCompleted) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearTimers();
|
||||
clearFrame();
|
||||
confirmedRef.current = false;
|
||||
setCompleted(false);
|
||||
setProgress(0);
|
||||
setHolding(true);
|
||||
startRef.current = performance.now();
|
||||
frameRef.current = window.requestAnimationFrame(step);
|
||||
confirmTimeoutRef.current = window.setTimeout(() => {
|
||||
if (!confirmedRef.current) {
|
||||
confirmedRef.current = true;
|
||||
confirmTimeoutRef.current = null;
|
||||
setProgress(1);
|
||||
setHolding(false);
|
||||
setCompleted(true);
|
||||
onConfirm();
|
||||
|
||||
completeTimeoutRef.current = window.setTimeout(() => {
|
||||
reset(false);
|
||||
}, COMPLETE_HOLD_MS);
|
||||
}
|
||||
}, HOLD_DURATION_MS);
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
if (!isHolding) {
|
||||
return;
|
||||
}
|
||||
|
||||
reset();
|
||||
};
|
||||
|
||||
return {
|
||||
progress,
|
||||
isHolding,
|
||||
isCompleted,
|
||||
start,
|
||||
cancel,
|
||||
};
|
||||
};
|
||||
@@ -1,125 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import type { KeyboardEvent } from 'react';
|
||||
import { copy } from '@/shared/i18n';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
import { useHoldToConfirm } from '../model/useHoldToConfirm';
|
||||
|
||||
interface ExitHoldButtonProps {
|
||||
variant: 'bar' | 'ring';
|
||||
onConfirm: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const RING_RADIUS = 13;
|
||||
const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
|
||||
|
||||
export const ExitHoldButton = ({
|
||||
variant,
|
||||
onConfirm,
|
||||
className,
|
||||
}: ExitHoldButtonProps) => {
|
||||
const { progress, isHolding, isCompleted, start, cancel } = useHoldToConfirm(onConfirm);
|
||||
const ringOffset = RING_CIRCUMFERENCE * (1 - progress);
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
|
||||
if (event.key === ' ' || event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
start();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyUp = (event: KeyboardEvent<HTMLButtonElement>) => {
|
||||
if (event.key === ' ' || event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
cancel();
|
||||
}
|
||||
};
|
||||
|
||||
if (variant === 'ring') {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={copy.space.exitHold.holdToExitAriaLabel}
|
||||
onMouseDown={start}
|
||||
onMouseUp={cancel}
|
||||
onMouseLeave={cancel}
|
||||
onTouchStart={start}
|
||||
onTouchEnd={cancel}
|
||||
onTouchCancel={cancel}
|
||||
onKeyDown={handleKeyDown}
|
||||
onKeyUp={handleKeyUp}
|
||||
onClick={(event) => event.preventDefault()}
|
||||
className={cn(
|
||||
'relative inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/8 text-white/74 transition hover:bg-white/14 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80',
|
||||
isHolding && 'bg-white/16',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<svg
|
||||
aria-hidden
|
||||
className="-rotate-90 absolute inset-0 h-9 w-9"
|
||||
viewBox="0 0 32 32"
|
||||
>
|
||||
<circle
|
||||
cx="16"
|
||||
cy="16"
|
||||
r={RING_RADIUS}
|
||||
fill="none"
|
||||
stroke="rgba(255,255,255,0.2)"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<circle
|
||||
cx="16"
|
||||
cy="16"
|
||||
r={RING_RADIUS}
|
||||
fill="none"
|
||||
stroke="rgba(186,230,253,0.92)"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={RING_CIRCUMFERENCE}
|
||||
strokeDashoffset={ringOffset}
|
||||
/>
|
||||
</svg>
|
||||
<span aria-hidden className="relative z-10 text-[12px]">
|
||||
⤫
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={copy.space.exitHold.holdToExitAriaLabel}
|
||||
onMouseDown={start}
|
||||
onMouseUp={cancel}
|
||||
onMouseLeave={cancel}
|
||||
onTouchStart={start}
|
||||
onTouchEnd={cancel}
|
||||
onTouchCancel={cancel}
|
||||
onKeyDown={handleKeyDown}
|
||||
onKeyUp={handleKeyUp}
|
||||
onClick={(event) => event.preventDefault()}
|
||||
className={cn(
|
||||
'relative overflow-hidden rounded-lg bg-white/8 px-2.5 py-1.5 text-xs text-white/82 transition hover:bg-white/14 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{isHolding || isCompleted ? (
|
||||
<span
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'absolute inset-0 z-0 origin-left transform-gpu bg-sky-200/24 rounded-none',
|
||||
isHolding && 'animate-[exit-hold-bar-fill_1000ms_linear_forwards]',
|
||||
)}
|
||||
style={isCompleted ? { transform: 'scaleX(1)' } : undefined}
|
||||
/>
|
||||
) : null}
|
||||
<span className="relative z-10 inline-flex items-center gap-1">
|
||||
<span aria-hidden>⤫</span>
|
||||
<span>{copy.space.exitHold.exit}</span>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@@ -3,7 +3,7 @@ import { apiClient } from '@/shared/lib/apiClient';
|
||||
|
||||
export type FocusSessionPhase = 'focus' | 'break';
|
||||
export type FocusSessionState = 'running' | 'paused';
|
||||
export type FocusSessionCompletionType = 'goal-complete' | 'timer-complete';
|
||||
export type FocusSessionCompletionType = 'goal-complete' | 'timer-complete' | 'manual-end';
|
||||
|
||||
interface RawFocusSession {
|
||||
id: number | string;
|
||||
@@ -41,7 +41,7 @@ interface RawCurrentSessionThought {
|
||||
|
||||
interface RawCompletionResult {
|
||||
completedSessionId: string;
|
||||
completionSource: 'timer-complete' | 'manual-end';
|
||||
completionSource: 'timer-complete' | 'manual-end' | 'goal-complete';
|
||||
completedGoal: string;
|
||||
focusedSeconds: number;
|
||||
thoughts: RawCurrentSessionThought[];
|
||||
@@ -78,7 +78,7 @@ export interface CurrentSessionThought {
|
||||
|
||||
export interface CompletionResult {
|
||||
completedSessionId: string;
|
||||
completionSource: 'timer-complete' | 'manual-end';
|
||||
completionSource: 'timer-complete' | 'manual-end' | 'goal-complete';
|
||||
completedGoal: string;
|
||||
focusedSeconds: number;
|
||||
thoughts: CurrentSessionThought[];
|
||||
|
||||
@@ -133,6 +133,16 @@ export const space = {
|
||||
thoughtCount: (count: number) => `${count}개`,
|
||||
confirmButton: '확인하고 돌아가기',
|
||||
},
|
||||
endSession: {
|
||||
trigger: 'END SESSION',
|
||||
eyebrow: 'END SESSION',
|
||||
title: '세션을 여기서 마칠까요?',
|
||||
description: '지금 종료하면 결과를 요약해서 보여준 뒤 앱 입구로 돌아갑니다.',
|
||||
goalLabel: '현재 목표',
|
||||
cancelButton: '계속 집중하기',
|
||||
confirmButton: '종료하기',
|
||||
confirmPending: '종료 중…',
|
||||
},
|
||||
controlCenter: {
|
||||
sectionTitles: {
|
||||
background: 'Background',
|
||||
@@ -267,8 +277,4 @@ export const space = {
|
||||
selectionPreferenceSaveFailed: '배경/사운드 기본 설정을 저장하지 못했어요.',
|
||||
selectionSessionSyncFailed: '현재 세션의 배경/사운드 선택을 동기화하지 못했어요.',
|
||||
},
|
||||
exitHold: {
|
||||
holdToExitAriaLabel: '길게 눌러 나가기',
|
||||
exit: '나가기',
|
||||
},
|
||||
} as const;
|
||||
|
||||
103
src/widgets/space-focus-hud/ui/EndSessionConfirmModal.tsx
Normal file
103
src/widgets/space-focus-hud/ui/EndSessionConfirmModal.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
@@ -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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -43,7 +43,7 @@ interface UseSpaceWorkspaceSessionControlsParams {
|
||||
microStep?: string | null;
|
||||
}) => Promise<FocusSession | null>;
|
||||
completeSession: (payload: {
|
||||
completionType: 'goal-complete' | 'timer-complete';
|
||||
completionType: 'goal-complete' | 'timer-complete' | 'manual-end';
|
||||
completedGoal?: string;
|
||||
focusScore?: number;
|
||||
distractionCount?: number;
|
||||
@@ -57,7 +57,6 @@ interface UseSpaceWorkspaceSessionControlsParams {
|
||||
soundPresetId: string;
|
||||
focusPlanItemId?: string;
|
||||
}) => Promise<{ nextSession: FocusSession } | null>;
|
||||
abandonSession: () => Promise<boolean>;
|
||||
setGoalInput: (value: string) => void;
|
||||
setLinkedFocusPlanItemId: (value: string | null) => void;
|
||||
setSelectedGoalId: (value: string | null) => void;
|
||||
@@ -90,7 +89,6 @@ export const useSpaceWorkspaceSessionControls = ({
|
||||
updateCurrentIntent,
|
||||
completeSession,
|
||||
advanceGoal,
|
||||
abandonSession,
|
||||
setGoalInput,
|
||||
setLinkedFocusPlanItemId,
|
||||
setSelectedGoalId,
|
||||
@@ -199,21 +197,6 @@ export const useSpaceWorkspaceSessionControls = ({
|
||||
unlockPlayback,
|
||||
]);
|
||||
|
||||
const handleExitRequested = useCallback(async () => {
|
||||
const didAbandon = await abandonSession();
|
||||
|
||||
if (!didAbandon) {
|
||||
pushStatusLine({
|
||||
message: copy.space.workspace.abandonFailed,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setPreviewPlaybackState('paused');
|
||||
setPendingSessionEntryPoint('space-setup');
|
||||
setWorkspaceMode('setup');
|
||||
}, [abandonSession, pushStatusLine, setPendingSessionEntryPoint, setPreviewPlaybackState, setWorkspaceMode]);
|
||||
|
||||
const handlePauseRequested = useCallback(async () => {
|
||||
if (!currentSession) {
|
||||
setPreviewPlaybackState('paused');
|
||||
@@ -317,7 +300,7 @@ export const useSpaceWorkspaceSessionControls = ({
|
||||
}
|
||||
|
||||
const completionResult = await completeSession({
|
||||
completionType: 'goal-complete',
|
||||
completionType: 'manual-end',
|
||||
completedGoal: trimmedCurrentGoal || undefined,
|
||||
});
|
||||
|
||||
@@ -344,6 +327,41 @@ export const useSpaceWorkspaceSessionControls = ({
|
||||
setWorkspaceMode,
|
||||
]);
|
||||
|
||||
const handleManualEnd = useCallback(async () => {
|
||||
const trimmedCurrentGoal = goalInput.trim();
|
||||
|
||||
if (!currentSession) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const completionResult = await completeSession({
|
||||
completionType: 'manual-end',
|
||||
completedGoal: trimmedCurrentGoal || undefined,
|
||||
});
|
||||
|
||||
if (!completionResult) {
|
||||
pushStatusLine({
|
||||
message: copy.space.workspace.abandonFailed,
|
||||
});
|
||||
return null;
|
||||
}
|
||||
|
||||
setShowResumePrompt(false);
|
||||
setPendingSessionEntryPoint('space-setup');
|
||||
setPreviewPlaybackState('paused');
|
||||
setWorkspaceMode('setup');
|
||||
return completionResult;
|
||||
}, [
|
||||
completeSession,
|
||||
currentSession,
|
||||
goalInput,
|
||||
pushStatusLine,
|
||||
setPendingSessionEntryPoint,
|
||||
setPreviewPlaybackState,
|
||||
setShowResumePrompt,
|
||||
setWorkspaceMode,
|
||||
]);
|
||||
|
||||
const handleTimerComplete = useCallback(async () => {
|
||||
const trimmedCurrentGoal = goalInput.trim();
|
||||
|
||||
@@ -521,11 +539,11 @@ export const useSpaceWorkspaceSessionControls = ({
|
||||
openFocusMode,
|
||||
handleSetupFocusOpen,
|
||||
handleStartRequested,
|
||||
handleExitRequested,
|
||||
handlePauseRequested,
|
||||
handleRestartRequested,
|
||||
handleIntentUpdate,
|
||||
handleGoalComplete,
|
||||
handleManualEnd,
|
||||
handleTimerComplete,
|
||||
handleExtendCurrentPhase,
|
||||
handleGoalAdvance,
|
||||
|
||||
@@ -113,7 +113,6 @@ export const SpaceWorkspaceWidget = () => {
|
||||
updateCurrentSelection,
|
||||
completeSession,
|
||||
advanceGoal,
|
||||
abandonSession,
|
||||
} = useFocusSessionEngine();
|
||||
const isCompletionResultOpen = pendingCompletionResult !== null;
|
||||
|
||||
@@ -186,7 +185,6 @@ export const SpaceWorkspaceWidget = () => {
|
||||
updateCurrentIntent,
|
||||
completeSession,
|
||||
advanceGoal,
|
||||
abandonSession,
|
||||
setGoalInput: selection.setGoalInput,
|
||||
setLinkedFocusPlanItemId: selection.setLinkedFocusPlanItemId,
|
||||
setSelectedGoalId: selection.setSelectedGoalId,
|
||||
@@ -410,7 +408,16 @@ export const SpaceWorkspaceWidget = () => {
|
||||
});
|
||||
});
|
||||
}}
|
||||
onExitRequested={() => void controls.handleExitRequested()}
|
||||
onExitRequested={async () => {
|
||||
const completionResult = await controls.handleManualEnd();
|
||||
|
||||
if (completionResult) {
|
||||
setPendingCompletionResult(completionResult);
|
||||
setCurrentSessionThoughts([]);
|
||||
}
|
||||
|
||||
return Boolean(completionResult);
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user