From 6368b877386c265a6320327fca2b2dbb6f2670cf Mon Sep 17 00:00:00 2001
From: aoi-dev-0411 <aoikabu12@gmail.com>
Date: Sat, 11 Apr 2026 11:48:59 +0900
Subject: [PATCH] feat: auto-focus first input on page load

Closes #36
---
 components/compare-form.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/compare-form.tsx b/components/compare-form.tsx
index a07f593..b640cbe 100644
--- a/components/compare-form.tsx
+++ b/components/compare-form.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Button } from "./ui/button";
 import { ArrowLeftRight, RefreshCw } from "lucide-react";
 import {
@@ -29,6 +29,11 @@ export function CompareForm({
 }: CompareFormProps) {
   const [username1, setUsername1] = useState("pbiggar");
   const [username2, setUsername2] = useState("CoralineAda");
+  const firstInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    firstInputRef.current?.focus();
+  }, []);
 
   const canSubmit = Boolean(username1.trim() && username2.trim() && !loading);
 
@@ -62,6 +67,7 @@ export function CompareForm({
         <CardContent>
           <div className="grid gap-3 md:grid-cols-2">
             <input
+              ref={firstInputRef}
               className="h-11 rounded-lg border border-slate-200 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary/60 focus:border-transparent bg-white"
               placeholder={"Username 1 (e.g., torvalds)"}
               value={username1}