From c825ccf0fa2f766560c71ddad5329d9afc2df4b4 Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Mon, 6 Oct 2025 16:41:47 +0200
Subject: [PATCH] Improve navigation message visibility and favicon handling

- Add fallback favicon using Google's favicon service (s2/favicons API)
- If both tab.favIconUrl and Google service fail, gracefully hide broken image
- Enhance navigation message styling for better visibility:
  - Use accent colors (bg-accent/50 with border-accent) instead of muted secondary
  - Increase padding (px-3 py-2) and add vertical margin (my-2)
  - Add shadow-sm for subtle depth
  - Make title font-medium for better contrast
  - Use border-2 instead of border for more prominence
---
 .../src/messages/NavigationMessage.ts         | 35 ++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/browser-extension/src/messages/NavigationMessage.ts b/packages/browser-extension/src/messages/NavigationMessage.ts
index 4de47db7..1789a090 100644
--- a/packages/browser-extension/src/messages/NavigationMessage.ts
+++ b/packages/browser-extension/src/messages/NavigationMessage.ts
@@ -25,23 +25,42 @@ declare module "@mariozechner/pi-web-ui" {
 // RENDERER
 // ============================================================================
 
+function getFallbackFavicon(url: string): string {
+	try {
+		const urlObj = new URL(url);
+		// Use Google's favicon service which works for most domains
+		return `https://www.google.com/s2/favicons?domain=${urlObj.hostname}&sz=32`;
+	} catch {
+		// If URL parsing fails, return a generic icon
+		return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E";
+	}
+}
+
 const navigationRenderer: MessageRenderer<NavigationMessage> = {
 	render: (nav) => {
+		// Use favicon from tab, or fallback to Google's favicon service
+		const faviconUrl = nav.favicon || getFallbackFavicon(nav.url);
+
 		return html`
-			<div class="mx-4">
+			<div class="mx-4 my-2">
 				<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"
+					class="inline-flex items-center gap-2 px-3 py-2 text-sm text-foreground bg-accent/50 border-2 border-accent rounded-lg hover:bg-accent transition-colors max-w-full cursor-pointer shadow-sm"
 					@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>
+					<img
+						src="${faviconUrl}"
+						alt=""
+						class="w-4 h-4 flex-shrink-0"
+						@error=${(e: Event) => {
+							// If favicon fails to load, hide the image
+							const target = e.target as HTMLImageElement;
+							target.style.display = "none";
+						}}
+					/>
+					<span class="truncate font-medium">${nav.title}</span>
 				</button>
 			</div>
 		`;