Split /settings into 4 sub-pages with a sidebar layout

Stream E from docs/information-architecture.md. The settings page was
a single scrollable list of five concerns; split it into four
deep-linkable sections behind a shared sidebar layout, so each
concern has a stable URL, a focused loader (only fetches what that
section needs), and a meta title that reflects the section.

Sections:
- /settings/profile — display name, bio, profile visibility
- /settings/account — email change + danger-zone account deletion
- /settings/security — passkeys
- /settings/connections — sync providers (Wahoo today)

URL pattern: nested routes under a layout. /settings itself
redirects to /settings/profile so the bare URL still lands somewhere
useful without rendering an empty container.

- apps/journal/app/routes/settings.tsx — converted from a single
  scrollable page to a layout that renders the sidebar nav + Outlet.
- apps/journal/app/routes/settings.{profile,account,security,
  connections,_index}.tsx — new files, each with its own loader and
  meta. _index redirects to /settings/profile.
- apps/journal/app/routes.ts — registers the four children + index
  under the settings layout route.
- packages/i18n/src/locales/{en,de}.ts — new settings.nav.{profile,
  account,security,connections} keys for the sidebar labels.

Specs (profile-settings, account-management, connected-services)
are unchanged — they describe behavior, not URL structure. The
journal-landing spec is also unchanged; the navbar still has a
single "Settings" link.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/journal/app/routes.ts

