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

src/widgets/space-focus-hud/ui/EndSessionConfirmModal.tsx

@@ -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>