refactor(airtrail): share the AirTrail connection form between desktop and phone

Both settings shells now read their state, the save and test handlers and the canSave rule from one useAirTrailSettings hook and keep only their own markup.

client/src/mobile/screens/settings/MAirTrailConnectionSection.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { Plane, Save, RefreshCw } from 'lucide-react'
 import { useTranslation } from '../../../i18n'
-import { useToast } from '../../../components/shared/Toast'
-import { airtrailApi } from '../../../api/client'
+import { useAirTrailSettings } from '../../../components/Settings/useAirTrailSettings'
 import { MSetCard, MSetEyebrow, MSetRow, MSetInput, MSetButton, MSetHint } from './MSettingsUi'
 import MToggle from '../../components/MToggle'
 
@@ -14,68 +13,24 @@ import MToggle from '../../components/MToggle'
  */
 export default function MAirTrailConnectionSection(): React.ReactElement {
   const { t } = useTranslation()
-  const toast = useToast()
 
-  const [url, setUrl] = useState('')
-  const [apiKey, setApiKey] = useState('')
-  const [allowInsecureTls, setAllowInsecureTls] = useState(false)
-  const [writeEnabled, setWriteEnabled] = useState(false)
-  const [connected, setConnected] = useState(false)
-  const [loading, setLoading] = useState(true)
-  const [saving, setSaving] = useState(false)
-  const [testing, setTesting] = useState(false)
-
-  useEffect(() => {
-    airtrailApi
-      .getSettings()
-      .then(d => {
-        setUrl(d.url || '')
-        setAllowInsecureTls(!!d.allowInsecureTls)
-        setWriteEnabled(!!d.writeEnabled)
-        setConnected(!!d.connected)
-      })
-      .catch(() => {})
-      .finally(() => setLoading(false))
-  }, [])
-
-  // Send the key only when the user typed a new one — never prefilled, so a blank
-  // field means "keep the stored key".
-  const keyPayload = (): { apiKey?: string } => {
-    const k = apiKey.trim()
-    return k ? { apiKey: k } : {}
-  }
-
-  const handleSave = async () => {
-    setSaving(true)
-    try {
-      const d = await airtrailApi.saveSettings({ url: url.trim(), allowInsecureTls, writeEnabled, ...keyPayload() })
-      const status = await airtrailApi.status().catch(() => ({ connected: false }))
-      setConnected(!!status.connected)
-      setApiKey('')
-      if (d?.warning) toast.warning(d.warning)
-      else toast.success(t('settings.airtrail.toast.saved'))
-    } catch (err: any) {
-      toast.error(err?.response?.data?.error || t('settings.airtrail.toast.saveError'))
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const handleTest = async () => {
-    setTesting(true)
-    try {
-      const d = await airtrailApi.test({ url: url.trim(), allowInsecureTls, ...keyPayload() })
-      setConnected(!!d.connected)
-      if (d.connected) toast.success(t('settings.airtrail.test.success', { count: d.flightCount ?? 0 }))
-      else toast.error(d.error || t('settings.airtrail.test.failed'))
-    } catch {
-      toast.error(t('settings.airtrail.test.failed'))
-    } finally {
-      setTesting(false)
-    }
-  }
-
-  const canSave = !!url.trim() && (connected || !!apiKey.trim())
+  const {
+    url,
+    setUrl,
+    apiKey,
+    setApiKey,
+    allowInsecureTls,
+    toggleInsecureTls,
+    writeEnabled,
+    toggleWriteEnabled,
+    connected,
+    loading,
+    saving,
+    testing,
+    canSave,
+    handleSave,
+    handleTest,
+  } = useAirTrailSettings()
 
   return (
     <MSetCard title={t('settings.airtrail.title')} icon={Plane} className="mt-3">
@@ -104,7 +59,7 @@ export default function MAirTrailConnectionSection(): React.ReactElement {
           trailing={
             <MToggle
               checked={allowInsecureTls}
-              onChange={() => setAllowInsecureTls(v => !v)}
+              onChange={toggleInsecureTls}
               ariaLabel={t('settings.airtrail.allowInsecureTls')}
             />
           }
@@ -115,7 +70,7 @@ export default function MAirTrailConnectionSection(): React.ReactElement {
           trailing={
             <MToggle
               checked={writeEnabled}
-              onChange={() => setWriteEnabled(v => !v)}
+              onChange={toggleWriteEnabled}
               ariaLabel={t('settings.airtrail.writeBack')}
             />
           }