diff --git a/src/components/Verifier/Verifier.css b/src/components/Verifier/Verifier.css index 5612423..4432fdd 100644 --- a/src/components/Verifier/Verifier.css +++ b/src/components/Verifier/Verifier.css @@ -108,7 +108,7 @@ flex-wrap: wrap; /* Allow wrapping */ padding: 0px; border: 0px; - position: relative; /* Added for suggestion list positioning */ + /* position: relative; */ /* Removed - no longer needed */ } .verifier-input-field { @@ -123,6 +123,7 @@ font-family: inherit; /* Use main font */ min-width: 200px; /* Ensure minimum width */ margin: 0px; + text-align: left; } .verifier-input-field:hover, @@ -185,7 +186,12 @@ } .verifier-list { + list-style: none; + padding: 0; + margin: 0; /* Reset default ul margins */ margin-top: 15px; + width: 100%; /* Added */ + box-sizing: border-box; /* Added */ } .verifier-list, @@ -205,6 +211,8 @@ margin-bottom: 10px; flex-wrap: wrap; /* Allow actions to wrap */ gap: 10px; + width: 100%; /* Added */ + box-sizing: border-box; /* Added */ } .verifier-list-item-content { flex-grow: 1; diff --git a/src/components/Verifier/Verifier.js b/src/components/Verifier/Verifier.js index f98a74b..51d8c4c 100644 --- a/src/components/Verifier/Verifier.js +++ b/src/components/Verifier/Verifier.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef, useCallback } from 'react'; +import React, { useState, useEffect, useCallback } from 'react'; import { useAuth } from '../../contexts/AuthContext'; import { Agent } from '@atproto/api'; import './Verifier.css'; @@ -108,23 +108,6 @@ async function getPdsEndpoint(did) { } } -// --- Debounce Hook --- -function useDebounce(value, delay) { - const [debouncedValue, setDebouncedValue] = useState(value); - - useEffect(() => { - const handler = setTimeout(() => { - setDebouncedValue(value); - }, delay); - return () => { - clearTimeout(handler); - }; - }, [value, delay]); - - return debouncedValue; -} -// --- End Debounce Hook --- - // Renamed component to Verifier function Verifier() { // Use the main app's AuthContext @@ -152,15 +135,6 @@ function Verifier() { const [networkStatusMessage, setNetworkStatusMessage] = useState(''); const [officialVerifiersStatus, setOfficialVerifiersStatus] = useState({}); - // --- Autocomplete State --- - const [suggestions, setSuggestions] = useState([]); - const [isFetchingSuggestions, setIsFetchingSuggestions] = useState(false); - const [showSuggestions, setShowSuggestions] = useState(false); - const debouncedSearchTerm = useDebounce(targetHandle, 300); - const suggestionsRef = useRef(null); - const inputRef = useRef(null); - // --- End Autocomplete State --- - useEffect(() => { if (session) { const agentInstance = new Agent(session); @@ -527,48 +501,6 @@ function Verifier() { } }, [session, checkOfficialVerification]); - const fetchSuggestions = useCallback(async (query) => { - if (!query || query.trim().length < 2) { - setSuggestions([]); - return; - } - setIsFetchingSuggestions(true); - try { - // *** Use direct fetch *** - const url = new URL('https://public.api.bsky.app/xrpc/app.bsky.actor.searchActorsTypeahead'); - url.searchParams.append('q', query); - url.searchParams.append('limit', '5'); - const response = await fetch(url.toString()); - if (!response.ok) throw new Error(`Suggestions fetch failed: ${response.status}`); - const data = await response.json(); - setSuggestions(data.actors || []); - } catch (error) { - console.error('Failed to fetch suggestions:', error); - setSuggestions([]); - } finally { - setIsFetchingSuggestions(false); - } - }, []); - - useEffect(() => { - if (debouncedSearchTerm && showSuggestions) { - fetchSuggestions(debouncedSearchTerm); - } else if (!debouncedSearchTerm) { - setSuggestions([]); - } - }, [debouncedSearchTerm, fetchSuggestions, showSuggestions]); - - useEffect(() => { - function handleClickOutside(event) { - if (suggestionsRef.current && !suggestionsRef.current.contains(event.target) && - inputRef.current && !inputRef.current.contains(event.target)) { - setShowSuggestions(false); - } - } - document.addEventListener("mousedown", handleClickOutside); - return () => document.removeEventListener("mousedown", handleClickOutside); - }, [suggestionsRef, inputRef]); - const handleVerify = async (e) => { e.preventDefault(); if (!agent || !session) return; @@ -576,7 +508,6 @@ function Verifier() { setIsVerifying(true); setStatusMessage(`Verifying ${targetHandle}...`); setRevokeStatusMessage(''); - setShowSuggestions(false); try { const profileRes = await agent.api.app.bsky.actor.getProfile({ actor: targetHandle }); const targetDid = profileRes.data.did; @@ -633,13 +564,6 @@ function Verifier() { } }; - const handleSuggestionClick = (handle) => { - setTargetHandle(handle); - setSuggestions([]); - setShowSuggestions(false); - inputRef.current?.focus(); - }; - // Handle loading and error states if (isAuthLoading) return
Loading authentication...
; if (authError) returnAuthentication Error: {authError}. Please login.
; @@ -674,7 +598,10 @@ function Verifier() { With Bluesky's new decentralized verification system, anyone can verify anyone else and any Bluesky client can choose which accounts to treat as "Trusted Verifiers".- Try verifying an account for yourself or check to see who has verified you! It's as simple as creating a verification record in your PDS that points to the account you want to verify. + Try verifying an account for yourself or check to see who has verified you! It's as simple as creating a verification record in your PDS that points to the account you want to verify. The record looks like this: +
++ app.bsky.graph.verification
@@ -684,16 +611,9 @@ function Verifier() {Enter the handle of the user you want to verify (e.g., targetuser.bsky.social):
- {showSuggestions && (suggestions.length > 0 || isFetchingSuggestions) && ( -