Mario Zechner
2d68594711
- 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
77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import type { MessageRenderer } from "@mariozechner/pi-web-ui";
|
|
import { registerMessageRenderer } from "@mariozechner/pi-web-ui";
|
|
import { html } from "lit";
|
|
|
|
// ============================================================================
|
|
// NAVIGATION MESSAGE TYPE
|
|
// ============================================================================
|
|
|
|
export interface NavigationMessage {
|
|
role: "navigation";
|
|
url: string;
|
|
title: string;
|
|
favicon?: string;
|
|
tabIndex?: number;
|
|
}
|
|
|
|
// Extend CustomMessages interface via declaration merging
|
|
declare module "@mariozechner/pi-web-ui" {
|
|
interface CustomMessages {
|
|
navigation: NavigationMessage;
|
|
}
|
|
}
|
|
|
|
// ============================================================================
|
|
// RENDERER
|
|
// ============================================================================
|
|
|
|
const navigationRenderer: MessageRenderer<NavigationMessage> = {
|
|
render: (nav) => {
|
|
return html`
|
|
<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>
|
|
`;
|
|
},
|
|
};
|
|
|
|
// ============================================================================
|
|
// REGISTER
|
|
// ============================================================================
|
|
|
|
export function registerNavigationRenderer() {
|
|
registerMessageRenderer("navigation", navigationRenderer);
|
|
}
|
|
|
|
// ============================================================================
|
|
// HELPER
|
|
// ============================================================================
|
|
|
|
export function createNavigationMessage(
|
|
url: string,
|
|
title: string,
|
|
favicon?: string,
|
|
tabIndex?: number,
|
|
): NavigationMessage {
|
|
return {
|
|
role: "navigation",
|
|
url,
|
|
title,
|
|
favicon,
|
|
tabIndex,
|
|
};
|
|
}
|