init

src/app/routes/_authed/settings.tsx

@@ -0,0 +1,34 @@
+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 Page from "@/components/page"
+
+export const Route = createFileRoute("/_authed/settings")({
+  loader: () => ({
+    header: {
+      title: 'Settings',
+      withBackButton: true,
+    },
+  }),
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <Page noPadding>
+    <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}
+    />
+  </Page>
+}