From 9a1aa14ef730eed787d8c8465766229aa874c40f Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Tue, 5 May 2026 20:44:18 +0200
Subject: [PATCH] =?UTF-8?q?Nexo=20P1=20polish=20=E2=80=94=20operator=20chr?=
 =?UTF-8?q?ome=20out=20of=20user=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The shell layout was rendering an operator-style header (Discover /
Matches / Profile / Safety / Devtools links + auth slot) on every
`/dating/*` route, including login, register, reset and the product
pages. That bar reads as a developer dashboard, not as the navigation
of a real dating app.

Layout (`+layout.svelte`):
- The header now mounts only when the route is under `/dating/admin`
  or `/dating/devtools` — i.e. the moderation / instrumentation
  surfaces, where operator-grade nav is correct. On every other
  surface the layout renders the children directly with the App
  composed and the session probe still running.
- Auth pages (login, register, reset, mfa) end up showing only their
  centered card; product pages (discover, matches, chat, profile,
  photos) get the full viewport with no chrome above.

`_components/AppNav.svelte`:
- Bottom-tab navigation for the product surface — Descubre / Matches
  / Perfil / Seguridad + Salir. Sticky-bottom on mobile, sits as a
  rounded bar at the foot of the viewport on desktop. Mounted by
  Discover, Matches and Profile so the user can still cross between
  top-level sections without the operator bar.

Chat keeps its own back-arrow (it's full-screen). Photos returns via
the back link in its header. Auth routes need no nav.

Gates: 1695 tests + check (0/0) + build + bundle 22.52 KB + aliases —
all green.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/web/routes/dating/+layout.svelte          | 130 +++++++++---------
 .../routes/dating/_components/AppNav.svelte   | 124 +++++++++++++++++
 src/web/routes/dating/discover/+page.svelte   |   3 +
 src/web/routes/dating/matches/+page.svelte    |   3 +
 src/web/routes/dating/profile/+page.svelte    |   3 +
 5 files changed, 195 insertions(+), 68 deletions(-)
 create mode 100644 src/web/routes/dating/_components/AppNav.svelte

diff --git a/src/web/routes/dating/+layout.svelte b/src/web/routes/dating/+layout.svelte
index a40f152..96946b9 100644
--- a/src/web/routes/dating/+layout.svelte
+++ b/src/web/routes/dating/+layout.svelte
@@ -15,7 +15,7 @@
 		frontendTarget: () => appRoot
 	});
 
