Add app navigation bars to Journal and Planner

Journal gets a nav bar in root.tsx with conditional links: Routes and
Activities for authenticated users, Sign In and Register for guests.
Active route is highlighted via useLocation(). User menu shows username
linking to profile and a logout button.

Planner SessionView header title becomes a home link back to /.

Adds i18n keys (en + de) for all nav labels. Updates E2E tests to use
scoped nav selectors now that links appear in both nav bar and page body.

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

apps/journal/app/root.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse } from "react-router";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse, useLocation, Form, Link } from "react-router";
 import type { LinksFunction } from "react-router";
 import type { Route } from "./+types/root";
 import * as Sentry from "@sentry/react";
@@ -35,6 +35,75 @@ export async function loader({ request }: Route.LoaderArgs) {
   return { user: user ? { id: user.id, username: user.username } : null };
 }
 
+function NavBar({ user }: { user: { id: string; username: string } | null }) {
+  const { t } = useTranslation("journal");
+  const location = useLocation();
+
+  const isActive = (path: string) =>
+    location.pathname === path || location.pathname.startsWith(path + "/");
+
+  const linkClass = (path: string) =>
+    `text-sm font-medium ${
+      isActive(path)
+        ? "text-blue-600"
+        : "text-gray-600 hover:text-gray-900"
+    }`;
+
+  return (
+    <nav className="border-b border-gray-200 bg-white px-4 py-2">
+      <div className="mx-auto flex max-w-6xl items-center justify-between">
+        <div className="flex items-center gap-6">
+          <Link to="/" className="text-lg font-semibold text-gray-900">
+            {t("title")}
+          </Link>
+          {user && (
+            <>
+              <Link to="/routes" className={linkClass("/routes")}>
+                {t("nav.routes")}
+              </Link>
+              <Link to="/activities" className={linkClass("/activities")}>
+                {t("nav.activities")}
+              </Link>
+            </>
+          )}
+        </div>
+        <div className="flex items-center gap-4">
+          {user ? (
+            <>
+              <Link
+                to={`/users/${user.username}`}
+                className={linkClass(`/users/${user.username}`)}
+              >
+                {user.username}
+              </Link>
+              <Form method="post" action="/auth/logout">
+                <button
+                  type="submit"
+                  className="text-sm font-medium text-gray-600 hover:text-gray-900"
+                >
+                  {t("nav.logout")}
+                </button>
+              </Form>
+            </>
+          ) : (
+            <>
+              <Link to="/auth/login" className={linkClass("/auth/login")}>
+                {t("nav.login")}
+              </Link>
+              <Link
+                to="/auth/register"
+                className="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700"
+              >
+                {t("nav.register")}
+              </Link>
+            </>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}
+
 export default function App({ loaderData }: Route.ComponentProps) {
   const user = loaderData?.user;
   useEffect(() => {
@@ -45,7 +114,12 @@ export default function App({ loaderData }: Route.ComponentProps) {
     }
   }, [user]);
 
-  return <Outlet />;
+  return (
+    <>
+      <NavBar user={user ?? null} />
+      <Outlet />
+    </>
+  );
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {

apps/planner/app/components/SessionView.tsx

@@ -1,5 +1,6 @@
 import { Suspense, lazy, useState, useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
 import * as Sentry from "@sentry/react";
 import { useYjs } from "~/lib/use-yjs";
 import { useRouting } from "~/lib/use-routing";
@@ -49,7 +50,9 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
     <>
       <header className="flex flex-wrap items-center justify-between gap-2 border-b border-gray-200 px-4 py-2">
         <div className="flex items-center gap-2 md:gap-4">
-          <h1 className="hidden text-lg font-semibold text-gray-900 sm:block">{t("title")}</h1>
+          <Link to="/" className="hidden text-lg font-semibold text-gray-900 hover:text-blue-600 sm:block">
+            {t("title")}
+          </Link>
           <ProfileSelector yjs={yjs} />
         </div>
         <div className="flex items-center gap-3">