chore: reorganize settings code layout

app/routes.ts

@@ -28,8 +28,8 @@ export default [
 
 			...prefix('/settings', [
 				index('routes/settings/overview.tsx'),
-				route('/auth-keys', 'routes/settings/auth-keys.tsx'),
+				route('/auth-keys', 'routes/settings/auth-keys/overview.tsx'),
-				route('/restrictions', 'routes/settings/pages/restrictions.tsx'),
+				route('/restrictions', 'routes/settings/restrictions/overview.tsx'),
 				// route('/local-agent', 'routes/settings/local-agent.tsx'),
 			]),
 		]),

app/routes/settings/auth-keys/auth-key-row.tsx

@@ -4,7 +4,7 @@ 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';
+import ExpireAuthKey from './dialogs/expire-auth-key';
 
 interface Props {
 	authKey: PreAuthKey;
@@ -37,7 +37,7 @@ export default function AuthKeyRow({ authKey, server }: Props) {
 			<div suppressHydrationWarning className="flex gap-4 items-center">
 				{(authKey.used && !authKey.reusable) ||
 				new Date(authKey.expiration) < new Date() ? undefined : (
-					<ExpireKey authKey={authKey} />
+					<ExpireAuthKey authKey={authKey} />
 				)}
 				<Button
 					variant="light"

app/routes/settings/auth-keys/dialogs/add-auth-key.tsx

@@ -7,12 +7,12 @@ import Select from '~/components/Select';
 import Switch from '~/components/Switch';
 import type { User } from '~/types';
 
-interface Props {
+interface AddAuthKeyProps {
 	users: User[];
 }
 
 // TODO: Tags
-export default function AddPreAuthKey(data: Props) {
+export default function AddAuthKey(data: AddAuthKeyProps) {
 	const [reusable, setReusable] = useState(false);
 	const [ephemeral, setEphemeral] = useState(false);
 

app/routes/settings/auth-keys/dialogs/expire-auth-key.tsx

@@ -1,11 +1,11 @@
 import Dialog from '~/components/Dialog';
 import type { PreAuthKey } from '~/types';
 
-interface Props {
+interface ExpireAuthKeyProps {
 	authKey: PreAuthKey;
 }
 
-export default function ExpireKey({ authKey }: Props) {
+export default function ExpireAuthKey({ authKey }: ExpireAuthKeyProps) {
 	return (
 		<Dialog>
 			<Dialog.Button>Expire Key</Dialog.Button>

app/routes/settings/auth-keys/overview.tsx

@@ -8,8 +8,8 @@ import TableList from '~/components/TableList';
 import type { LoadContext } from '~/server';
 import type { PreAuthKey, User } from '~/types';
 import { send } from '~/utils/res';
-import AuthKeyRow from './components/key';
+import AuthKeyRow from './auth-key-row';
-import AddPreAuthKey from './dialogs/new';
+import AddAuthKey from './dialogs/add-auth-key';
 
 export async function loader({
 	request,
@@ -168,7 +168,7 @@ export default function Page() {
 					Tailscale documentation
 				</Link>
 			</p>
-			<AddPreAuthKey users={users} />
+			<AddAuthKey users={users} />
 			<div className="flex items-center gap-4 mt-4">
 				<Select
 					label="Filter by User"

app/routes/settings/restrictions/overview.tsx

@@ -9,11 +9,11 @@ import Link from '~/components/Link';
 import Notice from '~/components/Notice';
 import { LoadContext } from '~/server';
 import { Capabilities } from '~/server/web/roles';
-import { restrictionAction } from '../actions/restriction';
+import { restrictionAction } from './actions';
-import Restriction from '../components/restriction';
+import AddDomain from './dialogs/add-domain';
-import AddDomain from '../dialogs/add-domain';
+import AddGroup from './dialogs/add-group';
-import AddGroup from '../dialogs/add-group';
+import AddUser from './dialogs/add-user';
-import AddUser from '../dialogs/add-user';
+import RestrictionTable from './table';
 
 export async function loader({
 	request,
@@ -92,23 +92,27 @@ export default function Page() {
 					</Link>
 				</p>
 			</div>
-			<Restriction
+			<RestrictionTable
 				type="domain"
 				values={settings.domains}
 				isDisabled={isDisabled}
 			>
 				<AddDomain domains={settings.domains} isDisabled={isDisabled} />
-			</Restriction>
+			</RestrictionTable>
-			<Restriction
+			<RestrictionTable
 				type="group"
 				values={settings.groups}
 				isDisabled={isDisabled}
 			>
 				<AddGroup groups={settings.groups} isDisabled={isDisabled} />
-			</Restriction>
+			</RestrictionTable>
-			<Restriction type="user" values={settings.users} isDisabled={isDisabled}>
+			<RestrictionTable
+				type="user"
+				values={settings.users}
+				isDisabled={isDisabled}
+			>
 				<AddUser users={settings.users} isDisabled={isDisabled} />
-			</Restriction>
+			</RestrictionTable>
 		</div>
 	);
 }

app/routes/settings/restrictions/table.tsx

@@ -12,7 +12,7 @@ interface RestrictionProps {
 	isDisabled?: boolean;
 }
 
-export default function Restriction({
+export default function RestrictionTable({
 	children,
 	type,
 	values,