getcompanion-ai/co-mono
1
0
Fork 0
mirror of https://github.com/getcompanion-ai/co-mono.git synced 2026-04-15 15:03:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve navigation message visibility and favicon handling

Browse source 
- 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
This commit is contained in:
Mario Zechner 2025-10-06 16:41:47 +02:00
parent 5f04960f6d
commit c825ccf0fa
1 changed files with 27 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

35
packages/browser-extension/src/messages/NavigationMessage.ts
View file

@ -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>
`;