feat: add handle autocomplete on landing page

search handles as you type using the Bluesky search API, showing
avatars, display names, and handles in a dropdown. selecting a
result navigates directly to that profile.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

Cargo.lock

···
  "serde",
  "serde_json",
  "tokio",
+ "urlencoding",
 ]
 
 [[package]]
···
  "percent-encoding",
  "serde",
 ]
+
+[[package]]
+name = "urlencoding"
+version = "2.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "daf8dba3b7eb870caf1ddeed7bc9d2a049f3cfdfae7cb521b087cc33ae4c49da"
 
 [[package]]
 name = "utf-8"

Cargo.toml

···
 once_cell = "1.20"
 dashmap = "6.1"
 chrono = { version = "0.4", features = ["serde"] }
+urlencoding = "2.1"

src/constants.rs

···
 pub const BSKY_API_RESOLVE_HANDLE: &str =
     "https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle";
 pub const BSKY_API_GET_PROFILE: &str = "https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile";
+pub const BSKY_API_SEARCH_ACTORS: &str =
+    "https://public.api.bsky.app/xrpc/app.bsky.actor.searchActors";
 pub const PLC_DIRECTORY: &str = "https://plc.directory";
 
 // Server Configuration

src/main.rs

···
             .service(routes::init)
             .service(routes::get_avatar)
             .service(routes::get_avatar_batch)
+            .service(routes::search_handles)
             .service(routes::validate_url)
             .service(routes::get_record)
             .service(routes::auth_status)

src/routes.rs

···
 }
 
 #[derive(Deserialize)]
+pub struct SearchHandlesQuery {
+    q: String,
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct HandleSearchResult {
+    did: String,
+    handle: String,
+    display_name: String,
+    avatar_url: Option<String>,
+}
+
+#[get("/api/search/handles")]
+pub async fn search_handles(query: web::Query<SearchHandlesQuery>) -> HttpResponse {
+    let q = &query.q;
+
+    if q.len() < 2 {
+        return HttpResponse::Ok().json(serde_json::json!({
+            "results": []
+        }));
+    }
+
+    let search_url = format!(
+        "{}?q={}&limit=8",
+        constants::BSKY_API_SEARCH_ACTORS,
+        urlencoding::encode(q)
+    );
+
+    match http_get(&search_url).await {
+        Ok(response) => match response.json::<serde_json::Value>().await {
+            Ok(data) => {
+                let results: Vec<HandleSearchResult> = data["actors"]
+                    .as_array()
+                    .map(|actors| {
+                        actors
+                            .iter()
+                            .map(|actor| HandleSearchResult {
+                                did: actor["did"].as_str().unwrap_or("").to_string(),
+                                handle: actor["handle"].as_str().unwrap_or("").to_string(),
+                                display_name: actor["displayName"]
+                                    .as_str()
+                                    .unwrap_or_else(|| actor["handle"].as_str().unwrap_or(""))
+                                    .to_string(),
+                                avatar_url: actor["avatar"].as_str().map(String::from),
+                            })
+                            .collect()
+                    })
+                    .unwrap_or_default();
+
+                HttpResponse::Ok().json(serde_json::json!({
+                    "results": results
+                }))
+            }
+            Err(e) => {
+                log::error!("Failed to parse search response: {}", e);
+                HttpResponse::Ok().json(serde_json::json!({
+                    "results": []
+                }))
+            }
+        },
+        Err(e) => {
+            log::error!("Failed to search handles: {}", e);
+            HttpResponse::Ok().json(serde_json::json!({
+                "results": []
+            }))
+        }
+    }
+}
+
+#[derive(Deserialize)]
 pub struct AvatarQuery {
     namespace: String,
 }

src/templates/landing.html

···
             color: rgba(255, 255, 255, 0.3);
         }
 
