Autofocus inputs (#486)

components/custom/auth-form.tsx

@@ -30,6 +30,7 @@ export function AuthForm({
           placeholder="user@acme.com"
           autoComplete="email"
           required
+          autoFocus
           defaultValue={defaultEmail}
         />
 

components/custom/multimodal-input.tsx

@@ -254,6 +254,7 @@ export function MultimodalInput({
           className
         )}
         rows={3}
+        autoFocus
         onKeyDown={(event) => {
           if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();

components/custom/submit-button.tsx

@@ -1,18 +1,19 @@
-"use client";
+'use client';
 
-import { useFormStatus } from "react-dom";
+import { useFormStatus } from 'react-dom';
 
-import { LoaderIcon } from "@/components/custom/icons";
+import { LoaderIcon } from '@/components/custom/icons';
 
-import { Button } from "../ui/button";
+import { Button } from '../ui/button';
 
 export function SubmitButton({ children }: { children: React.ReactNode }) {
   const { pending } = useFormStatus();
 
   return (
     <Button
-      type={pending ? "button" : "submit"}
+      type={pending ? 'button' : 'submit'}
       aria-disabled={pending}
+      disabled={pending}
       className="relative"
     >
       {children}
@@ -22,7 +23,7 @@ export function SubmitButton({ children }: { children: React.ReactNode }) {
         </span>
       )}
       <span aria-live="polite" className="sr-only" role="status">
-        {pending ? "Loading" : "Submit form"}
+        {pending ? 'Loading' : 'Submit form'}
       </span>
     </Button>
   );