fix: better focusing

app/desktop/components/settings/AddAccountDialog.tsx

@@ -13,7 +13,7 @@ import { formatQueryError } from '~/api/utils/misc';
 
 import { getProfile, getProfileKey } from '~/api/queries/get-profile';
 
-import { model } from '~/utils/input';
+import { model, mutationAutofocus, refs } from '~/utils/input';
 
 import { closeModal, openModal, useModalState } from '~/com/globals/modals';
 
@@ -153,10 +153,7 @@ const AddAccountDialog = () => {
 											Bluesky handle, DID or email address
 										</span>
 										<input
-											ref={(node) => {
-												model(identifier, setIdentifier)(node);
-												setTimeout(() => node.focus(), 1);
-											}}
+											ref={refs(model(identifier, setIdentifier), mutationAutofocus(pdsMutation))}
 											name="username"
 											type="text"
 											required
@@ -274,17 +271,7 @@ const AddAccountDialog = () => {
 									<label class="block">
 										<span class="mb-2 block text-sm font-medium leading-6 text-primary">Password</span>
 										<input
-											ref={(node) => {
-												model(password, setPassword)(node);
-
-												createEffect((first) => {
-													if (loginMutation.isError || first) {
-														node.focus();
-													}
-
-													return false;
-												}, true);
-											}}
+											ref={refs(model(password, setPassword), mutationAutofocus(loginMutation))}
 											type="password"
 											required
 											placeholder="Password"

app/desktop/components/settings/ChooseServiceDialog.tsx

@@ -1,12 +1,12 @@
-import { createEffect, createSignal } from 'solid-js';
+import { createSignal } from 'solid-js';
 
 import { Agent } from '@externdefs/bluesky-client/agent';
 import { createMutation } from '@pkg/solid-query';
 
 import { type DataServer, DEFAULT_DATA_SERVERS } from '~/api/globals/defaults';
 import { formatQueryError } from '~/api/utils/misc';
 
-import { createRadioModel, model } from '~/utils/input';
+import { createRadioModel, model, mutationAutofocus, refs } from '~/utils/input';
 import { getUniqueId } from '~/utils/misc';
 
 import { closeModal } from '~/com/globals/modals';
@@ -115,14 +115,10 @@ const ChooseServiceDialog = (props: ChooseServiceDialogProps) => {
 									</fieldset>
 
 									<input
-										ref={(node) => {
-											model(serviceUri, setServiceUri)(node);
-											createEffect(() => {
-												if (pdsMutation.isError) {
-													node.focus();
-												}
-											});
-										}}
+										ref={refs(
+											model(serviceUri, setServiceUri),
+											mutationAutofocus(pdsMutation, !initialIsDefault),
+										)}
 										type="url"
 										required={chosen() === Chosen.CUSTOM}
 										class={/* @once */ Input({ class: 'pl-9' })}

app/utils/input.ts

@@ -1,5 +1,15 @@
 import { type Accessor, createEffect } from 'solid-js';
 
+import type { CreateMutationResult } from '@pkg/solid-query';
+
+export const refs = <T>(...fns: Array<(node: T) => void>) => {
+	return (node: T) => {
+		for (let idx = 0, len = fns.length; idx < len; idx++) {
+			(0, fns[idx])(node);
+		}
+	};
+};
+
 export const model = (getter: Accessor<string>, setter: (next: string) => void) => {
 	return (node: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) => {
 		createEffect(() => {
@@ -60,3 +70,21 @@ export const createMultipleChoiceModel = <T>(getter: Accessor<T[]>, setter: (nex
 		};
 	};
 };
+
+export const autofocus = (node: HTMLInputElement) => {
+	createEffect(() => {
+		node.focus();
+	});
+};
+
+export const mutationAutofocus = (mutation: CreateMutationResult<any, any, any, any>, first = true) => {
+	return (node: HTMLInputElement) => {
+		createEffect((first) => {
+			if (mutation.isError || first) {
+				node.focus();
+			}
+
+			return false;
+		}, first);
+	};
+};