refactor: clean up ui components

src/components/file-drop-zone.tsx

···
+import type { JSX } from 'solid-js';
+
+import { createDropZone, type CreateDropZoneOptions } from '~/lib/hooks/dropzone';
+
+import Button from './inputs/button';
+
+interface FileDropZoneProps {
+	accept?: string;
+	disabled?: boolean;
+	onFiles: (files: File[]) => void;
+	dataTypes?: CreateDropZoneOptions['dataTypes'];
+	multiple?: boolean;
+	children?: JSX.Element;
+}
+
+const FileDropZone = (props: FileDropZoneProps) => {
+	const { ref: dropRef, isDropping } = createDropZone({
+		dataTypes: props.dataTypes,
+		multiple: props.multiple ?? false,
+		onDrop(files) {
+			if (files) {
+				props.onFiles(files);
+			}
+		},
+	});
+
+	const handleBrowse = () => {
+		const input = document.createElement('input');
+		input.type = 'file';
+		if (props.accept) {
+			input.accept = props.accept;
+		}
+		if (props.multiple) {
+			input.multiple = true;
+		}
+		input.oninput = () => {
+			const files = Array.from(input.files!);
+			if (files.length > 0) {
+				props.onFiles(files);
+			}
+		};
+		input.click();
+	};
+
+	return (
+		<fieldset
+			ref={dropRef}
+			disabled={props.disabled}
+			class={
+				`relative grid place-items-center rounded border border-gray-300 px-6 py-12 disabled:opacity-50` +
+				(props.disabled || !isDropping() ? ` bg-gray-100` : ` bg-green-100`)
+			}
+		>
+			<div class="flex flex-col items-center gap-4">
+				<Button variant="outline" onClick={handleBrowse}>
+					Browse files
+				</Button>
+				<p class="select-none font-medium text-gray-600">or drop your file here</p>
+			</div>
+			{props.children}
+		</fieldset>
+	);
+};
+
+export default FileDropZone;

src/components/inputs/button.tsx

···
-import type { JSX } from 'solid-js';
+import { createMemo, type JSX } from 'solid-js';
 
 interface ButtonProps {
 	children?: JSX.Element;
 	disabled?: boolean;
-	variant?: 'primary' | 'secondary';
+	variant?: 'primary' | 'secondary' | 'outline';
 	type?: 'button' | 'submit';
+	href?: string;
 	onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
 }
 
···
 		cn += ` bg-purple-800 text-white hover:bg-purple-700 active:bg-purple-700`;
 	} else if (variant === 'secondary') {
 		cn += ` bg-gray-200 text-black hover:bg-gray-300 active:bg-gray-300`;
+	} else if (variant === 'outline') {
+		cn += ` border border-gray-300 text-gray-800 hover:bg-gray-100 active:bg-gray-100`;
 	}
 
 	if (disabled) {
···
 };
 
 const Button = (props: ButtonProps) => {
-	return (
-		<button
-			type={props.type ?? 'button'}
-			disabled={props.disabled}
-			class={buttonStyles(props)}
-			onClick={props.onClick}
-		>
-			{props.children}
-		</button>
-	);
+	const hasLink = createMemo(() => props.href !== undefined);
+
+	return (() => {
+		if (hasLink()) {
+			return (
+				<a href={!props.disabled ? props.href : undefined} class={buttonStyles(props)}>
+					{props.children}
+				</a>
+			);
+		}
+
+		return (
+			<button
+				type={props.type ?? 'button'}
+				disabled={props.disabled}
+				class={buttonStyles(props)}
+				onClick={props.onClick}
+			>
+				{props.children}
+			</button>
+		);
+	}) as unknown as JSX.Element;
 };
 
 export default Button;

src/components/page-header.tsx

···
+import type { JSX } from 'solid-js';
+
+interface PageHeaderProps {
+	title: string;
+	subtitle?: string;
+	children?: JSX.Element;
+}
+
+const PageHeader = (props: PageHeaderProps) => {
+	return (
+		<>
+			<div class="p-4">
+				<h1 class="text-lg font-bold text-purple-800">{props.title}</h1>
+				{props.subtitle && <p class="text-gray-600">{props.subtitle}</p>}
+				{props.children}
+			</div>
+			<hr class="mx-4 border-gray-300" />
+		</>
+	);
+};
+
+export default PageHeader;

src/views/blob/blob-export.tsx

···
 import Button from '~/components/inputs/button';
 import TextInput from '~/components/inputs/text-input';
 import Logger, { createLogger } from '~/components/logger';
