From ca7349a1a8257d2271d0a44cd414df0cdfd596b1 Mon Sep 17 00:00:00 2001
From: Jack Kingsman <jack.kingsman@gmail.com>
Date: Mon, 6 Apr 2026 21:59:46 -0700
Subject: [PATCH] Add autofocus to text boxes

---
 frontend/src/App.tsx                          |  18 +-
 frontend/src/components/MessageInput.tsx      |   4 +
 frontend/src/components/RepeaterLogin.tsx     |   3 +-
 .../settings/SettingsLocalSection.tsx         | 228 ++++++++++--------
 .../src/test/useConversationActions.test.ts   |   2 +-
 frontend/src/utils/autoFocusInput.ts          |  31 +++
 6 files changed, 178 insertions(+), 108 deletions(-)
 create mode 100644 frontend/src/utils/autoFocusInput.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b33739c..c6a2ab9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -25,7 +25,8 @@ import { DistanceUnitProvider } from './contexts/DistanceUnitContext';
 import { messageContainsMention } from './utils/messageParser';
 import { getStateKey } from './utils/conversationState';
 import type { BulkCreateHashtagChannelsResult, Conversation, Message, RawPacket } from './types';
-import { CONTACT_TYPE_ROOM } from './types';
+import { CONTACT_TYPE_REPEATER, CONTACT_TYPE_ROOM } from './types';
+import { shouldAutoFocusInput } from './utils/autoFocusInput';
 
 interface ChannelUnreadMarker {
   channelId: string;
@@ -296,6 +297,21 @@ export function App() {
   } = useConversationMessages(activeConversation, targetMessageId);
   removeConversationMessagesRef.current = removeConversationMessages;
 
+  // Auto-focus the message input on conversation change (desktop only by default)
+  useEffect(() => {
+    if (!activeConversation) return;
+    if (activeConversation.type !== 'channel' && activeConversation.type !== 'contact') return;
+    // Repeaters show a login form, not a message input
+    if (activeConversation.type === 'contact') {
+      const contact = contacts.find((c) => c.public_key === activeConversation.id);
+      if (contact?.type === CONTACT_TYPE_REPEATER) return;
+    }
+    if (!shouldAutoFocusInput()) return;
+    // Defer to let the input mount/render first
+    const raf = requestAnimationFrame(() => messageInputRef.current?.focus?.());
+    return () => cancelAnimationFrame(raf);
+  }, [activeConversation?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // Room servers replay stored history as a burst of DMs, all arriving with similar received_at
   // but spanning a wide range of sender_timestamps. Sort by sender_timestamp for room contacts
   // so the display reflects the original send order rather than our radio's receipt order.
diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
index bde9c44..86721e2 100644
--- a/frontend/src/components/MessageInput.tsx
+++ b/frontend/src/components/MessageInput.tsx
@@ -44,6 +44,7 @@ type LimitState = 'normal' | 'warning' | 'danger' | 'error';
 
 export interface MessageInputHandle {
   appendText: (text: string) => void;
+  focus: () => void;
 }
 
 export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(function MessageInput(
@@ -60,6 +61,9 @@ export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(fu
       // Focus the input after appending
       inputRef.current?.focus();
     },
+    focus: () => {
+      inputRef.current?.focus();
+    },
   }));
 
   // Calculate character limits based on conversation type
diff --git a/frontend/src/components/RepeaterLogin.tsx b/frontend/src/components/RepeaterLogin.tsx
index bd85462..dc7920a 100644
--- a/frontend/src/components/RepeaterLogin.tsx
+++ b/frontend/src/components/RepeaterLogin.tsx
@@ -2,6 +2,7 @@ import { useCallback, type FormEvent } from 'react';
 import { Input } from './ui/input';
 import { Button } from './ui/button';
 import { Checkbox } from './ui/checkbox';
+import { shouldAutoFocusInput } from '../utils/autoFocusInput';
 
 interface RepeaterLoginProps {
   repeaterName: string;
@@ -64,7 +65,7 @@ export function RepeaterLogin({
             placeholder={passwordPlaceholder}
             aria-label="Repeater password"
             disabled={loading}
-            autoFocus
+            autoFocus={shouldAutoFocusInput()}
           />
 
           <label
diff --git a/frontend/src/components/settings/SettingsLocalSection.tsx b/frontend/src/components/settings/SettingsLocalSection.tsx
index 9cb65b8..29aab85 100644
--- a/frontend/src/components/settings/SettingsLocalSection.tsx
+++ b/frontend/src/components/settings/SettingsLocalSection.tsx
@@ -27,6 +27,7 @@ import {
   getSavedFontScale,
   setSavedFontScale,
 } from '../../utils/fontScale';
+import { getAutoFocusInputEnabled, setAutoFocusInputEnabled } from '../../utils/autoFocusInput';
 
 export function SettingsLocalSection({
   onLocalLabelChange,
@@ -48,6 +49,7 @@ export function SettingsLocalSection({
   });
   const [localLabelText, setLocalLabelText] = useState(() => getLocalLabel().text);
   const [localLabelColor, setLocalLabelColor] = useState(() => getLocalLabel().color);
+  const [autoFocusInput, setAutoFocusInput] = useState(getAutoFocusInputEnabled);
   const [fontScale, setFontScale] = useState(getSavedFontScale);
   const [fontScaleSlider, setFontScaleSlider] = useState(getSavedFontScale);
   const [fontScaleInput, setFontScaleInput] = useState(() => String(getSavedFontScale()));
@@ -129,85 +131,6 @@ export function SettingsLocalSection({
 
       <Separator />
 
-      <div className="space-y-3">
-        <Label htmlFor="font-scale-input">Relative Font Size</Label>
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-          <input
-            type="range"
-            min={MIN_FONT_SCALE}
-            max={MAX_FONT_SCALE}
-            step={FONT_SCALE_SLIDER_STEP}
-            value={fontScaleSlider}
-            onChange={(event) => handleSliderChange(Number(event.target.value))}
-            onMouseUp={(event) => handleSliderCommit(Number(event.currentTarget.value))}
-            onTouchEnd={(event) => handleSliderCommit(Number(event.currentTarget.value))}
-            onKeyUp={(event) => handleSliderCommit(Number(event.currentTarget.value))}
-            onBlur={(event) => handleSliderCommit(Number(event.currentTarget.value))}
-            aria-label="Relative font size slider"
-            className="w-full accent-primary sm:flex-1"
-          />
-          <div className="flex items-center gap-2 sm:w-40">
-            <Input
-              id="font-scale-input"
-              type="number"
-              inputMode="decimal"
-              min={MIN_FONT_SCALE}
-              max={MAX_FONT_SCALE}
-              step="any"
-              value={fontScaleInput}
-              onChange={(event) => {
-                const nextValue = event.target.value;
-                setFontScaleInput(nextValue);
-
-                if (nextValue === '') {
-                  return;
-                }
-
-                if (event.target.validity.valid && Number.isFinite(event.target.valueAsNumber)) {
-                  commitFontScale(event.target.valueAsNumber);
-                }
-              }}
-              onBlur={() => {
-                const parsed = Number.parseFloat(fontScaleInput);
-                if (!Number.isFinite(parsed)) {
-                  restoreFontScaleInput();
-                  return;
-                }
-                commitFontScale(parsed);
-              }}
-              onKeyDown={(event) => {
-                if (event.key !== 'Enter') {
-                  return;
-                }
-                event.preventDefault();
-                const parsed = Number.parseFloat(fontScaleInput);
-                if (!Number.isFinite(parsed)) {
-                  restoreFontScaleInput();
-                  return;
-                }
-                commitFontScale(parsed);
-              }}
-              aria-label="Relative font size percentage"
-            />
-            <span className="text-sm text-muted-foreground">%</span>
-          </div>
-          <button
-            type="button"
-            onClick={() => commitFontScale(DEFAULT_FONT_SCALE)}
-            className="inline-flex h-9 items-center justify-center rounded-md border border-input px-3 text-sm font-medium transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-            disabled={fontScale === DEFAULT_FONT_SCALE}
-          >
-            Reset
-          </button>
-        </div>
-        <p className="text-xs text-muted-foreground">
-          Scales the app&apos;s typography for this browser only. The slider moves in 5% steps; the
-          number field accepts any value from 25% to 400%.
-        </p>
-      </div>
-
-      <Separator />
-
       <div className="space-y-3">
         <Label htmlFor="distance-units">Distance Units</Label>
         <select
@@ -233,33 +156,128 @@ export function SettingsLocalSection({
 
       <Separator />
 
-      <label className="flex items-center gap-3 cursor-pointer">
-        <input
-          type="checkbox"
-          checked={reopenLastConversation}
-          onChange={(e) => handleToggleReopenLastConversation(e.target.checked)}
-          className="w-4 h-4 rounded border-input accent-primary"
-        />
-        <span className="text-sm">Reopen to last viewed channel/conversation</span>
-      </label>
+      <div className="space-y-3">
+        <Label>UI Tweaks</Label>
 
-      <label className="flex items-center gap-3 cursor-pointer">
-        <input
-          type="checkbox"
-          checked={darkMap}
-          onChange={(e) => {
-            const v = e.target.checked;
-            setDarkMap(v);
-            try {
-              localStorage.setItem('remoteterm-dark-map', String(v));
-            } catch {
-              // localStorage may be disabled
-            }
-          }}
-          className="w-4 h-4 rounded border-input accent-primary"
-        />
-        <span className="text-sm">Dark mode map tiles</span>
-      </label>
+        <label className="flex items-center gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={reopenLastConversation}
+            onChange={(e) => handleToggleReopenLastConversation(e.target.checked)}
+            className="w-4 h-4 rounded border-input accent-primary"
+          />
+          <span className="text-sm">Reopen to last viewed channel/conversation</span>
+        </label>
+
+        <label className="flex items-center gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={darkMap}
+            onChange={(e) => {
+              const v = e.target.checked;
+              setDarkMap(v);
+              try {
+                localStorage.setItem('remoteterm-dark-map', String(v));
+              } catch {
+                // localStorage may be disabled
+              }
+            }}
+            className="w-4 h-4 rounded border-input accent-primary"
+          />
+          <span className="text-sm">Dark mode map tiles</span>
+        </label>
+
+        <label className="flex items-center gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={autoFocusInput}
+            onChange={(e) => {
+              const v = e.target.checked;
+              setAutoFocusInput(v);
+              setAutoFocusInputEnabled(v);
+            }}
+            className="w-4 h-4 rounded border-input accent-primary"
+          />
+          <span className="text-sm">Auto-focus input on conversation load (desktop only)</span>
+        </label>
+
+        <div className="space-y-3">
+          <Label htmlFor="font-scale-input">Relative Font Size</Label>
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+            <input
+              type="range"
+              min={MIN_FONT_SCALE}
+              max={MAX_FONT_SCALE}
+              step={FONT_SCALE_SLIDER_STEP}
+              value={fontScaleSlider}
+              onChange={(event) => handleSliderChange(Number(event.target.value))}
+              onMouseUp={(event) => handleSliderCommit(Number(event.currentTarget.value))}
+              onTouchEnd={(event) => handleSliderCommit(Number(event.currentTarget.value))}
+              onKeyUp={(event) => handleSliderCommit(Number(event.currentTarget.value))}
+              onBlur={(event) => handleSliderCommit(Number(event.currentTarget.value))}
+              aria-label="Relative font size slider"
+              className="w-full accent-primary sm:flex-1"
+            />
+            <div className="flex items-center gap-2 sm:w-40">
+              <Input
+                id="font-scale-input"
+                type="number"
+                inputMode="decimal"
+                min={MIN_FONT_SCALE}
+                max={MAX_FONT_SCALE}
+                step="any"
+                value={fontScaleInput}
+                onChange={(event) => {
+                  const nextValue = event.target.value;
+                  setFontScaleInput(nextValue);
+
+                  if (nextValue === '') {
+                    return;
+                  }
+
+                  if (event.target.validity.valid && Number.isFinite(event.target.valueAsNumber)) {
+                    commitFontScale(event.target.valueAsNumber);
+                  }
+                }}
+                onBlur={() => {
+                  const parsed = Number.parseFloat(fontScaleInput);
+                  if (!Number.isFinite(parsed)) {
+                    restoreFontScaleInput();
+                    return;
+                  }
+                  commitFontScale(parsed);
+                }}
+                onKeyDown={(event) => {
+                  if (event.key !== 'Enter') {
+                    return;
+                  }
+                  event.preventDefault();
+                  const parsed = Number.parseFloat(fontScaleInput);
+                  if (!Number.isFinite(parsed)) {
+                    restoreFontScaleInput();
+                    return;
+                  }
+                  commitFontScale(parsed);
+                }}
+                aria-label="Relative font size percentage"
+              />
+              <span className="text-sm text-muted-foreground">%</span>
+            </div>
+            <button
+              type="button"
+              onClick={() => commitFontScale(DEFAULT_FONT_SCALE)}
+              className="inline-flex h-9 items-center justify-center rounded-md border border-input px-3 text-sm font-medium transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+              disabled={fontScale === DEFAULT_FONT_SCALE}
+            >
+              Reset
+            </button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Scales the app&apos;s typography for this browser only. The slider moves in 5% steps;
+            the number field accepts any value from 25% to 400%.
+          </p>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/test/useConversationActions.test.ts b/frontend/src/test/useConversationActions.test.ts
index c3140db..3ea6ecc 100644
--- a/frontend/src/test/useConversationActions.test.ts
+++ b/frontend/src/test/useConversationActions.test.ts
@@ -65,7 +65,7 @@ function createArgs(overrides: Partial<Parameters<typeof useConversationActions>
     setContacts: vi.fn(),
     setChannels: vi.fn(),
     observeMessage: vi.fn(() => ({ added: true, activeConversation: true })),
-    messageInputRef: { current: { appendText: vi.fn() } },
+    messageInputRef: { current: { appendText: vi.fn(), focus: vi.fn() } },
     ...overrides,
   };
 }
diff --git a/frontend/src/utils/autoFocusInput.ts b/frontend/src/utils/autoFocusInput.ts
new file mode 100644
index 0000000..466d7ed
--- /dev/null
+++ b/frontend/src/utils/autoFocusInput.ts
@@ -0,0 +1,31 @@
+const KEY = 'remoteterm-auto-focus-input';
+
+export function getAutoFocusInputEnabled(): boolean {
+  try {
+    const raw = localStorage.getItem(KEY);
+    return raw === null || raw !== 'false';
+  } catch {
+    return true;
+  }
+}
+
+export function setAutoFocusInputEnabled(enabled: boolean): void {
+  try {
+    if (enabled) {
+      localStorage.removeItem(KEY);
+    } else {
+      localStorage.setItem(KEY, 'false');
+    }
+  } catch {
+    // localStorage may be unavailable
+  }
+}
+
+/**
+ * Returns true when auto-focus should fire: the setting is enabled
+ * AND the viewport is wide enough that focusing won't summon a
+ * mobile keyboard (matches the md: Tailwind breakpoint).
+ */
+export function shouldAutoFocusInput(): boolean {
+  return getAutoFocusInputEnabled() && window.innerWidth >= 768;
+}