From 2d68594711b020b8e0c3531f2abaad4b0632eadc Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Mon, 6 Oct 2025 16:22:27 +0200
Subject: [PATCH] Fix new session button and improve navigation message styling

- Add ?new=true query param to prevent auto-loading latest session
- Style navigation message as clickable badge with background
- Add cursor-pointer, truncate, and max-width for proper text overflow
- Click navigation message to open page in new tab
- Show URL on hover
---
 .../src/messages/NavigationMessage.ts         | 22 +++++++++++++------
 packages/browser-extension/src/sidepanel.ts   |  7 +++---
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/browser-extension/src/messages/NavigationMessage.ts b/packages/browser-extension/src/messages/NavigationMessage.ts
index 8dbf6b9f..4de47db7 100644
--- a/packages/browser-extension/src/messages/NavigationMessage.ts
+++ b/packages/browser-extension/src/messages/NavigationMessage.ts
@@ -28,13 +28,21 @@ declare module "@mariozechner/pi-web-ui" {
 const navigationRenderer: MessageRenderer<NavigationMessage> = {
 	render: (nav) => {
 		return html`
-			<div class="flex items-center gap-2 px-4 py-2 text-sm text-muted-foreground">
-				${
-					nav.favicon
-						? html`<img src="${nav.favicon}" alt="" class="w-4 h-4 flex-shrink-0" />`
-						: html`<div class="w-4 h-4 flex-shrink-0 bg-muted rounded"></div>`
-				}
-				<span class="truncate">${nav.title}</span>
+			<div class="mx-4">
+				<button
+					class="inline-flex items-center gap-2 px-2 py-1 text-sm text-muted-foreground bg-secondary border border-border rounded-lg hover:bg-secondary/80 transition-colors max-w-full cursor-pointer"
+					@click=${() => {
+						chrome.tabs.create({ url: nav.url });
+					}}
+					title="Click to open: ${nav.url}"
+				>
+					${
+						nav.favicon
+							? html`<img src="${nav.favicon}" alt="" class="w-4 h-4 flex-shrink-0" />`
+							: html`<div class="w-4 h-4 flex-shrink-0 bg-muted rounded"></div>`
+					}
+					<span class="truncate">${nav.title}</span>
+				</button>
 			</div>
 		`;
 	},
diff --git a/packages/browser-extension/src/sidepanel.ts b/packages/browser-extension/src/sidepanel.ts
index 532f5ae3..fde6942f 100644
--- a/packages/browser-extension/src/sidepanel.ts
+++ b/packages/browser-extension/src/sidepanel.ts
@@ -181,7 +181,7 @@ const loadSession = (sessionId: string) => {
 
 const newSession = () => {
 	const url = new URL(window.location.href);
-	url.search = "";
+	url.search = "?new=true";
 	window.location.href = url.toString();
 };
 
@@ -340,9 +340,10 @@ async function initApp() {
 	// Check for session in URL
 	const urlParams = new URLSearchParams(window.location.search);
 	let sessionIdFromUrl = urlParams.get("session");
+	const isNewSession = urlParams.get("new") === "true";
 
-	// If no session in URL, try to load the most recent session
-	if (!sessionIdFromUrl && storage.sessions) {
+	// If no session in URL and not explicitly creating new, try to load the most recent session
+	if (!sessionIdFromUrl && !isNewSession && storage.sessions) {
 		const latestSessionId = await storage.sessions.getLatestSessionId();
 		if (latestSessionId) {
 			sessionIdFromUrl = latestSessionId;