feat: add interaction and micro animations part 2

next.config.ts

@@ -6,7 +6,8 @@ import type { NextConfig } from "next";
 import "./src/env";
 
 const config: NextConfig = {
-	// reactCompiler: true,
+	// if this enabled motion animations don't work
+	// reactCompiler: true, 
 };
 
 export default config;

src/@/components/competition-layout.tsx

@@ -71,6 +71,7 @@ function HeatSelector({ children }: { children: React.ReactNode }) {
 						.sort((a, b) => a.Index - b.Index)
 						.map((heat) => (
 							<Button
+								className="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
 								key={heat.Index}
 								onClick={() => actions.handleHeatChange(heat.Index)}
 								variant={
@@ -290,7 +291,7 @@ function EmptyState() {
 	return (
 		<div className="py-8 text-center">
 			<p className="text-muted-foreground">
-				Eräjakoja ei ole saatavilla vielä.
+				Eräjakoja ei ole saatavilla vielä…
 			</p>
 		</div>
 	);
@@ -302,7 +303,7 @@ const participantColumns: Column<Enrollment>[] = [
 		cell: (p) =>
 			p.Confirmed ? (
 				<div className="flex size-5 items-center justify-center">
-					<CheckCircle className="size-3 text-white" />
+					<CheckCircle aria-hidden="true" className="size-3 text-white" />
 				</div>
 			) : null,
 	},

src/@/components/event-switcher.tsx

@@ -151,7 +151,7 @@ export function EventSwitcher({
 			onValueChange={handleEventSelection}
 			value={currentEvent?.EventId ? currentEvent : undefined}
 		>
-			<SelectTrigger className="!h-auto !items-center !py-2 !px-4 w-full sm:w-[400px]">
+			<SelectTrigger className="!h-auto !items-center !py-2 !px-4 w-full focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:w-[400px]">
 				<SelectValue className="w-full">
 					{(event: EventWithDate) => <EventDisplay event={event} />}
 				</SelectValue>

src/@/components/obs-popover.tsx

@@ -37,7 +37,7 @@ export function ObsPopover({ slug }: { slug: string }) {
 					/>
 				}
 			>
-				<InfoIcon className="h-4 w-4" />
+				<InfoIcon aria-hidden="true" className="h-4 w-4" />
 				<span className="sr-only sm:not-sr-only">OBS Overlay</span>
 			</PopoverTrigger>
 			<AnimatePresence>

src/@/components/round-switcher.tsx

@@ -26,6 +26,7 @@ export function RoundSwitcher() {
 		<div className="flex gap-2">
 			{state.rounds.map((round) => (
 				<Button
+					className="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
 					key={round.Index}
 					onClick={() => actions.handleRoundChange(round.Index)}
 					variant={state.selectedRound === round.Index ? "default" : "outline"}

src/@/components/search-form.tsx

@@ -44,7 +44,6 @@ function extractEvents(data: Events): EventData[] {
 	return results;
 }
 
-// Spring config for the container morph
 const smoothSpring = {
 	type: "spring" as const,
 	stiffness: 170,
@@ -139,7 +138,11 @@ export function SearchForm() {
 
 	return (
 		<div className="relative w-full">
-			<Command className="overflow-visible bg-transparent" shouldFilter={false}>
+			<Command
+				className="overflow-visible bg-transparent"
+				role="search"
+				shouldFilter={false}
+			>
 				<motion.div
 					animate={{
 						borderRadius: showDropdown ? 18 : 14,
@@ -171,8 +174,6 @@ export function SearchForm() {
 							<Loader2 className="absolute top-1/2 right-4 h-5 w-5 -translate-y-1/2 animate-spin text-muted-foreground" />
 						)}
 					</div>
-
-					{/* Divider */}
 					<AnimatePresence>
 						{showDropdown && (
 							<motion.div
@@ -184,8 +185,6 @@ export function SearchForm() {
 							/>
 						)}
 					</AnimatePresence>
-
-					{/* List Section */}
 					<AnimatePresence mode="wait">
 						{showDropdown && (
 							<motion.div
@@ -197,10 +196,6 @@ export function SearchForm() {
 								transition={{ duration: 0.15 }}
 							>
 								<div className="p-1 pt-0">
-									{/* 
-                    Removed motion variants from items to fix UI layout issues.
-                    Items now render naturally without animation interference.
-                  */}
 									<CommandList className="max-h-80 overflow-y-auto">
 										{showEmpty && (
 											<CommandEmpty className="py-6 text-center text-muted-foreground text-sm">
@@ -241,7 +236,7 @@ export function SearchForm() {
 											<div className="px-4 py-6 text-center">
 												<Loader2 className="mx-auto h-6 w-6 animate-spin text-muted-foreground" />
 												<p className="mt-2 text-muted-foreground text-sm">
-													Ladataan lajeja...
+													Ladataan lajeja…
 												</p>
 											</div>
 										)}