From 8c4b7c086b64738d690736e8be5abb8d1e1b17a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kaan=20Uzdo=C4=9Fan?= <kaanuzdogan@hotmail.com>
Date: Mon, 17 Aug 2026 14:05:05 +0300
Subject: [PATCH] Autofocus search input on homepage load

Focus the search input on mount so users can type immediately
without clicking into it first.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/page.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 104678c..525c3e1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, Suspense } from "react";
+import { useState, useEffect, useRef, Suspense } from "react";
 import CopyButton from "@/components/CopyButton";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
@@ -60,6 +60,7 @@ function SearchInterface() {
   const [stats, setStats] = useState<Stats | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [statsDate, setStatsDate] = useState<string | null>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   // Update URL with search query
   const updateURL = (searchQuery: string) => {
@@ -248,6 +249,8 @@ function SearchInterface() {
       performSearch(urlQuery);
     }
     fetchStats();
+    // Focus the search input on load so the user can type immediately
+    searchInputRef.current?.focus();
   }, []); // Empty dependency array - only run on mount
 
   return (
@@ -348,6 +351,7 @@ function SearchInterface() {
             >
               <div className="flex-1">
                 <input
+                  ref={searchInputRef}
                   type="search"
                   name="search"
                   value={query}