add @ symbol and profile pic to login input

Created HandleInput component:
- Shows @ symbol by default
- Replaces @ with profile pic when handle selected from typeahead
- Extracts avatar from typeahead data-avatar or actor-select event
- Clears avatar when input is cleared

src/components/login/HandleInput.tsx

···
+import { forwardRef, useState, useEffect } from "react";
+import { AtSign } from "lucide-react";
+
+interface HandleInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  error?: boolean;
+  selectedAvatar?: string | null;
+}
+
+const HandleInput = forwardRef<HTMLInputElement, HandleInputProps>(
+  ({ error, selectedAvatar, className, ...props }, ref) => {
+    const [showAvatar, setShowAvatar] = useState(false);
+
+    useEffect(() => {
+      // Show avatar when one is selected
+      if (selectedAvatar) {
+        setShowAvatar(true);
+      } else {
+        setShowAvatar(false);
+      }
+    }, [selectedAvatar]);
+
+    return (
+      <div className="relative">
+        {/* @ symbol or Profile pic */}
+        <div className="absolute left-3 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 pointer-events-none z-10">
+          {showAvatar && selectedAvatar ? (
+            <img
+              src={selectedAvatar}
+              alt="Selected profile"
+              className="w-8 h-8 rounded-full object-cover border-2 border-cyan-500/50 dark:border-purple-500/50"
+            />
+          ) : (
+            <AtSign className="w-5 h-5 text-purple-750/60 dark:text-cyan-250/60" />
+          )}
+        </div>
+
+        {/* Input field */}
+        <input
+          ref={ref}
+          type="text"
+          className={`w-full pl-14 pr-4 py-3 bg-purple-50/50 dark:bg-slate-900/50 border-2 rounded-xl text-purple-900 dark:text-cyan-100 placeholder-purple-750/80 dark:placeholder-cyan-250/80 focus:outline-none focus:ring-2 transition-all ${
+            error
+              ? "border-red-500 focus:ring-red-500"
+              : "border-cyan-500/50 dark:border-purple-500/30 focus:ring-orange-500 dark:focus:ring-amber-400 focus:border-transparent"
+          } ${className || ""}`}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+
+HandleInput.displayName = "HandleInput";
+
+export default HandleInput;

src/pages/Login.tsx

···
 import HeroSection from "../components/login/HeroSection";
 import ValuePropsSection from "../components/login/ValuePropsSection";
 import HowItWorksSection from "../components/login/HowItWorksSection";
+import HandleInput from "../components/login/HandleInput";
 
 interface LoginPageProps {
   onSubmit: (handle: string) => void;
···
   const inputRef = useRef<HTMLInputElement>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [strippedAtMessage, setStrippedAtMessage] = useState(false);
+  const [selectedAvatar, setSelectedAvatar] = useState<string | null>(null);
 
   const { fields, setValue, validate, getFieldProps } = useFormValidation({
     handle: "",
   });
 
-  // Sync typeahead selection with form state
+  // Sync typeahead selection with form state and extract avatar
   useEffect(() => {
     const input = inputRef.current;
     if (!input) return;
···
         }
       }
 
+      // Check if typeahead has selection data (avatar)
+      const typeaheadElement = input.closest("actor-typeahead");
+      if (typeaheadElement) {
+        const avatar = typeaheadElement.getAttribute("data-avatar");
+        if (avatar) {
+          setSelectedAvatar(avatar);
+        } else if (value === "") {
+          // Clear avatar when input is cleared
+          setSelectedAvatar(null);
+        }
+      }
+
       // Update form state
       setValue("handle", value);
     };
···
     input.addEventListener("change", handleInputChange);
     input.addEventListener("blur", handleInputChange);
 
+    // Also listen for custom typeahead selection event if it exists
+    const handleSelection = (e: Event) => {
+      const customEvent = e as CustomEvent;
+      if (customEvent.detail?.avatar) {
+        setSelectedAvatar(customEvent.detail.avatar);
+      }
+    };
+    input.addEventListener("actor-select", handleSelection as EventListener);
+
     return () => {
       input.removeEventListener("input", handleInputChange);
       input.removeEventListener("change", handleInputChange);
       input.removeEventListener("blur", handleInputChange);
+      input.removeEventListener("actor-select", handleSelection as EventListener);
     };
   }, [setValue, strippedAtMessage]);
 
···
                 >
                   <div>
                     <actor-typeahead rows={5}>
-                      <input
+                      <HandleInput
                         ref={inputRef}
                         id="atproto-handle"
-                        type="text"
                         {...getFieldProps("handle")}
                         placeholder="username.bsky.social"
-                        className={`w-full px-4 py-3 bg-purple-50/50 dark:bg-slate-900/50 border-2 rounded-xl text-purple-900 dark:text-cyan-100 placeholder-purple-750/80 dark:placeholder-cyan-250/80 focus:outline-none focus:ring-2 transition-all ${
-                          fields.handle.touched && fields.handle.error
-                            ? "border-red-500 focus:ring-red-500"
-                            : "border-cyan-500/50 dark:border-purple-500/30 focus:ring-orange-500 dark:focus:ring-amber-400 focus:border-transparent"
-                        }`}
+                        error={fields.handle.touched && !!fields.handle.error}
+                        selectedAvatar={selectedAvatar}
                         aria-required="true"
                         aria-invalid={
                           fields.handle.touched && !!fields.handle.error