feat: add auto-focus to first username input on page load (closes #36)

Author: aoi-dev-0411

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)}