@@ -36,7 +36,13 @@ export default [
   route("notifications", "routes/notifications.tsx"),
   route("api/notifications/:id/read", "routes/api.notifications.$id.read.ts"),
   route("api/notifications/read-all", "routes/api.notifications.read-all.ts"),
-  route("settings", "routes/settings.tsx"),
+  route("settings", "routes/settings.tsx", [
+    index("routes/settings._index.tsx"),
+    route("profile", "routes/settings.profile.tsx"),
+    route("account", "routes/settings.account.tsx"),
+    route("security", "routes/settings.security.tsx"),
+    route("connections", "routes/settings.connections.tsx"),
+  ]),
   route("api/settings/profile", "routes/api.settings.profile.ts"),
   route("api/settings/email", "routes/api.settings.email.ts"),
   route("api/settings/passkey/delete", "routes/api.settings.passkey.delete.ts"),

apps/journal/app/routes/settings._index.tsx

@@ -0,0 +1,8 @@
+import { redirect } from "react-router";
+
+// /settings lands on the Profile section. Keeps deep-link friendliness
+// (every section has a stable URL) without making the bare /settings
+// URL feel empty.
+export function loader() {
+  return redirect("/settings/profile");
+}

apps/journal/app/routes/settings.account.tsx

@@ -0,0 +1,142 @@
+import { useState, useEffect } from "react";
+import { data, redirect, useFetcher } from "react-router";
+import { useTranslation } from "react-i18next";
+import type { Route } from "./+types/settings.account";
+import { getSessionUser } from "~/lib/auth.server";
+
+export function meta() {
+  return [{ title: "Account — Settings — trails.cool" }];
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const user = await getSessionUser(request);
+  if (!user) throw redirect("/auth/login");
+  return data({
+    user: {
+      username: user.username,
+      email: user.email,
+    },
+  });
+}
+
+export default function AccountSettings({ loaderData }: Route.ComponentProps) {
+  const { user } = loaderData;
+  const { t } = useTranslation(["journal", "common"]);
+  const emailFetcher = useFetcher();
+
+  const [newEmail, setNewEmail] = useState("");
+  const [showEmailForm, setShowEmailForm] = useState(false);
+  const [emailSent, setEmailSent] = useState(false);
+
+  const [deleteConfirm, setDeleteConfirm] = useState(false);
+  const [deleteUsername, setDeleteUsername] = useState("");
+
+  useEffect(() => {
+    if (emailFetcher.data && !emailFetcher.data.error) {
+      setEmailSent(true);
+    }
+  }, [emailFetcher.data]);
+
+  return (
+    <section>
+      <h2 className="text-lg font-semibold text-gray-900">{t("settings.account.title")}</h2>
+
+      {/* Email */}
+      <div className="mt-4">
+        <label className="block text-sm font-medium text-gray-700">{t("auth.email")}</label>
+        <div className="mt-1 flex items-center gap-3">
+          <p className="text-sm text-gray-900">{user.email}</p>
+          {!showEmailForm && !emailSent && (
+            <button
+              onClick={() => setShowEmailForm(true)}
+              className="text-sm text-blue-600 hover:text-blue-800"
+            >
+              {t("settings.account.changeEmail")}
+            </button>
+          )}
+        </div>
+
+        {showEmailForm && !emailSent && (
+          <emailFetcher.Form method="post" action="/api/settings/email" className="mt-2 flex gap-2">
+            <input
+              name="newEmail"
+              type="email"
+              required
+              value={newEmail}
+              onChange={(e) => setNewEmail(e.target.value)}
+              placeholder={t("settings.account.newEmailPlaceholder")}
+              className="block flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            />
+            <button
+              type="submit"
+              disabled={emailFetcher.state !== "idle"}
+              className="rounded-md bg-blue-600 px-3 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
+            >
+              {t("settings.account.sendVerification")}
+            </button>
+            <button
+              type="button"
+              onClick={() => { setShowEmailForm(false); setNewEmail(""); }}
+              className="text-sm text-gray-500 hover:text-gray-700"
+            >
+              {t("common:cancel")}
+            </button>
+          </emailFetcher.Form>
+        )}
+
+        {emailFetcher.data?.error && (
+          <p className="mt-2 text-sm text-red-600">{emailFetcher.data.error}</p>
+        )}
+
+        {emailSent && (
+          <p className="mt-2 text-sm text-green-600">{t("settings.account.verificationSent")}</p>
+        )}
+      </div>
+
+      {/* Delete Account */}
+      <div className="mt-8 rounded-md border border-red-200 bg-red-50 p-4">
+        <h3 className="text-sm font-semibold text-red-800">{t("settings.account.dangerZone")}</h3>
+        <p className="mt-1 text-sm text-red-700">{t("settings.account.deleteDescription")}</p>
+
+        {!deleteConfirm ? (
+          <button
+            onClick={() => setDeleteConfirm(true)}
+            className="mt-3 rounded-md border border-red-300 bg-white px-4 py-2 text-sm text-red-700 hover:bg-red-50"
+          >
+            {t("settings.account.deleteAccount")}
+          </button>
+        ) : (
+          <div className="mt-3 space-y-2">
+            <p className="text-sm text-red-800">
+              {t("settings.account.deleteConfirmPrompt", { username: user.username })}
+            </p>
+            <input
+              type="text"
+              value={deleteUsername}
+              onChange={(e) => setDeleteUsername(e.target.value)}
+              placeholder={user.username}
+              className="block w-full rounded-md border border-red-300 px-3 py-2 text-sm"
+            />
+            <div className="flex gap-2">
+              <form method="post" action="/api/settings/delete-account">
+                <button
+                  type="submit"
+                  disabled={deleteUsername !== user.username}
+                  className="rounded-md bg-red-600 px-4 py-2 text-sm text-white hover:bg-red-700 disabled:opacity-50"
+                >
+                  {t("settings.account.confirmDelete")}
+                </button>
+              </form>
+              <button
+                onClick={() => { setDeleteConfirm(false); setDeleteUsername(""); }}
+                className="text-sm text-gray-500 hover:text-gray-700"
+              >
+                {t("common:cancel")}
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

apps/journal/app/routes/settings.connections.tsx

@@ -0,0 +1,86 @@
+import { data, redirect } from "react-router";
+import { useTranslation } from "react-i18next";
+import { eq } from "drizzle-orm";
+import type { Route } from "./+types/settings.connections";
+import { getSessionUser } from "~/lib/auth.server";
+import { getDb } from "~/lib/db";
+import { syncConnections } from "@trails-cool/db/schema/journal";
+import { getAllProviders } from "~/lib/sync/registry";
+
+export function meta() {
+  return [{ title: "Connected services — Settings — trails.cool" }];
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const user = await getSessionUser(request);
+  if (!user) throw redirect("/auth/login");
+
+  const db = getDb();
+  const connections = await db
+    .select({
+      provider: syncConnections.provider,
+      providerUserId: syncConnections.providerUserId,
+    })
+    .from(syncConnections)
+    .where(eq(syncConnections.userId, user.id));
+
+  const providers = getAllProviders().map((p) => {
+    const conn = connections.find((c) => c.provider === p.id);
+    return { id: p.id, name: p.name, connected: !!conn, providerUserId: conn?.providerUserId };
+  });
+
+  return data({ providers });
+}
+
+export default function ConnectionsSettings({ loaderData }: Route.ComponentProps) {
+  const { providers } = loaderData;
+  const { t } = useTranslation(["journal"]);
+
+  return (
+    <section>
+      <h2 className="text-lg font-semibold text-gray-900">{t("settings.services.title")}</h2>
+      <div className="mt-4 space-y-3">
+        {providers.map((p) => (
+          <div
+            key={p.id}
+            className="flex items-center justify-between rounded-md border border-gray-200 px-4 py-3"
+          >
+            <div>
+              <p className="font-medium text-gray-900">{p.name}</p>
+              {p.connected && p.providerUserId && (
+                <p className="text-xs text-gray-500">
+                  {t("settings.services.connectedAs", { id: p.providerUserId })}
+                </p>
+              )}
+            </div>
+            {p.connected ? (
+              <div className="flex items-center gap-3">
+                <a
+                  href={`/sync/import/${p.id}`}
+                  className="text-sm text-blue-600 hover:underline"
+                >
+                  {t("sync.import")}
+                </a>
+                <form method="post" action={`/api/sync/disconnect/${p.id}`}>
+                  <button
+                    type="submit"
+                    className="text-sm text-red-600 hover:underline"
+                  >
+                    {t("settings.services.disconnect")}
+                  </button>
+                </form>
+              </div>
+            ) : (
+              <a
+                href={`/api/sync/connect/${p.id}`}
+                className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white hover:bg-blue-700"
+              >
+                {t("settings.services.connect")}
+              </a>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

apps/journal/app/routes/settings.profile.tsx

@@ -0,0 +1,138 @@
+import { useState, useEffect } from "react";
+import { data, redirect, useFetcher } from "react-router";
+import { useTranslation } from "react-i18next";
+import type { Route } from "./+types/settings.profile";
+import { getSessionUser } from "~/lib/auth.server";
+
+export function meta() {
+  return [{ title: "Profile — Settings — trails.cool" }];
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const user = await getSessionUser(request);
+  if (!user) throw redirect("/auth/login");
+  return data({
+    user: {
+      username: user.username,
+      displayName: user.displayName,
+      bio: user.bio,
+      profileVisibility: user.profileVisibility,
+    },
+  });
+}
+
+export default function ProfileSettings({ loaderData }: Route.ComponentProps) {
+  const { user } = loaderData;
+  const { t } = useTranslation(["journal", "common"]);
+  const profileFetcher = useFetcher();
+
+  const [displayName, setDisplayName] = useState(user.displayName ?? "");
+  const [bio, setBio] = useState(user.bio ?? "");
+  const [profileVisibility, setProfileVisibility] = useState<"public" | "private">(
+    user.profileVisibility,
+  );
+  const [profileSaved, setProfileSaved] = useState(false);
+
+  useEffect(() => {
+    if (profileFetcher.data && !profileFetcher.data.error) {
+      setProfileSaved(true);
+      const timer = setTimeout(() => setProfileSaved(false), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [profileFetcher.data]);
+
+  return (
+    <section>
+      <h2 className="text-lg font-semibold text-gray-900">{t("settings.profile.title")}</h2>
+      <profileFetcher.Form method="post" action="/api/settings/profile" className="mt-4 space-y-4">
+        <div>
+          <label htmlFor="displayName" className="block text-sm font-medium text-gray-700">
+            {t("settings.profile.displayName")}
+          </label>
+          <input
+            id="displayName"
+            name="displayName"
+            type="text"
+            value={displayName}
+            onChange={(e) => setDisplayName(e.target.value)}
+            placeholder={user.username}
+            className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          />
+        </div>
+        <div>
+          <label htmlFor="bio" className="block text-sm font-medium text-gray-700">
+            {t("settings.profile.bio")}
+          </label>
+          <textarea
+            id="bio"
+            name="bio"
+            value={bio}
+            onChange={(e) => setBio(e.target.value)}
+            maxLength={160}
+            rows={3}
+            className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          />
+          <p className="mt-1 text-xs text-gray-500">{bio.length}/160</p>
+        </div>
+        <fieldset>
+          <legend className="block text-sm font-medium text-gray-700">
+            {t("settings.profile.visibility.label")}
+          </legend>
+          <div className="mt-2 space-y-2">
+            <label className="flex items-start gap-2 text-sm">
+              <input
+                type="radio"
+                name="profileVisibility"
+                value="public"
+                checked={profileVisibility === "public"}
+                onChange={() => setProfileVisibility("public")}
+                className="mt-0.5"
+              />
+              <span>
+                <span className="font-medium text-gray-900">
+                  {t("settings.profile.visibility.public")}
+                </span>
+                <span className="ml-2 text-gray-500">
+                  {t("settings.profile.visibility.publicHelp")}
+                </span>
+              </span>
+            </label>
+            <label className="flex items-start gap-2 text-sm">
+              <input
+                type="radio"
+                name="profileVisibility"
+                value="private"
+                checked={profileVisibility === "private"}
+                onChange={() => setProfileVisibility("private")}
+                className="mt-0.5"
+              />
+              <span>
+                <span className="font-medium text-gray-900">
+                  {t("settings.profile.visibility.private")}
+                </span>
+                <span className="ml-2 text-gray-500">
+                  {t("settings.profile.visibility.privateHelp")}
+                </span>
+              </span>
+            </label>
+          </div>
+        </fieldset>
+        <div className="flex items-center gap-3">
+          <button
+            type="submit"
+            disabled={profileFetcher.state !== "idle"}
+            className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
+          >
+            {profileFetcher.state !== "idle" ? t("common:loading") : t("common:save")}
+          </button>
+          {profileSaved && (
+            <p className="text-sm text-green-600">{t("settings.profile.saved")}</p>
+          )}
+          {profileFetcher.data?.error && (
+            <p className="text-sm text-red-600">{profileFetcher.data.error}</p>
+          )}
+        </div>
+      </profileFetcher.Form>
+    </section>
+  );
+}

apps/journal/app/routes/settings.security.tsx

@@ -0,0 +1,174 @@
+import { useState, useEffect, useCallback } from "react";
+import { data, redirect, useFetcher } from "react-router";
+import { useTranslation } from "react-i18next";
+import { eq } from "drizzle-orm";
+import type { Route } from "./+types/settings.security";
+import { getSessionUser } from "~/lib/auth.server";
+import { getDb } from "~/lib/db";
+import { credentials } from "@trails-cool/db/schema/journal";
+import { ClientDate } from "~/components/ClientDate";
+
+export function meta() {
+  return [{ title: "Security — Settings — trails.cool" }];
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const user = await getSessionUser(request);
+  if (!user) throw redirect("/auth/login");
+
+  const db = getDb();
+  const passkeys = await db
+    .select({
+      id: credentials.id,
+      deviceType: credentials.deviceType,
+      transports: credentials.transports,
+      createdAt: credentials.createdAt,
+    })
+    .from(credentials)
+    .where(eq(credentials.userId, user.id));
+
+  return data({
+    userId: user.id,
+    passkeys: passkeys.map((p) => ({
+      id: p.id,
+      deviceType: p.deviceType,
+      transports: p.transports as string[] | null,
+      createdAt: p.createdAt.toISOString(),
+    })),
+  });
+}
+
+function transportLabel(transports: string[] | null, t: (key: string) => string): string {
+  if (!transports || transports.length === 0) return t("settings.security.passkey");
+  if (transports.includes("internal")) return t("settings.security.thisDevice");
+  if (transports.includes("usb")) return t("settings.security.securityKey");
+  if (transports.includes("ble")) return t("settings.security.bluetooth");
+  if (transports.includes("hybrid")) return t("settings.security.phoneOrTablet");
+  return t("settings.security.passkey");
+}
+
+export default function SecuritySettings({ loaderData }: Route.ComponentProps) {
+  const { userId, passkeys } = loaderData;
+  const { t } = useTranslation(["journal", "common"]);
+  const deleteFetcher = useFetcher();
+
+  const [supportsPasskey, setSupportsPasskey] = useState<boolean | null>(null);
+  const [addingPasskey, setAddingPasskey] = useState(false);
+  const [passkeyError, setPasskeyError] = useState<string | null>(null);
+
+  useEffect(() => {
+    import("@simplewebauthn/browser").then(({ browserSupportsWebAuthn }) => {
+      setSupportsPasskey(browserSupportsWebAuthn());
+    });
+  }, []);
+
+  const handleAddPasskey = useCallback(async () => {
+    setAddingPasskey(true);
+    setPasskeyError(null);
+
+    try {
+      const startResp = await fetch("/api/auth/register", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ step: "add-passkey", userId }),
+      });
+      const startData = await startResp.json();
+      if (startData.error) {
+        setPasskeyError(startData.error);
+        return;
+      }
+
+      const { startRegistration } = await import("@simplewebauthn/browser");
+      const webAuthnResp = await startRegistration(startData.options);
+
+      const finishResp = await fetch("/api/auth/register", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          step: "finish-add-passkey",
+          userId,
+          response: webAuthnResp,
+          challenge: startData.options.challenge,
+        }),
+      });
+
+      const finishData = await finishResp.json();
+      if (finishData.error) {
+        setPasskeyError(finishData.error);
+      } else {
+        window.location.reload();
+      }
+    } catch (err) {
+      setPasskeyError((err as Error).message);
+    } finally {
+      setAddingPasskey(false);
+    }
+  }, [userId]);
+
+  return (
+    <section>
+      <h2 className="text-lg font-semibold text-gray-900">{t("settings.security.title")}</h2>
+      <p className="mt-1 text-sm text-gray-600">{t("settings.security.description")}</p>
+
+      <div className="mt-4 space-y-3">
+        {passkeys.map((passkey) => (
+          <div
+            key={passkey.id}
+            className="flex items-center justify-between rounded-md border border-gray-200 p-3"
+          >
+            <div>
+              <p className="text-sm font-medium text-gray-900">
+                {transportLabel(passkey.transports, t)}
+              </p>
+              <p className="text-xs text-gray-500">
+                {t("settings.security.addedOn", { date: "" })}
+                <ClientDate iso={passkey.createdAt} />
+              </p>
+            </div>
+            <deleteFetcher.Form
+              method="post"
+              action="/api/settings/passkey/delete"
+              onSubmit={(e) => {
+                const isLast = passkeys.length === 1;
+                const msg = isLast
+                  ? t("settings.security.deleteLastWarning")
+                  : t("settings.security.deleteConfirm");
+                if (!confirm(msg)) e.preventDefault();
+              }}
+            >
+              <input type="hidden" name="credentialId" value={passkey.id} />
+              <button
+                type="submit"
+                className="text-sm text-red-600 hover:text-red-800"
+              >
+                {t("common:delete")}
+              </button>
+            </deleteFetcher.Form>
+          </div>
+        ))}
+
+        {passkeys.length === 0 && (
+          <p className="text-sm text-gray-500">{t("settings.security.noPasskeys")}</p>
+        )}
+      </div>
+
+      {passkeyError && (
+        <p className="mt-2 text-sm text-red-600">{passkeyError}</p>
+      )}
+
+      {supportsPasskey === true && (
+        <button
+          onClick={handleAddPasskey}
+          disabled={addingPasskey}
+          className="mt-4 rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
+        >
+          {addingPasskey ? t("settingUp") : t("settings.security.addPasskey")}
+        </button>
+      )}
+
+      {supportsPasskey === false && (
+        <p className="mt-4 text-sm text-amber-700">{t("auth.passkeyNotSupported")}</p>
+      )}
+    </section>
+  );
+}

apps/journal/app/routes/settings.tsx

@@ -1,13 +1,8 @@
-import { useState, useEffect, useCallback } from "react";
-import { data, redirect, useFetcher } from "react-router";
+import { Outlet, redirect } from "react-router";
+import { Link, useLocation } from "react-router";
 import { useTranslation } from "react-i18next";
-import { ClientDate } from "~/components/ClientDate";
-import { eq } from "drizzle-orm";
 import type { Route } from "./+types/settings";
 import { getSessionUser } from "~/lib/auth.server";
-import { getDb } from "~/lib/db";
-import { credentials, syncConnections } from "@trails-cool/db/schema/journal";
-import { getAllProviders } from "~/lib/sync/registry";
 
 export function meta() {
   return [{ title: "Settings — trails.cool" }];
@@ -16,463 +11,53 @@ export function meta() {
 export async function loader({ request }: Route.LoaderArgs) {
   const user = await getSessionUser(request);
   if (!user) throw redirect("/auth/login");
-
-  const db = getDb();
-  const passkeys = await db
-    .select({
-      id: credentials.id,
-      deviceType: credentials.deviceType,
-      transports: credentials.transports,
-      createdAt: credentials.createdAt,
-    })
-    .from(credentials)
-    .where(eq(credentials.userId, user.id));
-
-  const connections = await db
-    .select({
-      provider: syncConnections.provider,
-      providerUserId: syncConnections.providerUserId,
-    })
-    .from(syncConnections)
-    .where(eq(syncConnections.userId, user.id));
-
-  const providers = getAllProviders().map((p) => {
-    const conn = connections.find((c) => c.provider === p.id);
-    return { id: p.id, name: p.name, connected: !!conn, providerUserId: conn?.providerUserId };
-  });
-
-  return data({
-    user: {
-      id: user.id,
-      username: user.username,
-      email: user.email,
-      displayName: user.displayName,
-      bio: user.bio,
-      profileVisibility: user.profileVisibility,
-    },
-    passkeys: passkeys.map((p) => ({
-      id: p.id,
-      deviceType: p.deviceType,
-      transports: p.transports as string[] | null,
-      createdAt: p.createdAt.toISOString(),
-    })),
-    providers,
-  });
+  return { username: user.username };
 }
 
-function transportLabel(transports: string[] | null, t: (key: string) => string): string {
-  if (!transports || transports.length === 0) return t("settings.security.passkey");
-  if (transports.includes("internal")) return t("settings.security.thisDevice");
-  if (transports.includes("usb")) return t("settings.security.securityKey");
-  if (transports.includes("ble")) return t("settings.security.bluetooth");
-  if (transports.includes("hybrid")) return t("settings.security.phoneOrTablet");
-  return t("settings.security.passkey");
+interface NavItem {
+  to: string;
+  labelKey: string;
 }
 
-export default function Settings({ loaderData }: Route.ComponentProps) {
-  const { user, passkeys, providers } = loaderData;
-  const { t } = useTranslation(["journal", "common"]);
-  const profileFetcher = useFetcher();
-  const emailFetcher = useFetcher();
-  const deleteFetcher = useFetcher();
+const NAV: NavItem[] = [
+  { to: "/settings/profile", labelKey: "settings.nav.profile" },
+  { to: "/settings/account", labelKey: "settings.nav.account" },
+  { to: "/settings/security", labelKey: "settings.nav.security" },
+  { to: "/settings/connections", labelKey: "settings.nav.connections" },
+];
 
-  const [displayName, setDisplayName] = useState(user.displayName ?? "");
-  const [bio, setBio] = useState(user.bio ?? "");
-  const [profileVisibility, setProfileVisibility] = useState<"public" | "private">(
-    user.profileVisibility,
-  );
-  const [profileSaved, setProfileSaved] = useState(false);
-
-  const [newEmail, setNewEmail] = useState("");
-  const [showEmailForm, setShowEmailForm] = useState(false);
-  const [emailSent, setEmailSent] = useState(false);
-
-  const [supportsPasskey, setSupportsPasskey] = useState<boolean | null>(null);
-  const [addingPasskey, setAddingPasskey] = useState(false);
-  const [passkeyError, setPasskeyError] = useState<string | null>(null);
-
-  const [deleteConfirm, setDeleteConfirm] = useState(false);
-  const [deleteUsername, setDeleteUsername] = useState("");
-
-  useEffect(() => {
-    import("@simplewebauthn/browser").then(({ browserSupportsWebAuthn }) => {
-      setSupportsPasskey(browserSupportsWebAuthn());
-    });
-  }, []);
-
-  useEffect(() => {
-    if (profileFetcher.data && !profileFetcher.data.error) {
-      setProfileSaved(true);
-      const timer = setTimeout(() => setProfileSaved(false), 3000);
-      return () => clearTimeout(timer);
-    }
-  }, [profileFetcher.data]);
-
-  useEffect(() => {
-    if (emailFetcher.data && !emailFetcher.data.error) {
-      setEmailSent(true);
-    }
-  }, [emailFetcher.data]);
-
-  const handleAddPasskey = useCallback(async () => {
-    setAddingPasskey(true);
-    setPasskeyError(null);
-
-    try {
-      const startResp = await fetch("/api/auth/register", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ step: "add-passkey", userId: user.id }),
-      });
-      const startData = await startResp.json();
-      if (startData.error) {
-        setPasskeyError(startData.error);
-        return;
-      }
-
-      const { startRegistration } = await import("@simplewebauthn/browser");
-      const webAuthnResp = await startRegistration(startData.options);
-
-      const finishResp = await fetch("/api/auth/register", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          step: "finish-add-passkey",
-          userId: user.id,
-          response: webAuthnResp,
-          challenge: startData.options.challenge,
-        }),
-      });
-
-      const finishData = await finishResp.json();
-      if (finishData.error) {
-        setPasskeyError(finishData.error);
-      } else {
-        window.location.reload();
-      }
-    } catch (err) {
-      setPasskeyError((err as Error).message);
-    } finally {
-      setAddingPasskey(false);
-    }
-  }, [user.id]);
+export default function SettingsLayout() {
+  const { t } = useTranslation("journal");
+  const location = useLocation();
 
   return (
-    <div className="mx-auto max-w-2xl px-4 py-8">
+    <div className="mx-auto max-w-4xl px-4 py-8">
       <h1 className="text-2xl font-bold text-gray-900">{t("settings.title")}</h1>
 
-      <nav className="mt-4 flex gap-4 border-b border-gray-200 pb-2">
-        <a href="#profile" className="text-sm font-medium text-blue-600 hover:text-blue-800">
-          {t("settings.profile.title")}
-        </a>
-        <a href="#security" className="text-sm font-medium text-blue-600 hover:text-blue-800">
-          {t("settings.security.title")}
-        </a>
-        <a href="#account" className="text-sm font-medium text-blue-600 hover:text-blue-800">
-          {t("settings.account.title")}
-        </a>
-      </nav>
-
-      {/* Profile Section */}
-      <section id="profile" className="mt-8">
-        <h2 className="text-lg font-semibold text-gray-900">{t("settings.profile.title")}</h2>
-        <profileFetcher.Form method="post" action="/api/settings/profile" className="mt-4 space-y-4">
-          <div>
-            <label htmlFor="displayName" className="block text-sm font-medium text-gray-700">
-              {t("settings.profile.displayName")}
-            </label>
-            <input
-              id="displayName"
-              name="displayName"
-              type="text"
-              value={displayName}
-              onChange={(e) => setDisplayName(e.target.value)}
-              placeholder={user.username}
-              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-            />
-          </div>
-          <div>
-            <label htmlFor="bio" className="block text-sm font-medium text-gray-700">
-              {t("settings.profile.bio")}
-            </label>
-            <textarea
-              id="bio"
-              name="bio"
-              value={bio}
-              onChange={(e) => setBio(e.target.value)}
-              maxLength={160}
-              rows={3}
-              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-            />
-            <p className="mt-1 text-xs text-gray-500">{bio.length}/160</p>
-          </div>
-          <fieldset>
-            <legend className="block text-sm font-medium text-gray-700">
-              {t("settings.profile.visibility.label")}
-            </legend>
-            <div className="mt-2 space-y-2">
-              <label className="flex items-start gap-2 text-sm">
-                <input
-                  type="radio"
-                  name="profileVisibility"
-                  value="public"
-                  checked={profileVisibility === "public"}
-                  onChange={() => setProfileVisibility("public")}
-                  className="mt-0.5"
-                />
-                <span>
-                  <span className="font-medium text-gray-900">
-                    {t("settings.profile.visibility.public")}
-                  </span>
-                  <span className="ml-2 text-gray-500">
-                    {t("settings.profile.visibility.publicHelp")}
-                  </span>
-                </span>
-              </label>
-              <label className="flex items-start gap-2 text-sm">
-                <input
-                  type="radio"
-                  name="profileVisibility"
-                  value="private"
-                  checked={profileVisibility === "private"}
-                  onChange={() => setProfileVisibility("private")}
-                  className="mt-0.5"
-                />
-                <span>
-                  <span className="font-medium text-gray-900">
-                    {t("settings.profile.visibility.private")}
-                  </span>
-                  <span className="ml-2 text-gray-500">
-                    {t("settings.profile.visibility.privateHelp")}
-                  </span>
-                </span>
-              </label>
-            </div>
-          </fieldset>
-          <div className="flex items-center gap-3">
-            <button
-              type="submit"
-              disabled={profileFetcher.state !== "idle"}
-              className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
-            >
-              {profileFetcher.state !== "idle" ? t("common:loading") : t("common:save")}
-            </button>
-            {profileSaved && (
-              <p className="text-sm text-green-600">{t("settings.profile.saved")}</p>
-            )}
-            {profileFetcher.data?.error && (
-              <p className="text-sm text-red-600">{profileFetcher.data.error}</p>
-            )}
-          </div>
-        </profileFetcher.Form>
-      </section>
-
-      {/* Security Section */}
-      <section id="security" className="mt-12">
-        <h2 className="text-lg font-semibold text-gray-900">{t("settings.security.title")}</h2>
-        <p className="mt-1 text-sm text-gray-600">{t("settings.security.description")}</p>
-
-        <div className="mt-4 space-y-3">
-          {passkeys.map((passkey) => (
-            <div key={passkey.id} className="flex items-center justify-between rounded-md border border-gray-200 p-3">
-              <div>
-                <p className="text-sm font-medium text-gray-900">
-                  {transportLabel(passkey.transports, t)}
-                </p>
-                <p className="text-xs text-gray-500">
-                  {t("settings.security.addedOn", { date: "" })}
-                  <ClientDate iso={passkey.createdAt} />
-                </p>
-              </div>
-              <deleteFetcher.Form
-                method="post"
-                action="/api/settings/passkey/delete"
-                onSubmit={(e) => {
-                  const isLast = passkeys.length === 1;
-                  const msg = isLast
-                    ? t("settings.security.deleteLastWarning")
-                    : t("settings.security.deleteConfirm");
-                  if (!confirm(msg)) e.preventDefault();
-                }}
+      <div className="mt-6 grid gap-8 md:grid-cols-[200px_1fr]">
+        <nav className="flex flex-col gap-1 border-r border-gray-200 md:pr-4">
+          {NAV.map((item) => {
+            const active = location.pathname === item.to;
+            return (
+              <Link
+                key={item.to}
+                to={item.to}
+                className={`rounded-md px-3 py-2 text-sm font-medium ${
+                  active
+                    ? "bg-blue-50 text-blue-700"
+                    : "text-gray-700 hover:bg-gray-50 hover:text-gray-900"
+                }`}
               >
-                <input type="hidden" name="credentialId" value={passkey.id} />
-                <button
-                  type="submit"
-                  className="text-sm text-red-600 hover:text-red-800"
-                >
-                  {t("common:delete")}
-                </button>
-              </deleteFetcher.Form>
-            </div>
-          ))}
+                {t(item.labelKey)}
+              </Link>
+            );
+          })}
+        </nav>
 
-          {passkeys.length === 0 && (
-            <p className="text-sm text-gray-500">{t("settings.security.noPasskeys")}</p>
-          )}
+        <div>
+          <Outlet />
         </div>
-
-        {passkeyError && (
-          <p className="mt-2 text-sm text-red-600">{passkeyError}</p>
-        )}
-
-        {supportsPasskey === true && (
-          <button
-            onClick={handleAddPasskey}
-            disabled={addingPasskey}
-            className="mt-4 rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
-          >
-            {addingPasskey ? t("settingUp") : t("settings.security.addPasskey")}
-          </button>
-        )}
-
-        {supportsPasskey === false && (
-          <p className="mt-4 text-sm text-amber-700">{t("auth.passkeyNotSupported")}</p>
-        )}
-      </section>
-
-      {/* Connected Services */}
-      <section id="services" className="mt-12">
-        <h2 className="text-lg font-semibold text-gray-900">{t("settings.services.title")}</h2>
-        <div className="mt-4 space-y-3">
-          {providers.map((p) => (
-            <div key={p.id} className="flex items-center justify-between rounded-md border border-gray-200 px-4 py-3">
-              <div>
-                <p className="font-medium text-gray-900">{p.name}</p>
-                {p.connected && p.providerUserId && (
-                  <p className="text-xs text-gray-500">{t("settings.services.connectedAs", { id: p.providerUserId })}</p>
-                )}
-              </div>
-              {p.connected ? (
-                <div className="flex items-center gap-3">
-                  <a
-                    href={`/sync/import/${p.id}`}
-                    className="text-sm text-blue-600 hover:underline"
-                  >
-                    {t("sync.import")}
-                  </a>
-                  <form method="post" action={`/api/sync/disconnect/${p.id}`}>
-                    <button
-                      type="submit"
-                      className="text-sm text-red-600 hover:underline"
-                    >
-                      {t("settings.services.disconnect")}
-                    </button>
-                  </form>
-                </div>
-              ) : (
-                <a
-                  href={`/api/sync/connect/${p.id}`}
-                  className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white hover:bg-blue-700"
-                >
-                  {t("settings.services.connect")}
-                </a>
-              )}
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* Account Section */}
-      <section id="account" className="mt-12">
-        <h2 className="text-lg font-semibold text-gray-900">{t("settings.account.title")}</h2>
-
-        {/* Email */}
-        <div className="mt-4">
-          <label className="block text-sm font-medium text-gray-700">{t("auth.email")}</label>
-          <div className="mt-1 flex items-center gap-3">
-            <p className="text-sm text-gray-900">{user.email}</p>
-            {!showEmailForm && !emailSent && (
-              <button
-                onClick={() => setShowEmailForm(true)}
-                className="text-sm text-blue-600 hover:text-blue-800"
-              >
-                {t("settings.account.changeEmail")}
-              </button>
-            )}
-          </div>
-
-          {showEmailForm && !emailSent && (
-            <emailFetcher.Form method="post" action="/api/settings/email" className="mt-2 flex gap-2">
-              <input
-                name="newEmail"
-                type="email"
-                required
-                value={newEmail}
-                onChange={(e) => setNewEmail(e.target.value)}
-                placeholder={t("settings.account.newEmailPlaceholder")}
-                className="block flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-              />
-              <button
-                type="submit"
-                disabled={emailFetcher.state !== "idle"}
-                className="rounded-md bg-blue-600 px-3 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
-              >
-                {t("settings.account.sendVerification")}
-              </button>
-              <button
-                type="button"
-                onClick={() => { setShowEmailForm(false); setNewEmail(""); }}
-                className="text-sm text-gray-500 hover:text-gray-700"
-              >
-                {t("common:cancel")}
-              </button>
-            </emailFetcher.Form>
-          )}
-
-          {emailFetcher.data?.error && (
-            <p className="mt-2 text-sm text-red-600">{emailFetcher.data.error}</p>
-          )}
-
-          {emailSent && (
-            <p className="mt-2 text-sm text-green-600">{t("settings.account.verificationSent")}</p>
-          )}
-        </div>
-
-        {/* Delete Account */}
-        <div className="mt-8 rounded-md border border-red-200 bg-red-50 p-4">
-          <h3 className="text-sm font-semibold text-red-800">{t("settings.account.dangerZone")}</h3>
-          <p className="mt-1 text-sm text-red-700">{t("settings.account.deleteDescription")}</p>
-
-          {!deleteConfirm ? (
-            <button
-              onClick={() => setDeleteConfirm(true)}
-              className="mt-3 rounded-md border border-red-300 bg-white px-4 py-2 text-sm text-red-700 hover:bg-red-50"
-            >
-              {t("settings.account.deleteAccount")}
-            </button>
-          ) : (
-            <div className="mt-3 space-y-2">
-              <p className="text-sm text-red-800">
-                {t("settings.account.deleteConfirmPrompt", { username: user.username })}
-              </p>
-              <input
-                type="text"
-                value={deleteUsername}
-                onChange={(e) => setDeleteUsername(e.target.value)}
-                placeholder={user.username}
-                className="block w-full rounded-md border border-red-300 px-3 py-2 text-sm"
-              />
-              <div className="flex gap-2">
-                <form method="post" action="/api/settings/delete-account">
-                  <button
-                    type="submit"
-                    disabled={deleteUsername !== user.username}
-                    className="rounded-md bg-red-600 px-4 py-2 text-sm text-white hover:bg-red-700 disabled:opacity-50"
-                  >
-                    {t("settings.account.confirmDelete")}
-                  </button>
-                </form>
-                <button
-                  onClick={() => { setDeleteConfirm(false); setDeleteUsername(""); }}
-                  className="text-sm text-gray-500 hover:text-gray-700"
-                >
-                  {t("common:cancel")}
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      </section>
+      </div>
     </div>
   );
 }