refactor: use the new input components

src/components/error-view.tsx

···
 import { formatQueryError } from '~/api/utils/error';
 
+import Button from '~/components/inputs/button';
+
 export interface ErrorViewProps {
 	error: unknown;
 	onRetry?: () => void;
···
 				<p class="text-gray-600">{formatQueryError(props.error)}</p>
 			</div>
 
-			<div class="empty:hidden">
-				{onRetry && (
-					<button
-						type="button"
-						onClick={onRetry}
-						class="flex h-9 items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700"
-					>
-						Try again
-					</button>
-				)}
-			</div>
+			<div class="empty:hidden">{onRetry && <Button onClick={onRetry}>Try again</Button>}</div>
 		</div>
 	);
 };

src/views/blob/blob-export.tsx

···
 import { makeAbortable } from '~/lib/utils/abortable';
 import { PromiseQueue } from '~/lib/utils/promise-queue';
 
+import Button from '~/components/inputs/button';
+import TextInput from '~/components/inputs/text-input';
 import Logger, { createLogger } from '~/components/logger';
 
 const BlobExportPage = () => {
···
 				class="m-4 flex flex-col gap-4"
 			>
 				<fieldset disabled={pending()} class="contents">
-					<label class="flex flex-col gap-2">
-						<span class="font-semibold text-gray-600">Handle or DID identifier*</span>
-						<input
-							type="text"
-							name="ident"
-							required
-							pattern={DID_OR_HANDLE_RE.source}
-							placeholder="paul.bsky.social"
-							class="rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
-						/>
-					</label>
+					<TextInput
+						label="Handle or DID identifier*"
+						type="text"
+						name="ident"
+						autocomplete="username"
+						pattern={/* @once */ DID_OR_HANDLE_RE.source}
+						placeholder="paul.bsky.social"
+						autofocus
+					/>
 
-					<label class="flex flex-col gap-2">
-						<span class="font-semibold text-gray-600">PDS service</span>
-						<input
-							type="url"
-							name="service"
-							placeholder="https://bsky.social"
-							onInput={(ev) => {
-								const input = ev.currentTarget;
-								const value = input.value;
+					<TextInput
+						label="PDS service"
+						type="url"
+						placeholder="https://bsky.social"
+						onChange={(text, event) => {
+							const input = event.currentTarget;
 
-								if (value !== '' && !isServiceUrlString(value)) {
-									input.setCustomValidity('Must be a valid service URL');
-								} else {
-									input.setCustomValidity('');
-								}
-							}}
-							class="rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
-						/>
-					</label>
+							if (text !== '' && !isServiceUrlString(text)) {
+								input.setCustomValidity('Must be a valid service URL');
+							} else {
+								input.setCustomValidity('');
+							}
+						}}
+					/>
 
 					<div>
-						<button
-							type="submit"
-							class="flex h-9 select-none items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700 disabled:pointer-events-none disabled:opacity-50"
-						>
-							Export!
-						</button>
+						<Button type="submit">Export!</Button>
 					</div>
 				</fieldset>
 			</form>

src/views/identity/did-lookup.tsx

···
 
 import CircularProgressView from '~/components/circular-progress-view';
 import ErrorView from '~/components/error-view';
+import Button from '~/components/inputs/button';
+import TextInput from '~/components/inputs/text-input';
 
 const DidLookupPage = () => {
 	const [params, setParams] = useSearchParams({
···
 				}}
 				class="m-4 flex flex-col gap-4"
 			>
-				<label class="flex flex-col gap-2">
-					<span class="font-semibold text-gray-600">Handle or DID identifier*</span>
-					<input
-						ref={(node) => {
-							if (!params.q) {
-								setTimeout(() => node.focus(), 1);
-							}
-						}}
-						type="text"
-						name="ident"
-						required
-						pattern={DID_OR_HANDLE_RE.source}
-						placeholder="paul.bsky.social"
-						value={params.q ?? ''}
-						class="rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
-					/>
-				</label>
+				<TextInput
+					label="Handle or DID identifier*"
+					type="text"
+					name="ident"
+					autocomplete="username"
+					pattern={/* @once */ DID_OR_HANDLE_RE.source}
+					placeholder="paul.bsky.social"
+					autofocus
+				/>
 
 				<div>
-					<button
-						type="submit"
-						class="flex h-9 select-none items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700"
-					>
-						Look up!
-					</button>
+					<Button type="submit">Look up!</Button>
 				</div>
 			</form>
 			<hr class="mx-4 border-gray-300" />

src/views/identity/plc-oplogs.tsx

···
 
 import CheckIcon from '~/components/ic-icons/baseline-check';
 import ContentCopyIcon from '~/components/ic-icons/baseline-content-copy';
+import Button from '~/components/inputs/button';
+import TextInput from '~/components/inputs/text-input';
 
 const PlcOperationLogPage = () => {
 	const [params, setParams] = useSearchParams({
···
 				}}
 				class="m-4 flex flex-col gap-4"
 			>
-				<label class="flex flex-col gap-2">
-					<span class="font-semibold text-gray-600">Handle or DID identifier*</span>
-					<input
-						ref={(node) => {
-							if (!params.q) {
-								setTimeout(() => node.focus(), 1);
-							}
-						}}
-						type="text"
-						name="ident"
-						required
-						pattern={DID_OR_HANDLE_RE.source}
-						placeholder="paul.bsky.social"
-						value={params.q ?? ''}
-						class="rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
-					/>
-				</label>
+				<TextInput
+					label="Handle or DID identifier*"
+					type="text"
+					name="ident"
+					autocomplete="username"
+					pattern={/* @once */ DID_OR_HANDLE_RE.source}
+					placeholder="paul.bsky.social"
+					autofocus
+				/>
 
 				<div>
-					<button
-						type="submit"
-						class="flex h-9 select-none items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700"
-					>
-						Look up!
-					</button>
+					<Button type="submit">Look up!</Button>
 				</div>
 			</form>
 			<hr class="mx-4 border-gray-300" />

src/views/repository/repo-export.tsx

···
 import { makeAbortable } from '~/lib/utils/abortable';
 import { formatBytes } from '~/lib/utils/intl/bytes';
 
+import Button from '~/components/inputs/button';
+import TextInput from '~/components/inputs/text-input';
 import Logger, { createLogger } from '~/components/logger';
 
 const RepoExportPage = () => {
···
 				class="m-4 flex flex-col gap-4"
 			>
 				<fieldset disabled={pending()} class="contents">
-					<label class="flex flex-col gap-2">
-						<span class="font-semibold text-gray-600">Handle or DID identifier*</span>
-						<input
-							type="text"
-							name="ident"
-							required
-							pattern={DID_OR_HANDLE_RE.source}
-							placeholder="paul.bsky.social"
-							class="rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
-						/>
-					</label>
+					<TextInput
+						label="Handle or DID identifier*"
+						type="text"
+						name="ident"
+						autocomplete="username"
+						pattern={/* @once */ DID_OR_HANDLE_RE.source}
+						placeholder="paul.bsky.social"
+						autofocus
+					/>
 
-					<label class="flex flex-col gap-2">
-						<span class="font-semibold text-gray-600">PDS service</span>
-						<input
-							type="url"
-							name="service"
-							placeholder="https://bsky.social"
-							onInput={(ev) => {
-								const input = ev.currentTarget;
-								const value = input.value;
+					<TextInput
+						label="PDS service"
+						type="url"
+						placeholder="https://bsky.social"
+						onChange={(text, event) => {
+							const input = event.currentTarget;
 
-								if (value !== '' && !isServiceUrlString(value)) {
-									input.setCustomValidity('Must be a valid service URL');
-								} else {
-									input.setCustomValidity('');
-								}
-							}}
-							class="rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
-						/>
-					</label>
+							if (text !== '' && !isServiceUrlString(text)) {
+								input.setCustomValidity('Must be a valid service URL');
+							} else {
+								input.setCustomValidity('');
+							}
+						}}
+					/>
 
 					<div>
-						<button
-							type="submit"
-							class="flex h-9 select-none items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700 disabled:pointer-events-none disabled:opacity-50"
-						>
-							Export!
-						</button>
+						<Button type="submit">Export!</Button>
 					</div>
 				</fieldset>
 			</form>