add actor typeahead <3

package-lock.json

···
         "@icons-pack/react-simple-icons": "^13.8.0",
         "@neondatabase/serverless": "^1.0.2",
         "@netlify/functions": "^4.2.7",
+        "actor-typeahead": "^0.1.2",
         "cookie": "^1.0.2",
         "jose": "^6.1.0",
         "jszip": "^3.10.1",
···
       "peerDependencies": {
         "acorn": "^8"
       }
+    },
+    "node_modules/actor-typeahead": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/actor-typeahead/-/actor-typeahead-0.1.2.tgz",
+      "integrity": "sha512-I97YqqNl7Kar0J/bIJvgY/KmHpssHcDElhfwVTLP7wRFlkxso2ZLBqiS2zol5A8UVUJbQK2JXYaqNpZXz8Uk2A==",
+      "license": "MPL-2.0"
     },
     "node_modules/agent-base": {
       "version": "7.1.4",

package.json

···
     "@icons-pack/react-simple-icons": "^13.8.0",
     "@neondatabase/serverless": "^1.0.2",
     "@netlify/functions": "^4.2.7",
+    "actor-typeahead": "^0.1.2",
     "cookie": "^1.0.2",
     "jose": "^6.1.0",
     "jszip": "^3.10.1",

src/index.css

···
     );
     animation: svg-glow-right 3s ease-in-out infinite 0.5s; /* offset timing */
 }
+
+/* Actor typeahead */
+actor-typeahead {
+    --color-background: rgb(249 250 251 / 1);
+    --color-border: rgb(6 182 212 / 0.5);
+    --color-shadow: rgb(88 28 135);
+    --color-hover: rgb(6 182 212 / 0.1);
+    --color-avatar-fallback: rgb(6 182 212 / 0.2);
+    --radius: 0.75rem;
+    --padding-menu: 0.5rem;
+}
+
+.dark actor-typeahead {
+    --color-background: rgb(15 23 42 / 1);
+    --color-border: rgb(126 34 206 / 0.3);
+    --color-shadow: rgb(0 0 0);
+    --color-hover: rgb(126 34 206 / 0.2);
+    --color-avatar-fallback: rgb(126 34 206 / 0.2);
+}

src/pages/Login.tsx

···
-import { useState } from "react";
+import { useState, useRef } from "react";
+import "actor-typeahead";
 import { Heart, Upload, Search, ArrowRight } from "lucide-react";
 import FireflyLogo from "../assets/at-firefly-logo.svg?react";
 
···
   reducedMotion = false,
 }: LoginPageProps) {
   const [handle, setHandle] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    onSubmit(handle);
+    // Get the value directly from the input instead of state
+    const currentHandle = inputRef.current?.value || handle;
+    onSubmit(currentHandle);
   };
 
   return (
···
                     >
                       Your ATmosphere Handle
                     </label>
-                    <input
-                      id="atproto-handle"
-                      type="text"
-                      value={handle}
-                      onChange={(e) => setHandle(e.target.value)}
-                      placeholder="yourname.bsky.social"
-                      className="w-full px-4 py-3 bg-purple-50/50 dark:bg-slate-900/50 border-2 border-cyan-500/50 dark:border-purple-500/30 rounded-xl text-purple-900 dark:text-cyan-100 placeholder-purple-750/80 dark:placeholder-cyan-250/80 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-amber-400 focus:border-transparent transition-all"
-                      aria-required="true"
-                      aria-describedby="handle-description"
-                    />
-                    {/*<p
-                      id="handle-description"
-                      className="text-xs text-slate-600 dark:text-slate-400 mt-2"
-                    >
-                      Enter your full ATmosphere handle (e.g.,
-                      username.bsky.social or yourname.com)
-                    </p>*/}
+                    <actor-typeahead rows={5}>
+                      <input
+                        ref={inputRef}
+                        id="atproto-handle"
+                        type="text"
+                        defaultValue={handle}
+                        onInput={(e) =>
+                          setHandle((e.target as HTMLInputElement).value)
+                        }
+                        placeholder="yourname.bsky.social"
+                        className="w-full px-4 py-3 bg-purple-50/50 dark:bg-slate-900/50 border-2 border-cyan-500/50 dark:border-purple-500/30 rounded-xl text-purple-900 dark:text-cyan-100 placeholder-purple-750/80 dark:placeholder-cyan-250/80 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-amber-400 focus:border-transparent transition-all"
+                        aria-required="true"
+                        aria-describedby="handle-description"
+                      />
+                    </actor-typeahead>
                   </div>
 
                   <button
···
                         Secure OAuth Connection
                       </p>
                       <p className="text-xs mt-1">
-                        We use official AT Protocol OAuth. We never see your
+                        We use official AT Protocol OAuth. You will be directed
+                        to your account to authorize access. We never see your
                         password and you can revoke access anytime.
                       </p>
                     </div>

src/types/actor-typeahead.d.ts

···
+import "react";
+
+// uses npm install actor-typeahead
+// from https://tangled.org/jakelazaroff.com/actor-typeahead <3
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "actor-typeahead": React.DetailedHTMLProps<
+        {
+          host?: string;
+          rows?: number;
+          children?: React.ReactNode;
+        },
+        HTMLElement
+      >;
+    }
+  }
+}