wrap inputs in real forms, so enter submits instead of doing nothing

24 panel and screen files had their fields sitting in a <div> instead of a
<form> — typing a value and pressing Enter did nothing, and the button was
the only way in. Fixed the sites that are a real form, a single field with
an obvious action, or a multi-field editor; left search/filter boxes and a
few genuinely ambiguous sites alone (see TODO.md for the full breakdown).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/apps/officer-web/Screens/Dashboard/Settings/IntegrationsSettings/ApiKeys.tsx

@@ -1,3 +1,4 @@
+import type { FormEvent } from 'react';
 import { useState } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
@@ -61,7 +62,8 @@ export const ApiKeys = () => {
 
   const refresh = () => queryClient.invalidateQueries({ queryKey: API_KEYS_QUERY_KEY });
 
-  const create = async () => {
+  const create = async (ev?: FormEvent) => {
+    ev?.preventDefault();
     const trimmed = name.trim();
     if (!trimmed || isCreating) return;
     setIsCreating(true);
@@ -130,22 +132,21 @@ export const ApiKeys = () => {
         </div>
       )}
 
-      <div className="flex items-end gap-2">
+      <form onSubmit={create} className="flex items-end gap-2">
         <Label className="grid flex-1 gap-2">
           <span className="text-duck-dark/70 dark:text-foreground/70">New key</span>
           <Input
             className="h-11 bg-background/60 border-duck-dark/20"
             value={name}
             onChange={(ev) => setName(ev.target.value)}
-            onKeyDown={(ev) => ev.key === 'Enter' && create()}
             placeholder="iPhone, Music app, laptop CLI…"
           />
         </Label>
-        <Button onClick={create} disabled={!name.trim() || isCreating} className="h-11">
+        <Button type="submit" disabled={!name.trim() || isCreating} className="h-11">
           <Plus className="mr-1.5 h-4 w-4" />
           Create
         </Button>
-      </div>
+      </form>
 
       {keys.length === 0 ? (
         <div className="rounded-lg border border-dashed border-duck-dark/15 dark:border-foreground/15 p-6 text-center text-sm text-duck-dark/40 dark:text-foreground/40">

src/apps/officer-web/Screens/Dashboard/Settings/IntegrationsSettings/ApifyConfig.tsx

@@ -1,3 +1,4 @@
+import type { FormEvent } from 'react';
 import { useState, useEffect } from 'react';
 import { toast } from 'sonner';
 import { Input } from '@/components/ui/input';
@@ -31,7 +32,8 @@ export const ApifyConfig = () => {
       .finally(() => setIsLoading(false));
   }, []);
 
-  const handleSave = async () => {
+  const handleSave = async (ev?: FormEvent) => {
+    ev?.preventDefault();
     if (isSaving) return;
     setIsSaving(true);
     try {
@@ -60,7 +62,7 @@ export const ApifyConfig = () => {
         </div>
       )}
 
-      <div className="grid gap-5">
+      <form onSubmit={handleSave} className="grid gap-5">
         <Label className="grid gap-2">
           <span className="text-duck-dark/70 dark:text-foreground/70">API Token</span>
           <Input
@@ -84,14 +86,13 @@ export const ApifyConfig = () => {
         </Label>
 
         <Button
-          type="button"
-          onClick={handleSave}
+          type="submit"
           disabled={isSaving || !apiToken.trim()}
           className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
         >
           {isSaving ? 'Saving...' : 'Save'}
         </Button>
-      </div>
+      </form>
     </div>
   );
 };

src/apps/officer-web/Screens/Dashboard/Settings/IntegrationsSettings/DavAppPasswords.tsx

@@ -1,3 +1,4 @@
+import type { FormEvent } from 'react';
 import { useState, useEffect, useCallback } from 'react';
 import { toast } from 'sonner';
 import { Copy, Trash2, Ban, Plus, Smartphone } from 'lucide-react';
@@ -59,7 +60,8 @@ export const DavAppPasswords = () => {
 
   useEffect(load, [load]);
 
-  const create = async () => {
+  const create = async (ev?: FormEvent) => {
+    ev?.preventDefault();
     const trimmed = label.trim();
     if (!trimmed || isCreating) return;
     setIsCreating(true);
@@ -142,22 +144,21 @@ export const DavAppPasswords = () => {
         </div>
       )}
 
-      <div className="flex items-end gap-2">
+      <form onSubmit={create} className="flex items-end gap-2">
         <Label className="grid flex-1 gap-2">
           <span className="text-duck-dark/70 dark:text-foreground/70">New device</span>
           <Input
             className="h-11 bg-background/60 border-duck-dark/20"
             value={label}
             onChange={(ev) => setLabel(ev.target.value)}
-            onKeyDown={(ev) => ev.key === 'Enter' && create()}
             placeholder="Pixel 9, iPad, Thunderbird…"
           />
         </Label>
-        <Button onClick={create} disabled={!label.trim() || isCreating} className="h-11">
+        <Button type="submit" disabled={!label.trim() || isCreating} className="h-11">
           <Plus className="mr-1.5 h-4 w-4" />
           Create
         </Button>
-      </div>
+      </form>
 
       {passwords.length === 0 ? (
         <div className="rounded-lg border border-dashed border-duck-dark/15 dark:border-foreground/15 p-6 text-center text-sm text-duck-dark/40 dark:text-foreground/40">

src/apps/officer-web/Screens/Dashboard/Settings/IntegrationsSettings/GoogleOAuthConfig.tsx

@@ -1,3 +1,4 @@
+import type { FormEvent } from 'react';
 import { useState, useEffect } from 'react';
 import { toast } from 'sonner';
 import { ChevronDown } from 'lucide-react';
@@ -266,7 +267,8 @@ export const GoogleOAuthConfig = () => {
     if (!isLoading && clientId && clientSecret) verify();
   }, [isLoading]);
 
-  const handleSave = async () => {
+  const handleSave = async (ev?: FormEvent) => {
+    ev?.preventDefault();
     if (isSaving) return;
     setIsSaving(true);
     try {
@@ -290,7 +292,7 @@ export const GoogleOAuthConfig = () => {
 
       <SetupGuide redirectUri={redirectUri} />
 
-      <div className="border-t border-duck-dark/10 dark:border-foreground/10 pt-5 grid gap-5">
+      <form onSubmit={handleSave} className="border-t border-duck-dark/10 dark:border-foreground/10 pt-5 grid gap-5">
         <Label className="grid gap-2">
           <span className="text-duck-dark/70 dark:text-foreground/70">Client ID</span>
           <Input
@@ -327,14 +329,13 @@ export const GoogleOAuthConfig = () => {
         </Label>
 
         <Button
-          type="button"
-          onClick={handleSave}
+          type="submit"
           disabled={isSaving || !clientId.trim() || !clientSecret.trim()}
           className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
         >
           {isSaving ? 'Saving...' : 'Save'}
         </Button>
-      </div>
+      </form>
     </div>
   );
 };