+        .input-wrapper {
+            position: relative;
+            width: 100%;
+        }
+
+        .autocomplete-results {
+            position: absolute;
+            z-index: 100;
+            width: 100%;
+            max-height: 240px;
+            overflow-y: auto;
+            background: rgba(10, 10, 15, 0.98);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
+            margin-top: 0.25rem;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+            display: none;
+        }
+
+        .autocomplete-results.show {
+            display: block;
+        }
+
+        .autocomplete-item {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 0.75rem;
+            background: transparent;
+            border: none;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            color: #e5e5e5;
+            text-align: left;
+            font-family: inherit;
+            cursor: pointer;
+            transition: background 0.15s;
+        }
+
+        .autocomplete-item:last-child {
+            border-bottom: none;
+        }
+
+        .autocomplete-item:hover {
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        .autocomplete-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            flex-shrink: 0;
+        }
+
+        .autocomplete-avatar-placeholder {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.9rem;
+            color: rgba(255, 255, 255, 0.5);
+        }
+
+        .autocomplete-info {
+            flex: 1;
+            min-width: 0;
+            overflow: hidden;
+        }
+
+        .autocomplete-name {
+            font-weight: 500;
+            color: rgba(255, 255, 255, 0.9);
+            margin-bottom: 0.125rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 0.85rem;
+        }
+
+        .autocomplete-handle {
+            font-size: 0.75rem;
+            color: rgba(255, 255, 255, 0.5);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .search-spinner {
+            position: absolute;
+            right: 0.75rem;
+            top: 50%;
+            transform: translateY(-50%);
+            color: rgba(255, 255, 255, 0.4);
+            font-size: 0.75rem;
+        }
+
         button {
             font-family: inherit;
             font-size: 0.9rem;
···
             <h1>@me</h1>
             <div class="subtitle">explore the atmosphere</div>
             <form id="searchForm" onsubmit="event.preventDefault(); handleSearch();">
-                <input type="text" id="handleInput" placeholder="enter any handle" autofocus>
+                <div class="input-wrapper">
+                    <input type="text" id="handleInput" placeholder="enter any handle" autofocus autocomplete="off" autocapitalize="off" spellcheck="false">
+                    <span class="search-spinner" id="searchSpinner" style="display: none;">...</span>
+                    <div class="autocomplete-results" id="autocompleteResults"></div>
+                </div>
                 <button type="submit">explore</button>
             </form>
 
···
     </div>
 
     <script>
+        // Autocomplete state
+        let searchTimeout = null;
+        let autocompleteResults = [];
+
         function handleSearch() {
             const handle = document.getElementById('handleInput').value.trim();
             if (handle) {
···
         function toggleInfo() {
             document.getElementById('infoContent').classList.toggle('expanded');
         }
+
+        // Autocomplete functionality
+        const handleInput = document.getElementById('handleInput');
+        const resultsDiv = document.getElementById('autocompleteResults');
+        const spinner = document.getElementById('searchSpinner');
+
+        async function searchHandles(query) {
+            if (query.length < 2) {
+                autocompleteResults = [];
+                hideResults();
+                return;
+            }
+
+            spinner.style.display = 'block';
+
+            try {
+                const response = await fetch(`/api/search/handles?q=${encodeURIComponent(query)}`);
+                if (response.ok) {
+                    const data = await response.json();
+                    autocompleteResults = data.results;
+                    renderResults();
+                }
+            } catch (e) {
+                console.error('search failed:', e);
+            } finally {
+                spinner.style.display = 'none';
+            }
+        }
+
+        function renderResults() {
+            if (autocompleteResults.length === 0) {
+                hideResults();
+                return;
+            }
+
+            resultsDiv.innerHTML = autocompleteResults.map(result => `
+                <button type="button" class="autocomplete-item" onclick="selectHandle('${result.handle}')">
+                    ${result.avatarUrl
+                        ? `<img src="${result.avatarUrl}" alt="" class="autocomplete-avatar">`
+                        : `<div class="autocomplete-avatar-placeholder">${result.handle[0].toUpperCase()}</div>`
+                    }
+                    <div class="autocomplete-info">
+                        <div class="autocomplete-name">${escapeHtml(result.displayName)}</div>
+                        <div class="autocomplete-handle">@${escapeHtml(result.handle)}</div>
+                    </div>
+                </button>
+            `).join('');
+
+            resultsDiv.classList.add('show');
+        }
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        function hideResults() {
+            resultsDiv.classList.remove('show');
+        }
+
+        function selectHandle(handle) {
+            handleInput.value = handle;
+            autocompleteResults = [];
+            hideResults();
+            viewHandle(handle);
+        }
+
+        handleInput.addEventListener('input', () => {
+            if (searchTimeout) clearTimeout(searchTimeout);
+            searchTimeout = setTimeout(() => searchHandles(handleInput.value), 300);
+        });
+
+        handleInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                hideResults();
+            }
+        });
+
+        handleInput.addEventListener('focus', () => {
+            if (autocompleteResults.length > 0) {
+                resultsDiv.classList.add('show');
+            }
+        });
+
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.input-wrapper')) {
+                hideResults();
+            }
+        });
 
         // Atmosphere rendering
         async function fetchAtmosphere() {