From a130f8e4c03e2b911d0dacc1d3e999c880e03678 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Thu, 9 Apr 2026 14:27:51 +0200
Subject: [PATCH] feat(mana/web): clickable page titles open route in new tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PageShell gains an optional titleHref prop — when set, the header title
renders as an <a target="_blank"> with hover underline. Also wires this
into the homepage app gallery (shared-ui/AppsPage): the grid card title
is now an anchor to /{app.id}, while the rest of the card still opens
the existing detail modal. Card converted from <button> to role=button
so the nested anchor is valid HTML.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/page-carousel/PageShell.svelte | 28 ++++++++++++++-
 packages/shared-ui/src/pages/AppsPage.svelte  | 35 +++++++++++++++++--
 2 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/apps/mana/apps/web/src/lib/components/page-carousel/PageShell.svelte b/apps/mana/apps/web/src/lib/components/page-carousel/PageShell.svelte
index a66e85c3a..e16083606 100644
--- a/apps/mana/apps/web/src/lib/components/page-carousel/PageShell.svelte
+++ b/apps/mana/apps/web/src/lib/components/page-carousel/PageShell.svelte
@@ -28,6 +28,7 @@
 		onMoveRight?: () => void;
 		// Default header
 		title?: string;
+		titleHref?: string;
 		color?: string;
 		icon?: Component;
 		onContextMenu?: (e: MouseEvent) => void;
@@ -50,6 +51,7 @@
 		onMoveRight,
 		onContextMenu,
 		title = '',
+		titleHref,
 		color = '#6B7280',
 		icon: IconComponent,
 		header_left,
@@ -211,7 +213,22 @@
 				{:else}
 					<span class="color-dot" style="background-color: {color}"></span>
 				{/if}
-				<span class="page-title">{title}</span>
+				{#if titleHref}
+					<a
+						class="page-title page-title-link"
+						href={titleHref}
+						target="_blank"
+						rel="noopener noreferrer"
+						onclick={(e) => e.stopPropagation()}
+						ondragstart={(e) => e.preventDefault()}
+						draggable="false"
+						title={`${title} in neuem Tab öffnen`}
+					>
+						{title}
+					</a>
+				{:else}
+					<span class="page-title">{title}</span>
+				{/if}
 			{/if}
 			{#if badge}
 				{@render badge()}
@@ -380,6 +397,15 @@
 		font-weight: 600;
 		color: hsl(var(--color-foreground));
 	}
+	a.page-title-link {
+		text-decoration: none;
+		cursor: pointer;
+		transition: color 0.15s;
+	}
+	a.page-title-link:hover {
+		color: hsl(var(--color-primary));
+		text-decoration: underline;
+	}
 
 	.window-actions {
 		position: absolute;
diff --git a/packages/shared-ui/src/pages/AppsPage.svelte b/packages/shared-ui/src/pages/AppsPage.svelte
index 7c10af64f..aee341311 100644
--- a/packages/shared-ui/src/pages/AppsPage.svelte
+++ b/packages/shared-ui/src/pages/AppsPage.svelte
@@ -125,11 +125,20 @@
 
 	<div class="apps-grid">
 		{#each apps as app, index}
-			<button
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<div
 				class="app-card"
 				class:current={app.id === currentAppId}
 				style="--app-color: {app.color};"
+				role="button"
+				tabindex="0"
 				onclick={() => openModal(index)}
+				onkeydown={(e) => {
+					if (e.key === 'Enter' || e.key === ' ') {
+						e.preventDefault();
+						openModal(index);
+					}
+				}}
 			>
 				<div
 					class="status-indicator"
@@ -147,9 +156,18 @@
 					{/if}
 				</div>
 
-				<h3 class="app-name">{app.name}</h3>
+				<a
+					class="app-name app-name-link"
+					href={`/${app.id}`}
+					target="_blank"
+					rel="noopener noreferrer"
+					onclick={(e) => e.stopPropagation()}
+					title={`${app.name} in neuem Tab öffnen`}
+				>
+					{app.name}
+				</a>
 				<p class="app-description">{app.description[locale]}</p>
-			</button>
+			</div>
 		{/each}
 	</div>
 </div>
@@ -377,6 +395,17 @@
 		color: #f3f4f6;
 	}
 
+	.app-name-link {
+		display: inline-block;
+		text-decoration: none;
+		cursor: pointer;
+		transition: color 0.15s;
+	}
+	.app-name-link:hover {
+		color: var(--app-color);
+		text-decoration: underline;
+	}
+
 	.app-description {
 		font-size: 0.75rem;
 		line-height: 1.4;