+import PageHeader from '~/components/page-header';
 
 const BlobExportPage = () => {
 	const logger = createLogger();
···
 
 	return (
 		<>
-			<div class="p-4">
-				<h1 class="text-lg font-bold text-purple-800">Export blobs</h1>
-				<p class="text-gray-600">Download all blobs from an account into a tarball</p>
-			</div>
-			<hr class="mx-4 border-gray-300" />
+			<PageHeader title="Export blobs" subtitle="Download all blobs from an account into a tarball" />
 
 			<form
 				onSubmit={(ev) => {

src/views/bluesky/threadgate-applicator/page.tsx

···
 
 import { useTitle } from '~/lib/navigation/router';
 
+import PageHeader from '~/components/page-header';
 import { Wizard } from '~/components/wizard';
 
 import Step1_HandleInput from './steps/step1_handle-input';
···
 
 	return (
 		<>
-			<div class="p-4">
-				<h1 class="text-lg font-bold text-purple-800">Retroactive thread gating</h1>
-				<p class="text-gray-600">Set reply permissions on all of your past Bluesky posts</p>
-			</div>
-			<hr class="mx-4 border-gray-300" />
+			<PageHeader title="Retroactive thread gating" subtitle="Set reply permissions on all of your past Bluesky posts" />
 
 			<Wizard<ThreadgateApplicatorConstraints>
 				initialStep="Step1_HandleInput"

src/views/crypto/crypto-generate.tsx

···
 
 import Button from '~/components/inputs/button';
 import RadioInput from '~/components/inputs/radio-input';
+import PageHeader from '~/components/page-header';
 
 type KeyType = 'p256' | 'secp256k1';
 
···
 
 	return (
 		<>
-			<div class="p-4">
-				<h1 class="text-lg font-bold text-purple-800">Generate secret keys</h1>
-				<p class="text-gray-600">Create a new secp256k1/nistp256 keypair</p>
-			</div>
-			<hr class="mx-4 border-gray-300" />
+			<PageHeader title="Generate secret keys" subtitle="Create a new secp256k1/nistp256 keypair" />
 
 			<form
 				onSubmit={async (ev) => {

src/views/frontpage.tsx

···
 
 import { useTitle } from '~/lib/navigation/router';
 
+import PageHeader from '~/components/page-header';
+
 import HistoryIcon from '~/components/ic-icons/baseline-history';
 import KeyIcon from '~/components/ic-icons/baseline-key';
 import KeyVisualizerIcon from '~/components/ic-icons/baseline-key-visualizer';
···
 
 	return (
 		<>
-			<div class="p-4">
-				<h1 class="text-lg font-bold text-purple-800">boat</h1>
-				<p class="text-gray-600">handy online tools for AT Protocol</p>
-			</div>
-			<hr class="mx-4 border-gray-300" />
+			<PageHeader title="boat" subtitle="handy online tools for AT Protocol" />
 
 			<div class="flex grow flex-col pb-2">{nodes}</div>
 

src/views/identity/did-lookup.tsx

···
 import ErrorView from '~/components/error-view';
 import Button from '~/components/inputs/button';
 import TextInput from '~/components/inputs/text-input';
+import PageHeader from '~/components/page-header';
 
 const DidLookupPage = () => {
 	const [params, setParams] = useSearchParams({
···
 
 	return (
 		<>
-			<div class="p-4">
-				<h1 class="text-lg font-bold text-purple-800">View identity info</h1>
-				<p class="text-gray-600">Look up an account's DID document</p>
-			</div>
-			<hr class="mx-4 border-gray-300" />
+			<PageHeader title="View identity info" subtitle="Look up an account's DID document" />
 
 			<form
 				onSubmit={(ev) => {
···
 
 														<div class="mt-2 flex flex-wrap gap-2 empty:hidden">
 															{isPDS && isServiceUrl && (
-																<button
-																	disabled
-																	class="flex h-9 select-none items-center rounded border border-gray-300 px-4 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-100 disabled:pointer-events-none disabled:opacity-50"
-																>
+																<Button variant="outline" disabled>
 																	View PDS info
-																</button>
+																</Button>
 															)}
 
 															{isPDS && isServiceUrl && (
-																<button
-																	disabled
-																	class="flex h-9 select-none items-center rounded border border-gray-300 px-4 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-100 disabled:pointer-events-none disabled:opacity-50"
-																>
+																<Button variant="outline" disabled>
 																	Explore account repository
-																</button>
+																</Button>
 															)}
 
 															{isLabeler && isServiceUrl && (
-																<button
-																	disabled
-																	class="flex h-9 select-none items-center rounded border border-gray-300 px-4 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-100 disabled:pointer-events-none disabled:opacity-50"
-																>
+																<Button variant="outline" disabled>
 																	View emitted labels
-																</button>
+																</Button>
 															)}
 														</div>
 													</li>
···
 								</div>
 
 								<div class="flex flex-wrap gap-4 p-4 pt-2">
-									<button
+									<Button
+										variant="outline"
 										onClick={() => {
 											navigator.clipboard.writeText(JSON.stringify(doc, null, 2));
 										}}
-										class="flex h-9 select-none items-center rounded border border-gray-300 px-4 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-100"
 									>
 										Copy DID document
-									</button>
+									</Button>
 
 									{isDidPlc && (
-										<a
-											href={`/plc-oplogs?q=${params.q!}`}
-											class="flex h-9 select-none items-center rounded border border-gray-300 px-4 text-sm font-semibold text-gray-800 hover:bg-gray-100 active:bg-gray-100"
-										>
+										<Button variant="outline" href={`/plc-oplogs?q=${params.q!}`}>
 											View PLC operation logs
-										</a>
+										</Button>
 									)}
 								</div>
 							</>

src/views/identity/plc-applicator/page.tsx

···
 
 import { useTitle } from '~/lib/navigation/router';
 
+import PageHeader from '~/components/page-header';
 import { Wizard } from '~/components/wizard';
 
 import Step1_HandleInput from './steps/step1_handle-input';
···
 
 	return (
 		<>
-			<div class="p-4">
-				<h1 class="text-lg font-bold text-purple-800">Apply PLC operations</h1>
-				<p class="text-gray-600">Submit operations to your did:plc identity</p>
-			</div>
-			<hr class="mx-4 border-gray-300" />
+			<PageHeader title="Apply PLC operations" subtitle="Submit operations to your did:plc identity" />
 
 			<Wizard<PlcApplicatorConstraints>
 				initialStep="Step1_HandleInput"

src/views/identity/plc-oplogs.tsx

···
 import ContentCopyIcon from '~/components/ic-icons/baseline-content-copy';
 import Button from '~/components/inputs/button';
 import TextInput from '~/components/inputs/text-input';
+import PageHeader from '~/components/page-header';
 
 const PlcOperationLogPage = () => {
 	const [params, setParams] = useSearchParams({
···
 
 	return (
 		<>
-			<div class="p-4">
-				<h1 class="text-lg font-bold text-purple-800">View PLC operation logs</h1>
-				<p class="text-gray-600">Show history of a did:plc identity</p>
-			</div>
-			<hr class="mx-4 border-gray-300" />
+			<PageHeader title="View PLC operation logs" subtitle="Show history of a did:plc identity" />
 
 			<form
 				onSubmit={(ev) => {

src/views/repository/repo-archive-explore/views/welcome.tsx

···
 import type { MutationReturn } from '~/lib/utils/mutation';
 
 import CircularProgress from '~/components/circular-progress';
-import { createDropZone } from '~/lib/hooks/dropzone';
+import FileDropZone from '~/components/file-drop-zone';
+import PageHeader from '~/components/page-header';
 
 import type { Archive } from '../types';
 
···
 }
 
 const WelcomeView = ({ mutation }: WelcomeViewProps) => {
-	const { ref: dropRef, isDropping } = createDropZone({
-		// Checked, the mime type for CAR files is blank.
-		dataTypes: [''],
-		multiple: false,
-		onDrop(files) {
-			if (files) {
-				mutation.mutate({ file: files[0] });
-			}
-		},
-	});
-
 	return (
 		<>
-			<div class="p-4">
-				<h1 class="text-lg font-bold text-purple-800">Explore archive</h1>
-				<p class="text-gray-600">Explore a repository archive</p>
-			</div>
-			<hr class="mx-4 border-gray-300" />
+			<PageHeader title="Explore archive" subtitle="Explore a repository archive" />
 
 			<div class="flex flex-col gap-4 p-4">
-				<fieldset
-					ref={dropRef}
-					class={
-						`grid place-items-center rounded border border-gray-300 px-6 py-12 disabled:opacity-50` +
-						(!isDropping() ? ` bg-gray-100` : ` bg-green-100`)
-					}
+				<FileDropZone
+					accept=".car,application/vnd.ipld.car"
+					dataTypes={['']}
+					onFiles={(files) => mutation.mutate({ file: files[0] })}
 				>
-					<div class="flex flex-col items-center gap-4">
-						<button
-							onClick={() => {
-								const input = document.createElement('input');
-								input.type = 'file';
-								input.accept = '.car,application/vnd.ipld.car';
-								input.oninput = () => mutation.mutate({ file: input.files![0] });
-
-								input.click();
-							}}
-							class="flex h-9 select-none items-center rounded border border-gray-400 px-4 text-sm font-semibold text-gray-800 hover:bg-gray-200 active:bg-gray-200 disabled:pointer-events-none"
-						>
-							Browse files
-						</button>
-						<p class="select-none font-medium text-gray-600">or drop your file here</p>
-					</div>
-
 					<div
 						hidden={!mutation.isPending}
 						class="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-gray-50"
···
 						<CircularProgress />
 						<span class="font-medium">Reading CAR file</span>
 					</div>
-				</fieldset>
+				</FileDropZone>
 
 				<Show when={mutation.error}>
 					<p class="whitespace-pre-wrap text-[0.8125rem] font-medium leading-5 text-red-800">

src/views/repository/repo-archive-unpack.tsx

···
 import { fromStream } from '@atcute/repo';
 import { writeTarEntry } from '@mary/tar';
 
-import { createDropZone } from '~/lib/hooks/dropzone';
 import { useTitle } from '~/lib/navigation/router';
 import { makeAbortable } from '~/lib/utils/abortable';
 
+import FileDropZone from '~/components/file-drop-zone';
 import Logger, { createLogger } from '~/components/logger';
+import PageHeader from '~/components/page-header';
 
 // @ts-expect-error: new API
 const yieldToScheduler: () => Promise<void> = window?.scheduler?.yield
···
 
 	const [getSignal, cleanup] = makeAbortable();
 	const [pending, setPending] = createSignal(false);
-
-	const { ref: dropRef, isDropping } = createDropZone({
-		// Checked, the mime type for CAR files is blank.
-		dataTypes: [''],
-		multiple: false,
-		onDrop(files) {
-			if (files) {
-				onFileDrop(files);
-			}
-		},
-	});
 
 	const mutate = async (file: File, signal: AbortSignal) => {
 		logger.log(`Starting extraction`);
···
 
 	return (
 		<>
-			<div class="p-4">
-				<h1 class="text-lg font-bold text-purple-800">Unpack archive</h1>
-				<p class="text-gray-600">Extract a repository archive into a tarball</p>
-			</div>
-			<hr class="mx-4 border-gray-300" />
+			<PageHeader title="Unpack archive" subtitle="Extract a repository archive into a tarball" />
 
 			<div class="p-4">
-				<fieldset
-					ref={dropRef}
+				<FileDropZone
+					accept=".car,application/vnd.ipld.car"
+					dataTypes={['']}
 					disabled={pending()}
-					class={
-						`grid place-items-center rounded border border-gray-300 px-6 py-12 disabled:opacity-50` +
-						(pending() || !isDropping() ? ` bg-gray-100` : ` bg-green-100`)
-					}
-				>
-					<div class="flex flex-col items-center gap-4">
-						<button
-							onClick={() => {
-								const input = document.createElement('input');
-								input.type = 'file';
-								input.accept = '.car,application/vnd.ipld.car';
-								input.oninput = () => onFileDrop(Array.from(input.files!));
-
-								input.click();
-							}}
-							class="flex h-9 select-none items-center rounded border border-gray-400 px-4 text-sm font-semibold text-gray-800 hover:bg-gray-200 active:bg-gray-200 disabled:pointer-events-none"
-						>
-							Browse files
-						</button>
-						<p class="select-none font-medium text-gray-600">or drop your file here</p>
-					</div>
-				</fieldset>
+					onFiles={onFileDrop}
+				/>
 			</div>
 			<hr class="mx-4 border-gray-300" />
 

src/views/repository/repo-export.tsx

···
 import Button from '~/components/inputs/button';
 import TextInput from '~/components/inputs/text-input';
 import Logger, { createLogger } from '~/components/logger';
+import PageHeader from '~/components/page-header';
 
 const RepoExportPage = () => {
 	const logger = createLogger();
···
 
 	return (
 		<>
-			<div class="p-4">
-				<h1 class="text-lg font-bold text-purple-800">Export repository</h1>
-				<p class="text-gray-600">Download an archive of an account's repository</p>
-			</div>
-			<hr class="mx-4 border-gray-300" />
+			<PageHeader title="Export repository" subtitle="Download an archive of an account's repository" />
 
 			<form
 				onSubmit={(ev) => {