From 35f169f3dfd68d4398ad1882f6a8e6108d5b66d7 Mon Sep 17 00:00:00 2001
From: aoi-dev-0411 <aoi@example.com>
Date: Sun, 12 Apr 2026 05:45:04 +0900
Subject: [PATCH] feat: add auto-focus to first username input on page load
 (closes #36)

---
 components/compare-form.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/compare-form.tsx b/components/compare-form.tsx
index a07f593..36ed9ce 100644
--- a/components/compare-form.tsx
+++ b/components/compare-form.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { Button } from "./ui/button";
 import { ArrowLeftRight, RefreshCw } from "lucide-react";
 import {
@@ -29,6 +29,12 @@ export function CompareForm({
 }: CompareFormProps) {
   const [username1, setUsername1] = useState("pbiggar");
   const [username2, setUsername2] = useState("CoralineAda");
+  const firstInputRef = useRef<HTMLInputElement>(null);
+
+  // Auto-focus first input on page load
+  useEffect(() => {
+    firstInputRef.current?.focus();
+  }, []);
 
   const canSubmit = Boolean(username1.trim() && username2.trim() && !loading);
 
@@ -63,6 +69,7 @@ export function CompareForm({
           <div className="grid gap-3 md:grid-cols-2">
             <input
               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"
+              ref={firstInputRef}
               placeholder={"Username 1 (e.g., torvalds)"}
               value={username1}
               onChange={(e) => setUsername1(e.target.value)}