-	const { App, api } = handle;
+	const { api } = handle;
 
 	async function refreshSession(): Promise<DatingSessionResponse | null> {
 		try {
@@ -48,75 +48,70 @@
 
 	onDestroy(() => handle.dispose());
 
-	const t = (key: Parameters<typeof App.lang.t>[0]) => App.lang.t(key);
+	// Operator-style chrome (the cross-section nav with Discover /
+	// Matches / Profile / Safety / Devtools links) only makes sense
+	// once the user is operating an admin / devtools surface. Regular
+	// user pages own their own navigation context — auth pages render
+	// a centered card; product pages drive cross-section nav from
+	// inside their own UI. Activate the chrome only under
+	// `/dating/admin` and `/dating/devtools`.
+	const showChrome = $derived(
+		page.url.pathname.startsWith('/dating/admin') ||
+			page.url.pathname.startsWith('/dating/devtools')
+	);
 
-	// Plain hrefs (not the typed `resolve(...)`) so the layout compiles
-	// before each phase has materialised its own `+page.svelte`. The
-	// links 404 until the route is created — same UX as opening any
-	// unbuilt section of an SPA.
-	const navItems = $derived([
-		{ href: '/dating/discover', label: t('nexo.nav.discover') },
-		{ href: '/dating/matches', label: t('nexo.nav.matches') },
-		{ href: '/dating/profile', label: t('nexo.nav.profile') },
-		{ href: '/dating/safety', label: t('nexo.nav.safety') },
-		{ href: '/dating/devtools', label: t('nexo.nav.devtools') }
-	]);
+	function isCurrent(href: string): boolean {
+		return page.url.pathname === href || page.url.pathname.startsWith(`${href}/`);
+	}
 
 	const isAuthenticated = $derived(session?.authenticated === true);
 	const userName = $derived(
 		session?.authenticated === true ? session.user.displayName || session.user.email : ''
 	);
-
-	function isCurrent(href: string): boolean {
-		return page.url.pathname === href || page.url.pathname.startsWith(`${href}/`);
-	}
 </script>
 
 <svelte:head>
-	<title>Nexo — {t('nexo.tagline')}</title>
+	<title>Nexo</title>
 </svelte:head>
 
-<div bind:this={appRoot} class="nexo-shell">
-	<header class="nexo-header">
-		<a class="brand" href="/dating">
-			<strong>{t('nexo.title')}</strong>
-			<span class="tagline">{t('nexo.tagline')}</span>
-		</a>
-
-		<nav aria-label="Nexo">
-			{#each navItems as item (item.href)}
-				<a
-					href={item.href}
-					class="nav-item"
-					aria-current={isCurrent(item.href) ? 'page' : undefined}
-				>
-					{item.label}
+<div bind:this={appRoot} class="nexo-shell" class:has-chrome={showChrome}>
+	{#if showChrome}
+		<header class="nexo-header">
+			<a class="brand" href="/dating">
+				<strong>Nexo</strong>
+				<span class="tagline">consola de moderación</span>
+			</a>
+
+			<nav aria-label="Nexo">
+				<a href="/dating/admin" class="nav-item" aria-current={isCurrent('/dating/admin') ? 'page' : undefined}>
+					Moderación
+				</a>
+				<a href="/dating/devtools" class="nav-item" aria-current={isCurrent('/dating/devtools') ? 'page' : undefined}>
+					Devtools
 				</a>
-			{/each}
-		</nav>
-
-		<div class="auth-slot">
-			{#if isAuthenticated}
-				<span class="who">{userName}</span>
-				<button
-					type="button"
-					class="ghost"
-					onclick={async () => {
-						try {
-							await api.logout();
-						} finally {
-							session = { authenticated: false };
-						}
-					}}
-				>
-					{t('nexo.auth.logout')}
-				</button>
-			{:else}
-				<a class="ghost" href="/dating/login">{t('nexo.auth.login')}</a>
-				<a class="primary" href="/dating/register">{t('nexo.auth.register')}</a>
-			{/if}
-		</div>
-	</header>
+				<a href="/dating/discover" class="nav-item">Volver a la app</a>
+			</nav>
+
+			<div class="auth-slot">
+				{#if isAuthenticated}
+					<span class="who">{userName}</span>
+					<button
+						type="button"
+						class="ghost"
+						onclick={async () => {
+							try {
+								await api.logout();
+							} finally {
+								session = { authenticated: false };
+							}
+						}}
+					>
+						Cerrar sesión
+					</button>
+				{/if}
+			</div>
+		</header>
+	{/if}
 
 	{#if loadError !== null}
 		<aside class="banner error" role="alert">
@@ -185,25 +180,16 @@
 		font-size: 0.85rem;
 		opacity: 0.7;
 	}
-	.auth-slot a,
 	.auth-slot button {
 		font: inherit;
 		font-size: 0.85rem;
 		padding: 0.35rem 0.7rem;
 		border-radius: 6px;
-		text-decoration: none;
-		border: 1px solid transparent;
+		border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
 		cursor: pointer;
 		background: transparent;
 		color: inherit;
 	}
-	.auth-slot .ghost {
-		border-color: color-mix(in srgb, currentColor 25%, transparent);
-	}
-	.auth-slot .primary {
-		background: color-mix(in srgb, currentColor 88%, transparent);
-		color: canvas;
-	}
 	.banner {
 		margin: 0.75rem 1.25rem 0;
 		padding: 0.75rem 1rem;
@@ -224,4 +210,12 @@
 		flex: 1;
 		padding: 1.5rem 1.25rem;
 	}
+	/*
+	 * On user-facing surfaces the layout reserves no chrome, so pages
+	 * (Discover, Matches, Chat, Profile…) get the full viewport for
+	 * their own product navigation.
+	 */
+	.nexo-shell:not(.has-chrome) .nexo-main {
+		padding: 1rem;
+	}
 </style>
diff --git a/src/web/routes/dating/_components/AppNav.svelte b/src/web/routes/dating/_components/AppNav.svelte
new file mode 100644
index 0000000..668205c
--- /dev/null
+++ b/src/web/routes/dating/_components/AppNav.svelte
@@ -0,0 +1,124 @@
+<!--
+	Bottom-tab navigation for the product surface (Discover, Matches,
+	Profile, Safety, plus a logout). Pages opt-in by mounting it; the
+	operator-style header is rendered by the layout only on
+	admin/devtools, so this is the regular user's only cross-section
+	nav.
+
+	Bottom-fixed on mobile, sticky on desktop. Tab labels stay short
+	so the bar is finger-sized on phones.
+-->
+<script lang="ts">
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import { getNexoContext } from '../_lib/context';
+
+	const nexo = getNexoContext();
+
+	const items = [
+		{ href: '/dating/discover', label: 'Descubre', icon: '✦' },
+		{ href: '/dating/matches', label: 'Matches', icon: '♡' },
+		{ href: '/dating/profile', label: 'Perfil', icon: '◔' },
+		{ href: '/dating/safety', label: 'Seguridad', icon: '⚐' }
+	] as const;
+
+	function isCurrent(href: string): boolean {
+		return page.url.pathname === href || page.url.pathname.startsWith(`${href}/`);
+	}
+
+	async function logout() {
+		try {
+			await nexo.api.logout();
+		} finally {
+			nexo.setSession({ authenticated: false });
+			await goto('/dating/login', { replaceState: true });
+		}
+	}
+</script>
+
+<nav class="appnav" aria-label="Nexo">
+	<ul>
+		{#each items as item (item.href)}
+			<li>
+				<a href={item.href} aria-current={isCurrent(item.href) ? 'page' : undefined}>
+					<span class="icon" aria-hidden="true">{item.icon}</span>
+					<span class="label">{item.label}</span>
+				</a>
+			</li>
+		{/each}
+		<li class="spacer" aria-hidden="true"></li>
+		<li>
+			<button type="button" class="logout" onclick={logout}>
+				<span class="icon" aria-hidden="true">⏻</span>
+				<span class="label">Salir</span>
+			</button>
+		</li>
+	</ul>
+</nav>
+
+<style>
+	.appnav {
+		position: sticky;
+		bottom: 0;
+		z-index: 20;
+		margin: 1.5rem -1rem -1rem;
+		background: color-mix(in srgb, canvas 92%, currentColor 8%);
+		border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+	}
+	.appnav ul {
+		list-style: none;
+		margin: 0;
+		padding: 0.4rem 0.6rem;
+		display: flex;
+		gap: 0.15rem;
+		max-width: 40rem;
+		margin-inline: auto;
+	}
+	.spacer {
+		flex: 1;
+	}
+	.appnav a,
+	.appnav button {
+		font: inherit;
+		text-decoration: none;
+		color: inherit;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.1rem;
+		padding: 0.45rem 0.7rem;
+		border-radius: 8px;
+		font-size: 0.78rem;
+		min-width: 3.6rem;
+	}
+	.appnav a[aria-current='page'] {
+		background: color-mix(in srgb, currentColor 10%, transparent);
+		font-weight: 600;
+	}
+	.appnav .icon {
+		font-size: 1.1rem;
+		line-height: 1;
+	}
+	.appnav .logout {
+		opacity: 0.7;
+	}
+	.appnav .logout:hover {
+		opacity: 1;
+	}
+	@media (min-width: 800px) {
+		.appnav {
+			position: static;
+			margin: 1.5rem 0 0;
+			border-top: none;
+			border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+			border-radius: 12px;
+			background: color-mix(in srgb, canvas 96%, currentColor 4%);
+		}
+		.appnav ul {
+			padding: 0.4rem 0.5rem;
+		}
+	}
+</style>
diff --git a/src/web/routes/dating/discover/+page.svelte b/src/web/routes/dating/discover/+page.svelte
index f9fe79a..ea9f55b 100644
--- a/src/web/routes/dating/discover/+page.svelte
+++ b/src/web/routes/dating/discover/+page.svelte
@@ -10,6 +10,7 @@
 		type DatingProfile
 	} from '../_lib/types';
 	import ProfileCard from '../_components/ProfileCard.svelte';
+	import AppNav from '../_components/AppNav.svelte';
 
 	const nexo = getNexoContext();
 
@@ -239,6 +240,8 @@
 	</div>
 {/if}
 
+<AppNav />
+
 <style>
 	.layout {
 		display: grid;
diff --git a/src/web/routes/dating/matches/+page.svelte b/src/web/routes/dating/matches/+page.svelte
index 5bc4bb6..eae4c5a 100644
--- a/src/web/routes/dating/matches/+page.svelte
+++ b/src/web/routes/dating/matches/+page.svelte
@@ -3,6 +3,7 @@
 	import { getNexoContext } from '../_lib/context';
 	import { DatingApiError } from '../_lib/api';
 	import type { DatingMatch, DatingProfile } from '../_lib/types';
+	import AppNav from '../_components/AppNav.svelte';
 
 	const nexo = getNexoContext();
 
@@ -126,6 +127,8 @@
 	{/if}
 </section>
 
+<AppNav />
+
 <style>
 	.wrap {
 		max-width: 36rem;
diff --git a/src/web/routes/dating/profile/+page.svelte b/src/web/routes/dating/profile/+page.svelte
index 025990c..abf22d6 100644
--- a/src/web/routes/dating/profile/+page.svelte
+++ b/src/web/routes/dating/profile/+page.svelte
@@ -10,6 +10,7 @@
 		type DatingVisibility
 	} from '../_lib/types';
 	import Field from '../_components/Field.svelte';
+	import AppNav from '../_components/AppNav.svelte';
 
 	const nexo = getNexoContext();
 
@@ -251,6 +252,8 @@
 	</form>
 </section>
 
+<AppNav />
+
 <style>
 	.wrap {
 		max-width: 36rem;