significant refactor

src/app/routes/_authed/settings.tsx

@@ -1,34 +1,38 @@
-import { createFileRoute } from "@tanstack/react-router"
-import { Box, Title, Stack } from "@mantine/core"
-import { ColorSchemePicker } from "@/features/settings/components/color-scheme-picker"
-import AccentColorPicker from "@/features/settings/components/accent-color-picker"
-import { SignOutIcon } from "@phosphor-icons/react"
-import ListLink from "@/components/list-link"
+import { createFileRoute } from "@tanstack/react-router";
+import { Box, Title, Stack } from "@mantine/core";
+import { ColorSchemePicker } from "@/features/settings/components/color-scheme-picker";
+import AccentColorPicker from "@/features/settings/components/accent-color-picker";
+import { SignOutIcon } from "@phosphor-icons/react";
+import ListLink from "@/components/list-link";
 
 export const Route = createFileRoute("/_authed/settings")({
   loader: () => ({
     header: {
-      title: 'Settings',
+      title: "Settings",
       withBackButton: true,
     },
-    withPadding: false
+    withPadding: false,
   }),
   component: RouteComponent,
-})
+});
 
 function RouteComponent() {
-  return <>
-    <Box px='md' py='sm' style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}>
-      <Title order={3}>Appearance</Title>
-      <Stack>
-        <AccentColorPicker />
-        <ColorSchemePicker />
-      </Stack>
-    </Box>
-    <ListLink
-      label='Sign Out'
-      to='/logout'
-      Icon={SignOutIcon}
-    />
-  </>
+  return (
+    <>
+      <Box
+        px="md"
+        py="sm"
+        style={{
+          borderBottom: "1px solid var(--mantine-color-default-border)",
+        }}
+      >
+        <Title order={3}>Appearance</Title>
+        <Stack>
+          <AccentColorPicker />
+          <ColorSchemePicker />
+        </Stack>
+      </Box>
+      <ListLink label="Sign Out" to="/logout" Icon={SignOutIcon} />
+    </>
+  );
 }