chore: reorganize settings code layout

app/routes/settings/components/key.tsx

@@ -1,58 +0,0 @@
-import type { PreAuthKey } from '~/types';
-
-import Attribute from '~/components/Attribute';
-import Button from '~/components/Button';
-import Code from '~/components/Code';
-import toast from '~/utils/toast';
-import ExpireKey from '../dialogs/expire';
-
-interface Props {
-	authKey: PreAuthKey;
-	server: string;
-}
-
-export default function AuthKeyRow({ authKey, server }: Props) {
-	const createdAt = new Date(authKey.createdAt).toLocaleString();
-	const expiration = new Date(authKey.expiration).toLocaleString();
-
-	return (
-		<div className="w-full">
-			<Attribute name="Key" value={authKey.key} isCopyable />
-			<Attribute name="User" value={authKey.user} isCopyable />
-			<Attribute name="Reusable" value={authKey.reusable ? 'Yes' : 'No'} />
-			<Attribute name="Ephemeral" value={authKey.ephemeral ? 'Yes' : 'No'} />
-			<Attribute name="Used" value={authKey.used ? 'Yes' : 'No'} />
-			<Attribute suppressHydrationWarning name="Created" value={createdAt} />
-			<Attribute
-				suppressHydrationWarning
-				name="Expiration"
-				value={expiration}
-			/>
-			<p className="mb-1 mt-4">
-				To use this key, run the following command on your device:
-			</p>
-			<Code className="text-sm">
-				tailscale up --login-server {server} --authkey {authKey.key}
-			</Code>
-			<div suppressHydrationWarning className="flex gap-4 items-center">
-				{(authKey.used && !authKey.reusable) ||
-				new Date(authKey.expiration) < new Date() ? undefined : (
-					<ExpireKey authKey={authKey} />
-				)}
-				<Button
-					variant="light"
-					className="my-4"
-					onPress={async () => {
-						await navigator.clipboard.writeText(
-							`tailscale up --login-server ${server} --authkey ${authKey.key}`,
-						);
-
-						toast('Copied command to clipboard');
-					}}
-				>
-					Copy Tailscale Command
-				</Button>
-			</div>
-		</div>
-	);
-}

app/routes/settings/components/restriction.tsx

@@ -1,85 +0,0 @@
-import { GlobeLock, Group, User2 } from 'lucide-react';
-import React from 'react';
-import { Form } from 'react-router';
-import Button from '~/components/Button';
-import TableList from '~/components/TableList';
-import cn from '~/utils/cn';
-
-interface RestrictionProps {
-	children: React.ReactNode;
-	type: 'domain' | 'group' | 'user';
-	values: string[];
-	isDisabled?: boolean;
-}
-
-export default function Restriction({
-	children,
-	type,
-	values,
-	isDisabled,
-}: RestrictionProps) {
-	return (
-		<div className="w-2/3">
-			<h2 className="text-2xl font-medium mt-8">
-				Permitted {type.charAt(0).toUpperCase() + type.slice(1)}s
-			</h2>
-			<TableList className="my-4">
-				{values.length > 0 ? (
-					values.map((value) => (
-						<TableList.Item key={`${type}-${value}`}>
-							{type === 'domain' ? (
-								<p>
-									<span className="text-headplane-600 dark:text-headplane-300">
-										{'<user>'}
-									</span>
-									<span className="font-bold">@</span>
-									<span>{value}</span>
-								</p>
-							) : (
-								<p>{value}</p>
-							)}
-							<Form method="POST">
-								<input
-									type="hidden"
-									name="action_id"
-									value={`remove_${type}`}
-								/>
-								<input type="hidden" name={type} value={value} />
-								<Button
-									isDisabled={isDisabled}
-									type="submit"
-									className={cn(
-										'px-2 py-1 rounded-md',
-										'text-red-500 dark:text-red-400',
-									)}
-								>
-									Remove
-								</Button>
-							</Form>
-						</TableList.Item>
-					))
-				) : (
-					<TableList.Item className="flex flex-col items-center gap-2.5 py-4 opacity-70">
-						{iconForType(type)}
-						<p className="font-semibold">
-							All {type}s are permitted to authenticate.
-						</p>
-					</TableList.Item>
-				)}
-			</TableList>
-			{children}
-		</div>
-	);
-}
-
-function iconForType(type: 'domain' | 'group' | 'user') {
-	if (type === 'domain') {
-		return <GlobeLock />;
-	}
-
-	if (type === 'group') {
-		return <Group />;
-	}
-
-	return <User2 />;
-}