P398:[{"_413":27,"_414":31,"_415":416},"app1","app2","diffPatch","diff --git a/.env b/.env\nnew file mode 100644\nindex 0000000..e45c443\n--- /dev/null\n+++ b/.env\n@@ -0,0 +1,29 @@\n+LITEFS_DIR=\"/litefs/data\"\n+DATABASE_PATH=\"./prisma/data.db\"\n+DATABASE_URL=\"file:./data.db?connection_limit=1\"\n+CACHE_DATABASE_PATH=\"./other/cache.db\"\n+SESSION_SECRET=\"dcfaa48e7e20dce686b8636a68fa26f0\"\n+HONEYPOT_SECRET=\"super-duper-s3cret\"\n+RESEND_API_KEY=\"re_blAh_blaHBlaHblahBLAhBlAh\"\n+SENTRY_DSN=\"your-dsn\"\n+\n+# this is set to a random value in the Dockerfile\n+INTERNAL_COMMAND_TOKEN=\"some-made-up-token\"\n+\n+# the mocks and some code rely on these two being prefixed with \"MOCK_\"\n+# if they aren't then the real github api will be attempted\n+GITHUB_CLIENT_ID=\"MOCK_GITHUB_CLIENT_ID\"\n+GITHUB_CLIENT_SECRET=\"MOCK_GITHUB_CLIENT_SECRET\"\n+GITHUB_TOKEN=\"MOCK_GITHUB_TOKEN\"\n+GITHUB_REDIRECT_URI=\"https://example.com/auth/github/callback\"\n+\n+# set this to false to prevent search engines from indexing the website\n+# default to allow indexing for seo safety\n+ALLOW_INDEXING=\"true\"\n+\n+# Tigris Object Storage (S3-compatible) Configuration\n+AWS_ACCESS_KEY_ID=\"mock-access-key\"\n+AWS_SECRET_ACCESS_KEY=\"mock-secret-key\"\n+AWS_REGION=\"auto\"\n+AWS_ENDPOINT_URL_S3=\"https://fly.storage.tigris.dev\"\n+BUCKET_NAME=\"mock-bucket\"\ndiff --git a/.env.example b/.env.example\nnew file mode 100644\nindex 0000000..c5daeb2\n--- /dev/null\n+++ b/.env.example\n@@ -0,0 +1,29 @@\n+LITEFS_DIR=\"/litefs/data\"\n+DATABASE_PATH=\"./prisma/data.db\"\n+DATABASE_URL=\"file:./data.db?connection_limit=1\"\n+CACHE_DATABASE_PATH=\"./other/cache.db\"\n+SESSION_SECRET=\"super-duper-s3cret\"\n+HONEYPOT_SECRET=\"super-duper-s3cret\"\n+RESEND_API_KEY=\"re_blAh_blaHBlaHblahBLAhBlAh\"\n+SENTRY_DSN=\"your-dsn\"\n+\n+# this is set to a random value in the Dockerfile\n+INTERNAL_COMMAND_TOKEN=\"some-made-up-token\"\n+\n+# the mocks and some code rely on these two being prefixed with \"MOCK_\"\n+# if they aren't then the real github api will be attempted\n+GITHUB_CLIENT_ID=\"MOCK_GITHUB_CLIENT_ID\"\n+GITHUB_CLIENT_SECRET=\"MOCK_GITHUB_CLIENT_SECRET\"\n+GITHUB_TOKEN=\"MOCK_GITHUB_TOKEN\"\n+GITHUB_REDIRECT_URI=\"https://example.com/auth/github/callback\"\n+\n+# set this to false to prevent search engines from indexing the website\n+# default to allow indexing for seo safety\n+ALLOW_INDEXING=\"true\"\n+\n+# Tigris Object Storage (S3-compatible) Configuration\n+AWS_ACCESS_KEY_ID=\"mock-access-key\"\n+AWS_SECRET_ACCESS_KEY=\"mock-secret-key\"\n+AWS_REGION=\"auto\"\n+AWS_ENDPOINT_URL_S3=\"https://fly.storage.tigris.dev\"\n+BUCKET_NAME=\"mock-bucket\"\ndiff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md\nnew file mode 100644\nindex 0000000..84a2084\n--- /dev/null\n+++ b/.github/PULL_REQUEST_TEMPLATE.md\n@@ -0,0 +1,15 @@\n+\n+\n+## Test Plan\n+\n+\n+\n+## Checklist\n+\n+- [ ] Tests updated\n+- [ ] Docs updated\n+\n+## Screenshots\n+\n+\ndiff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml\nnew file mode 100644\nindex 0000000..49cbbad\n--- /dev/null\n+++ b/.github/workflows/deploy.yml\n@@ -0,0 +1,229 @@\n+name: 🚀 Deploy\n+on:\n+ push:\n+ branches:\n+ - main\n+ - dev\n+ pull_request: {}\n+\n+concurrency:\n+ group: ${{ github.workflow }}-${{ github.ref }}\n+ cancel-in-progress: true\n+\n+permissions:\n+ actions: write\n+ contents: read\n+\n+jobs:\n+ lint:\n+ name: ⬣ ESLint\n+ runs-on: ubuntu-22.04\n+ steps:\n+ - name: ⬇️ Checkout repo\n+ uses: actions/checkout@v4\n+\n+ - name: ⎔ Setup node\n+ uses: actions/setup-node@v4\n+ with:\n+ node-version: 22\n+\n+ - name: 📥 Download deps\n+ uses: bahmutov/npm-install@v1\n+\n+ - name: 🏄 Copy test env vars\n+ run: cp .env.example .env\n+\n+ - name: 🛠 Setup Database\n+ run: npx prisma migrate deploy && npx prisma generate --sql\n+\n+ - name: 🔬 Lint\n+ run: npm run lint\n+\n+ typecheck:\n+ name: ʦ TypeScript\n+ runs-on: ubuntu-22.04\n+ steps:\n+ - name: ⬇️ Checkout repo\n+ uses: actions/checkout@v4\n+\n+ - name: ⎔ Setup node\n+ uses: actions/setup-node@v4\n+ with:\n+ node-version: 22\n+\n+ - name: 📥 Download deps\n+ uses: bahmutov/npm-install@v1\n+\n+ - name: 🏗 Build\n+ run: npm run build\n+\n+ - name: 🏄 Copy test env vars\n+ run: cp .env.example .env\n+\n+ - name: 🛠 Setup Database\n+ run: npx prisma migrate deploy && npx prisma generate --sql\n+\n+ - name: 🔎 Type check\n+ run: npm run typecheck --if-present\n+\n+ vitest:\n+ name: ⚡ Vitest\n+ runs-on: ubuntu-22.04\n+ steps:\n+ - name: ⬇️ Checkout repo\n+ uses: actions/checkout@v4\n+\n+ - name: ⎔ Setup node\n+ uses: actions/setup-node@v4\n+ with:\n+ node-version: 22\n+\n+ - name: 📥 Download deps\n+ uses: bahmutov/npm-install@v1\n+\n+ - name: 🏄 Copy test env vars\n+ run: cp .env.example .env\n+\n+ - name: 🛠 Setup Database\n+ run: npx prisma migrate deploy && npx prisma generate --sql\n+\n+ - name: ⚡ Run vitest\n+ run: npm run test -- --coverage\n+\n+ playwright:\n+ name: 🎭 Playwright\n+ runs-on: ubuntu-22.04\n+ timeout-minutes: 60\n+ steps:\n+ - name: ⬇️ Checkout repo\n+ uses: actions/checkout@v4\n+\n+ - name: 🏄 Copy test env vars\n+ run: cp .env.example .env\n+\n+ - name: ⎔ Setup node\n+ uses: actions/setup-node@v4\n+ with:\n+ node-version: 22\n+\n+ - name: 📥 Download deps\n+ uses: bahmutov/npm-install@v1\n+\n+ - name: 📥 Install Playwright Browsers\n+ run: npm run test:e2e:install\n+\n+ - name: 🛠 Setup Database\n+ run: npx prisma migrate deploy && npx prisma generate --sql\n+\n+ - name: 🏦 Cache Database\n+ id: db-cache\n+ uses: actions/cache@v4\n+ with:\n+ path: prisma/data.db\n+ key:\n+ db-cache-schema_${{ hashFiles('./prisma/schema.prisma')\n+ }}-migrations_${{ hashFiles('./prisma/migrations/*/migration.sql')\n+ }}\n+\n+ - name: 🌱 Seed Database\n+ if: steps.db-cache.outputs.cache-hit != 'true'\n+ run: npx prisma migrate reset --force\n+\n+ - name: 🏗 Build\n+ run: npm run build\n+\n+ - name: 🎭 Playwright tests\n+ run: npx playwright test\n+\n+ - name: 📊 Upload report\n+ uses: actions/upload-artifact@v4\n+ if: always()\n+ with:\n+ name: playwright-report\n+ path: playwright-report/\n+ retention-days: 30\n+\n+ container:\n+ name: 📦 Prepare Container\n+ runs-on: ubuntu-24.04\n+ # only prepare container on pushes\n+ if: ${{ github.event_name == 'push' }}\n+ steps:\n+ - name: ⬇️ Checkout repo\n+ uses: actions/checkout@v4\n+ with:\n+ fetch-depth: 50\n+\n+ - name: 👀 Read app name\n+ uses: SebRollen/toml-action@v1.2.0\n+ id: app_name\n+ with:\n+ file: 'fly.toml'\n+ field: 'app'\n+\n+ - name: 🎈 Setup Fly\n+ uses: superfly/flyctl-actions/setup-flyctl@1.5\n+\n+ - name: 📦 Build Staging Container\n+ if: ${{ github.ref == 'refs/heads/dev' }}\n+ run: |\n+ flyctl deploy \\\n+ --build-only \\\n+ --push \\\n+ --image-label ${{ github.sha }} \\\n+ --build-arg COMMIT_SHA=${{ github.sha }} \\\n+ --app ${{ steps.app_name.outputs.value }}-staging\n+ env:\n+ FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}\n+\n+ - name: 📦 Build Production Container\n+ if: ${{ github.ref == 'refs/heads/main' }}\n+ run: |\n+ flyctl deploy \\\n+ --build-only \\\n+ --push \\\n+ --image-label ${{ github.sha }} \\\n+ --build-arg COMMIT_SHA=${{ github.sha }} \\\n+ --build-secret SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }} \\\n+ --app ${{ steps.app_name.outputs.value }}\n+ env:\n+ FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}\n+\n+ deploy:\n+ name: 🚀 Deploy\n+ runs-on: ubuntu-24.04\n+ needs: [lint, typecheck, vitest, playwright, container]\n+ # only deploy on pushes\n+ if: ${{ github.event_name == 'push' }}\n+ steps:\n+ - name: ⬇️ Checkout repo\n+ uses: actions/checkout@v4\n+ with:\n+ fetch-depth: '50'\n+\n+ - name: 👀 Read app name\n+ uses: SebRollen/toml-action@v1.2.0\n+ id: app_name\n+ with:\n+ file: 'fly.toml'\n+ field: 'app'\n+\n+ - name: 🎈 Setup Fly\n+ uses: superfly/flyctl-actions/setup-flyctl@1.5\n+\n+ - name: 🚀 Deploy Staging\n+ if: ${{ github.ref == 'refs/heads/dev' }}\n+ run: |\n+ flyctl deploy \\\n+ --image \"registry.fly.io/${{ steps.app_name.outputs.value }}-staging:${{ github.sha }}\" \\\n+ --app ${{ steps.app_name.outputs.value }}-staging\n+ env:\n+ FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}\n+\n+ - name: 🚀 Deploy Production\n+ if: ${{ github.ref == 'refs/heads/main' }}\n+ run: |\n+ flyctl deploy \\\n+ --image \"registry.fly.io/${{ steps.app_name.outputs.value }}:${{ github.sha }}\"\n+ env:\n+ FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}\ndiff --git a/.gitignore b/.gitignore\nnew file mode 100644\nindex 0000000..e39d8e3\n--- /dev/null\n+++ b/.gitignore\n@@ -0,0 +1,28 @@\n+node_modules\n+.DS_store\n+\n+/build\n+/server-build\n+ \n+.cache\n+\n+/prisma/data.db\n+/prisma/data.db-journal\n+/tests/prisma\n+\n+/test-results/\n+/playwright-report/\n+/playwright/.cache/\n+/tests/fixtures/email/\n+/tests/fixtures/uploaded/\n+/tests/fixtures/openimg/\n+/coverage\n+\n+/other/cache.db\n+\n+# Easy way to create temporary files/folders that won't accidentally be added to git\n+*.local.*\n+\n+# generated files\n+/app/components/ui/icons\n+.react-router/\ndiff --git a/.npmrc b/.npmrc\nnew file mode 100644\nindex 0000000..4c606f8\n--- /dev/null\n+++ b/.npmrc\n@@ -0,0 +1,4 @@\n+legacy-peer-deps=true\n+registry=https://registry.npmjs.org/\n+audit=false\n+fund=false\ndiff --git a/.prettierignore b/.prettierignore\nnew file mode 100644\nindex 0000000..f022d02\n--- /dev/null\n+++ b/.prettierignore\n@@ -0,0 +1,15 @@\n+node_modules\n+\n+/build\n+/public/build\n+/server-build\n+.env\n+\n+/test-results/\n+/playwright-report/\n+/playwright/.cache/\n+/tests/fixtures/email/*.json\n+/coverage\n+/prisma/migrations\n+\n+package-lock.json\ndiff --git a/app/assets/favicons/apple-touch-icon.png b/app/assets/favicons/apple-touch-icon.png\nnew file mode 100644\nindex 0000000..8bf4632\nBinary files /dev/null and b/app/assets/favicons/apple-touch-icon.png differ\ndiff --git a/app/assets/favicons/favicon.svg b/app/assets/favicons/favicon.svg\nnew file mode 100644\nindex 0000000..72be6f0\n--- /dev/null\n+++ b/app/assets/favicons/favicon.svg\n@@ -0,0 +1,13 @@\n+\ndiff --git a/app/components/error-boundary.tsx b/app/components/error-boundary.tsx\nnew file mode 100644\nindex 0000000..b881ed9\n--- /dev/null\n+++ b/app/components/error-boundary.tsx\n@@ -0,0 +1,53 @@\n+import { captureException } from '@sentry/react-router'\n+import { useEffect, type ReactElement } from 'react'\n+import {\n+\ttype ErrorResponse,\n+\tisRouteErrorResponse,\n+\tuseParams,\n+\tuseRouteError,\n+} from 'react-router'\n+import { getErrorMessage } from '#app/utils/misc'\n+\n+type StatusHandler = (info: {\n+\terror: ErrorResponse\n+\tparams: Record\n+}) => ReactElement | null\n+\n+export function GeneralErrorBoundary({\n+\tdefaultStatusHandler = ({ error }) => (\n+\t\t

\n+\t\t\t{error.status} {error.data}\n+\t\t

\n+\t),\n+\tstatusHandlers,\n+\tunexpectedErrorHandler = (error) =>

{getErrorMessage(error)}

,\n+}: {\n+\tdefaultStatusHandler?: StatusHandler\n+\tstatusHandlers?: Record\n+\tunexpectedErrorHandler?: (error: unknown) => ReactElement | null\n+}) {\n+\tconst error = useRouteError()\n+\tconst params = useParams()\n+\tconst isResponse = isRouteErrorResponse(error)\n+\n+\tif (typeof document !== 'undefined') {\n+\t\tconsole.error(error)\n+\t}\n+\n+\tuseEffect(() => {\n+\t\tif (isResponse) return\n+\n+\t\tcaptureException(error)\n+\t}, [error, isResponse])\n+\n+\treturn (\n+\t\t

\n+\t\t\t{isResponse\n+\t\t\t\t? (statusHandlers?.[error.status] ?? defaultStatusHandler)({\n+\t\t\t\t\t\terror,\n+\t\t\t\t\t\tparams,\n+\t\t\t\t\t})\n+\t\t\t\t: unexpectedErrorHandler(error)}\n+\t\t

\n+\t)\n+}\ndiff --git a/app/components/floating-toolbar.tsx b/app/components/floating-toolbar.tsx\nnew file mode 100644\nindex 0000000..5e0e823\n--- /dev/null\n+++ b/app/components/floating-toolbar.tsx\n@@ -0,0 +1,2 @@\n+export const floatingToolbarClassName =\n+\t'absolute bottom-3 inset-x-3 flex items-center gap-2 rounded-lg bg-muted/80 p-4 pl-5 shadow-xl shadow-accent backdrop-blur-xs md:gap-4 md:pl-7 justify-end'\ndiff --git a/app/components/forms.tsx b/app/components/forms.tsx\nnew file mode 100644\nindex 0000000..abaabf7\n--- /dev/null\n+++ b/app/components/forms.tsx\n@@ -0,0 +1,202 @@\n+import { useInputControl } from '@conform-to/react'\n+import { REGEXP_ONLY_DIGITS_AND_CHARS, type OTPInputProps } from 'input-otp'\n+import React, { useId } from 'react'\n+import { Checkbox, type CheckboxProps } from './ui/checkbox.tsx'\n+import {\n+\tInputOTP,\n+\tInputOTPGroup,\n+\tInputOTPSeparator,\n+\tInputOTPSlot,\n+} from './ui/input-otp.tsx'\n+import { Input } from './ui/input.tsx'\n+import { Label } from './ui/label.tsx'\n+import { Textarea } from './ui/textarea.tsx'\n+\n+export type ListOfErrors = Array | null | undefined\n+\n+export function ErrorList({\n+\tid,\n+\terrors,\n+}: {\n+\terrors?: ListOfErrors\n+\tid?: string\n+}) {\n+\tconst errorsToRender = errors?.filter(Boolean)\n+\tif (!errorsToRender?.length) return null\n+\treturn (\n+\t\t

\n+\t\t\t\t\t{e}\n+\t\t\t\t

\n+\t)\n+}\n+\n+export function Field({\n+\tlabelProps,\n+\tinputProps,\n+\terrors,\n+\tclassName,\n+}: {\n+\tlabelProps: React.LabelHTMLAttributes\n+\tinputProps: React.InputHTMLAttributes\n+\terrors?: ListOfErrors\n+\tclassName?: string\n+}) {\n+\tconst fallbackId = useId()\n+\tconst id = inputProps.id ?? fallbackId\n+\tconst errorId = errors?.length ? `${id}-error` : undefined\n+\treturn (\n+\t\t

\n+\t\t\t\n+\t\t\t\n+\t\t\t

\n+\t\t\t\t{errorId ? : null}\n+\t\t\t

\n+\t\t

\n+\t)\n+}\n+\n+export function OTPField({\n+\tlabelProps,\n+\tinputProps,\n+\terrors,\n+\tclassName,\n+}: {\n+\tlabelProps: React.LabelHTMLAttributes\n+\tinputProps: Partial\n+\terrors?: ListOfErrors\n+\tclassName?: string\n+}) {\n+\tconst fallbackId = useId()\n+\tconst id = inputProps.id ?? fallbackId\n+\tconst errorId = errors?.length ? `${id}-error` : undefined\n+\treturn (\n+\t\t

\n+\t\t\t\n+\t\t\t\n+\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\n+\t\t\t\n+\t\t\t

\n+\t\t\t\t{errorId ? : null}\n+\t\t\t

\n+\t\t

\n+\t)\n+}\n+\n+export function TextareaField({\n+\tlabelProps,\n+\ttextareaProps,\n+\terrors,\n+\tclassName,\n+}: {\n+\tlabelProps: React.LabelHTMLAttributes\n+\ttextareaProps: React.TextareaHTMLAttributes\n+\terrors?: ListOfErrors\n+\tclassName?: string\n+}) {\n+\tconst fallbackId = useId()\n+\tconst id = textareaProps.id ?? textareaProps.name ?? fallbackId\n+\tconst errorId = errors?.length ? `${id}-error` : undefined\n+\treturn (\n+\t\t

\n+\t\t\t\n+\t\t\t\n+\t\t\t

\n+\t\t\t\t{errorId ? : null}\n+\t\t\t

\n+\t\t

\n+\t)\n+}\n+\n+export function CheckboxField({\n+\tlabelProps,\n+\tbuttonProps,\n+\terrors,\n+\tclassName,\n+}: {\n+\tlabelProps: React.ComponentProps<'label'>\n+\tbuttonProps: CheckboxProps & {\n+\t\tname: string\n+\t\tform: string\n+\t\tvalue?: string\n+\t}\n+\terrors?: ListOfErrors\n+\tclassName?: string\n+}) {\n+\tconst { key, defaultChecked, ...checkboxProps } = buttonProps\n+\tconst fallbackId = useId()\n+\tconst checkedValue = buttonProps.value ?? 'on'\n+\tconst input = useInputControl({\n+\t\tkey,\n+\t\tname: buttonProps.name,\n+\t\tformId: buttonProps.form,\n+\t\tinitialValue: defaultChecked ? checkedValue : undefined,\n+\t})\n+\tconst id = buttonProps.id ?? fallbackId\n+\tconst errorId = errors?.length ? `${id}-error` : undefined\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t {\n+\t\t\t\t\t\tinput.change(state.valueOf() ? checkedValue : '')\n+\t\t\t\t\t\tbuttonProps.onCheckedChange?.(state)\n+\t\t\t\t\t}}\n+\t\t\t\t\tonFocus={(event) => {\n+\t\t\t\t\t\tinput.focus()\n+\t\t\t\t\t\tbuttonProps.onFocus?.(event)\n+\t\t\t\t\t}}\n+\t\t\t\t\tonBlur={(event) => {\n+\t\t\t\t\t\tinput.blur()\n+\t\t\t\t\t\tbuttonProps.onBlur?.(event)\n+\t\t\t\t\t}}\n+\t\t\t\t\ttype=\"button\"\n+\t\t\t\t/>\n+\t\t\t\t\n+\t\t\t

\n+\t\t\t

\n+\t\t\t\t{errorId ? : null}\n+\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/components/progress-bar.tsx b/app/components/progress-bar.tsx\nnew file mode 100644\nindex 0000000..f99a698\n--- /dev/null\n+++ b/app/components/progress-bar.tsx\n@@ -0,0 +1,63 @@\n+import { useEffect, useRef, useState } from 'react'\n+import { useNavigation } from 'react-router'\n+import { useSpinDelay } from 'spin-delay'\n+import { cn } from '#app/utils/misc.tsx'\n+import { Icon } from './ui/icon.tsx'\n+\n+function EpicProgress() {\n+\tconst transition = useNavigation()\n+\tconst busy = transition.state !== 'idle'\n+\tconst delayedPending = useSpinDelay(busy, {\n+\t\tdelay: 600,\n+\t\tminDuration: 400,\n+\t})\n+\tconst ref = useRef(null)\n+\tconst [animationComplete, setAnimationComplete] = useState(true)\n+\n+\tuseEffect(() => {\n+\t\tif (!ref.current) return\n+\t\tif (delayedPending) setAnimationComplete(false)\n+\n+\t\tconst animationPromises = ref.current\n+\t\t\t.getAnimations()\n+\t\t\t.map(({ finished }) => finished)\n+\n+\t\tvoid Promise.allSettled(animationPromises).then(() => {\n+\t\t\tif (!delayedPending) setAnimationComplete(true)\n+\t\t})\n+\t}, [delayedPending])\n+\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\t{delayedPending && (\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t)}\n+\t\t\n+\t)\n+}\n+\n+export { EpicProgress }\ndiff --git a/app/components/search-bar.tsx b/app/components/search-bar.tsx\nnew file mode 100644\nindex 0000000..db7af73\n--- /dev/null\n+++ b/app/components/search-bar.tsx\n@@ -0,0 +1,63 @@\n+import { useId } from 'react'\n+import { Form, useSearchParams, useSubmit } from 'react-router'\n+import { useDebounce, useIsPending } from '#app/utils/misc.tsx'\n+import { Icon } from './ui/icon.tsx'\n+import { Input } from './ui/input.tsx'\n+import { Label } from './ui/label.tsx'\n+import { StatusButton } from './ui/status-button.tsx'\n+\n+export function SearchBar({\n+\tstatus,\n+\tautoFocus = false,\n+\tautoSubmit = false,\n+}: {\n+\tstatus: 'idle' | 'pending' | 'success' | 'error'\n+\tautoFocus?: boolean\n+\tautoSubmit?: boolean\n+}) {\n+\tconst id = useId()\n+\tconst [searchParams] = useSearchParams()\n+\tconst submit = useSubmit()\n+\tconst isSubmitting = useIsPending({\n+\t\tformMethod: 'GET',\n+\t\tformAction: '/users',\n+\t})\n+\n+\tconst handleFormChange = useDebounce(async (form: HTMLFormElement) => {\n+\t\tawait submit(form)\n+\t}, 400)\n+\n+\treturn (\n+\t\t autoSubmit && handleFormChange(e.currentTarget)}\n+\t\t>\n+\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\tSearch\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t

\n+\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\tSearch\n+\t\t\t\t\n+\t\t\t

\n+\t\t\n+\t)\n+}\ndiff --git a/app/components/spacer.tsx b/app/components/spacer.tsx\nnew file mode 100644\nindex 0000000..8a8e537\n--- /dev/null\n+++ b/app/components/spacer.tsx\n@@ -0,0 +1,57 @@\n+export function Spacer({\n+\tsize,\n+}: {\n+\t/**\n+\t * The size of the space\n+\t *\n+\t * 4xs: h-4 (16px)\n+\t *\n+\t * 3xs: h-8 (32px)\n+\t *\n+\t * 2xs: h-12 (48px)\n+\t *\n+\t * xs: h-16 (64px)\n+\t *\n+\t * sm: h-20 (80px)\n+\t *\n+\t * md: h-24 (96px)\n+\t *\n+\t * lg: h-28 (112px)\n+\t *\n+\t * xl: h-32 (128px)\n+\t *\n+\t * 2xl: h-36 (144px)\n+\t *\n+\t * 3xl: h-40 (160px)\n+\t *\n+\t * 4xl: h-44 (176px)\n+\t */\n+\tsize:\n+\t\t| '4xs'\n+\t\t| '3xs'\n+\t\t| '2xs'\n+\t\t| 'xs'\n+\t\t| 'sm'\n+\t\t| 'md'\n+\t\t| 'lg'\n+\t\t| 'xl'\n+\t\t| '2xl'\n+\t\t| '3xl'\n+\t\t| '4xl'\n+}) {\n+\tconst options: Record = {\n+\t\t'4xs': 'h-4',\n+\t\t'3xs': 'h-8',\n+\t\t'2xs': 'h-12',\n+\t\txs: 'h-16',\n+\t\tsm: 'h-20',\n+\t\tmd: 'h-24',\n+\t\tlg: 'h-28',\n+\t\txl: 'h-32',\n+\t\t'2xl': 'h-36',\n+\t\t'3xl': 'h-40',\n+\t\t'4xl': 'h-44',\n+\t}\n+\tconst className = options[size]\n+\treturn

\n+}\ndiff --git a/app/components/toaster.tsx b/app/components/toaster.tsx\nnew file mode 100644\nindex 0000000..954b2db\n--- /dev/null\n+++ b/app/components/toaster.tsx\n@@ -0,0 +1,16 @@\n+import { useEffect } from 'react'\n+import { toast as showToast } from 'sonner'\n+import { type Toast } from '#app/utils/toast.server.ts'\n+\n+export function useToast(toast?: Toast | null) {\n+\tuseEffect(() => {\n+\t\tif (toast) {\n+\t\t\tsetTimeout(() => {\n+\t\t\t\tshowToast[toast.type](toast.title, {\n+\t\t\t\t\tid: toast.id,\n+\t\t\t\t\tdescription: toast.description,\n+\t\t\t\t})\n+\t\t\t}, 0)\n+\t\t}\n+\t}, [toast])\n+}\ndiff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx\nnew file mode 100644\nindex 0000000..5db2e43\n--- /dev/null\n+++ b/app/components/ui/button.tsx\n@@ -0,0 +1,60 @@\n+import { Slot } from '@radix-ui/react-slot'\n+import { cva, type VariantProps } from 'class-variance-authority'\n+import * as React from 'react'\n+\n+import { cn } from '#app/utils/misc.tsx'\n+\n+const buttonVariants = cva(\n+\t'ring-ring ring-offset-background inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-2 outline-hidden transition-colors focus-within:ring-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',\n+\t{\n+\t\tvariants: {\n+\t\t\tvariant: {\n+\t\t\t\tdefault: 'bg-primary text-primary-foreground hover:bg-primary/80',\n+\t\t\t\tdestructive:\n+\t\t\t\t\t'bg-destructive text-destructive-foreground hover:bg-destructive/80',\n+\t\t\t\toutline:\n+\t\t\t\t\t'border-input bg-background hover:bg-accent hover:text-accent-foreground border',\n+\t\t\t\tsecondary:\n+\t\t\t\t\t'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n+\t\t\t\tghost: 'hover:bg-accent hover:text-accent-foreground',\n+\t\t\t\tlink: 'text-primary underline-offset-4 hover:underline',\n+\t\t\t},\n+\t\t\tsize: {\n+\t\t\t\tdefault: 'h-10 px-4 py-2',\n+\t\t\t\twide: 'px-24 py-5',\n+\t\t\t\tsm: 'h-9 rounded-md px-3',\n+\t\t\t\tlg: 'h-11 rounded-md px-8',\n+\t\t\t\tpill: 'px-12 py-3 leading-3',\n+\t\t\t\ticon: 'size-10',\n+\t\t\t},\n+\t\t},\n+\t\tdefaultVariants: {\n+\t\t\tvariant: 'default',\n+\t\t\tsize: 'default',\n+\t\t},\n+\t},\n+)\n+\n+export type ButtonVariant = VariantProps\n+\n+const Button = ({\n+\tclassName,\n+\tvariant,\n+\tsize,\n+\tasChild = false,\n+\t...props\n+}: React.ComponentProps<'button'> &\n+\tButtonVariant & {\n+\t\tasChild?: boolean\n+\t}) => {\n+\tconst Comp = asChild ? Slot : 'button'\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+export { Button, buttonVariants }\ndiff --git a/app/components/ui/checkbox.tsx b/app/components/ui/checkbox.tsx\nnew file mode 100644\nindex 0000000..17a4b37\n--- /dev/null\n+++ b/app/components/ui/checkbox.tsx\n@@ -0,0 +1,41 @@\n+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'\n+import * as React from 'react'\n+\n+import { cn } from '#app/utils/misc.tsx'\n+\n+export type CheckboxProps = Omit<\n+\tReact.ComponentPropsWithoutRef,\n+\t'type'\n+> & {\n+\ttype?: string\n+}\n+\n+const Checkbox = ({\n+\tclassName,\n+\t...props\n+}: React.ComponentProps) => (\n+\t\n+\t\t\n+\t\t\t\n+\t\t\n+\t\n+)\n+\n+export { Checkbox }\ndiff --git a/app/components/ui/dropdown-menu.tsx b/app/components/ui/dropdown-menu.tsx\nnew file mode 100644\nindex 0000000..2e7484e\n--- /dev/null\n+++ b/app/components/ui/dropdown-menu.tsx\n@@ -0,0 +1,243 @@\n+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\n+import * as React from 'react'\n+\n+import { cn } from '#app/utils/misc.tsx'\n+\n+function DropdownMenu(\n+\tprops: React.ComponentProps,\n+) {\n+\treturn \n+}\n+\n+function DropdownMenuPortal(\n+\tprops: React.ComponentProps,\n+) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+function DropdownMenuTrigger(\n+\tprops: React.ComponentProps,\n+) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+function DropdownMenuGroup(\n+\tprops: React.ComponentProps,\n+) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+function DropdownMenuSub(\n+\tprops: React.ComponentProps,\n+) {\n+\treturn \n+}\n+\n+function DropdownMenuRadioGroup(\n+\tprops: React.ComponentProps,\n+) {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+const DropdownMenuContent = ({\n+\tclassName,\n+\tsideOffset = 4,\n+\t...props\n+}: React.ComponentProps) => (\n+\t\n+\t\t\n+\t\n+)\n+\n+const DropdownMenuSubTrigger = ({\n+\tclassName,\n+\tinset,\n+\tchildren,\n+\t...props\n+}: React.ComponentProps & {\n+\tinset?: boolean\n+}) => (\n+\t\n+\t\t{children}\n+\t\t▶️\n+\t\n+)\n+\n+const DropdownMenuSubContent = ({\n+\tclassName,\n+\t...props\n+}: React.ComponentProps) => (\n+\t\n+)\n+\n+const DropdownMenuItem = ({\n+\tclassName,\n+\tinset,\n+\t...props\n+}: React.ComponentProps & {\n+\tinset?: boolean\n+}) => (\n+\t\n+)\n+\n+const DropdownMenuCheckboxItem = ({\n+\tclassName,\n+\tchildren,\n+\tchecked,\n+\t...props\n+}: React.ComponentProps) => (\n+\t\n+\t\t\n+\t\t\t\n+\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\n+\t\t\t\n+\t\t\n+\t\t{children}\n+\t\n+)\n+\n+const DropdownMenuRadioItem = ({\n+\tclassName,\n+\tchildren,\n+\t...props\n+}: React.ComponentProps) => (\n+\t\n+\t\t\n+\t\t\t\n+\t\t\t\t⚪\n+\t\t\t\n+\t\t\n+\t\t{children}\n+\t\n+)\n+\n+const DropdownMenuLabel = ({\n+\tclassName,\n+\tinset,\n+\t...props\n+}: React.ComponentProps & {\n+\tinset?: boolean\n+}) => (\n+\t\n+)\n+\n+const DropdownMenuSeparator = ({\n+\tclassName,\n+\t...props\n+}: React.ComponentProps) => (\n+\t\n+)\n+\n+const DropdownMenuShortcut = ({\n+\tclassName,\n+\t...props\n+}: React.HTMLAttributes) => {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+export {\n+\tDropdownMenu,\n+\tDropdownMenuTrigger,\n+\tDropdownMenuContent,\n+\tDropdownMenuItem,\n+\tDropdownMenuCheckboxItem,\n+\tDropdownMenuRadioItem,\n+\tDropdownMenuLabel,\n+\tDropdownMenuSeparator,\n+\tDropdownMenuShortcut,\n+\tDropdownMenuGroup,\n+\tDropdownMenuPortal,\n+\tDropdownMenuSub,\n+\tDropdownMenuSubContent,\n+\tDropdownMenuSubTrigger,\n+\tDropdownMenuRadioGroup,\n+}\ndiff --git a/app/components/ui/icon.tsx b/app/components/ui/icon.tsx\nnew file mode 100644\nindex 0000000..21129f2\n--- /dev/null\n+++ b/app/components/ui/icon.tsx\n@@ -0,0 +1,77 @@\n+import { type SVGProps } from 'react'\n+import { cn } from '#app/utils/misc.tsx'\n+import href from './icons/sprite.svg'\n+import { type IconName } from '@/icon-name'\n+\n+export { href }\n+export { IconName }\n+\n+const sizeClassName = {\n+\tfont: 'size-[1em]',\n+\txs: 'size-3',\n+\tsm: 'size-4',\n+\tmd: 'size-5',\n+\tlg: 'size-6',\n+\txl: 'size-7',\n+} as const\n+\n+type Size = keyof typeof sizeClassName\n+\n+const childrenSizeClassName = {\n+\tfont: 'gap-1.5',\n+\txs: 'gap-1.5',\n+\tsm: 'gap-1.5',\n+\tmd: 'gap-2',\n+\tlg: 'gap-2',\n+\txl: 'gap-3',\n+} satisfies Record\n+\n+/**\n+ * Renders an SVG icon. The icon defaults to the size of the font. To make it\n+ * align vertically with neighboring text, you can pass the text as a child of\n+ * the icon and it will be automatically aligned.\n+ * Alternatively, if you're not ok with the icon being to the left of the text,\n+ * you need to wrap the icon and text in a common parent and set the parent to\n+ * display \"flex\" (or \"inline-flex\") with \"items-center\" and a reasonable gap.\n+ *\n+ * Pass `title` prop to the `Icon` component to get `` element rendered\n+ * in the SVG container, providing this way for accessibility.\n+ */\n+export function Icon({\n+\tname,\n+\tsize = 'font',\n+\tclassName,\n+\ttitle,\n+\tchildren,\n+\t...props\n+}: SVGProps<SVGSVGElement> & {\n+\tname: IconName\n+\tsize?: Size\n+\ttitle?: string\n+}) {\n+\tif (children) {\n+\t\treturn (\n+\t\t\t<span\n+\t\t\t\tclassName={`inline-flex items-center ${childrenSizeClassName[size]}`}\n+\t\t\t>\n+\t\t\t\t<Icon\n+\t\t\t\t\tname={name}\n+\t\t\t\t\tsize={size}\n+\t\t\t\t\tclassName={className}\n+\t\t\t\t\ttitle={title}\n+\t\t\t\t\t{...props}\n+\t\t\t\t/>\n+\t\t\t\t{children}\n+\t\t\t</span>\n+\t\t)\n+\t}\n+\treturn (\n+\t\t<svg\n+\t\t\t{...props}\n+\t\t\tclassName={cn(sizeClassName[size], 'inline self-center', className)}\n+\t\t>\n+\t\t\t{title ? <title>{title} : null}\n+\t\t\t\n+\t\t\n+\t)\n+}\ndiff --git a/app/components/ui/input-otp.tsx b/app/components/ui/input-otp.tsx\nnew file mode 100644\nindex 0000000..be99953\n--- /dev/null\n+++ b/app/components/ui/input-otp.tsx\n@@ -0,0 +1,69 @@\n+import { OTPInput, OTPInputContext } from 'input-otp'\n+import * as React from 'react'\n+\n+import { cn } from '#app/utils/misc.tsx'\n+\n+const InputOTP = ({\n+\tclassName,\n+\tcontainerClassName,\n+\t...props\n+}: React.ComponentProps) => (\n+\t\n+)\n+\n+const InputOTPGroup = ({\n+\tclassName,\n+\t...props\n+}: React.ComponentProps<'div'>) => (\n+\t\n+)\n+\n+const InputOTPSlot = ({\n+\tindex,\n+\tclassName,\n+\t...props\n+}: React.ComponentProps<'div'> & {\n+\tindex: number\n+}) => {\n+\tconst inputOTPContext = React.useContext(OTPInputContext)\n+\tconst slot = inputOTPContext.slots[index]\n+\tif (!slot) throw new Error('Invalid slot index')\n+\tconst { char, hasFakeCaret, isActive } = slot\n+\n+\treturn (\n+\t\t\n+\t\t\t{char}\n+\t\t\t{hasFakeCaret && (\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t)}\n+\t\t

\n+\t)\n+}\n+\n+const InputOTPSeparator = (props: React.ComponentProps<'div'>) => (\n+\t

\n+)\n+\n+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\ndiff --git a/app/components/ui/input.tsx b/app/components/ui/input.tsx\nnew file mode 100644\nindex 0000000..0396829\n--- /dev/null\n+++ b/app/components/ui/input.tsx\n@@ -0,0 +1,23 @@\n+import * as React from 'react'\n+\n+import { cn } from '#app/utils/misc.tsx'\n+\n+const Input = ({\n+\tclassName,\n+\ttype,\n+\t...props\n+}: React.ComponentProps<'input'>) => {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+export { Input }\ndiff --git a/app/components/ui/label.tsx b/app/components/ui/label.tsx\nnew file mode 100644\nindex 0000000..1669cf8\n--- /dev/null\n+++ b/app/components/ui/label.tsx\n@@ -0,0 +1,22 @@\n+import * as LabelPrimitive from '@radix-ui/react-label'\n+import { cva } from 'class-variance-authority'\n+import * as React from 'react'\n+\n+import { cn } from '#app/utils/misc.tsx'\n+\n+const labelVariants = cva(\n+\t'text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n+)\n+\n+const Label = ({\n+\tclassName,\n+\t...props\n+}: React.ComponentProps) => (\n+\t\n+)\n+\n+export { Label }\ndiff --git a/app/components/ui/sonner.tsx b/app/components/ui/sonner.tsx\nnew file mode 100644\nindex 0000000..029a2a4\n--- /dev/null\n+++ b/app/components/ui/sonner.tsx\n@@ -0,0 +1,26 @@\n+import { Toaster as Sonner } from 'sonner'\n+\n+type ToasterProps = React.ComponentProps\n+\n+const EpicToaster = ({ theme, ...props }: ToasterProps) => {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+export { EpicToaster }\ndiff --git a/app/components/ui/status-button.tsx b/app/components/ui/status-button.tsx\nnew file mode 100644\nindex 0000000..17f8f56\n--- /dev/null\n+++ b/app/components/ui/status-button.tsx\n@@ -0,0 +1,78 @@\n+import { useSpinDelay } from 'spin-delay'\n+import { cn } from '#app/utils/misc.tsx'\n+import { Button, type ButtonVariant } from './button.tsx'\n+import { Icon } from './icon.tsx'\n+import {\n+\tTooltip,\n+\tTooltipContent,\n+\tTooltipProvider,\n+\tTooltipTrigger,\n+} from './tooltip.tsx'\n+\n+export const StatusButton = ({\n+\tmessage,\n+\tstatus,\n+\tclassName,\n+\tchildren,\n+\tspinDelay,\n+\t...props\n+}: React.ComponentProps<'button'> &\n+\tButtonVariant & {\n+\t\tstatus: 'pending' | 'success' | 'error' | 'idle'\n+\t\tmessage?: string | null\n+\t\tspinDelay?: Parameters[1]\n+\t}) => {\n+\tconst delayedPending = useSpinDelay(status === 'pending', {\n+\t\tdelay: 400,\n+\t\tminDuration: 300,\n+\t\t...spinDelay,\n+\t})\n+\tconst companion = {\n+\t\tpending: delayedPending ? (\n+\t\t\t\n+\t\t\t\t\n+\t\t\t

\n+\t\t) : null,\n+\t\tsuccess: (\n+\t\t\t\n+\t\t\t\t\n+\t\t\t\n+\t\t),\n+\t\terror: (\n+\t\t\t\n+\t\t\t\t\n+\t\t\t\n+\t\t),\n+\t\tidle: null,\n+\t}[status]\n+\n+\treturn (\n+\t\t\n+\t)\n+}\n+StatusButton.displayName = 'Button'\ndiff --git a/app/components/ui/textarea.tsx b/app/components/ui/textarea.tsx\nnew file mode 100644\nindex 0000000..0acaa96\n--- /dev/null\n+++ b/app/components/ui/textarea.tsx\n@@ -0,0 +1,20 @@\n+import * as React from 'react'\n+\n+import { cn } from '#app/utils/misc.tsx'\n+\n+const Textarea = ({\n+\tclassName,\n+\t...props\n+}: React.ComponentProps<'textarea'>) => {\n+\treturn (\n+\t\t\n+\t)\n+}\n+\n+export { Textarea }\ndiff --git a/app/components/ui/tooltip.tsx b/app/components/ui/tooltip.tsx\nnew file mode 100644\nindex 0000000..0b6510a\n--- /dev/null\n+++ b/app/components/ui/tooltip.tsx\n@@ -0,0 +1,42 @@\n+import * as TooltipPrimitive from '@radix-ui/react-tooltip'\n+import * as React from 'react'\n+\n+import { cn } from '#app/utils/misc.tsx'\n+\n+function TooltipProvider(\n+\tprops: React.ComponentProps,\n+) {\n+\treturn \n+}\n+\n+function Tooltip(props: React.ComponentProps) {\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\n+\t)\n+}\n+\n+function TooltipTrigger(\n+\tprops: React.ComponentProps,\n+) {\n+\treturn \n+}\n+\n+const TooltipContent = ({\n+\tclassName,\n+\tsideOffset = 4,\n+\t...props\n+}: React.ComponentProps) => (\n+\t\n+)\n+\n+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\ndiff --git a/app/components/user-dropdown.tsx b/app/components/user-dropdown.tsx\nnew file mode 100644\nindex 0000000..2782c0b\n--- /dev/null\n+++ b/app/components/user-dropdown.tsx\n@@ -0,0 +1,71 @@\n+import { Img } from 'openimg/react'\n+import { useRef } from 'react'\n+import { Link, Form } from 'react-router'\n+import { getUserImgSrc } from '#app/utils/misc.tsx'\n+import { useUser } from '#app/utils/user.ts'\n+import { Button } from './ui/button'\n+import {\n+\tDropdownMenu,\n+\tDropdownMenuTrigger,\n+\tDropdownMenuPortal,\n+\tDropdownMenuContent,\n+\tDropdownMenuItem,\n+} from './ui/dropdown-menu'\n+import { Icon } from './ui/icon'\n+\n+export function UserDropdown() {\n+\tconst user = useUser()\n+\tconst formRef = useRef(null)\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\t\t\n+\t\t\t\n+\t\t\t\n+\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\tProfile\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\tNotes\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\n+\t\t\t\n+\t\t\n+\t)\n+}\ndiff --git a/app/entry.client.tsx b/app/entry.client.tsx\nnew file mode 100644\nindex 0000000..9b7749f\n--- /dev/null\n+++ b/app/entry.client.tsx\n@@ -0,0 +1,11 @@\n+import { startTransition } from 'react'\n+import { hydrateRoot } from 'react-dom/client'\n+import { HydratedRouter } from 'react-router/dom'\n+\n+if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {\n+\tvoid import('./utils/monitoring.client.tsx').then(({ init }) => init())\n+}\n+\n+startTransition(() => {\n+\thydrateRoot(document, )\n+})\ndiff --git a/app/entry.server.tsx b/app/entry.server.tsx\nnew file mode 100644\nindex 0000000..8d8b1de\n--- /dev/null\n+++ b/app/entry.server.tsx\n@@ -0,0 +1,143 @@\n+import crypto from 'node:crypto'\n+import { PassThrough } from 'node:stream'\n+import { styleText } from 'node:util'\n+import { contentSecurity } from '@nichtsam/helmet/content'\n+import { createReadableStreamFromReadable } from '@react-router/node'\n+import * as Sentry from '@sentry/react-router'\n+import { isbot } from 'isbot'\n+import { renderToPipeableStream } from 'react-dom/server'\n+import {\n+\tServerRouter,\n+\ttype LoaderFunctionArgs,\n+\ttype ActionFunctionArgs,\n+\ttype HandleDocumentRequestFunction,\n+} from 'react-router'\n+import { getEnv, init } from './utils/env.server.ts'\n+import { getInstanceInfo } from './utils/litefs.server.ts'\n+import { NonceProvider } from './utils/nonce-provider.ts'\n+import { makeTimings } from './utils/timing.server.ts'\n+\n+export const streamTimeout = 5000\n+\n+init()\n+global.ENV = getEnv()\n+\n+const MODE = process.env.NODE_ENV ?? 'development'\n+\n+type DocRequestArgs = Parameters\n+\n+export default async function handleRequest(...args: DocRequestArgs) {\n+\tconst [request, responseStatusCode, responseHeaders, reactRouterContext] =\n+\t\targs\n+\tconst { currentInstance, primaryInstance } = await getInstanceInfo()\n+\tresponseHeaders.set('fly-region', process.env.FLY_REGION ?? 'unknown')\n+\tresponseHeaders.set('fly-app', process.env.FLY_APP_NAME ?? 'unknown')\n+\tresponseHeaders.set('fly-primary-instance', primaryInstance)\n+\tresponseHeaders.set('fly-instance', currentInstance)\n+\n+\tif (process.env.NODE_ENV === 'production' && process.env.SENTRY_DSN) {\n+\t\tresponseHeaders.append('Document-Policy', 'js-profiling')\n+\t}\n+\n+\tconst callbackName = isbot(request.headers.get('user-agent'))\n+\t\t? 'onAllReady'\n+\t\t: 'onShellReady'\n+\n+\tconst nonce = crypto.randomBytes(16).toString('hex')\n+\treturn new Promise(async (resolve, reject) => {\n+\t\tlet didError = false\n+\t\t// NOTE: this timing will only include things that are rendered in the shell\n+\t\t// and will not include suspended components and deferred loaders\n+\t\tconst timings = makeTimings('render', 'renderToPipeableStream')\n+\n+\t\tconst { pipe, abort } = renderToPipeableStream(\n+\t\t\t\n+\t\t\t\t\n+\t\t\t,\n+\t\t\t{\n+\t\t\t\t[callbackName]: () => {\n+\t\t\t\t\tconst body = new PassThrough()\n+\t\t\t\t\tresponseHeaders.set('Content-Type', 'text/html')\n+\t\t\t\t\tresponseHeaders.append('Server-Timing', timings.toString())\n+\n+\t\t\t\t\tcontentSecurity(responseHeaders, {\n+\t\t\t\t\t\tcrossOriginEmbedderPolicy: false,\n+\t\t\t\t\t\tcontentSecurityPolicy: {\n+\t\t\t\t\t\t\t// NOTE: Remove reportOnly when you're ready to enforce this CSP\n+\t\t\t\t\t\t\treportOnly: true,\n+\t\t\t\t\t\t\tdirectives: {\n+\t\t\t\t\t\t\t\tfetch: {\n+\t\t\t\t\t\t\t\t\t'connect-src': [\n+\t\t\t\t\t\t\t\t\t\tMODE === 'development' ? 'ws:' : undefined,\n+\t\t\t\t\t\t\t\t\t\tprocess.env.SENTRY_DSN ? '*.sentry.io' : undefined,\n+\t\t\t\t\t\t\t\t\t\t\"'self'\",\n+\t\t\t\t\t\t\t\t\t],\n+\t\t\t\t\t\t\t\t\t'font-src': [\"'self'\"],\n+\t\t\t\t\t\t\t\t\t'frame-src': [\"'self'\"],\n+\t\t\t\t\t\t\t\t\t'img-src': [\"'self'\", 'data:'],\n+\t\t\t\t\t\t\t\t\t'script-src': [\n+\t\t\t\t\t\t\t\t\t\t\"'strict-dynamic'\",\n+\t\t\t\t\t\t\t\t\t\t\"'self'\",\n+\t\t\t\t\t\t\t\t\t\t`'nonce-${nonce}'`,\n+\t\t\t\t\t\t\t\t\t],\n+\t\t\t\t\t\t\t\t\t'script-src-attr': [`'nonce-${nonce}'`],\n+\t\t\t\t\t\t\t\t},\n+\t\t\t\t\t\t\t},\n+\t\t\t\t\t\t},\n+\t\t\t\t\t\txFrameOptions: false,\n+\t\t\t\t\t})\n+\n+\t\t\t\t\tresolve(\n+\t\t\t\t\t\tnew Response(createReadableStreamFromReadable(body), {\n+\t\t\t\t\t\t\theaders: responseHeaders,\n+\t\t\t\t\t\t\tstatus: didError ? 500 : responseStatusCode,\n+\t\t\t\t\t\t}),\n+\t\t\t\t\t)\n+\t\t\t\t\tpipe(body)\n+\t\t\t\t},\n+\t\t\t\tonShellError: (err: unknown) => {\n+\t\t\t\t\treject(err)\n+\t\t\t\t},\n+\t\t\t\tonError: () => {\n+\t\t\t\t\tdidError = true\n+\t\t\t\t},\n+\t\t\t\tnonce,\n+\t\t\t},\n+\t\t)\n+\n+\t\tsetTimeout(abort, streamTimeout + 5000)\n+\t})\n+}\n+\n+export async function handleDataRequest(response: Response) {\n+\tconst { currentInstance, primaryInstance } = await getInstanceInfo()\n+\tresponse.headers.set('fly-region', process.env.FLY_REGION ?? 'unknown')\n+\tresponse.headers.set('fly-app', process.env.FLY_APP_NAME ?? 'unknown')\n+\tresponse.headers.set('fly-primary-instance', primaryInstance)\n+\tresponse.headers.set('fly-instance', currentInstance)\n+\n+\treturn response\n+}\n+\n+export function handleError(\n+\terror: unknown,\n+\t{ request }: LoaderFunctionArgs | ActionFunctionArgs,\n+): void {\n+\t// Skip capturing if the request is aborted as Remix docs suggest\n+\t// Ref: https://remix.run/docs/en/main/file-conventions/entry.server#handleerror\n+\tif (request.signal.aborted) {\n+\t\treturn\n+\t}\n+\n+\tif (error instanceof Error) {\n+\t\tconsole.error(styleText('red', String(error.stack)))\n+\t} else {\n+\t\tconsole.error(error)\n+\t}\n+\n+\tSentry.captureException(error)\n+}\ndiff --git a/app/root.tsx b/app/root.tsx\nnew file mode 100644\nindex 0000000..0f0d1cb\n--- /dev/null\n+++ b/app/root.tsx\n@@ -0,0 +1,263 @@\n+import { OpenImgContextProvider } from 'openimg/react'\n+import {\n+\tdata,\n+\tLink,\n+\tLinks,\n+\tMeta,\n+\tOutlet,\n+\tScripts,\n+\tScrollRestoration,\n+\tuseLoaderData,\n+\tuseMatches,\n+} from 'react-router'\n+import { HoneypotProvider } from 'remix-utils/honeypot/react'\n+import { type Route } from './+types/root.ts'\n+import appleTouchIconAssetUrl from './assets/favicons/apple-touch-icon.png'\n+import faviconAssetUrl from './assets/favicons/favicon.svg'\n+import { GeneralErrorBoundary } from './components/error-boundary.tsx'\n+import { EpicProgress } from './components/progress-bar.tsx'\n+import { SearchBar } from './components/search-bar.tsx'\n+import { useToast } from './components/toaster.tsx'\n+import { Button } from './components/ui/button.tsx'\n+import { href as iconsHref } from './components/ui/icon.tsx'\n+import { EpicToaster } from './components/ui/sonner.tsx'\n+import { UserDropdown } from './components/user-dropdown.tsx'\n+import {\n+\tThemeSwitch,\n+\tuseOptionalTheme,\n+\tuseTheme,\n+} from './routes/resources+/theme-switch.tsx'\n+import tailwindStyleSheetUrl from './styles/tailwind.css?url'\n+import { getUserId, logout } from './utils/auth.server.ts'\n+import { ClientHintCheck, getHints } from './utils/client-hints.tsx'\n+import { prisma } from './utils/db.server.ts'\n+import { getEnv } from './utils/env.server.ts'\n+import { pipeHeaders } from './utils/headers.server.ts'\n+import { honeypot } from './utils/honeypot.server.ts'\n+import { combineHeaders, getDomainUrl, getImgSrc } from './utils/misc.tsx'\n+import { useNonce } from './utils/nonce-provider.ts'\n+import { type Theme, getTheme } from './utils/theme.server.ts'\n+import { makeTimings, time } from './utils/timing.server.ts'\n+import { getToast } from './utils/toast.server.ts'\n+import { useOptionalUser } from './utils/user.ts'\n+\n+export const links: Route.LinksFunction = () => {\n+\treturn [\n+\t\t// Preload svg sprite as a resource to avoid render blocking\n+\t\t{ rel: 'preload', href: iconsHref, as: 'image' },\n+\t\t{\n+\t\t\trel: 'icon',\n+\t\t\thref: '/favicon.ico',\n+\t\t\tsizes: '48x48',\n+\t\t},\n+\t\t{ rel: 'icon', type: 'image/svg+xml', href: faviconAssetUrl },\n+\t\t{ rel: 'apple-touch-icon', href: appleTouchIconAssetUrl },\n+\t\t{\n+\t\t\trel: 'manifest',\n+\t\t\thref: '/site.webmanifest',\n+\t\t\tcrossOrigin: 'use-credentials',\n+\t\t} as const, // necessary to make typescript happy\n+\t\t{ rel: 'stylesheet', href: tailwindStyleSheetUrl },\n+\t].filter(Boolean)\n+}\n+\n+export const meta: Route.MetaFunction = ({ data }) => {\n+\treturn [\n+\t\t{ title: data ? 'Epic Notes' : 'Error | Epic Notes' },\n+\t\t{ name: 'description', content: `Your own captain's log` },\n+\t]\n+}\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst timings = makeTimings('root loader')\n+\tconst userId = await time(() => getUserId(request), {\n+\t\ttimings,\n+\t\ttype: 'getUserId',\n+\t\tdesc: 'getUserId in root',\n+\t})\n+\n+\tconst user = userId\n+\t\t? await time(\n+\t\t\t\t() =>\n+\t\t\t\t\tprisma.user.findUnique({\n+\t\t\t\t\t\tselect: {\n+\t\t\t\t\t\t\tid: true,\n+\t\t\t\t\t\t\tname: true,\n+\t\t\t\t\t\t\tusername: true,\n+\t\t\t\t\t\t\timage: { select: { objectKey: true } },\n+\t\t\t\t\t\t\troles: {\n+\t\t\t\t\t\t\t\tselect: {\n+\t\t\t\t\t\t\t\t\tname: true,\n+\t\t\t\t\t\t\t\t\tpermissions: {\n+\t\t\t\t\t\t\t\t\t\tselect: { entity: true, action: true, access: true },\n+\t\t\t\t\t\t\t\t\t},\n+\t\t\t\t\t\t\t\t},\n+\t\t\t\t\t\t\t},\n+\t\t\t\t\t\t},\n+\t\t\t\t\t\twhere: { id: userId },\n+\t\t\t\t\t}),\n+\t\t\t\t{ timings, type: 'find user', desc: 'find user in root' },\n+\t\t\t)\n+\t\t: null\n+\tif (userId && !user) {\n+\t\tconsole.info('something weird happened')\n+\t\t// something weird happened... The user is authenticated but we can't find\n+\t\t// them in the database. Maybe they were deleted? Let's log them out.\n+\t\tawait logout({ request, redirectTo: '/' })\n+\t}\n+\tconst { toast, headers: toastHeaders } = await getToast(request)\n+\tconst honeyProps = await honeypot.getInputProps()\n+\n+\treturn data(\n+\t\t{\n+\t\t\tuser,\n+\t\t\trequestInfo: {\n+\t\t\t\thints: getHints(request),\n+\t\t\t\torigin: getDomainUrl(request),\n+\t\t\t\tpath: new URL(request.url).pathname,\n+\t\t\t\tuserPrefs: {\n+\t\t\t\t\ttheme: getTheme(request),\n+\t\t\t\t},\n+\t\t\t},\n+\t\t\tENV: getEnv(),\n+\t\t\ttoast,\n+\t\t\thoneyProps,\n+\t\t},\n+\t\t{\n+\t\t\theaders: combineHeaders(\n+\t\t\t\t{ 'Server-Timing': timings.toString() },\n+\t\t\t\ttoastHeaders,\n+\t\t\t),\n+\t\t},\n+\t)\n+}\n+\n+export const headers: Route.HeadersFunction = pipeHeaders\n+\n+function Document({\n+\tchildren,\n+\tnonce,\n+\ttheme = 'light',\n+\tenv = {},\n+}: {\n+\tchildren: React.ReactNode\n+\tnonce: string\n+\ttheme?: Theme\n+\tenv?: Record\n+}) {\n+\tconst allowIndexing = ENV.ALLOW_INDEXING !== 'false'\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t{allowIndexing ? null : (\n+\t\t\t\t\t\n+\t\t\t\t)}\n+\t\t\t\t\n+\t\t\t\n+\t\t\t\n+\t\t\t\t{children}\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\n+\t\t\n+\t)\n+}\n+\n+export function Layout({ children }: { children: React.ReactNode }) {\n+\t// if there was an error running the loader, data could be missing\n+\tconst data = useLoaderData()\n+\tconst nonce = useNonce()\n+\tconst theme = useOptionalTheme()\n+\treturn (\n+\t\t\n+\t\t\t{children}\n+\t\t\n+\t)\n+}\n+\n+function App() {\n+\tconst data = useLoaderData()\n+\tconst user = useOptionalUser()\n+\tconst theme = useTheme()\n+\tconst matches = useMatches()\n+\tconst isOnSearchPage = matches.find((m) => m.id === 'routes/users+/index')\n+\tconst searchBar = isOnSearchPage ? null : \n+\tuseToast(data.toast)\n+\n+\treturn (\n+\t\t\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t

\n+\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t

\n+\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t

\n+\t\t\t\n+\t\t\t\n+\t\t\n+\t)\n+}\n+\n+function Logo() {\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\t\tepic\n+\t\t\t\n+\t\t\t\n+\t\t\t\tnotes\n+\t\t\t\n+\t\t\n+\t)\n+}\n+\n+function AppWithProviders() {\n+\tconst data = useLoaderData()\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\n+\t)\n+}\n+\n+export default AppWithProviders\n+\n+// this is a last resort error boundary. There's not much useful information we\n+// can offer at this level.\n+export const ErrorBoundary = GeneralErrorBoundary\ndiff --git a/app/routes/$.tsx b/app/routes/$.tsx\nnew file mode 100644\nindex 0000000..791f7e2\n--- /dev/null\n+++ b/app/routes/$.tsx\n@@ -0,0 +1,47 @@\n+// This is called a \"splat route\" and as it's in the root `/app/routes/`\n+// directory, it's a catchall. If no other routes match, this one will and we\n+// can know that the user is hitting a URL that doesn't exist. By throwing a\n+// 404 from the loader, we can force the error boundary to render which will\n+// ensure the user gets the right status code and we can display a nicer error\n+// message for them than the Remix and/or browser default.\n+\n+import { Link, useLocation } from 'react-router'\n+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+\n+export function loader() {\n+\tthrow new Response('Not found', { status: 404 })\n+}\n+\n+export function action() {\n+\tthrow new Response('Not found', { status: 404 })\n+}\n+\n+export default function NotFound() {\n+\t// due to the loader, this component will never be rendered, but we'll return\n+\t// the error boundary just in case.\n+\treturn \n+}\n+\n+export function ErrorBoundary() {\n+\tconst location = useLocation()\n+\treturn (\n+\t\t (\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

We can't find this page:

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{location.pathname}\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\tBack to home\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t),\n+\t\t\t}}\n+\t\t/>\n+\t)\n+}\ndiff --git a/app/routes/_auth+/auth.$provider.callback.test.ts b/app/routes/_auth+/auth.$provider.callback.test.ts\nnew file mode 100644\nindex 0000000..643e453\n--- /dev/null\n+++ b/app/routes/_auth+/auth.$provider.callback.test.ts\n@@ -0,0 +1,265 @@\n+import { invariant } from '@epic-web/invariant'\n+import { faker } from '@faker-js/faker'\n+import { SetCookie } from '@mjackson/headers'\n+import { http } from 'msw'\n+import { afterEach, expect, test } from 'vitest'\n+import { twoFAVerificationType } from '#app/routes/settings+/profile.two-factor.tsx'\n+import { getSessionExpirationDate, sessionKey } from '#app/utils/auth.server.ts'\n+import { GITHUB_PROVIDER_NAME } from '#app/utils/connections.tsx'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { authSessionStorage } from '#app/utils/session.server.ts'\n+import { generateTOTP } from '#app/utils/totp.server.ts'\n+import { createUser } from '#tests/db-utils.ts'\n+import { insertGitHubUser, deleteGitHubUsers } from '#tests/mocks/github.ts'\n+import { server } from '#tests/mocks/index.ts'\n+import { consoleError } from '#tests/setup/setup-test-env.ts'\n+import { BASE_URL, convertSetCookieToCookie } from '#tests/utils.ts'\n+import { loader } from './auth.$provider.callback.ts'\n+\n+const ROUTE_PATH = '/auth/github/callback'\n+const PARAMS = { provider: 'github' }\n+\n+afterEach(async () => {\n+\tawait deleteGitHubUsers()\n+})\n+\n+test('a new user goes to onboarding', async () => {\n+\tconst request = await setupRequest()\n+\tconst response = await loader({ request, params: PARAMS, context: {} }).catch(\n+\t\t(e) => e,\n+\t)\n+\texpect(response).toHaveRedirect('/onboarding/github')\n+})\n+\n+test('when auth fails, send the user to login with a toast', async () => {\n+\tconsoleError.mockImplementation(() => {})\n+\tserver.use(\n+\t\thttp.post('https://github.com/login/oauth/access_token', async () => {\n+\t\t\treturn new Response(null, { status: 400 })\n+\t\t}),\n+\t)\n+\tconst request = await setupRequest()\n+\tconst response = await loader({ request, params: PARAMS, context: {} }).catch(\n+\t\t(e) => e,\n+\t)\n+\tinvariant(response instanceof Response, 'response should be a Response')\n+\texpect(response).toHaveRedirect('/login')\n+\tawait expect(response).toSendToast(\n+\t\texpect.objectContaining({\n+\t\t\ttitle: 'Auth Failed',\n+\t\t\ttype: 'error',\n+\t\t}),\n+\t)\n+\texpect(consoleError).toHaveBeenCalledTimes(1)\n+})\n+\n+test('when a user is logged in, it creates the connection', async () => {\n+\tconst githubUser = await insertGitHubUser()\n+\tconst session = await setupUser()\n+\tconst request = await setupRequest({\n+\t\tsessionId: session.id,\n+\t\tcode: githubUser.code,\n+\t})\n+\tconst response = await loader({ request, params: PARAMS, context: {} })\n+\texpect(response).toHaveRedirect('/settings/profile/connections')\n+\tawait expect(response).toSendToast(\n+\t\texpect.objectContaining({\n+\t\t\ttitle: 'Connected',\n+\t\t\ttype: 'success',\n+\t\t\tdescription: expect.stringContaining(githubUser.profile.login),\n+\t\t}),\n+\t)\n+\tconst connection = await prisma.connection.findFirst({\n+\t\tselect: { id: true },\n+\t\twhere: {\n+\t\t\tuserId: session.userId,\n+\t\t\tproviderId: githubUser.profile.id.toString(),\n+\t\t},\n+\t})\n+\texpect(\n+\t\tconnection,\n+\t\t'the connection was not created in the database',\n+\t).toBeTruthy()\n+})\n+\n+test(`when a user is logged in and has already connected, it doesn't do anything and just redirects the user back to the connections page`, async () => {\n+\tconst session = await setupUser()\n+\tconst githubUser = await insertGitHubUser()\n+\tawait prisma.connection.create({\n+\t\tdata: {\n+\t\t\tproviderName: GITHUB_PROVIDER_NAME,\n+\t\t\tuserId: session.userId,\n+\t\t\tproviderId: githubUser.profile.id.toString(),\n+\t\t},\n+\t})\n+\tconst request = await setupRequest({\n+\t\tsessionId: session.id,\n+\t\tcode: githubUser.code,\n+\t})\n+\tconst response = await loader({ request, params: PARAMS, context: {} })\n+\texpect(response).toHaveRedirect('/settings/profile/connections')\n+\tawait expect(response).toSendToast(\n+\t\texpect.objectContaining({\n+\t\t\ttitle: 'Already Connected',\n+\t\t\tdescription: expect.stringContaining(githubUser.profile.login),\n+\t\t}),\n+\t)\n+})\n+\n+test('when a user exists with the same email, create connection and make session', async () => {\n+\tconst githubUser = await insertGitHubUser()\n+\tconst email = githubUser.primaryEmail.toLowerCase()\n+\tconst { userId } = await setupUser({ ...createUser(), email })\n+\tconst request = await setupRequest({ code: githubUser.code })\n+\tconst response = await loader({ request, params: PARAMS, context: {} })\n+\n+\texpect(response).toHaveRedirect('/')\n+\n+\tawait expect(response).toSendToast(\n+\t\texpect.objectContaining({\n+\t\t\ttype: 'message',\n+\t\t\tdescription: expect.stringContaining(githubUser.profile.login),\n+\t\t}),\n+\t)\n+\n+\tconst connection = await prisma.connection.findFirst({\n+\t\tselect: { id: true },\n+\t\twhere: {\n+\t\t\tuserId: userId,\n+\t\t\tproviderId: githubUser.profile.id.toString(),\n+\t\t},\n+\t})\n+\texpect(\n+\t\tconnection,\n+\t\t'the connection was not created in the database',\n+\t).toBeTruthy()\n+\n+\tawait expect(response).toHaveSessionForUser(userId)\n+})\n+\n+test('gives an error if the account is already connected to another user', async () => {\n+\tconst githubUser = await insertGitHubUser()\n+\tawait prisma.user.create({\n+\t\tdata: {\n+\t\t\t...createUser(),\n+\t\t\tconnections: {\n+\t\t\t\tcreate: {\n+\t\t\t\t\tproviderName: GITHUB_PROVIDER_NAME,\n+\t\t\t\t\tproviderId: githubUser.profile.id.toString(),\n+\t\t\t\t},\n+\t\t\t},\n+\t\t},\n+\t})\n+\tconst session = await setupUser()\n+\tconst request = await setupRequest({\n+\t\tsessionId: session.id,\n+\t\tcode: githubUser.code,\n+\t})\n+\tconst response = await loader({ request, params: PARAMS, context: {} })\n+\texpect(response).toHaveRedirect('/settings/profile/connections')\n+\tawait expect(response).toSendToast(\n+\t\texpect.objectContaining({\n+\t\t\ttitle: 'Already Connected',\n+\t\t\tdescription: expect.stringContaining(\n+\t\t\t\t'already connected to another account',\n+\t\t\t),\n+\t\t}),\n+\t)\n+})\n+\n+test('if a user is not logged in, but the connection exists, make a session', async () => {\n+\tconst githubUser = await insertGitHubUser()\n+\tconst { userId } = await setupUser()\n+\tawait prisma.connection.create({\n+\t\tdata: {\n+\t\t\tproviderName: GITHUB_PROVIDER_NAME,\n+\t\t\tproviderId: githubUser.profile.id.toString(),\n+\t\t\tuserId,\n+\t\t},\n+\t})\n+\tconst request = await setupRequest({ code: githubUser.code })\n+\tconst response = await loader({ request, params: PARAMS, context: {} })\n+\texpect(response).toHaveRedirect('/')\n+\tawait expect(response).toHaveSessionForUser(userId)\n+})\n+\n+test('if a user is not logged in, but the connection exists and they have enabled 2FA, send them to verify their 2FA and do not make a session', async () => {\n+\tconst githubUser = await insertGitHubUser()\n+\tconst { userId } = await setupUser()\n+\tawait prisma.connection.create({\n+\t\tdata: {\n+\t\t\tproviderName: GITHUB_PROVIDER_NAME,\n+\t\t\tproviderId: githubUser.profile.id.toString(),\n+\t\t\tuserId,\n+\t\t},\n+\t})\n+\tconst { otp: _otp, ...config } = await generateTOTP()\n+\tawait prisma.verification.create({\n+\t\tdata: {\n+\t\t\ttype: twoFAVerificationType,\n+\t\t\ttarget: userId,\n+\t\t\t...config,\n+\t\t},\n+\t})\n+\tconst request = await setupRequest({ code: githubUser.code })\n+\tconst response = await loader({ request, params: PARAMS, context: {} })\n+\tconst searchParams = new URLSearchParams({\n+\t\ttype: twoFAVerificationType,\n+\t\ttarget: userId,\n+\t\tredirectTo: '/',\n+\t})\n+\texpect(response).toHaveRedirect(`/verify?${searchParams}`)\n+})\n+\n+async function setupRequest({\n+\tsessionId,\n+\tcode = faker.string.uuid(),\n+}: { sessionId?: string; code?: string } = {}) {\n+\tconst url = new URL(ROUTE_PATH, BASE_URL)\n+\tconst state = faker.string.uuid()\n+\turl.searchParams.set('state', state)\n+\turl.searchParams.set('code', code)\n+\tconst authSession = await authSessionStorage.getSession()\n+\tif (sessionId) authSession.set(sessionKey, sessionId)\n+\tconst setSessionCookieHeader =\n+\t\tawait authSessionStorage.commitSession(authSession)\n+\tconst searchParams = new URLSearchParams({ code, state })\n+\tlet authCookie = new SetCookie({\n+\t\tname: 'github',\n+\t\tvalue: searchParams.toString(),\n+\t\tpath: '/',\n+\t\tsameSite: 'Lax',\n+\t\thttpOnly: true,\n+\t\tmaxAge: 60 * 10,\n+\t\tsecure: process.env.NODE_ENV === 'production' || undefined,\n+\t})\n+\tconst request = new Request(url.toString(), {\n+\t\tmethod: 'GET',\n+\t\theaders: {\n+\t\t\tcookie: [\n+\t\t\t\tauthCookie.toString(),\n+\t\t\t\tconvertSetCookieToCookie(setSessionCookieHeader),\n+\t\t\t].join('; '),\n+\t\t},\n+\t})\n+\treturn request\n+}\n+\n+async function setupUser(userData = createUser()) {\n+\tconst session = await prisma.session.create({\n+\t\tdata: {\n+\t\t\texpirationDate: getSessionExpirationDate(),\n+\t\t\tuser: {\n+\t\t\t\tcreate: {\n+\t\t\t\t\t...userData,\n+\t\t\t\t},\n+\t\t\t},\n+\t\t},\n+\t\tselect: {\n+\t\t\tid: true,\n+\t\t\tuserId: true,\n+\t\t},\n+\t})\n+\n+\treturn session\n+}\ndiff --git a/app/routes/_auth+/auth.$provider.callback.ts b/app/routes/_auth+/auth.$provider.callback.ts\nnew file mode 100644\nindex 0000000..cc124ac\n--- /dev/null\n+++ b/app/routes/_auth+/auth.$provider.callback.ts\n@@ -0,0 +1,200 @@\n+import { redirect } from 'react-router'\n+import {\n+\tauthenticator,\n+\tgetSessionExpirationDate,\n+\tgetUserId,\n+} from '#app/utils/auth.server.ts'\n+import { ProviderNameSchema, providerLabels } from '#app/utils/connections.tsx'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { ensurePrimary } from '#app/utils/litefs.server.ts'\n+import { combineHeaders } from '#app/utils/misc.tsx'\n+import {\n+\tnormalizeEmail,\n+\tnormalizeUsername,\n+} from '#app/utils/providers/provider.ts'\n+import {\n+\tdestroyRedirectToHeader,\n+\tgetRedirectCookieValue,\n+} from '#app/utils/redirect-cookie.server.ts'\n+import {\n+\tcreateToastHeaders,\n+\tredirectWithToast,\n+} from '#app/utils/toast.server.ts'\n+import { verifySessionStorage } from '#app/utils/verification.server.ts'\n+import { type Route } from './+types/auth.$provider.callback.ts'\n+import { handleNewSession } from './login.server.ts'\n+import { onboardingEmailSessionKey } from './onboarding.tsx'\n+import { prefilledProfileKey, providerIdKey } from './onboarding_.$provider.tsx'\n+\n+const destroyRedirectTo = { 'set-cookie': destroyRedirectToHeader }\n+\n+export async function loader({ request, params }: Route.LoaderArgs) {\n+\t// this loader performs mutations, so we need to make sure we're on the\n+\t// primary instance to avoid writing to a read-only replica\n+\tawait ensurePrimary()\n+\n+\tconst providerName = ProviderNameSchema.parse(params.provider)\n+\tconst redirectTo = getRedirectCookieValue(request)\n+\tconst label = providerLabels[providerName]\n+\n+\tconst authResult = await authenticator\n+\t\t.authenticate(providerName, request)\n+\t\t.then(\n+\t\t\t(data) =>\n+\t\t\t\t({\n+\t\t\t\t\tsuccess: true,\n+\t\t\t\t\tdata,\n+\t\t\t\t}) as const,\n+\t\t\t(error) =>\n+\t\t\t\t({\n+\t\t\t\t\tsuccess: false,\n+\t\t\t\t\terror,\n+\t\t\t\t}) as const,\n+\t\t)\n+\n+\tif (!authResult.success) {\n+\t\tconsole.error(authResult.error)\n+\t\tthrow await redirectWithToast(\n+\t\t\t'/login',\n+\t\t\t{\n+\t\t\t\ttitle: 'Auth Failed',\n+\t\t\t\tdescription: `There was an error authenticating with ${label}.`,\n+\t\t\t\ttype: 'error',\n+\t\t\t},\n+\t\t\t{ headers: destroyRedirectTo },\n+\t\t)\n+\t}\n+\n+\tconst { data: profile } = authResult\n+\n+\tconst existingConnection = await prisma.connection.findUnique({\n+\t\tselect: { userId: true },\n+\t\twhere: {\n+\t\t\tproviderName_providerId: {\n+\t\t\t\tproviderName,\n+\t\t\t\tproviderId: String(profile.id),\n+\t\t\t},\n+\t\t},\n+\t})\n+\n+\tconst userId = await getUserId(request)\n+\n+\tif (existingConnection && userId) {\n+\t\tif (existingConnection.userId === userId) {\n+\t\t\treturn redirectWithToast(\n+\t\t\t\t'/settings/profile/connections',\n+\t\t\t\t{\n+\t\t\t\t\ttitle: 'Already Connected',\n+\t\t\t\t\tdescription: `Your \"${profile.username}\" ${label} account is already connected.`,\n+\t\t\t\t},\n+\t\t\t\t{ headers: destroyRedirectTo },\n+\t\t\t)\n+\t\t} else {\n+\t\t\treturn redirectWithToast(\n+\t\t\t\t'/settings/profile/connections',\n+\t\t\t\t{\n+\t\t\t\t\ttitle: 'Already Connected',\n+\t\t\t\t\tdescription: `The \"${profile.username}\" ${label} account is already connected to another account.`,\n+\t\t\t\t},\n+\t\t\t\t{ headers: destroyRedirectTo },\n+\t\t\t)\n+\t\t}\n+\t}\n+\n+\t// If we're already logged in, then link the account\n+\tif (userId) {\n+\t\tawait prisma.connection.create({\n+\t\t\tdata: {\n+\t\t\t\tproviderName,\n+\t\t\t\tproviderId: String(profile.id),\n+\t\t\t\tuserId,\n+\t\t\t},\n+\t\t})\n+\t\treturn redirectWithToast(\n+\t\t\t'/settings/profile/connections',\n+\t\t\t{\n+\t\t\t\ttitle: 'Connected',\n+\t\t\t\ttype: 'success',\n+\t\t\t\tdescription: `Your \"${profile.username}\" ${label} account has been connected.`,\n+\t\t\t},\n+\t\t\t{ headers: destroyRedirectTo },\n+\t\t)\n+\t}\n+\n+\t// Connection exists already? Make a new session\n+\tif (existingConnection) {\n+\t\treturn makeSession({ request, userId: existingConnection.userId })\n+\t}\n+\n+\t// if the email matches a user in the db, then link the account and\n+\t// make a new session\n+\tconst user = await prisma.user.findUnique({\n+\t\tselect: { id: true },\n+\t\twhere: { email: profile.email.toLowerCase() },\n+\t})\n+\tif (user) {\n+\t\tawait prisma.connection.create({\n+\t\t\tdata: {\n+\t\t\t\tproviderName,\n+\t\t\t\tproviderId: String(profile.id),\n+\t\t\t\tuserId: user.id,\n+\t\t\t},\n+\t\t})\n+\t\treturn makeSession(\n+\t\t\t{ request, userId: user.id },\n+\t\t\t{\n+\t\t\t\theaders: await createToastHeaders({\n+\t\t\t\t\ttitle: 'Connected',\n+\t\t\t\t\tdescription: `Your \"${profile.username}\" ${label} account has been connected.`,\n+\t\t\t\t}),\n+\t\t\t},\n+\t\t)\n+\t}\n+\n+\t// this is a new user, so let's get them onboarded\n+\tconst verifySession = await verifySessionStorage.getSession()\n+\tverifySession.set(onboardingEmailSessionKey, profile.email)\n+\tverifySession.set(prefilledProfileKey, {\n+\t\t...profile,\n+\t\temail: normalizeEmail(profile.email),\n+\t\tusername:\n+\t\t\ttypeof profile.username === 'string'\n+\t\t\t\t? normalizeUsername(profile.username)\n+\t\t\t\t: undefined,\n+\t})\n+\tverifySession.set(providerIdKey, profile.id)\n+\tconst onboardingRedirect = [\n+\t\t`/onboarding/${providerName}`,\n+\t\tredirectTo ? new URLSearchParams({ redirectTo }) : null,\n+\t]\n+\t\t.filter(Boolean)\n+\t\t.join('?')\n+\treturn redirect(onboardingRedirect, {\n+\t\theaders: combineHeaders(\n+\t\t\t{ 'set-cookie': await verifySessionStorage.commitSession(verifySession) },\n+\t\t\tdestroyRedirectTo,\n+\t\t),\n+\t})\n+}\n+\n+async function makeSession(\n+\t{\n+\t\trequest,\n+\t\tuserId,\n+\t\tredirectTo,\n+\t}: { request: Request; userId: string; redirectTo?: string | null },\n+\tresponseInit?: ResponseInit,\n+) {\n+\tredirectTo ??= '/'\n+\tconst session = await prisma.session.create({\n+\t\tselect: { id: true, expirationDate: true, userId: true },\n+\t\tdata: {\n+\t\t\texpirationDate: getSessionExpirationDate(),\n+\t\t\tuserId,\n+\t\t},\n+\t})\n+\treturn handleNewSession(\n+\t\t{ request, session, redirectTo, remember: true },\n+\t\t{ headers: combineHeaders(responseInit?.headers, destroyRedirectTo) },\n+\t)\n+}\ndiff --git a/app/routes/_auth+/auth_.$provider.ts b/app/routes/_auth+/auth_.$provider.ts\nnew file mode 100644\nindex 0000000..b604005\n--- /dev/null\n+++ b/app/routes/_auth+/auth_.$provider.ts\n@@ -0,0 +1,34 @@\n+import { redirect } from 'react-router'\n+import { authenticator } from '#app/utils/auth.server.ts'\n+import { handleMockAction } from '#app/utils/connections.server.ts'\n+import { ProviderNameSchema } from '#app/utils/connections.tsx'\n+import { getReferrerRoute } from '#app/utils/misc.tsx'\n+import { getRedirectCookieHeader } from '#app/utils/redirect-cookie.server.ts'\n+import { type Route } from './+types/auth_.$provider.ts'\n+\n+export async function loader() {\n+\treturn redirect('/login')\n+}\n+\n+export async function action({ request, params }: Route.ActionArgs) {\n+\tconst providerName = ProviderNameSchema.parse(params.provider)\n+\n+\ttry {\n+\t\tawait handleMockAction(providerName, request)\n+\t\treturn await authenticator.authenticate(providerName, request)\n+\t} catch (error: unknown) {\n+\t\tif (error instanceof Response) {\n+\t\t\tconst formData = await request.formData()\n+\t\t\tconst rawRedirectTo = formData.get('redirectTo')\n+\t\t\tconst redirectTo =\n+\t\t\t\ttypeof rawRedirectTo === 'string'\n+\t\t\t\t\t? rawRedirectTo\n+\t\t\t\t\t: getReferrerRoute(request)\n+\t\t\tconst redirectToCookie = getRedirectCookieHeader(redirectTo)\n+\t\t\tif (redirectToCookie) {\n+\t\t\t\terror.headers.append('set-cookie', redirectToCookie)\n+\t\t\t}\n+\t\t}\n+\t\tthrow error\n+\t}\n+}\ndiff --git a/app/routes/_auth+/forgot-password.tsx b/app/routes/_auth+/forgot-password.tsx\nnew file mode 100644\nindex 0000000..58eb471\n--- /dev/null\n+++ b/app/routes/_auth+/forgot-password.tsx\n@@ -0,0 +1,189 @@\n+import { getFormProps, getInputProps, useForm } from '@conform-to/react'\n+import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import * as E from '@react-email/components'\n+import { data, redirect, Link, useFetcher } from 'react-router'\n+import { HoneypotInputs } from 'remix-utils/honeypot/react'\n+import { z } from 'zod'\n+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'\n+import { ErrorList, Field } from '#app/components/forms.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { sendEmail } from '#app/utils/email.server.ts'\n+import { checkHoneypot } from '#app/utils/honeypot.server.ts'\n+import { EmailSchema, UsernameSchema } from '#app/utils/user-validation.ts'\n+import { type Route } from './+types/forgot-password.ts'\n+import { prepareVerification } from './verify.server.ts'\n+\n+export const handle: SEOHandle = {\n+\tgetSitemapEntries: () => null,\n+}\n+\n+const ForgotPasswordSchema = z.object({\n+\tusernameOrEmail: z.union([EmailSchema, UsernameSchema]),\n+})\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst formData = await request.formData()\n+\tawait checkHoneypot(formData)\n+\tconst submission = await parseWithZod(formData, {\n+\t\tschema: ForgotPasswordSchema.superRefine(async (data, ctx) => {\n+\t\t\tconst user = await prisma.user.findFirst({\n+\t\t\t\twhere: {\n+\t\t\t\t\tOR: [\n+\t\t\t\t\t\t{ email: data.usernameOrEmail },\n+\t\t\t\t\t\t{ username: data.usernameOrEmail },\n+\t\t\t\t\t],\n+\t\t\t\t},\n+\t\t\t\tselect: { id: true },\n+\t\t\t})\n+\t\t\tif (!user) {\n+\t\t\t\tctx.addIssue({\n+\t\t\t\t\tpath: ['usernameOrEmail'],\n+\t\t\t\t\tcode: z.ZodIssueCode.custom,\n+\t\t\t\t\tmessage: 'No user exists with this username or email',\n+\t\t\t\t})\n+\t\t\t\treturn\n+\t\t\t}\n+\t\t}),\n+\t\tasync: true,\n+\t})\n+\tif (submission.status !== 'success') {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply() },\n+\t\t\t{ status: submission.status === 'error' ? 400 : 200 },\n+\t\t)\n+\t}\n+\tconst { usernameOrEmail } = submission.value\n+\n+\tconst user = await prisma.user.findFirstOrThrow({\n+\t\twhere: { OR: [{ email: usernameOrEmail }, { username: usernameOrEmail }] },\n+\t\tselect: { email: true, username: true },\n+\t})\n+\n+\tconst { verifyUrl, redirectTo, otp } = await prepareVerification({\n+\t\tperiod: 10 * 60,\n+\t\trequest,\n+\t\ttype: 'reset-password',\n+\t\ttarget: usernameOrEmail,\n+\t})\n+\n+\tconst response = await sendEmail({\n+\t\tto: user.email,\n+\t\tsubject: `Epic Notes Password Reset`,\n+\t\treact: (\n+\t\t\t\n+\t\t),\n+\t})\n+\n+\tif (response.status === 'success') {\n+\t\treturn redirect(redirectTo.toString())\n+\t} else {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply({ formErrors: [response.error.message] }) },\n+\t\t\t{ status: 500 },\n+\t\t)\n+\t}\n+}\n+\n+function ForgotPasswordEmail({\n+\tonboardingUrl,\n+\totp,\n+}: {\n+\tonboardingUrl: string\n+\totp: string\n+}) {\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\t\t

\n+\t\t\t\t\tEpic Notes Password Reset\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\tHere's your verification code: {otp}\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\tOr click the link:\n+\t\t\t\t

\n+\t\t\t\t{onboardingUrl}\n+\t\t\t\n+\t\t\n+\t)\n+}\n+\n+export const meta: Route.MetaFunction = () => {\n+\treturn [{ title: 'Password Recovery for Epic Notes' }]\n+}\n+\n+export default function ForgotPasswordRoute() {\n+\tconst forgotPassword = useFetcher()\n+\n+\tconst [form, fields] = useForm({\n+\t\tid: 'forgot-password-form',\n+\t\tconstraint: getZodConstraint(ForgotPasswordSchema),\n+\t\tlastResult: forgotPassword.data?.result,\n+\t\tonValidate({ formData }) {\n+\t\t\treturn parseWithZod(formData, { schema: ForgotPasswordSchema })\n+\t\t},\n+\t\tshouldRevalidate: 'onBlur',\n+\t})\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

Forgot Password

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tNo worries, we'll send you reset instructions.\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\tRecover password\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\tBack to Login\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t

\n+\t\t

\n+\t)\n+}\n+\n+export function ErrorBoundary() {\n+\treturn \n+}\ndiff --git a/app/routes/_auth+/login.server.ts b/app/routes/_auth+/login.server.ts\nnew file mode 100644\nindex 0000000..9d5cf0b\n--- /dev/null\n+++ b/app/routes/_auth+/login.server.ts\n@@ -0,0 +1,158 @@\n+import { invariant } from '@epic-web/invariant'\n+import { redirect } from 'react-router'\n+import { safeRedirect } from 'remix-utils/safe-redirect'\n+import { twoFAVerificationType } from '#app/routes/settings+/profile.two-factor.tsx'\n+import { getUserId, sessionKey } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { combineResponseInits } from '#app/utils/misc.tsx'\n+import { authSessionStorage } from '#app/utils/session.server.ts'\n+import { redirectWithToast } from '#app/utils/toast.server.ts'\n+import { verifySessionStorage } from '#app/utils/verification.server.ts'\n+import { getRedirectToUrl, type VerifyFunctionArgs } from './verify.server.ts'\n+\n+const verifiedTimeKey = 'verified-time'\n+const unverifiedSessionIdKey = 'unverified-session-id'\n+const rememberKey = 'remember'\n+\n+export async function handleNewSession(\n+\t{\n+\t\trequest,\n+\t\tsession,\n+\t\tredirectTo,\n+\t\tremember,\n+\t}: {\n+\t\trequest: Request\n+\t\tsession: { userId: string; id: string; expirationDate: Date }\n+\t\tredirectTo?: string\n+\t\tremember: boolean\n+\t},\n+\tresponseInit?: ResponseInit,\n+) {\n+\tconst verification = await prisma.verification.findUnique({\n+\t\tselect: { id: true },\n+\t\twhere: {\n+\t\t\ttarget_type: { target: session.userId, type: twoFAVerificationType },\n+\t\t},\n+\t})\n+\tconst userHasTwoFactor = Boolean(verification)\n+\n+\tif (userHasTwoFactor) {\n+\t\tconst verifySession = await verifySessionStorage.getSession()\n+\t\tverifySession.set(unverifiedSessionIdKey, session.id)\n+\t\tverifySession.set(rememberKey, remember)\n+\t\tconst redirectUrl = getRedirectToUrl({\n+\t\t\trequest,\n+\t\t\ttype: twoFAVerificationType,\n+\t\t\ttarget: session.userId,\n+\t\t\tredirectTo,\n+\t\t})\n+\t\treturn redirect(\n+\t\t\t`${redirectUrl.pathname}?${redirectUrl.searchParams}`,\n+\t\t\tcombineResponseInits(\n+\t\t\t\t{\n+\t\t\t\t\theaders: {\n+\t\t\t\t\t\t'set-cookie':\n+\t\t\t\t\t\t\tawait verifySessionStorage.commitSession(verifySession),\n+\t\t\t\t\t},\n+\t\t\t\t},\n+\t\t\t\tresponseInit,\n+\t\t\t),\n+\t\t)\n+\t} else {\n+\t\tconst authSession = await authSessionStorage.getSession(\n+\t\t\trequest.headers.get('cookie'),\n+\t\t)\n+\t\tauthSession.set(sessionKey, session.id)\n+\n+\t\treturn redirect(\n+\t\t\tsafeRedirect(redirectTo),\n+\t\t\tcombineResponseInits(\n+\t\t\t\t{\n+\t\t\t\t\theaders: {\n+\t\t\t\t\t\t'set-cookie': await authSessionStorage.commitSession(authSession, {\n+\t\t\t\t\t\t\texpires: remember ? session.expirationDate : undefined,\n+\t\t\t\t\t\t}),\n+\t\t\t\t\t},\n+\t\t\t\t},\n+\t\t\t\tresponseInit,\n+\t\t\t),\n+\t\t)\n+\t}\n+}\n+\n+export async function handleVerification({\n+\trequest,\n+\tsubmission,\n+}: VerifyFunctionArgs) {\n+\tinvariant(\n+\t\tsubmission.status === 'success',\n+\t\t'Submission should be successful by now',\n+\t)\n+\tconst authSession = await authSessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\tconst verifySession = await verifySessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\n+\tconst remember = verifySession.get(rememberKey)\n+\tconst { redirectTo } = submission.value\n+\tconst headers = new Headers()\n+\tauthSession.set(verifiedTimeKey, Date.now())\n+\n+\tconst unverifiedSessionId = verifySession.get(unverifiedSessionIdKey)\n+\tif (unverifiedSessionId) {\n+\t\tconst session = await prisma.session.findUnique({\n+\t\t\tselect: { expirationDate: true },\n+\t\t\twhere: { id: unverifiedSessionId },\n+\t\t})\n+\t\tif (!session) {\n+\t\t\tthrow await redirectWithToast('/login', {\n+\t\t\t\ttype: 'error',\n+\t\t\t\ttitle: 'Invalid session',\n+\t\t\t\tdescription: 'Could not find session to verify. Please try again.',\n+\t\t\t})\n+\t\t}\n+\t\tauthSession.set(sessionKey, unverifiedSessionId)\n+\n+\t\theaders.append(\n+\t\t\t'set-cookie',\n+\t\t\tawait authSessionStorage.commitSession(authSession, {\n+\t\t\t\texpires: remember ? session.expirationDate : undefined,\n+\t\t\t}),\n+\t\t)\n+\t} else {\n+\t\theaders.append(\n+\t\t\t'set-cookie',\n+\t\t\tawait authSessionStorage.commitSession(authSession),\n+\t\t)\n+\t}\n+\n+\theaders.append(\n+\t\t'set-cookie',\n+\t\tawait verifySessionStorage.destroySession(verifySession),\n+\t)\n+\n+\treturn redirect(safeRedirect(redirectTo), { headers })\n+}\n+\n+export async function shouldRequestTwoFA(request: Request) {\n+\tconst authSession = await authSessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\tconst verifySession = await verifySessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\tif (verifySession.has(unverifiedSessionIdKey)) return true\n+\tconst userId = await getUserId(request)\n+\tif (!userId) return false\n+\t// if it's over two hours since they last verified, we should request 2FA again\n+\tconst userHasTwoFA = await prisma.verification.findUnique({\n+\t\tselect: { id: true },\n+\t\twhere: { target_type: { target: userId, type: twoFAVerificationType } },\n+\t})\n+\tif (!userHasTwoFA) return false\n+\tconst verifiedTime = authSession.get(verifiedTimeKey) ?? new Date(0)\n+\tconst twoHours = 1000 * 60 * 2\n+\treturn Date.now() - verifiedTime > twoHours\n+}\ndiff --git a/app/routes/_auth+/login.tsx b/app/routes/_auth+/login.tsx\nnew file mode 100644\nindex 0000000..fc12b1c\n--- /dev/null\n+++ b/app/routes/_auth+/login.tsx\n@@ -0,0 +1,307 @@\n+import { getFormProps, getInputProps, useForm } from '@conform-to/react'\n+import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import { startAuthentication } from '@simplewebauthn/browser'\n+import { useOptimistic, useState, useTransition } from 'react'\n+import { data, Form, Link, useNavigate, useSearchParams } from 'react-router'\n+import { HoneypotInputs } from 'remix-utils/honeypot/react'\n+import { z } from 'zod'\n+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'\n+import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'\n+import { Spacer } from '#app/components/spacer.tsx'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import { login, requireAnonymous } from '#app/utils/auth.server.ts'\n+import {\n+\tProviderConnectionForm,\n+\tproviderNames,\n+} from '#app/utils/connections.tsx'\n+import { checkHoneypot } from '#app/utils/honeypot.server.ts'\n+import { getErrorMessage, useIsPending } from '#app/utils/misc.tsx'\n+import { PasswordSchema, UsernameSchema } from '#app/utils/user-validation.ts'\n+import { type Route } from './+types/login.ts'\n+import { handleNewSession } from './login.server.ts'\n+\n+export const handle: SEOHandle = {\n+\tgetSitemapEntries: () => null,\n+}\n+\n+const LoginFormSchema = z.object({\n+\tusername: UsernameSchema,\n+\tpassword: PasswordSchema,\n+\tredirectTo: z.string().optional(),\n+\tremember: z.boolean().optional(),\n+})\n+\n+const AuthenticationOptionsSchema = z.object({\n+\toptions: z.object({ challenge: z.string() }),\n+}) satisfies z.ZodType<{ options: PublicKeyCredentialRequestOptionsJSON }>\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tawait requireAnonymous(request)\n+\treturn {}\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tawait requireAnonymous(request)\n+\tconst formData = await request.formData()\n+\tawait checkHoneypot(formData)\n+\tconst submission = await parseWithZod(formData, {\n+\t\tschema: (intent) =>\n+\t\t\tLoginFormSchema.transform(async (data, ctx) => {\n+\t\t\t\tif (intent !== null) return { ...data, session: null }\n+\n+\t\t\t\tconst session = await login(data)\n+\t\t\t\tif (!session) {\n+\t\t\t\t\tctx.addIssue({\n+\t\t\t\t\t\tcode: z.ZodIssueCode.custom,\n+\t\t\t\t\t\tmessage: 'Invalid username or password',\n+\t\t\t\t\t})\n+\t\t\t\t\treturn z.NEVER\n+\t\t\t\t}\n+\n+\t\t\t\treturn { ...data, session }\n+\t\t\t}),\n+\t\tasync: true,\n+\t})\n+\n+\tif (submission.status !== 'success' || !submission.value.session) {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply({ hideFields: ['password'] }) },\n+\t\t\t{ status: submission.status === 'error' ? 400 : 200 },\n+\t\t)\n+\t}\n+\n+\tconst { session, remember, redirectTo } = submission.value\n+\n+\treturn handleNewSession({\n+\t\trequest,\n+\t\tsession,\n+\t\tremember: remember ?? false,\n+\t\tredirectTo,\n+\t})\n+}\n+\n+export default function LoginPage({ actionData }: Route.ComponentProps) {\n+\tconst isPending = useIsPending()\n+\tconst [searchParams] = useSearchParams()\n+\tconst redirectTo = searchParams.get('redirectTo')\n+\n+\tconst [form, fields] = useForm({\n+\t\tid: 'login-form',\n+\t\tconstraint: getZodConstraint(LoginFormSchema),\n+\t\tdefaultValue: { redirectTo },\n+\t\tlastResult: actionData?.result,\n+\t\tonValidate({ formData }) {\n+\t\t\treturn parseWithZod(formData, { schema: LoginFormSchema })\n+\t\t},\n+\t\tshouldRevalidate: 'onBlur',\n+\t})\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

Welcome back!

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tPlease enter your details.\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\n+\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\t\t

\n+\t)\n+}\n+\n+const VerificationResponseSchema = z.discriminatedUnion('status', [\n+\tz.object({\n+\t\tstatus: z.literal('success'),\n+\t\tlocation: z.string(),\n+\t}),\n+\tz.object({\n+\t\tstatus: z.literal('error'),\n+\t\terror: z.string(),\n+\t}),\n+])\n+\n+function PasskeyLogin({\n+\tredirectTo,\n+\tremember,\n+}: {\n+\tredirectTo: string | null\n+\tremember: boolean\n+}) {\n+\tconst [isPending] = useTransition()\n+\tconst [error, setError] = useState(null)\n+\tconst [passkeyMessage, setPasskeyMessage] = useOptimistic(\n+\t\t'Login with a passkey',\n+\t)\n+\tconst navigate = useNavigate()\n+\n+\tasync function handlePasskeyLogin() {\n+\t\ttry {\n+\t\t\tsetPasskeyMessage('Generating Authentication Options')\n+\t\t\t// Get authentication options from the server\n+\t\t\tconst optionsResponse = await fetch('/webauthn/authentication')\n+\t\t\tconst json = await optionsResponse.json()\n+\t\t\tconst { options } = AuthenticationOptionsSchema.parse(json)\n+\n+\t\t\tsetPasskeyMessage('Requesting your authorization')\n+\t\t\tconst authResponse = await startAuthentication({ optionsJSON: options })\n+\t\t\tsetPasskeyMessage('Verifying your passkey')\n+\n+\t\t\t// Verify the authentication with the server\n+\t\t\tconst verificationResponse = await fetch('/webauthn/authentication', {\n+\t\t\t\tmethod: 'POST',\n+\t\t\t\theaders: { 'Content-Type': 'application/json' },\n+\t\t\t\tbody: JSON.stringify({ authResponse, remember, redirectTo }),\n+\t\t\t})\n+\n+\t\t\tconst verificationJson = await verificationResponse.json().catch(() => ({\n+\t\t\t\tstatus: 'error',\n+\t\t\t\terror: 'Unknown error',\n+\t\t\t}))\n+\n+\t\t\tconst parsedResult =\n+\t\t\t\tVerificationResponseSchema.safeParse(verificationJson)\n+\t\t\tif (!parsedResult.success) {\n+\t\t\t\tthrow new Error(parsedResult.error.message)\n+\t\t\t} else if (parsedResult.data.status === 'error') {\n+\t\t\t\tthrow new Error(parsedResult.data.error)\n+\t\t\t}\n+\t\t\tconst { location } = parsedResult.data\n+\n+\t\t\tsetPasskeyMessage(\"You're logged in! Navigating...\")\n+\t\t\tawait navigate(location ?? '/')\n+\t\t} catch (e) {\n+\t\t\tconst errorMessage = getErrorMessage(e)\n+\t\t\tsetError(`Failed to authenticate with passkey: ${errorMessage}`)\n+\t\t}\n+\t}\n+\n+\treturn (\n+\t\t

\n+\t\t\t\n+\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t{passkeyMessage}\n+\t\t\t\t\n+\t\t\t\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\n+\t)\n+}\n+\n+export const meta: Route.MetaFunction = () => {\n+\treturn [{ title: 'Login to Epic Notes' }]\n+}\n+\n+export function ErrorBoundary() {\n+\treturn \n+}\ndiff --git a/app/routes/_auth+/logout.tsx b/app/routes/_auth+/logout.tsx\nnew file mode 100644\nindex 0000000..e99e670\n--- /dev/null\n+++ b/app/routes/_auth+/logout.tsx\n@@ -0,0 +1,11 @@\n+import { redirect } from 'react-router'\n+import { logout } from '#app/utils/auth.server.ts'\n+import { type Route } from './+types/logout.ts'\n+\n+export async function loader() {\n+\treturn redirect('/')\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\treturn logout({ request })\n+}\ndiff --git a/app/routes/_auth+/onboarding.server.ts b/app/routes/_auth+/onboarding.server.ts\nnew file mode 100644\nindex 0000000..502ef80\n--- /dev/null\n+++ b/app/routes/_auth+/onboarding.server.ts\n@@ -0,0 +1,19 @@\n+import { invariant } from '@epic-web/invariant'\n+import { redirect } from 'react-router'\n+import { verifySessionStorage } from '#app/utils/verification.server.ts'\n+import { onboardingEmailSessionKey } from './onboarding.tsx'\n+import { type VerifyFunctionArgs } from './verify.server.ts'\n+\n+export async function handleVerification({ submission }: VerifyFunctionArgs) {\n+\tinvariant(\n+\t\tsubmission.status === 'success',\n+\t\t'Submission should be successful by now',\n+\t)\n+\tconst verifySession = await verifySessionStorage.getSession()\n+\tverifySession.set(onboardingEmailSessionKey, submission.value.target)\n+\treturn redirect('/onboarding', {\n+\t\theaders: {\n+\t\t\t'set-cookie': await verifySessionStorage.commitSession(verifySession),\n+\t\t},\n+\t})\n+}\ndiff --git a/app/routes/_auth+/onboarding.tsx b/app/routes/_auth+/onboarding.tsx\nnew file mode 100644\nindex 0000000..a9d05a8\n--- /dev/null\n+++ b/app/routes/_auth+/onboarding.tsx\n@@ -0,0 +1,245 @@\n+import { getFormProps, getInputProps, useForm } from '@conform-to/react'\n+import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n+import { data, redirect, Form, useSearchParams } from 'react-router'\n+import { HoneypotInputs } from 'remix-utils/honeypot/react'\n+import { safeRedirect } from 'remix-utils/safe-redirect'\n+import { z } from 'zod'\n+import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'\n+import { Spacer } from '#app/components/spacer.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import {\n+\tcheckIsCommonPassword,\n+\trequireAnonymous,\n+\tsessionKey,\n+\tsignup,\n+} from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { checkHoneypot } from '#app/utils/honeypot.server.ts'\n+import { useIsPending } from '#app/utils/misc.tsx'\n+import { authSessionStorage } from '#app/utils/session.server.ts'\n+import { redirectWithToast } from '#app/utils/toast.server.ts'\n+import {\n+\tNameSchema,\n+\tPasswordAndConfirmPasswordSchema,\n+\tUsernameSchema,\n+} from '#app/utils/user-validation.ts'\n+import { verifySessionStorage } from '#app/utils/verification.server.ts'\n+import { type Route } from './+types/onboarding.ts'\n+\n+export const onboardingEmailSessionKey = 'onboardingEmail'\n+\n+const SignupFormSchema = z\n+\t.object({\n+\t\tusername: UsernameSchema,\n+\t\tname: NameSchema,\n+\t\tagreeToTermsOfServiceAndPrivacyPolicy: z.boolean({\n+\t\t\trequired_error:\n+\t\t\t\t'You must agree to the terms of service and privacy policy',\n+\t\t}),\n+\t\tremember: z.boolean().optional(),\n+\t\tredirectTo: z.string().optional(),\n+\t})\n+\t.and(PasswordAndConfirmPasswordSchema)\n+\n+async function requireOnboardingEmail(request: Request) {\n+\tawait requireAnonymous(request)\n+\tconst verifySession = await verifySessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\tconst email = verifySession.get(onboardingEmailSessionKey)\n+\tif (typeof email !== 'string' || !email) {\n+\t\tthrow redirect('/signup')\n+\t}\n+\treturn email\n+}\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst email = await requireOnboardingEmail(request)\n+\treturn { email }\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst email = await requireOnboardingEmail(request)\n+\tconst formData = await request.formData()\n+\tawait checkHoneypot(formData)\n+\tconst submission = await parseWithZod(formData, {\n+\t\tschema: (intent) =>\n+\t\t\tSignupFormSchema.superRefine(async (data, ctx) => {\n+\t\t\t\tconst existingUser = await prisma.user.findUnique({\n+\t\t\t\t\twhere: { username: data.username },\n+\t\t\t\t\tselect: { id: true },\n+\t\t\t\t})\n+\t\t\t\tif (existingUser) {\n+\t\t\t\t\tctx.addIssue({\n+\t\t\t\t\t\tpath: ['username'],\n+\t\t\t\t\t\tcode: z.ZodIssueCode.custom,\n+\t\t\t\t\t\tmessage: 'A user already exists with this username',\n+\t\t\t\t\t})\n+\t\t\t\t\treturn\n+\t\t\t\t}\n+\t\t\t\tconst isCommonPassword = await checkIsCommonPassword(data.password)\n+\t\t\t\tif (isCommonPassword) {\n+\t\t\t\t\tctx.addIssue({\n+\t\t\t\t\t\tpath: ['password'],\n+\t\t\t\t\t\tcode: 'custom',\n+\t\t\t\t\t\tmessage: 'Password is too common',\n+\t\t\t\t\t})\n+\t\t\t\t}\n+\t\t\t}).transform(async (data) => {\n+\t\t\t\tif (intent !== null) return { ...data, session: null }\n+\n+\t\t\t\tconst session = await signup({ ...data, email })\n+\t\t\t\treturn { ...data, session }\n+\t\t\t}),\n+\t\tasync: true,\n+\t})\n+\n+\tif (submission.status !== 'success' || !submission.value.session) {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply() },\n+\t\t\t{ status: submission.status === 'error' ? 400 : 200 },\n+\t\t)\n+\t}\n+\n+\tconst { session, remember, redirectTo } = submission.value\n+\n+\tconst authSession = await authSessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\tauthSession.set(sessionKey, session.id)\n+\tconst verifySession = await verifySessionStorage.getSession()\n+\tconst headers = new Headers()\n+\theaders.append(\n+\t\t'set-cookie',\n+\t\tawait authSessionStorage.commitSession(authSession, {\n+\t\t\texpires: remember ? session.expirationDate : undefined,\n+\t\t}),\n+\t)\n+\theaders.append(\n+\t\t'set-cookie',\n+\t\tawait verifySessionStorage.destroySession(verifySession),\n+\t)\n+\n+\treturn redirectWithToast(\n+\t\tsafeRedirect(redirectTo),\n+\t\t{ title: 'Welcome', description: 'Thanks for signing up!' },\n+\t\t{ headers },\n+\t)\n+}\n+\n+export const meta: Route.MetaFunction = () => {\n+\treturn [{ title: 'Setup Epic Notes Account' }]\n+}\n+\n+export default function OnboardingRoute({\n+\tloaderData,\n+\tactionData,\n+}: Route.ComponentProps) {\n+\tconst isPending = useIsPending()\n+\tconst [searchParams] = useSearchParams()\n+\tconst redirectTo = searchParams.get('redirectTo')\n+\n+\tconst [form, fields] = useForm({\n+\t\tid: 'onboarding-form',\n+\t\tconstraint: getZodConstraint(SignupFormSchema),\n+\t\tdefaultValue: { redirectTo },\n+\t\tlastResult: actionData?.result,\n+\t\tonValidate({ formData }) {\n+\t\t\treturn parseWithZod(formData, { schema: SignupFormSchema })\n+\t\t},\n+\t\tshouldRevalidate: 'onBlur',\n+\t})\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

Welcome aboard {loaderData.email}!

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tPlease enter your details.\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\n+\t\t\t\t\t\n+\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\tCreate an account\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t\n+\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/_auth+/onboarding_.$provider.server.ts b/app/routes/_auth+/onboarding_.$provider.server.ts\nnew file mode 100644\nindex 0000000..502ef80\n--- /dev/null\n+++ b/app/routes/_auth+/onboarding_.$provider.server.ts\n@@ -0,0 +1,19 @@\n+import { invariant } from '@epic-web/invariant'\n+import { redirect } from 'react-router'\n+import { verifySessionStorage } from '#app/utils/verification.server.ts'\n+import { onboardingEmailSessionKey } from './onboarding.tsx'\n+import { type VerifyFunctionArgs } from './verify.server.ts'\n+\n+export async function handleVerification({ submission }: VerifyFunctionArgs) {\n+\tinvariant(\n+\t\tsubmission.status === 'success',\n+\t\t'Submission should be successful by now',\n+\t)\n+\tconst verifySession = await verifySessionStorage.getSession()\n+\tverifySession.set(onboardingEmailSessionKey, submission.value.target)\n+\treturn redirect('/onboarding', {\n+\t\theaders: {\n+\t\t\t'set-cookie': await verifySessionStorage.commitSession(verifySession),\n+\t\t},\n+\t})\n+}\ndiff --git a/app/routes/_auth+/onboarding_.$provider.tsx b/app/routes/_auth+/onboarding_.$provider.tsx\nnew file mode 100644\nindex 0000000..65aeafa\n--- /dev/null\n+++ b/app/routes/_auth+/onboarding_.$provider.tsx\n@@ -0,0 +1,271 @@\n+import {\n+\tgetFormProps,\n+\tgetInputProps,\n+\tuseForm,\n+\ttype SubmissionResult,\n+} from '@conform-to/react'\n+import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n+import {\n+\tredirect,\n+\tdata,\n+\ttype Params,\n+\tForm,\n+\tuseSearchParams,\n+} from 'react-router'\n+import { safeRedirect } from 'remix-utils/safe-redirect'\n+import { z } from 'zod'\n+import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'\n+import { Spacer } from '#app/components/spacer.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import {\n+\tsessionKey,\n+\tsignupWithConnection,\n+\trequireAnonymous,\n+} from '#app/utils/auth.server.ts'\n+import { ProviderNameSchema } from '#app/utils/connections.tsx'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { useIsPending } from '#app/utils/misc.tsx'\n+import { authSessionStorage } from '#app/utils/session.server.ts'\n+import { redirectWithToast } from '#app/utils/toast.server.ts'\n+import { NameSchema, UsernameSchema } from '#app/utils/user-validation.ts'\n+import { verifySessionStorage } from '#app/utils/verification.server.ts'\n+import { type Route } from './+types/onboarding_.$provider.ts'\n+import { onboardingEmailSessionKey } from './onboarding'\n+\n+export const providerIdKey = 'providerId'\n+export const prefilledProfileKey = 'prefilledProfile'\n+\n+const SignupFormSchema = z.object({\n+\timageUrl: z.string().optional(),\n+\tusername: UsernameSchema,\n+\tname: NameSchema,\n+\tagreeToTermsOfServiceAndPrivacyPolicy: z.boolean({\n+\t\trequired_error: 'You must agree to the terms of service and privacy policy',\n+\t}),\n+\tremember: z.boolean().optional(),\n+\tredirectTo: z.string().optional(),\n+})\n+\n+async function requireData({\n+\trequest,\n+\tparams,\n+}: {\n+\trequest: Request\n+\tparams: Params\n+}) {\n+\tawait requireAnonymous(request)\n+\tconst verifySession = await verifySessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\tconst email = verifySession.get(onboardingEmailSessionKey)\n+\tconst providerId = verifySession.get(providerIdKey)\n+\tconst result = z\n+\t\t.object({\n+\t\t\temail: z.string(),\n+\t\t\tproviderName: ProviderNameSchema,\n+\t\t\tproviderId: z.string().or(z.number()),\n+\t\t})\n+\t\t.safeParse({ email, providerName: params.provider, providerId })\n+\tif (result.success) {\n+\t\treturn result.data\n+\t} else {\n+\t\tconsole.error(result.error)\n+\t\tthrow redirect('/signup')\n+\t}\n+}\n+\n+export async function loader({ request, params }: Route.LoaderArgs) {\n+\tconst { email } = await requireData({ request, params })\n+\n+\tconst verifySession = await verifySessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\tconst prefilledProfile = verifySession.get(prefilledProfileKey)\n+\n+\treturn {\n+\t\temail,\n+\t\tstatus: 'idle',\n+\t\tsubmission: {\n+\t\t\tinitialValue: prefilledProfile ?? {},\n+\t\t} as SubmissionResult,\n+\t}\n+}\n+\n+export async function action({ request, params }: Route.ActionArgs) {\n+\tconst { email, providerId, providerName } = await requireData({\n+\t\trequest,\n+\t\tparams,\n+\t})\n+\tconst formData = await request.formData()\n+\tconst verifySession = await verifySessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\n+\tconst submission = await parseWithZod(formData, {\n+\t\tschema: SignupFormSchema.superRefine(async (data, ctx) => {\n+\t\t\tconst existingUser = await prisma.user.findUnique({\n+\t\t\t\twhere: { username: data.username },\n+\t\t\t\tselect: { id: true },\n+\t\t\t})\n+\t\t\tif (existingUser) {\n+\t\t\t\tctx.addIssue({\n+\t\t\t\t\tpath: ['username'],\n+\t\t\t\t\tcode: z.ZodIssueCode.custom,\n+\t\t\t\t\tmessage: 'A user already exists with this username',\n+\t\t\t\t})\n+\t\t\t\treturn\n+\t\t\t}\n+\t\t}).transform(async (data) => {\n+\t\t\tconst session = await signupWithConnection({\n+\t\t\t\t...data,\n+\t\t\t\temail,\n+\t\t\t\tproviderId: String(providerId),\n+\t\t\t\tproviderName,\n+\t\t\t})\n+\t\t\treturn { ...data, session }\n+\t\t}),\n+\t\tasync: true,\n+\t})\n+\n+\tif (submission.status !== 'success') {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply() },\n+\t\t\t{ status: submission.status === 'error' ? 400 : 200 },\n+\t\t)\n+\t}\n+\n+\tconst { session, remember, redirectTo } = submission.value\n+\n+\tconst authSession = await authSessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\tauthSession.set(sessionKey, session.id)\n+\tconst headers = new Headers()\n+\theaders.append(\n+\t\t'set-cookie',\n+\t\tawait authSessionStorage.commitSession(authSession, {\n+\t\t\texpires: remember ? session.expirationDate : undefined,\n+\t\t}),\n+\t)\n+\theaders.append(\n+\t\t'set-cookie',\n+\t\tawait verifySessionStorage.destroySession(verifySession),\n+\t)\n+\n+\treturn redirectWithToast(\n+\t\tsafeRedirect(redirectTo),\n+\t\t{ title: 'Welcome', description: 'Thanks for signing up!' },\n+\t\t{ headers },\n+\t)\n+}\n+\n+export const meta: Route.MetaFunction = () => {\n+\treturn [{ title: 'Setup Epic Notes Account' }]\n+}\n+\n+export default function OnboardingProviderRoute({\n+\tloaderData,\n+\tactionData,\n+}: Route.ComponentProps) {\n+\tconst isPending = useIsPending()\n+\tconst [searchParams] = useSearchParams()\n+\tconst redirectTo = searchParams.get('redirectTo')\n+\n+\tconst [form, fields] = useForm({\n+\t\tid: 'onboarding-provider-form',\n+\t\tconstraint: getZodConstraint(SignupFormSchema),\n+\t\tlastResult: actionData?.result ?? loaderData.submission,\n+\t\tonValidate({ formData }) {\n+\t\t\treturn parseWithZod(formData, { schema: SignupFormSchema })\n+\t\t},\n+\t\tshouldRevalidate: 'onBlur',\n+\t})\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

Welcome aboard {loaderData.email}!

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tPlease enter your details.\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t\t{fields.imageUrl.initialValue ? (\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tYou can change your photo later\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t) : null}\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\n+\t\t\t\t\t{redirectTo ? (\n+\t\t\t\t\t\t\n+\t\t\t\t\t) : null}\n+\n+\t\t\t\t\t\n+\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\tCreate an account\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t\n+\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/_auth+/reset-password.server.ts b/app/routes/_auth+/reset-password.server.ts\nnew file mode 100644\nindex 0000000..f5b2d50\n--- /dev/null\n+++ b/app/routes/_auth+/reset-password.server.ts\n@@ -0,0 +1,34 @@\n+import { invariant } from '@epic-web/invariant'\n+import { data, redirect } from 'react-router'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { verifySessionStorage } from '#app/utils/verification.server.ts'\n+import { resetPasswordUsernameSessionKey } from './reset-password.tsx'\n+import { type VerifyFunctionArgs } from './verify.server.ts'\n+\n+export async function handleVerification({ submission }: VerifyFunctionArgs) {\n+\tinvariant(\n+\t\tsubmission.status === 'success',\n+\t\t'Submission should be successful by now',\n+\t)\n+\tconst target = submission.value.target\n+\tconst user = await prisma.user.findFirst({\n+\t\twhere: { OR: [{ email: target }, { username: target }] },\n+\t\tselect: { email: true, username: true },\n+\t})\n+\t// we don't want to say the user is not found if the email is not found\n+\t// because that would allow an attacker to check if an email is registered\n+\tif (!user) {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply({ fieldErrors: { code: ['Invalid code'] } }) },\n+\t\t\t{ status: 400 },\n+\t\t)\n+\t}\n+\n+\tconst verifySession = await verifySessionStorage.getSession()\n+\tverifySession.set(resetPasswordUsernameSessionKey, user.username)\n+\treturn redirect('/reset-password', {\n+\t\theaders: {\n+\t\t\t'set-cookie': await verifySessionStorage.commitSession(verifySession),\n+\t\t},\n+\t})\n+}\ndiff --git a/app/routes/_auth+/reset-password.tsx b/app/routes/_auth+/reset-password.tsx\nnew file mode 100644\nindex 0000000..1280e1b\n--- /dev/null\n+++ b/app/routes/_auth+/reset-password.tsx\n@@ -0,0 +1,151 @@\n+import { getFormProps, getInputProps, useForm } from '@conform-to/react'\n+import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import { data, redirect, Form } from 'react-router'\n+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'\n+import { ErrorList, Field } from '#app/components/forms.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import {\n+\tcheckIsCommonPassword,\n+\trequireAnonymous,\n+\tresetUserPassword,\n+} from '#app/utils/auth.server.ts'\n+import { useIsPending } from '#app/utils/misc.tsx'\n+import { PasswordAndConfirmPasswordSchema } from '#app/utils/user-validation.ts'\n+import { verifySessionStorage } from '#app/utils/verification.server.ts'\n+import { type Route } from './+types/reset-password.ts'\n+\n+export const handle: SEOHandle = {\n+\tgetSitemapEntries: () => null,\n+}\n+\n+export const resetPasswordUsernameSessionKey = 'resetPasswordUsername'\n+\n+const ResetPasswordSchema = PasswordAndConfirmPasswordSchema\n+\n+async function requireResetPasswordUsername(request: Request) {\n+\tawait requireAnonymous(request)\n+\tconst verifySession = await verifySessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\tconst resetPasswordUsername = verifySession.get(\n+\t\tresetPasswordUsernameSessionKey,\n+\t)\n+\tif (typeof resetPasswordUsername !== 'string' || !resetPasswordUsername) {\n+\t\tthrow redirect('/login')\n+\t}\n+\treturn resetPasswordUsername\n+}\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst resetPasswordUsername = await requireResetPasswordUsername(request)\n+\treturn { resetPasswordUsername }\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst resetPasswordUsername = await requireResetPasswordUsername(request)\n+\tconst formData = await request.formData()\n+\tconst submission = await parseWithZod(formData, {\n+\t\tschema: ResetPasswordSchema.superRefine(async ({ password }, ctx) => {\n+\t\t\tconst isCommonPassword = await checkIsCommonPassword(password)\n+\t\t\tif (isCommonPassword) {\n+\t\t\t\tctx.addIssue({\n+\t\t\t\t\tpath: ['password'],\n+\t\t\t\t\tcode: 'custom',\n+\t\t\t\t\tmessage: 'Password is too common',\n+\t\t\t\t})\n+\t\t\t}\n+\t\t}),\n+\t\tasync: true,\n+\t})\n+\tif (submission.status !== 'success') {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply() },\n+\t\t\t{ status: submission.status === 'error' ? 400 : 200 },\n+\t\t)\n+\t}\n+\tconst { password } = submission.value\n+\n+\tawait resetUserPassword({ username: resetPasswordUsername, password })\n+\tconst verifySession = await verifySessionStorage.getSession()\n+\treturn redirect('/login', {\n+\t\theaders: {\n+\t\t\t'set-cookie': await verifySessionStorage.destroySession(verifySession),\n+\t\t},\n+\t})\n+}\n+\n+export const meta: Route.MetaFunction = () => {\n+\treturn [{ title: 'Reset Password | Epic Notes' }]\n+}\n+\n+export default function ResetPasswordPage({\n+\tloaderData,\n+\tactionData,\n+}: Route.ComponentProps) {\n+\tconst isPending = useIsPending()\n+\n+\tconst [form, fields] = useForm({\n+\t\tid: 'reset-password',\n+\t\tconstraint: getZodConstraint(ResetPasswordSchema),\n+\t\tlastResult: actionData?.result,\n+\t\tonValidate({ formData }) {\n+\t\t\treturn parseWithZod(formData, { schema: ResetPasswordSchema })\n+\t\t},\n+\t\tshouldRevalidate: 'onBlur',\n+\t})\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

Password Reset

\n+\t\t\t\t

\n+\t\t\t\t\tHi, {loaderData.resetPasswordUsername}. No worries. It happens all the\n+\t\t\t\t\ttime.\n+\t\t\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t

\n+\t)\n+}\n+\n+export function ErrorBoundary() {\n+\treturn \n+}\ndiff --git a/app/routes/_auth+/signup.tsx b/app/routes/_auth+/signup.tsx\nnew file mode 100644\nindex 0000000..095a233\n--- /dev/null\n+++ b/app/routes/_auth+/signup.tsx\n@@ -0,0 +1,194 @@\n+import { getFormProps, getInputProps, useForm } from '@conform-to/react'\n+import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import * as E from '@react-email/components'\n+import { data, redirect, Form, useSearchParams } from 'react-router'\n+import { HoneypotInputs } from 'remix-utils/honeypot/react'\n+import { z } from 'zod'\n+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'\n+import { ErrorList, Field } from '#app/components/forms.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import { requireAnonymous } from '#app/utils/auth.server.ts'\n+import {\n+\tProviderConnectionForm,\n+\tproviderNames,\n+} from '#app/utils/connections.tsx'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { sendEmail } from '#app/utils/email.server.ts'\n+import { checkHoneypot } from '#app/utils/honeypot.server.ts'\n+import { useIsPending } from '#app/utils/misc.tsx'\n+import { EmailSchema } from '#app/utils/user-validation.ts'\n+import { type Route } from './+types/signup.ts'\n+import { prepareVerification } from './verify.server.ts'\n+\n+export const handle: SEOHandle = {\n+\tgetSitemapEntries: () => null,\n+}\n+\n+const SignupSchema = z.object({\n+\temail: EmailSchema,\n+})\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tawait requireAnonymous(request)\n+\treturn null\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst formData = await request.formData()\n+\n+\tawait checkHoneypot(formData)\n+\n+\tconst submission = await parseWithZod(formData, {\n+\t\tschema: SignupSchema.superRefine(async (data, ctx) => {\n+\t\t\tconst existingUser = await prisma.user.findUnique({\n+\t\t\t\twhere: { email: data.email },\n+\t\t\t\tselect: { id: true },\n+\t\t\t})\n+\t\t\tif (existingUser) {\n+\t\t\t\tctx.addIssue({\n+\t\t\t\t\tpath: ['email'],\n+\t\t\t\t\tcode: z.ZodIssueCode.custom,\n+\t\t\t\t\tmessage: 'A user already exists with this email',\n+\t\t\t\t})\n+\t\t\t\treturn\n+\t\t\t}\n+\t\t}),\n+\t\tasync: true,\n+\t})\n+\tif (submission.status !== 'success') {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply() },\n+\t\t\t{ status: submission.status === 'error' ? 400 : 200 },\n+\t\t)\n+\t}\n+\tconst { email } = submission.value\n+\tconst { verifyUrl, redirectTo, otp } = await prepareVerification({\n+\t\tperiod: 10 * 60,\n+\t\trequest,\n+\t\ttype: 'onboarding',\n+\t\ttarget: email,\n+\t})\n+\n+\tconst response = await sendEmail({\n+\t\tto: email,\n+\t\tsubject: `Welcome to Epic Notes!`,\n+\t\treact: ,\n+\t})\n+\n+\tif (response.status === 'success') {\n+\t\treturn redirect(redirectTo.toString())\n+\t} else {\n+\t\treturn data(\n+\t\t\t{\n+\t\t\t\tresult: submission.reply({ formErrors: [response.error.message] }),\n+\t\t\t},\n+\t\t\t{\n+\t\t\t\tstatus: 500,\n+\t\t\t},\n+\t\t)\n+\t}\n+}\n+\n+export function SignupEmail({\n+\tonboardingUrl,\n+\totp,\n+}: {\n+\tonboardingUrl: string\n+\totp: string\n+}) {\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\t\t

\n+\t\t\t\t\tWelcome to Epic Notes!\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\tHere's your verification code: {otp}\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\tOr click the link to get started:\n+\t\t\t\t

\n+\t\t\t\t{onboardingUrl}\n+\t\t\t\n+\t\t\n+\t)\n+}\n+\n+export const meta: Route.MetaFunction = () => {\n+\treturn [{ title: 'Sign Up | Epic Notes' }]\n+}\n+\n+export default function SignupRoute({ actionData }: Route.ComponentProps) {\n+\tconst isPending = useIsPending()\n+\tconst [searchParams] = useSearchParams()\n+\tconst redirectTo = searchParams.get('redirectTo')\n+\n+\tconst [form, fields] = useForm({\n+\t\tid: 'signup-form',\n+\t\tconstraint: getZodConstraint(SignupSchema),\n+\t\tlastResult: actionData?.result,\n+\t\tonValidate({ formData }) {\n+\t\t\tconst result = parseWithZod(formData, { schema: SignupSchema })\n+\t\t\treturn result\n+\t\t},\n+\t\tshouldRevalidate: 'onBlur',\n+\t})\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

Let's start your journey!

\n+\t\t\t\t

\n+\t\t\t\t\tPlease enter your email.\n+\t\t\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t

\n+\t)\n+}\n+\n+export function ErrorBoundary() {\n+\treturn \n+}\ndiff --git a/app/routes/_auth+/verify.server.ts b/app/routes/_auth+/verify.server.ts\nnew file mode 100644\nindex 0000000..e3b8e0e\n--- /dev/null\n+++ b/app/routes/_auth+/verify.server.ts\n@@ -0,0 +1,200 @@\n+import { type Submission } from '@conform-to/react'\n+import { parseWithZod } from '@conform-to/zod'\n+import { data } from 'react-router'\n+import { z } from 'zod'\n+import { handleVerification as handleChangeEmailVerification } from '#app/routes/settings+/profile.change-email.server.tsx'\n+import { twoFAVerificationType } from '#app/routes/settings+/profile.two-factor.tsx'\n+import { requireUserId } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { getDomainUrl } from '#app/utils/misc.tsx'\n+import { redirectWithToast } from '#app/utils/toast.server.ts'\n+import { generateTOTP, verifyTOTP } from '#app/utils/totp.server.ts'\n+import { type twoFAVerifyVerificationType } from '../settings+/profile.two-factor.verify.tsx'\n+import {\n+\thandleVerification as handleLoginTwoFactorVerification,\n+\tshouldRequestTwoFA,\n+} from './login.server.ts'\n+import { handleVerification as handleOnboardingVerification } from './onboarding.server.ts'\n+import { handleVerification as handleResetPasswordVerification } from './reset-password.server.ts'\n+import {\n+\tVerifySchema,\n+\tcodeQueryParam,\n+\tredirectToQueryParam,\n+\ttargetQueryParam,\n+\ttypeQueryParam,\n+\ttype VerificationTypes,\n+} from './verify.tsx'\n+\n+export type VerifyFunctionArgs = {\n+\trequest: Request\n+\tsubmission: Submission<\n+\t\tz.input,\n+\t\tstring[],\n+\t\tz.output\n+\t>\n+\tbody: FormData | URLSearchParams\n+}\n+\n+export function getRedirectToUrl({\n+\trequest,\n+\ttype,\n+\ttarget,\n+\tredirectTo,\n+}: {\n+\trequest: Request\n+\ttype: VerificationTypes\n+\ttarget: string\n+\tredirectTo?: string\n+}) {\n+\tconst redirectToUrl = new URL(`${getDomainUrl(request)}/verify`)\n+\tredirectToUrl.searchParams.set(typeQueryParam, type)\n+\tredirectToUrl.searchParams.set(targetQueryParam, target)\n+\tif (redirectTo) {\n+\t\tredirectToUrl.searchParams.set(redirectToQueryParam, redirectTo)\n+\t}\n+\treturn redirectToUrl\n+}\n+\n+export async function requireRecentVerification(request: Request) {\n+\tconst userId = await requireUserId(request)\n+\tconst shouldReverify = await shouldRequestTwoFA(request)\n+\tif (shouldReverify) {\n+\t\tconst reqUrl = new URL(request.url)\n+\t\tconst redirectUrl = getRedirectToUrl({\n+\t\t\trequest,\n+\t\t\ttarget: userId,\n+\t\t\ttype: twoFAVerificationType,\n+\t\t\tredirectTo: reqUrl.pathname + reqUrl.search,\n+\t\t})\n+\t\tthrow await redirectWithToast(redirectUrl.toString(), {\n+\t\t\ttitle: 'Please Reverify',\n+\t\t\tdescription: 'Please reverify your account before proceeding',\n+\t\t})\n+\t}\n+}\n+\n+export async function prepareVerification({\n+\tperiod,\n+\trequest,\n+\ttype,\n+\ttarget,\n+}: {\n+\tperiod: number\n+\trequest: Request\n+\ttype: VerificationTypes\n+\ttarget: string\n+}) {\n+\tconst verifyUrl = getRedirectToUrl({ request, type, target })\n+\tconst redirectTo = new URL(verifyUrl.toString())\n+\n+\tconst { otp, ...verificationConfig } = await generateTOTP({\n+\t\talgorithm: 'SHA-256',\n+\t\t// Leaving off 0, O, and I on purpose to avoid confusing users.\n+\t\tcharSet: 'ABCDEFGHJKLMNPQRSTUVWXYZ123456789',\n+\t\tperiod,\n+\t})\n+\tconst verificationData = {\n+\t\ttype,\n+\t\ttarget,\n+\t\t...verificationConfig,\n+\t\texpiresAt: new Date(Date.now() + verificationConfig.period * 1000),\n+\t}\n+\tawait prisma.verification.upsert({\n+\t\twhere: { target_type: { target, type } },\n+\t\tcreate: verificationData,\n+\t\tupdate: verificationData,\n+\t})\n+\n+\t// add the otp to the url we'll email the user.\n+\tverifyUrl.searchParams.set(codeQueryParam, otp)\n+\n+\treturn { otp, redirectTo, verifyUrl }\n+}\n+\n+export async function isCodeValid({\n+\tcode,\n+\ttype,\n+\ttarget,\n+}: {\n+\tcode: string\n+\ttype: VerificationTypes | typeof twoFAVerifyVerificationType\n+\ttarget: string\n+}) {\n+\tconst verification = await prisma.verification.findUnique({\n+\t\twhere: {\n+\t\t\ttarget_type: { target, type },\n+\t\t\tOR: [{ expiresAt: { gt: new Date() } }, { expiresAt: null }],\n+\t\t},\n+\t\tselect: { algorithm: true, secret: true, period: true, charSet: true },\n+\t})\n+\tif (!verification) return false\n+\tconst result = await verifyTOTP({\n+\t\totp: code,\n+\t\t...verification,\n+\t})\n+\tif (!result) return false\n+\n+\treturn true\n+}\n+\n+export async function validateRequest(\n+\trequest: Request,\n+\tbody: URLSearchParams | FormData,\n+) {\n+\tconst submission = await parseWithZod(body, {\n+\t\tschema: VerifySchema.superRefine(async (data, ctx) => {\n+\t\t\tconst codeIsValid = await isCodeValid({\n+\t\t\t\tcode: data[codeQueryParam],\n+\t\t\t\ttype: data[typeQueryParam],\n+\t\t\t\ttarget: data[targetQueryParam],\n+\t\t\t})\n+\t\t\tif (!codeIsValid) {\n+\t\t\t\tctx.addIssue({\n+\t\t\t\t\tpath: ['code'],\n+\t\t\t\t\tcode: z.ZodIssueCode.custom,\n+\t\t\t\t\tmessage: `Invalid code`,\n+\t\t\t\t})\n+\t\t\t\treturn\n+\t\t\t}\n+\t\t}),\n+\t\tasync: true,\n+\t})\n+\n+\tif (submission.status !== 'success') {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply() },\n+\t\t\t{ status: submission.status === 'error' ? 400 : 200 },\n+\t\t)\n+\t}\n+\n+\tconst { value: submissionValue } = submission\n+\n+\tasync function deleteVerification() {\n+\t\tawait prisma.verification.delete({\n+\t\t\twhere: {\n+\t\t\t\ttarget_type: {\n+\t\t\t\t\ttype: submissionValue[typeQueryParam],\n+\t\t\t\t\ttarget: submissionValue[targetQueryParam],\n+\t\t\t\t},\n+\t\t\t},\n+\t\t})\n+\t}\n+\n+\tswitch (submissionValue[typeQueryParam]) {\n+\t\tcase 'reset-password': {\n+\t\t\tawait deleteVerification()\n+\t\t\treturn handleResetPasswordVerification({ request, body, submission })\n+\t\t}\n+\t\tcase 'onboarding': {\n+\t\t\tawait deleteVerification()\n+\t\t\treturn handleOnboardingVerification({ request, body, submission })\n+\t\t}\n+\t\tcase 'change-email': {\n+\t\t\tawait deleteVerification()\n+\t\t\treturn handleChangeEmailVerification({ request, body, submission })\n+\t\t}\n+\t\tcase '2fa': {\n+\t\t\treturn handleLoginTwoFactorVerification({ request, body, submission })\n+\t\t}\n+\t}\n+}\ndiff --git a/app/routes/_auth+/verify.tsx b/app/routes/_auth+/verify.tsx\nnew file mode 100644\nindex 0000000..6f18bf8\n--- /dev/null\n+++ b/app/routes/_auth+/verify.tsx\n@@ -0,0 +1,144 @@\n+import { getFormProps, getInputProps, useForm } from '@conform-to/react'\n+import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import { Form, useSearchParams } from 'react-router'\n+import { HoneypotInputs } from 'remix-utils/honeypot/react'\n+import { z } from 'zod'\n+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'\n+import { ErrorList, OTPField } from '#app/components/forms.tsx'\n+import { Spacer } from '#app/components/spacer.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import { checkHoneypot } from '#app/utils/honeypot.server.ts'\n+import { useIsPending } from '#app/utils/misc.tsx'\n+import { type Route } from './+types/verify.ts'\n+import { validateRequest } from './verify.server.ts'\n+\n+export const handle: SEOHandle = {\n+\tgetSitemapEntries: () => null,\n+}\n+\n+export const codeQueryParam = 'code'\n+export const targetQueryParam = 'target'\n+export const typeQueryParam = 'type'\n+export const redirectToQueryParam = 'redirectTo'\n+const types = ['onboarding', 'reset-password', 'change-email', '2fa'] as const\n+const VerificationTypeSchema = z.enum(types)\n+export type VerificationTypes = z.infer\n+\n+export const VerifySchema = z.object({\n+\t[codeQueryParam]: z.string().min(6).max(6),\n+\t[typeQueryParam]: VerificationTypeSchema,\n+\t[targetQueryParam]: z.string(),\n+\t[redirectToQueryParam]: z.string().optional(),\n+})\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst formData = await request.formData()\n+\tawait checkHoneypot(formData)\n+\treturn validateRequest(request, formData)\n+}\n+\n+export default function VerifyRoute({ actionData }: Route.ComponentProps) {\n+\tconst [searchParams] = useSearchParams()\n+\tconst isPending = useIsPending()\n+\tconst parseWithZoddType = VerificationTypeSchema.safeParse(\n+\t\tsearchParams.get(typeQueryParam),\n+\t)\n+\tconst type = parseWithZoddType.success ? parseWithZoddType.data : null\n+\n+\tconst checkEmail = (\n+\t\t<>\n+\t\t\t

Check your email

\n+\t\t\t

\n+\t\t\t\tWe've sent you a code to verify your email address.\n+\t\t\t

\n+\t\t\n+\t)\n+\n+\tconst headings: Record = {\n+\t\tonboarding: checkEmail,\n+\t\t'reset-password': checkEmail,\n+\t\t'change-email': checkEmail,\n+\t\t'2fa': (\n+\t\t\t<>\n+\t\t\t\t

Check your 2FA app

\n+\t\t\t\t

\n+\t\t\t\t\tPlease enter your 2FA code to verify your identity.\n+\t\t\t\t

\n+\t\t\t\n+\t\t),\n+\t}\n+\n+\tconst [form, fields] = useForm({\n+\t\tid: 'verify-form',\n+\t\tconstraint: getZodConstraint(VerifySchema),\n+\t\tlastResult: actionData?.result,\n+\t\tonValidate({ formData }) {\n+\t\t\treturn parseWithZod(formData, { schema: VerifySchema })\n+\t\t},\n+\t\tdefaultValue: {\n+\t\t\tcode: searchParams.get(codeQueryParam),\n+\t\t\ttype: type,\n+\t\t\ttarget: searchParams.get(targetQueryParam),\n+\t\t\tredirectTo: searchParams.get(redirectToQueryParam),\n+\t\t},\n+\t})\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t{type ? headings[type] : 'Invalid Verification Type'}\n+\t\t\t

\n+\n+\t\t\t\n+\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t

\n+\t\t

\n+\t)\n+}\n+\n+export function ErrorBoundary() {\n+\treturn \n+}\ndiff --git a/app/routes/_auth+/webauthn+/authentication.ts b/app/routes/_auth+/webauthn+/authentication.ts\nnew file mode 100644\nindex 0000000..5ef048f\n--- /dev/null\n+++ b/app/routes/_auth+/webauthn+/authentication.ts\n@@ -0,0 +1,113 @@\n+import {\n+\tgenerateAuthenticationOptions,\n+\tverifyAuthenticationResponse,\n+} from '@simplewebauthn/server'\n+import { getSessionExpirationDate } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { handleNewSession } from '../login.server.ts'\n+import { type Route } from './+types/authentication.ts'\n+import {\n+\tPasskeyLoginBodySchema,\n+\tgetWebAuthnConfig,\n+\tpasskeyCookie,\n+} from './utils.server.ts'\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst config = getWebAuthnConfig(request)\n+\tconst options = await generateAuthenticationOptions({\n+\t\trpID: config.rpID,\n+\t\tuserVerification: 'preferred',\n+\t})\n+\n+\tconst cookieHeader = await passkeyCookie.serialize({\n+\t\tchallenge: options.challenge,\n+\t})\n+\n+\treturn Response.json({ options }, { headers: { 'Set-Cookie': cookieHeader } })\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst cookieHeader = request.headers.get('Cookie')\n+\tconst cookie = await passkeyCookie.parse(cookieHeader)\n+\tconst deletePasskeyCookie = await passkeyCookie.serialize('', { maxAge: 0 })\n+\ttry {\n+\t\tif (!cookie?.challenge) {\n+\t\t\tthrow new Error('Authentication challenge not found')\n+\t\t}\n+\n+\t\tconst body = await request.json()\n+\t\tconst result = PasskeyLoginBodySchema.safeParse(body)\n+\t\tif (!result.success) {\n+\t\t\tthrow new Error('Invalid authentication response')\n+\t\t}\n+\t\tconst { authResponse, remember, redirectTo } = result.data\n+\n+\t\tconst passkey = await prisma.passkey.findUnique({\n+\t\t\twhere: { id: authResponse.id },\n+\t\t\tinclude: { user: true },\n+\t\t})\n+\t\tif (!passkey) {\n+\t\t\tthrow new Error('Passkey not found')\n+\t\t}\n+\n+\t\tconst config = getWebAuthnConfig(request)\n+\n+\t\tconst verification = await verifyAuthenticationResponse({\n+\t\t\tresponse: authResponse,\n+\t\t\texpectedChallenge: cookie.challenge,\n+\t\t\texpectedOrigin: config.origin,\n+\t\t\texpectedRPID: config.rpID,\n+\t\t\tcredential: {\n+\t\t\t\tid: authResponse.id,\n+\t\t\t\tpublicKey: passkey.publicKey,\n+\t\t\t\tcounter: Number(passkey.counter),\n+\t\t\t},\n+\t\t})\n+\n+\t\tif (!verification.verified) {\n+\t\t\tthrow new Error('Authentication verification failed')\n+\t\t}\n+\n+\t\t// Update the authenticator's counter in the DB to the newest count\n+\t\tawait prisma.passkey.update({\n+\t\t\twhere: { id: passkey.id },\n+\t\t\tdata: { counter: BigInt(verification.authenticationInfo.newCounter) },\n+\t\t})\n+\n+\t\tconst session = await prisma.session.create({\n+\t\t\tselect: { id: true, expirationDate: true, userId: true },\n+\t\t\tdata: {\n+\t\t\t\texpirationDate: getSessionExpirationDate(),\n+\t\t\t\tuserId: passkey.userId,\n+\t\t\t},\n+\t\t})\n+\n+\t\tconst response = await handleNewSession(\n+\t\t\t{\n+\t\t\t\trequest,\n+\t\t\t\tsession,\n+\t\t\t\tremember,\n+\t\t\t\tredirectTo: redirectTo ?? undefined,\n+\t\t\t},\n+\t\t\t{ headers: { 'Set-Cookie': deletePasskeyCookie } },\n+\t\t)\n+\n+\t\treturn Response.json(\n+\t\t\t{\n+\t\t\t\tstatus: 'success',\n+\t\t\t\tlocation: response.headers.get('Location'),\n+\t\t\t},\n+\t\t\t{ headers: response.headers },\n+\t\t)\n+\t} catch (error) {\n+\t\tif (error instanceof Response) throw error\n+\n+\t\treturn Response.json(\n+\t\t\t{\n+\t\t\t\tstatus: 'error',\n+\t\t\t\terror: error instanceof Error ? error.message : 'Verification failed',\n+\t\t\t} as const,\n+\t\t\t{ status: 400, headers: { 'Set-Cookie': deletePasskeyCookie } },\n+\t\t)\n+\t}\n+}\ndiff --git a/app/routes/_auth+/webauthn+/registration.ts b/app/routes/_auth+/webauthn+/registration.ts\nnew file mode 100644\nindex 0000000..3f7e040\n--- /dev/null\n+++ b/app/routes/_auth+/webauthn+/registration.ts\n@@ -0,0 +1,136 @@\n+import {\n+\tgenerateRegistrationOptions,\n+\tverifyRegistrationResponse,\n+} from '@simplewebauthn/server'\n+import { requireUserId } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { getDomainUrl, getErrorMessage } from '#app/utils/misc.tsx'\n+import { type Route } from './+types/registration.ts'\n+import {\n+\tPasskeyCookieSchema,\n+\tRegistrationResponseSchema,\n+\tpasskeyCookie,\n+\tgetWebAuthnConfig,\n+} from './utils.server.ts'\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst passkeys = await prisma.passkey.findMany({\n+\t\twhere: { userId },\n+\t\tselect: { id: true },\n+\t})\n+\tconst user = await prisma.user.findUniqueOrThrow({\n+\t\twhere: { id: userId },\n+\t\tselect: { email: true, name: true, username: true },\n+\t})\n+\n+\tconst config = getWebAuthnConfig(request)\n+\tconst options = await generateRegistrationOptions({\n+\t\trpName: config.rpName,\n+\t\trpID: config.rpID,\n+\t\tuserName: user.username,\n+\t\tuserID: new TextEncoder().encode(userId),\n+\t\tuserDisplayName: user.name ?? user.email,\n+\t\tattestationType: 'none',\n+\t\texcludeCredentials: passkeys,\n+\t\tauthenticatorSelection: {\n+\t\t\tresidentKey: 'preferred',\n+\t\t\tuserVerification: 'preferred',\n+\t\t},\n+\t})\n+\n+\treturn Response.json(\n+\t\t{ options },\n+\t\t{\n+\t\t\theaders: {\n+\t\t\t\t'Set-Cookie': await passkeyCookie.serialize(\n+\t\t\t\t\tPasskeyCookieSchema.parse({\n+\t\t\t\t\t\tchallenge: options.challenge,\n+\t\t\t\t\t\tuserId: options.user.id,\n+\t\t\t\t\t}),\n+\t\t\t\t),\n+\t\t\t},\n+\t\t},\n+\t)\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\ttry {\n+\t\tconst userId = await requireUserId(request)\n+\n+\t\tconst body = await request.json()\n+\t\tconst result = RegistrationResponseSchema.safeParse(body)\n+\t\tif (!result.success) {\n+\t\t\tthrow new Error('Invalid registration response')\n+\t\t}\n+\n+\t\tconst data = result.data\n+\n+\t\t// Get challenge from cookie\n+\t\tconst passkeyCookieData = await passkeyCookie.parse(\n+\t\t\trequest.headers.get('Cookie'),\n+\t\t)\n+\t\tconst parsedPasskeyCookieData =\n+\t\t\tPasskeyCookieSchema.safeParse(passkeyCookieData)\n+\t\tif (!parsedPasskeyCookieData.success) {\n+\t\t\tthrow new Error('No challenge found')\n+\t\t}\n+\t\tconst { challenge, userId: webauthnUserId } = parsedPasskeyCookieData.data\n+\n+\t\tconst domain = new URL(getDomainUrl(request)).hostname\n+\t\tconst rpID = domain\n+\t\tconst origin = getDomainUrl(request)\n+\n+\t\tconst verification = await verifyRegistrationResponse({\n+\t\t\tresponse: data,\n+\t\t\texpectedChallenge: challenge,\n+\t\t\texpectedOrigin: origin,\n+\t\t\texpectedRPID: rpID,\n+\t\t\trequireUserVerification: true,\n+\t\t})\n+\n+\t\tconst { verified, registrationInfo } = verification\n+\t\tif (!verified || !registrationInfo) {\n+\t\t\tthrow new Error('Registration verification failed')\n+\t\t}\n+\t\tconst { credential, credentialDeviceType, credentialBackedUp, aaguid } =\n+\t\t\tregistrationInfo\n+\n+\t\tconst existingPasskey = await prisma.passkey.findUnique({\n+\t\t\twhere: { id: credential.id },\n+\t\t\tselect: { id: true },\n+\t\t})\n+\n+\t\tif (existingPasskey) {\n+\t\t\tthrow new Error('This passkey has already been registered')\n+\t\t}\n+\n+\t\t// Create new passkey in database\n+\t\tawait prisma.passkey.create({\n+\t\t\tdata: {\n+\t\t\t\tid: credential.id,\n+\t\t\t\taaguid,\n+\t\t\t\tpublicKey: Buffer.from(credential.publicKey),\n+\t\t\t\tuserId,\n+\t\t\t\twebauthnUserId,\n+\t\t\t\tcounter: credential.counter,\n+\t\t\t\tdeviceType: credentialDeviceType,\n+\t\t\t\tbackedUp: credentialBackedUp,\n+\t\t\t\ttransports: credential.transports?.join(','),\n+\t\t\t},\n+\t\t})\n+\n+\t\treturn Response.json({ status: 'success' } as const, {\n+\t\t\theaders: {\n+\t\t\t\t'Set-Cookie': await passkeyCookie.serialize('', { maxAge: 0 }),\n+\t\t\t},\n+\t\t})\n+\t} catch (error) {\n+\t\tif (error instanceof Response) throw error\n+\n+\t\treturn Response.json(\n+\t\t\t{ status: 'error', error: getErrorMessage(error) } as const,\n+\t\t\t{ status: 400 },\n+\t\t)\n+\t}\n+}\ndiff --git a/app/routes/_auth+/webauthn+/utils.server.ts b/app/routes/_auth+/webauthn+/utils.server.ts\nnew file mode 100644\nindex 0000000..aaaf5fc\n--- /dev/null\n+++ b/app/routes/_auth+/webauthn+/utils.server.ts\n@@ -0,0 +1,89 @@\n+import {\n+\ttype AuthenticationResponseJSON,\n+\ttype RegistrationResponseJSON,\n+} from '@simplewebauthn/server'\n+import { createCookie } from 'react-router'\n+import { z } from 'zod'\n+import { getDomainUrl } from '#app/utils/misc.tsx'\n+\n+export const passkeyCookie = createCookie('webauthn-challenge', {\n+\tpath: '/',\n+\tsameSite: 'lax',\n+\thttpOnly: true,\n+\tmaxAge: 60 * 60 * 2,\n+\tsecure: process.env.NODE_ENV === 'production',\n+\tsecrets: [process.env.SESSION_SECRET],\n+})\n+\n+export const PasskeyCookieSchema = z.object({\n+\tchallenge: z.string(),\n+\tuserId: z.string(),\n+})\n+\n+export const RegistrationResponseSchema = z.object({\n+\tid: z.string(),\n+\trawId: z.string(),\n+\tresponse: z.object({\n+\t\tclientDataJSON: z.string(),\n+\t\tattestationObject: z.string(),\n+\t\ttransports: z\n+\t\t\t.array(\n+\t\t\t\tz.enum([\n+\t\t\t\t\t'ble',\n+\t\t\t\t\t'cable',\n+\t\t\t\t\t'hybrid',\n+\t\t\t\t\t'internal',\n+\t\t\t\t\t'nfc',\n+\t\t\t\t\t'smart-card',\n+\t\t\t\t\t'usb',\n+\t\t\t\t]),\n+\t\t\t)\n+\t\t\t.optional(),\n+\t}),\n+\tauthenticatorAttachment: z.enum(['cross-platform', 'platform']).optional(),\n+\tclientExtensionResults: z.object({\n+\t\tcredProps: z\n+\t\t\t.object({\n+\t\t\t\trk: z.boolean(),\n+\t\t\t})\n+\t\t\t.optional(),\n+\t}),\n+\ttype: z.literal('public-key'),\n+}) satisfies z.ZodType\n+\n+const AuthenticationResponseSchema = z.object({\n+\tid: z.string(),\n+\trawId: z.string(),\n+\tresponse: z.object({\n+\t\tclientDataJSON: z.string(),\n+\t\tauthenticatorData: z.string(),\n+\t\tsignature: z.string(),\n+\t\tuserHandle: z.string().optional(),\n+\t}),\n+\ttype: z.literal('public-key'),\n+\tclientExtensionResults: z.object({\n+\t\tappid: z.boolean().optional(),\n+\t\tcredProps: z\n+\t\t\t.object({\n+\t\t\t\trk: z.boolean().optional(),\n+\t\t\t})\n+\t\t\t.optional(),\n+\t\thmacCreateSecret: z.boolean().optional(),\n+\t}),\n+}) satisfies z.ZodType\n+\n+export const PasskeyLoginBodySchema = z.object({\n+\tauthResponse: AuthenticationResponseSchema,\n+\tremember: z.boolean().default(false),\n+\tredirectTo: z.string().nullable(),\n+})\n+\n+export function getWebAuthnConfig(request: Request) {\n+\tconst url = new URL(getDomainUrl(request))\n+\n+\treturn {\n+\t\trpName: url.hostname,\n+\t\trpID: url.hostname,\n+\t\torigin: url.origin,\n+\t} as const\n+}\ndiff --git a/app/routes/_marketing+/about.tsx b/app/routes/_marketing+/about.tsx\nnew file mode 100644\nindex 0000000..55ef96d\n--- /dev/null\n+++ b/app/routes/_marketing+/about.tsx\n@@ -0,0 +1,3 @@\n+export default function AboutRoute() {\n+\treturn

About page

\n+}\ndiff --git a/app/routes/_marketing+/index.tsx b/app/routes/_marketing+/index.tsx\nnew file mode 100644\nindex 0000000..3e22673\n--- /dev/null\n+++ b/app/routes/_marketing+/index.tsx\n@@ -0,0 +1,101 @@\n+import {\n+\tTooltip,\n+\tTooltipContent,\n+\tTooltipProvider,\n+\tTooltipTrigger,\n+} from '#app/components/ui/tooltip.tsx'\n+import { cn } from '#app/utils/misc.tsx'\n+import { type Route } from './+types/index.ts'\n+import { logos } from './logos/logos.ts'\n+\n+export const meta: Route.MetaFunction = () => [{ title: 'Epic Notes' }]\n+\n+// Tailwind Grid cell classes lookup\n+const columnClasses: Record<(typeof logos)[number]['column'], string> = {\n+\t1: 'xl:col-start-1',\n+\t2: 'xl:col-start-2',\n+\t3: 'xl:col-start-3',\n+\t4: 'xl:col-start-4',\n+\t5: 'xl:col-start-5',\n+}\n+const rowClasses: Record<(typeof logos)[number]['row'], string> = {\n+\t1: 'xl:row-start-1',\n+\t2: 'xl:row-start-2',\n+\t3: 'xl:row-start-3',\n+\t4: 'xl:row-start-4',\n+\t5: 'xl:row-start-5',\n+\t6: 'xl:row-start-6',\n+}\n+\n+export default function Index() {\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\tThe Epic Stack\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\tCheck the{' '}\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\tGetting Started guide\n+\t\t\t\t\t\t{' '}\n+\t\t\t\t\t\tfile for how to get your project off the ground!\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\t{logos.map((logo, i) => (\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t $\"\"$ \n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t{logo.alt}\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t))}\n+\t\t\t\t\t

\n+\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/_marketing+/logos/docker.svg b/app/routes/_marketing+/logos/docker.svg\nnew file mode 100644\nindex 0000000..b39ecde\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/docker.svg\n@@ -0,0 +1,47 @@\n+\n+\n+\ndiff --git a/app/routes/_marketing+/logos/eslint.svg b/app/routes/_marketing+/logos/eslint.svg\nnew file mode 100644\nindex 0000000..dd535a8\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/eslint.svg\n@@ -0,0 +1,17 @@\n+\n+\n+\n+\ndiff --git a/app/routes/_marketing+/logos/faker.svg b/app/routes/_marketing+/logos/faker.svg\nnew file mode 100644\nindex 0000000..e290a83\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/faker.svg\n@@ -0,0 +1,736 @@\n+\n+\ndiff --git a/app/routes/_marketing+/logos/fly.svg b/app/routes/_marketing+/logos/fly.svg\nnew file mode 100644\nindex 0000000..9dbf3c7\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/fly.svg\n@@ -0,0 +1 @@\n+\n\\ No newline at end of file\ndiff --git a/app/routes/_marketing+/logos/github.svg b/app/routes/_marketing+/logos/github.svg\nnew file mode 100644\nindex 0000000..37fa923\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/github.svg\n@@ -0,0 +1 @@\n+\n\\ No newline at end of file\ndiff --git a/app/routes/_marketing+/logos/logos.ts b/app/routes/_marketing+/logos/logos.ts\nnew file mode 100644\nindex 0000000..7d77e8a\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/logos.ts\n@@ -0,0 +1,173 @@\n+import docker from './docker.svg'\n+import eslint from './eslint.svg'\n+import fakerJS from './faker.svg'\n+import fly from './fly.svg'\n+import github from './github.svg'\n+import msw from './msw.svg'\n+import playwright from './playwright.svg'\n+import prettier from './prettier.svg'\n+import prisma from './prisma.svg'\n+import radixUI from './radix.svg'\n+import reactEmail from './react-email.svg'\n+import remix from './remix.svg'\n+import resend from './resend.svg'\n+import sentry from './sentry.svg'\n+import shadcnUI from './shadcn-ui.svg'\n+import sqlite from './sqlite.svg'\n+import tailwind from './tailwind.svg'\n+import testingLibrary from './testing-library.png'\n+import typescript from './typescript.svg'\n+import vitest from './vitest.svg'\n+import zod from './zod.svg'\n+\n+export { default as stars } from './stars.jpg'\n+\n+export const logos = [\n+\t{\n+\t\tsrc: remix,\n+\t\talt: 'Remix',\n+\t\thref: 'https://remix.run',\n+\t\tcolumn: 1,\n+\t\trow: 1,\n+\t},\n+\t{\n+\t\tsrc: fly,\n+\t\talt: 'Fly.io',\n+\t\thref: 'https://fly.io',\n+\t\tcolumn: 1,\n+\t\trow: 2,\n+\t},\n+\t{\n+\t\tsrc: sqlite,\n+\t\talt: 'SQLite',\n+\t\thref: 'https://sqlite.org',\n+\t\tcolumn: 1,\n+\t\trow: 3,\n+\t},\n+\t{\n+\t\tsrc: prisma,\n+\t\talt: 'Prisma',\n+\t\thref: 'https://prisma.io',\n+\t\tcolumn: 2,\n+\t\trow: 2,\n+\t},\n+\t{\n+\t\tsrc: zod,\n+\t\talt: 'Zod',\n+\t\thref: 'https://zod.dev/',\n+\t\tcolumn: 2,\n+\t\trow: 3,\n+\t},\n+\t{\n+\t\tsrc: github,\n+\t\talt: 'GitHub',\n+\t\thref: 'https://github.com',\n+\t\tcolumn: 2,\n+\t\trow: 4,\n+\t},\n+\t{\n+\t\tsrc: resend,\n+\t\talt: 'Resend',\n+\t\thref: 'https://resend.com',\n+\t\tcolumn: 2,\n+\t\trow: 5,\n+\t},\n+\t{\n+\t\tsrc: reactEmail,\n+\t\talt: 'React Email',\n+\t\thref: 'https://react.email',\n+\t\tcolumn: 2,\n+\t\trow: 6,\n+\t},\n+\t{\n+\t\tsrc: tailwind,\n+\t\talt: 'Tailwind CSS',\n+\t\thref: 'https://tailwindcss.com',\n+\t\tcolumn: 3,\n+\t\trow: 3,\n+\t},\n+\t{\n+\t\tsrc: radixUI,\n+\t\talt: 'Radix UI',\n+\t\thref: 'https://www.radix-ui.com/',\n+\t\tcolumn: 3,\n+\t\trow: 4,\n+\t},\n+\t{\n+\t\tsrc: shadcnUI,\n+\t\talt: 'shadcn/ui',\n+\t\thref: 'https://ui.shadcn.com/',\n+\t\tcolumn: 3,\n+\t\trow: 5,\n+\t},\n+\t{\n+\t\tsrc: playwright,\n+\t\talt: 'Playwright',\n+\t\thref: 'https://playwright.dev/',\n+\t\tcolumn: 4,\n+\t\trow: 1,\n+\t},\n+\t{\n+\t\tsrc: msw,\n+\t\talt: 'MSW',\n+\t\thref: 'https://mswjs.io',\n+\t\tcolumn: 4,\n+\t\trow: 2,\n+\t},\n+\t{\n+\t\tsrc: fakerJS,\n+\t\talt: 'Faker.js',\n+\t\thref: 'https://fakerjs.dev/',\n+\t\tcolumn: 4,\n+\t\trow: 3,\n+\t},\n+\t{\n+\t\tsrc: vitest,\n+\t\talt: 'Vitest',\n+\t\thref: 'https://vitest.dev',\n+\t\tcolumn: 4,\n+\t\trow: 4,\n+\t},\n+\t{\n+\t\tsrc: testingLibrary,\n+\t\talt: 'Testing Library',\n+\t\thref: 'https://testing-library.com',\n+\t\tcolumn: 4,\n+\t\trow: 5,\n+\t},\n+\t{\n+\t\tsrc: docker,\n+\t\talt: 'Docker',\n+\t\thref: 'https://www.docker.com',\n+\t\tcolumn: 4,\n+\t\trow: 6,\n+\t},\n+\t{\n+\t\tsrc: typescript,\n+\t\talt: 'TypeScript',\n+\t\thref: 'https://typescriptlang.org',\n+\t\tcolumn: 5,\n+\t\trow: 2,\n+\t},\n+\t{\n+\t\tsrc: prettier,\n+\t\talt: 'Prettier',\n+\t\thref: 'https://prettier.io',\n+\t\tcolumn: 5,\n+\t\trow: 3,\n+\t},\n+\t{\n+\t\tsrc: eslint,\n+\t\talt: 'ESLint',\n+\t\thref: 'https://eslint.org',\n+\t\tcolumn: 5,\n+\t\trow: 4,\n+\t},\n+\t{\n+\t\tsrc: sentry,\n+\t\talt: 'Sentry',\n+\t\thref: 'https://sentry.io',\n+\t\tcolumn: 5,\n+\t\trow: 5,\n+\t},\n+]\ndiff --git a/app/routes/_marketing+/logos/msw.svg b/app/routes/_marketing+/logos/msw.svg\nnew file mode 100644\nindex 0000000..f5de6fb\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/msw.svg\n@@ -0,0 +1,13 @@\n+\n+\n\\ No newline at end of file\ndiff --git a/app/routes/_marketing+/logos/playwright.svg b/app/routes/_marketing+/logos/playwright.svg\nnew file mode 100644\nindex 0000000..7b3ca7d\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/playwright.svg\n@@ -0,0 +1,9 @@\n+\ndiff --git a/app/routes/_marketing+/logos/prettier.svg b/app/routes/_marketing+/logos/prettier.svg\nnew file mode 100644\nindex 0000000..f4d0b66\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/prettier.svg\n@@ -0,0 +1,76 @@\n+\n+\n\\ No newline at end of file\ndiff --git a/app/routes/_marketing+/logos/prisma.svg b/app/routes/_marketing+/logos/prisma.svg\nnew file mode 100644\nindex 0000000..17a3886\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/prisma.svg\n@@ -0,0 +1,9 @@\n+\ndiff --git a/app/routes/_marketing+/logos/radix.svg b/app/routes/_marketing+/logos/radix.svg\nnew file mode 100644\nindex 0000000..a748299\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/radix.svg\n@@ -0,0 +1 @@\n+\n\\ No newline at end of file\ndiff --git a/app/routes/_marketing+/logos/react-email.svg b/app/routes/_marketing+/logos/react-email.svg\nnew file mode 100644\nindex 0000000..51a2698\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/react-email.svg\n@@ -0,0 +1 @@\n+\n\\ No newline at end of file\ndiff --git a/app/routes/_marketing+/logos/remix.svg b/app/routes/_marketing+/logos/remix.svg\nnew file mode 100644\nindex 0000000..2f4a5ab\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/remix.svg\n@@ -0,0 +1,25 @@\n+\ndiff --git a/app/routes/_marketing+/logos/resend.svg b/app/routes/_marketing+/logos/resend.svg\nnew file mode 100644\nindex 0000000..1227dc5\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/resend.svg\n@@ -0,0 +1,31 @@\n+\n+\n+\n+\n+\n+\n+\n+\n\\ No newline at end of file\ndiff --git a/app/routes/_marketing+/logos/sentry.svg b/app/routes/_marketing+/logos/sentry.svg\nnew file mode 100644\nindex 0000000..3ebb3bb\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/sentry.svg\n@@ -0,0 +1,6 @@\n+\n\\ No newline at end of file\ndiff --git a/app/routes/_marketing+/logos/shadcn-ui.svg b/app/routes/_marketing+/logos/shadcn-ui.svg\nnew file mode 100644\nindex 0000000..2780f68\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/shadcn-ui.svg\n@@ -0,0 +1 @@\n+\n\\ No newline at end of file\ndiff --git a/app/routes/_marketing+/logos/sqlite.svg b/app/routes/_marketing+/logos/sqlite.svg\nnew file mode 100644\nindex 0000000..424e0ab\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/sqlite.svg\n@@ -0,0 +1,67 @@\n+\n+\n+\n+SQLiteimage/svg+xmlSQLite\n\\ No newline at end of file\ndiff --git a/app/routes/_marketing+/logos/stars.jpg b/app/routes/_marketing+/logos/stars.jpg\nnew file mode 100644\nindex 0000000..c725b8a\nBinary files /dev/null and b/app/routes/_marketing+/logos/stars.jpg differ\ndiff --git a/app/routes/_marketing+/logos/tailwind.svg b/app/routes/_marketing+/logos/tailwind.svg\nnew file mode 100644\nindex 0000000..6a9ab49\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/tailwind.svg\n@@ -0,0 +1 @@\n+\n\\ No newline at end of file\ndiff --git a/app/routes/_marketing+/logos/testing-library.png b/app/routes/_marketing+/logos/testing-library.png\nnew file mode 100644\nindex 0000000..6febb2a\nBinary files /dev/null and b/app/routes/_marketing+/logos/testing-library.png differ\ndiff --git a/app/routes/_marketing+/logos/typescript.svg b/app/routes/_marketing+/logos/typescript.svg\nnew file mode 100644\nindex 0000000..339da0b\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/typescript.svg\n@@ -0,0 +1,6 @@\n+\n+\ndiff --git a/app/routes/_marketing+/logos/vitest.svg b/app/routes/_marketing+/logos/vitest.svg\nnew file mode 100644\nindex 0000000..fd9daaf\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/vitest.svg\n@@ -0,0 +1,5 @@\n+\ndiff --git a/app/routes/_marketing+/logos/zod.svg b/app/routes/_marketing+/logos/zod.svg\nnew file mode 100644\nindex 0000000..0595f51\n--- /dev/null\n+++ b/app/routes/_marketing+/logos/zod.svg\n@@ -0,0 +1,46 @@\n+\n+\n+\ndiff --git a/app/routes/_marketing+/privacy.tsx b/app/routes/_marketing+/privacy.tsx\nnew file mode 100644\nindex 0000000..b6d6530\n--- /dev/null\n+++ b/app/routes/_marketing+/privacy.tsx\n@@ -0,0 +1,3 @@\n+export default function PrivacyRoute() {\n+\treturn

Privacy

\n+}\ndiff --git a/app/routes/_marketing+/support.tsx b/app/routes/_marketing+/support.tsx\nnew file mode 100644\nindex 0000000..ec9a242\n--- /dev/null\n+++ b/app/routes/_marketing+/support.tsx\n@@ -0,0 +1,3 @@\n+export default function SupportRoute() {\n+\treturn

Support

\n+}\ndiff --git a/app/routes/_marketing+/tos.tsx b/app/routes/_marketing+/tos.tsx\nnew file mode 100644\nindex 0000000..998f867\n--- /dev/null\n+++ b/app/routes/_marketing+/tos.tsx\n@@ -0,0 +1,3 @@\n+export default function TermsOfServiceRoute() {\n+\treturn

\n+}\ndiff --git a/app/routes/_seo+/robots[.]txt.ts b/app/routes/_seo+/robots[.]txt.ts\nnew file mode 100644\nindex 0000000..314f8ff\n--- /dev/null\n+++ b/app/routes/_seo+/robots[.]txt.ts\n@@ -0,0 +1,9 @@\n+import { generateRobotsTxt } from '@nasa-gcn/remix-seo'\n+import { getDomainUrl } from '#app/utils/misc.tsx'\n+import { type Route } from './+types/robots[.]txt.ts'\n+\n+export function loader({ request }: Route.LoaderArgs) {\n+\treturn generateRobotsTxt([\n+\t\t{ type: 'sitemap', value: `${getDomainUrl(request)}/sitemap.xml` },\n+\t])\n+}\ndiff --git a/app/routes/_seo+/sitemap[.]xml.ts b/app/routes/_seo+/sitemap[.]xml.ts\nnew file mode 100644\nindex 0000000..04d37c3\n--- /dev/null\n+++ b/app/routes/_seo+/sitemap[.]xml.ts\n@@ -0,0 +1,17 @@\n+import { generateSitemap } from '@nasa-gcn/remix-seo'\n+import { type ServerBuild } from 'react-router'\n+import { getDomainUrl } from '#app/utils/misc.tsx'\n+import { type Route } from './+types/sitemap[.]xml.ts'\n+\n+export async function loader({ request, context }: Route.LoaderArgs) {\n+\tconst serverBuild = (await context.serverBuild) as { build: ServerBuild }\n+\n+\t// TODO: This is typeerror is coming up since of the remix-run/server-runtime package. We might need to remove/update that one.\n+\t// @ts-expect-error\n+\treturn generateSitemap(request, serverBuild.build.routes, {\n+\t\tsiteUrl: getDomainUrl(request),\n+\t\theaders: {\n+\t\t\t'Cache-Control': `public, max-age=${60 * 5}`,\n+\t\t},\n+\t})\n+}\ndiff --git a/app/routes/admin+/cache.tsx b/app/routes/admin+/cache.tsx\nnew file mode 100644\nindex 0000000..04150fb\n--- /dev/null\n+++ b/app/routes/admin+/cache.tsx\n@@ -0,0 +1,244 @@\n+import { invariantResponse } from '@epic-web/invariant'\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import {\n+\tredirect,\n+\tForm,\n+\tLink,\n+\tuseFetcher,\n+\tuseSearchParams,\n+\tuseSubmit,\n+} from 'react-router'\n+import { GeneralErrorBoundary } from '#app/components/error-boundary'\n+import { Field } from '#app/components/forms.tsx'\n+import { Spacer } from '#app/components/spacer.tsx'\n+import { Button } from '#app/components/ui/button.tsx'\n+import {\n+\tcache,\n+\tgetAllCacheKeys,\n+\tlruCache,\n+\tsearchCacheKeys,\n+} from '#app/utils/cache.server.ts'\n+import {\n+\tensureInstance,\n+\tgetAllInstances,\n+\tgetInstanceInfo,\n+} from '#app/utils/litefs.server.ts'\n+import { useDebounce, useDoubleCheck } from '#app/utils/misc.tsx'\n+import { requireUserWithRole } from '#app/utils/permissions.server.ts'\n+import { type Route } from './+types/cache.ts'\n+\n+export const handle: SEOHandle = {\n+\tgetSitemapEntries: () => null,\n+}\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tawait requireUserWithRole(request, 'admin')\n+\tconst searchParams = new URL(request.url).searchParams\n+\tconst query = searchParams.get('query')\n+\tif (query === '') {\n+\t\tsearchParams.delete('query')\n+\t\treturn redirect(`/admin/cache?${searchParams.toString()}`)\n+\t}\n+\tconst limit = Number(searchParams.get('limit') ?? 100)\n+\n+\tconst currentInstanceInfo = await getInstanceInfo()\n+\tconst instance =\n+\t\tsearchParams.get('instance') ?? currentInstanceInfo.currentInstance\n+\tconst instances = await getAllInstances()\n+\tawait ensureInstance(instance)\n+\n+\tlet cacheKeys: { sqlite: Array; lru: Array }\n+\tif (typeof query === 'string') {\n+\t\tcacheKeys = await searchCacheKeys(query, limit)\n+\t} else {\n+\t\tcacheKeys = await getAllCacheKeys(limit)\n+\t}\n+\treturn { cacheKeys, instance, instances, currentInstanceInfo }\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tawait requireUserWithRole(request, 'admin')\n+\tconst formData = await request.formData()\n+\tconst key = formData.get('cacheKey')\n+\tconst { currentInstance } = await getInstanceInfo()\n+\tconst instance = formData.get('instance') ?? currentInstance\n+\tconst type = formData.get('type')\n+\n+\tinvariantResponse(typeof key === 'string', 'cacheKey must be a string')\n+\tinvariantResponse(typeof type === 'string', 'type must be a string')\n+\tinvariantResponse(typeof instance === 'string', 'instance must be a string')\n+\tawait ensureInstance(instance)\n+\n+\tswitch (type) {\n+\t\tcase 'sqlite': {\n+\t\t\tawait cache.delete(key)\n+\t\t\tbreak\n+\t\t}\n+\t\tcase 'lru': {\n+\t\t\tlruCache.delete(key)\n+\t\t\tbreak\n+\t\t}\n+\t\tdefault: {\n+\t\t\tthrow new Error(`Unknown cache type: ${type}`)\n+\t\t}\n+\t}\n+\treturn { success: true }\n+}\n+\n+export default function CacheAdminRoute({ loaderData }: Route.ComponentProps) {\n+\tconst [searchParams] = useSearchParams()\n+\tconst submit = useSubmit()\n+\tconst query = searchParams.get('query') ?? ''\n+\tconst limit = searchParams.get('limit') ?? '100'\n+\tconst instance = searchParams.get('instance') ?? loaderData.instance\n+\n+\tconst handleFormChange = useDebounce(async (form: HTMLFormElement) => {\n+\t\tawait submit(form)\n+\t}, 400)\n+\n+\treturn (\n+\t\t

\n+\t\t\t

Cache Admin

\n+\t\t\t\n+\t\t\t handleFormChange(e.currentTarget)}\n+\t\t\t>\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t🔎\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t{loaderData.cacheKeys.sqlite.length +\n+\t\t\t\t\t\t\t\t\tloaderData.cacheKeys.lru.length}\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\n+\t\t\t\n+\t\t\t

\n+\t\t\t\t

LRU Cache:

\n+\t\t\t\t{loaderData.cacheKeys.lru.map((key) => (\n+\t\t\t\t\t\n+\t\t\t\t))}\n+\t\t\t

\n+\t\t\t\n+\t\t\t

\n+\t\t\t\t

SQLite Cache:

\n+\t\t\t\t{loaderData.cacheKeys.sqlite.map((key) => (\n+\t\t\t\t\t\n+\t\t\t\t))}\n+\t\t\t

\n+\t\t

\n+\t)\n+}\n+\n+function CacheKeyRow({\n+\tcacheKey,\n+\tinstance,\n+\ttype,\n+}: {\n+\tcacheKey: string\n+\tinstance?: string\n+\ttype: 'sqlite' | 'lru'\n+}) {\n+\tconst fetcher = useFetcher()\n+\tconst dc = useDoubleCheck()\n+\tconst encodedKey = encodeURIComponent(cacheKey)\n+\tconst valuePage = `/admin/cache/${type}/${encodedKey}?instance=${instance}`\n+\treturn (\n+\t\t

\n+\t\t\t\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t\t{fetcher.state === 'idle'\n+\t\t\t\t\t\t? dc.doubleCheck\n+\t\t\t\t\t\t\t? 'You sure?'\n+\t\t\t\t\t\t\t: 'Delete'\n+\t\t\t\t\t\t: 'Deleting...'}\n+\t\t\t\t\n+\t\t\t\n+\t\t\t\n+\t\t\t\t{cacheKey}\n+\t\t\t\n+\t\t

\n+\t)\n+}\n+\n+export function ErrorBoundary() {\n+\treturn (\n+\t\t (\n+\t\t\t\t\t

You are not allowed to do that: {error?.data.message}

\n+\t\t\t\t),\n+\t\t\t}}\n+\t\t/>\n+\t)\n+}\ndiff --git a/app/routes/admin+/cache_.lru.$cacheKey.ts b/app/routes/admin+/cache_.lru.$cacheKey.ts\nnew file mode 100644\nindex 0000000..7534705\n--- /dev/null\n+++ b/app/routes/admin+/cache_.lru.$cacheKey.ts\n@@ -0,0 +1,31 @@\n+import { invariantResponse } from '@epic-web/invariant'\n+import { lruCache } from '#app/utils/cache.server.ts'\n+import {\n+\tgetAllInstances,\n+\tgetInstanceInfo,\n+\tensureInstance,\n+} from '#app/utils/litefs.server.ts'\n+import { requireUserWithRole } from '#app/utils/permissions.server.ts'\n+import { type Route } from './+types/cache_.lru.$cacheKey.ts'\n+\n+export async function loader({ request, params }: Route.LoaderArgs) {\n+\tawait requireUserWithRole(request, 'admin')\n+\tconst searchParams = new URL(request.url).searchParams\n+\tconst currentInstanceInfo = await getInstanceInfo()\n+\tconst allInstances = await getAllInstances()\n+\tconst instance =\n+\t\tsearchParams.get('instance') ?? currentInstanceInfo.currentInstance\n+\tawait ensureInstance(instance)\n+\n+\tconst { cacheKey } = params\n+\tinvariantResponse(cacheKey, 'cacheKey is required')\n+\treturn {\n+\t\tinstance: {\n+\t\t\thostname: instance,\n+\t\t\tregion: allInstances[instance],\n+\t\t\tisPrimary: currentInstanceInfo.primaryInstance === instance,\n+\t\t},\n+\t\tcacheKey,\n+\t\tvalue: lruCache.get(cacheKey),\n+\t}\n+}\ndiff --git a/app/routes/admin+/cache_.sqlite.$cacheKey.ts b/app/routes/admin+/cache_.sqlite.$cacheKey.ts\nnew file mode 100644\nindex 0000000..9aeb3e0\n--- /dev/null\n+++ b/app/routes/admin+/cache_.sqlite.$cacheKey.ts\n@@ -0,0 +1,31 @@\n+import { invariantResponse } from '@epic-web/invariant'\n+import { cache } from '#app/utils/cache.server.ts'\n+import {\n+\tgetAllInstances,\n+\tgetInstanceInfo,\n+\tensureInstance,\n+} from '#app/utils/litefs.server.ts'\n+import { requireUserWithRole } from '#app/utils/permissions.server.ts'\n+import { type Route } from './+types/cache_.sqlite.$cacheKey.ts'\n+\n+export async function loader({ request, params }: Route.LoaderArgs) {\n+\tawait requireUserWithRole(request, 'admin')\n+\tconst searchParams = new URL(request.url).searchParams\n+\tconst currentInstanceInfo = await getInstanceInfo()\n+\tconst allInstances = await getAllInstances()\n+\tconst instance =\n+\t\tsearchParams.get('instance') ?? currentInstanceInfo.currentInstance\n+\tawait ensureInstance(instance)\n+\n+\tconst { cacheKey } = params\n+\tinvariantResponse(cacheKey, 'cacheKey is required')\n+\treturn {\n+\t\tinstance: {\n+\t\t\thostname: instance,\n+\t\t\tregion: allInstances[instance],\n+\t\t\tisPrimary: currentInstanceInfo.primaryInstance === instance,\n+\t\t},\n+\t\tcacheKey,\n+\t\tvalue: cache.get(cacheKey),\n+\t}\n+}\ndiff --git a/app/routes/admin+/cache_.sqlite.server.ts b/app/routes/admin+/cache_.sqlite.server.ts\nnew file mode 100644\nindex 0000000..04746fc\n--- /dev/null\n+++ b/app/routes/admin+/cache_.sqlite.server.ts\n@@ -0,0 +1,59 @@\n+import { redirect } from 'react-router'\n+import { z } from 'zod'\n+import { cache } from '#app/utils/cache.server.ts'\n+import {\n+\tgetInstanceInfo,\n+\tgetInternalInstanceDomain,\n+} from '#app/utils/litefs.server'\n+import { type Route } from './+types/cache_.sqlite.ts'\n+\n+export async function updatePrimaryCacheValue({\n+\tkey,\n+\tcacheValue,\n+}: {\n+\tkey: string\n+\tcacheValue: any\n+}) {\n+\tconst { currentIsPrimary, primaryInstance } = await getInstanceInfo()\n+\tif (currentIsPrimary) {\n+\t\tthrow new Error(\n+\t\t\t`updatePrimaryCacheValue should not be called on the primary instance (${primaryInstance})}`,\n+\t\t)\n+\t}\n+\tconst domain = getInternalInstanceDomain(primaryInstance)\n+\tconst token = process.env.INTERNAL_COMMAND_TOKEN\n+\treturn fetch(`${domain}/admin/cache/sqlite`, {\n+\t\tmethod: 'POST',\n+\t\theaders: {\n+\t\t\tAuthorization: `Bearer ${token}`,\n+\t\t\t'Content-Type': 'application/json',\n+\t\t},\n+\t\tbody: JSON.stringify({ key, cacheValue }),\n+\t})\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst { currentIsPrimary, primaryInstance } = await getInstanceInfo()\n+\tif (!currentIsPrimary) {\n+\t\tthrow new Error(\n+\t\t\t`${request.url} should only be called on the primary instance (${primaryInstance})}`,\n+\t\t)\n+\t}\n+\tconst token = process.env.INTERNAL_COMMAND_TOKEN\n+\tconst isAuthorized =\n+\t\trequest.headers.get('Authorization') === `Bearer ${token}`\n+\tif (!isAuthorized) {\n+\t\t// nah, you can't be here...\n+\t\treturn redirect('https://www.youtube.com/watch?v=dQw4w9WgXcQ')\n+\t}\n+\tconst { key, cacheValue } = z\n+\t\t.object({ key: z.string(), cacheValue: z.unknown().optional() })\n+\t\t.parse(await request.json())\n+\tif (cacheValue === undefined) {\n+\t\tawait cache.delete(key)\n+\t} else {\n+\t\t// @ts-expect-error - we don't reliably know the type of cacheValue\n+\t\tawait cache.set(key, cacheValue)\n+\t}\n+\treturn { success: true }\n+}\ndiff --git a/app/routes/admin+/cache_.sqlite.tsx b/app/routes/admin+/cache_.sqlite.tsx\nnew file mode 100644\nindex 0000000..e469891\n--- /dev/null\n+++ b/app/routes/admin+/cache_.sqlite.tsx\n@@ -0,0 +1 @@\n+export { action } from './cache_.sqlite.server.ts'\ndiff --git a/app/routes/me.tsx b/app/routes/me.tsx\nnew file mode 100644\nindex 0000000..f7188b5\n--- /dev/null\n+++ b/app/routes/me.tsx\n@@ -0,0 +1,19 @@\n+import { redirect } from 'react-router'\n+import { requireUserId, logout } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { type Route } from './+types/me.ts'\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst user = await prisma.user.findUnique({ where: { id: userId } })\n+\tif (!user) {\n+\t\tconst requestUrl = new URL(request.url)\n+\t\tconst loginParams = new URLSearchParams([\n+\t\t\t['redirectTo', `${requestUrl.pathname}${requestUrl.search}`],\n+\t\t])\n+\t\tconst redirectTo = `/login?${loginParams}`\n+\t\tawait logout({ request, redirectTo })\n+\t\treturn redirect(redirectTo)\n+\t}\n+\treturn redirect(`/users/${user.username}`)\n+}\ndiff --git a/app/routes/resources+/download-user-data.tsx b/app/routes/resources+/download-user-data.tsx\nnew file mode 100644\nindex 0000000..b9fa4d7\n--- /dev/null\n+++ b/app/routes/resources+/download-user-data.tsx\n@@ -0,0 +1,62 @@\n+import { requireUserId } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { getDomainUrl, getNoteImgSrc, getUserImgSrc } from '#app/utils/misc.tsx'\n+import { type Route } from './+types/download-user-data.ts'\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst user = await prisma.user.findUniqueOrThrow({\n+\t\twhere: { id: userId },\n+\t\t// this is one of the *few* instances where you can use \"include\" because\n+\t\t// the goal is to literally get *everything*. Normally you should be\n+\t\t// explicit with \"select\". We're using select for images because we don't\n+\t\t// want to send back the entire blob of the image. We'll send a URL they can\n+\t\t// use to download it instead.\n+\t\tinclude: {\n+\t\t\timage: {\n+\t\t\t\tselect: {\n+\t\t\t\t\tid: true,\n+\t\t\t\t\tcreatedAt: true,\n+\t\t\t\t\tupdatedAt: true,\n+\t\t\t\t\tobjectKey: true,\n+\t\t\t\t},\n+\t\t\t},\n+\t\t\tnotes: {\n+\t\t\t\tinclude: {\n+\t\t\t\t\timages: {\n+\t\t\t\t\t\tselect: {\n+\t\t\t\t\t\t\tid: true,\n+\t\t\t\t\t\t\tcreatedAt: true,\n+\t\t\t\t\t\t\tupdatedAt: true,\n+\t\t\t\t\t\t\tobjectKey: true,\n+\t\t\t\t\t\t},\n+\t\t\t\t\t},\n+\t\t\t\t},\n+\t\t\t},\n+\t\t\tpassword: false, // <-- intentionally omit password\n+\t\t\tsessions: true,\n+\t\t\troles: true,\n+\t\t},\n+\t})\n+\n+\tconst domain = getDomainUrl(request)\n+\n+\treturn Response.json({\n+\t\tuser: {\n+\t\t\t...user,\n+\t\t\timage: user.image\n+\t\t\t\t? {\n+\t\t\t\t\t\t...user.image,\n+\t\t\t\t\t\turl: domain + getUserImgSrc(user.image.objectKey),\n+\t\t\t\t\t}\n+\t\t\t\t: null,\n+\t\t\tnotes: user.notes.map((note) => ({\n+\t\t\t\t...note,\n+\t\t\t\timages: note.images.map((image) => ({\n+\t\t\t\t\t...image,\n+\t\t\t\t\turl: domain + getNoteImgSrc(image.objectKey),\n+\t\t\t\t})),\n+\t\t\t})),\n+\t\t},\n+\t})\n+}\ndiff --git a/app/routes/resources+/healthcheck.tsx b/app/routes/resources+/healthcheck.tsx\nnew file mode 100644\nindex 0000000..e38230e\n--- /dev/null\n+++ b/app/routes/resources+/healthcheck.tsx\n@@ -0,0 +1,26 @@\n+// learn more: https://fly.io/docs/reference/configuration/#services-http_checks\n+import { prisma } from '#app/utils/db.server.ts'\n+import { type Route } from './+types/healthcheck.ts'\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst host =\n+\t\trequest.headers.get('X-Forwarded-Host') ?? request.headers.get('host')\n+\n+\ttry {\n+\t\t// if we can connect to the database and make a simple query\n+\t\t// and make a HEAD request to ourselves, then we're good.\n+\t\tawait Promise.all([\n+\t\t\tprisma.user.count(),\n+\t\t\tfetch(`${new URL(request.url).protocol}${host}`, {\n+\t\t\t\tmethod: 'HEAD',\n+\t\t\t\theaders: { 'X-Healthcheck': 'true' },\n+\t\t\t}).then((r) => {\n+\t\t\t\tif (!r.ok) return Promise.reject(r)\n+\t\t\t}),\n+\t\t])\n+\t\treturn new Response('OK')\n+\t} catch (error: unknown) {\n+\t\tconsole.log('healthcheck ❌', { error })\n+\t\treturn new Response('ERROR', { status: 500 })\n+\t}\n+}\ndiff --git a/app/routes/resources+/images.tsx b/app/routes/resources+/images.tsx\nnew file mode 100644\nindex 0000000..766e925\n--- /dev/null\n+++ b/app/routes/resources+/images.tsx\n@@ -0,0 +1,80 @@\n+import { promises as fs, constants } from 'node:fs'\n+import { invariantResponse } from '@epic-web/invariant'\n+import { getImgResponse } from 'openimg/node'\n+import { getDomainUrl } from '#app/utils/misc.tsx'\n+import { getSignedGetRequestInfo } from '#app/utils/storage.server.ts'\n+import { type Route } from './+types/images'\n+\n+let cacheDir: string | null = null\n+\n+async function getCacheDir() {\n+\tif (cacheDir) return cacheDir\n+\n+\tlet dir = './tests/fixtures/openimg'\n+\tif (process.env.NODE_ENV === 'production') {\n+\t\tconst isAccessible = await fs\n+\t\t\t.access('/data', constants.W_OK)\n+\t\t\t.then(() => true)\n+\t\t\t.catch(() => false)\n+\n+\t\tif (isAccessible) {\n+\t\t\tdir = '/data/images'\n+\t\t}\n+\t}\n+\n+\treturn (cacheDir = dir)\n+}\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst url = new URL(request.url)\n+\tconst searchParams = url.searchParams\n+\n+\tconst headers = new Headers()\n+\theaders.set('Cache-Control', 'public, max-age=31536000, immutable')\n+\n+\tconst objectKey = searchParams.get('objectKey')\n+\n+\treturn getImgResponse(request, {\n+\t\theaders,\n+\t\tallowlistedOrigins: [\n+\t\t\tgetDomainUrl(request),\n+\t\t\tprocess.env.AWS_ENDPOINT_URL_S3,\n+\t\t].filter(Boolean),\n+\t\tcacheFolder: await getCacheDir(),\n+\t\tgetImgSource: () => {\n+\t\t\tif (objectKey) {\n+\t\t\t\tconst { url: signedUrl, headers: signedHeaders } =\n+\t\t\t\t\tgetSignedGetRequestInfo(objectKey)\n+\t\t\t\treturn {\n+\t\t\t\t\ttype: 'fetch',\n+\t\t\t\t\turl: signedUrl,\n+\t\t\t\t\theaders: signedHeaders,\n+\t\t\t\t}\n+\t\t\t}\n+\n+\t\t\tconst src = searchParams.get('src')\n+\t\t\tinvariantResponse(src, 'src query parameter is required', { status: 400 })\n+\n+\t\t\tif (URL.canParse(src)) {\n+\t\t\t\t// Fetch image from external URL; will be matched against allowlist\n+\t\t\t\treturn {\n+\t\t\t\t\ttype: 'fetch',\n+\t\t\t\t\turl: src,\n+\t\t\t\t}\n+\t\t\t}\n+\t\t\t// Retrieve image from filesystem (public folder)\n+\t\t\tif (src.startsWith('/assets')) {\n+\t\t\t\t// Files managed by Vite\n+\t\t\t\treturn {\n+\t\t\t\t\ttype: 'fs',\n+\t\t\t\t\tpath: '.' + src,\n+\t\t\t\t}\n+\t\t\t}\n+\t\t\t// Fallback to files in public folder\n+\t\t\treturn {\n+\t\t\t\ttype: 'fs',\n+\t\t\t\tpath: './public' + src,\n+\t\t\t}\n+\t\t},\n+\t})\n+}\ndiff --git a/app/routes/resources+/theme-switch.tsx b/app/routes/resources+/theme-switch.tsx\nnew file mode 100644\nindex 0000000..e466824\n--- /dev/null\n+++ b/app/routes/resources+/theme-switch.tsx\n@@ -0,0 +1,143 @@\n+import { useForm, getFormProps } from '@conform-to/react'\n+import { parseWithZod } from '@conform-to/zod'\n+import { invariantResponse } from '@epic-web/invariant'\n+import { data, redirect, useFetcher, useFetchers } from 'react-router'\n+import { ServerOnly } from 'remix-utils/server-only'\n+import { z } from 'zod'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { useHints, useOptionalHints } from '#app/utils/client-hints.tsx'\n+import {\n+\tuseOptionalRequestInfo,\n+\tuseRequestInfo,\n+} from '#app/utils/request-info.ts'\n+import { type Theme, setTheme } from '#app/utils/theme.server.ts'\n+import { type Route } from './+types/theme-switch.ts'\n+const ThemeFormSchema = z.object({\n+\ttheme: z.enum(['system', 'light', 'dark']),\n+\t// this is useful for progressive enhancement\n+\tredirectTo: z.string().optional(),\n+})\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst formData = await request.formData()\n+\tconst submission = parseWithZod(formData, {\n+\t\tschema: ThemeFormSchema,\n+\t})\n+\n+\tinvariantResponse(submission.status === 'success', 'Invalid theme received')\n+\n+\tconst { theme, redirectTo } = submission.value\n+\n+\tconst responseInit = {\n+\t\theaders: { 'set-cookie': setTheme(theme) },\n+\t}\n+\tif (redirectTo) {\n+\t\treturn redirect(redirectTo, responseInit)\n+\t} else {\n+\t\treturn data({ result: submission.reply() }, responseInit)\n+\t}\n+}\n+\n+export function ThemeSwitch({\n+\tuserPreference,\n+}: {\n+\tuserPreference?: Theme | null\n+}) {\n+\tconst fetcher = useFetcher()\n+\tconst requestInfo = useRequestInfo()\n+\n+\tconst [form] = useForm({\n+\t\tid: 'theme-switch',\n+\t\tlastResult: fetcher.data?.result,\n+\t})\n+\n+\tconst optimisticMode = useOptimisticThemeMode()\n+\tconst mode = optimisticMode ?? userPreference ?? 'system'\n+\tconst nextMode =\n+\t\tmode === 'system' ? 'light' : mode === 'light' ? 'dark' : 'system'\n+\tconst modeLabel = {\n+\t\tlight: (\n+\t\t\t\n+\t\t\t\tLight\n+\t\t\t\n+\t\t),\n+\t\tdark: (\n+\t\t\t\n+\t\t\t\tDark\n+\t\t\t\n+\t\t),\n+\t\tsystem: (\n+\t\t\t\n+\t\t\t\tSystem\n+\t\t\t\n+\t\t),\n+\t}\n+\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\t\t{() => (\n+\t\t\t\t\t\n+\t\t\t\t)}\n+\t\t\t\n+\t\t\t\n+\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\t{modeLabel[mode]}\n+\t\t\t\t\n+\t\t\t

\n+\t\t\n+\t)\n+}\n+\n+/**\n+ * If the user's changing their theme mode preference, this will return the\n+ * value it's being changed to.\n+ */\n+export function useOptimisticThemeMode() {\n+\tconst fetchers = useFetchers()\n+\tconst themeFetcher = fetchers.find(\n+\t\t(f) => f.formAction === '/resources/theme-switch',\n+\t)\n+\n+\tif (themeFetcher && themeFetcher.formData) {\n+\t\tconst submission = parseWithZod(themeFetcher.formData, {\n+\t\t\tschema: ThemeFormSchema,\n+\t\t})\n+\n+\t\tif (submission.status === 'success') {\n+\t\t\treturn submission.value.theme\n+\t\t}\n+\t}\n+}\n+\n+/**\n+ * @returns the user's theme preference, or the client hint theme if the user\n+ * has not set a preference.\n+ */\n+export function useTheme() {\n+\tconst hints = useHints()\n+\tconst requestInfo = useRequestInfo()\n+\tconst optimisticMode = useOptimisticThemeMode()\n+\tif (optimisticMode) {\n+\t\treturn optimisticMode === 'system' ? hints.theme : optimisticMode\n+\t}\n+\treturn requestInfo.userPrefs.theme ?? hints.theme\n+}\n+\n+export function useOptionalTheme() {\n+\tconst optionalHints = useOptionalHints()\n+\tconst optionalRequestInfo = useOptionalRequestInfo()\n+\tconst optimisticMode = useOptimisticThemeMode()\n+\tif (optimisticMode) {\n+\t\treturn optimisticMode === 'system' ? optionalHints?.theme : optimisticMode\n+\t}\n+\treturn optionalRequestInfo?.userPrefs.theme ?? optionalHints?.theme\n+}\ndiff --git a/app/routes/settings+/profile.change-email.server.tsx b/app/routes/settings+/profile.change-email.server.tsx\nnew file mode 100644\nindex 0000000..2c31ac4\n--- /dev/null\n+++ b/app/routes/settings+/profile.change-email.server.tsx\n@@ -0,0 +1,124 @@\n+import { invariant } from '@epic-web/invariant'\n+import * as E from '@react-email/components'\n+import { data } from 'react-router'\n+import {\n+\trequireRecentVerification,\n+\ttype VerifyFunctionArgs,\n+} from '#app/routes/_auth+/verify.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { sendEmail } from '#app/utils/email.server.ts'\n+import { redirectWithToast } from '#app/utils/toast.server.ts'\n+import { verifySessionStorage } from '#app/utils/verification.server.ts'\n+import { newEmailAddressSessionKey } from './profile.change-email'\n+\n+export async function handleVerification({\n+\trequest,\n+\tsubmission,\n+}: VerifyFunctionArgs) {\n+\tawait requireRecentVerification(request)\n+\tinvariant(\n+\t\tsubmission.status === 'success',\n+\t\t'Submission should be successful by now',\n+\t)\n+\n+\tconst verifySession = await verifySessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\tconst newEmail = verifySession.get(newEmailAddressSessionKey)\n+\tif (!newEmail) {\n+\t\treturn data(\n+\t\t\t{\n+\t\t\t\tresult: submission.reply({\n+\t\t\t\t\tformErrors: [\n+\t\t\t\t\t\t'You must submit the code on the same device that requested the email change.',\n+\t\t\t\t\t],\n+\t\t\t\t}),\n+\t\t\t},\n+\t\t\t{ status: 400 },\n+\t\t)\n+\t}\n+\tconst preUpdateUser = await prisma.user.findFirstOrThrow({\n+\t\tselect: { email: true },\n+\t\twhere: { id: submission.value.target },\n+\t})\n+\tconst user = await prisma.user.update({\n+\t\twhere: { id: submission.value.target },\n+\t\tselect: { id: true, email: true, username: true },\n+\t\tdata: { email: newEmail },\n+\t})\n+\n+\tvoid sendEmail({\n+\t\tto: preUpdateUser.email,\n+\t\tsubject: 'Epic Stack email changed',\n+\t\treact: ,\n+\t})\n+\n+\treturn redirectWithToast(\n+\t\t'/settings/profile',\n+\t\t{\n+\t\t\ttitle: 'Email Changed',\n+\t\t\ttype: 'success',\n+\t\t\tdescription: `Your email has been changed to ${user.email}`,\n+\t\t},\n+\t\t{\n+\t\t\theaders: {\n+\t\t\t\t'set-cookie': await verifySessionStorage.destroySession(verifySession),\n+\t\t\t},\n+\t\t},\n+\t)\n+}\n+\n+export function EmailChangeEmail({\n+\tverifyUrl,\n+\totp,\n+}: {\n+\tverifyUrl: string\n+\totp: string\n+}) {\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\t\t

\n+\t\t\t\t\tEpic Notes Email Change\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\tHere's your verification code: {otp}\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\tOr click the link:\n+\t\t\t\t

\n+\t\t\t\t{verifyUrl}\n+\t\t\t\n+\t\t\n+\t)\n+}\n+\n+function EmailChangeNoticeEmail({ userId }: { userId: string }) {\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\t\t

\n+\t\t\t\t\tYour Epic Notes email has been changed\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\tWe're writing to let you know that your Epic Notes email has been\n+\t\t\t\t\t\tchanged.\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\tIf you changed your email address, then you can safely ignore this.\n+\t\t\t\t\t\tBut if you did not change your email address, then please contact\n+\t\t\t\t\t\tsupport immediately.\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\tYour Account ID: {userId}\n+\t\t\t\t

\n+\t\t\t\n+\t\t\n+\t)\n+}\ndiff --git a/app/routes/settings+/profile.change-email.tsx b/app/routes/settings+/profile.change-email.tsx\nnew file mode 100644\nindex 0000000..47e8676\n--- /dev/null\n+++ b/app/routes/settings+/profile.change-email.tsx\n@@ -0,0 +1,146 @@\n+import { getFormProps, getInputProps, useForm } from '@conform-to/react'\n+import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import { data, redirect, Form } from 'react-router'\n+import { z } from 'zod'\n+import { ErrorList, Field } from '#app/components/forms.tsx'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import {\n+\tprepareVerification,\n+\trequireRecentVerification,\n+} from '#app/routes/_auth+/verify.server.ts'\n+import { requireUserId } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { sendEmail } from '#app/utils/email.server.ts'\n+import { useIsPending } from '#app/utils/misc.tsx'\n+import { EmailSchema } from '#app/utils/user-validation.ts'\n+import { verifySessionStorage } from '#app/utils/verification.server.ts'\n+import { type Route } from './+types/profile.change-email.ts'\n+import { EmailChangeEmail } from './profile.change-email.server.tsx'\n+import { type BreadcrumbHandle } from './profile.tsx'\n+\n+export const handle: BreadcrumbHandle & SEOHandle = {\n+\tbreadcrumb: Change Email,\n+\tgetSitemapEntries: () => null,\n+}\n+\n+export const newEmailAddressSessionKey = 'new-email-address'\n+\n+const ChangeEmailSchema = z.object({\n+\temail: EmailSchema,\n+})\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tawait requireRecentVerification(request)\n+\tconst userId = await requireUserId(request)\n+\tconst user = await prisma.user.findUnique({\n+\t\twhere: { id: userId },\n+\t\tselect: { email: true },\n+\t})\n+\tif (!user) {\n+\t\tconst params = new URLSearchParams({ redirectTo: request.url })\n+\t\tthrow redirect(`/login?${params}`)\n+\t}\n+\treturn { user }\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst formData = await request.formData()\n+\tconst submission = await parseWithZod(formData, {\n+\t\tschema: ChangeEmailSchema.superRefine(async (data, ctx) => {\n+\t\t\tconst existingUser = await prisma.user.findUnique({\n+\t\t\t\twhere: { email: data.email },\n+\t\t\t})\n+\t\t\tif (existingUser) {\n+\t\t\t\tctx.addIssue({\n+\t\t\t\t\tpath: ['email'],\n+\t\t\t\t\tcode: z.ZodIssueCode.custom,\n+\t\t\t\t\tmessage: 'This email is already in use.',\n+\t\t\t\t})\n+\t\t\t}\n+\t\t}),\n+\t\tasync: true,\n+\t})\n+\n+\tif (submission.status !== 'success') {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply() },\n+\t\t\t{ status: submission.status === 'error' ? 400 : 200 },\n+\t\t)\n+\t}\n+\tconst { otp, redirectTo, verifyUrl } = await prepareVerification({\n+\t\tperiod: 10 * 60,\n+\t\trequest,\n+\t\ttarget: userId,\n+\t\ttype: 'change-email',\n+\t})\n+\n+\tconst response = await sendEmail({\n+\t\tto: submission.value.email,\n+\t\tsubject: `Epic Notes Email Change Verification`,\n+\t\treact: ,\n+\t})\n+\n+\tif (response.status === 'success') {\n+\t\tconst verifySession = await verifySessionStorage.getSession()\n+\t\tverifySession.set(newEmailAddressSessionKey, submission.value.email)\n+\t\treturn redirect(redirectTo.toString(), {\n+\t\t\theaders: {\n+\t\t\t\t'set-cookie': await verifySessionStorage.commitSession(verifySession),\n+\t\t\t},\n+\t\t})\n+\t} else {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply({ formErrors: [response.error.message] }) },\n+\t\t\t{ status: 500 },\n+\t\t)\n+\t}\n+}\n+\n+export default function ChangeEmailIndex({\n+\tloaderData,\n+\tactionData,\n+}: Route.ComponentProps) {\n+\tconst [form, fields] = useForm({\n+\t\tid: 'change-email-form',\n+\t\tconstraint: getZodConstraint(ChangeEmailSchema),\n+\t\tlastResult: actionData?.result,\n+\t\tonValidate({ formData }) {\n+\t\t\treturn parseWithZod(formData, { schema: ChangeEmailSchema })\n+\t\t},\n+\t})\n+\n+\tconst isPending = useIsPending()\n+\treturn (\n+\t\t

\n+\t\t\t

Change Email

\n+\t\t\t

You will receive an email at the new email address to confirm.

\n+\t\t\t

\n+\t\t\t\tAn email notice will also be sent to your old address{' '}\n+\t\t\t\t{loaderData.user.email}.\n+\t\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/settings+/profile.connections.tsx b/app/routes/settings+/profile.connections.tsx\nnew file mode 100644\nindex 0000000..38104eb\n--- /dev/null\n+++ b/app/routes/settings+/profile.connections.tsx\n@@ -0,0 +1,212 @@\n+import { invariantResponse } from '@epic-web/invariant'\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import { useState } from 'react'\n+import { data, useFetcher } from 'react-router'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import {\n+\tTooltip,\n+\tTooltipContent,\n+\tTooltipProvider,\n+\tTooltipTrigger,\n+} from '#app/components/ui/tooltip.tsx'\n+import { requireUserId } from '#app/utils/auth.server.ts'\n+import { resolveConnectionData } from '#app/utils/connections.server.ts'\n+import {\n+\tProviderConnectionForm,\n+\ttype ProviderName,\n+\tProviderNameSchema,\n+\tproviderIcons,\n+\tproviderNames,\n+} from '#app/utils/connections.tsx'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { pipeHeaders } from '#app/utils/headers.server.js'\n+import { makeTimings } from '#app/utils/timing.server.ts'\n+import { createToastHeaders } from '#app/utils/toast.server.ts'\n+import { type Route } from './+types/profile.connections.ts'\n+import { type BreadcrumbHandle } from './profile.tsx'\n+\n+export const handle: BreadcrumbHandle & SEOHandle = {\n+\tbreadcrumb: Connections,\n+\tgetSitemapEntries: () => null,\n+}\n+\n+async function userCanDeleteConnections(userId: string) {\n+\tconst user = await prisma.user.findUnique({\n+\t\tselect: {\n+\t\t\tpassword: { select: { userId: true } },\n+\t\t\t_count: { select: { connections: true } },\n+\t\t},\n+\t\twhere: { id: userId },\n+\t})\n+\t// user can delete their connections if they have a password\n+\tif (user?.password) return true\n+\t// users have to have more than one remaining connection to delete one\n+\treturn Boolean(user?._count.connections && user?._count.connections > 1)\n+}\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst timings = makeTimings('profile connections loader')\n+\tconst rawConnections = await prisma.connection.findMany({\n+\t\tselect: { id: true, providerName: true, providerId: true, createdAt: true },\n+\t\twhere: { userId },\n+\t})\n+\tconst connections: Array<{\n+\t\tproviderName: ProviderName\n+\t\tid: string\n+\t\tdisplayName: string\n+\t\tlink?: string | null\n+\t\tcreatedAtFormatted: string\n+\t}> = []\n+\tfor (const connection of rawConnections) {\n+\t\tconst r = ProviderNameSchema.safeParse(connection.providerName)\n+\t\tif (!r.success) continue\n+\t\tconst providerName = r.data\n+\t\tconst connectionData = await resolveConnectionData(\n+\t\t\tproviderName,\n+\t\t\tconnection.providerId,\n+\t\t\t{ timings },\n+\t\t)\n+\t\tconnections.push({\n+\t\t\t...connectionData,\n+\t\t\tproviderName,\n+\t\t\tid: connection.id,\n+\t\t\tcreatedAtFormatted: connection.createdAt.toLocaleString(),\n+\t\t})\n+\t}\n+\n+\treturn data(\n+\t\t{\n+\t\t\tconnections,\n+\t\t\tcanDeleteConnections: await userCanDeleteConnections(userId),\n+\t\t},\n+\t\t{ headers: { 'Server-Timing': timings.toString() } },\n+\t)\n+}\n+\n+export const headers: Route.HeadersFunction = pipeHeaders\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst formData = await request.formData()\n+\tinvariantResponse(\n+\t\tformData.get('intent') === 'delete-connection',\n+\t\t'Invalid intent',\n+\t)\n+\tinvariantResponse(\n+\t\tawait userCanDeleteConnections(userId),\n+\t\t'You cannot delete your last connection unless you have a password.',\n+\t)\n+\tconst connectionId = formData.get('connectionId')\n+\tinvariantResponse(typeof connectionId === 'string', 'Invalid connectionId')\n+\tawait prisma.connection.delete({\n+\t\twhere: {\n+\t\t\tid: connectionId,\n+\t\t\tuserId: userId,\n+\t\t},\n+\t})\n+\tconst toastHeaders = await createToastHeaders({\n+\t\ttitle: 'Deleted',\n+\t\tdescription: 'Your connection has been deleted.',\n+\t})\n+\treturn data({ status: 'success' } as const, { headers: toastHeaders })\n+}\n+\n+export default function Connections({ loaderData }: Route.ComponentProps) {\n+\treturn (\n+\t\t

\n+\t\t\t{loaderData.connections.length ? (\n+\t\t\t\t

\n+\t\t\t\t\t

Here are your current connections:

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t) : (\n+\t\t\t\t

You don't have any connections yet.

\n+\t\t\t)}\n+\t\t\t

\n+\t\t\t\t{providerNames.map((providerName) => (\n+\t\t\t\t\t\n+\t\t\t\t))}\n+\t\t\t

\n+\t\t

\n+\t)\n+}\n+\n+function Connection({\n+\tconnection,\n+\tcanDelete,\n+}: {\n+\tconnection: Route.ComponentProps['loaderData']['connections'][number]\n+\tcanDelete: boolean\n+}) {\n+\tconst deleteFetcher = useFetcher()\n+\tconst [infoOpen, setInfoOpen] = useState(false)\n+\tconst icon = providerIcons[connection.providerName]\n+\treturn (\n+\t\t

\n+\t\t\t\n+\t\t\t\t{icon}\n+\t\t\t\t\n+\t\t\t\t\t{connection.link ? (\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t{connection.displayName}\n+\t\t\t\t\t\t\n+\t\t\t\t\t) : (\n+\t\t\t\t\t\tconnection.displayName\n+\t\t\t\t\t)}{' '}\n+\t\t\t\t\t({connection.createdAtFormatted})\n+\t\t\t\t\n+\t\t\t\n+\t\t\t{canDelete ? (\n+\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\tDisconnect this account\n+\t\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\n+\t\t\t) : (\n+\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\t setInfoOpen(true)}>\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\tYou cannot delete your last connection unless you have a password.\n+\t\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\n+\t\t\t)}\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/settings+/profile.index.tsx b/app/routes/settings+/profile.index.tsx\nnew file mode 100644\nindex 0000000..d68a7a7\n--- /dev/null\n+++ b/app/routes/settings+/profile.index.tsx\n@@ -0,0 +1,371 @@\n+import { getFormProps, getInputProps, useForm } from '@conform-to/react'\n+import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n+import { invariantResponse } from '@epic-web/invariant'\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import { Img } from 'openimg/react'\n+import { data, Link, useFetcher } from 'react-router'\n+import { z } from 'zod'\n+import { ErrorList, Field } from '#app/components/forms.tsx'\n+import { Button } from '#app/components/ui/button.tsx'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import { requireUserId, sessionKey } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { getUserImgSrc, useDoubleCheck } from '#app/utils/misc.tsx'\n+import { authSessionStorage } from '#app/utils/session.server.ts'\n+import { redirectWithToast } from '#app/utils/toast.server.ts'\n+import { NameSchema, UsernameSchema } from '#app/utils/user-validation.ts'\n+import { type Route } from './+types/profile.index.ts'\n+import { twoFAVerificationType } from './profile.two-factor.tsx'\n+\n+export const handle: SEOHandle = {\n+\tgetSitemapEntries: () => null,\n+}\n+\n+const ProfileFormSchema = z.object({\n+\tname: NameSchema.nullable().default(null),\n+\tusername: UsernameSchema,\n+})\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst user = await prisma.user.findUniqueOrThrow({\n+\t\twhere: { id: userId },\n+\t\tselect: {\n+\t\t\tid: true,\n+\t\t\tname: true,\n+\t\t\tusername: true,\n+\t\t\temail: true,\n+\t\t\timage: {\n+\t\t\t\tselect: { objectKey: true },\n+\t\t\t},\n+\t\t\t_count: {\n+\t\t\t\tselect: {\n+\t\t\t\t\tsessions: {\n+\t\t\t\t\t\twhere: {\n+\t\t\t\t\t\t\texpirationDate: { gt: new Date() },\n+\t\t\t\t\t\t},\n+\t\t\t\t\t},\n+\t\t\t\t},\n+\t\t\t},\n+\t\t},\n+\t})\n+\n+\tconst twoFactorVerification = await prisma.verification.findUnique({\n+\t\tselect: { id: true },\n+\t\twhere: { target_type: { type: twoFAVerificationType, target: userId } },\n+\t})\n+\n+\tconst password = await prisma.password.findUnique({\n+\t\tselect: { userId: true },\n+\t\twhere: { userId },\n+\t})\n+\n+\treturn {\n+\t\tuser,\n+\t\thasPassword: Boolean(password),\n+\t\tisTwoFactorEnabled: Boolean(twoFactorVerification),\n+\t}\n+}\n+\n+type ProfileActionArgs = {\n+\trequest: Request\n+\tuserId: string\n+\tformData: FormData\n+}\n+const profileUpdateActionIntent = 'update-profile'\n+const signOutOfSessionsActionIntent = 'sign-out-of-sessions'\n+const deleteDataActionIntent = 'delete-data'\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst formData = await request.formData()\n+\tconst intent = formData.get('intent')\n+\tswitch (intent) {\n+\t\tcase profileUpdateActionIntent: {\n+\t\t\treturn profileUpdateAction({ request, userId, formData })\n+\t\t}\n+\t\tcase signOutOfSessionsActionIntent: {\n+\t\t\treturn signOutOfSessionsAction({ request, userId, formData })\n+\t\t}\n+\t\tcase deleteDataActionIntent: {\n+\t\t\treturn deleteDataAction({ request, userId, formData })\n+\t\t}\n+\t\tdefault: {\n+\t\t\tthrow new Response(`Invalid intent \"${intent}\"`, { status: 400 })\n+\t\t}\n+\t}\n+}\n+\n+export default function EditUserProfile({ loaderData }: Route.ComponentProps) {\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t

\n+\t\t\t\n+\n+\t\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\tChange email from {loaderData.user.email}\n+\t\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\t{loaderData.isTwoFactorEnabled ? (\n+\t\t\t\t\t\t\t2FA is enabled\n+\t\t\t\t\t\t) : (\n+\t\t\t\t\t\t\tEnable 2FA\n+\t\t\t\t\t\t)}\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t{loaderData.hasPassword ? 'Change Password' : 'Create a Password'}\n+\t\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\tManage connections\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\tManage passkeys\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\tDownload your data\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t

\n+\t\t

\n+\t)\n+}\n+\n+async function profileUpdateAction({ userId, formData }: ProfileActionArgs) {\n+\tconst submission = await parseWithZod(formData, {\n+\t\tasync: true,\n+\t\tschema: ProfileFormSchema.superRefine(async ({ username }, ctx) => {\n+\t\t\tconst existingUsername = await prisma.user.findUnique({\n+\t\t\t\twhere: { username },\n+\t\t\t\tselect: { id: true },\n+\t\t\t})\n+\t\t\tif (existingUsername && existingUsername.id !== userId) {\n+\t\t\t\tctx.addIssue({\n+\t\t\t\t\tpath: ['username'],\n+\t\t\t\t\tcode: z.ZodIssueCode.custom,\n+\t\t\t\t\tmessage: 'A user already exists with this username',\n+\t\t\t\t})\n+\t\t\t}\n+\t\t}),\n+\t})\n+\tif (submission.status !== 'success') {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply() },\n+\t\t\t{ status: submission.status === 'error' ? 400 : 200 },\n+\t\t)\n+\t}\n+\n+\tconst { username, name } = submission.value\n+\n+\tawait prisma.user.update({\n+\t\tselect: { username: true },\n+\t\twhere: { id: userId },\n+\t\tdata: {\n+\t\t\tname: name,\n+\t\t\tusername: username,\n+\t\t},\n+\t})\n+\n+\treturn {\n+\t\tresult: submission.reply(),\n+\t}\n+}\n+\n+function UpdateProfile({\n+\tloaderData,\n+}: {\n+\tloaderData: Route.ComponentProps['loaderData']\n+}) {\n+\tconst fetcher = useFetcher()\n+\n+\tconst [form, fields] = useForm({\n+\t\tid: 'edit-profile',\n+\t\tconstraint: getZodConstraint(ProfileFormSchema),\n+\t\tlastResult: fetcher.data?.result,\n+\t\tonValidate({ formData }) {\n+\t\t\treturn parseWithZod(formData, { schema: ProfileFormSchema })\n+\t\t},\n+\t\tdefaultValue: {\n+\t\t\tusername: loaderData.user.username,\n+\t\t\tname: loaderData.user.name,\n+\t\t},\n+\t})\n+\n+\treturn (\n+\t\t\n+\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t

\n+\n+\t\t\t\n+\n+\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\tSave changes\n+\t\t\t\t\n+\t\t\t

\n+\t\t\n+\t)\n+}\n+\n+async function signOutOfSessionsAction({ request, userId }: ProfileActionArgs) {\n+\tconst authSession = await authSessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\tconst sessionId = authSession.get(sessionKey)\n+\tinvariantResponse(\n+\t\tsessionId,\n+\t\t'You must be authenticated to sign out of other sessions',\n+\t)\n+\tawait prisma.session.deleteMany({\n+\t\twhere: {\n+\t\t\tuserId,\n+\t\t\tid: { not: sessionId },\n+\t\t},\n+\t})\n+\treturn { status: 'success' } as const\n+}\n+\n+function SignOutOfSessions({\n+\tloaderData,\n+}: {\n+\tloaderData: Route.ComponentProps['loaderData']\n+}) {\n+\tconst dc = useDoubleCheck()\n+\n+\tconst fetcher = useFetcher()\n+\tconst otherSessionsCount = loaderData.user._count.sessions - 1\n+\treturn (\n+\t\t

\n+\t\t\t{otherSessionsCount ? (\n+\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t{dc.doubleCheck\n+\t\t\t\t\t\t\t\t? `Are you sure?`\n+\t\t\t\t\t\t\t\t: `Sign out of ${otherSessionsCount} other sessions`}\n+\t\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\n+\t\t\t) : (\n+\t\t\t\tThis is your only session\n+\t\t\t)}\n+\t\t

\n+\t)\n+}\n+\n+async function deleteDataAction({ userId }: ProfileActionArgs) {\n+\tawait prisma.user.delete({ where: { id: userId } })\n+\treturn redirectWithToast('/', {\n+\t\ttype: 'success',\n+\t\ttitle: 'Data Deleted',\n+\t\tdescription: 'All of your data has been deleted',\n+\t})\n+}\n+\n+function DeleteData() {\n+\tconst dc = useDoubleCheck()\n+\n+\tconst fetcher = useFetcher()\n+\treturn (\n+\t\t

\n+\t\t\t\n+\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\t{dc.doubleCheck ? `Are you sure?` : `Delete all your data`}\n+\t\t\t\t\t\n+\t\t\t\t\n+\t\t\t\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/settings+/profile.passkeys.tsx b/app/routes/settings+/profile.passkeys.tsx\nnew file mode 100644\nindex 0000000..31b3dde\n--- /dev/null\n+++ b/app/routes/settings+/profile.passkeys.tsx\n@@ -0,0 +1,191 @@\n+import { startRegistration } from '@simplewebauthn/browser'\n+import { formatDistanceToNow } from 'date-fns'\n+import { useState } from 'react'\n+import { Form, useRevalidator } from 'react-router'\n+import { z } from 'zod'\n+import { Button } from '#app/components/ui/button.tsx'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { requireUserId } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { type Route } from './+types/profile.passkeys.ts'\n+\n+export const handle = {\n+\tbreadcrumb: Passkeys,\n+}\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst passkeys = await prisma.passkey.findMany({\n+\t\twhere: { userId },\n+\t\torderBy: { createdAt: 'desc' },\n+\t\tselect: {\n+\t\t\tid: true,\n+\t\t\tdeviceType: true,\n+\t\t\tcreatedAt: true,\n+\t\t},\n+\t})\n+\treturn { passkeys }\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst formData = await request.formData()\n+\tconst intent = formData.get('intent')\n+\n+\tif (intent === 'delete') {\n+\t\tconst passkeyId = formData.get('passkeyId')\n+\t\tif (typeof passkeyId !== 'string') {\n+\t\t\treturn Response.json(\n+\t\t\t\t{ status: 'error', error: 'Invalid passkey ID' },\n+\t\t\t\t{ status: 400 },\n+\t\t\t)\n+\t\t}\n+\n+\t\tawait prisma.passkey.delete({\n+\t\t\twhere: {\n+\t\t\t\tid: passkeyId,\n+\t\t\t\tuserId, // Ensure the passkey belongs to the user\n+\t\t\t},\n+\t\t})\n+\t\treturn Response.json({ status: 'success' })\n+\t}\n+\n+\treturn Response.json(\n+\t\t{ status: 'error', error: 'Invalid intent' },\n+\t\t{ status: 400 },\n+\t)\n+}\n+\n+const RegistrationOptionsSchema = z.object({\n+\toptions: z.object({\n+\t\trp: z.object({\n+\t\t\tid: z.string(),\n+\t\t\tname: z.string(),\n+\t\t}),\n+\t\tuser: z.object({\n+\t\t\tid: z.string(),\n+\t\t\tname: z.string(),\n+\t\t\tdisplayName: z.string(),\n+\t\t}),\n+\t\tchallenge: z.string(),\n+\t\tpubKeyCredParams: z.array(\n+\t\t\tz.object({\n+\t\t\t\ttype: z.literal('public-key'),\n+\t\t\t\talg: z.number(),\n+\t\t\t}),\n+\t\t),\n+\t\tauthenticatorSelection: z\n+\t\t\t.object({\n+\t\t\t\tauthenticatorAttachment: z\n+\t\t\t\t\t.enum(['platform', 'cross-platform'])\n+\t\t\t\t\t.optional(),\n+\t\t\t\tresidentKey: z\n+\t\t\t\t\t.enum(['required', 'preferred', 'discouraged'])\n+\t\t\t\t\t.optional(),\n+\t\t\t\tuserVerification: z\n+\t\t\t\t\t.enum(['required', 'preferred', 'discouraged'])\n+\t\t\t\t\t.optional(),\n+\t\t\t\trequireResidentKey: z.boolean().optional(),\n+\t\t\t})\n+\t\t\t.optional(),\n+\t}),\n+}) satisfies z.ZodType<{ options: PublicKeyCredentialCreationOptionsJSON }>\n+\n+export default function Passkeys({ loaderData }: Route.ComponentProps) {\n+\tconst revalidator = useRevalidator()\n+\tconst [error, setError] = useState(null)\n+\n+\tasync function handlePasskeyRegistration() {\n+\t\ttry {\n+\t\t\tsetError(null)\n+\t\t\tconst resp = await fetch('/webauthn/registration')\n+\t\t\tconst jsonResult = await resp.json()\n+\t\t\tconst parsedResult = RegistrationOptionsSchema.parse(jsonResult)\n+\n+\t\t\tconst regResult = await startRegistration({\n+\t\t\t\toptionsJSON: parsedResult.options,\n+\t\t\t})\n+\n+\t\t\tconst verificationResp = await fetch('/webauthn/registration', {\n+\t\t\t\tmethod: 'POST',\n+\t\t\t\theaders: { 'Content-Type': 'application/json' },\n+\t\t\t\tbody: JSON.stringify(regResult),\n+\t\t\t})\n+\n+\t\t\tif (!verificationResp.ok) {\n+\t\t\t\tthrow new Error('Failed to verify registration')\n+\t\t\t}\n+\n+\t\t\tvoid revalidator.revalidate()\n+\t\t} catch (err) {\n+\t\t\tconsole.error('Failed to create passkey:', err)\n+\t\t\tsetError('Failed to create passkey. Please try again.')\n+\t\t}\n+\t}\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

Passkeys

\n+\t\t\t\t

\n+\n+\t\t\t{error ? (\n+\t\t\t\t

\n+\t\t\t\t\t{error}\n+\t\t\t\t

\n+\t\t\t) : null}\n+\n+\t\t\t{loaderData.passkeys.length ? (\n+\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t{passkey.deviceType === 'platform'\n+\t\t\t\t\t\t\t\t\t\t\t? 'Device'\n+\t\t\t\t\t\t\t\t\t\t\t: 'Security Key'}\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\tRegistered {formatDistanceToNow(new Date(passkey.createdAt))}{' '}\n+\t\t\t\t\t\t\t\t\tago\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t) : (\n+\t\t\t\t

\n+\t\t\t\t\tNo passkeys registered yet\n+\t\t\t\t

\n+\t\t\t)}\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/settings+/profile.password.tsx b/app/routes/settings+/profile.password.tsx\nnew file mode 100644\nindex 0000000..7503496\n--- /dev/null\n+++ b/app/routes/settings+/profile.password.tsx\n@@ -0,0 +1,182 @@\n+import { getFormProps, getInputProps, useForm } from '@conform-to/react'\n+import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import { data, redirect, Form, Link } from 'react-router'\n+import { z } from 'zod'\n+import { ErrorList, Field } from '#app/components/forms.tsx'\n+import { Button } from '#app/components/ui/button.tsx'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import {\n+\tcheckIsCommonPassword,\n+\tgetPasswordHash,\n+\trequireUserId,\n+\tverifyUserPassword,\n+} from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { useIsPending } from '#app/utils/misc.tsx'\n+import { redirectWithToast } from '#app/utils/toast.server.ts'\n+import { PasswordSchema } from '#app/utils/user-validation.ts'\n+import { type Route } from './+types/profile.password.ts'\n+import { type BreadcrumbHandle } from './profile.tsx'\n+\n+export const handle: BreadcrumbHandle & SEOHandle = {\n+\tbreadcrumb: Password,\n+\tgetSitemapEntries: () => null,\n+}\n+\n+const ChangePasswordForm = z\n+\t.object({\n+\t\tcurrentPassword: PasswordSchema,\n+\t\tnewPassword: PasswordSchema,\n+\t\tconfirmNewPassword: PasswordSchema,\n+\t})\n+\t.superRefine(({ confirmNewPassword, newPassword }, ctx) => {\n+\t\tif (confirmNewPassword !== newPassword) {\n+\t\t\tctx.addIssue({\n+\t\t\t\tpath: ['confirmNewPassword'],\n+\t\t\t\tcode: z.ZodIssueCode.custom,\n+\t\t\t\tmessage: 'The passwords must match',\n+\t\t\t})\n+\t\t}\n+\t})\n+\n+async function requirePassword(userId: string) {\n+\tconst password = await prisma.password.findUnique({\n+\t\tselect: { userId: true },\n+\t\twhere: { userId },\n+\t})\n+\tif (!password) {\n+\t\tthrow redirect('/settings/profile/password/create')\n+\t}\n+}\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst userId = await requireUserId(request)\n+\tawait requirePassword(userId)\n+\treturn {}\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst userId = await requireUserId(request)\n+\tawait requirePassword(userId)\n+\tconst formData = await request.formData()\n+\tconst submission = await parseWithZod(formData, {\n+\t\tasync: true,\n+\t\tschema: ChangePasswordForm.superRefine(\n+\t\t\tasync ({ currentPassword, newPassword }, ctx) => {\n+\t\t\t\tif (currentPassword && newPassword) {\n+\t\t\t\t\tconst user = await verifyUserPassword({ id: userId }, currentPassword)\n+\t\t\t\t\tif (!user) {\n+\t\t\t\t\t\tctx.addIssue({\n+\t\t\t\t\t\t\tpath: ['currentPassword'],\n+\t\t\t\t\t\t\tcode: z.ZodIssueCode.custom,\n+\t\t\t\t\t\t\tmessage: 'Incorrect password.',\n+\t\t\t\t\t\t})\n+\t\t\t\t\t}\n+\t\t\t\t\tconst isCommonPassword = await checkIsCommonPassword(newPassword)\n+\t\t\t\t\tif (isCommonPassword) {\n+\t\t\t\t\t\tctx.addIssue({\n+\t\t\t\t\t\t\tpath: ['newPassword'],\n+\t\t\t\t\t\t\tcode: 'custom',\n+\t\t\t\t\t\t\tmessage: 'Password is too common',\n+\t\t\t\t\t\t})\n+\t\t\t\t\t}\n+\t\t\t\t}\n+\t\t\t},\n+\t\t),\n+\t})\n+\tif (submission.status !== 'success') {\n+\t\treturn data(\n+\t\t\t{\n+\t\t\t\tresult: submission.reply({\n+\t\t\t\t\thideFields: ['currentPassword', 'newPassword', 'confirmNewPassword'],\n+\t\t\t\t}),\n+\t\t\t},\n+\t\t\t{ status: submission.status === 'error' ? 400 : 200 },\n+\t\t)\n+\t}\n+\n+\tconst { newPassword } = submission.value\n+\n+\tawait prisma.user.update({\n+\t\tselect: { username: true },\n+\t\twhere: { id: userId },\n+\t\tdata: {\n+\t\t\tpassword: {\n+\t\t\t\tupdate: {\n+\t\t\t\t\thash: await getPasswordHash(newPassword),\n+\t\t\t\t},\n+\t\t\t},\n+\t\t},\n+\t})\n+\n+\treturn redirectWithToast(\n+\t\t`/settings/profile`,\n+\t\t{\n+\t\t\ttype: 'success',\n+\t\t\ttitle: 'Password Changed',\n+\t\t\tdescription: 'Your password has been changed.',\n+\t\t},\n+\t\t{ status: 302 },\n+\t)\n+}\n+\n+export default function ChangePasswordRoute({\n+\tactionData,\n+}: Route.ComponentProps) {\n+\tconst isPending = useIsPending()\n+\n+\tconst [form, fields] = useForm({\n+\t\tid: 'password-change-form',\n+\t\tconstraint: getZodConstraint(ChangePasswordForm),\n+\t\tlastResult: actionData?.result,\n+\t\tonValidate({ formData }) {\n+\t\t\treturn parseWithZod(formData, { schema: ChangePasswordForm })\n+\t\t},\n+\t\tshouldRevalidate: 'onBlur',\n+\t})\n+\n+\treturn (\n+\t\t

\n+\t\t\t\n+\t\t\t\n+\t\t\t\n+\t\t\t\n+\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t\tChange Password\n+\t\t\t\t\n+\t\t\t

\n+\t\t\n+\t)\n+}\ndiff --git a/app/routes/settings+/profile.password_.create.tsx b/app/routes/settings+/profile.password_.create.tsx\nnew file mode 100644\nindex 0000000..8fc29d7\n--- /dev/null\n+++ b/app/routes/settings+/profile.password_.create.tsx\n@@ -0,0 +1,137 @@\n+import { getFormProps, getInputProps, useForm } from '@conform-to/react'\n+import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import { data, redirect, Form, Link } from 'react-router'\n+import { ErrorList, Field } from '#app/components/forms.tsx'\n+import { Button } from '#app/components/ui/button.tsx'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import {\n+\tcheckIsCommonPassword,\n+\tgetPasswordHash,\n+\trequireUserId,\n+} from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { useIsPending } from '#app/utils/misc.tsx'\n+import { PasswordAndConfirmPasswordSchema } from '#app/utils/user-validation.ts'\n+import { type Route } from './+types/profile.password_.create.ts'\n+import { type BreadcrumbHandle } from './profile.tsx'\n+\n+export const handle: BreadcrumbHandle & SEOHandle = {\n+\tbreadcrumb: Password,\n+\tgetSitemapEntries: () => null,\n+}\n+\n+const CreatePasswordForm = PasswordAndConfirmPasswordSchema\n+\n+async function requireNoPassword(userId: string) {\n+\tconst password = await prisma.password.findUnique({\n+\t\tselect: { userId: true },\n+\t\twhere: { userId },\n+\t})\n+\tif (password) {\n+\t\tthrow redirect('/settings/profile/password')\n+\t}\n+}\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst userId = await requireUserId(request)\n+\tawait requireNoPassword(userId)\n+\treturn {}\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst userId = await requireUserId(request)\n+\tawait requireNoPassword(userId)\n+\tconst formData = await request.formData()\n+\tconst submission = await parseWithZod(formData, {\n+\t\tasync: true,\n+\t\tschema: CreatePasswordForm.superRefine(async ({ password }, ctx) => {\n+\t\t\tconst isCommonPassword = await checkIsCommonPassword(password)\n+\t\t\tif (isCommonPassword) {\n+\t\t\t\tctx.addIssue({\n+\t\t\t\t\tpath: ['password'],\n+\t\t\t\t\tcode: 'custom',\n+\t\t\t\t\tmessage: 'Password is too common',\n+\t\t\t\t})\n+\t\t\t}\n+\t\t}),\n+\t})\n+\tif (submission.status !== 'success') {\n+\t\treturn data(\n+\t\t\t{\n+\t\t\t\tresult: submission.reply({\n+\t\t\t\t\thideFields: ['password', 'confirmPassword'],\n+\t\t\t\t}),\n+\t\t\t},\n+\t\t\t{ status: submission.status === 'error' ? 400 : 200 },\n+\t\t)\n+\t}\n+\n+\tconst { password } = submission.value\n+\n+\tawait prisma.user.update({\n+\t\tselect: { username: true },\n+\t\twhere: { id: userId },\n+\t\tdata: {\n+\t\t\tpassword: {\n+\t\t\t\tcreate: {\n+\t\t\t\t\thash: await getPasswordHash(password),\n+\t\t\t\t},\n+\t\t\t},\n+\t\t},\n+\t})\n+\n+\treturn redirect(`/settings/profile`, { status: 302 })\n+}\n+\n+export default function CreatePasswordRoute({\n+\tactionData,\n+}: Route.ComponentProps) {\n+\tconst isPending = useIsPending()\n+\n+\tconst [form, fields] = useForm({\n+\t\tid: 'password-create-form',\n+\t\tconstraint: getZodConstraint(CreatePasswordForm),\n+\t\tlastResult: actionData?.result,\n+\t\tonValidate({ formData }) {\n+\t\t\treturn parseWithZod(formData, { schema: CreatePasswordForm })\n+\t\t},\n+\t\tshouldRevalidate: 'onBlur',\n+\t})\n+\n+\treturn (\n+\t\t

\n+\t\t\t\n+\t\t\t\n+\t\t\t\n+\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t\tCreate Password\n+\t\t\t\t\n+\t\t\t

\n+\t\t\n+\t)\n+}\ndiff --git a/app/routes/settings+/profile.photo.tsx b/app/routes/settings+/profile.photo.tsx\nnew file mode 100644\nindex 0000000..b2cc87e\n--- /dev/null\n+++ b/app/routes/settings+/profile.photo.tsx\n@@ -0,0 +1,236 @@\n+import { getFormProps, getInputProps, useForm } from '@conform-to/react'\n+import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n+import { invariantResponse } from '@epic-web/invariant'\n+import { parseFormData } from '@mjackson/form-data-parser'\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import { useState } from 'react'\n+import { data, redirect, Form, useNavigation } from 'react-router'\n+import { z } from 'zod'\n+import { ErrorList } from '#app/components/forms.tsx'\n+import { Button } from '#app/components/ui/button.tsx'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import { requireUserId } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import {\n+\tgetUserImgSrc,\n+\tuseDoubleCheck,\n+\tuseIsPending,\n+} from '#app/utils/misc.tsx'\n+import { uploadProfileImage } from '#app/utils/storage.server.ts'\n+import { type Route } from './+types/profile.photo.ts'\n+import { type BreadcrumbHandle } from './profile.tsx'\n+\n+export const handle: BreadcrumbHandle & SEOHandle = {\n+\tbreadcrumb: Photo,\n+\tgetSitemapEntries: () => null,\n+}\n+\n+const MAX_SIZE = 1024 * 1024 * 3 // 3MB\n+\n+const DeleteImageSchema = z.object({\n+\tintent: z.literal('delete'),\n+})\n+\n+const NewImageSchema = z.object({\n+\tintent: z.literal('submit'),\n+\tphotoFile: z\n+\t\t.instanceof(File)\n+\t\t.refine((file) => file.size > 0, 'Image is required')\n+\t\t.refine(\n+\t\t\t(file) => file.size <= MAX_SIZE,\n+\t\t\t'Image size must be less than 3MB',\n+\t\t),\n+})\n+\n+const PhotoFormSchema = z.discriminatedUnion('intent', [\n+\tDeleteImageSchema,\n+\tNewImageSchema,\n+])\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst user = await prisma.user.findUnique({\n+\t\twhere: { id: userId },\n+\t\tselect: {\n+\t\t\tid: true,\n+\t\t\tname: true,\n+\t\t\tusername: true,\n+\t\t\timage: { select: { objectKey: true } },\n+\t\t},\n+\t})\n+\tinvariantResponse(user, 'User not found', { status: 404 })\n+\treturn { user }\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst userId = await requireUserId(request)\n+\n+\tconst formData = await parseFormData(request, { maxFileSize: MAX_SIZE })\n+\tconst submission = await parseWithZod(formData, {\n+\t\tschema: PhotoFormSchema.transform(async (data) => {\n+\t\t\tif (data.intent === 'delete') return { intent: 'delete' }\n+\t\t\tif (data.photoFile.size <= 0) return z.NEVER\n+\t\t\treturn {\n+\t\t\t\tintent: data.intent,\n+\t\t\t\timage: {\n+\t\t\t\t\tobjectKey: await uploadProfileImage(userId, data.photoFile),\n+\t\t\t\t},\n+\t\t\t}\n+\t\t}),\n+\t\tasync: true,\n+\t})\n+\n+\tif (submission.status !== 'success') {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply() },\n+\t\t\t{ status: submission.status === 'error' ? 400 : 200 },\n+\t\t)\n+\t}\n+\n+\tconst { image, intent } = submission.value\n+\n+\tif (intent === 'delete') {\n+\t\tawait prisma.userImage.deleteMany({ where: { userId } })\n+\t\treturn redirect('/settings/profile')\n+\t}\n+\n+\tawait prisma.$transaction(async ($prisma) => {\n+\t\tawait $prisma.userImage.deleteMany({ where: { userId } })\n+\t\tawait $prisma.user.update({\n+\t\t\twhere: { id: userId },\n+\t\t\tdata: { image: { create: image } },\n+\t\t})\n+\t})\n+\n+\treturn redirect('/settings/profile')\n+}\n+\n+export default function PhotoRoute({\n+\tloaderData,\n+\tactionData,\n+}: Route.ComponentProps) {\n+\tconst doubleCheckDeleteImage = useDoubleCheck()\n+\n+\tconst navigation = useNavigation()\n+\n+\tconst [form, fields] = useForm({\n+\t\tid: 'profile-photo',\n+\t\tconstraint: getZodConstraint(PhotoFormSchema),\n+\t\tlastResult: actionData?.result,\n+\t\tonValidate({ formData }) {\n+\t\t\treturn parseWithZod(formData, { schema: PhotoFormSchema })\n+\t\t},\n+\t\tshouldRevalidate: 'onBlur',\n+\t})\n+\n+\tconst isPending = useIsPending()\n+\tconst pendingIntent = isPending ? navigation.formData?.get('intent') : null\n+\tconst lastSubmissionIntent = fields.intent.value\n+\n+\tconst [newImageSrc, setNewImageSrc] = useState(null)\n+\n+\treturn (\n+\t\t

\n+\t\t\t setNewImageSrc(null)}\n+\t\t\t\t{...getFormProps(form)}\n+\t\t\t>\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t\t{/*\n+\t\t\t\t\t\tWe're doing some kinda odd things to make it so this works well\n+\t\t\t\t\t\twithout JavaScript. Basically, we're using CSS to ensure the right\n+\t\t\t\t\t\tbuttons show up based on the input's \"valid\" state (whether or not\n+\t\t\t\t\t\tan image has been selected). Progressive enhancement FTW!\n+\t\t\t\t\t*/}\n+\t\t\t\t\t {\n+\t\t\t\t\t\t\tconst file = e.currentTarget.files?.[0]\n+\t\t\t\t\t\t\tif (file) {\n+\t\t\t\t\t\t\t\tconst reader = new FileReader()\n+\t\t\t\t\t\t\t\treader.onload = (event) => {\n+\t\t\t\t\t\t\t\t\tsetNewImageSrc(event.target?.result?.toString() ?? null)\n+\t\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t\t\treader.readAsDataURL(file)\n+\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t}}\n+\t\t\t\t\t/>\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\tChange\n+\t\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\tSave Photo\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\tReset\n+\t\t\t\t\t\n+\t\t\t\t\t{loaderData.user.image ? (\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t{doubleCheckDeleteImage.doubleCheck\n+\t\t\t\t\t\t\t\t\t? 'Are you sure?'\n+\t\t\t\t\t\t\t\t\t: 'Delete'}\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t) : null}\n+\t\t\t\t

\n+\t\t\t\t\n+\t\t\t\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/settings+/profile.tsx b/app/routes/settings+/profile.tsx\nnew file mode 100644\nindex 0000000..f7ab8fc\n--- /dev/null\n+++ b/app/routes/settings+/profile.tsx\n@@ -0,0 +1,82 @@\n+import { invariantResponse } from '@epic-web/invariant'\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import { Link, Outlet, useMatches } from 'react-router'\n+import { z } from 'zod'\n+import { Spacer } from '#app/components/spacer.tsx'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { requireUserId } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { cn } from '#app/utils/misc.tsx'\n+import { useUser } from '#app/utils/user.ts'\n+import { type Route } from './+types/profile.ts'\n+\n+export const BreadcrumbHandle = z.object({ breadcrumb: z.any() })\n+export type BreadcrumbHandle = z.infer\n+\n+export const handle: BreadcrumbHandle & SEOHandle = {\n+\tbreadcrumb: Edit Profile,\n+\tgetSitemapEntries: () => null,\n+}\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst user = await prisma.user.findUnique({\n+\t\twhere: { id: userId },\n+\t\tselect: { username: true },\n+\t})\n+\tinvariantResponse(user, 'User not found', { status: 404 })\n+\treturn {}\n+}\n+\n+const BreadcrumbHandleMatch = z.object({\n+\thandle: BreadcrumbHandle,\n+})\n+\n+export default function EditUserProfile() {\n+\tconst user = useUser()\n+\tconst matches = useMatches()\n+\tconst breadcrumbs = matches\n+\t\t.map((m) => {\n+\t\t\tconst result = BreadcrumbHandleMatch.safeParse(m)\n+\t\t\tif (!result.success || !result.data.handle.breadcrumb) return null\n+\t\t\treturn (\n+\t\t\t\t\n+\t\t\t\t\t{result.data.handle.breadcrumb}\n+\t\t\t\t\n+\t\t\t)\n+\t\t})\n+\t\t.filter(Boolean)\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\tProfile\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t{breadcrumb}\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t))}\n+\t\t\t\t

\n+\t\t\t

\n+\t\t\t\n+\t\t\t

\n+\t\t\t\t\n+\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/settings+/profile.two-factor.disable.tsx b/app/routes/settings+/profile.two-factor.disable.tsx\nnew file mode 100644\nindex 0000000..ed55924\n--- /dev/null\n+++ b/app/routes/settings+/profile.two-factor.disable.tsx\n@@ -0,0 +1,62 @@\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import { useFetcher } from 'react-router'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import { requireRecentVerification } from '#app/routes/_auth+/verify.server.ts'\n+import { requireUserId } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { useDoubleCheck } from '#app/utils/misc.tsx'\n+import { redirectWithToast } from '#app/utils/toast.server.ts'\n+import { type Route } from './+types/profile.two-factor.disable.ts'\n+import { type BreadcrumbHandle } from './profile.tsx'\n+import { twoFAVerificationType } from './profile.two-factor.tsx'\n+\n+export const handle: BreadcrumbHandle & SEOHandle = {\n+\tbreadcrumb: Disable,\n+\tgetSitemapEntries: () => null,\n+}\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tawait requireRecentVerification(request)\n+\treturn {}\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tawait requireRecentVerification(request)\n+\tconst userId = await requireUserId(request)\n+\tawait prisma.verification.delete({\n+\t\twhere: { target_type: { target: userId, type: twoFAVerificationType } },\n+\t})\n+\treturn redirectWithToast('/settings/profile/two-factor', {\n+\t\ttitle: '2FA Disabled',\n+\t\tdescription: 'Two factor authentication has been disabled.',\n+\t})\n+}\n+\n+export default function TwoFactorDisableRoute() {\n+\tconst disable2FAFetcher = useFetcher()\n+\tconst dc = useDoubleCheck()\n+\n+\treturn (\n+\t\t

\n+\t\t\t\n+\t\t\t\t

\n+\t\t\t\t\tDisabling two factor authentication is not recommended. However, if\n+\t\t\t\t\tyou would like to do so, click here:\n+\t\t\t\t

\n+\t\t\t\t\n+\t\t\t\t\t{dc.doubleCheck ? 'Are you sure?' : 'Disable 2FA'}\n+\t\t\t\t\n+\t\t\t\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/settings+/profile.two-factor.index.tsx b/app/routes/settings+/profile.two-factor.index.tsx\nnew file mode 100644\nindex 0000000..7e0f8df\n--- /dev/null\n+++ b/app/routes/settings+/profile.two-factor.index.tsx\n@@ -0,0 +1,90 @@\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import { redirect, Link, useFetcher } from 'react-router'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import { requireUserId } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { generateTOTP } from '#app/utils/totp.server.ts'\n+import { type Route } from './+types/profile.two-factor.index.ts'\n+import { twoFAVerificationType } from './profile.two-factor.tsx'\n+import { twoFAVerifyVerificationType } from './profile.two-factor.verify.tsx'\n+\n+export const handle: SEOHandle = {\n+\tgetSitemapEntries: () => null,\n+}\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst verification = await prisma.verification.findUnique({\n+\t\twhere: { target_type: { type: twoFAVerificationType, target: userId } },\n+\t\tselect: { id: true },\n+\t})\n+\treturn { is2FAEnabled: Boolean(verification) }\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst { otp: _otp, ...config } = await generateTOTP()\n+\tconst verificationData = {\n+\t\t...config,\n+\t\ttype: twoFAVerifyVerificationType,\n+\t\ttarget: userId,\n+\t}\n+\tawait prisma.verification.upsert({\n+\t\twhere: {\n+\t\t\ttarget_type: { target: userId, type: twoFAVerifyVerificationType },\n+\t\t},\n+\t\tcreate: verificationData,\n+\t\tupdate: verificationData,\n+\t})\n+\treturn redirect('/settings/profile/two-factor/verify')\n+}\n+\n+export default function TwoFactorRoute({ loaderData }: Route.ComponentProps) {\n+\tconst enable2FAFetcher = useFetcher()\n+\n+\treturn (\n+\t\t

\n+\t\t\t{loaderData.is2FAEnabled ? (\n+\t\t\t\t<>\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\tYou have enabled two-factor authentication.\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\tDisable 2FA\n+\t\t\t\t\t\n+\t\t\t\t\n+\t\t\t) : (\n+\t\t\t\t<>\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\tYou have not enabled two-factor authentication yet.\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tTwo factor authentication adds an extra layer of security to your\n+\t\t\t\t\t\taccount. You will need to enter a code from an authenticator app\n+\t\t\t\t\t\tlike{' '}\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t1Password\n+\t\t\t\t\t\t{' '}\n+\t\t\t\t\t\tto log in.\n+\t\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\tEnable 2FA\n+\t\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\n+\t\t\t)}\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/settings+/profile.two-factor.tsx b/app/routes/settings+/profile.two-factor.tsx\nnew file mode 100644\nindex 0000000..0a5f2fa\n--- /dev/null\n+++ b/app/routes/settings+/profile.two-factor.tsx\n@@ -0,0 +1,16 @@\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import { Outlet } from 'react-router'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { type VerificationTypes } from '#app/routes/_auth+/verify.tsx'\n+import { type BreadcrumbHandle } from './profile.tsx'\n+\n+export const handle: BreadcrumbHandle & SEOHandle = {\n+\tbreadcrumb: 2FA,\n+\tgetSitemapEntries: () => null,\n+}\n+\n+export const twoFAVerificationType = '2fa' satisfies VerificationTypes\n+\n+export default function TwoFactorRoute() {\n+\treturn \n+}\ndiff --git a/app/routes/settings+/profile.two-factor.verify.tsx b/app/routes/settings+/profile.two-factor.verify.tsx\nnew file mode 100644\nindex 0000000..bed6247\n--- /dev/null\n+++ b/app/routes/settings+/profile.two-factor.verify.tsx\n@@ -0,0 +1,227 @@\n+import { getFormProps, getInputProps, useForm } from '@conform-to/react'\n+import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n+import { type SEOHandle } from '@nasa-gcn/remix-seo'\n+import * as QRCode from 'qrcode'\n+import { data, redirect, Form, useNavigation } from 'react-router'\n+import { z } from 'zod'\n+import { ErrorList, OTPField } from '#app/components/forms.tsx'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import { isCodeValid } from '#app/routes/_auth+/verify.server.ts'\n+import { requireUserId } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { getDomainUrl, useIsPending } from '#app/utils/misc.tsx'\n+import { redirectWithToast } from '#app/utils/toast.server.ts'\n+import { getTOTPAuthUri } from '#app/utils/totp.server.ts'\n+import { type Route } from './+types/profile.two-factor.verify.ts'\n+import { type BreadcrumbHandle } from './profile.tsx'\n+import { twoFAVerificationType } from './profile.two-factor.tsx'\n+\n+export const handle: BreadcrumbHandle & SEOHandle = {\n+\tbreadcrumb: Verify,\n+\tgetSitemapEntries: () => null,\n+}\n+\n+const CancelSchema = z.object({ intent: z.literal('cancel') })\n+const VerifySchema = z.object({\n+\tintent: z.literal('verify'),\n+\tcode: z.string().min(6).max(6),\n+})\n+\n+const ActionSchema = z.discriminatedUnion('intent', [\n+\tCancelSchema,\n+\tVerifySchema,\n+])\n+\n+export const twoFAVerifyVerificationType = '2fa-verify'\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst verification = await prisma.verification.findUnique({\n+\t\twhere: {\n+\t\t\ttarget_type: { type: twoFAVerifyVerificationType, target: userId },\n+\t\t},\n+\t\tselect: {\n+\t\t\tid: true,\n+\t\t\talgorithm: true,\n+\t\t\tsecret: true,\n+\t\t\tperiod: true,\n+\t\t\tdigits: true,\n+\t\t},\n+\t})\n+\tif (!verification) {\n+\t\treturn redirect('/settings/profile/two-factor')\n+\t}\n+\tconst user = await prisma.user.findUniqueOrThrow({\n+\t\twhere: { id: userId },\n+\t\tselect: { email: true },\n+\t})\n+\tconst issuer = new URL(getDomainUrl(request)).host\n+\tconst otpUri = getTOTPAuthUri({\n+\t\t...verification,\n+\t\taccountName: user.email,\n+\t\tissuer,\n+\t})\n+\tconst qrCode = await QRCode.toDataURL(otpUri)\n+\treturn { otpUri, qrCode }\n+}\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst formData = await request.formData()\n+\n+\tconst submission = await parseWithZod(formData, {\n+\t\tschema: () =>\n+\t\t\tActionSchema.superRefine(async (data, ctx) => {\n+\t\t\t\tif (data.intent === 'cancel') return null\n+\t\t\t\tconst codeIsValid = await isCodeValid({\n+\t\t\t\t\tcode: data.code,\n+\t\t\t\t\ttype: twoFAVerifyVerificationType,\n+\t\t\t\t\ttarget: userId,\n+\t\t\t\t})\n+\t\t\t\tif (!codeIsValid) {\n+\t\t\t\t\tctx.addIssue({\n+\t\t\t\t\t\tpath: ['code'],\n+\t\t\t\t\t\tcode: z.ZodIssueCode.custom,\n+\t\t\t\t\t\tmessage: `Invalid code`,\n+\t\t\t\t\t})\n+\t\t\t\t\treturn z.NEVER\n+\t\t\t\t}\n+\t\t\t}),\n+\t\tasync: true,\n+\t})\n+\n+\tif (submission.status !== 'success') {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply() },\n+\t\t\t{ status: submission.status === 'error' ? 400 : 200 },\n+\t\t)\n+\t}\n+\n+\tswitch (submission.value.intent) {\n+\t\tcase 'cancel': {\n+\t\t\tawait prisma.verification.deleteMany({\n+\t\t\t\twhere: { type: twoFAVerifyVerificationType, target: userId },\n+\t\t\t})\n+\t\t\treturn redirect('/settings/profile/two-factor')\n+\t\t}\n+\t\tcase 'verify': {\n+\t\t\tawait prisma.verification.update({\n+\t\t\t\twhere: {\n+\t\t\t\t\ttarget_type: { type: twoFAVerifyVerificationType, target: userId },\n+\t\t\t\t},\n+\t\t\t\tdata: { type: twoFAVerificationType },\n+\t\t\t})\n+\t\t\treturn redirectWithToast('/settings/profile/two-factor', {\n+\t\t\t\ttype: 'success',\n+\t\t\t\ttitle: 'Enabled',\n+\t\t\t\tdescription: 'Two-factor authentication has been enabled.',\n+\t\t\t})\n+\t\t}\n+\t}\n+}\n+\n+export default function TwoFactorRoute({\n+\tloaderData,\n+\tactionData,\n+}: Route.ComponentProps) {\n+\tconst navigation = useNavigation()\n+\n+\tconst isPending = useIsPending()\n+\tconst pendingIntent = isPending ? navigation.formData?.get('intent') : null\n+\n+\tconst [form, fields] = useForm({\n+\t\tid: 'verify-form',\n+\t\tconstraint: getZodConstraint(ActionSchema),\n+\t\tlastResult: actionData?.result,\n+\t\tonValidate({ formData }) {\n+\t\t\treturn parseWithZod(formData, { schema: ActionSchema })\n+\t\t},\n+\t})\n+\tconst lastSubmissionIntent = fields.intent.value\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t $\"qr$ \n+\t\t\t\t

Scan this QR code with your authenticator app.

\n+\t\t\t\t

\n+\t\t\t\t\tIf you cannot scan the QR code, you can manually add this account to\n+\t\t\t\t\tyour authenticator app using this code:\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\t{loaderData.otpUri}\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\tOnce you've added the account, enter the code from your authenticator\n+\t\t\t\t\tapp below. Once you enable 2FA, you will need to enter a code from\n+\t\t\t\t\tyour authenticator app every time you log in or perform important\n+\t\t\t\t\tactions. Do not lose access to your authenticator app, or you will\n+\t\t\t\t\tlose access to your account.\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/users+/$username.test.tsx b/app/routes/users+/$username.test.tsx\nnew file mode 100644\nindex 0000000..b0784bd\n--- /dev/null\n+++ b/app/routes/users+/$username.test.tsx\n@@ -0,0 +1,97 @@\n+/**\n+ * @vitest-environment jsdom\n+ */\n+import { faker } from '@faker-js/faker'\n+import { render, screen } from '@testing-library/react'\n+import { createRoutesStub } from 'react-router'\n+import setCookieParser from 'set-cookie-parser'\n+import { test } from 'vitest'\n+import { loader as rootLoader } from '#app/root.tsx'\n+import { getSessionExpirationDate, sessionKey } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { authSessionStorage } from '#app/utils/session.server.ts'\n+import { createUser, getUserImages } from '#tests/db-utils.ts'\n+import { default as UsernameRoute, loader } from './$username.tsx'\n+\n+test('The user profile when not logged in as self', async () => {\n+\tconst userImages = await getUserImages()\n+\tconst userImage =\n+\t\tuserImages[faker.number.int({ min: 0, max: userImages.length - 1 })]\n+\tconst user = await prisma.user.create({\n+\t\tselect: { id: true, username: true, name: true },\n+\t\tdata: { ...createUser(), image: { create: userImage } },\n+\t})\n+\tconst App = createRoutesStub([\n+\t\t{\n+\t\t\tpath: '/users/:username',\n+\t\t\tComponent: UsernameRoute,\n+\t\t\tloader,\n+\t\t\tHydrateFallback: () =>

,\n+\t\t},\n+\t])\n+\n+\tconst routeUrl = `/users/${user.username}`\n+\trender()\n+\n+\tawait screen.findByRole('heading', { level: 1, name: user.name! })\n+\tawait screen.findByRole('img', { name: user.name! })\n+\tawait screen.findByRole('link', { name: `${user.name}'s notes` })\n+})\n+\n+test('The user profile when logged in as self', async () => {\n+\tconst userImages = await getUserImages()\n+\tconst userImage =\n+\t\tuserImages[faker.number.int({ min: 0, max: userImages.length - 1 })]\n+\tconst user = await prisma.user.create({\n+\t\tselect: { id: true, username: true, name: true },\n+\t\tdata: { ...createUser(), image: { create: userImage } },\n+\t})\n+\tconst session = await prisma.session.create({\n+\t\tselect: { id: true },\n+\t\tdata: {\n+\t\t\texpirationDate: getSessionExpirationDate(),\n+\t\t\tuserId: user.id,\n+\t\t},\n+\t})\n+\n+\tconst authSession = await authSessionStorage.getSession()\n+\tauthSession.set(sessionKey, session.id)\n+\tconst setCookieHeader = await authSessionStorage.commitSession(authSession)\n+\tconst parsedCookie = setCookieParser.parseString(setCookieHeader)\n+\tconst cookieHeader = new URLSearchParams({\n+\t\t[parsedCookie.name]: parsedCookie.value,\n+\t}).toString()\n+\n+\tconst App = createRoutesStub([\n+\t\t{\n+\t\t\tid: 'root',\n+\t\t\tpath: '/',\n+\t\t\tloader: async (args) => {\n+\t\t\t\t// add the cookie header to the request\n+\t\t\t\targs.request.headers.set('cookie', cookieHeader)\n+\t\t\t\treturn rootLoader({ ...args, context: args.context })\n+\t\t\t},\n+\t\t\tHydrateFallback: () =>

,\n+\t\t\tchildren: [\n+\t\t\t\t{\n+\t\t\t\t\tpath: 'users/:username',\n+\t\t\t\t\tComponent: UsernameRoute,\n+\t\t\t\t\tloader: async (args) => {\n+\t\t\t\t\t\t// add the cookie header to the request\n+\t\t\t\t\t\targs.request.headers.set('cookie', cookieHeader)\n+\t\t\t\t\t\treturn loader(args)\n+\t\t\t\t\t},\n+\t\t\t\t},\n+\t\t\t],\n+\t\t},\n+\t])\n+\n+\tconst routeUrl = `/users/${user.username}`\n+\trender()\n+\n+\tawait screen.findByRole('heading', { level: 1, name: user.name! })\n+\tawait screen.findByRole('img', { name: user.name! })\n+\tawait screen.findByRole('button', { name: /logout/i })\n+\tawait screen.findByRole('link', { name: /my notes/i })\n+\tawait screen.findByRole('link', { name: /edit profile/i })\n+})\ndiff --git a/app/routes/users+/$username.tsx b/app/routes/users+/$username.tsx\nnew file mode 100644\nindex 0000000..18d6e83\n--- /dev/null\n+++ b/app/routes/users+/$username.tsx\n@@ -0,0 +1,130 @@\n+import { invariantResponse } from '@epic-web/invariant'\n+import { Img } from 'openimg/react'\n+import {\n+\ttype LoaderFunctionArgs,\n+\tForm,\n+\tLink,\n+\tuseLoaderData,\n+} from 'react-router'\n+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'\n+import { Spacer } from '#app/components/spacer.tsx'\n+import { Button } from '#app/components/ui/button.tsx'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { getUserImgSrc } from '#app/utils/misc.tsx'\n+import { useOptionalUser } from '#app/utils/user.ts'\n+import { type Route } from './+types/$username.ts'\n+\n+export async function loader({ params }: LoaderFunctionArgs) {\n+\tconst user = await prisma.user.findFirst({\n+\t\tselect: {\n+\t\t\tid: true,\n+\t\t\tname: true,\n+\t\t\tusername: true,\n+\t\t\tcreatedAt: true,\n+\t\t\timage: { select: { id: true, objectKey: true } },\n+\t\t},\n+\t\twhere: {\n+\t\t\tusername: params.username,\n+\t\t},\n+\t})\n+\n+\tinvariantResponse(user, 'User not found', { status: 404 })\n+\n+\treturn { user, userJoinedDisplay: user.createdAt.toLocaleDateString() }\n+}\n+\n+export default function ProfileRoute() {\n+\tconst data = useLoaderData()\n+\tconst user = data.user\n+\tconst userDisplayName = user.name ?? user.username\n+\tconst loggedInUser = useOptionalUser()\n+\tconst isLoggedInUser = user.id === loggedInUser?.id\n+\n+\treturn (\n+\t\t

\n+\t\t\t\n+\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\n+\t\t\t\t\n+\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

{userDisplayName}

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tJoined {data.userJoinedDisplay}\n+\t\t\t\t\t

\n+\t\t\t\t\t{isLoggedInUser ? (\n+\t\t\t\t\t\t\n+\t\t\t\t\t) : null}\n+\t\t\t\t\t

\n+\t\t\t\t\t\t{isLoggedInUser ? (\n+\t\t\t\t\t\t\t<>\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t) : (\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t)}\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\t\t

\n+\t)\n+}\n+\n+export const meta: Route.MetaFunction = ({ data, params }) => {\n+\tconst displayName = data?.user.name ?? params.username\n+\treturn [\n+\t\t{ title: `${displayName} | Epic Notes` },\n+\t\t{\n+\t\t\tname: 'description',\n+\t\t\tcontent: `Profile of ${displayName} on Epic Notes`,\n+\t\t},\n+\t]\n+}\n+\n+export function ErrorBoundary() {\n+\treturn (\n+\t\t (\n+\t\t\t\t\t

No user with the username \"{params.username}\" exists

\n+\t\t\t\t),\n+\t\t\t}}\n+\t\t/>\n+\t)\n+}\ndiff --git a/app/routes/users+/$username_+/__note-editor.server.tsx b/app/routes/users+/$username_+/__note-editor.server.tsx\nnew file mode 100644\nindex 0000000..4ac8a58\n--- /dev/null\n+++ b/app/routes/users+/$username_+/__note-editor.server.tsx\n@@ -0,0 +1,131 @@\n+import { parseWithZod } from '@conform-to/zod'\n+import { parseFormData } from '@mjackson/form-data-parser'\n+import { createId as cuid } from '@paralleldrive/cuid2'\n+import { data, redirect, type ActionFunctionArgs } from 'react-router'\n+import { z } from 'zod'\n+import { requireUserId } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { uploadNoteImage } from '#app/utils/storage.server.ts'\n+import {\n+\tMAX_UPLOAD_SIZE,\n+\tNoteEditorSchema,\n+\ttype ImageFieldset,\n+} from './__note-editor'\n+\n+function imageHasFile(\n+\timage: ImageFieldset,\n+): image is ImageFieldset & { file: NonNullable } {\n+\treturn Boolean(image.file?.size && image.file?.size > 0)\n+}\n+\n+function imageHasId(\n+\timage: ImageFieldset,\n+): image is ImageFieldset & { id: string } {\n+\treturn Boolean(image.id)\n+}\n+\n+export async function action({ request }: ActionFunctionArgs) {\n+\tconst userId = await requireUserId(request)\n+\n+\tconst formData = await parseFormData(request, {\n+\t\tmaxFileSize: MAX_UPLOAD_SIZE,\n+\t})\n+\n+\tconst submission = await parseWithZod(formData, {\n+\t\tschema: NoteEditorSchema.superRefine(async (data, ctx) => {\n+\t\t\tif (!data.id) return\n+\n+\t\t\tconst note = await prisma.note.findUnique({\n+\t\t\t\tselect: { id: true },\n+\t\t\t\twhere: { id: data.id, ownerId: userId },\n+\t\t\t})\n+\t\t\tif (!note) {\n+\t\t\t\tctx.addIssue({\n+\t\t\t\t\tcode: z.ZodIssueCode.custom,\n+\t\t\t\t\tmessage: 'Note not found',\n+\t\t\t\t})\n+\t\t\t}\n+\t\t}).transform(async ({ images = [], ...data }) => {\n+\t\t\tconst noteId = data.id ?? cuid()\n+\t\t\treturn {\n+\t\t\t\t...data,\n+\t\t\t\tid: noteId,\n+\t\t\t\timageUpdates: await Promise.all(\n+\t\t\t\t\timages.filter(imageHasId).map(async (i) => {\n+\t\t\t\t\t\tif (imageHasFile(i)) {\n+\t\t\t\t\t\t\treturn {\n+\t\t\t\t\t\t\t\tid: i.id,\n+\t\t\t\t\t\t\t\taltText: i.altText,\n+\t\t\t\t\t\t\t\tobjectKey: await uploadNoteImage(userId, noteId, i.file),\n+\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t} else {\n+\t\t\t\t\t\t\treturn {\n+\t\t\t\t\t\t\t\tid: i.id,\n+\t\t\t\t\t\t\t\taltText: i.altText,\n+\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t}\n+\t\t\t\t\t}),\n+\t\t\t\t),\n+\t\t\t\tnewImages: await Promise.all(\n+\t\t\t\t\timages\n+\t\t\t\t\t\t.filter(imageHasFile)\n+\t\t\t\t\t\t.filter((i) => !i.id)\n+\t\t\t\t\t\t.map(async (image) => {\n+\t\t\t\t\t\t\treturn {\n+\t\t\t\t\t\t\t\taltText: image.altText,\n+\t\t\t\t\t\t\t\tobjectKey: await uploadNoteImage(userId, noteId, image.file),\n+\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t}),\n+\t\t\t\t),\n+\t\t\t}\n+\t\t}),\n+\t\tasync: true,\n+\t})\n+\n+\tif (submission.status !== 'success') {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply() },\n+\t\t\t{ status: submission.status === 'error' ? 400 : 200 },\n+\t\t)\n+\t}\n+\n+\tconst {\n+\t\tid: noteId,\n+\t\ttitle,\n+\t\tcontent,\n+\t\timageUpdates = [],\n+\t\tnewImages = [],\n+\t} = submission.value\n+\n+\tconst updatedNote = await prisma.note.upsert({\n+\t\tselect: { id: true, owner: { select: { username: true } } },\n+\t\twhere: { id: noteId },\n+\t\tcreate: {\n+\t\t\tid: noteId,\n+\t\t\townerId: userId,\n+\t\t\ttitle,\n+\t\t\tcontent,\n+\t\t\timages: { create: newImages },\n+\t\t},\n+\t\tupdate: {\n+\t\t\ttitle,\n+\t\t\tcontent,\n+\t\t\timages: {\n+\t\t\t\tdeleteMany: { id: { notIn: imageUpdates.map((i) => i.id) } },\n+\t\t\t\tupdateMany: imageUpdates.map((updates) => ({\n+\t\t\t\t\twhere: { id: updates.id },\n+\t\t\t\t\tdata: {\n+\t\t\t\t\t\t...updates,\n+\t\t\t\t\t\t// If the image is new, we need to generate a new ID to bust the cache.\n+\t\t\t\t\t\tid: updates.objectKey ? cuid() : updates.id,\n+\t\t\t\t\t},\n+\t\t\t\t})),\n+\t\t\t\tcreate: newImages,\n+\t\t\t},\n+\t\t},\n+\t})\n+\n+\treturn redirect(\n+\t\t`/users/${updatedNote.owner.username}/notes/${updatedNote.id}`,\n+\t)\n+}\ndiff --git a/app/routes/users+/$username_+/__note-editor.tsx b/app/routes/users+/$username_+/__note-editor.tsx\nnew file mode 100644\nindex 0000000..7df8c91\n--- /dev/null\n+++ b/app/routes/users+/$username_+/__note-editor.tsx\n@@ -0,0 +1,294 @@\n+import {\n+\tFormProvider,\n+\tgetFieldsetProps,\n+\tgetFormProps,\n+\tgetInputProps,\n+\tgetTextareaProps,\n+\tuseForm,\n+\ttype FieldMetadata,\n+} from '@conform-to/react'\n+import { getZodConstraint, parseWithZod } from '@conform-to/zod'\n+import { Img } from 'openimg/react'\n+import { useState } from 'react'\n+import { Form } from 'react-router'\n+import { z } from 'zod'\n+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'\n+import { floatingToolbarClassName } from '#app/components/floating-toolbar.tsx'\n+import { ErrorList, Field, TextareaField } from '#app/components/forms.tsx'\n+import { Button } from '#app/components/ui/button.tsx'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { Label } from '#app/components/ui/label.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import { Textarea } from '#app/components/ui/textarea.tsx'\n+import { cn, getNoteImgSrc, useIsPending } from '#app/utils/misc.tsx'\n+import { type Route } from './+types/notes.$noteId_.edit.ts'\n+\n+const titleMinLength = 1\n+const titleMaxLength = 100\n+const contentMinLength = 1\n+const contentMaxLength = 10000\n+\n+export const MAX_UPLOAD_SIZE = 1024 * 1024 * 3 // 3MB\n+\n+const ImageFieldsetSchema = z.object({\n+\tid: z.string().optional(),\n+\tfile: z\n+\t\t.instanceof(File)\n+\t\t.optional()\n+\t\t.refine((file) => {\n+\t\t\treturn !file || file.size <= MAX_UPLOAD_SIZE\n+\t\t}, 'File size must be less than 3MB'),\n+\taltText: z.string().optional(),\n+})\n+\n+export type ImageFieldset = z.infer\n+\n+export const NoteEditorSchema = z.object({\n+\tid: z.string().optional(),\n+\ttitle: z.string().min(titleMinLength).max(titleMaxLength),\n+\tcontent: z.string().min(contentMinLength).max(contentMaxLength),\n+\timages: z.array(ImageFieldsetSchema).max(5).optional(),\n+})\n+\n+export function NoteEditor({\n+\tnote,\n+\tactionData,\n+}: {\n+\tnote?: Route.ComponentProps['loaderData']['note']\n+\tactionData?: Route.ComponentProps['actionData']\n+}) {\n+\tconst isPending = useIsPending()\n+\n+\tconst [form, fields] = useForm({\n+\t\tid: 'note-editor',\n+\t\tconstraint: getZodConstraint(NoteEditorSchema),\n+\t\tlastResult: actionData?.result,\n+\t\tonValidate({ formData }) {\n+\t\t\treturn parseWithZod(formData, { schema: NoteEditorSchema })\n+\t\t},\n+\t\tdefaultValue: {\n+\t\t\t...note,\n+\t\t\timages: note?.images ?? [{}],\n+\t\t},\n+\t\tshouldRevalidate: 'onBlur',\n+\t})\n+\tconst imageList = fields.images.getFieldList()\n+\n+\treturn (\n+\t\t

\n+\t\t\t\n+\t\t\t\t\n+\t\t\t\t\t{/*\n+\t\t\t\t\tThis hidden submit button is here to ensure that when the user hits\n+\t\t\t\t\t\"enter\" on an input field, the primary form function is submitted\n+\t\t\t\t\trather than the first button in the form (which is delete/add image).\n+\t\t\t\t*/}\n+\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t)\n+\t\t\t\t\t\t\t\t})}\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\tImage\n+\t\t\t\t\t\t\t{' '}\n+\t\t\t\t\t\t\tAdd image\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t\tSubmit\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t\n+\t\t\n+\t)\n+}\n+\n+function ImageChooser({\n+\tmeta,\n+\tobjectKey,\n+}: {\n+\tmeta: FieldMetadata\n+\tobjectKey: string | undefined\n+}) {\n+\tconst fields = meta.getFieldset()\n+\tconst existingImage = Boolean(fields.id.initialValue)\n+\tconst [previewImage, setPreviewImage] = useState(\n+\t\tobjectKey ? getNoteImgSrc(objectKey) : null,\n+\t)\n+\tconst [altText, setAltText] = useState(fields.altText.initialValue ?? '')\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t{previewImage ? (\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t{existingImage ? (\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t) : (\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t)}\n+\t\t\t\t\t\t\t\t\t{existingImage ? null : (\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\tnew\n+\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t)}\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t) : (\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t)}\n+\t\t\t\t\t\t\t{existingImage ? (\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t) : null}\n+\t\t\t\t\t\t\t {\n+\t\t\t\t\t\t\t\t\tconst file = event.target.files?.[0]\n+\n+\t\t\t\t\t\t\t\t\tif (file) {\n+\t\t\t\t\t\t\t\t\t\tconst reader = new FileReader()\n+\t\t\t\t\t\t\t\t\t\treader.onloadend = () => {\n+\t\t\t\t\t\t\t\t\t\t\tsetPreviewImage(reader.result as string)\n+\t\t\t\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t\t\t\t\treader.readAsDataURL(file)\n+\t\t\t\t\t\t\t\t\t} else {\n+\t\t\t\t\t\t\t\t\t\tsetPreviewImage(null)\n+\t\t\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t\t\t}}\n+\t\t\t\t\t\t\t\taccept=\"image/*\"\n+\t\t\t\t\t\t\t\t{...getInputProps(fields.file, { type: 'file' })}\n+\t\t\t\t\t\t\t\tkey={fields.file.key}\n+\t\t\t\t\t\t\t/>\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\tAlt Text\n+\t\t\t\t\t setAltText(e.currentTarget.value)}\n+\t\t\t\t\t\t{...getTextareaProps(fields.altText)}\n+\t\t\t\t\t\tkey={fields.altText.key}\n+\t\t\t\t\t/>\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\t\t\t\t\n+\t\t\t

\n+\t\t

\n+\t)\n+}\n+\n+export function ErrorBoundary() {\n+\treturn (\n+\t\t (\n+\t\t\t\t\t

No note with the id \"{params.noteId}\" exists

\n+\t\t\t\t),\n+\t\t\t}}\n+\t\t/>\n+\t)\n+}\ndiff --git a/app/routes/users+/$username_+/notes.$noteId.tsx b/app/routes/users+/$username_+/notes.$noteId.tsx\nnew file mode 100644\nindex 0000000..db9849e\n--- /dev/null\n+++ b/app/routes/users+/$username_+/notes.$noteId.tsx\n@@ -0,0 +1,236 @@\n+import { getFormProps, useForm } from '@conform-to/react'\n+import { parseWithZod } from '@conform-to/zod'\n+import { invariantResponse } from '@epic-web/invariant'\n+import { formatDistanceToNow } from 'date-fns'\n+import { Img } from 'openimg/react'\n+import { useRef, useEffect } from 'react'\n+import { data, Form, Link } from 'react-router'\n+import { z } from 'zod'\n+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'\n+import { floatingToolbarClassName } from '#app/components/floating-toolbar.tsx'\n+import { ErrorList } from '#app/components/forms.tsx'\n+import { Button } from '#app/components/ui/button.tsx'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import { requireUserId } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { getNoteImgSrc, useIsPending } from '#app/utils/misc.tsx'\n+import { requireUserWithPermission } from '#app/utils/permissions.server.ts'\n+import { redirectWithToast } from '#app/utils/toast.server.ts'\n+import { userHasPermission, useOptionalUser } from '#app/utils/user.ts'\n+import { type Route } from './+types/notes.$noteId.ts'\n+import { type Route as NotesRoute } from './+types/notes.ts'\n+\n+export async function loader({ params }: Route.LoaderArgs) {\n+\tconst note = await prisma.note.findUnique({\n+\t\twhere: { id: params.noteId },\n+\t\tselect: {\n+\t\t\tid: true,\n+\t\t\ttitle: true,\n+\t\t\tcontent: true,\n+\t\t\townerId: true,\n+\t\t\tupdatedAt: true,\n+\t\t\timages: {\n+\t\t\t\tselect: {\n+\t\t\t\t\taltText: true,\n+\t\t\t\t\tobjectKey: true,\n+\t\t\t\t},\n+\t\t\t},\n+\t\t},\n+\t})\n+\n+\tinvariantResponse(note, 'Not found', { status: 404 })\n+\n+\tconst date = new Date(note.updatedAt)\n+\tconst timeAgo = formatDistanceToNow(date)\n+\n+\treturn { note, timeAgo }\n+}\n+\n+const DeleteFormSchema = z.object({\n+\tintent: z.literal('delete-note'),\n+\tnoteId: z.string(),\n+})\n+\n+export async function action({ request }: Route.ActionArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst formData = await request.formData()\n+\tconst submission = parseWithZod(formData, {\n+\t\tschema: DeleteFormSchema,\n+\t})\n+\tif (submission.status !== 'success') {\n+\t\treturn data(\n+\t\t\t{ result: submission.reply() },\n+\t\t\t{ status: submission.status === 'error' ? 400 : 200 },\n+\t\t)\n+\t}\n+\n+\tconst { noteId } = submission.value\n+\n+\tconst note = await prisma.note.findFirst({\n+\t\tselect: { id: true, ownerId: true, owner: { select: { username: true } } },\n+\t\twhere: { id: noteId },\n+\t})\n+\tinvariantResponse(note, 'Not found', { status: 404 })\n+\n+\tconst isOwner = note.ownerId === userId\n+\tawait requireUserWithPermission(\n+\t\trequest,\n+\t\tisOwner ? `delete:note:own` : `delete:note:any`,\n+\t)\n+\n+\tawait prisma.note.delete({ where: { id: note.id } })\n+\n+\treturn redirectWithToast(`/users/${note.owner.username}/notes`, {\n+\t\ttype: 'success',\n+\t\ttitle: 'Success',\n+\t\tdescription: 'Your note has been deleted.',\n+\t})\n+}\n+\n+export default function NoteRoute({\n+\tloaderData,\n+\tactionData,\n+}: Route.ComponentProps) {\n+\tconst user = useOptionalUser()\n+\tconst isOwner = user?.id === loaderData.note.ownerId\n+\tconst canDelete = userHasPermission(\n+\t\tuser,\n+\t\tisOwner ? `delete:note:own` : `delete:note:any`,\n+\t)\n+\tconst displayBar = canDelete || isOwner\n+\n+\t// Add ref for auto-focusing\n+\tconst sectionRef = useRef(null)\n+\n+\t// Focus the section when the note ID changes\n+\tuseEffect(() => {\n+\t\tif (sectionRef.current) {\n+\t\t\tsectionRef.current.focus()\n+\t\t}\n+\t}, [loaderData.note.id])\n+\n+\treturn (\n+\t\t\n+\t\t\t

\n+\t\t\t\t{loaderData.note.title}\n+\t\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t{loaderData.note.content}\n+\t\t\t\t

\n+\t\t\t

\n+\t\t\t{displayBar ? (\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t{loaderData.timeAgo} ago\n+\t\t\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t\t\t{canDelete ? (\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t) : null}\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\tEdit\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t) : null}\n+\t\t\n+\t)\n+}\n+\n+export function DeleteNote({\n+\tid,\n+\tactionData,\n+}: {\n+\tid: string\n+\tactionData: Route.ComponentProps['actionData'] | undefined\n+}) {\n+\tconst isPending = useIsPending()\n+\tconst [form] = useForm({\n+\t\tid: 'delete-note',\n+\t\tlastResult: actionData?.result,\n+\t})\n+\n+\treturn (\n+\t\t

\n+\t\t\t\n+\t\t\t\n+\t\t\t\t\n+\t\t\t\t\tDelete\n+\t\t\t\t\n+\t\t\t\n+\t\t\t\n+\t\t\n+\t)\n+}\n+\n+export const meta: Route.MetaFunction = ({ data, params, matches }) => {\n+\tconst notesMatch = matches.find(\n+\t\t(m) => m?.id === 'routes/users+/$username_+/notes',\n+\t) as { data: NotesRoute.ComponentProps['loaderData'] } | undefined\n+\n+\tconst displayName = notesMatch?.data?.owner.name ?? params.username\n+\tconst noteTitle = data?.note.title ?? 'Note'\n+\tconst noteContentsSummary =\n+\t\tdata && data.note.content.length > 100\n+\t\t\t? data?.note.content.slice(0, 97) + '...'\n+\t\t\t: 'No content'\n+\treturn [\n+\t\t{ title: `${noteTitle} | ${displayName}'s Notes | Epic Notes` },\n+\t\t{\n+\t\t\tname: 'description',\n+\t\t\tcontent: noteContentsSummary,\n+\t\t},\n+\t]\n+}\n+\n+export function ErrorBoundary() {\n+\treturn (\n+\t\t

You are not allowed to do that

,\n+\t\t\t\t404: ({ params }) => (\n+\t\t\t\t\t

No note with the id \"{params.noteId}\" exists

\n+\t\t\t\t),\n+\t\t\t}}\n+\t\t/>\n+\t)\n+}\ndiff --git a/app/routes/users+/$username_+/notes.$noteId_.edit.tsx b/app/routes/users+/$username_+/notes.$noteId_.edit.tsx\nnew file mode 100644\nindex 0000000..6e8bddf\n--- /dev/null\n+++ b/app/routes/users+/$username_+/notes.$noteId_.edit.tsx\n@@ -0,0 +1,51 @@\n+import { invariantResponse } from '@epic-web/invariant'\n+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'\n+import { requireUserId } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { type Route } from './+types/notes.$noteId_.edit.ts'\n+import { NoteEditor } from './__note-editor.tsx'\n+\n+export { action } from './__note-editor.server.tsx'\n+\n+export async function loader({ params, request }: Route.LoaderArgs) {\n+\tconst userId = await requireUserId(request)\n+\tconst note = await prisma.note.findFirst({\n+\t\tselect: {\n+\t\t\tid: true,\n+\t\t\ttitle: true,\n+\t\t\tcontent: true,\n+\t\t\timages: {\n+\t\t\t\tselect: {\n+\t\t\t\t\tid: true,\n+\t\t\t\t\taltText: true,\n+\t\t\t\t\tobjectKey: true,\n+\t\t\t\t},\n+\t\t\t},\n+\t\t},\n+\t\twhere: {\n+\t\t\tid: params.noteId,\n+\t\t\townerId: userId,\n+\t\t},\n+\t})\n+\tinvariantResponse(note, 'Not found', { status: 404 })\n+\treturn { note }\n+}\n+\n+export default function NoteEdit({\n+\tloaderData,\n+\tactionData,\n+}: Route.ComponentProps) {\n+\treturn \n+}\n+\n+export function ErrorBoundary() {\n+\treturn (\n+\t\t (\n+\t\t\t\t\t

No note with the id \"{params.noteId}\" exists

\n+\t\t\t\t),\n+\t\t\t}}\n+\t\t/>\n+\t)\n+}\ndiff --git a/app/routes/users+/$username_+/notes.index.tsx b/app/routes/users+/$username_+/notes.index.tsx\nnew file mode 100644\nindex 0000000..9457224\n--- /dev/null\n+++ b/app/routes/users+/$username_+/notes.index.tsx\n@@ -0,0 +1,27 @@\n+import { type Route } from './+types/notes.index.ts'\n+import { type Route as NotesRoute } from './+types/notes.ts'\n+\n+export default function NotesIndexRoute() {\n+\treturn (\n+\t\t

\n+\t\t\t

Select a note

\n+\t\t

\n+\t)\n+}\n+\n+export const meta: Route.MetaFunction = ({ params, matches }) => {\n+\tconst notesMatch = matches.find(\n+\t\t(m) => m?.id === 'routes/users+/$username_+/notes',\n+\t) as { data: NotesRoute.ComponentProps['loaderData'] }\n+\n+\tconst displayName = notesMatch?.data?.owner.name ?? params.username\n+\tconst noteCount = notesMatch?.data?.owner.notes.length ?? 0\n+\tconst notesText = noteCount === 1 ? 'note' : 'notes'\n+\treturn [\n+\t\t{ title: `${displayName}'s Notes | Epic Notes` },\n+\t\t{\n+\t\t\tname: 'description',\n+\t\t\tcontent: `Checkout ${displayName}'s ${noteCount} ${notesText} on Epic Notes`,\n+\t\t},\n+\t]\n+}\ndiff --git a/app/routes/users+/$username_+/notes.new.tsx b/app/routes/users+/$username_+/notes.new.tsx\nnew file mode 100644\nindex 0000000..d9a24a6\n--- /dev/null\n+++ b/app/routes/users+/$username_+/notes.new.tsx\n@@ -0,0 +1,12 @@\n+import { requireUserId } from '#app/utils/auth.server.ts'\n+import { type Route } from './+types/notes.new.ts'\n+import { NoteEditor } from './__note-editor.tsx'\n+\n+export { action } from './__note-editor.server.tsx'\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tawait requireUserId(request)\n+\treturn {}\n+}\n+\n+export default NoteEditor\ndiff --git a/app/routes/users+/$username_+/notes.tsx b/app/routes/users+/$username_+/notes.tsx\nnew file mode 100644\nindex 0000000..ded41ca\n--- /dev/null\n+++ b/app/routes/users+/$username_+/notes.tsx\n@@ -0,0 +1,105 @@\n+import { invariantResponse } from '@epic-web/invariant'\n+import { Img } from 'openimg/react'\n+import { Link, NavLink, Outlet } from 'react-router'\n+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { cn, getUserImgSrc } from '#app/utils/misc.tsx'\n+import { useOptionalUser } from '#app/utils/user.ts'\n+import { type Route } from './+types/notes.ts'\n+\n+export async function loader({ params }: Route.LoaderArgs) {\n+\tconst owner = await prisma.user.findFirst({\n+\t\tselect: {\n+\t\t\tid: true,\n+\t\t\tname: true,\n+\t\t\tusername: true,\n+\t\t\timage: { select: { objectKey: true } },\n+\t\t\tnotes: { select: { id: true, title: true } },\n+\t\t},\n+\t\twhere: { username: params.username },\n+\t})\n+\n+\tinvariantResponse(owner, 'Owner not found', { status: 404 })\n+\n+\treturn { owner }\n+}\n+\n+export default function NotesRoute({ loaderData }: Route.ComponentProps) {\n+\tconst user = useOptionalUser()\n+\tconst isOwner = user?.id === loaderData.owner.id\n+\tconst ownerDisplayName = loaderData.owner.name ?? loaderData.owner.username\n+\tconst navLinkDefaultClassName =\n+\t\t'line-clamp-2 block rounded-l-full py-2 pl-8 pr-6 text-base lg:text-xl'\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{ownerDisplayName}'s Notes\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t{isOwner ? (\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\tcn(navLinkDefaultClassName, isActive && 'bg-accent')\n+\t\t\t\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t\t\tNew Note\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t) : null}\n+\t\t\t\t\t\t\t{loaderData.owner.notes.map((note) => (\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t

\n+\t\t\t

\n+\t\t

\n+\t)\n+}\n+\n+export function ErrorBoundary() {\n+\treturn (\n+\t\t (\n+\t\t\t\t\t

No user with the username \"{params.username}\" exists

\n+\t\t\t\t),\n+\t\t\t}}\n+\t\t/>\n+\t)\n+}\ndiff --git a/app/routes/users+/index.tsx b/app/routes/users+/index.tsx\nnew file mode 100644\nindex 0000000..038dadb\n--- /dev/null\n+++ b/app/routes/users+/index.tsx\n@@ -0,0 +1,81 @@\n+import { searchUsers } from '@prisma/client/sql'\n+import { Img } from 'openimg/react'\n+import { redirect, Link } from 'react-router'\n+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'\n+import { ErrorList } from '#app/components/forms.tsx'\n+import { SearchBar } from '#app/components/search-bar.tsx'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { cn, getUserImgSrc, useDelayedIsPending } from '#app/utils/misc.tsx'\n+import { type Route } from './+types/index.ts'\n+\n+export async function loader({ request }: Route.LoaderArgs) {\n+\tconst searchTerm = new URL(request.url).searchParams.get('search')\n+\tif (searchTerm === '') {\n+\t\treturn redirect('/users')\n+\t}\n+\n+\tconst like = `%${searchTerm ?? ''}%`\n+\tconst users = await prisma.$queryRawTyped(searchUsers(like))\n+\treturn { status: 'idle', users } as const\n+}\n+\n+export default function UsersRoute({ loaderData }: Route.ComponentProps) {\n+\tconst isPending = useDelayedIsPending({\n+\t\tformMethod: 'GET',\n+\t\tformAction: '/users',\n+\t})\n+\n+\treturn (\n+\t\t

\n+\t\t\t

Epic Notes Users

\n+\t\t\t

\n+\t\t\t\t\n+\t\t\t

\n+\t\t\t

\n+\t\t\t\t{loaderData.status === 'idle' ? (\n+\t\t\t\t\tloaderData.users.length ? (\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t{loaderData.users.map((user) => (\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t{user.name ? (\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t{user.name}\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t) : null}\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t{user.username}\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\n+\t\t\t\t\t) : (\n+\t\t\t\t\t\t

No users found

\n+\t\t\t\t\t)\n+\t\t\t\t) : loaderData.status === 'error' ? (\n+\t\t\t\t\t\n+\t\t\t\t) : null}\n+\t\t\t

\n+\t\t

\n+\t)\n+}\n+\n+export function ErrorBoundary() {\n+\treturn \n+}\ndiff --git a/app/routes.ts b/app/routes.ts\nnew file mode 100644\nindex 0000000..946ca4a\n--- /dev/null\n+++ b/app/routes.ts\n@@ -0,0 +1,21 @@\n+import { type RouteConfig } from '@react-router/dev/routes'\n+import { remixRoutesOptionAdapter } from '@react-router/remix-routes-option-adapter'\n+import { flatRoutes } from 'remix-flat-routes'\n+\n+export default remixRoutesOptionAdapter((defineRoutes) => {\n+\treturn flatRoutes('routes', defineRoutes, {\n+\t\tignoredRouteFiles: [\n+\t\t\t'.*',\n+\t\t\t'**/*.css',\n+\t\t\t'**/*.test.{js,jsx,ts,tsx}',\n+\t\t\t'**/__*.*',\n+\t\t\t// This is for server-side utilities you want to colocate\n+\t\t\t// next to your routes without making an additional\n+\t\t\t// directory. If you need a route that includes \"server\" or\n+\t\t\t// \"client\" in the filename, use the escape brackets like:\n+\t\t\t// my-route.[server].tsx\n+\t\t\t'**/*.server.*',\n+\t\t\t'**/*.client.*',\n+\t\t],\n+\t})\n+}) satisfies RouteConfig\ndiff --git a/app/styles/tailwind.css b/app/styles/tailwind.css\nnew file mode 100644\nindex 0000000..d520302\n--- /dev/null\n+++ b/app/styles/tailwind.css\n@@ -0,0 +1,220 @@\n+@import 'tailwindcss';\n+@import 'tw-animate-css';\n+\n+@custom-variant dark (&:is(.dark *));\n+\n+:root {\n+\t--radius: 0.5rem;\n+\n+\t--background: oklch(100% 0 0);\n+\t--foreground: oklch(13.71% 0.036 258.53);\n+\n+\t--card: oklch(100% 0 0);\n+\t--card-foreground: oklch(13.71% 0.036 258.53);\n+\n+\t--popover: oklch(100% 0 0);\n+\t--popover-foreground: oklch(13.71% 0.036 258.53);\n+\n+\t--primary: oklch(20.79% 0.0399 265.73);\n+\t--primary-foreground: oklch(98.38% 0.0035 247.86);\n+\n+\t--secondary: oklch(86.48% 0.0153 248);\n+\t--secondary-foreground: oklch(20.79% 0.0399 265.73);\n+\n+\t--muted: oklch(94.32% 0.0123 247.96);\n+\t--muted-foreground: oklch(40.68% 0.0281 257.44);\n+\n+\t--accent: oklch(91.87% 0.01770618193703561 248.02064625050508);\n+\t--accent-foreground: oklch(20.79% 0.0399 265.73);\n+\n+\t--border: oklch(92.9% 0.0126 255.53);\n+\t--input: oklch(92.56% 0.0133 255.54);\n+\t--input-invalid: oklch(63.68% 0.2078 25.33);\n+\n+\t--destructive: oklch(57.14% 0.2121 27.25);\n+\t--destructive-foreground: oklch(98.38% 0.0035 247.86);\n+\t/* prefixed with foreground because it should look good on the background */\n+\t--foreground-destructive: oklch(51.46% 0.1979 16.57);\n+\n+\t--ring: oklch(71.07% 0.0351 256.79);\n+}\n+\n+.dark {\n+\t--background: oklch(13.71% 0.036 258.53);\n+\t--foreground: oklch(98.38% 0.0035 247.86);\n+\n+\t--card: oklch(13.71% 0.036 258.53);\n+\t--card-foreground: oklch(98.38% 0.0035 247.86);\n+\n+\t--popover: oklch(13.71% 0.036 258.53);\n+\t--popover-foreground: oklch(98.38% 0.0035 247.86);\n+\n+\t--primary: oklch(98.38% 0.0035 247.86);\n+\t--primary-foreground: oklch(20.79% 0.0399 265.73);\n+\n+\t--secondary: oklch(34.74% 0.0295 260.13);\n+\t--secondary-foreground: oklch(98.38% 0.0035 247.86);\n+\n+\t--muted: oklch(22.6% 0.0267 260.02);\n+\t--muted-foreground: oklch(71.07% 0.0351 256.79);\n+\n+\t--accent: oklch(20.56% 0.022816 260.0464);\n+\t--accent-foreground: oklch(98.38% 0.0035 247.86);\n+\n+\t--border: oklch(28% 0.0369 259.97);\n+\t--input: oklch(28% 0.0369 259.97);\n+\t--input-invalid: oklch(39.59% 0.1331 25.72);\n+\n+\t--destructive: oklch(47.6% 0.159 25.64);\n+\t--destructive-foreground: oklch(97.1% 0.0127 17.38);\n+\t/* prefixed with foreground because it should look good on the background */\n+\t--foreground-destructive: oklch(63.72% 0.2071 21.89);\n+\n+\t--ring: oklch(65.28% 0.0684 260.07);\n+}\n+\n+@theme inline {\n+\t--radius-sm: calc(var(--radius) - 4px);\n+\t--radius-md: calc(var(--radius) - 2px);\n+\t--radius-lg: var(--radius);\n+\t--radius-xl: calc(var(--radius) + 4px);\n+\t--color-background: var(--background);\n+\t--color-foreground: var(--foreground);\n+\t--color-card: var(--card);\n+\t--color-card-foreground: var(--card-foreground);\n+\t--color-popover: var(--popover);\n+\t--color-popover-foreground: var(--popover-foreground);\n+\t--color-primary: var(--primary);\n+\t--color-primary-foreground: var(--primary-foreground);\n+\t--color-secondary: var(--secondary);\n+\t--color-secondary-foreground: var(--secondary-foreground);\n+\t--color-muted: var(--muted);\n+\t--color-muted-foreground: var(--muted-foreground);\n+\t--color-accent: var(--accent);\n+\t--color-accent-foreground: var(--accent-foreground);\n+\t--color-destructive: var(--destructive);\n+\t--color-border: var(--border);\n+\t--color-input: var(--input);\n+\t--color-ring: var(--ring);\n+\t--color-input-invalid: var(--input-invalid);\n+\t--color-destructive-foreground: var(--destructive-foreground);\n+\t--color-foreground-destructive: var(--foreground-destructive);\n+}\n+\n+@theme {\n+\t--text-mega: 5rem;\n+\t--text-mega--line-height: 5.25rem;\n+\t--text-mega--font-weight: 700;\n+\t--text-h1: 3.5rem;\n+\t--text-h1--line-height: 3.875rem;\n+\t--text-h1--font-weight: 700;\n+\t--text-h2: 2.5rem;\n+\t--text-h2--line-height: 3rem;\n+\t--text-h2--font-weight: 700;\n+\t--text-h3: 2rem;\n+\t--text-h3--line-height: 2.25rem;\n+\t--text-h3--font-weight: 700;\n+\t--text-h4: 1.75rem;\n+\t--text-h4--line-height: 2.25rem;\n+\t--text-h4--font-weight: 700;\n+\t--text-h5: 1.5rem;\n+\t--text-h5--line-height: 2rem;\n+\t--text-h5--font-weight: 700;\n+\t--text-h6: 1rem;\n+\t--text-h6--line-height: 1.25rem;\n+\t--text-h6--font-weight: 700;\n+\t--text-body-2xl: 2rem;\n+\t--text-body-2xl--line-height: 2.25rem;\n+\t--text-body-xl: 1.75rem;\n+\t--text-body-xl--line-height: 2.25rem;\n+\t--text-body-lg: 1.5rem;\n+\t--text-body-lg--line-height: 2rem;\n+\t--text-body-md: 1.25rem;\n+\t--text-body-md--line-height: 1.75rem;\n+\t--text-body-sm: 1rem;\n+\t--text-body-sm--line-height: 1.25rem;\n+\t--text-body-xs: 0.875rem;\n+\t--text-body-xs--line-height: 1.125rem;\n+\t--text-body-2xs: 0.75rem;\n+\t--text-body-2xs--line-height: 1rem;\n+\t--text-caption: 1.125rem;\n+\t--text-caption--line-height: 1.5rem;\n+\t--text-caption--font-weight: 600;\n+\t--text-button: 0.75rem;\n+\t--text-button--line-height: 1rem;\n+\t--text-button--font-weight: 700;\n+\t--animate-roll-reveal: roll-reveal 0.4s cubic-bezier(0.22, 1.28, 0.54, 0.99);\n+\t--animate-slide-left: slide-left 0.3s ease-out;\n+\t--animate-slide-top: slide-top 0.3s ease-out;\n+\t--animate-caret-blink: caret-blink 1.25s ease-out infinite;\n+\n+\t@keyframes roll-reveal {\n+\t\tfrom {\n+\t\t\ttransform: rotate(12deg) scale(0);\n+\t\t\topacity: 0;\n+\t\t}\n+\n+\t\tto {\n+\t\t\ttransform: rotate(0deg) scale(1);\n+\t\t\topacity: 1;\n+\t\t}\n+\t}\n+\n+\t@keyframes slide-left {\n+\t\tfrom {\n+\t\t\ttransform: translateX(20px);\n+\t\t\topacity: 0;\n+\t\t}\n+\n+\t\tto {\n+\t\t\ttransform: translateX(0px);\n+\t\t\topacity: 1;\n+\t\t}\n+\t}\n+\n+\t@keyframes slide-top {\n+\t\tfrom {\n+\t\t\ttransform: translateY(20px);\n+\t\t\topacity: 0;\n+\t\t}\n+\n+\t\tto {\n+\t\t\ttransform: translateY(0px);\n+\t\t\topacity: 1;\n+\t\t}\n+\t}\n+\n+\t@keyframes caret-blink {\n+\t\t0%,\n+\t\t70%,\n+\t\t100% {\n+\t\t\topacity: 1;\n+\t\t}\n+\n+\t\t20%,\n+\t\t50% {\n+\t\t\topacity: 0;\n+\t\t}\n+\t}\n+}\n+\n+@utility container {\n+\tmargin-inline: auto;\n+\tpadding-inline: 2rem;\n+\n+\t@media (width >=1400px) {\n+\t\t& {\n+\t\t\tmax-width: 1400px;\n+\t\t}\n+\t}\n+}\n+\n+@layer base {\n+\t*,\n+\t::after,\n+\t::before,\n+\t::backdrop,\n+\t::file-selector-button {\n+\t\tborder-color: hsl(var(--border));\n+\t}\n+}\ndiff --git a/app/utils/auth.server.test.ts b/app/utils/auth.server.test.ts\nnew file mode 100644\nindex 0000000..b660cd6\n--- /dev/null\n+++ b/app/utils/auth.server.test.ts\n@@ -0,0 +1,109 @@\n+import { http, HttpResponse } from 'msw'\n+import { describe, expect, test } from 'vitest'\n+import { server } from '#tests/mocks'\n+import { consoleWarn } from '#tests/setup/setup-test-env.ts'\n+import { checkIsCommonPassword, getPasswordHashParts } from './auth.server.ts'\n+\n+test('checkIsCommonPassword returns true when password is found in breach database', async () => {\n+\tconst password = 'testpassword'\n+\tconst [prefix, suffix] = getPasswordHashParts(password)\n+\n+\tserver.use(\n+\t\thttp.get(`https://api.pwnedpasswords.com/range/${prefix}`, () => {\n+\t\t\t// Include the actual suffix in the response with another realistic suffix\n+\t\t\treturn new HttpResponse(\n+\t\t\t\t`1234567890123456789012345678901234A:1\\n${suffix}:1234`,\n+\t\t\t\t{ status: 200 },\n+\t\t\t)\n+\t\t}),\n+\t)\n+\n+\tconst result = await checkIsCommonPassword(password)\n+\texpect(result).toBe(true)\n+})\n+\n+test('checkIsCommonPassword returns false when password is not found in breach database', async () => {\n+\tconst password = 'sup3r-dup3r-s3cret'\n+\tconst [prefix] = getPasswordHashParts(password)\n+\n+\tserver.use(\n+\t\thttp.get(`https://api.pwnedpasswords.com/range/${prefix}`, () => {\n+\t\t\t// Response with realistic suffixes that won't match\n+\t\t\treturn new HttpResponse(\n+\t\t\t\t'1234567890123456789012345678901234A:1\\n' +\n+\t\t\t\t\t'1234567890123456789012345678901234B:2',\n+\t\t\t\t{ status: 200 },\n+\t\t\t)\n+\t\t}),\n+\t)\n+\n+\tconst result = await checkIsCommonPassword(password)\n+\texpect(result).toBe(false)\n+})\n+\n+// Error cases\n+test('checkIsCommonPassword returns false when API returns 500', async () => {\n+\tconst password = 'testpassword'\n+\tconst [prefix] = getPasswordHashParts(password)\n+\n+\tserver.use(\n+\t\thttp.get(`https://api.pwnedpasswords.com/range/${prefix}`, () => {\n+\t\t\treturn new HttpResponse(null, { status: 500 })\n+\t\t}),\n+\t)\n+\n+\tconst result = await checkIsCommonPassword(password)\n+\texpect(result).toBe(false)\n+})\n+\n+test('checkIsCommonPassword returns false when response has invalid format', async () => {\n+\tconsoleWarn.mockImplementation(() => {})\n+\tconst password = 'testpassword'\n+\tconst [prefix] = getPasswordHashParts(password)\n+\n+\tserver.use(\n+\t\thttp.get(`https://api.pwnedpasswords.com/range/${prefix}`, () => {\n+\t\t\t// Create a response that will cause a TypeError when text() is called\n+\t\t\tconst response = new Response()\n+\t\t\tObject.defineProperty(response, 'text', {\n+\t\t\t\tvalue: () => Promise.resolve(null),\n+\t\t\t})\n+\t\t\treturn response\n+\t\t}),\n+\t)\n+\n+\tconst result = await checkIsCommonPassword(password)\n+\texpect(result).toBe(false)\n+\texpect(consoleWarn).toHaveBeenCalledWith(\n+\t\t'Unknown error during password check',\n+\t\texpect.any(TypeError),\n+\t)\n+})\n+\n+describe('timeout handling', () => {\n+\t// normally we'd use fake timers for a test like this, but there's an issue\n+\t// with AbortSignal.timeout() and fake timers: https://github.com/sinonjs/fake-timers/issues/418\n+\t// beforeEach(() => vi.useFakeTimers())\n+\t// afterEach(() => vi.useRealTimers())\n+\n+\ttest('checkIsCommonPassword times out after 1 second', async () => {\n+\t\tconsoleWarn.mockImplementation(() => {})\n+\t\tserver.use(\n+\t\t\thttp.get('https://api.pwnedpasswords.com/range/:prefix', async () => {\n+\t\t\t\tconst twoSecondDelay = 2000\n+\t\t\t\tawait new Promise((resolve) => setTimeout(resolve, twoSecondDelay))\n+\t\t\t\t// swap to this when we can use fake timers:\n+\t\t\t\t// await vi.advanceTimersByTimeAsync(twoSecondDelay)\n+\t\t\t\treturn new HttpResponse(\n+\t\t\t\t\t'1234567890123456789012345678901234A:1\\n' +\n+\t\t\t\t\t\t'1234567890123456789012345678901234B:2',\n+\t\t\t\t\t{ status: 200 },\n+\t\t\t\t)\n+\t\t\t}),\n+\t\t)\n+\n+\t\tconst result = await checkIsCommonPassword('testpassword')\n+\t\texpect(result).toBe(false)\n+\t\texpect(consoleWarn).toHaveBeenCalledWith('Password check timed out')\n+\t})\n+})\ndiff --git a/app/utils/auth.server.ts b/app/utils/auth.server.ts\nnew file mode 100644\nindex 0000000..f785ea8\n--- /dev/null\n+++ b/app/utils/auth.server.ts\n@@ -0,0 +1,294 @@\n+import crypto from 'node:crypto'\n+import { type Connection, type Password, type User } from '@prisma/client'\n+import bcrypt from 'bcryptjs'\n+import { redirect } from 'react-router'\n+import { Authenticator } from 'remix-auth'\n+import { safeRedirect } from 'remix-utils/safe-redirect'\n+import { providers } from './connections.server.ts'\n+import { prisma } from './db.server.ts'\n+import { combineHeaders, downloadFile } from './misc.tsx'\n+import { type ProviderUser } from './providers/provider.ts'\n+import { authSessionStorage } from './session.server.ts'\n+import { uploadProfileImage } from './storage.server.ts'\n+\n+export const SESSION_EXPIRATION_TIME = 1000 * 60 * 60 * 24 * 30\n+export const getSessionExpirationDate = () =>\n+\tnew Date(Date.now() + SESSION_EXPIRATION_TIME)\n+\n+export const sessionKey = 'sessionId'\n+\n+export const authenticator = new Authenticator()\n+\n+for (const [providerName, provider] of Object.entries(providers)) {\n+\tconst strategy = provider.getAuthStrategy()\n+\tif (strategy) {\n+\t\tauthenticator.use(strategy, providerName)\n+\t}\n+}\n+\n+export async function getUserId(request: Request) {\n+\tconst authSession = await authSessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\tconst sessionId = authSession.get(sessionKey)\n+\tif (!sessionId) return null\n+\tconst session = await prisma.session.findUnique({\n+\t\tselect: { userId: true },\n+\t\twhere: { id: sessionId, expirationDate: { gt: new Date() } },\n+\t})\n+\tif (!session?.userId) {\n+\t\tthrow redirect('/', {\n+\t\t\theaders: {\n+\t\t\t\t'set-cookie': await authSessionStorage.destroySession(authSession),\n+\t\t\t},\n+\t\t})\n+\t}\n+\treturn session.userId\n+}\n+\n+export async function requireUserId(\n+\trequest: Request,\n+\t{ redirectTo }: { redirectTo?: string | null } = {},\n+) {\n+\tconst userId = await getUserId(request)\n+\tif (!userId) {\n+\t\tconst requestUrl = new URL(request.url)\n+\t\tredirectTo =\n+\t\t\tredirectTo === null\n+\t\t\t\t? null\n+\t\t\t\t: (redirectTo ?? `${requestUrl.pathname}${requestUrl.search}`)\n+\t\tconst loginParams = redirectTo ? new URLSearchParams({ redirectTo }) : null\n+\t\tconst loginRedirect = ['/login', loginParams?.toString()]\n+\t\t\t.filter(Boolean)\n+\t\t\t.join('?')\n+\t\tthrow redirect(loginRedirect)\n+\t}\n+\treturn userId\n+}\n+\n+export async function requireAnonymous(request: Request) {\n+\tconst userId = await getUserId(request)\n+\tif (userId) {\n+\t\tthrow redirect('/')\n+\t}\n+}\n+\n+export async function login({\n+\tusername,\n+\tpassword,\n+}: {\n+\tusername: User['username']\n+\tpassword: string\n+}) {\n+\tconst user = await verifyUserPassword({ username }, password)\n+\tif (!user) return null\n+\tconst session = await prisma.session.create({\n+\t\tselect: { id: true, expirationDate: true, userId: true },\n+\t\tdata: {\n+\t\t\texpirationDate: getSessionExpirationDate(),\n+\t\t\tuserId: user.id,\n+\t\t},\n+\t})\n+\treturn session\n+}\n+\n+export async function resetUserPassword({\n+\tusername,\n+\tpassword,\n+}: {\n+\tusername: User['username']\n+\tpassword: string\n+}) {\n+\tconst hashedPassword = await getPasswordHash(password)\n+\treturn prisma.user.update({\n+\t\twhere: { username },\n+\t\tdata: {\n+\t\t\tpassword: {\n+\t\t\t\tupdate: {\n+\t\t\t\t\thash: hashedPassword,\n+\t\t\t\t},\n+\t\t\t},\n+\t\t},\n+\t})\n+}\n+\n+export async function signup({\n+\temail,\n+\tusername,\n+\tpassword,\n+\tname,\n+}: {\n+\temail: User['email']\n+\tusername: User['username']\n+\tname: User['name']\n+\tpassword: string\n+}) {\n+\tconst hashedPassword = await getPasswordHash(password)\n+\n+\tconst session = await prisma.session.create({\n+\t\tdata: {\n+\t\t\texpirationDate: getSessionExpirationDate(),\n+\t\t\tuser: {\n+\t\t\t\tcreate: {\n+\t\t\t\t\temail: email.toLowerCase(),\n+\t\t\t\t\tusername: username.toLowerCase(),\n+\t\t\t\t\tname,\n+\t\t\t\t\troles: { connect: { name: 'user' } },\n+\t\t\t\t\tpassword: {\n+\t\t\t\t\t\tcreate: {\n+\t\t\t\t\t\t\thash: hashedPassword,\n+\t\t\t\t\t\t},\n+\t\t\t\t\t},\n+\t\t\t\t},\n+\t\t\t},\n+\t\t},\n+\t\tselect: { id: true, expirationDate: true },\n+\t})\n+\n+\treturn session\n+}\n+\n+export async function signupWithConnection({\n+\temail,\n+\tusername,\n+\tname,\n+\tproviderId,\n+\tproviderName,\n+\timageUrl,\n+}: {\n+\temail: User['email']\n+\tusername: User['username']\n+\tname: User['name']\n+\tproviderId: Connection['providerId']\n+\tproviderName: Connection['providerName']\n+\timageUrl?: string\n+}) {\n+\tconst user = await prisma.user.create({\n+\t\tdata: {\n+\t\t\temail: email.toLowerCase(),\n+\t\t\tusername: username.toLowerCase(),\n+\t\t\tname,\n+\t\t\troles: { connect: { name: 'user' } },\n+\t\t\tconnections: { create: { providerId, providerName } },\n+\t\t},\n+\t\tselect: { id: true },\n+\t})\n+\n+\tif (imageUrl) {\n+\t\tconst imageFile = await downloadFile(imageUrl)\n+\t\tawait prisma.user.update({\n+\t\t\twhere: { id: user.id },\n+\t\t\tdata: {\n+\t\t\t\timage: {\n+\t\t\t\t\tcreate: {\n+\t\t\t\t\t\tobjectKey: await uploadProfileImage(user.id, imageFile),\n+\t\t\t\t\t},\n+\t\t\t\t},\n+\t\t\t},\n+\t\t})\n+\t}\n+\n+\t// Create and return the session\n+\tconst session = await prisma.session.create({\n+\t\tdata: {\n+\t\t\texpirationDate: getSessionExpirationDate(),\n+\t\t\tuserId: user.id,\n+\t\t},\n+\t\tselect: { id: true, expirationDate: true },\n+\t})\n+\n+\treturn session\n+}\n+\n+export async function logout(\n+\t{\n+\t\trequest,\n+\t\tredirectTo = '/',\n+\t}: {\n+\t\trequest: Request\n+\t\tredirectTo?: string\n+\t},\n+\tresponseInit?: ResponseInit,\n+) {\n+\tconst authSession = await authSessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\tconst sessionId = authSession.get(sessionKey)\n+\t// if this fails, we still need to delete the session from the user's browser\n+\t// and it doesn't do any harm staying in the db anyway.\n+\tif (sessionId) {\n+\t\t// the .catch is important because that's what triggers the query.\n+\t\t// learn more about PrismaPromise: https://www.prisma.io/docs/orm/reference/prisma-client-reference#prismapromise-behavior\n+\t\tvoid prisma.session.deleteMany({ where: { id: sessionId } }).catch(() => {})\n+\t}\n+\tthrow redirect(safeRedirect(redirectTo), {\n+\t\t...responseInit,\n+\t\theaders: combineHeaders(\n+\t\t\t{ 'set-cookie': await authSessionStorage.destroySession(authSession) },\n+\t\t\tresponseInit?.headers,\n+\t\t),\n+\t})\n+}\n+\n+export async function getPasswordHash(password: string) {\n+\tconst hash = await bcrypt.hash(password, 10)\n+\treturn hash\n+}\n+\n+export async function verifyUserPassword(\n+\twhere: Pick | Pick,\n+\tpassword: Password['hash'],\n+) {\n+\tconst userWithPassword = await prisma.user.findUnique({\n+\t\twhere,\n+\t\tselect: { id: true, password: { select: { hash: true } } },\n+\t})\n+\n+\tif (!userWithPassword || !userWithPassword.password) {\n+\t\treturn null\n+\t}\n+\n+\tconst isValid = await bcrypt.compare(password, userWithPassword.password.hash)\n+\n+\tif (!isValid) {\n+\t\treturn null\n+\t}\n+\n+\treturn { id: userWithPassword.id }\n+}\n+\n+export function getPasswordHashParts(password: string) {\n+\tconst hash = crypto\n+\t\t.createHash('sha1')\n+\t\t.update(password, 'utf8')\n+\t\t.digest('hex')\n+\t\t.toUpperCase()\n+\treturn [hash.slice(0, 5), hash.slice(5)] as const\n+}\n+\n+export async function checkIsCommonPassword(password: string) {\n+\tconst [prefix, suffix] = getPasswordHashParts(password)\n+\n+\ttry {\n+\t\tconst response = await fetch(\n+\t\t\t`https://api.pwnedpasswords.com/range/${prefix}`,\n+\t\t\t{ signal: AbortSignal.timeout(1000) },\n+\t\t)\n+\n+\t\tif (!response.ok) return false\n+\n+\t\tconst data = await response.text()\n+\t\treturn data.split(/\\r?\\n/).some((line) => {\n+\t\t\tconst [hashSuffix, ignoredPrevalenceCount] = line.split(':')\n+\t\t\treturn hashSuffix === suffix\n+\t\t})\n+\t} catch (error) {\n+\t\tif (error instanceof DOMException && error.name === 'TimeoutError') {\n+\t\t\tconsole.warn('Password check timed out')\n+\t\t\treturn false\n+\t\t}\n+\n+\t\tconsole.warn('Unknown error during password check', error)\n+\t\treturn false\n+\t}\n+}\ndiff --git a/app/utils/cache.server.ts b/app/utils/cache.server.ts\nnew file mode 100644\nindex 0000000..995e126\n--- /dev/null\n+++ b/app/utils/cache.server.ts\n@@ -0,0 +1,178 @@\n+import fs from 'node:fs'\n+import path from 'node:path'\n+import { DatabaseSync } from 'node:sqlite'\n+import {\n+\tcachified as baseCachified,\n+\tverboseReporter,\n+\tmergeReporters,\n+\ttype CacheEntry,\n+\ttype Cache as CachifiedCache,\n+\ttype CachifiedOptions,\n+\ttype Cache,\n+\ttotalTtl,\n+\ttype CreateReporter,\n+} from '@epic-web/cachified'\n+import { remember } from '@epic-web/remember'\n+import { LRUCache } from 'lru-cache'\n+import { z } from 'zod'\n+import { cachifiedTimingReporter, type Timings } from './timing.server.ts'\n+\n+const CACHE_DATABASE_PATH = process.env.CACHE_DATABASE_PATH\n+\n+const cacheDb = remember('cacheDb', createDatabase)\n+\n+function createDatabase(tryAgain = true): DatabaseSync {\n+\tconst parentDir = path.dirname(CACHE_DATABASE_PATH)\n+\tfs.mkdirSync(parentDir, { recursive: true })\n+\n+\tconst db = new DatabaseSync(CACHE_DATABASE_PATH)\n+\n+\ttry {\n+\t\t// create cache table with metadata JSON column and value JSON column if it does not exist already\n+\t\tdb.exec(`\n+\t\t\tCREATE TABLE IF NOT EXISTS cache (\n+\t\t\t\tkey TEXT PRIMARY KEY,\n+\t\t\t\tmetadata TEXT,\n+\t\t\t\tvalue TEXT\n+\t\t\t)\n+\t\t`)\n+\t} catch (error: unknown) {\n+\t\tfs.unlinkSync(CACHE_DATABASE_PATH)\n+\t\tif (tryAgain) {\n+\t\t\tconsole.error(\n+\t\t\t\t`Error creating cache database, deleting the file at \"${CACHE_DATABASE_PATH}\" and trying again...`,\n+\t\t\t)\n+\t\t\treturn createDatabase(false)\n+\t\t}\n+\t\tthrow error\n+\t}\n+\n+\treturn db\n+}\n+\n+const lru = remember(\n+\t'lru-cache',\n+\t() => new LRUCache>({ max: 5000 }),\n+)\n+\n+export const lruCache = {\n+\tname: 'app-memory-cache',\n+\tset: (key, value) => {\n+\t\tconst ttl = totalTtl(value?.metadata)\n+\t\tlru.set(key, value, {\n+\t\t\tttl: ttl === Infinity ? undefined : ttl,\n+\t\t\tstart: value?.metadata?.createdTime,\n+\t\t})\n+\t\treturn value\n+\t},\n+\tget: (key) => lru.get(key),\n+\tdelete: (key) => lru.delete(key),\n+} satisfies Cache\n+\n+const isBuffer = (obj: unknown): obj is Buffer =>\n+\tBuffer.isBuffer(obj) || obj instanceof Uint8Array\n+\n+function bufferReplacer(_key: string, value: unknown) {\n+\tif (isBuffer(value)) {\n+\t\treturn {\n+\t\t\t__isBuffer: true,\n+\t\t\tdata: value.toString('base64'),\n+\t\t}\n+\t}\n+\treturn value\n+}\n+\n+function bufferReviver(_key: string, value: unknown) {\n+\tif (\n+\t\tvalue &&\n+\t\ttypeof value === 'object' &&\n+\t\t'__isBuffer' in value &&\n+\t\t(value as any).data\n+\t) {\n+\t\treturn Buffer.from((value as any).data, 'base64')\n+\t}\n+\treturn value\n+}\n+\n+const cacheEntrySchema = z.object({\n+\tmetadata: z.object({\n+\t\tcreatedTime: z.number(),\n+\t\tttl: z.number().nullable().optional(),\n+\t\tswr: z.number().nullable().optional(),\n+\t}),\n+\tvalue: z.unknown(),\n+})\n+const cacheQueryResultSchema = z.object({\n+\tmetadata: z.string(),\n+\tvalue: z.string(),\n+})\n+\n+const getStatement = cacheDb.prepare(\n+\t'SELECT value, metadata FROM cache WHERE key = ?',\n+)\n+const setStatement = cacheDb.prepare(\n+\t'INSERT OR REPLACE INTO cache (key, value, metadata) VALUES (?, ?, ?)',\n+)\n+const deleteStatement = cacheDb.prepare('DELETE FROM cache WHERE key = ?')\n+const getAllKeysStatement = cacheDb.prepare('SELECT key FROM cache LIMIT ?')\n+const searchKeysStatement = cacheDb.prepare(\n+\t'SELECT key FROM cache WHERE key LIKE ? LIMIT ?',\n+)\n+\n+export const cache: CachifiedCache = {\n+\tname: 'SQLite cache',\n+\tasync get(key) {\n+\t\tconst result = getStatement.get(key)\n+\t\tconst parseResult = cacheQueryResultSchema.safeParse(result)\n+\t\tif (!parseResult.success) return null\n+\n+\t\tconst parsedEntry = cacheEntrySchema.safeParse({\n+\t\t\tmetadata: JSON.parse(parseResult.data.metadata),\n+\t\t\tvalue: JSON.parse(parseResult.data.value, bufferReviver),\n+\t\t})\n+\t\tif (!parsedEntry.success) return null\n+\t\tconst { metadata, value } = parsedEntry.data\n+\t\tif (!value) return null\n+\t\treturn { metadata, value }\n+\t},\n+\tasync set(key, entry) {\n+\t\tconst value = JSON.stringify(entry.value, bufferReplacer)\n+\t\tsetStatement.run(key, value, JSON.stringify(entry.metadata))\n+\t},\n+\tasync delete(key) {\n+\t\tdeleteStatement.run(key)\n+\t},\n+}\n+\n+export async function getAllCacheKeys(limit: number) {\n+\treturn {\n+\t\tsqlite: getAllKeysStatement\n+\t\t\t.all(limit)\n+\t\t\t.map((row) => (row as { key: string }).key),\n+\t\tlru: [...lru.keys()],\n+\t}\n+}\n+\n+export async function searchCacheKeys(search: string, limit: number) {\n+\treturn {\n+\t\tsqlite: searchKeysStatement\n+\t\t\t.all(`%${search}%`, limit)\n+\t\t\t.map((row) => (row as { key: string }).key),\n+\t\tlru: [...lru.keys()].filter((key) => key.includes(search)),\n+\t}\n+}\n+\n+export async function cachified(\n+\t{\n+\t\ttimings,\n+\t\t...options\n+\t}: CachifiedOptions & {\n+\t\ttimings?: Timings\n+\t},\n+\treporter: CreateReporter = verboseReporter(),\n+): Promise {\n+\treturn baseCachified(\n+\t\toptions,\n+\t\tmergeReporters(cachifiedTimingReporter(timings), reporter),\n+\t)\n+}\ndiff --git a/app/utils/client-hints.tsx b/app/utils/client-hints.tsx\nnew file mode 100644\nindex 0000000..560f35a\n--- /dev/null\n+++ b/app/utils/client-hints.tsx\n@@ -0,0 +1,56 @@\n+/**\n+ * This file contains utilities for using client hints for user preference which\n+ * are needed by the server, but are only known by the browser.\n+ */\n+import { getHintUtils } from '@epic-web/client-hints'\n+import {\n+\tclientHint as colorSchemeHint,\n+\tsubscribeToSchemeChange,\n+} from '@epic-web/client-hints/color-scheme'\n+import { clientHint as timeZoneHint } from '@epic-web/client-hints/time-zone'\n+import * as React from 'react'\n+import { useRevalidator } from 'react-router'\n+import { useOptionalRequestInfo, useRequestInfo } from './request-info.ts'\n+\n+const hintsUtils = getHintUtils({\n+\ttheme: colorSchemeHint,\n+\ttimeZone: timeZoneHint,\n+\t// add other hints here\n+})\n+\n+export const { getHints } = hintsUtils\n+\n+/**\n+ * @returns an object with the client hints and their values\n+ */\n+export function useHints() {\n+\tconst requestInfo = useRequestInfo()\n+\treturn requestInfo.hints\n+}\n+\n+export function useOptionalHints() {\n+\tconst requestInfo = useOptionalRequestInfo()\n+\treturn requestInfo?.hints\n+}\n+\n+/**\n+ * @returns inline script element that checks for client hints and sets cookies\n+ * if they are not set then reloads the page if any cookie was set to an\n+ * inaccurate value.\n+ */\n+export function ClientHintCheck({ nonce }: { nonce: string }) {\n+\tconst { revalidate } = useRevalidator()\n+\tReact.useEffect(\n+\t\t() => subscribeToSchemeChange(() => revalidate()),\n+\t\t[revalidate],\n+\t)\n+\n+\treturn (\n+\t\t\n+\t)\n+}\ndiff --git a/app/utils/connections.server.ts b/app/utils/connections.server.ts\nnew file mode 100644\nindex 0000000..8283265\n--- /dev/null\n+++ b/app/utils/connections.server.ts\n@@ -0,0 +1,21 @@\n+// import { createCookieSessionStorage } from 'react-router'\n+import { type ProviderName } from './connections.tsx'\n+import { GitHubProvider } from './providers/github.server.ts'\n+import { type AuthProvider } from './providers/provider.ts'\n+import { type Timings } from './timing.server.ts'\n+\n+export const providers: Record = {\n+\tgithub: new GitHubProvider(),\n+}\n+\n+export function handleMockAction(providerName: ProviderName, request: Request) {\n+\treturn providers[providerName].handleMockAction(request)\n+}\n+\n+export function resolveConnectionData(\n+\tproviderName: ProviderName,\n+\tproviderId: string,\n+\toptions?: { timings?: Timings },\n+) {\n+\treturn providers[providerName].resolveConnectionData(providerId, options)\n+}\ndiff --git a/app/utils/connections.tsx b/app/utils/connections.tsx\nnew file mode 100644\nindex 0000000..9448b96\n--- /dev/null\n+++ b/app/utils/connections.tsx\n@@ -0,0 +1,57 @@\n+import { Form } from 'react-router'\n+import { z } from 'zod'\n+import { Icon } from '#app/components/ui/icon.tsx'\n+import { StatusButton } from '#app/components/ui/status-button.tsx'\n+import { useIsPending } from './misc.tsx'\n+\n+export const GITHUB_PROVIDER_NAME = 'github'\n+// to add another provider, set their name here and add it to the providerNames below\n+\n+export const providerNames = [GITHUB_PROVIDER_NAME] as const\n+export const ProviderNameSchema = z.enum(providerNames)\n+export type ProviderName = z.infer\n+\n+export const providerLabels: Record = {\n+\t[GITHUB_PROVIDER_NAME]: 'GitHub',\n+} as const\n+\n+export const providerIcons: Record = {\n+\t[GITHUB_PROVIDER_NAME]: ,\n+} as const\n+\n+export function ProviderConnectionForm({\n+\tredirectTo,\n+\ttype,\n+\tproviderName,\n+}: {\n+\tredirectTo?: string | null\n+\ttype: 'Connect' | 'Login' | 'Signup'\n+\tproviderName: ProviderName\n+}) {\n+\tconst label = providerLabels[providerName]\n+\tconst formAction = `/auth/${providerName}`\n+\tconst isPending = useIsPending({ formAction })\n+\treturn (\n+\t\t\n+\t\t\t{redirectTo ? (\n+\t\t\t\t\n+\t\t\t) : null}\n+\t\t\t\n+\t\t\t\t\n+\t\t\t\t\t{providerIcons[providerName]}\n+\t\t\t\t\t\n+\t\t\t\t\t\t{type} with {label}\n+\t\t\t\t\t\n+\t\t\t\t\n+\t\t\t\n+\t\t\n+\t)\n+}\ndiff --git a/app/utils/db.server.ts b/app/utils/db.server.ts\nnew file mode 100644\nindex 0000000..711844e\n--- /dev/null\n+++ b/app/utils/db.server.ts\n@@ -0,0 +1,37 @@\n+import { styleText } from 'node:util'\n+import { remember } from '@epic-web/remember'\n+// Changed import due to issue: https://github.com/remix-run/react-router/pull/12644\n+import { PrismaClient } from '@prisma/client/index.js'\n+\n+export const prisma = remember('prisma', () => {\n+\t// NOTE: if you change anything in this function you'll need to restart\n+\t// the dev server to see your changes.\n+\n+\t// Feel free to change this log threshold to something that makes sense for you\n+\tconst logThreshold = 20\n+\n+\tconst client = new PrismaClient({\n+\t\tlog: [\n+\t\t\t{ level: 'query', emit: 'event' },\n+\t\t\t{ level: 'error', emit: 'stdout' },\n+\t\t\t{ level: 'warn', emit: 'stdout' },\n+\t\t],\n+\t})\n+\tclient.$on('query', async (e) => {\n+\t\tif (e.duration < logThreshold) return\n+\t\tconst color =\n+\t\t\te.duration < logThreshold * 1.1\n+\t\t\t\t? 'green'\n+\t\t\t\t: e.duration < logThreshold * 1.2\n+\t\t\t\t\t? 'blue'\n+\t\t\t\t\t: e.duration < logThreshold * 1.3\n+\t\t\t\t\t\t? 'yellow'\n+\t\t\t\t\t\t: e.duration < logThreshold * 1.4\n+\t\t\t\t\t\t\t? 'redBright'\n+\t\t\t\t\t\t\t: 'red'\n+\t\tconst dur = styleText(color, `${e.duration}ms`)\n+\t\tconsole.info(`prisma:query - ${dur} - ${e.query}`)\n+\t})\n+\tvoid client.$connect()\n+\treturn client\n+})\ndiff --git a/app/utils/email.server.ts b/app/utils/email.server.ts\nnew file mode 100644\nindex 0000000..5ca9264\n--- /dev/null\n+++ b/app/utils/email.server.ts\n@@ -0,0 +1,98 @@\n+import { render } from '@react-email/components'\n+import { type ReactElement } from 'react'\n+import { z } from 'zod'\n+\n+const resendErrorSchema = z.union([\n+\tz.object({\n+\t\tname: z.string(),\n+\t\tmessage: z.string(),\n+\t\tstatusCode: z.number(),\n+\t}),\n+\tz.object({\n+\t\tname: z.literal('UnknownError'),\n+\t\tmessage: z.literal('Unknown Error'),\n+\t\tstatusCode: z.literal(500),\n+\t\tcause: z.any(),\n+\t}),\n+])\n+type ResendError = z.infer\n+\n+const resendSuccessSchema = z.object({\n+\tid: z.string(),\n+})\n+\n+export async function sendEmail({\n+\treact,\n+\t...options\n+}: {\n+\tto: string\n+\tsubject: string\n+} & (\n+\t| { html: string; text: string; react?: never }\n+\t| { react: ReactElement; html?: never; text?: never }\n+)) {\n+\tconst from = 'hello@epicstack.dev'\n+\n+\tconst email = {\n+\t\tfrom,\n+\t\t...options,\n+\t\t...(react ? await renderReactEmail(react) : null),\n+\t}\n+\n+\t// feel free to remove this condition once you've set up resend\n+\tif (!process.env.RESEND_API_KEY && !process.env.MOCKS) {\n+\t\tconsole.error(`RESEND_API_KEY not set and we're not in mocks mode.`)\n+\t\tconsole.error(\n+\t\t\t`To send emails, set the RESEND_API_KEY environment variable.`,\n+\t\t)\n+\t\tconsole.error(`Would have sent the following email:`, JSON.stringify(email))\n+\t\treturn {\n+\t\t\tstatus: 'success',\n+\t\t\tdata: { id: 'mocked' },\n+\t\t} as const\n+\t}\n+\n+\tconst response = await fetch('https://api.resend.com/emails', {\n+\t\tmethod: 'POST',\n+\t\tbody: JSON.stringify(email),\n+\t\theaders: {\n+\t\t\tAuthorization: `Bearer ${process.env.RESEND_API_KEY}`,\n+\t\t\t'Content-Type': 'application/json',\n+\t\t},\n+\t})\n+\tconst data = await response.json()\n+\tconst parsedData = resendSuccessSchema.safeParse(data)\n+\n+\tif (response.ok && parsedData.success) {\n+\t\treturn {\n+\t\t\tstatus: 'success',\n+\t\t\tdata: parsedData,\n+\t\t} as const\n+\t} else {\n+\t\tconst parseResult = resendErrorSchema.safeParse(data)\n+\t\tif (parseResult.success) {\n+\t\t\treturn {\n+\t\t\t\tstatus: 'error',\n+\t\t\t\terror: parseResult.data,\n+\t\t\t} as const\n+\t\t} else {\n+\t\t\treturn {\n+\t\t\t\tstatus: 'error',\n+\t\t\t\terror: {\n+\t\t\t\t\tname: 'UnknownError',\n+\t\t\t\t\tmessage: 'Unknown Error',\n+\t\t\t\t\tstatusCode: 500,\n+\t\t\t\t\tcause: data,\n+\t\t\t\t} satisfies ResendError,\n+\t\t\t} as const\n+\t\t}\n+\t}\n+}\n+\n+async function renderReactEmail(react: ReactElement) {\n+\tconst [html, text] = await Promise.all([\n+\t\trender(react),\n+\t\trender(react, { plainText: true }),\n+\t])\n+\treturn { html, text }\n+}\ndiff --git a/app/utils/env.server.ts b/app/utils/env.server.ts\nnew file mode 100644\nindex 0000000..e762b1e\n--- /dev/null\n+++ b/app/utils/env.server.ts\n@@ -0,0 +1,74 @@\n+import { z } from 'zod'\n+\n+const schema = z.object({\n+\tNODE_ENV: z.enum(['production', 'development', 'test'] as const),\n+\tDATABASE_PATH: z.string(),\n+\tDATABASE_URL: z.string(),\n+\tSESSION_SECRET: z.string(),\n+\tINTERNAL_COMMAND_TOKEN: z.string(),\n+\tHONEYPOT_SECRET: z.string(),\n+\tCACHE_DATABASE_PATH: z.string(),\n+\t// If you plan on using Sentry, remove the .optional()\n+\tSENTRY_DSN: z.string().optional(),\n+\t// If you plan to use Resend, remove the .optional()\n+\tRESEND_API_KEY: z.string().optional(),\n+\t// If you plan to use GitHub auth, remove the .optional()\n+\tGITHUB_CLIENT_ID: z.string().optional(),\n+\tGITHUB_CLIENT_SECRET: z.string().optional(),\n+\tGITHUB_REDIRECT_URI: z.string().optional(),\n+\tGITHUB_TOKEN: z.string().optional(),\n+\n+\tALLOW_INDEXING: z.enum(['true', 'false']).optional(),\n+\n+\t// Tigris Object Storage Configuration\n+\tAWS_ACCESS_KEY_ID: z.string(),\n+\tAWS_SECRET_ACCESS_KEY: z.string(),\n+\tAWS_REGION: z.string(),\n+\tAWS_ENDPOINT_URL_S3: z.string().url(),\n+\tBUCKET_NAME: z.string(),\n+})\n+\n+declare global {\n+\tnamespace NodeJS {\n+\t\tinterface ProcessEnv extends z.infer {}\n+\t}\n+}\n+\n+export function init() {\n+\tconst parsed = schema.safeParse(process.env)\n+\n+\tif (parsed.success === false) {\n+\t\tconsole.error(\n+\t\t\t'❌ Invalid environment variables:',\n+\t\t\tparsed.error.flatten().fieldErrors,\n+\t\t)\n+\n+\t\tthrow new Error('Invalid environment variables')\n+\t}\n+}\n+\n+/**\n+ * This is used in both `entry.server.ts` and `root.tsx` to ensure that\n+ * the environment variables are set and globally available before the app is\n+ * started.\n+ *\n+ * NOTE: Do *not* add any environment variables in here that you do not wish to\n+ * be included in the client.\n+ * @returns all public ENV variables\n+ */\n+export function getEnv() {\n+\treturn {\n+\t\tMODE: process.env.NODE_ENV,\n+\t\tSENTRY_DSN: process.env.SENTRY_DSN,\n+\t\tALLOW_INDEXING: process.env.ALLOW_INDEXING,\n+\t}\n+}\n+\n+type ENV = ReturnType\n+\n+declare global {\n+\tvar ENV: ENV\n+\tinterface Window {\n+\t\tENV: ENV\n+\t}\n+}\ndiff --git a/app/utils/headers.server.test.ts b/app/utils/headers.server.test.ts\nnew file mode 100644\nindex 0000000..b6cb899\n--- /dev/null\n+++ b/app/utils/headers.server.test.ts\n@@ -0,0 +1,39 @@\n+import { format, parse } from '@tusbar/cache-control'\n+import { expect, test } from 'vitest'\n+import { getConservativeCacheControl } from './headers.server.ts'\n+\n+test('works for basic usecase', () => {\n+\tconst result = getConservativeCacheControl(\n+\t\t'max-age=3600',\n+\t\t'max-age=1800, s-maxage=600',\n+\t\t'private, max-age=86400',\n+\t)\n+\n+\texpect(result).toEqual(\n+\t\tformat({\n+\t\t\tmaxAge: 1800,\n+\t\t\tsharedMaxAge: 600,\n+\t\t\tprivate: true,\n+\t\t}),\n+\t)\n+})\n+test('retains boolean directive', () => {\n+\tconst result = parse(\n+\t\tgetConservativeCacheControl('private', 'no-cache,no-store'),\n+\t)\n+\n+\texpect(result.private).toBe(true)\n+\texpect(result.noCache).toBe(true)\n+\texpect(result.noStore).toBe(true)\n+})\n+test('gets smallest number directive', () => {\n+\tconst result = parse(\n+\t\tgetConservativeCacheControl(\n+\t\t\t'max-age=10, s-maxage=300',\n+\t\t\t'max-age=300, s-maxage=600',\n+\t\t),\n+\t)\n+\n+\texpect(result.maxAge).toBe(10)\n+\texpect(result.sharedMaxAge).toBe(300)\n+})\ndiff --git a/app/utils/headers.server.ts b/app/utils/headers.server.ts\nnew file mode 100644\nindex 0000000..26f6818\n--- /dev/null\n+++ b/app/utils/headers.server.ts\n@@ -0,0 +1,114 @@\n+import { type CacheControlValue, parse, format } from '@tusbar/cache-control'\n+import { type HeadersArgs } from 'react-router'\n+\n+/**\n+ * A utility for handling route headers, merging common use-case headers.\n+ *\n+ * This function combines headers by:\n+ * 1. Forwarding headers from the route's loader or action.\n+ * 2. Inheriting headers from the parent.\n+ * 3. Falling back to parent headers (if any) when headers are missing.\n+ */\n+export function pipeHeaders({\n+\tparentHeaders,\n+\tloaderHeaders,\n+\tactionHeaders,\n+\terrorHeaders,\n+}: HeadersArgs) {\n+\tconst headers = new Headers()\n+\n+\t// get the one that's actually in use\n+\tlet currentHeaders: Headers\n+\tif (errorHeaders !== undefined) {\n+\t\tcurrentHeaders = errorHeaders\n+\t} else if (loaderHeaders.entries().next().done) {\n+\t\tcurrentHeaders = actionHeaders\n+\t} else {\n+\t\tcurrentHeaders = loaderHeaders\n+\t}\n+\n+\t// take in useful headers route loader/action\n+\t// pass this point currentHeaders can be ignored\n+\tconst forwardHeaders = ['Cache-Control', 'Vary', 'Server-Timing']\n+\tfor (const headerName of forwardHeaders) {\n+\t\tconst header = currentHeaders.get(headerName)\n+\t\tif (header) {\n+\t\t\theaders.set(headerName, header)\n+\t\t}\n+\t}\n+\n+\theaders.set(\n+\t\t'Cache-Control',\n+\t\tgetConservativeCacheControl(\n+\t\t\tparentHeaders.get('Cache-Control'),\n+\t\t\theaders.get('Cache-Control'),\n+\t\t),\n+\t)\n+\n+\t// append useful parent headers\n+\tconst inheritHeaders = ['Vary', 'Server-Timing']\n+\tfor (const headerName of inheritHeaders) {\n+\t\tconst header = parentHeaders.get(headerName)\n+\t\tif (header) {\n+\t\t\theaders.append(headerName, header)\n+\t\t}\n+\t}\n+\n+\t// fallback to parent headers if loader don't have\n+\tconst fallbackHeaders = ['Cache-Control', 'Vary']\n+\tfor (const headerName of fallbackHeaders) {\n+\t\tif (headers.has(headerName)) {\n+\t\t\tcontinue\n+\t\t}\n+\t\tconst fallbackHeader = parentHeaders.get(headerName)\n+\t\tif (fallbackHeader) {\n+\t\t\theaders.set(headerName, fallbackHeader)\n+\t\t}\n+\t}\n+\n+\treturn headers\n+}\n+\n+/**\n+ * Given multiple Cache-Control headers, merge them and get the most conservative one.\n+ */\n+export function getConservativeCacheControl(\n+\t...cacheControlHeaders: Array\n+): string {\n+\treturn format(\n+\t\tcacheControlHeaders\n+\t\t\t.filter(Boolean)\n+\t\t\t.map((header) => parse(header))\n+\t\t\t.reduce((acc, current) => {\n+\t\t\t\tfor (const key in current) {\n+\t\t\t\t\tconst directive = key as keyof Required // keyof CacheControl includes functions\n+\n+\t\t\t\t\tconst currentValue = current[directive]\n+\n+\t\t\t\t\tswitch (typeof currentValue) {\n+\t\t\t\t\t\tcase 'boolean': {\n+\t\t\t\t\t\t\tif (currentValue) {\n+\t\t\t\t\t\t\t\tacc[directive] = true as any\n+\t\t\t\t\t\t\t}\n+\n+\t\t\t\t\t\t\tbreak\n+\t\t\t\t\t\t}\n+\t\t\t\t\t\tcase 'number': {\n+\t\t\t\t\t\t\tconst accValue = acc[directive] as number | undefined\n+\n+\t\t\t\t\t\t\tif (accValue === undefined) {\n+\t\t\t\t\t\t\t\tacc[directive] = currentValue as any\n+\t\t\t\t\t\t\t} else {\n+\t\t\t\t\t\t\t\tconst result = Math.min(accValue, currentValue)\n+\t\t\t\t\t\t\t\tacc[directive] = result as any\n+\t\t\t\t\t\t\t}\n+\n+\t\t\t\t\t\t\tbreak\n+\t\t\t\t\t\t}\n+\t\t\t\t\t}\n+\t\t\t\t}\n+\n+\t\t\t\treturn acc\n+\t\t\t}, {}),\n+\t)\n+}\ndiff --git a/app/utils/honeypot.server.ts b/app/utils/honeypot.server.ts\nnew file mode 100644\nindex 0000000..55b18a5\n--- /dev/null\n+++ b/app/utils/honeypot.server.ts\n@@ -0,0 +1,17 @@\n+import { Honeypot, SpamError } from 'remix-utils/honeypot/server'\n+\n+export const honeypot = new Honeypot({\n+\tvalidFromFieldName: process.env.NODE_ENV === 'test' ? null : undefined,\n+\tencryptionSeed: process.env.HONEYPOT_SECRET,\n+})\n+\n+export async function checkHoneypot(formData: FormData) {\n+\ttry {\n+\t\tawait honeypot.check(formData)\n+\t} catch (error) {\n+\t\tif (error instanceof SpamError) {\n+\t\t\tthrow new Response('Form not submitted properly', { status: 400 })\n+\t\t}\n+\t\tthrow error\n+\t}\n+}\ndiff --git a/app/utils/litefs.server.ts b/app/utils/litefs.server.ts\nnew file mode 100644\nindex 0000000..9cb2bb4\n--- /dev/null\n+++ b/app/utils/litefs.server.ts\n@@ -0,0 +1,22 @@\n+// litefs-js should be used server-side only. It imports `fs` which results in Remix\n+// including a big polyfill. So we put the import in a `.server.ts` file to avoid that\n+// polyfill from being included. https://github.com/epicweb-dev/epic-stack/pull/331\n+export {\n+\tgetInstanceInfo,\n+\tgetInstanceInfoSync,\n+\tTXID_NUM_COOKIE_NAME,\n+\twaitForUpToDateTxNumber,\n+\tgetTxNumber,\n+\tgetTxSetCookieHeader,\n+\tcheckCookieForTransactionalConsistency,\n+\tgetInternalInstanceDomain,\n+\tgetAllInstances,\n+} from 'litefs-js'\n+\n+export {\n+\tensurePrimary,\n+\tensureInstance,\n+\tgetReplayResponse,\n+\thandleTransactionalConsistency,\n+\tappendTxNumberCookie,\n+} from 'litefs-js/remix'\ndiff --git a/app/utils/misc.error-message.test.ts b/app/utils/misc.error-message.test.ts\nnew file mode 100644\nindex 0000000..1fe4d7a\n--- /dev/null\n+++ b/app/utils/misc.error-message.test.ts\n@@ -0,0 +1,24 @@\n+import { faker } from '@faker-js/faker'\n+import { expect, test } from 'vitest'\n+import { consoleError } from '#tests/setup/setup-test-env.ts'\n+import { getErrorMessage } from './misc.tsx'\n+\n+test('Error object returns message', () => {\n+\tconst message = faker.lorem.words(2)\n+\texpect(getErrorMessage(new Error(message))).toBe(message)\n+})\n+\n+test('String returns itself', () => {\n+\tconst message = faker.lorem.words(2)\n+\texpect(getErrorMessage(message)).toBe(message)\n+})\n+\n+test('undefined falls back to Unknown', () => {\n+\tconsoleError.mockImplementation(() => {})\n+\texpect(getErrorMessage(undefined)).toBe('Unknown Error')\n+\texpect(consoleError).toHaveBeenCalledWith(\n+\t\t'Unable to get error message for error',\n+\t\tundefined,\n+\t)\n+\texpect(consoleError).toHaveBeenCalledTimes(1)\n+})\ndiff --git a/app/utils/misc.tsx b/app/utils/misc.tsx\nnew file mode 100644\nindex 0000000..ee6ebc3\n--- /dev/null\n+++ b/app/utils/misc.tsx\n@@ -0,0 +1,292 @@\n+import { clsx, type ClassValue } from 'clsx'\n+import { type GetSrcArgs, defaultGetSrc } from 'openimg/react'\n+import { useEffect, useMemo, useRef, useState } from 'react'\n+import { useFormAction, useNavigation } from 'react-router'\n+import { useSpinDelay } from 'spin-delay'\n+import { twMerge } from 'tailwind-merge'\n+\n+export function getUserImgSrc(objectKey?: string | null) {\n+\treturn objectKey\n+\t\t? `/resources/images?objectKey=${encodeURIComponent(objectKey)}`\n+\t\t: '/img/user.png'\n+}\n+\n+export function getNoteImgSrc(objectKey: string) {\n+\treturn `/resources/images?objectKey=${encodeURIComponent(objectKey)}`\n+}\n+\n+export function getImgSrc({\n+\theight,\n+\toptimizerEndpoint,\n+\tsrc,\n+\twidth,\n+\tfit,\n+\tformat,\n+}: GetSrcArgs) {\n+\t// We customize getImgSrc so our src looks nice like this:\n+\t// /resources/images?objectKey=...&h=...&w=...&fit=...&format=...\n+\t// instead of this:\n+\t// /resources/images?src=%2Fresources%2Fimages%3FobjectKey%3D...%26w%3D...%26h%3D...\n+\tif (src.startsWith(optimizerEndpoint)) {\n+\t\tconst [endpoint, query] = src.split('?')\n+\t\tconst searchParams = new URLSearchParams(query)\n+\t\tsearchParams.set('h', height.toString())\n+\t\tsearchParams.set('w', width.toString())\n+\t\tif (fit) {\n+\t\t\tsearchParams.set('fit', fit)\n+\t\t}\n+\t\tif (format) {\n+\t\t\tsearchParams.set('format', format)\n+\t\t}\n+\t\treturn `${endpoint}?${searchParams.toString()}`\n+\t}\n+\treturn defaultGetSrc({ height, optimizerEndpoint, src, width, fit, format })\n+}\n+\n+export function getErrorMessage(error: unknown) {\n+\tif (typeof error === 'string') return error\n+\tif (\n+\t\terror &&\n+\t\ttypeof error === 'object' &&\n+\t\t'message' in error &&\n+\t\ttypeof error.message === 'string'\n+\t) {\n+\t\treturn error.message\n+\t}\n+\tconsole.error('Unable to get error message for error', error)\n+\treturn 'Unknown Error'\n+}\n+\n+export function cn(...inputs: ClassValue[]) {\n+\treturn twMerge(clsx(inputs))\n+}\n+\n+export function getDomainUrl(request: Request) {\n+\tconst host =\n+\t\trequest.headers.get('X-Forwarded-Host') ??\n+\t\trequest.headers.get('host') ??\n+\t\tnew URL(request.url).host\n+\tconst protocol = request.headers.get('X-Forwarded-Proto') ?? 'http'\n+\treturn `${protocol}://${host}`\n+}\n+\n+export function getReferrerRoute(request: Request) {\n+\t// spelling errors and whatever makes this annoyingly inconsistent\n+\t// in my own testing, `referer` returned the right value, but 🤷‍♂️\n+\tconst referrer =\n+\t\trequest.headers.get('referer') ??\n+\t\trequest.headers.get('referrer') ??\n+\t\trequest.referrer\n+\tconst domain = getDomainUrl(request)\n+\tif (referrer?.startsWith(domain)) {\n+\t\treturn referrer.slice(domain.length)\n+\t} else {\n+\t\treturn '/'\n+\t}\n+}\n+\n+/**\n+ * Merge multiple headers objects into one (uses set so headers are overridden)\n+ */\n+export function mergeHeaders(\n+\t...headers: Array\n+) {\n+\tconst merged = new Headers()\n+\tfor (const header of headers) {\n+\t\tif (!header) continue\n+\t\tfor (const [key, value] of new Headers(header).entries()) {\n+\t\t\tmerged.set(key, value)\n+\t\t}\n+\t}\n+\treturn merged\n+}\n+\n+/**\n+ * Combine multiple header objects into one (uses append so headers are not overridden)\n+ */\n+export function combineHeaders(\n+\t...headers: Array\n+) {\n+\tconst combined = new Headers()\n+\tfor (const header of headers) {\n+\t\tif (!header) continue\n+\t\tfor (const [key, value] of new Headers(header).entries()) {\n+\t\t\tcombined.append(key, value)\n+\t\t}\n+\t}\n+\treturn combined\n+}\n+\n+/**\n+ * Combine multiple response init objects into one (uses combineHeaders)\n+ */\n+export function combineResponseInits(\n+\t...responseInits: Array\n+) {\n+\tlet combined: ResponseInit = {}\n+\tfor (const responseInit of responseInits) {\n+\t\tcombined = {\n+\t\t\t...responseInit,\n+\t\t\theaders: combineHeaders(combined.headers, responseInit?.headers),\n+\t\t}\n+\t}\n+\treturn combined\n+}\n+\n+/**\n+ * Returns true if the current navigation is submitting the current route's\n+ * form. Defaults to the current route's form action and method POST.\n+ *\n+ * Defaults state to 'non-idle'\n+ *\n+ * NOTE: the default formAction will include query params, but the\n+ * navigation.formAction will not, so don't use the default formAction if you\n+ * want to know if a form is submitting without specific query params.\n+ */\n+export function useIsPending({\n+\tformAction,\n+\tformMethod = 'POST',\n+\tstate = 'non-idle',\n+}: {\n+\tformAction?: string\n+\tformMethod?: 'POST' | 'GET' | 'PUT' | 'PATCH' | 'DELETE'\n+\tstate?: 'submitting' | 'loading' | 'non-idle'\n+} = {}) {\n+\tconst contextualFormAction = useFormAction()\n+\tconst navigation = useNavigation()\n+\tconst isPendingState =\n+\t\tstate === 'non-idle'\n+\t\t\t? navigation.state !== 'idle'\n+\t\t\t: navigation.state === state\n+\treturn (\n+\t\tisPendingState &&\n+\t\tnavigation.formAction === (formAction ?? contextualFormAction) &&\n+\t\tnavigation.formMethod === formMethod\n+\t)\n+}\n+\n+/**\n+ * This combines useSpinDelay (from https://npm.im/spin-delay) and useIsPending\n+ * from our own utilities to give you a nice way to show a loading spinner for\n+ * a minimum amount of time, even if the request finishes right after the delay.\n+ *\n+ * This avoids a flash of loading state regardless of how fast or slow the\n+ * request is.\n+ */\n+export function useDelayedIsPending({\n+\tformAction,\n+\tformMethod,\n+\tdelay = 400,\n+\tminDuration = 300,\n+}: Parameters[0] &\n+\tParameters[1] = {}) {\n+\tconst isPending = useIsPending({ formAction, formMethod })\n+\tconst delayedIsPending = useSpinDelay(isPending, {\n+\t\tdelay,\n+\t\tminDuration,\n+\t})\n+\treturn delayedIsPending\n+}\n+\n+function callAll>(\n+\t...fns: Array<((...args: Args) => unknown) | undefined>\n+) {\n+\treturn (...args: Args) => fns.forEach((fn) => fn?.(...args))\n+}\n+\n+/**\n+ * Use this hook with a button and it will make it so the first click sets a\n+ * `doubleCheck` state to true, and the second click will actually trigger the\n+ * `onClick` handler. This allows you to have a button that can be like a\n+ * \"are you sure?\" experience for the user before doing destructive operations.\n+ */\n+export function useDoubleCheck() {\n+\tconst [doubleCheck, setDoubleCheck] = useState(false)\n+\n+\tfunction getButtonProps(\n+\t\tprops?: React.ButtonHTMLAttributes,\n+\t) {\n+\t\tconst onBlur: React.ButtonHTMLAttributes['onBlur'] =\n+\t\t\t() => setDoubleCheck(false)\n+\n+\t\tconst onClick: React.ButtonHTMLAttributes['onClick'] =\n+\t\t\tdoubleCheck\n+\t\t\t\t? undefined\n+\t\t\t\t: (e) => {\n+\t\t\t\t\t\te.preventDefault()\n+\t\t\t\t\t\tsetDoubleCheck(true)\n+\t\t\t\t\t}\n+\n+\t\tconst onKeyUp: React.ButtonHTMLAttributes['onKeyUp'] = (\n+\t\t\te,\n+\t\t) => {\n+\t\t\tif (e.key === 'Escape') {\n+\t\t\t\tsetDoubleCheck(false)\n+\t\t\t}\n+\t\t}\n+\n+\t\treturn {\n+\t\t\t...props,\n+\t\t\tonBlur: callAll(onBlur, props?.onBlur),\n+\t\t\tonClick: callAll(onClick, props?.onClick),\n+\t\t\tonKeyUp: callAll(onKeyUp, props?.onKeyUp),\n+\t\t}\n+\t}\n+\n+\treturn { doubleCheck, getButtonProps }\n+}\n+\n+/**\n+ * Simple debounce implementation\n+ */\n+function debounce) => void>(\n+\tfn: Callback,\n+\tdelay: number,\n+) {\n+\tlet timer: ReturnType | null = null\n+\treturn (...args: Parameters) => {\n+\t\tif (timer) clearTimeout(timer)\n+\t\ttimer = setTimeout(() => {\n+\t\t\tfn(...args)\n+\t\t}, delay)\n+\t}\n+}\n+\n+/**\n+ * Debounce a callback function\n+ */\n+export function useDebounce<\n+\tCallback extends (...args: Parameters) => ReturnType,\n+>(callback: Callback, delay: number) {\n+\tconst callbackRef = useRef(callback)\n+\tuseEffect(() => {\n+\t\tcallbackRef.current = callback\n+\t})\n+\treturn useMemo(\n+\t\t() =>\n+\t\t\tdebounce(\n+\t\t\t\t(...args: Parameters) => callbackRef.current(...args),\n+\t\t\t\tdelay,\n+\t\t\t),\n+\t\t[delay],\n+\t)\n+}\n+\n+export async function downloadFile(url: string, retries: number = 0) {\n+\tconst MAX_RETRIES = 3\n+\ttry {\n+\t\tconst response = await fetch(url)\n+\t\tif (!response.ok) {\n+\t\t\tthrow new Error(`Failed to fetch image with status ${response.status}`)\n+\t\t}\n+\t\tconst contentType = response.headers.get('content-type') ?? 'image/jpg'\n+\t\tconst arrayBuffer = await response.arrayBuffer()\n+\t\tconst file = new File([arrayBuffer], 'downloaded-file', {\n+\t\t\ttype: contentType,\n+\t\t})\n+\t\treturn file\n+\t} catch (e) {\n+\t\tif (retries > MAX_RETRIES) throw e\n+\t\treturn downloadFile(url, retries + 1)\n+\t}\n+}\ndiff --git a/app/utils/misc.use-double-check.test.tsx b/app/utils/misc.use-double-check.test.tsx\nnew file mode 100644\nindex 0000000..4adfa59\n--- /dev/null\n+++ b/app/utils/misc.use-double-check.test.tsx\n@@ -0,0 +1,83 @@\n+/**\n+ * @vitest-environment jsdom\n+ */\n+import { render, screen } from '@testing-library/react'\n+import { userEvent } from '@testing-library/user-event'\n+import { useState } from 'react'\n+import { expect, test } from 'vitest'\n+import { useDoubleCheck } from './misc.tsx'\n+\n+function TestComponent() {\n+\tconst [defaultPrevented, setDefaultPrevented] = useState<\n+\t\t'idle' | 'no' | 'yes'\n+\t>('idle')\n+\tconst dc = useDoubleCheck()\n+\treturn (\n+\t\t

\n+\t\t\tDefault Prevented: {defaultPrevented}\n+\t\t\t\n+\t\t\t\t\t\tsetDefaultPrevented(e.defaultPrevented ? 'yes' : 'no'),\n+\t\t\t\t})}\n+\t\t\t>\n+\t\t\t\t{dc.doubleCheck ? 'You sure?' : 'Click me'}\n+\t\t\t\n+\t\t

\n+\t)\n+}\n+\n+test('prevents default on the first click, and does not on the second', async () => {\n+\tconst user = userEvent.setup()\n+\trender()\n+\n+\tconst status = screen.getByRole('status')\n+\tconst button = screen.getByRole('button')\n+\n+\texpect(status).toHaveTextContent('Default Prevented: idle')\n+\texpect(button).toHaveTextContent('Click me')\n+\n+\tawait user.click(button)\n+\texpect(button).toHaveTextContent('You sure?')\n+\texpect(status).toHaveTextContent('Default Prevented: yes')\n+\n+\tawait user.click(button)\n+\texpect(button).toHaveTextContent('You sure?')\n+\texpect(status).toHaveTextContent('Default Prevented: no')\n+})\n+\n+test('blurring the button starts things over', async () => {\n+\tconst user = userEvent.setup()\n+\trender()\n+\n+\tconst status = screen.getByRole('status')\n+\tconst button = screen.getByRole('button')\n+\n+\tawait user.click(button)\n+\texpect(button).toHaveTextContent('You sure?')\n+\texpect(status).toHaveTextContent('Default Prevented: yes')\n+\n+\tawait user.click(document.body)\n+\t// button goes back to click me\n+\texpect(button).toHaveTextContent('Click me')\n+\t// our callback wasn't called, so the status doesn't change\n+\texpect(status).toHaveTextContent('Default Prevented: yes')\n+})\n+\n+test('hitting \"escape\" on the input starts things over', async () => {\n+\tconst user = userEvent.setup()\n+\trender()\n+\n+\tconst status = screen.getByRole('status')\n+\tconst button = screen.getByRole('button')\n+\n+\tawait user.click(button)\n+\texpect(button).toHaveTextContent('You sure?')\n+\texpect(status).toHaveTextContent('Default Prevented: yes')\n+\n+\tawait user.keyboard('{Escape}')\n+\t// button goes back to click me\n+\texpect(button).toHaveTextContent('Click me')\n+\t// our callback wasn't called, so the status doesn't change\n+\texpect(status).toHaveTextContent('Default Prevented: yes')\n+})\ndiff --git a/app/utils/monitoring.client.tsx b/app/utils/monitoring.client.tsx\nnew file mode 100644\nindex 0000000..f559b6c\n--- /dev/null\n+++ b/app/utils/monitoring.client.tsx\n@@ -0,0 +1,35 @@\n+import * as Sentry from '@sentry/react-router'\n+\n+export function init() {\n+\tSentry.init({\n+\t\tdsn: ENV.SENTRY_DSN,\n+\t\tenvironment: ENV.MODE,\n+\t\tbeforeSend(event) {\n+\t\t\tif (event.request?.url) {\n+\t\t\t\tconst url = new URL(event.request.url)\n+\t\t\t\tif (\n+\t\t\t\t\turl.protocol === 'chrome-extension:' ||\n+\t\t\t\t\turl.protocol === 'moz-extension:'\n+\t\t\t\t) {\n+\t\t\t\t\t// This error is from a browser extension, ignore it\n+\t\t\t\t\treturn null\n+\t\t\t\t}\n+\t\t\t}\n+\t\t\treturn event\n+\t\t},\n+\t\tintegrations: [\n+\t\t\tSentry.replayIntegration(),\n+\t\t\tSentry.browserProfilingIntegration(),\n+\t\t],\n+\n+\t\t// Set tracesSampleRate to 1.0 to capture 100%\n+\t\t// of transactions for performance monitoring.\n+\t\t// We recommend adjusting this value in production\n+\t\ttracesSampleRate: 1.0,\n+\n+\t\t// Capture Replay for 10% of all sessions,\n+\t\t// plus for 100% of sessions with an error\n+\t\treplaysSessionSampleRate: 0.1,\n+\t\treplaysOnErrorSampleRate: 1.0,\n+\t})\n+}\ndiff --git a/app/utils/nonce-provider.ts b/app/utils/nonce-provider.ts\nnew file mode 100644\nindex 0000000..41bb980\n--- /dev/null\n+++ b/app/utils/nonce-provider.ts\n@@ -0,0 +1,5 @@\n+import * as React from 'react'\n+\n+export const NonceContext = React.createContext('')\n+export const NonceProvider = NonceContext.Provider\n+export const useNonce = () => React.useContext(NonceContext)\ndiff --git a/app/utils/permissions.server.ts b/app/utils/permissions.server.ts\nnew file mode 100644\nindex 0000000..1c1d92f\n--- /dev/null\n+++ b/app/utils/permissions.server.ts\n@@ -0,0 +1,60 @@\n+import { data } from 'react-router'\n+import { requireUserId } from './auth.server.ts'\n+import { prisma } from './db.server.ts'\n+import { type PermissionString, parsePermissionString } from './user.ts'\n+\n+export async function requireUserWithPermission(\n+\trequest: Request,\n+\tpermission: PermissionString,\n+) {\n+\tconst userId = await requireUserId(request)\n+\tconst permissionData = parsePermissionString(permission)\n+\tconst user = await prisma.user.findFirst({\n+\t\tselect: { id: true },\n+\t\twhere: {\n+\t\t\tid: userId,\n+\t\t\troles: {\n+\t\t\t\tsome: {\n+\t\t\t\t\tpermissions: {\n+\t\t\t\t\t\tsome: {\n+\t\t\t\t\t\t\t...permissionData,\n+\t\t\t\t\t\t\taccess: permissionData.access\n+\t\t\t\t\t\t\t\t? { in: permissionData.access }\n+\t\t\t\t\t\t\t\t: undefined,\n+\t\t\t\t\t\t},\n+\t\t\t\t\t},\n+\t\t\t\t},\n+\t\t\t},\n+\t\t},\n+\t})\n+\tif (!user) {\n+\t\tthrow data(\n+\t\t\t{\n+\t\t\t\terror: 'Unauthorized',\n+\t\t\t\trequiredPermission: permissionData,\n+\t\t\t\tmessage: `Unauthorized: required permissions: ${permission}`,\n+\t\t\t},\n+\t\t\t{ status: 403 },\n+\t\t)\n+\t}\n+\treturn user.id\n+}\n+\n+export async function requireUserWithRole(request: Request, name: string) {\n+\tconst userId = await requireUserId(request)\n+\tconst user = await prisma.user.findFirst({\n+\t\tselect: { id: true },\n+\t\twhere: { id: userId, roles: { some: { name } } },\n+\t})\n+\tif (!user) {\n+\t\tthrow data(\n+\t\t\t{\n+\t\t\t\terror: 'Unauthorized',\n+\t\t\t\trequiredRole: name,\n+\t\t\t\tmessage: `Unauthorized: required role: ${name}`,\n+\t\t\t},\n+\t\t\t{ status: 403 },\n+\t\t)\n+\t}\n+\treturn user.id\n+}\ndiff --git a/app/utils/providers/constants.ts b/app/utils/providers/constants.ts\nnew file mode 100644\nindex 0000000..b8737a0\n--- /dev/null\n+++ b/app/utils/providers/constants.ts\n@@ -0,0 +1,3 @@\n+export const MOCK_CODE_GITHUB = 'MOCK_CODE_GITHUB_KODY'\n+\n+export const MOCK_CODE_GITHUB_HEADER = 'x-mock-code-github'\ndiff --git a/app/utils/providers/github.server.ts b/app/utils/providers/github.server.ts\nnew file mode 100644\nindex 0000000..1d2cf38\n--- /dev/null\n+++ b/app/utils/providers/github.server.ts\n@@ -0,0 +1,158 @@\n+import { SetCookie } from '@mjackson/headers'\n+import { createId as cuid } from '@paralleldrive/cuid2'\n+import { redirect } from 'react-router'\n+import { GitHubStrategy } from 'remix-auth-github'\n+import { z } from 'zod'\n+import { cache, cachified } from '../cache.server.ts'\n+import { type Timings } from '../timing.server.ts'\n+import { MOCK_CODE_GITHUB_HEADER, MOCK_CODE_GITHUB } from './constants.ts'\n+import { type AuthProvider } from './provider.ts'\n+\n+const GitHubUserSchema = z.object({ login: z.string() })\n+const GitHubUserParseResult = z\n+\t.object({\n+\t\tsuccess: z.literal(true),\n+\t\tdata: GitHubUserSchema,\n+\t})\n+\t.or(\n+\t\tz.object({\n+\t\t\tsuccess: z.literal(false),\n+\t\t}),\n+\t)\n+\n+const shouldMock =\n+\tprocess.env.GITHUB_CLIENT_ID?.startsWith('MOCK_') ||\n+\tprocess.env.NODE_ENV === 'test'\n+\n+const GitHubEmailSchema = z.object({\n+\temail: z.string(),\n+\tverified: z.boolean(),\n+\tprimary: z.boolean(),\n+\tvisibility: z.string().nullable(),\n+})\n+\n+const GitHubEmailsResponseSchema = z.array(GitHubEmailSchema)\n+\n+const GitHubUserResponseSchema = z.object({\n+\tlogin: z.string(),\n+\tid: z.number().or(z.string()),\n+\tname: z.string().optional(),\n+\tavatar_url: z.string().optional(),\n+})\n+\n+export class GitHubProvider implements AuthProvider {\n+\tgetAuthStrategy() {\n+\t\tif (\n+\t\t\t!process.env.GITHUB_CLIENT_ID ||\n+\t\t\t!process.env.GITHUB_CLIENT_SECRET ||\n+\t\t\t!process.env.GITHUB_REDIRECT_URI\n+\t\t) {\n+\t\t\tconsole.log(\n+\t\t\t\t'GitHub OAuth strategy not available because environment variables are not set',\n+\t\t\t)\n+\t\t\treturn null\n+\t\t}\n+\t\treturn new GitHubStrategy(\n+\t\t\t{\n+\t\t\t\tclientId: process.env.GITHUB_CLIENT_ID,\n+\t\t\t\tclientSecret: process.env.GITHUB_CLIENT_SECRET,\n+\t\t\t\tredirectURI: process.env.GITHUB_REDIRECT_URI,\n+\t\t\t},\n+\t\t\tasync ({ tokens }) => {\n+\t\t\t\t// we need to fetch the user and the emails separately, this is a change in remix-auth-github\n+\t\t\t\t// from the previous version that supported fetching both in one call\n+\t\t\t\tconst userResponse = await fetch('https://api.github.com/user', {\n+\t\t\t\t\theaders: {\n+\t\t\t\t\t\tAccept: 'application/vnd.github+json',\n+\t\t\t\t\t\tAuthorization: `Bearer ${tokens.accessToken()}`,\n+\t\t\t\t\t\t'X-GitHub-Api-Version': '2022-11-28',\n+\t\t\t\t\t},\n+\t\t\t\t})\n+\t\t\t\tconst rawUser = await userResponse.json()\n+\t\t\t\tconst user = GitHubUserResponseSchema.parse(rawUser)\n+\n+\t\t\t\tconst emailsResponse = await fetch(\n+\t\t\t\t\t'https://api.github.com/user/emails',\n+\t\t\t\t\t{\n+\t\t\t\t\t\theaders: {\n+\t\t\t\t\t\t\tAccept: 'application/vnd.github+json',\n+\t\t\t\t\t\t\tAuthorization: `Bearer ${tokens.accessToken()}`,\n+\t\t\t\t\t\t\t'X-GitHub-Api-Version': '2022-11-28',\n+\t\t\t\t\t\t},\n+\t\t\t\t\t},\n+\t\t\t\t)\n+\t\t\t\tconst rawEmails = await emailsResponse.json()\n+\t\t\t\tconst emails = GitHubEmailsResponseSchema.parse(rawEmails)\n+\t\t\t\tconst email = emails.find((e) => e.primary)?.email\n+\t\t\t\tif (!email) {\n+\t\t\t\t\tthrow new Error('Email not found')\n+\t\t\t\t}\n+\n+\t\t\t\treturn {\n+\t\t\t\t\tid: user.id,\n+\t\t\t\t\temail,\n+\t\t\t\t\tname: user.name,\n+\t\t\t\t\tusername: user.login,\n+\t\t\t\t\timageUrl: user.avatar_url,\n+\t\t\t\t}\n+\t\t\t},\n+\t\t)\n+\t}\n+\n+\tasync resolveConnectionData(\n+\t\tproviderId: string,\n+\t\t{ timings }: { timings?: Timings } = {},\n+\t) {\n+\t\tconst result = await cachified({\n+\t\t\tkey: `connection-data:github:${providerId}`,\n+\t\t\tcache,\n+\t\t\ttimings,\n+\t\t\tttl: 1000 * 60,\n+\t\t\tswr: 1000 * 60 * 60 * 24 * 7,\n+\t\t\tasync getFreshValue(context) {\n+\t\t\t\tconst response = await fetch(\n+\t\t\t\t\t`https://api.github.com/user/${providerId}`,\n+\t\t\t\t\t{ headers: { Authorization: `token ${process.env.GITHUB_TOKEN}` } },\n+\t\t\t\t)\n+\t\t\t\tconst rawJson = await response.json()\n+\t\t\t\tconst result = GitHubUserSchema.safeParse(rawJson)\n+\t\t\t\tif (!result.success) {\n+\t\t\t\t\t// if it was unsuccessful, then we should kick it out of the cache\n+\t\t\t\t\t// asap and try again.\n+\t\t\t\t\tcontext.metadata.ttl = 0\n+\t\t\t\t}\n+\t\t\t\treturn result\n+\t\t\t},\n+\t\t\tcheckValue: GitHubUserParseResult,\n+\t\t})\n+\t\treturn {\n+\t\t\tdisplayName: result.success ? result.data.login : 'Unknown',\n+\t\t\tlink: result.success ? `https://github.com/${result.data.login}` : null,\n+\t\t} as const\n+\t}\n+\n+\tasync handleMockAction(request: Request) {\n+\t\tif (!shouldMock) return\n+\n+\t\tconst state = cuid()\n+\t\t// allows us to inject a code when running e2e tests,\n+\t\t// but falls back to a pre-defined 🐨 constant\n+\t\tconst code =\n+\t\t\trequest.headers.get(MOCK_CODE_GITHUB_HEADER) || MOCK_CODE_GITHUB\n+\t\tconst searchParams = new URLSearchParams({ code, state })\n+\t\tlet cookie = new SetCookie({\n+\t\t\tname: 'github',\n+\t\t\tvalue: searchParams.toString(),\n+\t\t\tpath: '/',\n+\t\t\tsameSite: 'Lax',\n+\t\t\thttpOnly: true,\n+\t\t\tmaxAge: 60 * 10,\n+\t\t\tsecure: process.env.NODE_ENV === 'production' || undefined,\n+\t\t})\n+\t\tthrow redirect(`/auth/github/callback?${searchParams}`, {\n+\t\t\theaders: {\n+\t\t\t\t'Set-Cookie': cookie.toString(),\n+\t\t\t},\n+\t\t})\n+\t}\n+}\ndiff --git a/app/utils/providers/provider.ts b/app/utils/providers/provider.ts\nnew file mode 100644\nindex 0000000..84b455a\n--- /dev/null\n+++ b/app/utils/providers/provider.ts\n@@ -0,0 +1,28 @@\n+import { type Strategy } from 'remix-auth/strategy'\n+import { type Timings } from '../timing.server.ts'\n+\n+// Define a user type for cleaner typing\n+export type ProviderUser = {\n+\tid: string | number\n+\temail: string\n+\tusername?: string\n+\tname?: string\n+\timageUrl?: string\n+}\n+\n+export interface AuthProvider {\n+\tgetAuthStrategy(): Strategy | null\n+\thandleMockAction(request: Request): Promise\n+\tresolveConnectionData(\n+\t\tproviderId: string,\n+\t\toptions?: { timings?: Timings },\n+\t): Promise<{\n+\t\tdisplayName: string\n+\t\tlink?: string | null\n+\t}>\n+}\n+\n+export const normalizeEmail = (s: string) => s.toLowerCase()\n+\n+export const normalizeUsername = (s: string) =>\n+\ts.replace(/[^a-zA-Z0-9_]/g, '_').toLowerCase()\ndiff --git a/app/utils/redirect-cookie.server.ts b/app/utils/redirect-cookie.server.ts\nnew file mode 100644\nindex 0000000..0008537\n--- /dev/null\n+++ b/app/utils/redirect-cookie.server.ts\n@@ -0,0 +1,17 @@\n+import * as cookie from 'cookie'\n+\n+const key = 'redirectTo'\n+export const destroyRedirectToHeader = cookie.serialize(key, '', { maxAge: -1 })\n+\n+export function getRedirectCookieHeader(redirectTo?: string) {\n+\treturn redirectTo && redirectTo !== '/'\n+\t\t? cookie.serialize(key, redirectTo, { maxAge: 60 * 10 })\n+\t\t: null\n+}\n+\n+export function getRedirectCookieValue(request: Request) {\n+\tconst rawCookie = request.headers.get('cookie')\n+\tconst parsedCookies = rawCookie ? cookie.parse(rawCookie) : {}\n+\tconst redirectTo = parsedCookies[key]\n+\treturn redirectTo || null\n+}\ndiff --git a/app/utils/request-info.ts b/app/utils/request-info.ts\nnew file mode 100644\nindex 0000000..ec4236c\n--- /dev/null\n+++ b/app/utils/request-info.ts\n@@ -0,0 +1,19 @@\n+import { invariant } from '@epic-web/invariant'\n+import { useRouteLoaderData } from 'react-router'\n+import { type loader as rootLoader } from '#app/root.tsx'\n+\n+/**\n+ * @returns the request info from the root loader (throws an error if it does not exist)\n+ */\n+export function useRequestInfo() {\n+\tconst maybeRequestInfo = useOptionalRequestInfo()\n+\tinvariant(maybeRequestInfo, 'No requestInfo found in root loader')\n+\n+\treturn maybeRequestInfo\n+}\n+\n+export function useOptionalRequestInfo() {\n+\tconst data = useRouteLoaderData('root')\n+\n+\treturn data?.requestInfo\n+}\ndiff --git a/app/utils/session.server.ts b/app/utils/session.server.ts\nnew file mode 100644\nindex 0000000..5d9fd32\n--- /dev/null\n+++ b/app/utils/session.server.ts\n@@ -0,0 +1,38 @@\n+import { createCookieSessionStorage } from 'react-router'\n+\n+export const authSessionStorage = createCookieSessionStorage({\n+\tcookie: {\n+\t\tname: 'en_session',\n+\t\tsameSite: 'lax', // CSRF protection is advised if changing to 'none'\n+\t\tpath: '/',\n+\t\thttpOnly: true,\n+\t\tsecrets: process.env.SESSION_SECRET.split(','),\n+\t\tsecure: process.env.NODE_ENV === 'production',\n+\t},\n+})\n+\n+// we have to do this because every time you commit the session you overwrite it\n+// so we store the expiration time in the cookie and reset it every time we commit\n+const originalCommitSession = authSessionStorage.commitSession\n+\n+Object.defineProperty(authSessionStorage, 'commitSession', {\n+\tvalue: async function commitSession(\n+\t\t...args: Parameters\n+\t) {\n+\t\tconst [session, options] = args\n+\t\tif (options?.expires) {\n+\t\t\tsession.set('expires', options.expires)\n+\t\t}\n+\t\tif (options?.maxAge) {\n+\t\t\tsession.set('expires', new Date(Date.now() + options.maxAge * 1000))\n+\t\t}\n+\t\tconst expires = session.has('expires')\n+\t\t\t? new Date(session.get('expires'))\n+\t\t\t: undefined\n+\t\tconst setCookieHeader = await originalCommitSession(session, {\n+\t\t\t...options,\n+\t\t\texpires,\n+\t\t})\n+\t\treturn setCookieHeader\n+\t},\n+})\ndiff --git a/app/utils/storage.server.ts b/app/utils/storage.server.ts\nnew file mode 100644\nindex 0000000..2fd7360\n--- /dev/null\n+++ b/app/utils/storage.server.ts\n@@ -0,0 +1,179 @@\n+import { createHash, createHmac } from 'crypto'\n+import { type FileUpload } from '@mjackson/form-data-parser'\n+import { createId } from '@paralleldrive/cuid2'\n+\n+const STORAGE_ENDPOINT = process.env.AWS_ENDPOINT_URL_S3\n+const STORAGE_BUCKET = process.env.BUCKET_NAME\n+const STORAGE_ACCESS_KEY = process.env.AWS_ACCESS_KEY_ID\n+const STORAGE_SECRET_KEY = process.env.AWS_SECRET_ACCESS_KEY\n+const STORAGE_REGION = process.env.AWS_REGION\n+\n+async function uploadToStorage(file: File | FileUpload, key: string) {\n+\tconst { url, headers } = getSignedPutRequestInfo(file, key)\n+\n+\tconst uploadResponse = await fetch(url, {\n+\t\tmethod: 'PUT',\n+\t\theaders,\n+\t\tbody: file instanceof File ? file : file.stream(),\n+\t})\n+\n+\tif (!uploadResponse.ok) {\n+\t\tconst errorMessage = `Failed to upload file to storage. Server responded with ${uploadResponse.status}: ${uploadResponse.statusText}`\n+\t\tconsole.error(errorMessage)\n+\t\tthrow new Error(`Failed to upload object: ${key}`)\n+\t}\n+\n+\treturn key\n+}\n+\n+export async function uploadProfileImage(\n+\tuserId: string,\n+\tfile: File | FileUpload,\n+) {\n+\tconst fileId = createId()\n+\tconst fileExtension = file.name.split('.').pop() || ''\n+\tconst timestamp = Date.now()\n+\tconst key = `users/${userId}/profile-images/${timestamp}-${fileId}.${fileExtension}`\n+\treturn uploadToStorage(file, key)\n+}\n+\n+export async function uploadNoteImage(\n+\tuserId: string,\n+\tnoteId: string,\n+\tfile: File | FileUpload,\n+) {\n+\tconst fileId = createId()\n+\tconst fileExtension = file.name.split('.').pop() || ''\n+\tconst timestamp = Date.now()\n+\tconst key = `users/${userId}/notes/${noteId}/images/${timestamp}-${fileId}.${fileExtension}`\n+\treturn uploadToStorage(file, key)\n+}\n+\n+function hmacSha256(key: string | Buffer, message: string) {\n+\tconst hmac = createHmac('sha256', key)\n+\thmac.update(message)\n+\treturn hmac.digest()\n+}\n+\n+function sha256(message: string) {\n+\tconst hash = createHash('sha256')\n+\thash.update(message)\n+\treturn hash.digest('hex')\n+}\n+\n+function getSignatureKey(\n+\tkey: string,\n+\tdateStamp: string,\n+\tregionName: string,\n+\tserviceName: string,\n+) {\n+\tconst kDate = hmacSha256(`AWS4${key}`, dateStamp)\n+\tconst kRegion = hmacSha256(kDate, regionName)\n+\tconst kService = hmacSha256(kRegion, serviceName)\n+\tconst kSigning = hmacSha256(kService, 'aws4_request')\n+\treturn kSigning\n+}\n+\n+function getBaseSignedRequestInfo({\n+\tmethod,\n+\tkey,\n+\tcontentType,\n+\tuploadDate,\n+}: {\n+\tmethod: 'GET' | 'PUT'\n+\tkey: string\n+\tcontentType?: string\n+\tuploadDate?: string\n+}) {\n+\tconst url = `${STORAGE_ENDPOINT}/${STORAGE_BUCKET}/${key}`\n+\tconst endpoint = new URL(url)\n+\n+\t// Prepare date strings\n+\tconst amzDate = new Date().toISOString().replace(/[:-]|\\.\\d{3}/g, '')\n+\tconst dateStamp = amzDate.slice(0, 8)\n+\n+\t// Build headers array conditionally\n+\tconst headers = [\n+\t\t...(contentType ? [`content-type:${contentType}`] : []),\n+\t\t`host:${endpoint.host}`,\n+\t\t`x-amz-content-sha256:UNSIGNED-PAYLOAD`,\n+\t\t`x-amz-date:${amzDate}`,\n+\t\t...(uploadDate ? [`x-amz-meta-upload-date:${uploadDate}`] : []),\n+\t]\n+\n+\tconst canonicalHeaders = headers.join('\\n') + '\\n'\n+\tconst signedHeaders = headers.map((h) => h.split(':')[0]).join(';')\n+\n+\tconst canonicalRequest = [\n+\t\tmethod,\n+\t\t`/${STORAGE_BUCKET}/${key}`,\n+\t\t'', // canonicalQueryString\n+\t\tcanonicalHeaders,\n+\t\tsignedHeaders,\n+\t\t'UNSIGNED-PAYLOAD',\n+\t].join('\\n')\n+\n+\t// Prepare string to sign\n+\tconst algorithm = 'AWS4-HMAC-SHA256'\n+\tconst credentialScope = `${dateStamp}/${STORAGE_REGION}/s3/aws4_request`\n+\tconst stringToSign = [\n+\t\talgorithm,\n+\t\tamzDate,\n+\t\tcredentialScope,\n+\t\tsha256(canonicalRequest),\n+\t].join('\\n')\n+\n+\t// Calculate signature\n+\tconst signingKey = getSignatureKey(\n+\t\tSTORAGE_SECRET_KEY,\n+\t\tdateStamp,\n+\t\tSTORAGE_REGION,\n+\t\t's3',\n+\t)\n+\tconst signature = createHmac('sha256', signingKey)\n+\t\t.update(stringToSign)\n+\t\t.digest('hex')\n+\n+\tconst baseHeaders = {\n+\t\t'X-Amz-Date': amzDate,\n+\t\t'X-Amz-Content-SHA256': 'UNSIGNED-PAYLOAD',\n+\t\tAuthorization: [\n+\t\t\t`${algorithm} Credential=${STORAGE_ACCESS_KEY}/${credentialScope}`,\n+\t\t\t`SignedHeaders=${signedHeaders}`,\n+\t\t\t`Signature=${signature}`,\n+\t\t].join(', '),\n+\t}\n+\n+\treturn { url, baseHeaders }\n+}\n+\n+function getSignedPutRequestInfo(file: File | FileUpload, key: string) {\n+\tconst uploadDate = new Date().toISOString()\n+\tconst { url, baseHeaders } = getBaseSignedRequestInfo({\n+\t\tmethod: 'PUT',\n+\t\tkey,\n+\t\tcontentType: file.type,\n+\t\tuploadDate,\n+\t})\n+\n+\treturn {\n+\t\turl,\n+\t\theaders: {\n+\t\t\t...baseHeaders,\n+\t\t\t'Content-Type': file.type,\n+\t\t\t'X-Amz-Meta-Upload-Date': uploadDate,\n+\t\t},\n+\t}\n+}\n+\n+export function getSignedGetRequestInfo(key: string) {\n+\tconst { url, baseHeaders } = getBaseSignedRequestInfo({\n+\t\tmethod: 'GET',\n+\t\tkey,\n+\t})\n+\n+\treturn {\n+\t\turl,\n+\t\theaders: baseHeaders,\n+\t}\n+}\ndiff --git a/app/utils/theme.server.ts b/app/utils/theme.server.ts\nnew file mode 100644\nindex 0000000..1d60cbc\n--- /dev/null\n+++ b/app/utils/theme.server.ts\n@@ -0,0 +1,19 @@\n+import * as cookie from 'cookie'\n+\n+const cookieName = 'en_theme'\n+export type Theme = 'light' | 'dark'\n+\n+export function getTheme(request: Request): Theme | null {\n+\tconst cookieHeader = request.headers.get('cookie')\n+\tconst parsed = cookieHeader ? cookie.parse(cookieHeader)[cookieName] : 'light'\n+\tif (parsed === 'light' || parsed === 'dark') return parsed\n+\treturn null\n+}\n+\n+export function setTheme(theme: Theme | 'system') {\n+\tif (theme === 'system') {\n+\t\treturn cookie.serialize(cookieName, '', { path: '/', maxAge: -1 })\n+\t} else {\n+\t\treturn cookie.serialize(cookieName, theme, { path: '/', maxAge: 31536000 })\n+\t}\n+}\ndiff --git a/app/utils/timing.server.ts b/app/utils/timing.server.ts\nnew file mode 100644\nindex 0000000..3904647\n--- /dev/null\n+++ b/app/utils/timing.server.ts\n@@ -0,0 +1,121 @@\n+import { type CreateReporter } from '@epic-web/cachified'\n+\n+export type Timings = Record<\n+\tstring,\n+\tArray<\n+\t\t{ desc?: string } & (\n+\t\t\t| { time: number; start?: never }\n+\t\t\t| { time?: never; start: number }\n+\t\t)\n+\t>\n+>\n+\n+export function makeTimings(type: string, desc?: string) {\n+\tconst timings: Timings = {\n+\t\t[type]: [{ desc, start: performance.now() }],\n+\t}\n+\tObject.defineProperty(timings, 'toString', {\n+\t\tvalue: function () {\n+\t\t\treturn getServerTimeHeader(timings)\n+\t\t},\n+\t\tenumerable: false,\n+\t})\n+\treturn timings\n+}\n+\n+function createTimer(type: string, desc?: string) {\n+\tconst start = performance.now()\n+\treturn {\n+\t\tend(timings: Timings) {\n+\t\t\tlet timingType = timings[type]\n+\n+\t\t\tif (!timingType) {\n+\t\t\t\ttimingType = timings[type] = []\n+\t\t\t}\n+\t\t\ttimingType.push({ desc, time: performance.now() - start })\n+\t\t},\n+\t}\n+}\n+\n+export async function time(\n+\tfn: Promise | (() => ReturnType | Promise),\n+\t{\n+\t\ttype,\n+\t\tdesc,\n+\t\ttimings,\n+\t}: {\n+\t\ttype: string\n+\t\tdesc?: string\n+\t\ttimings?: Timings\n+\t},\n+): Promise {\n+\tconst timer = createTimer(type, desc)\n+\tconst promise = typeof fn === 'function' ? fn() : fn\n+\tif (!timings) return promise\n+\n+\tconst result = await promise\n+\n+\ttimer.end(timings)\n+\treturn result\n+}\n+\n+export function getServerTimeHeader(timings?: Timings) {\n+\tif (!timings) return ''\n+\treturn Object.entries(timings)\n+\t\t.map(([key, timingInfos]) => {\n+\t\t\tconst dur = timingInfos\n+\t\t\t\t.reduce((acc, timingInfo) => {\n+\t\t\t\t\tconst time = timingInfo.time ?? performance.now() - timingInfo.start\n+\t\t\t\t\treturn acc + time\n+\t\t\t\t}, 0)\n+\t\t\t\t.toFixed(1)\n+\t\t\tconst desc = timingInfos\n+\t\t\t\t.map((t) => t.desc)\n+\t\t\t\t.filter(Boolean)\n+\t\t\t\t.join(' & ')\n+\t\t\treturn [\n+\t\t\t\tkey.replaceAll(/(:| |@|=|;|,|\\/|\\\\)/g, '_'),\n+\t\t\t\tdesc ? `desc=${JSON.stringify(desc)}` : null,\n+\t\t\t\t`dur=${dur}`,\n+\t\t\t]\n+\t\t\t\t.filter(Boolean)\n+\t\t\t\t.join(';')\n+\t\t})\n+\t\t.join(',')\n+}\n+\n+export function combineServerTimings(headers1: Headers, headers2: Headers) {\n+\tconst newHeaders = new Headers(headers1)\n+\tnewHeaders.append('Server-Timing', headers2.get('Server-Timing') ?? '')\n+\treturn newHeaders.get('Server-Timing') ?? ''\n+}\n+\n+export function cachifiedTimingReporter(\n+\ttimings?: Timings,\n+): undefined | CreateReporter {\n+\tif (!timings) return\n+\n+\treturn ({ key }) => {\n+\t\tconst cacheRetrievalTimer = createTimer(\n+\t\t\t`cache:${key}`,\n+\t\t\t`${key} cache retrieval`,\n+\t\t)\n+\t\tlet getFreshValueTimer: ReturnType | undefined\n+\t\treturn (event) => {\n+\t\t\tswitch (event.name) {\n+\t\t\t\tcase 'getFreshValueStart':\n+\t\t\t\t\tgetFreshValueTimer = createTimer(\n+\t\t\t\t\t\t`getFreshValue:${key}`,\n+\t\t\t\t\t\t`request forced to wait for a fresh ${key} value`,\n+\t\t\t\t\t)\n+\t\t\t\t\tbreak\n+\t\t\t\tcase 'getFreshValueSuccess':\n+\t\t\t\t\tgetFreshValueTimer?.end(timings)\n+\t\t\t\t\tbreak\n+\t\t\t\tcase 'done':\n+\t\t\t\t\tcacheRetrievalTimer.end(timings)\n+\t\t\t\t\tbreak\n+\t\t\t}\n+\t\t}\n+\t}\n+}\ndiff --git a/app/utils/toast.server.ts b/app/utils/toast.server.ts\nnew file mode 100644\nindex 0000000..b46fefa\n--- /dev/null\n+++ b/app/utils/toast.server.ts\n@@ -0,0 +1,62 @@\n+import { createId as cuid } from '@paralleldrive/cuid2'\n+import { createCookieSessionStorage, redirect } from 'react-router'\n+import { z } from 'zod'\n+import { combineHeaders } from './misc.tsx'\n+\n+export const toastKey = 'toast'\n+\n+const ToastSchema = z.object({\n+\tdescription: z.string(),\n+\tid: z.string().default(() => cuid()),\n+\ttitle: z.string().optional(),\n+\ttype: z.enum(['message', 'success', 'error']).default('message'),\n+})\n+\n+export type Toast = z.infer\n+export type ToastInput = z.input\n+\n+export const toastSessionStorage = createCookieSessionStorage({\n+\tcookie: {\n+\t\tname: 'en_toast',\n+\t\tsameSite: 'lax',\n+\t\tpath: '/',\n+\t\thttpOnly: true,\n+\t\tsecrets: process.env.SESSION_SECRET.split(','),\n+\t\tsecure: process.env.NODE_ENV === 'production',\n+\t},\n+})\n+\n+export async function redirectWithToast(\n+\turl: string,\n+\ttoast: ToastInput,\n+\tinit?: ResponseInit,\n+) {\n+\treturn redirect(url, {\n+\t\t...init,\n+\t\theaders: combineHeaders(init?.headers, await createToastHeaders(toast)),\n+\t})\n+}\n+\n+export async function createToastHeaders(toastInput: ToastInput) {\n+\tconst session = await toastSessionStorage.getSession()\n+\tconst toast = ToastSchema.parse(toastInput)\n+\tsession.flash(toastKey, toast)\n+\tconst cookie = await toastSessionStorage.commitSession(session)\n+\treturn new Headers({ 'set-cookie': cookie })\n+}\n+\n+export async function getToast(request: Request) {\n+\tconst session = await toastSessionStorage.getSession(\n+\t\trequest.headers.get('cookie'),\n+\t)\n+\tconst result = ToastSchema.safeParse(session.get(toastKey))\n+\tconst toast = result.success ? result.data : null\n+\treturn {\n+\t\ttoast,\n+\t\theaders: toast\n+\t\t\t? new Headers({\n+\t\t\t\t\t'set-cookie': await toastSessionStorage.destroySession(session),\n+\t\t\t\t})\n+\t\t\t: null,\n+\t}\n+}\ndiff --git a/app/utils/totp.server.ts b/app/utils/totp.server.ts\nnew file mode 100644\nindex 0000000..bc5ff26\n--- /dev/null\n+++ b/app/utils/totp.server.ts\n@@ -0,0 +1,3 @@\n+// @epic-web/totp should be used server-side only. It imports `Crypto` which results in Remix\n+// including a big polyfill. So we put the import in a `.server.ts` file to avoid that\n+export * from '@epic-web/totp'\ndiff --git a/app/utils/user-validation.ts b/app/utils/user-validation.ts\nnew file mode 100644\nindex 0000000..3a2a775\n--- /dev/null\n+++ b/app/utils/user-validation.ts\n@@ -0,0 +1,48 @@\n+import { z } from 'zod'\n+\n+export const USERNAME_MIN_LENGTH = 3\n+export const USERNAME_MAX_LENGTH = 20\n+\n+export const UsernameSchema = z\n+\t.string({ required_error: 'Username is required' })\n+\t.min(USERNAME_MIN_LENGTH, { message: 'Username is too short' })\n+\t.max(USERNAME_MAX_LENGTH, { message: 'Username is too long' })\n+\t.regex(/^[a-zA-Z0-9_]+$/, {\n+\t\tmessage: 'Username can only include letters, numbers, and underscores',\n+\t})\n+\t// users can type the username in any case, but we store it in lowercase\n+\t.transform((value) => value.toLowerCase())\n+\n+export const PasswordSchema = z\n+\t.string({ required_error: 'Password is required' })\n+\t.min(6, { message: 'Password is too short' })\n+\t// NOTE: bcrypt has a limit of 72 bytes (which should be plenty long)\n+\t// https://github.com/epicweb-dev/epic-stack/issues/918\n+\t.refine((val) => new TextEncoder().encode(val).length <= 72, {\n+\t\tmessage: 'Password is too long',\n+\t})\n+\n+export const NameSchema = z\n+\t.string({ required_error: 'Name is required' })\n+\t.min(3, { message: 'Name is too short' })\n+\t.max(40, { message: 'Name is too long' })\n+\n+export const EmailSchema = z\n+\t.string({ required_error: 'Email is required' })\n+\t.email({ message: 'Email is invalid' })\n+\t.min(3, { message: 'Email is too short' })\n+\t.max(100, { message: 'Email is too long' })\n+\t// users can type the email in any case, but we store it in lowercase\n+\t.transform((value) => value.toLowerCase())\n+\n+export const PasswordAndConfirmPasswordSchema = z\n+\t.object({ password: PasswordSchema, confirmPassword: PasswordSchema })\n+\t.superRefine(({ confirmPassword, password }, ctx) => {\n+\t\tif (confirmPassword !== password) {\n+\t\t\tctx.addIssue({\n+\t\t\t\tpath: ['confirmPassword'],\n+\t\t\t\tcode: 'custom',\n+\t\t\t\tmessage: 'The passwords must match',\n+\t\t\t})\n+\t\t}\n+\t})\ndiff --git a/app/utils/user.ts b/app/utils/user.ts\nnew file mode 100644\nindex 0000000..30534b9\n--- /dev/null\n+++ b/app/utils/user.ts\n@@ -0,0 +1,70 @@\n+import { useRouteLoaderData } from 'react-router'\n+import { type loader as rootLoader } from '#app/root.tsx'\n+\n+function isUser(\n+\tuser: any,\n+): user is Awaited>['data']['user'] {\n+\treturn user && typeof user === 'object' && typeof user.id === 'string'\n+}\n+\n+export function useOptionalUser() {\n+\tconst data = useRouteLoaderData('root')\n+\tif (!data || !isUser(data.user)) {\n+\t\treturn undefined\n+\t}\n+\treturn data.user\n+}\n+\n+export function useUser() {\n+\tconst maybeUser = useOptionalUser()\n+\tif (!maybeUser) {\n+\t\tthrow new Error(\n+\t\t\t'No user found in root loader, but user is required by useUser. If user is optional, try useOptionalUser instead.',\n+\t\t)\n+\t}\n+\treturn maybeUser\n+}\n+\n+type Action = 'create' | 'read' | 'update' | 'delete'\n+type Entity = 'user' | 'note'\n+type Access = 'own' | 'any' | 'own,any' | 'any,own'\n+export type PermissionString =\n+\t| `${Action}:${Entity}`\n+\t| `${Action}:${Entity}:${Access}`\n+\n+export function parsePermissionString(permissionString: PermissionString) {\n+\tconst [action, entity, access] = permissionString.split(':') as [\n+\t\tAction,\n+\t\tEntity,\n+\t\tAccess | undefined,\n+\t]\n+\treturn {\n+\t\taction,\n+\t\tentity,\n+\t\taccess: access ? (access.split(',') as Array) : undefined,\n+\t}\n+}\n+\n+export function userHasPermission(\n+\tuser: Pick, 'roles'> | null | undefined,\n+\tpermission: PermissionString,\n+) {\n+\tif (!user) return false\n+\tconst { action, entity, access } = parsePermissionString(permission)\n+\treturn user.roles.some((role) =>\n+\t\trole.permissions.some(\n+\t\t\t(permission) =>\n+\t\t\t\tpermission.entity === entity &&\n+\t\t\t\tpermission.action === action &&\n+\t\t\t\t(!access || access.includes(permission.access)),\n+\t\t),\n+\t)\n+}\n+\n+export function userHasRole(\n+\tuser: Pick, 'roles'> | null,\n+\trole: string,\n+) {\n+\tif (!user) return false\n+\treturn user.roles.some((r) => r.name === role)\n+}\ndiff --git a/app/utils/verification.server.ts b/app/utils/verification.server.ts\nnew file mode 100644\nindex 0000000..1099f7c\n--- /dev/null\n+++ b/app/utils/verification.server.ts\n@@ -0,0 +1,13 @@\n+import { createCookieSessionStorage } from 'react-router'\n+\n+export const verifySessionStorage = createCookieSessionStorage({\n+\tcookie: {\n+\t\tname: 'en_verification',\n+\t\tsameSite: 'lax', // CSRF protection is advised if changing to 'none'\n+\t\tpath: '/',\n+\t\thttpOnly: true,\n+\t\tmaxAge: 60 * 10, // 10 minutes\n+\t\tsecrets: process.env.SESSION_SECRET.split(','),\n+\t\tsecure: process.env.NODE_ENV === 'production',\n+\t},\n+})\ndiff --git a/components.json b/components.json\nnew file mode 100644\nindex 0000000..37688f9\n--- /dev/null\n+++ b/components.json\n@@ -0,0 +1,18 @@\n+{\n+\t\"$schema\": \"https://ui.shadcn.com/schema.json\",\n+\t\"style\": \"default\",\n+\t\"rsc\": false,\n+\t\"tsx\": true,\n+\t\"tailwind\": {\n+\t\t\"config\": \"\",\n+\t\t\"css\": \"app/styles/tailwind.css\",\n+\t\t\"baseColor\": \"slate\",\n+\t\t\"cssVariables\": true\n+\t},\n+\t\"aliases\": {\n+\t\t\"components\": \"#app/components\",\n+\t\t\"utils\": \"#app/utils/misc\",\n+\t\t\"ui\": \"#app/components/ui\",\n+\t\t\"lib\": \"#app/utils\"\n+\t}\n+}\ndiff --git a/eslint.config.js b/eslint.config.js\nnew file mode 100644\nindex 0000000..eede0cf\n--- /dev/null\n+++ b/eslint.config.js\n@@ -0,0 +1,14 @@\n+import { default as defaultConfig } from '@epic-web/config/eslint'\n+\n+/** @type {import(\"eslint\").Linter.Config} */\n+export default [\n+\t...defaultConfig,\n+\t// add custom config objects here:\n+\t{\n+\t\tfiles: ['**/tests/**/*.ts'],\n+\t\trules: { 'react-hooks/rules-of-hooks': 'off' },\n+\t},\n+\t{\n+\t\tignores: ['.react-router/*'],\n+\t},\n+]\ndiff --git a/fly.toml b/fly.toml\nnew file mode 100644\nindex 0000000..f546b58\n--- /dev/null\n+++ b/fly.toml\n@@ -0,0 +1,61 @@\n+app = \"02-solution-authentication-71eb\"\n+primary_region = \"sjc\"\n+kill_signal = \"SIGINT\"\n+kill_timeout = 5\n+processes = [ ]\n+swap_size_mb = 512\n+\n+[experimental]\n+allowed_public_ports = [ ]\n+auto_rollback = true\n+\n+[mounts]\n+source = \"data\"\n+destination = \"/data\"\n+\n+[build]\n+dockerfile = \"/other/Dockerfile\"\n+ignorefile = \"/other/Dockerfile.dockerignore\"\n+\n+[[services]]\n+internal_port = 8080\n+processes = [ \"app\" ]\n+protocol = \"tcp\"\n+script_checks = [ ]\n+\n+ [services.concurrency]\n+ hard_limit = 100\n+ soft_limit = 80\n+ type = \"requests\"\n+\n+ [[services.ports]]\n+ handlers = [ \"http\" ]\n+ port = 80\n+ force_https = true\n+\n+ [[services.ports]]\n+ handlers = [ \"tls\", \"http\" ]\n+ port = 443\n+\n+ [[services.tcp_checks]]\n+ grace_period = \"1s\"\n+ interval = \"15s\"\n+ restart_limit = 0\n+ timeout = \"2s\"\n+\n+ [[services.http_checks]]\n+ interval = \"10s\"\n+ grace_period = \"5s\"\n+ method = \"get\"\n+ path = \"/resources/healthcheck\"\n+ protocol = \"http\"\n+ timeout = \"2s\"\n+ tls_skip_verify = false\n+ headers = { }\n+\n+ [[services.http_checks]]\n+ grace_period = \"10s\"\n+ interval = \"30s\"\n+ method = \"GET\"\n+ timeout = \"5s\"\n+ path = \"/litefs/health\"\ndiff --git a/index.js b/index.js\nnew file mode 100644\nindex 0000000..ec390d6\n--- /dev/null\n+++ b/index.js\n@@ -0,0 +1,23 @@\n+import 'dotenv/config'\n+import * as fs from 'node:fs'\n+import sourceMapSupport from 'source-map-support'\n+\n+sourceMapSupport.install({\n+\tretrieveSourceMap: function (source) {\n+\t\t// get source file without the `file://` prefix or `?t=...` suffix\n+\t\tconst match = source.match(/^file:\\/\\/(.*)\\?t=[.\\d]+$/)\n+\t\tif (match) {\n+\t\t\treturn {\n+\t\t\t\turl: source,\n+\t\t\t\tmap: fs.readFileSync(`${match[1]}.map`, 'utf8'),\n+\t\t\t}\n+\t\t}\n+\t\treturn null\n+\t},\n+})\n+\n+if (process.env.NODE_ENV === 'production') {\n+\tawait import('./server-build/index.js')\n+} else {\n+\tawait import('./server/index.ts')\n+}\ndiff --git a/other/Dockerfile b/other/Dockerfile\nnew file mode 100644\nindex 0000000..a801036\n--- /dev/null\n+++ b/other/Dockerfile\n@@ -0,0 +1,97 @@\n+# This file is moved to the root directory before building the image\n+\n+# base node image\n+FROM node:22-bookworm-slim as base\n+\n+# set for base and all layer that inherit from it\n+ENV NODE_ENV production\n+\n+# Install openssl for Prisma\n+RUN apt-get update && apt-get install -y fuse3 openssl sqlite3 ca-certificates\n+\n+# Install all node_modules, including dev dependencies\n+FROM base as deps\n+\n+WORKDIR /myapp\n+\n+ADD package.json package-lock.json .npmrc ./\n+RUN npm ci --include=dev\n+\n+# Setup production node_modules\n+FROM base as production-deps\n+\n+WORKDIR /myapp\n+\n+COPY --from=deps /myapp/node_modules /myapp/node_modules\n+ADD package.json package-lock.json .npmrc ./\n+RUN npm prune --omit=dev\n+\n+# Build the app\n+FROM base as build\n+\n+ARG COMMIT_SHA\n+ENV COMMIT_SHA=$COMMIT_SHA\n+\n+# Use the following environment variables to configure Sentry\n+# ENV SENTRY_ORG=\n+# ENV SENTRY_PROJECT=\n+\n+\n+WORKDIR /myapp\n+\n+COPY --from=deps /myapp/node_modules /myapp/node_modules\n+\n+ADD prisma .\n+RUN npx prisma generate\n+\n+ADD . .\n+\n+# Mount the secret and set it as an environment variable and run the build\n+RUN --mount=type=secret,id=SENTRY_AUTH_TOKEN \\\n+ export SENTRY_AUTH_TOKEN=$(cat /run/secrets/SENTRY_AUTH_TOKEN) && \\\n+ npm run build\n+\n+# Finally, build the production image with minimal footprint\n+FROM base\n+\n+ENV FLY=\"true\"\n+ENV LITEFS_DIR=\"/litefs/data\"\n+ENV DATABASE_FILENAME=\"sqlite.db\"\n+ENV DATABASE_PATH=\"$LITEFS_DIR/$DATABASE_FILENAME\"\n+ENV DATABASE_URL=\"file:$DATABASE_PATH\"\n+ENV CACHE_DATABASE_FILENAME=\"cache.db\"\n+ENV CACHE_DATABASE_PATH=\"$LITEFS_DIR/$CACHE_DATABASE_FILENAME\"\n+ENV INTERNAL_PORT=\"8080\"\n+ENV PORT=\"8081\"\n+ENV NODE_ENV=\"production\"\n+# For WAL support: https://github.com/prisma/prisma-engines/issues/4675#issuecomment-1914383246\n+ENV PRISMA_SCHEMA_DISABLE_ADVISORY_LOCK = \"1\"\n+\n+# add shortcut for connecting to database CLI\n+RUN echo \"#!/bin/sh\\nset -x\\nsqlite3 \\$DATABASE_URL\" > /usr/local/bin/database-cli && chmod +x /usr/local/bin/database-cli\n+# and one for the cache database\n+RUN echo \"#!/bin/sh\\nset -x\\nsqlite3 \\$CACHE_DATABASE_URL\" > /usr/local/bin/cache-database-cli && chmod +x /usr/local/bin/cache-database-cli\n+\n+WORKDIR /myapp\n+\n+# Generate random value and save it to .env file which will be loaded by dotenv\n+RUN INTERNAL_COMMAND_TOKEN=$(openssl rand -hex 32) && \\\n+ echo \"INTERNAL_COMMAND_TOKEN=$INTERNAL_COMMAND_TOKEN\" > .env\n+\n+COPY --from=production-deps /myapp/node_modules /myapp/node_modules\n+COPY --from=build /myapp/node_modules/.prisma /myapp/node_modules/.prisma\n+\n+COPY --from=build /myapp/server-build /myapp/server-build\n+COPY --from=build /myapp/build /myapp/build\n+COPY --from=build /myapp/package.json /myapp/package.json\n+COPY --from=build /myapp/prisma /myapp/prisma\n+COPY --from=build /myapp/app/components/ui/icons /myapp/app/components/ui/icons\n+\n+# prepare for litefs\n+COPY --from=flyio/litefs:0.5.11 /usr/local/bin/litefs /usr/local/bin/litefs\n+ADD other/litefs.yml /etc/litefs.yml\n+RUN mkdir -p /data ${LITEFS_DIR}\n+\n+ADD . .\n+\n+CMD [\"litefs\", \"mount\"]\ndiff --git a/other/Dockerfile.dockerignore b/other/Dockerfile.dockerignore\nnew file mode 100644\nindex 0000000..6e18765\n--- /dev/null\n+++ b/other/Dockerfile.dockerignore\n@@ -0,0 +1,9 @@\n+# This file is moved to the root directory before building the image\n+\n+/node_modules\n+*.log\n+.DS_Store\n+.env\n+/.cache\n+/public/build\n+/build\ndiff --git a/other/build-server.ts b/other/build-server.ts\nnew file mode 100644\nindex 0000000..896b0f6\n--- /dev/null\n+++ b/other/build-server.ts\n@@ -0,0 +1,50 @@\n+import path from 'node:path'\n+import { fileURLToPath } from 'node:url'\n+import esbuild from 'esbuild'\n+import fsExtra from 'fs-extra'\n+import { globSync } from 'glob'\n+\n+const pkg = fsExtra.readJsonSync(path.join(process.cwd(), 'package.json'))\n+\n+const __dirname = path.dirname(fileURLToPath(import.meta.url))\n+const here = (...s: Array) => path.join(__dirname, ...s)\n+const globsafe = (s: string) => s.replace(/\\\\/g, '/')\n+\n+const allFiles = globSync(globsafe(here('../server/**/*.*')), {\n+\tignore: [\n+\t\t'server/dev-server.js', // for development only\n+\t\t'**/tsconfig.json',\n+\t\t'**/eslint*',\n+\t\t'**/__tests__/**',\n+\t],\n+})\n+\n+const entries = []\n+for (const file of allFiles) {\n+\tif (/\\.(ts|js|tsx|jsx)$/.test(file)) {\n+\t\tentries.push(file)\n+\t} else {\n+\t\tconst dest = file.replace(here('../server'), here('../server-build'))\n+\t\tfsExtra.ensureDirSync(path.parse(dest).dir)\n+\t\tfsExtra.copySync(file, dest)\n+\t\tconsole.log(`copied: ${file.replace(`${here('../server')}/`, '')}`)\n+\t}\n+}\n+\n+console.log()\n+console.log('building...')\n+\n+esbuild\n+\t.build({\n+\t\tentryPoints: entries,\n+\t\toutdir: here('../server-build'),\n+\t\ttarget: [`node${pkg.engines.node}`],\n+\t\tplatform: 'node',\n+\t\tsourcemap: true,\n+\t\tformat: 'esm',\n+\t\tlogLevel: 'info',\n+\t})\n+\t.catch((error: unknown) => {\n+\t\tconsole.error(error)\n+\t\tprocess.exit(1)\n+\t})\ndiff --git a/other/litefs.yml b/other/litefs.yml\nnew file mode 100644\nindex 0000000..0bc4dd9\n--- /dev/null\n+++ b/other/litefs.yml\n@@ -0,0 +1,46 @@\n+# Documented example: https://github.com/superfly/litefs/blob/dec5a7353292068b830001bd2df4830e646f6a2f/cmd/litefs/etc/litefs.yml\n+fuse:\n+ # Required. This is the mount directory that applications will\n+ # use to access their SQLite databases.\n+ dir: '${LITEFS_DIR}'\n+\n+data:\n+ # Path to internal data storage.\n+ dir: '/data/litefs'\n+\n+proxy:\n+ # matches the internal_port in fly.toml\n+ addr: ':${INTERNAL_PORT}'\n+ target: 'localhost:${PORT}'\n+ db: '${DATABASE_FILENAME}'\n+\n+# The lease section specifies how the cluster will be managed. We're using the\n+# \"consul\" lease type so that our application can dynamically change the primary.\n+#\n+# These environment variables will be available in your Fly.io application.\n+lease:\n+ type: 'consul'\n+ candidate: ${FLY_REGION == PRIMARY_REGION}\n+ promote: true\n+ advertise-url: 'http://${HOSTNAME}.vm.${FLY_APP_NAME}.internal:20202'\n+\n+ consul:\n+ url: '${FLY_CONSUL_URL}'\n+ key: 'epic-stack-litefs_20250222/${FLY_APP_NAME}'\n+\n+exec:\n+ - cmd: npx prisma migrate deploy\n+ if-candidate: true\n+\n+ # Set the journal mode for the database to WAL. This reduces concurrency deadlock issues\n+ - cmd: sqlite3 $DATABASE_PATH \"PRAGMA journal_mode = WAL;\"\n+ if-candidate: true\n+\n+ # Set the journal mode for the cache to WAL. This reduces concurrency deadlock issues\n+ - cmd: sqlite3 $CACHE_DATABASE_PATH \"PRAGMA journal_mode = WAL;\"\n+ if-candidate: true\n+\n+ # Generate Typed SQL files\n+ - cmd: npx prisma generate --sql\n+\n+ - cmd: npm start\ndiff --git a/other/sly/sly.json b/other/sly/sly.json\nnew file mode 100644\nindex 0000000..5960ad3\n--- /dev/null\n+++ b/other/sly/sly.json\n@@ -0,0 +1,10 @@\n+{\n+\t\"$schema\": \"https://sly-cli.fly.dev/registry/config.json\",\n+\t\"libraries\": [\n+\t\t{\n+\t\t\t\"name\": \"@radix-ui/icons\",\n+\t\t\t\"directory\": \"./other/svg-icons\",\n+\t\t\t\"transformers\": [\"transform-icon.ts\"]\n+\t\t}\n+\t]\n+}\ndiff --git a/other/sly/transform-icon.ts b/other/sly/transform-icon.ts\nnew file mode 100644\nindex 0000000..8100773\n--- /dev/null\n+++ b/other/sly/transform-icon.ts\n@@ -0,0 +1,19 @@\n+import { type Meta } from '@sly-cli/sly'\n+\n+/**\n+ * @type {import('@sly-cli/sly/dist').Transformer}\n+ */\n+export default function transformIcon(input: string, meta: Meta) {\n+\tinput = prependLicenseInfo(input, meta)\n+\n+\treturn input\n+}\n+\n+function prependLicenseInfo(input: string, meta: Meta): string {\n+\treturn [\n+\t\t``,\n+\t\t``,\n+\t\t``,\n+\t\tinput,\n+\t].join('\\n')\n+}\ndiff --git a/other/svg-icons/arrow-left.svg b/other/svg-icons/arrow-left.svg\nnew file mode 100644\nindex 0000000..d59c7a6\n--- /dev/null\n+++ b/other/svg-icons/arrow-left.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/arrow-right.svg b/other/svg-icons/arrow-right.svg\nnew file mode 100644\nindex 0000000..2c3424a\n--- /dev/null\n+++ b/other/svg-icons/arrow-right.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/avatar.svg b/other/svg-icons/avatar.svg\nnew file mode 100644\nindex 0000000..14acc3d\n--- /dev/null\n+++ b/other/svg-icons/avatar.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/camera.svg b/other/svg-icons/camera.svg\nnew file mode 100644\nindex 0000000..c5f1d35\n--- /dev/null\n+++ b/other/svg-icons/camera.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/check.svg b/other/svg-icons/check.svg\nnew file mode 100644\nindex 0000000..e057a8b\n--- /dev/null\n+++ b/other/svg-icons/check.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/clock.svg b/other/svg-icons/clock.svg\nnew file mode 100644\nindex 0000000..630c19b\n--- /dev/null\n+++ b/other/svg-icons/clock.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/cross-1.svg b/other/svg-icons/cross-1.svg\nnew file mode 100644\nindex 0000000..b94ccfe\n--- /dev/null\n+++ b/other/svg-icons/cross-1.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/dots-horizontal.svg b/other/svg-icons/dots-horizontal.svg\nnew file mode 100644\nindex 0000000..fa7758f\n--- /dev/null\n+++ b/other/svg-icons/dots-horizontal.svg\n@@ -0,0 +1,13 @@\n+\n+\n+\n+\n+\n+\ndiff --git a/other/svg-icons/download.svg b/other/svg-icons/download.svg\nnew file mode 100644\nindex 0000000..c5a617b\n--- /dev/null\n+++ b/other/svg-icons/download.svg\n@@ -0,0 +1,13 @@\n+\n+\n+\n+\n+\n+\ndiff --git a/other/svg-icons/envelope-closed.svg b/other/svg-icons/envelope-closed.svg\nnew file mode 100644\nindex 0000000..6a9d3f0\n--- /dev/null\n+++ b/other/svg-icons/envelope-closed.svg\n@@ -0,0 +1,13 @@\n+\n+\n+\n+\n+\n+\ndiff --git a/other/svg-icons/exit.svg b/other/svg-icons/exit.svg\nnew file mode 100644\nindex 0000000..292f94d\n--- /dev/null\n+++ b/other/svg-icons/exit.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/file-text.svg b/other/svg-icons/file-text.svg\nnew file mode 100644\nindex 0000000..5fe1b7e\n--- /dev/null\n+++ b/other/svg-icons/file-text.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/github-logo.svg b/other/svg-icons/github-logo.svg\nnew file mode 100644\nindex 0000000..7fbb0a9\n--- /dev/null\n+++ b/other/svg-icons/github-logo.svg\n@@ -0,0 +1,13 @@\n+\n+\n+\n+\n+\n+\ndiff --git a/other/svg-icons/laptop.svg b/other/svg-icons/laptop.svg\nnew file mode 100644\nindex 0000000..0297959\n--- /dev/null\n+++ b/other/svg-icons/laptop.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/link-2.svg b/other/svg-icons/link-2.svg\nnew file mode 100644\nindex 0000000..f36d6d9\n--- /dev/null\n+++ b/other/svg-icons/link-2.svg\n@@ -0,0 +1,13 @@\n+\n+\n+\n+\n+\n+\ndiff --git a/other/svg-icons/lock-closed.svg b/other/svg-icons/lock-closed.svg\nnew file mode 100644\nindex 0000000..677bdc7\n--- /dev/null\n+++ b/other/svg-icons/lock-closed.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/lock-open-1.svg b/other/svg-icons/lock-open-1.svg\nnew file mode 100644\nindex 0000000..789f9d4\n--- /dev/null\n+++ b/other/svg-icons/lock-open-1.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/magnifying-glass.svg b/other/svg-icons/magnifying-glass.svg\nnew file mode 100644\nindex 0000000..670396b\n--- /dev/null\n+++ b/other/svg-icons/magnifying-glass.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/moon.svg b/other/svg-icons/moon.svg\nnew file mode 100644\nindex 0000000..5df2660\n--- /dev/null\n+++ b/other/svg-icons/moon.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/passkey.svg b/other/svg-icons/passkey.svg\nnew file mode 100644\nindex 0000000..8a2f6ad\n--- /dev/null\n+++ b/other/svg-icons/passkey.svg\n@@ -0,0 +1,4 @@\n+\n\\ No newline at end of file\ndiff --git a/other/svg-icons/pencil-1.svg b/other/svg-icons/pencil-1.svg\nnew file mode 100644\nindex 0000000..2695e8c\n--- /dev/null\n+++ b/other/svg-icons/pencil-1.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/pencil-2.svg b/other/svg-icons/pencil-2.svg\nnew file mode 100644\nindex 0000000..a249a09\n--- /dev/null\n+++ b/other/svg-icons/pencil-2.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/plus.svg b/other/svg-icons/plus.svg\nnew file mode 100644\nindex 0000000..5009fac\n--- /dev/null\n+++ b/other/svg-icons/plus.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/question-mark-circled.svg b/other/svg-icons/question-mark-circled.svg\nnew file mode 100644\nindex 0000000..c99757d\n--- /dev/null\n+++ b/other/svg-icons/question-mark-circled.svg\n@@ -0,0 +1,13 @@\n+\n+\n+\n+\n+\n+\ndiff --git a/other/svg-icons/reset.svg b/other/svg-icons/reset.svg\nnew file mode 100644\nindex 0000000..41c2e88\n--- /dev/null\n+++ b/other/svg-icons/reset.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/sun.svg b/other/svg-icons/sun.svg\nnew file mode 100644\nindex 0000000..b3891c9\n--- /dev/null\n+++ b/other/svg-icons/sun.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/trash.svg b/other/svg-icons/trash.svg\nnew file mode 100644\nindex 0000000..472954b\n--- /dev/null\n+++ b/other/svg-icons/trash.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/other/svg-icons/update.svg b/other/svg-icons/update.svg\nnew file mode 100644\nindex 0000000..c95c60d\n--- /dev/null\n+++ b/other/svg-icons/update.svg\n@@ -0,0 +1,11 @@\n+\n+\n+\n+\ndiff --git a/playwright.config.ts b/playwright.config.ts\nindex 7f796f7..530e880 100644\n--- a/playwright.config.ts\n+++ b/playwright.config.ts\n@@ -1,6 +1,24 @@\n import { defineConfig, devices } from '@playwright/test'\n+import 'dotenv/config'\n+\n+const PORT = process.env.PORT || '3000'\n \n export default defineConfig({\n+\ttestDir: './tests/e2e',\n+\ttimeout: 15 * 1000,\n+\texpect: {\n+\t\ttimeout: 5 * 1000,\n+\t},\n+\tfullyParallel: true,\n+\tforbidOnly: !!process.env.CI,\n+\tretries: process.env.CI ? 2 : 0,\n+\tworkers: process.env.CI ? 1 : undefined,\n+\treporter: 'html',\n+\tuse: {\n+\t\tbaseURL: `http://localhost:${PORT}/`,\n+\t\ttrace: 'on-first-retry',\n+\t},\n+\n \tprojects: [\n \t\t{\n \t\t\tname: 'chromium',\n@@ -9,7 +27,32 @@ export default defineConfig({\n \t\t\t},\n \t\t},\n \t],\n-\tfullyParallel: true,\n-\tforbidOnly: !!process.env.CI,\n-\tworkers: process.env.CI ? 1 : undefined,\n+\n+\t// 🐨 Add a property called \"webServer\" and provide an object as its value.\n+\t// 💰 webServer: {}\n+\n+\t// 🐨 In the \"webServer\" object, add a property called \"command\".\n+\t// Playwright will run this command before the test run.\n+\t// Specify \"npm run dev\" as the command.\n+\t// 💰 command: \"VALUE\"\n+\n+\t// 🐨 In the \"webServer\" object, add another property called \"port\".\n+\t// Playwright will await a connection on this port to know that your app is up.\n+\t// Provide the `PORT` variable as the value for this property.\n+\t// (Do not forget to cast it to number!)\n+\t// 💰 port: VALUE\n+\n+\t// 🐨 In the \"webServer\" object, add two properties: \"stdout\" and \"stderr\".\n+\t// These properties tell Playwright how to manage stdout and stderr of the\n+\t// process that spawns your command.\n+\t// Assign the string \"pipe\" as the value for both of these properties.\n+\t// 💰 stdout: \"VALUE\"\n+\t// 💰 stderr: \"VALUE\"\n+\n+\t// 🐨 Finally, in the \"webServer\" object, add a property called \"env\".\n+\t// Playwright provide the keys/values of this object as environment variables\n+\t// to the process that spawns your app.\n+\t// In the \"env\" object, speicify the following entries:\n+\t// - \"PORT\" with the value of the existing \"PORT\" variable;\n+\t// - \"NODE_ENV\" with the value of \"test\" string.\n })\ndiff --git a/prisma/migrations/20250221233640_init/migration.sql b/prisma/migrations/20250221233640_init/migration.sql\nnew file mode 100644\nindex 0000000..2a75a6b\n--- /dev/null\n+++ b/prisma/migrations/20250221233640_init/migration.sql\n@@ -0,0 +1,275 @@\n+-- CreateTable\n+CREATE TABLE \"User\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"email\" TEXT NOT NULL,\n+ \"username\" TEXT NOT NULL,\n+ \"name\" TEXT,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"Note\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"title\" TEXT NOT NULL,\n+ \"content\" TEXT NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL,\n+ \"ownerId\" TEXT NOT NULL,\n+ CONSTRAINT \"Note_ownerId_fkey\" FOREIGN KEY (\"ownerId\") REFERENCES \"User\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"NoteImage\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"altText\" TEXT,\n+ \"objectKey\" TEXT NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL,\n+ \"noteId\" TEXT NOT NULL,\n+ CONSTRAINT \"NoteImage_noteId_fkey\" FOREIGN KEY (\"noteId\") REFERENCES \"Note\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"UserImage\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"altText\" TEXT,\n+ \"objectKey\" TEXT NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL,\n+ \"userId\" TEXT NOT NULL,\n+ CONSTRAINT \"UserImage_userId_fkey\" FOREIGN KEY (\"userId\") REFERENCES \"User\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"Password\" (\n+ \"hash\" TEXT NOT NULL,\n+ \"userId\" TEXT NOT NULL,\n+ CONSTRAINT \"Password_userId_fkey\" FOREIGN KEY (\"userId\") REFERENCES \"User\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"Session\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"expirationDate\" DATETIME NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL,\n+ \"userId\" TEXT NOT NULL,\n+ CONSTRAINT \"Session_userId_fkey\" FOREIGN KEY (\"userId\") REFERENCES \"User\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"Permission\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"action\" TEXT NOT NULL,\n+ \"entity\" TEXT NOT NULL,\n+ \"access\" TEXT NOT NULL,\n+ \"description\" TEXT NOT NULL DEFAULT '',\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"Role\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"name\" TEXT NOT NULL,\n+ \"description\" TEXT NOT NULL DEFAULT '',\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"Verification\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"type\" TEXT NOT NULL,\n+ \"target\" TEXT NOT NULL,\n+ \"secret\" TEXT NOT NULL,\n+ \"algorithm\" TEXT NOT NULL,\n+ \"digits\" INTEGER NOT NULL,\n+ \"period\" INTEGER NOT NULL,\n+ \"charSet\" TEXT NOT NULL,\n+ \"expiresAt\" DATETIME\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"Connection\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"providerName\" TEXT NOT NULL,\n+ \"providerId\" TEXT NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL,\n+ \"userId\" TEXT NOT NULL,\n+ CONSTRAINT \"Connection_userId_fkey\" FOREIGN KEY (\"userId\") REFERENCES \"User\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"Passkey\" (\n+ \"id\" TEXT NOT NULL PRIMARY KEY,\n+ \"aaguid\" TEXT NOT NULL,\n+ \"createdAt\" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,\n+ \"updatedAt\" DATETIME NOT NULL,\n+ \"publicKey\" BLOB NOT NULL,\n+ \"userId\" TEXT NOT NULL,\n+ \"webauthnUserId\" TEXT NOT NULL,\n+ \"counter\" BIGINT NOT NULL,\n+ \"deviceType\" TEXT NOT NULL,\n+ \"backedUp\" BOOLEAN NOT NULL,\n+ \"transports\" TEXT,\n+ CONSTRAINT \"Passkey_userId_fkey\" FOREIGN KEY (\"userId\") REFERENCES \"User\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"_PermissionToRole\" (\n+ \"A\" TEXT NOT NULL,\n+ \"B\" TEXT NOT NULL,\n+ CONSTRAINT \"_PermissionToRole_A_fkey\" FOREIGN KEY (\"A\") REFERENCES \"Permission\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE,\n+ CONSTRAINT \"_PermissionToRole_B_fkey\" FOREIGN KEY (\"B\") REFERENCES \"Role\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE\n+);\n+\n+-- CreateTable\n+CREATE TABLE \"_RoleToUser\" (\n+ \"A\" TEXT NOT NULL,\n+ \"B\" TEXT NOT NULL,\n+ CONSTRAINT \"_RoleToUser_A_fkey\" FOREIGN KEY (\"A\") REFERENCES \"Role\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE,\n+ CONSTRAINT \"_RoleToUser_B_fkey\" FOREIGN KEY (\"B\") REFERENCES \"User\" (\"id\") ON DELETE CASCADE ON UPDATE CASCADE\n+);\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"User_email_key\" ON \"User\"(\"email\");\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"User_username_key\" ON \"User\"(\"username\");\n+\n+-- CreateIndex\n+CREATE INDEX \"Note_ownerId_idx\" ON \"Note\"(\"ownerId\");\n+\n+-- CreateIndex\n+CREATE INDEX \"Note_ownerId_updatedAt_idx\" ON \"Note\"(\"ownerId\", \"updatedAt\");\n+\n+-- CreateIndex\n+CREATE INDEX \"NoteImage_noteId_idx\" ON \"NoteImage\"(\"noteId\");\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"UserImage_userId_key\" ON \"UserImage\"(\"userId\");\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"Password_userId_key\" ON \"Password\"(\"userId\");\n+\n+-- CreateIndex\n+CREATE INDEX \"Session_userId_idx\" ON \"Session\"(\"userId\");\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"Permission_action_entity_access_key\" ON \"Permission\"(\"action\", \"entity\", \"access\");\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"Role_name_key\" ON \"Role\"(\"name\");\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"Verification_target_type_key\" ON \"Verification\"(\"target\", \"type\");\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"Connection_providerName_providerId_key\" ON \"Connection\"(\"providerName\", \"providerId\");\n+\n+-- CreateIndex\n+CREATE INDEX \"Passkey_userId_idx\" ON \"Passkey\"(\"userId\");\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"_PermissionToRole_AB_unique\" ON \"_PermissionToRole\"(\"A\", \"B\");\n+\n+-- CreateIndex\n+CREATE INDEX \"_PermissionToRole_B_index\" ON \"_PermissionToRole\"(\"B\");\n+\n+-- CreateIndex\n+CREATE UNIQUE INDEX \"_RoleToUser_AB_unique\" ON \"_RoleToUser\"(\"A\", \"B\");\n+\n+-- CreateIndex\n+CREATE INDEX \"_RoleToUser_B_index\" ON \"_RoleToUser\"(\"B\");\n+\n+--------------------------------- Manual Seeding --------------------------\n+-- Hey there, Kent here! This is how you can reliably seed your database with\n+-- some data. You edit the migration.sql file and that will handle it for you.\n+\n+-- The user Roles and Permissions are seeded here.\n+-- If you'd like to customise roles and permissions, you can edit and add the code below to your `prisma/seed.ts` file.\n+-- Seed your development database with `npx prisma db seed`\n+-- Create a sql dump of your database with `sqlite3 prisma/data.db .dump > seed.sql`\n+-- Replace the SQL below with your new Roles & Permissions related SQL from `seed.sql`\n+\n+-- console.time('🔑 Created permissions...')\n+-- const entities = ['user', 'note']\n+-- const actions = ['create', 'read', 'update', 'delete']\n+-- const accesses = ['own', 'any'] as const\n+\n+-- let permissionsToCreate = []\n+-- for (const entity of entities) {\n+-- \tfor (const action of actions) {\n+-- \t\tfor (const access of accesses) {\n+-- \t\t\tpermissionsToCreate.push({ entity, action, access })\n+-- \t\t}\n+-- \t}\n+-- }\n+-- await prisma.permission.createMany({ data: permissionsToCreate })\n+-- console.timeEnd('🔑 Created permissions...')\n+\n+-- console.time('👑 Created roles...')\n+-- await prisma.role.create({\n+-- \tdata: {\n+-- \t\tname: 'admin',\n+-- \t\tpermissions: {\n+-- \t\t\tconnect: await prisma.permission.findMany({\n+-- \t\t\t\tselect: { id: true },\n+-- \t\t\t\twhere: { access: 'any' },\n+-- \t\t\t}),\n+-- \t\t},\n+-- \t},\n+-- })\n+-- await prisma.role.create({\n+-- \tdata: {\n+-- \t\tname: 'user',\n+-- \t\tpermissions: {\n+-- \t\t\tconnect: await prisma.permission.findMany({\n+-- \t\t\t\tselect: { id: true },\n+-- \t\t\t\twhere: { access: 'own' },\n+-- \t\t\t}),\n+-- \t\t},\n+-- \t},\n+-- })\n+-- console.timeEnd('👑 Created roles...')\n+\n+INSERT INTO Permission VALUES('clnf2zvli0000pcou3zzzzome','create','user','own','',1696625465526,1696625465526);\n+INSERT INTO Permission VALUES('clnf2zvll0001pcouly1310ku','create','user','any','',1696625465529,1696625465529);\n+INSERT INTO Permission VALUES('clnf2zvll0002pcouka7348re','read','user','own','',1696625465530,1696625465530);\n+INSERT INTO Permission VALUES('clnf2zvlm0003pcouea4dee51','read','user','any','',1696625465530,1696625465530);\n+INSERT INTO Permission VALUES('clnf2zvlm0004pcou2guvolx5','update','user','own','',1696625465531,1696625465531);\n+INSERT INTO Permission VALUES('clnf2zvln0005pcoun78ps5ap','update','user','any','',1696625465531,1696625465531);\n+INSERT INTO Permission VALUES('clnf2zvlo0006pcouyoptc5jp','delete','user','own','',1696625465532,1696625465532);\n+INSERT INTO Permission VALUES('clnf2zvlo0007pcouw1yzoyam','delete','user','any','',1696625465533,1696625465533);\n+INSERT INTO Permission VALUES('clnf2zvlp0008pcou9r0fhbm8','create','note','own','',1696625465533,1696625465533);\n+INSERT INTO Permission VALUES('clnf2zvlp0009pcouj3qib9q9','create','note','any','',1696625465534,1696625465534);\n+INSERT INTO Permission VALUES('clnf2zvlq000apcouxnspejs9','read','note','own','',1696625465535,1696625465535);\n+INSERT INTO Permission VALUES('clnf2zvlr000bpcouf4cg3x72','read','note','any','',1696625465535,1696625465535);\n+INSERT INTO Permission VALUES('clnf2zvlr000cpcouy1vp6oeg','update','note','own','',1696625465536,1696625465536);\n+INSERT INTO Permission VALUES('clnf2zvls000dpcouvzwjjzrq','update','note','any','',1696625465536,1696625465536);\n+INSERT INTO Permission VALUES('clnf2zvls000epcou4ts5ui8f','delete','note','own','',1696625465537,1696625465537);\n+INSERT INTO Permission VALUES('clnf2zvlt000fpcouk29jbmxn','delete','note','any','',1696625465538,1696625465538);\n+\n+INSERT INTO Role VALUES('clnf2zvlw000gpcour6dyyuh6','admin','',1696625465540,1696625465540);\n+INSERT INTO Role VALUES('clnf2zvlx000hpcou5dfrbegs','user','',1696625465542,1696625465542);\n+\n+INSERT INTO _PermissionToRole VALUES('clnf2zvll0001pcouly1310ku','clnf2zvlw000gpcour6dyyuh6');\n+INSERT INTO _PermissionToRole VALUES('clnf2zvlm0003pcouea4dee51','clnf2zvlw000gpcour6dyyuh6');\n+INSERT INTO _PermissionToRole VALUES('clnf2zvln0005pcoun78ps5ap','clnf2zvlw000gpcour6dyyuh6');\n+INSERT INTO _PermissionToRole VALUES('clnf2zvlo0007pcouw1yzoyam','clnf2zvlw000gpcour6dyyuh6');\n+INSERT INTO _PermissionToRole VALUES('clnf2zvlp0009pcouj3qib9q9','clnf2zvlw000gpcour6dyyuh6');\n+INSERT INTO _PermissionToRole VALUES('clnf2zvlr000bpcouf4cg3x72','clnf2zvlw000gpcour6dyyuh6');\n+INSERT INTO _PermissionToRole VALUES('clnf2zvls000dpcouvzwjjzrq','clnf2zvlw000gpcour6dyyuh6');\n+INSERT INTO _PermissionToRole VALUES('clnf2zvlt000fpcouk29jbmxn','clnf2zvlw000gpcour6dyyuh6');\n+INSERT INTO _PermissionToRole VALUES('clnf2zvli0000pcou3zzzzome','clnf2zvlx000hpcou5dfrbegs');\n+INSERT INTO _PermissionToRole VALUES('clnf2zvll0002pcouka7348re','clnf2zvlx000hpcou5dfrbegs');\n+INSERT INTO _PermissionToRole VALUES('clnf2zvlm0004pcou2guvolx5','clnf2zvlx000hpcou5dfrbegs');\n+INSERT INTO _PermissionToRole VALUES('clnf2zvlo0006pcouyoptc5jp','clnf2zvlx000hpcou5dfrbegs');\n+INSERT INTO _PermissionToRole VALUES('clnf2zvlp0008pcou9r0fhbm8','clnf2zvlx000hpcou5dfrbegs');\n+INSERT INTO _PermissionToRole VALUES('clnf2zvlq000apcouxnspejs9','clnf2zvlx000hpcou5dfrbegs');\n+INSERT INTO _PermissionToRole VALUES('clnf2zvlr000cpcouy1vp6oeg','clnf2zvlx000hpcou5dfrbegs');\n+INSERT INTO _PermissionToRole VALUES('clnf2zvls000epcou4ts5ui8f','clnf2zvlx000hpcou5dfrbegs');\ndiff --git a/prisma/migrations/migration_lock.toml b/prisma/migrations/migration_lock.toml\nnew file mode 100644\nindex 0000000..e1640d1\n--- /dev/null\n+++ b/prisma/migrations/migration_lock.toml\n@@ -0,0 +1,3 @@\n+# Please do not edit this file manually\n+# It should be added in your version-control system (e.g., Git)\n+provider = \"sqlite\"\n\\ No newline at end of file\ndiff --git a/prisma/schema.prisma b/prisma/schema.prisma\nnew file mode 100644\nindex 0000000..36140d6\n--- /dev/null\n+++ b/prisma/schema.prisma\n@@ -0,0 +1,186 @@\n+// This is your Prisma schema file,\n+// learn more about it in the docs: https://pris.ly/d/prisma-schema\n+\n+generator client {\n+ provider = \"prisma-client-js\"\n+ previewFeatures = [\"typedSql\"]\n+}\n+\n+datasource db {\n+ provider = \"sqlite\"\n+ url = env(\"DATABASE_URL\")\n+}\n+\n+model User {\n+ id String @id @default(cuid())\n+ email String @unique\n+ username String @unique\n+ name String?\n+\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ image UserImage?\n+ password Password?\n+ notes Note[]\n+ roles Role[]\n+ sessions Session[]\n+ connections Connection[]\n+ passkey Passkey[]\n+}\n+\n+model Note {\n+ id String @id @default(cuid())\n+ title String\n+ content String\n+\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ owner User @relation(fields: [ownerId], references: [id], onDelete: Cascade, onUpdate: Cascade)\n+ ownerId String\n+\n+ images NoteImage[]\n+\n+ // non-unique foreign key\n+ @@index([ownerId])\n+ // This helps our order by in the user search a LOT\n+ @@index([ownerId, updatedAt])\n+}\n+\n+model NoteImage {\n+ id String @id @default(cuid())\n+ altText String?\n+ objectKey String\n+\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ note Note @relation(fields: [noteId], references: [id], onDelete: Cascade, onUpdate: Cascade)\n+ noteId String\n+\n+ // non-unique foreign key\n+ @@index([noteId])\n+}\n+\n+model UserImage {\n+ id String @id @default(cuid())\n+ altText String?\n+ objectKey String\n+\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ user User @relation(fields: [userId], references: [id], onDelete: Cascade, onUpdate: Cascade)\n+ userId String @unique\n+}\n+\n+model Password {\n+ hash String\n+\n+ user User @relation(fields: [userId], references: [id], onDelete: Cascade, onUpdate: Cascade)\n+ userId String @unique\n+}\n+\n+model Session {\n+ id String @id @default(cuid())\n+ expirationDate DateTime\n+\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ user User @relation(fields: [userId], references: [id], onDelete: Cascade, onUpdate: Cascade)\n+ userId String\n+\n+ // non-unique foreign key\n+ @@index([userId])\n+}\n+\n+model Permission {\n+ id String @id @default(cuid())\n+ action String // e.g. create, read, update, delete\n+ entity String // e.g. note, user, etc.\n+ access String // e.g. own or any\n+ description String @default(\"\")\n+\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ roles Role[]\n+\n+ @@unique([action, entity, access])\n+}\n+\n+model Role {\n+ id String @id @default(cuid())\n+ name String @unique\n+ description String @default(\"\")\n+\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ users User[]\n+ permissions Permission[]\n+}\n+\n+model Verification {\n+ id String @id @default(cuid())\n+ createdAt DateTime @default(now())\n+\n+ /// The type of verification, e.g. \"email\" or \"phone\"\n+ type String\n+\n+ /// The thing we're trying to verify, e.g. a user's email or phone number\n+ target String\n+\n+ /// The secret key used to generate the otp\n+ secret String\n+\n+ /// The algorithm used to generate the otp\n+ algorithm String\n+\n+ /// The number of digits in the otp\n+ digits Int\n+\n+ /// The number of seconds the otp is valid for\n+ period Int\n+\n+ /// The valid characters for the otp\n+ charSet String\n+\n+ /// When it's safe to delete this verification\n+ expiresAt DateTime?\n+\n+ @@unique([target, type])\n+}\n+\n+model Connection {\n+ id String @id @default(cuid())\n+ providerName String\n+ providerId String\n+\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+\n+ user User @relation(fields: [userId], references: [id], onDelete: Cascade, onUpdate: Cascade)\n+ userId String\n+\n+ @@unique([providerName, providerId])\n+}\n+\n+model Passkey {\n+ id String @id\n+ aaguid String\n+ createdAt DateTime @default(now())\n+ updatedAt DateTime @updatedAt\n+ publicKey Bytes\n+ user User @relation(fields: [userId], references: [id], onDelete: Cascade)\n+ userId String\n+ webauthnUserId String\n+ counter BigInt\n+ deviceType String // 'singleDevice' or 'multiDevice'\n+ backedUp Boolean\n+ transports String? // Stored as comma-separated values\n+\n+ @@index(userId)\n+}\ndiff --git a/prisma/seed.ts b/prisma/seed.ts\nnew file mode 100644\nindex 0000000..8454353\n--- /dev/null\n+++ b/prisma/seed.ts\n@@ -0,0 +1,263 @@\n+import { faker } from '@faker-js/faker'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { MOCK_CODE_GITHUB } from '#app/utils/providers/constants'\n+import {\n+\tcreatePassword,\n+\tcreateUser,\n+\tgetNoteImages,\n+\tgetUserImages,\n+} from '#tests/db-utils.ts'\n+import { insertGitHubUser } from '#tests/mocks/github.ts'\n+\n+async function seed() {\n+\tconsole.log('🌱 Seeding...')\n+\tconsole.time(`🌱 Database has been seeded`)\n+\n+\tconst totalUsers = 5\n+\tconsole.time(`👤 Created ${totalUsers} users...`)\n+\tconst noteImages = await getNoteImages()\n+\tconst userImages = await getUserImages()\n+\n+\tfor (let index = 0; index < totalUsers; index++) {\n+\t\tconst userData = createUser()\n+\t\tconst user = await prisma.user.create({\n+\t\t\tselect: { id: true },\n+\t\t\tdata: {\n+\t\t\t\t...userData,\n+\t\t\t\tpassword: { create: createPassword(userData.username) },\n+\t\t\t\troles: { connect: { name: 'user' } },\n+\t\t\t},\n+\t\t})\n+\n+\t\t// Upload user profile image\n+\t\tconst userImage = userImages[index % userImages.length]\n+\t\tif (userImage) {\n+\t\t\tawait prisma.userImage.create({\n+\t\t\t\tdata: {\n+\t\t\t\t\tuserId: user.id,\n+\t\t\t\t\tobjectKey: userImage.objectKey,\n+\t\t\t\t},\n+\t\t\t})\n+\t\t}\n+\n+\t\t// Create notes with images\n+\t\tconst notesCount = faker.number.int({ min: 1, max: 3 })\n+\t\tfor (let noteIndex = 0; noteIndex < notesCount; noteIndex++) {\n+\t\t\tconst note = await prisma.note.create({\n+\t\t\t\tselect: { id: true },\n+\t\t\t\tdata: {\n+\t\t\t\t\ttitle: faker.lorem.sentence(),\n+\t\t\t\t\tcontent: faker.lorem.paragraphs(),\n+\t\t\t\t\townerId: user.id,\n+\t\t\t\t},\n+\t\t\t})\n+\n+\t\t\t// Add images to note\n+\t\t\tconst noteImageCount = faker.number.int({ min: 1, max: 3 })\n+\t\t\tfor (let imageIndex = 0; imageIndex < noteImageCount; imageIndex++) {\n+\t\t\t\tconst imgNumber = faker.number.int({ min: 0, max: 9 })\n+\t\t\t\tconst noteImage = noteImages[imgNumber]\n+\t\t\t\tif (noteImage) {\n+\t\t\t\t\tawait prisma.noteImage.create({\n+\t\t\t\t\t\tdata: {\n+\t\t\t\t\t\t\tnoteId: note.id,\n+\t\t\t\t\t\t\taltText: noteImage.altText,\n+\t\t\t\t\t\t\tobjectKey: noteImage.objectKey,\n+\t\t\t\t\t\t},\n+\t\t\t\t\t})\n+\t\t\t\t}\n+\t\t\t}\n+\t\t}\n+\t}\n+\tconsole.timeEnd(`👤 Created ${totalUsers} users...`)\n+\n+\tconsole.time(`🐨 Created admin user \"kody\"`)\n+\n+\tconst kodyImages = {\n+\t\tkodyUser: { objectKey: 'user/kody.png' },\n+\t\tcuteKoala: {\n+\t\t\taltText: 'an adorable koala cartoon illustration',\n+\t\t\tobjectKey: 'kody-notes/cute-koala.png',\n+\t\t},\n+\t\tkoalaEating: {\n+\t\t\taltText: 'a cartoon illustration of a koala in a tree eating',\n+\t\t\tobjectKey: 'kody-notes/koala-eating.png',\n+\t\t},\n+\t\tkoalaCuddle: {\n+\t\t\taltText: 'a cartoon illustration of koalas cuddling',\n+\t\t\tobjectKey: 'kody-notes/koala-cuddle.png',\n+\t\t},\n+\t\tmountain: {\n+\t\t\taltText: 'a beautiful mountain covered in snow',\n+\t\t\tobjectKey: 'kody-notes/mountain.png',\n+\t\t},\n+\t\tkoalaCoder: {\n+\t\t\taltText: 'a koala coding at the computer',\n+\t\t\tobjectKey: 'kody-notes/koala-coder.png',\n+\t\t},\n+\t\tkoalaMentor: {\n+\t\t\taltText:\n+\t\t\t\t'a koala in a friendly and helpful posture. The Koala is standing next to and teaching a woman who is coding on a computer and shows positive signs of learning and understanding what is being explained.',\n+\t\t\tobjectKey: 'kody-notes/koala-mentor.png',\n+\t\t},\n+\t\tkoalaSoccer: {\n+\t\t\taltText: 'a cute cartoon koala kicking a soccer ball on a soccer field ',\n+\t\t\tobjectKey: 'kody-notes/koala-soccer.png',\n+\t\t},\n+\t}\n+\n+\tconst githubUser = await insertGitHubUser(MOCK_CODE_GITHUB)\n+\n+\tconst kody = await prisma.user.create({\n+\t\tselect: { id: true },\n+\t\tdata: {\n+\t\t\temail: 'kody@kcd.dev',\n+\t\t\tusername: 'kody',\n+\t\t\tname: 'Kody',\n+\t\t\tpassword: { create: createPassword('kodylovesyou') },\n+\t\t\tconnections: {\n+\t\t\t\tcreate: {\n+\t\t\t\t\tproviderName: 'github',\n+\t\t\t\t\tproviderId: String(githubUser.profile.id),\n+\t\t\t\t},\n+\t\t\t},\n+\t\t\troles: { connect: [{ name: 'admin' }, { name: 'user' }] },\n+\t\t},\n+\t})\n+\n+\tawait prisma.userImage.create({\n+\t\tdata: {\n+\t\t\tuserId: kody.id,\n+\t\t\tobjectKey: kodyImages.kodyUser.objectKey,\n+\t\t},\n+\t})\n+\n+\t// Create Kody's notes\n+\tconst kodyNotes = [\n+\t\t{\n+\t\t\tid: 'd27a197e',\n+\t\t\ttitle: 'Basic Koala Facts',\n+\t\t\tcontent:\n+\t\t\t\t'Koalas are found in the eucalyptus forests of eastern Australia. They have grey fur with a cream-coloured chest, and strong, clawed feet, perfect for living in the branches of trees!',\n+\t\t\timages: [kodyImages.cuteKoala, kodyImages.koalaEating],\n+\t\t},\n+\t\t{\n+\t\t\tid: '414f0c09',\n+\t\t\ttitle: 'Koalas like to cuddle',\n+\t\t\tcontent:\n+\t\t\t\t'Cuddly critters, koalas measure about 60cm to 85cm long, and weigh about 14kg.',\n+\t\t\timages: [kodyImages.koalaCuddle],\n+\t\t},\n+\t\t{\n+\t\t\tid: '260366b1',\n+\t\t\ttitle: 'Not bears',\n+\t\t\tcontent:\n+\t\t\t\t\"Although you may have heard people call them koala 'bears', these awesome animals aren't bears at all – they are in fact marsupials. A group of mammals, most marsupials have pouches where their newborns develop.\",\n+\t\t\timages: [],\n+\t\t},\n+\t\t{\n+\t\t\tid: 'bb79cf45',\n+\t\t\ttitle: 'Snowboarding Adventure',\n+\t\t\tcontent:\n+\t\t\t\t\"Today was an epic day on the slopes! Shredded fresh powder with my friends, caught some sick air, and even attempted a backflip. Can't wait for the next snowy adventure!\",\n+\t\t\timages: [kodyImages.mountain],\n+\t\t},\n+\t\t{\n+\t\t\tid: '9f4308be',\n+\t\t\ttitle: 'Onewheel Tricks',\n+\t\t\tcontent:\n+\t\t\t\t\"Mastered a new trick on my Onewheel today called '180 Spin'. It's exhilarating to carve through the streets while pulling off these rad moves. Time to level up and learn more!\",\n+\t\t\timages: [],\n+\t\t},\n+\t\t{\n+\t\t\tid: '306021fb',\n+\t\t\ttitle: 'Coding Dilemma',\n+\t\t\tcontent:\n+\t\t\t\t\"Stuck on a bug in my latest coding project. Need to figure out why my function isn't returning the expected output. Time to dig deep, debug, and conquer this challenge!\",\n+\t\t\timages: [kodyImages.koalaCoder],\n+\t\t},\n+\t\t{\n+\t\t\tid: '16d4912a',\n+\t\t\ttitle: 'Coding Mentorship',\n+\t\t\tcontent:\n+\t\t\t\t\"Had a fantastic coding mentoring session today with Sarah. Helped her understand the concept of recursion, and she made great progress. It's incredibly fulfilling to help others improve their coding skills.\",\n+\t\t\timages: [kodyImages.koalaMentor],\n+\t\t},\n+\t\t{\n+\t\t\tid: '3199199e',\n+\t\t\ttitle: 'Koala Fun Facts',\n+\t\t\tcontent:\n+\t\t\t\t\"Did you know that koalas sleep for up to 20 hours a day? It's because their diet of eucalyptus leaves doesn't provide much energy. But when I'm awake, I enjoy munching on leaves, chilling in trees, and being the cuddliest koala around!\",\n+\t\t\timages: [],\n+\t\t},\n+\t\t{\n+\t\t\tid: '2030ffd3',\n+\t\t\ttitle: 'Skiing Adventure',\n+\t\t\tcontent:\n+\t\t\t\t'Spent the day hitting the slopes on my skis. The fresh powder made for some incredible runs and breathtaking views. Skiing down the mountain at top speed is an adrenaline rush like no other!',\n+\t\t\timages: [kodyImages.mountain],\n+\t\t},\n+\t\t{\n+\t\t\tid: 'f375a804',\n+\t\t\ttitle: 'Code Jam Success',\n+\t\t\tcontent:\n+\t\t\t\t'Participated in a coding competition today and secured the first place! The adrenaline, the challenging problems, and the satisfaction of finding optimal solutions—it was an amazing experience. Feeling proud and motivated to keep pushing my coding skills further!',\n+\t\t\timages: [kodyImages.koalaCoder],\n+\t\t},\n+\t\t{\n+\t\t\tid: '562c541b',\n+\t\t\ttitle: 'Koala Conservation Efforts',\n+\t\t\tcontent:\n+\t\t\t\t\"Joined a local conservation group to protect koalas and their habitats. Together, we're planting more eucalyptus trees, raising awareness about their endangered status, and working towards a sustainable future for these adorable creatures. Every small step counts!\",\n+\t\t\timages: [],\n+\t\t},\n+\t\t{\n+\t\t\tid: 'f67ca40b',\n+\t\t\ttitle: 'Game day',\n+\t\t\tcontent:\n+\t\t\t\t\"Just got back from the most amazing game. I've been playing soccer for a long time, but I've not once scored a goal. Well, today all that changed! I finally scored my first ever goal.\\n\\nI'm in an indoor league, and my team's not the best, but we're pretty good and I have fun, that's all that really matters. Anyway, I found myself at the other end of the field with the ball. It was just me and the goalie. I normally just kick the ball and hope it goes in, but the ball was already rolling toward the goal. The goalie was about to get the ball, so I had to charge. I managed to get possession of the ball just before the goalie got it. I brought it around the goalie and had a perfect shot. I screamed so loud in excitement. After all these years playing, I finally scored a goal!\\n\\nI know it's not a lot for most folks, but it meant a lot to me. We did end up winning the game by one. It makes me feel great that I had a part to play in that.\\n\\nIn this team, I'm the captain. I'm constantly cheering my team on. Even after getting injured, I continued to come and watch from the side-lines. I enjoy yelling (encouragingly) at my team mates and helping them be the best they can. I'm definitely not the best player by a long stretch. But I really enjoy the game. It's a great way to get exercise and have good social interactions once a week.\\n\\nThat said, it can be hard to keep people coming and paying dues and stuff. If people don't show up it can be really hard to find subs. I have a list of people I can text, but sometimes I can't find anyone.\\n\\nBut yeah, today was awesome. I felt like more than just a player that gets in the way of the opposition, but an actual asset to the team. Really great feeling.\\n\\nAnyway, I'm rambling at this point and really this is just so we can have a note that's pretty long to test things out. I think it's long enough now... Cheers!\",\n+\t\t\timages: [kodyImages.koalaSoccer],\n+\t\t},\n+\t]\n+\n+\tfor (const noteData of kodyNotes) {\n+\t\tconst note = await prisma.note.create({\n+\t\t\tselect: { id: true },\n+\t\t\tdata: {\n+\t\t\t\tid: noteData.id,\n+\t\t\t\ttitle: noteData.title,\n+\t\t\t\tcontent: noteData.content,\n+\t\t\t\townerId: kody.id,\n+\t\t\t},\n+\t\t})\n+\n+\t\tfor (const image of noteData.images) {\n+\t\t\tawait prisma.noteImage.create({\n+\t\t\t\tdata: {\n+\t\t\t\t\tnoteId: note.id,\n+\t\t\t\t\taltText: image.altText,\n+\t\t\t\t\tobjectKey: image.objectKey,\n+\t\t\t\t},\n+\t\t\t})\n+\t\t}\n+\t}\n+\n+\tconsole.timeEnd(`🐨 Created admin user \"kody\"`)\n+\n+\tconsole.timeEnd(`🌱 Database has been seeded`)\n+}\n+\n+seed()\n+\t.catch((e) => {\n+\t\tconsole.error(e)\n+\t\tprocess.exit(1)\n+\t})\n+\t.finally(async () => {\n+\t\tawait prisma.$disconnect()\n+\t})\n+\n+// we're ok to import from the test directory in this file\n+/*\n+eslint\n+\tno-restricted-imports: \"off\",\n+*/\ndiff --git a/prisma/sql/searchUsers.sql b/prisma/sql/searchUsers.sql\nnew file mode 100644\nindex 0000000..ad6c6d1\n--- /dev/null\n+++ b/prisma/sql/searchUsers.sql\n@@ -0,0 +1,19 @@\n+-- @param {String} $1:like\n+SELECT \n+ \"User\".id,\n+ \"User\".username,\n+ \"User\".name,\n+ \"UserImage\".id AS imageId,\n+ \"UserImage\".objectKey AS imageObjectKey\n+FROM \"User\"\n+LEFT JOIN \"UserImage\" ON \"User\".id = \"UserImage\".userId\n+WHERE \"User\".username LIKE :like\n+OR \"User\".name LIKE :like\n+ORDER BY (\n+ SELECT \"Note\".updatedAt\n+ FROM \"Note\"\n+ WHERE \"Note\".ownerId = \"User\".id\n+ ORDER BY \"Note\".updatedAt DESC\n+ LIMIT 1\n+) DESC\n+LIMIT 50\ndiff --git a/public/favicon.ico b/public/favicon.ico\nnew file mode 100644\nindex 0000000..01deac7\nBinary files /dev/null and b/public/favicon.ico differ\ndiff --git a/public/favicons/android-chrome-192x192.png b/public/favicons/android-chrome-192x192.png\nnew file mode 100644\nindex 0000000..f24aaa2\nBinary files /dev/null and b/public/favicons/android-chrome-192x192.png differ\ndiff --git a/public/favicons/android-chrome-512x512.png b/public/favicons/android-chrome-512x512.png\nnew file mode 100644\nindex 0000000..67125b8\nBinary files /dev/null and b/public/favicons/android-chrome-512x512.png differ\ndiff --git a/public/img/user.png b/public/img/user.png\nnew file mode 100644\nindex 0000000..683fcee\nBinary files /dev/null and b/public/img/user.png differ\ndiff --git a/public/site.webmanifest b/public/site.webmanifest\nnew file mode 100644\nindex 0000000..1bf9260\n--- /dev/null\n+++ b/public/site.webmanifest\n@@ -0,0 +1,20 @@\n+{\n+\t\"name\": \"Epic Notes\",\n+\t\"short_name\": \"Epic Notes\",\n+\t\"start_url\": \"/\",\n+\t\"icons\": [\n+\t\t{\n+\t\t\t\"src\": \"/favicons/android-chrome-192x192.png\",\n+\t\t\t\"sizes\": \"192x192\",\n+\t\t\t\"type\": \"image/png\"\n+\t\t},\n+\t\t{\n+\t\t\t\"src\": \"/favicons/android-chrome-512x512.png\",\n+\t\t\t\"sizes\": \"512x512\",\n+\t\t\t\"type\": \"image/png\"\n+\t\t}\n+\t],\n+\t\"theme_color\": \"#A9ADC1\",\n+\t\"background_color\": \"#1f2028\",\n+\t\"display\": \"standalone\"\n+}\ndiff --git a/react-router.config.ts b/react-router.config.ts\nnew file mode 100644\nindex 0000000..9091092\n--- /dev/null\n+++ b/react-router.config.ts\n@@ -0,0 +1,23 @@\n+import { type Config } from '@react-router/dev/config'\n+import { sentryOnBuildEnd } from '@sentry/react-router'\n+\n+const MODE = process.env.NODE_ENV\n+\n+export default {\n+\t// Defaults to true. Set to false to enable SPA for all routes.\n+\tssr: true,\n+\n+\tfuture: {\n+\t\tunstable_optimizeDeps: true,\n+\t},\n+\n+\tbuildEnd: async ({ viteConfig, reactRouterConfig, buildManifest }) => {\n+\t\tif (MODE === 'production' && process.env.SENTRY_AUTH_TOKEN) {\n+\t\t\tawait sentryOnBuildEnd({\n+\t\t\t\tviteConfig,\n+\t\t\t\treactRouterConfig,\n+\t\t\t\tbuildManifest,\n+\t\t\t})\n+\t\t}\n+\t},\n+} satisfies Config\ndiff --git a/server/dev-server.js b/server/dev-server.js\nnew file mode 100644\nindex 0000000..0261319\n--- /dev/null\n+++ b/server/dev-server.js\n@@ -0,0 +1,18 @@\n+import { execa } from 'execa'\n+\n+if (process.env.NODE_ENV === 'production') {\n+\tawait import('../server-build/index.js')\n+} else {\n+\tconst command =\n+\t\t'tsx watch --clear-screen=false --ignore \".cache/**\" --ignore \"app/**\" --ignore \"vite.config.ts.timestamp-*\" --ignore \"build/**\" --ignore \"node_modules/**\" --inspect ./index.js'\n+\texeca(command, {\n+\t\tstdio: ['ignore', 'inherit', 'inherit'],\n+\t\tshell: true,\n+\t\tenv: {\n+\t\t\tFORCE_COLOR: true,\n+\t\t\t...process.env,\n+\t\t},\n+\t\t// https://github.com/sindresorhus/execa/issues/433\n+\t\twindowsHide: false,\n+\t})\n+}\ndiff --git a/server/index.ts b/server/index.ts\nnew file mode 100644\nindex 0000000..d648320\n--- /dev/null\n+++ b/server/index.ts\n@@ -0,0 +1,267 @@\n+import { styleText } from 'node:util'\n+import { helmet } from '@nichtsam/helmet/node-http'\n+import { createRequestHandler } from '@react-router/express'\n+import * as Sentry from '@sentry/react-router'\n+import { ip as ipAddress } from 'address'\n+import closeWithGrace from 'close-with-grace'\n+import compression from 'compression'\n+import express from 'express'\n+import rateLimit from 'express-rate-limit'\n+import getPort, { portNumbers } from 'get-port'\n+import morgan from 'morgan'\n+import { type ServerBuild } from 'react-router'\n+\n+const MODE = process.env.NODE_ENV ?? 'development'\n+const IS_PROD = MODE === 'production'\n+const IS_DEV = MODE === 'development'\n+const ALLOW_INDEXING = process.env.ALLOW_INDEXING !== 'false'\n+const SENTRY_ENABLED = IS_PROD && process.env.SENTRY_DSN\n+\n+if (SENTRY_ENABLED) {\n+\tvoid import('./utils/monitoring.js').then(({ init }) => init())\n+}\n+\n+const viteDevServer = IS_PROD\n+\t? undefined\n+\t: await import('vite').then((vite) =>\n+\t\t\tvite.createServer({\n+\t\t\t\tserver: {\n+\t\t\t\t\tmiddlewareMode: true,\n+\t\t\t\t},\n+\t\t\t\t// We tell Vite we are running a custom app instead of\n+\t\t\t\t// the SPA default so it doesn't run HTML middleware\n+\t\t\t\tappType: 'custom',\n+\t\t\t}),\n+\t\t)\n+\n+const app = express()\n+\n+const getHost = (req: { get: (key: string) => string | undefined }) =>\n+\treq.get('X-Forwarded-Host') ?? req.get('host') ?? ''\n+\n+// fly is our proxy\n+app.set('trust proxy', true)\n+\n+// ensure HTTPS only (X-Forwarded-Proto comes from Fly)\n+app.use((req, res, next) => {\n+\tif (req.method !== 'GET') return next()\n+\tconst proto = req.get('X-Forwarded-Proto')\n+\tconst host = getHost(req)\n+\tif (proto === 'http') {\n+\t\tres.set('X-Forwarded-Proto', 'https')\n+\t\tres.redirect(`https://${host}${req.originalUrl}`)\n+\t\treturn\n+\t}\n+\tnext()\n+})\n+\n+// no ending slashes for SEO reasons\n+// https://github.com/epicweb-dev/epic-stack/discussions/108\n+app.get('*', (req, res, next) => {\n+\tif (req.path.endsWith('/') && req.path.length > 1) {\n+\t\tconst query = req.url.slice(req.path.length)\n+\t\tconst safepath = req.path.slice(0, -1).replace(/\\/+/g, '/')\n+\t\tres.redirect(302, safepath + query)\n+\t} else {\n+\t\tnext()\n+\t}\n+})\n+\n+app.use(compression())\n+\n+// http://expressjs.com/en/advanced/best-practice-security.html#at-a-minimum-disable-x-powered-by-header\n+app.disable('x-powered-by')\n+\n+app.use((_, res, next) => {\n+\t// The referrerPolicy breaks our redirectTo logic\n+\thelmet(res, { general: { referrerPolicy: false } })\n+\tnext()\n+})\n+\n+if (viteDevServer) {\n+\tapp.use(viteDevServer.middlewares)\n+} else {\n+\t// Remix fingerprints its assets so we can cache forever.\n+\tapp.use(\n+\t\t'/assets',\n+\t\texpress.static('build/client/assets', { immutable: true, maxAge: '1y' }),\n+\t)\n+\n+\t// Everything else (like favicon.ico) is cached for an hour. You may want to be\n+\t// more aggressive with this caching.\n+\tapp.use(express.static('build/client', { maxAge: '1h' }))\n+}\n+\n+app.get(['/img/*', '/favicons/*'], (_req, res) => {\n+\t// if we made it past the express.static for these, then we're missing something.\n+\t// So we'll just send a 404 and won't bother calling other middleware.\n+\treturn res.status(404).send('Not found')\n+})\n+\n+morgan.token('url', (req) => {\n+\ttry {\n+\t\treturn decodeURIComponent(req.url ?? '')\n+\t} catch {\n+\t\treturn req.url ?? ''\n+\t}\n+})\n+app.use(\n+\tmorgan('tiny', {\n+\t\tskip: (req, res) =>\n+\t\t\tres.statusCode === 200 &&\n+\t\t\t(req.url?.startsWith('/resources/images') ||\n+\t\t\t\treq.url?.startsWith('/resources/healthcheck')),\n+\t}),\n+)\n+\n+// When running tests or running in development, we want to effectively disable\n+// rate limiting because playwright tests are very fast and we don't want to\n+// have to wait for the rate limit to reset between tests.\n+const maxMultiple =\n+\t!IS_PROD || process.env.PLAYWRIGHT_TEST_BASE_URL ? 10_000 : 1\n+const rateLimitDefault = {\n+\twindowMs: 60 * 1000,\n+\tlimit: 1000 * maxMultiple,\n+\tstandardHeaders: true,\n+\tlegacyHeaders: false,\n+\tvalidate: { trustProxy: false },\n+\t// Malicious users can spoof their IP address which means we should not default\n+\t// to trusting req.ip when hosted on Fly.io. However, users cannot spoof Fly-Client-Ip.\n+\t// When sitting behind a CDN such as cloudflare, replace fly-client-ip with the CDN\n+\t// specific header such as cf-connecting-ip\n+\tkeyGenerator: (req: express.Request) => {\n+\t\treturn req.get('fly-client-ip') ?? `${req.ip}`\n+\t},\n+}\n+\n+const strongestRateLimit = rateLimit({\n+\t...rateLimitDefault,\n+\twindowMs: 60 * 1000,\n+\tlimit: 10 * maxMultiple,\n+})\n+\n+const strongRateLimit = rateLimit({\n+\t...rateLimitDefault,\n+\twindowMs: 60 * 1000,\n+\tlimit: 100 * maxMultiple,\n+})\n+\n+const generalRateLimit = rateLimit(rateLimitDefault)\n+app.use((req, res, next) => {\n+\tconst strongPaths = [\n+\t\t'/login',\n+\t\t'/signup',\n+\t\t'/verify',\n+\t\t'/admin',\n+\t\t'/onboarding',\n+\t\t'/reset-password',\n+\t\t'/settings/profile',\n+\t\t'/resources/login',\n+\t\t'/resources/verify',\n+\t]\n+\tif (req.method !== 'GET' && req.method !== 'HEAD') {\n+\t\tif (strongPaths.some((p) => req.path.includes(p))) {\n+\t\t\treturn strongestRateLimit(req, res, next)\n+\t\t}\n+\t\treturn strongRateLimit(req, res, next)\n+\t}\n+\n+\t// the verify route is a special case because it's a GET route that\n+\t// can have a token in the query string\n+\tif (req.path.includes('/verify')) {\n+\t\treturn strongestRateLimit(req, res, next)\n+\t}\n+\n+\treturn generalRateLimit(req, res, next)\n+})\n+\n+async function getBuild() {\n+\ttry {\n+\t\tconst build = viteDevServer\n+\t\t\t? await viteDevServer.ssrLoadModule('virtual:react-router/server-build')\n+\t\t\t: // @ts-expect-error - the file might not exist yet but it will\n+\t\t\t\tawait import('../build/server/index.js')\n+\n+\t\treturn { build: build as unknown as ServerBuild, error: null }\n+\t} catch (error) {\n+\t\t// Catch error and return null to make express happy and avoid an unrecoverable crash\n+\t\tconsole.error('Error creating build:', error)\n+\t\treturn { error: error, build: null as unknown as ServerBuild }\n+\t}\n+}\n+\n+if (!ALLOW_INDEXING) {\n+\tapp.use((_, res, next) => {\n+\t\tres.set('X-Robots-Tag', 'noindex, nofollow')\n+\t\tnext()\n+\t})\n+}\n+\n+app.all(\n+\t'*',\n+\tcreateRequestHandler({\n+\t\tgetLoadContext: () => ({ serverBuild: getBuild() }),\n+\t\tmode: MODE,\n+\t\tbuild: async () => {\n+\t\t\tconst { error, build } = await getBuild()\n+\t\t\t// gracefully \"catch\" the error\n+\t\t\tif (error) {\n+\t\t\t\tthrow error\n+\t\t\t}\n+\t\t\treturn build\n+\t\t},\n+\t}),\n+)\n+\n+const desiredPort = Number(process.env.PORT || 3000)\n+const portToUse = await getPort({\n+\tport: portNumbers(desiredPort, desiredPort + 100),\n+})\n+const portAvailable = desiredPort === portToUse\n+if (!portAvailable && !IS_DEV) {\n+\tconsole.log(`⚠️ Port ${desiredPort} is not available.`)\n+\tprocess.exit(1)\n+}\n+\n+const server = app.listen(portToUse, () => {\n+\tif (!portAvailable) {\n+\t\tconsole.warn(\n+\t\t\tstyleText(\n+\t\t\t\t'yellow',\n+\t\t\t\t`⚠️ Port ${desiredPort} is not available, using ${portToUse} instead.`,\n+\t\t\t),\n+\t\t)\n+\t}\n+\tconsole.log(`🚀 We have liftoff!`)\n+\tconst localUrl = `http://localhost:${portToUse}`\n+\tlet lanUrl: string | null = null\n+\tconst localIp = ipAddress() ?? 'Unknown'\n+\t// Check if the address is a private ip\n+\t// https://en.wikipedia.org/wiki/Private_network#Private_IPv4_address_spaces\n+\t// https://github.com/facebook/create-react-app/blob/d960b9e38c062584ff6cfb1a70e1512509a966e7/packages/react-dev-utils/WebpackDevServerUtils.js#LL48C9-L54C10\n+\tif (/^10[.]|^172[.](1[6-9]|2[0-9]|3[0-1])[.]|^192[.]168[.]/.test(localIp)) {\n+\t\tlanUrl = `http://${localIp}:${portToUse}`\n+\t}\n+\n+\tconsole.log(\n+\t\t`\n+${styleText('bold', 'Local:')} ${styleText('cyan', localUrl)}\n+${lanUrl ? `${styleText('bold', 'On Your Network:')} ${styleText('cyan', lanUrl)}` : ''}\n+${styleText('bold', 'Press Ctrl+C to stop')}\n+\t\t`.trim(),\n+\t)\n+})\n+\n+closeWithGrace(async ({ err }) => {\n+\tawait new Promise((resolve, reject) => {\n+\t\tserver.close((e) => (e ? reject(e) : resolve('ok')))\n+\t})\n+\tif (err) {\n+\t\tconsole.error(styleText('red', String(err)))\n+\t\tconsole.error(styleText('red', String(err.stack)))\n+\t\tif (SENTRY_ENABLED) {\n+\t\t\tSentry.captureException(err)\n+\t\t\tawait Sentry.flush(500)\n+\t\t}\n+\t}\n+})\ndiff --git a/server/utils/monitoring.ts b/server/utils/monitoring.ts\nnew file mode 100644\nindex 0000000..107521a\n--- /dev/null\n+++ b/server/utils/monitoring.ts\n@@ -0,0 +1,43 @@\n+import { PrismaInstrumentation } from '@prisma/instrumentation'\n+import { nodeProfilingIntegration } from '@sentry/profiling-node'\n+import * as Sentry from '@sentry/react-router'\n+\n+export function init() {\n+\tSentry.init({\n+\t\tdsn: process.env.SENTRY_DSN,\n+\t\tenvironment: process.env.NODE_ENV,\n+\t\tdenyUrls: [\n+\t\t\t/\\/resources\\/healthcheck/,\n+\t\t\t// TODO: be smarter about the public assets...\n+\t\t\t/\\/build\\//,\n+\t\t\t/\\/favicons\\//,\n+\t\t\t/\\/img\\//,\n+\t\t\t/\\/fonts\\//,\n+\t\t\t/\\/favicon.ico/,\n+\t\t\t/\\/site\\.webmanifest/,\n+\t\t],\n+\t\tintegrations: [\n+\t\t\tSentry.prismaIntegration({\n+\t\t\t\tprismaInstrumentation: new PrismaInstrumentation(),\n+\t\t\t}),\n+\t\t\tSentry.httpIntegration(),\n+\t\t\tnodeProfilingIntegration(),\n+\t\t],\n+\t\ttracesSampler(samplingContext) {\n+\t\t\t// ignore healthcheck transactions by other services (consul, etc.)\n+\t\t\tif (samplingContext.request?.url?.includes('/resources/healthcheck')) {\n+\t\t\t\treturn 0\n+\t\t\t}\n+\t\t\treturn process.env.NODE_ENV === 'production' ? 1 : 0\n+\t\t},\n+\t\tbeforeSendTransaction(event) {\n+\t\t\t// ignore all healthcheck related transactions\n+\t\t\t// note that name of header here is case-sensitive\n+\t\t\tif (event.request?.headers?.['x-healthcheck'] === 'true') {\n+\t\t\t\treturn null\n+\t\t\t}\n+\n+\t\t\treturn event\n+\t\t},\n+\t})\n+}\ndiff --git a/tests/db-utils.ts b/tests/db-utils.ts\nnew file mode 100644\nindex 0000000..f701a8a\n--- /dev/null\n+++ b/tests/db-utils.ts\n@@ -0,0 +1,100 @@\n+import { faker } from '@faker-js/faker'\n+import bcrypt from 'bcryptjs'\n+import { UniqueEnforcer } from 'enforce-unique'\n+\n+const uniqueUsernameEnforcer = new UniqueEnforcer()\n+\n+export function createUser() {\n+\tconst firstName = faker.person.firstName()\n+\tconst lastName = faker.person.lastName()\n+\n+\tconst username = uniqueUsernameEnforcer\n+\t\t.enforce(() => {\n+\t\t\treturn (\n+\t\t\t\tfaker.string.alphanumeric({ length: 2 }) +\n+\t\t\t\t'_' +\n+\t\t\t\tfaker.internet.username({\n+\t\t\t\t\tfirstName: firstName.toLowerCase(),\n+\t\t\t\t\tlastName: lastName.toLowerCase(),\n+\t\t\t\t})\n+\t\t\t)\n+\t\t})\n+\t\t.slice(0, 20)\n+\t\t.toLowerCase()\n+\t\t.replace(/[^a-z0-9_]/g, '_')\n+\treturn {\n+\t\tusername,\n+\t\tname: `${firstName} ${lastName}`,\n+\t\temail: `${username}@example.com`,\n+\t}\n+}\n+\n+export function createPassword(password: string = faker.internet.password()) {\n+\treturn {\n+\t\thash: bcrypt.hashSync(password, 10),\n+\t}\n+}\n+\n+let noteImages: Array<{ altText: string; objectKey: string }> | undefined\n+export async function getNoteImages() {\n+\tif (noteImages) return noteImages\n+\n+\tnoteImages = await Promise.all([\n+\t\t{\n+\t\t\taltText: 'a nice country house',\n+\t\t\tobjectKey: 'notes/0.png',\n+\t\t},\n+\t\t{\n+\t\t\taltText: 'a city scape',\n+\t\t\tobjectKey: 'notes/1.png',\n+\t\t},\n+\t\t{\n+\t\t\taltText: 'a sunrise',\n+\t\t\tobjectKey: 'notes/2.png',\n+\t\t},\n+\t\t{\n+\t\t\taltText: 'a group of friends',\n+\t\t\tobjectKey: 'notes/3.png',\n+\t\t},\n+\t\t{\n+\t\t\taltText: 'friends being inclusive of someone who looks lonely',\n+\t\t\tobjectKey: 'notes/4.png',\n+\t\t},\n+\t\t{\n+\t\t\taltText: 'an illustration of a hot air balloon',\n+\t\t\tobjectKey: 'notes/5.png',\n+\t\t},\n+\t\t{\n+\t\t\taltText:\n+\t\t\t\t'an office full of laptops and other office equipment that look like it was abandoned in a rush out of the building in an emergency years ago.',\n+\t\t\tobjectKey: 'notes/6.png',\n+\t\t},\n+\t\t{\n+\t\t\taltText: 'a rusty lock',\n+\t\t\tobjectKey: 'notes/7.png',\n+\t\t},\n+\t\t{\n+\t\t\taltText: 'something very happy in nature',\n+\t\t\tobjectKey: 'notes/8.png',\n+\t\t},\n+\t\t{\n+\t\t\taltText: `someone at the end of a cry session who's starting to feel a little better.`,\n+\t\t\tobjectKey: 'notes/9.png',\n+\t\t},\n+\t])\n+\n+\treturn noteImages\n+}\n+\n+let userImages: Array<{ objectKey: string }> | undefined\n+export async function getUserImages() {\n+\tif (userImages) return userImages\n+\n+\tuserImages = await Promise.all(\n+\t\tArray.from({ length: 10 }, (_, index) => ({\n+\t\t\tobjectKey: `user/${index}.jpg`,\n+\t\t})),\n+\t)\n+\n+\treturn userImages\n+}\ndiff --git a/tests/e2e/homepage.test.ts b/tests/e2e/homepage.test.ts\nnew file mode 100644\nindex 0000000..7e2b61c\n--- /dev/null\n+++ b/tests/e2e/homepage.test.ts\n@@ -0,0 +1,18 @@\n+import { test, expect } from '@playwright/test'\n+\n+// 🐨 Create a new test called \"displays the welcome heading\".\n+// 💰 test('test title', async (context) => {})\n+\n+// 🐨 In the test function arguments, destructure the test `context`\n+// and get the `page` object. You will use this object to interact\n+// with the browser page.\n+// 💰 async ({ page }) => {}\n+\n+// 🐨 In the test function, navigate to the homepage of your app\n+// by calling `page.goto()` and providing it with the correct URL.\n+// 💰 await page.goto(url)\n+\n+// 🐨 Finally, write an assertion that the heading with the text\n+// \"The Epic Stack\" is visible on the page.\n+// 💰 await expect(locator).toBeVisible()\n+// 💰 page.getByRole(role, { name })\ndiff --git a/tests/epicweb.test.ts b/tests/epicweb.test.ts\ndeleted file mode 100644\nindex 9069fd6..0000000\n--- a/tests/epicweb.test.ts\n+++ /dev/null\n@@ -1,11 +0,0 @@\n-import { test, expect } from '@playwright/test'\n-\n-test('displays the page heading', async ({ page }) => {\n-\tawait page.goto('https://epicweb.dev/')\n-\n-\tawait expect(\n-\t\tpage.getByRole('heading', {\n-\t\t\tname: 'Full Stack Workshop Training for Professional Web Developers',\n-\t\t}),\n-\t).toBeVisible()\n-})\ndiff --git a/tests/setup/custom-matchers.ts b/tests/setup/custom-matchers.ts\nnew file mode 100644\nindex 0000000..6e09a20\n--- /dev/null\n+++ b/tests/setup/custom-matchers.ts\n@@ -0,0 +1,169 @@\n+import * as setCookieParser from 'set-cookie-parser'\n+import { expect } from 'vitest'\n+import { sessionKey } from '#app/utils/auth.server.ts'\n+import { prisma } from '#app/utils/db.server.ts'\n+import { authSessionStorage } from '#app/utils/session.server.ts'\n+import {\n+\ttype ToastInput,\n+\ttoastSessionStorage,\n+\ttoastKey,\n+} from '#app/utils/toast.server.ts'\n+import { convertSetCookieToCookie } from '#tests/utils.ts'\n+\n+import '@testing-library/jest-dom/vitest'\n+\n+expect.extend({\n+\ttoHaveRedirect(response: unknown, redirectTo?: string) {\n+\t\tif (!(response instanceof Response)) {\n+\t\t\tthrow new Error('toHaveRedirect must be called with a Response')\n+\t\t}\n+\t\tconst location = response.headers.get('location')\n+\t\tconst redirectToSupplied = redirectTo !== undefined\n+\t\tif (redirectToSupplied !== Boolean(location)) {\n+\t\t\treturn {\n+\t\t\t\tpass: Boolean(location),\n+\t\t\t\tmessage: () =>\n+\t\t\t\t\t`Expected response to ${this.isNot ? 'not ' : ''}redirect${\n+\t\t\t\t\t\tredirectToSupplied\n+\t\t\t\t\t\t\t? ` to ${this.utils.printExpected(redirectTo)}`\n+\t\t\t\t\t\t\t: ''\n+\t\t\t\t\t} but got ${\n+\t\t\t\t\t\tlocation ? 'no redirect' : this.utils.printReceived(location)\n+\t\t\t\t\t}`,\n+\t\t\t}\n+\t\t}\n+\t\tconst isRedirectStatusCode = response.status >= 300 && response.status < 400\n+\t\tif (!isRedirectStatusCode) {\n+\t\t\treturn {\n+\t\t\t\tpass: false,\n+\t\t\t\tmessage: () =>\n+\t\t\t\t\t`Expected redirect to ${\n+\t\t\t\t\t\tthis.isNot ? 'not ' : ''\n+\t\t\t\t\t}be ${this.utils.printExpected(\n+\t\t\t\t\t\t'>= 300 && < 400',\n+\t\t\t\t\t)} but got ${this.utils.printReceived(response.status)}`,\n+\t\t\t}\n+\t\t}\n+\n+\t\tfunction toUrl(s?: string | null) {\n+\t\t\ts ??= ''\n+\t\t\treturn s.startsWith('http')\n+\t\t\t\t? new URL(s)\n+\t\t\t\t: new URL(s, 'https://example.com')\n+\t\t}\n+\n+\t\tfunction urlsMatch(u1: URL, u2: URL) {\n+\t\t\tconst u1SP = new URL(u1).searchParams\n+\t\t\tu1SP.sort()\n+\t\t\tconst u2SP = new URL(u2).searchParams\n+\t\t\tu2SP.sort()\n+\t\t\treturn (\n+\t\t\t\tu1.origin === u2.origin &&\n+\t\t\t\tu1.pathname === u2.pathname &&\n+\t\t\t\tu1SP.toString() === u2SP.toString() &&\n+\t\t\t\tu1.hash === u2.hash\n+\t\t\t)\n+\t\t}\n+\n+\t\treturn {\n+\t\t\tpass:\n+\t\t\t\tlocation == redirectTo || urlsMatch(toUrl(location), toUrl(redirectTo)),\n+\t\t\tmessage: () =>\n+\t\t\t\t`Expected response to ${\n+\t\t\t\t\tthis.isNot ? 'not ' : ''\n+\t\t\t\t}redirect to ${this.utils.printExpected(\n+\t\t\t\t\tredirectTo,\n+\t\t\t\t)} but got ${this.utils.printReceived(location)}`,\n+\t\t}\n+\t},\n+\tasync toHaveSessionForUser(response: Response, userId: string) {\n+\t\tconst setCookies = response.headers.getSetCookie()\n+\t\tconst sessionSetCookie = setCookies.find(\n+\t\t\t(c) => setCookieParser.parseString(c).name === 'en_session',\n+\t\t)\n+\n+\t\tif (!sessionSetCookie) {\n+\t\t\treturn {\n+\t\t\t\tpass: false,\n+\t\t\t\tmessage: () =>\n+\t\t\t\t\t`The en_session set-cookie header was${\n+\t\t\t\t\t\tthis.isNot ? '' : ' not'\n+\t\t\t\t\t} defined`,\n+\t\t\t}\n+\t\t}\n+\n+\t\tconst authSession = await authSessionStorage.getSession(\n+\t\t\tconvertSetCookieToCookie(sessionSetCookie),\n+\t\t)\n+\t\tconst sessionValue = authSession.get(sessionKey)\n+\n+\t\tif (!sessionValue) {\n+\t\t\treturn {\n+\t\t\t\tpass: false,\n+\t\t\t\tmessage: () => `A session was${this.isNot ? '' : ' not'} set in cookie`,\n+\t\t\t}\n+\t\t}\n+\n+\t\tconst session = await prisma.session.findUnique({\n+\t\t\tselect: { id: true },\n+\t\t\twhere: { userId, id: sessionValue },\n+\t\t})\n+\n+\t\treturn {\n+\t\t\tpass: Boolean(session),\n+\t\t\tmessage: () =>\n+\t\t\t\t`A session was${\n+\t\t\t\t\tthis.isNot ? ' not' : ''\n+\t\t\t\t} created in the database for ${userId}`,\n+\t\t}\n+\t},\n+\tasync toSendToast(response: Response, toast: ToastInput) {\n+\t\tconst setCookies = response.headers.getSetCookie()\n+\t\tconst toastSetCookie = setCookies.find(\n+\t\t\t(c) => setCookieParser.parseString(c).name === 'en_toast',\n+\t\t)\n+\n+\t\tif (!toastSetCookie) {\n+\t\t\treturn {\n+\t\t\t\tpass: false,\n+\t\t\t\tmessage: () =>\n+\t\t\t\t\t`en_toast set-cookie header was${this.isNot ? '' : ' not'} defined`,\n+\t\t\t}\n+\t\t}\n+\n+\t\tconst toastSession = await toastSessionStorage.getSession(\n+\t\t\tconvertSetCookieToCookie(toastSetCookie),\n+\t\t)\n+\t\tconst toastValue = toastSession.get(toastKey)\n+\n+\t\tif (!toastValue) {\n+\t\t\treturn {\n+\t\t\t\tpass: false,\n+\t\t\t\tmessage: () => `toast was${this.isNot ? '' : ' not'} set in session`,\n+\t\t\t}\n+\t\t}\n+\n+\t\tconst pass = this.equals(toastValue, toast)\n+\n+\t\tconst diff = pass ? null : `\\n${this.utils.diff(toastValue, toast)}`\n+\n+\t\treturn {\n+\t\t\tpass,\n+\t\t\tmessage: () =>\n+\t\t\t\t`toast in the response ${\n+\t\t\t\t\tthis.isNot ? 'does not match' : 'matches'\n+\t\t\t\t} the expected toast${diff}`,\n+\t\t}\n+\t},\n+})\n+\n+interface CustomMatchers {\n+\ttoHaveRedirect(redirectTo: string | null): R\n+\ttoHaveSessionForUser(userId: string): Promise\n+\ttoSendToast(toast: ToastInput): Promise\n+}\n+\n+declare module 'vitest' {\n+\tinterface Assertion extends CustomMatchers {}\n+\tinterface AsymmetricMatchersContaining extends CustomMatchers {}\n+}\ndiff --git a/tests/setup/db-setup.ts b/tests/setup/db-setup.ts\nnew file mode 100644\nindex 0000000..2cbc646\n--- /dev/null\n+++ b/tests/setup/db-setup.ts\n@@ -0,0 +1,20 @@\n+import path from 'node:path'\n+import fsExtra from 'fs-extra'\n+import { afterAll, beforeEach } from 'vitest'\n+import { BASE_DATABASE_PATH } from './global-setup.ts'\n+\n+const databaseFile = `./tests/prisma/data.${process.env.VITEST_POOL_ID || 0}.db`\n+const databasePath = path.join(process.cwd(), databaseFile)\n+process.env.DATABASE_URL = `file:${databasePath}`\n+\n+beforeEach(async () => {\n+\tawait fsExtra.copyFile(BASE_DATABASE_PATH, databasePath)\n+})\n+\n+afterAll(async () => {\n+\t// we *must* use dynamic imports here so the process.env.DATABASE_URL is set\n+\t// before prisma is imported and initialized\n+\tconst { prisma } = await import('#app/utils/db.server.ts')\n+\tawait prisma.$disconnect()\n+\tawait fsExtra.remove(databasePath)\n+})\ndiff --git a/tests/setup/global-setup.ts b/tests/setup/global-setup.ts\nnew file mode 100644\nindex 0000000..a81d74d\n--- /dev/null\n+++ b/tests/setup/global-setup.ts\n@@ -0,0 +1,38 @@\n+import path from 'node:path'\n+import { execaCommand } from 'execa'\n+import fsExtra from 'fs-extra'\n+import 'dotenv/config'\n+import '#app/utils/env.server.ts'\n+import '#app/utils/cache.server.ts'\n+\n+export const BASE_DATABASE_PATH = path.join(\n+\tprocess.cwd(),\n+\t`./tests/prisma/base.db`,\n+)\n+\n+export async function setup() {\n+\tconst databaseExists = await fsExtra.pathExists(BASE_DATABASE_PATH)\n+\n+\tif (databaseExists) {\n+\t\tconst databaseLastModifiedAt = (await fsExtra.stat(BASE_DATABASE_PATH))\n+\t\t\t.mtime\n+\t\tconst prismaSchemaLastModifiedAt = (\n+\t\t\tawait fsExtra.stat('./prisma/schema.prisma')\n+\t\t).mtime\n+\n+\t\tif (prismaSchemaLastModifiedAt < databaseLastModifiedAt) {\n+\t\t\treturn\n+\t\t}\n+\t}\n+\n+\tawait execaCommand(\n+\t\t'npx prisma migrate reset --force --skip-seed --skip-generate',\n+\t\t{\n+\t\t\tstdio: 'inherit',\n+\t\t\tenv: {\n+\t\t\t\t...process.env,\n+\t\t\t\tDATABASE_URL: `file:${BASE_DATABASE_PATH}`,\n+\t\t\t},\n+\t\t},\n+\t)\n+}\ndiff --git a/tests/setup/setup-test-env.ts b/tests/setup/setup-test-env.ts\nnew file mode 100644\nindex 0000000..547640e\n--- /dev/null\n+++ b/tests/setup/setup-test-env.ts\n@@ -0,0 +1,35 @@\n+import 'dotenv/config'\n+import './db-setup.ts'\n+import '#app/utils/env.server.ts'\n+// we need these to be imported first 👆\n+\n+import { cleanup } from '@testing-library/react'\n+import { afterEach, beforeEach, vi, type MockInstance } from 'vitest'\n+import './custom-matchers.ts'\n+\n+afterEach(() => cleanup())\n+\n+export let consoleError: MockInstance<(typeof console)['error']>\n+export let consoleWarn: MockInstance<(typeof console)['warn']>\n+\n+beforeEach(() => {\n+\tconst originalConsoleError = console.error\n+\tconsoleError = vi.spyOn(console, 'error')\n+\tconsoleError.mockImplementation(\n+\t\t(...args: Parameters) => {\n+\t\t\toriginalConsoleError(...args)\n+\t\t\tthrow new Error(\n+\t\t\t\t'Console error was called. Call consoleError.mockImplementation(() => {}) if this is expected.',\n+\t\t\t)\n+\t\t},\n+\t)\n+\n+\tconst originalConsoleWarn = console.warn\n+\tconsoleWarn = vi.spyOn(console, 'warn')\n+\tconsoleWarn.mockImplementation((...args: Parameters) => {\n+\t\toriginalConsoleWarn(...args)\n+\t\tthrow new Error(\n+\t\t\t'Console warn was called. Call consoleWarn.mockImplementation(() => {}) if this is expected.',\n+\t\t)\n+\t})\n+})\ndiff --git a/tests/utils.ts b/tests/utils.ts\nnew file mode 100644\nindex 0000000..b39457d\n--- /dev/null\n+++ b/tests/utils.ts\n@@ -0,0 +1,33 @@\n+import * as setCookieParser from 'set-cookie-parser'\n+import { sessionKey } from '#app/utils/auth.server.ts'\n+import { authSessionStorage } from '#app/utils/session.server.ts'\n+\n+export const BASE_URL = 'https://www.epicstack.dev'\n+\n+export function convertSetCookieToCookie(setCookie: string) {\n+\tconst parsedCookie = setCookieParser.parseString(setCookie)\n+\treturn new URLSearchParams({\n+\t\t[parsedCookie.name]: parsedCookie.value,\n+\t}).toString()\n+}\n+\n+export async function getSessionSetCookieHeader(\n+\tsession: { id: string },\n+\texistingCookie?: string,\n+) {\n+\tconst authSession = await authSessionStorage.getSession(existingCookie)\n+\tauthSession.set(sessionKey, session.id)\n+\tconst setCookieHeader = await authSessionStorage.commitSession(authSession)\n+\treturn setCookieHeader\n+}\n+\n+export async function getSessionCookieHeader(\n+\tsession: { id: string },\n+\texistingCookie?: string,\n+) {\n+\tconst setCookieHeader = await getSessionSetCookieHeader(\n+\t\tsession,\n+\t\texistingCookie,\n+\t)\n+\treturn convertSetCookieToCookie(setCookieHeader)\n+}\ndiff --git a/tsconfig.json b/tsconfig.json\nindex 113bc8e..057541c 100644\n--- a/tsconfig.json\n+++ b/tsconfig.json\n@@ -1,11 +1,17 @@\n {\n-\t\"include\": [\"**/*.ts\"],\n-\t\"exclude\": [\"node_modules\"],\n+\t\"include\": [\"**/*.ts\", \"**/*.tsx\", \".react-router/types/**/*\"],\n+\t\"extends\": [\"@epic-web/config/typescript\"],\n \t\"compilerOptions\": {\n-\t\t\"strict\": true,\n-\t\t\"skipLibCheck\": true,\n-\t\t\"target\": \"esnext\",\n-\t\t\"module\": \"esnext\",\n-\t\t\"moduleResolution\": \"node\"\n+\t\t// TODO: Probably should move this into epic-web/config\n+\t\t\"types\": [\"@react-router/node\", \"vite/client\"],\n+\t\t\"rootDirs\": [\".\", \"./.react-router/types\"],\n+\t\t\"paths\": {\n+\t\t\t\"#app/*\": [\"./app/*\"],\n+\t\t\t\"#tests/*\": [\"./tests/*\"],\n+\t\t\t\"@/icon-name\": [\n+\t\t\t\t\"./app/components/ui/icons/types.ts\",\n+\t\t\t\t\"./types/icon-name.d.ts\"\n+\t\t\t]\n+\t\t}\n \t}\n }\ndiff --git a/types/deps.d.ts b/types/deps.d.ts\nnew file mode 100644\nindex 0000000..121be70\n--- /dev/null\n+++ b/types/deps.d.ts\n@@ -0,0 +1,6 @@\n+// This module should contain type definitions for modules which do not have\n+// their own type definitions and are not available on DefinitelyTyped.\n+\n+// declare module 'some-untyped-pkg' {\n+// \texport function foo(): void;\n+// }\ndiff --git a/types/env.env.d.ts b/types/env.env.d.ts\nnew file mode 100644\nindex 0000000..8d2f951\n--- /dev/null\n+++ b/types/env.env.d.ts\n@@ -0,0 +1,2 @@\n+/// \n+/// \ndiff --git a/types/icon-name.d.ts b/types/icon-name.d.ts\nnew file mode 100644\nindex 0000000..6f47700\n--- /dev/null\n+++ b/types/icon-name.d.ts\n@@ -0,0 +1,3 @@\n+// This file is a fallback until you run npm run build:icons\n+\n+export type IconName = string\ndiff --git a/types/reset.d.ts b/types/reset.d.ts\nnew file mode 100644\nindex 0000000..fa7fab4\n--- /dev/null\n+++ b/types/reset.d.ts\n@@ -0,0 +1,2 @@\n+// Do not add any other lines of code to this file!\n+import '@epic-web/config/reset.d.ts'\ndiff --git a/vite.config.ts b/vite.config.ts\nnew file mode 100644\nindex 0000000..1f10a67\n--- /dev/null\n+++ b/vite.config.ts\n@@ -0,0 +1,87 @@\n+import { reactRouter } from '@react-router/dev/vite'\n+import {\n+\ttype SentryReactRouterBuildOptions,\n+\tsentryReactRouter,\n+} from '@sentry/react-router'\n+import tailwindcss from '@tailwindcss/vite'\n+import { reactRouterDevTools } from 'react-router-devtools'\n+import { defineConfig } from 'vite'\n+import { envOnlyMacros } from 'vite-env-only'\n+import { iconsSpritesheet } from 'vite-plugin-icons-spritesheet'\n+\n+const MODE = process.env.NODE_ENV\n+\n+export default defineConfig((config) => ({\n+\tbuild: {\n+\t\ttarget: 'es2022',\n+\t\tcssMinify: MODE === 'production',\n+\n+\t\trollupOptions: {\n+\t\t\texternal: [/node:.*/, 'fsevents'],\n+\t\t},\n+\n+\t\tassetsInlineLimit: (source: string) => {\n+\t\t\tif (\n+\t\t\t\tsource.endsWith('favicon.svg') ||\n+\t\t\t\tsource.endsWith('apple-touch-icon.png')\n+\t\t\t) {\n+\t\t\t\treturn false\n+\t\t\t}\n+\t\t},\n+\n+\t\tsourcemap: true,\n+\t},\n+\tserver: {\n+\t\twatch: {\n+\t\t\tignored: ['**/playwright-report/**'],\n+\t\t},\n+\t},\n+\tsentryConfig,\n+\tplugins: [\n+\t\tenvOnlyMacros(),\n+\t\ttailwindcss(),\n+\t\treactRouterDevTools(),\n+\n+\t\ticonsSpritesheet({\n+\t\t\tinputDir: './other/svg-icons',\n+\t\t\toutputDir: './app/components/ui/icons',\n+\t\t\tfileName: 'sprite.svg',\n+\t\t\twithTypes: true,\n+\t\t\ticonNameTransformer: (name) => name,\n+\t\t}),\n+\t\t// it would be really nice to have this enabled in tests, but we'll have to\n+\t\t// wait until https://github.com/remix-run/remix/issues/9871 is fixed\n+\t\tMODE === 'test' ? null : reactRouter(),\n+\t\tMODE === 'production' && process.env.SENTRY_AUTH_TOKEN\n+\t\t\t? sentryReactRouter(sentryConfig, config)\n+\t\t\t: null,\n+\t],\n+\ttest: {\n+\t\tinclude: ['./app/**/*.test.{ts,tsx}'],\n+\t\tsetupFiles: ['./tests/setup/setup-test-env.ts'],\n+\t\tglobalSetup: ['./tests/setup/global-setup.ts'],\n+\t\trestoreMocks: true,\n+\t\tcoverage: {\n+\t\t\tinclude: ['app/**/*.{ts,tsx}'],\n+\t\t\tall: true,\n+\t\t},\n+\t},\n+}))\n+\n+const sentryConfig: SentryReactRouterBuildOptions = {\n+\tauthToken: process.env.SENTRY_AUTH_TOKEN,\n+\torg: process.env.SENTRY_ORG,\n+\tproject: process.env.SENTRY_PROJECT,\n+\n+\tunstable_sentryVitePluginOptions: {\n+\t\trelease: {\n+\t\t\tname: process.env.COMMIT_SHA,\n+\t\t\tsetCommits: {\n+\t\t\t\tauto: true,\n+\t\t\t},\n+\t\t},\n+\t\tsourcemaps: {\n+\t\t\tfilesToDeleteAfterUpload: ['./build/**/*.map', '.server-build/**/*.map'],\n+\t\t},\n+\t},\n+}"]

.env-0+29App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

.env.example-0+29App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

.github/PULL_REQUEST_TEMPLATE.md-0+15App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

.github/workflows/deploy.yml-0+229App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

.gitignore-0+28App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

.npmrc-0+4App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

.prettierignore-0+15App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/assets/favicons/apple-touch-icon.png-0+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/assets/favicons/favicon.svg-0+13App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/error-boundary.tsx-0+53App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/floating-toolbar.tsx-0+2App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/forms.tsx-0+202App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/progress-bar.tsx-0+63App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/search-bar.tsx-0+63App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/spacer.tsx-0+57App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/toaster.tsx-0+16App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/button.tsx-0+60App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/checkbox.tsx-0+41App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/dropdown-menu.tsx-0+243App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/icon.tsx-0+77App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/input-otp.tsx-0+69App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/input.tsx-0+23App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/label.tsx-0+22App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/sonner.tsx-0+26App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/status-button.tsx-0+78App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/textarea.tsx-0+20App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/ui/tooltip.tsx-0+42App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/user-dropdown.tsx-0+71App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/entry.client.tsx-0+11App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/entry.server.tsx-0+143App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/root.tsx-0+263App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/$.tsx-0+47App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/auth.$provider.callback.test.ts-0+265App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/auth.$provider.callback.ts-0+200App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/auth_.$provider.ts-0+34App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/forgot-password.tsx-0+189App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/login.server.ts-0+158App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/login.tsx-0+307App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/logout.tsx-0+11App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/onboarding.server.ts-0+19App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/onboarding.tsx-0+245App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/onboarding_.$provider.server.ts-0+19App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/onboarding_.$provider.tsx-0+271App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/reset-password.server.ts-0+34App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/reset-password.tsx-0+151App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/signup.tsx-0+194App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/verify.server.ts-0+200App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/verify.tsx-0+144App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/webauthn+/authentication.ts-0+113App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/webauthn+/registration.ts-0+136App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_auth+/webauthn+/utils.server.ts-0+89App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/about.tsx-0+3App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/index.tsx-0+101App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/docker.svg-0+47App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/eslint.svg-0+17App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/faker.svg-0+736App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/fly.svg-0+1App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/github.svg-0+1App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/logos.ts-0+173App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/msw.svg-0+13App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/playwright.svg-0+9App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/prettier.svg-0+76App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/prisma.svg-0+9App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/radix.svg-0+1App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/react-email.svg-0+1App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/remix.svg-0+25App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/resend.svg-0+31App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/sentry.svg-0+6App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/shadcn-ui.svg-0+1App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/sqlite.svg-0+67App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/stars.jpg-0+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/tailwind.svg-0+1App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/testing-library.png-0+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/typescript.svg-0+6App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/vitest.svg-0+5App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/logos/zod.svg-0+46App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/privacy.tsx-0+3App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/support.tsx-0+3App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_marketing+/tos.tsx-0+3App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_seo+/robots[.]txt.ts-0+9App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2