diff --git a/src/app/globals.css b/src/app/globals.css index 7e4990c..bcd9eee 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -49,3 +49,23 @@ body { transform: scaleX(1); } } + +@keyframes space-stage-pan { + 0% { + transform: scale(1.02) translate3d(-0.4%, -0.25%, 0); + } + 100% { + transform: scale(1.07) translate3d(0.55%, 0.35%, 0); + } +} + +@keyframes space-light-drift { + 0% { + transform: translate3d(-1.2%, -0.8%, 0); + opacity: 0.86; + } + 100% { + transform: translate3d(1.2%, 0.9%, 0); + opacity: 1; + } +} diff --git a/src/features/session-goal/ui/SessionGoalField.tsx b/src/features/session-goal/ui/SessionGoalField.tsx index 5627dfd..7ce85cb 100644 --- a/src/features/session-goal/ui/SessionGoalField.tsx +++ b/src/features/session-goal/ui/SessionGoalField.tsx @@ -1,10 +1,11 @@ 'use client'; -import { useMemo, useState } from 'react'; +import { useEffect, useRef } from 'react'; import type { GoalChip } from '@/entities/session'; import { cn } from '@/shared/lib/cn'; interface SessionGoalFieldProps { + autoFocus?: boolean; goalInput: string; selectedGoalId: string | null; goalChips: GoalChip[]; @@ -13,40 +14,49 @@ interface SessionGoalFieldProps { } export const SessionGoalField = ({ + autoFocus = false, goalInput, selectedGoalId, goalChips, onGoalChange, onGoalChipSelect, }: SessionGoalFieldProps) => { - const [expanded, setExpanded] = useState(false); + const inputRef = useRef(null); - const visibleChips = useMemo(() => { - if (expanded) { - return goalChips; + useEffect(() => { + if (!autoFocus) { + return; } - return goalChips.slice(0, 4); - }, [expanded, goalChips]); + const raf = window.requestAnimationFrame(() => { + inputRef.current?.focus(); + }); + + return () => { + window.cancelAnimationFrame(raf); + }; + }, [autoFocus]); return ( -
-
-