refactor(space): polish focus hud ui
This commit is contained in:
@@ -1,322 +1,172 @@
|
||||
'use client';
|
||||
|
||||
import { type FormEvent, useEffect, useRef, useState } from 'react';
|
||||
import { copy } from '@/shared/i18n';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
import { HUD_FIELD } from './overlayStyles';
|
||||
|
||||
type EndSessionStage = 'decision' | 'finished' | 'unfinished' | 'next';
|
||||
type EndSessionStage = 'decision' | 'success' | 'unfinished';
|
||||
|
||||
interface EndSessionConfirmModalProps {
|
||||
open: boolean;
|
||||
currentGoal: string;
|
||||
onClose: () => void;
|
||||
onAdvanceGoal: (nextGoal: string) => Promise<boolean> | boolean;
|
||||
onFinishHere: () => Promise<boolean> | boolean;
|
||||
onEndSession: () => Promise<boolean> | boolean;
|
||||
onAdvanceGoal: (nextGoal: string) => Promise<boolean> | boolean; // kept for compatibility if needed
|
||||
onFinishHere: () => Promise<boolean> | boolean; // User achieved goal -> exit
|
||||
onEndSession: () => Promise<boolean> | boolean; // User did not achieve -> exit
|
||||
}
|
||||
|
||||
export const EndSessionConfirmModal = ({
|
||||
open,
|
||||
currentGoal,
|
||||
onClose,
|
||||
onAdvanceGoal,
|
||||
onFinishHere,
|
||||
onEndSession,
|
||||
}: EndSessionConfirmModalProps) => {
|
||||
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 [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const trimmedGoal = currentGoal.trim();
|
||||
const trimmedDraft = draft.trim();
|
||||
const isSubmitting = submissionMode !== null;
|
||||
const canConfirmNext = trimmedDraft.length > 0;
|
||||
const trimmedGoal = currentGoal.trim() || '목표 없음';
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setStage('decision');
|
||||
setDraft('');
|
||||
setSubmissionMode(null);
|
||||
return;
|
||||
setTimeout(() => setStage('decision'), 300); // Reset after close animation
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
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');
|
||||
|
||||
const handleFinish = async () => {
|
||||
if (isSubmitting) return;
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const didFinish = await onFinishHere();
|
||||
|
||||
if (didFinish) {
|
||||
onClose();
|
||||
}
|
||||
if (didFinish) onClose();
|
||||
} finally {
|
||||
setSubmissionMode(null);
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEndSession = async () => {
|
||||
if (isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmissionMode('end');
|
||||
|
||||
const handleEnd = async () => {
|
||||
if (isSubmitting) return;
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const didEnd = await onEndSession();
|
||||
|
||||
if (didEnd) {
|
||||
onClose();
|
||||
}
|
||||
if (didEnd) onClose();
|
||||
} finally {
|
||||
setSubmissionMode(null);
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
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
|
||||
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)]',
|
||||
'pointer-events-none fixed inset-0 z-[70] flex items-center justify-center px-4 transition-all duration-500 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',
|
||||
'absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.95)_100%)] backdrop-blur-2xl transition-opacity duration-500',
|
||||
open ? 'opacity-100' : 'opacity-0',
|
||||
)}
|
||||
/>
|
||||
|
||||
<section
|
||||
<div
|
||||
className={cn(
|
||||
'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]',
|
||||
'relative flex w-full max-w-2xl flex-col items-center text-center transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]',
|
||||
open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-8 scale-95',
|
||||
)}
|
||||
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">
|
||||
<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>
|
||||
<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]"
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
<p className="mx-auto mt-3 max-w-[28rem] text-[14px] leading-[1.7] text-white/56">
|
||||
{description}
|
||||
</p>
|
||||
</header>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={isSubmitting}
|
||||
className="absolute right-0 top-0 p-2 text-white/40 hover:text-white transition-colors"
|
||||
aria-label="닫기"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
{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}
|
||||
{stage === 'decision' && (
|
||||
<div className="flex flex-col items-center animate-fade-in-up w-full">
|
||||
<p className="text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 mb-6 drop-shadow-md">
|
||||
Session Review
|
||||
</p>
|
||||
<h3 className="text-3xl md:text-5xl font-light tracking-tight text-white mb-10 leading-tight">
|
||||
이번 세션의 목표를<br/>달성하셨나요?
|
||||
</h3>
|
||||
|
||||
<div className="w-full max-w-lg rounded-3xl border border-white/10 bg-white/5 p-6 mb-12 backdrop-blur-md shadow-2xl">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-widest text-white/40 mb-3">
|
||||
현재 목표
|
||||
</p>
|
||||
<p className="mt-2 text-[15px] font-medium leading-[1.45] tracking-[-0.01em] text-white/88">
|
||||
<p className="text-xl font-medium text-white/90">
|
||||
{trimmedGoal}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{stage === 'decision' ? (
|
||||
<footer className="mt-6 grid grid-cols-2 gap-3">
|
||||
<div className="flex flex-col sm:flex-row w-full max-w-md gap-4">
|
||||
<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"
|
||||
onClick={() => setStage('success')}
|
||||
className="flex-1 rounded-full bg-white text-black px-6 py-4 text-[15px] font-semibold shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all hover:scale-105 active:scale-95"
|
||||
>
|
||||
{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"
|
||||
className="flex-1 rounded-full border border-white/20 bg-black/40 text-white px-6 py-4 text-[15px] font-medium backdrop-blur-md transition-all hover:bg-white/10 hover:border-white/40 active:scale-95"
|
||||
>
|
||||
{copy.space.endSession.unfinishedAnswer}
|
||||
아뇨, 아직입니다
|
||||
</button>
|
||||
</footer>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{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 === 'success' && (
|
||||
<div className="flex flex-col items-center animate-fade-in-up w-full">
|
||||
<div className="mb-8 inline-flex h-20 w-20 items-center justify-center rounded-full bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.2),transparent)] border border-white/20 shadow-[0_0_50px_rgba(255,255,255,0.2)]">
|
||||
<span className="text-4xl">✨</span>
|
||||
</div>
|
||||
<h3 className="text-4xl md:text-5xl font-light tracking-tight text-white mb-6">
|
||||
완벽합니다.
|
||||
</h3>
|
||||
<p className="text-lg text-white/60 font-light mb-12 max-w-md leading-relaxed">
|
||||
성공적으로 목표를 완수했습니다.<br/>스스로에게 보상을 줄 시간입니다.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleFinish}
|
||||
disabled={isSubmitting}
|
||||
className="rounded-full bg-white text-black px-10 py-4 text-[15px] font-semibold shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all hover:scale-105 active:scale-95 disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? '저장 중...' : '로비로 돌아가기'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{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>
|
||||
{stage === 'unfinished' && (
|
||||
<div className="flex flex-col items-center animate-fade-in-up w-full">
|
||||
<div className="mb-8 inline-flex h-20 w-20 items-center justify-center rounded-full bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.1),transparent)] border border-white/10">
|
||||
<span className="text-4xl opacity-80">🌱</span>
|
||||
</div>
|
||||
<h3 className="text-3xl md:text-4xl font-light tracking-tight text-white mb-6">
|
||||
괜찮습니다.<br/>집중은 근육이니까요.
|
||||
</h3>
|
||||
<p className="text-[16px] text-white/60 font-light mb-12 max-w-md leading-relaxed">
|
||||
조금씩 단련해나가면 됩니다.<br/>이 흐름을 다음 세션에 이어서 해볼까요?
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleEnd}
|
||||
disabled={isSubmitting}
|
||||
className="rounded-full border border-white/20 bg-white/10 text-white px-10 py-4 text-[15px] font-medium backdrop-blur-md transition-all hover:bg-white/20 active:scale-95 disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? '저장 중...' : '저장하고 로비로 돌아가기'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
@@ -137,9 +137,10 @@ export const InlineMicrostep = ({ microStep, isBusy, onUpdate }: InlineMicrostep
|
||||
type="button"
|
||||
onClick={startEditing}
|
||||
disabled={isBusy}
|
||||
className="inline-flex items-center gap-2 rounded-full border border-dashed border-white/20 bg-transparent px-6 py-2.5 text-[14px] font-medium text-white/40 transition-all hover:border-white/40 hover:text-white/80 active:scale-95 disabled:opacity-50"
|
||||
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/20 backdrop-blur-md px-6 py-2.5 text-[14px] font-medium text-white/80 transition-all shadow-[0_4px_12px_rgba(0,0,0,0.1)] hover:border-white/30 hover:bg-black/30 hover:text-white active:scale-95 disabled:opacity-50"
|
||||
>
|
||||
<span className="text-lg leading-none mb-0.5">+</span> Add microstep
|
||||
<span className="text-lg leading-none mb-0.5 drop-shadow-md">+</span>
|
||||
<span className="drop-shadow-md">Add microstep</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -175,9 +175,9 @@ export const SpaceFocusHudWidget = ({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOverlay("end-session")}
|
||||
className="text-[11px] font-bold uppercase tracking-[0.25em] text-white/34 transition hover:text-white/76"
|
||||
className="rounded-full border border-white/10 bg-black/20 px-5 py-2 text-[11px] font-bold uppercase tracking-[0.25em] text-white/70 backdrop-blur-md shadow-md transition-all hover:border-white/20 hover:bg-black/40 hover:text-white active:scale-95"
|
||||
>
|
||||
{copy.space.endSession.trigger}
|
||||
<span className="drop-shadow-md">{copy.space.endSession.trigger}</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -58,30 +58,41 @@ export const ThoughtOrb = ({ isFocusMode, onCaptureThought }: ThoughtOrbProps) =
|
||||
return (
|
||||
<div className="fixed top-8 right-8 z-40 flex flex-col items-end gap-3 pointer-events-none">
|
||||
<div className="pointer-events-auto relative group">
|
||||
{/* The Orb */}
|
||||
{/* The Magnetic Orb */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen((prev) => !prev)}
|
||||
className={cn(
|
||||
"relative inline-flex h-14 w-14 items-center justify-center rounded-full transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]",
|
||||
isOpen || isAbsorbing
|
||||
? "bg-white text-black shadow-[0_0_60px_rgba(255,255,255,0.8)] scale-110"
|
||||
: "bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.15),transparent)] border border-white/10 text-white/70 hover:bg-white/10 hover:text-white hover:scale-105 hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] backdrop-blur-md",
|
||||
? "scale-110"
|
||||
: "hover:scale-110",
|
||||
isAbsorbing && "animate-pulse"
|
||||
)}
|
||||
>
|
||||
<div className={cn("absolute inset-0 rounded-full bg-white/30 blur-xl transition-opacity duration-700", (isOpen || isAbsorbing) ? "opacity-100" : "opacity-0 group-hover:opacity-60")} />
|
||||
<svg viewBox="0 0 24 24" className="h-6 w-6 relative z-10 transition-transform duration-500" style={{ transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)' }} fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
{/* Glowing Aura */}
|
||||
<div className={cn(
|
||||
"absolute inset-0 rounded-full bg-white/20 blur-xl transition-all duration-700",
|
||||
(isOpen || isAbsorbing) ? "opacity-100 scale-125 bg-white/30" : "opacity-0 group-hover:opacity-100 group-hover:scale-150"
|
||||
)} />
|
||||
{/* Solid Core Ring */}
|
||||
<div className={cn(
|
||||
"absolute inset-0 rounded-full border border-white/20 transition-all duration-700",
|
||||
isOpen || isAbsorbing ? "bg-white/10" : "bg-black/20 backdrop-blur-md"
|
||||
)} />
|
||||
{/* Inner Light Dot */}
|
||||
<div className={cn(
|
||||
"relative z-10 rounded-full transition-all duration-500",
|
||||
isOpen || isAbsorbing ? "h-6 w-6 bg-white shadow-[0_0_20px_rgba(255,255,255,0.8)]" : "h-2 w-2 bg-white/60 group-hover:bg-white group-hover:h-3 group-hover:w-3 group-hover:shadow-[0_0_10px_rgba(255,255,255,1)]"
|
||||
)} />
|
||||
</button>
|
||||
|
||||
{/* Tooltip */}
|
||||
<div className={cn(
|
||||
"absolute right-full top-1/2 -translate-y-1/2 mr-4 pointer-events-none transition-all duration-300",
|
||||
"absolute right-full top-1/2 -translate-y-1/2 mr-6 pointer-events-none transition-all duration-300",
|
||||
(!isOpen && !isAbsorbing) ? "opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0" : "opacity-0"
|
||||
)}>
|
||||
<span className="bg-black/40 backdrop-blur-xl border border-white/5 text-white/80 text-[10px] uppercase tracking-widest px-3 py-1.5 rounded-full whitespace-nowrap shadow-xl">
|
||||
<span className="bg-black/60 backdrop-blur-2xl border border-white/10 text-white/90 text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-full whitespace-nowrap shadow-lg">
|
||||
Brain Dump
|
||||
</span>
|
||||
</div>
|
||||
@@ -98,14 +109,15 @@ export const ThoughtOrb = ({ isFocusMode, onCaptureThought }: ThoughtOrbProps) =
|
||||
)}
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="relative w-[22rem]">
|
||||
<div className="absolute inset-0 bg-[linear-gradient(145deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0.02)_100%)] rounded-[2rem] backdrop-blur-3xl shadow-[0_20px_40px_rgba(0,0,0,0.4)] border border-white/10" />
|
||||
{/* Premium Smoked Glass Container */}
|
||||
<div className="absolute inset-0 rounded-[2rem] bg-black/40 backdrop-blur-3xl ring-1 ring-white/15 shadow-2xl" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={draft}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
disabled={isAbsorbing}
|
||||
placeholder="Dump a distracting thought..."
|
||||
className="relative z-10 w-full bg-transparent px-6 py-5 text-[15px] font-medium text-white outline-none placeholder:text-white/30 disabled:opacity-50"
|
||||
className="relative z-10 w-full bg-transparent px-6 py-5 text-[15px] font-medium text-white outline-none placeholder:text-white/40 drop-shadow-sm disabled:opacity-50"
|
||||
/>
|
||||
<button type="submit" className="hidden">Submit</button>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user