c0c1a53322
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>
63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { Outlet, redirect } from "react-router";
|
|
import { Link, useLocation } from "react-router";
|
|
import { useTranslation } from "react-i18next";
|
|
import type { Route } from "./+types/settings";
|
|
import { getSessionUser } from "~/lib/auth.server";
|
|
|
|
export function meta() {
|
|
return [{ title: "Settings — trails.cool" }];
|
|
}
|
|
|
|
export async function loader({ request }: Route.LoaderArgs) {
|
|
const user = await getSessionUser(request);
|
|
if (!user) throw redirect("/auth/login");
|
|
return { username: user.username };
|
|
}
|
|
|
|
interface NavItem {
|
|
to: string;
|
|
labelKey: string;
|
|
}
|
|
|
|
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" },
|
|
];
|
|
|
|
export default function SettingsLayout() {
|
|
const { t } = useTranslation("journal");
|
|
const location = useLocation();
|
|
|
|
return (
|
|
<div className="mx-auto max-w-4xl px-4 py-8">
|
|
<h1 className="text-2xl font-bold text-gray-900">{t("settings.title")}</h1>
|
|
|
|
<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"
|
|
}`}
|
|
>
|
|
{t(item.labelKey)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div>
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|