-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index 76a035b..a91fbc5 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -3,15 +3,18 @@ import type {
BookmarkSnapshot,
BrowserBounds,
HistorySnapshot,
+ MenuAction,
TabSnapshot,
TabsStateSnapshot,
} from '../shared/ipc-contract';
+import { MENU_ACTIONS } from '../shared/ipc-contract';
import {
requestNavigateActiveTab,
requestTabClose,
requestTabCloseIfActive,
requestTabCreate,
} from './interaction';
+import { ICONS } from './icons';
import {
getNextTheme,
getThemeToggleMeta,
@@ -66,20 +69,25 @@ const newTabSearch = document.getElementById('new-tab-search') as HTMLInputEleme
const btnBack = document.getElementById('btn-back') as HTMLButtonElement;
const btnForward = document.getElementById('btn-forward') as HTMLButtonElement;
const btnReload = document.getElementById('btn-reload') as HTMLButtonElement;
-const btnTheme = document.getElementById('btn-theme') as HTMLButtonElement;
const btnBookmark = document.getElementById('btn-bookmark') as HTMLButtonElement;
-const btnBookmarkBar = document.getElementById('btn-bookmark-bar') as HTMLButtonElement;
-const btnBookmarks = document.getElementById('btn-bookmarks') as HTMLButtonElement;
-const btnHistory = document.getElementById('btn-history') as HTMLButtonElement;
const btnHistoryClear = document.getElementById('btn-history-clear') as HTMLButtonElement;
const btnFloat = document.getElementById('btn-float') as HTMLButtonElement;
+const btnMenu = document.getElementById('btn-menu') as HTMLButtonElement;
const btnNewTab = document.getElementById('btn-new-tab') as HTMLButtonElement;
const themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+// Set static SVG icons that never change
+btnBack.innerHTML = ICONS.back;
+btnForward.innerHTML = ICONS.forward;
+btnReload.innerHTML = ICONS.reload;
+btnFloat.innerHTML = ICONS.float;
+btnMenu.innerHTML = ICONS.menu;
+
let unsubscribeOpenUrl: (() => void) | null = null;
let unsubscribeTabsState: (() => void) | null = null;
let unsubscribeBookmarks: (() => void) | null = null;
let unsubscribeHistory: (() => void) | null = null;
+let unsubscribeMenuAction: (() => void) | null = null;
function getStoredBookmarkBarVisibility(): boolean {
try {
@@ -132,8 +140,7 @@ function applyTheme(theme: 'light' | 'dark'): void {
document.documentElement.dataset.theme = theme;
const themeToggleMeta = getThemeToggleMeta(theme);
- btnTheme.textContent = themeToggleMeta.icon;
- btnTheme.title = themeToggleMeta.title;
+ btnFloat.title = `Floating search (Ctrl+Shift+O) — ${themeToggleMeta.title}`;
}
function syncThemeFromEnvironment(): void {
@@ -268,7 +275,7 @@ function renderTabs(): void {
tabElement.dataset.id = String(tab.id);
tabElement.innerHTML = `
${escapeHtml(tab.title || 'New Tab')}
-
+
`;
tabsContainer.appendChild(tabElement);
@@ -291,25 +298,12 @@ function renderBookmarkControls(): void {
const activeBookmark = getActiveBookmark();
btnBookmark.disabled = !activeTab?.url;
- btnBookmark.textContent = activeBookmark ? '★' : '☆';
+ btnBookmark.innerHTML = activeBookmark ? ICONS.starFilled : ICONS.starEmpty;
+ btnBookmark.classList.toggle('text-orb-accent', !!activeBookmark);
+ btnBookmark.classList.toggle('text-orb-text-dim', !activeBookmark);
btnBookmark.title = activeBookmark
- ? 'Remove bookmark from this page (Cmd/Ctrl+D)'
- : 'Save bookmark for this page (Cmd/Ctrl+D)';
-
- btnBookmarkBar.textContent = state.isBookmarkBarVisible ? '▤' : '▥';
- btnBookmarkBar.title = state.isBookmarkBarVisible
- ? 'Hide bookmarks bar (Cmd/Ctrl+Shift+B)'
- : 'Show bookmarks bar (Cmd/Ctrl+Shift+B)';
-
- btnBookmarks.textContent = state.isBookmarksSidebarOpen ? '×' : '☰';
- btnBookmarks.title = state.isBookmarksSidebarOpen
- ? 'Hide bookmarks sidebar'
- : 'Show bookmarks sidebar';
-
- btnHistory.textContent = state.isHistorySidebarOpen ? '×' : 'H';
- btnHistory.title = state.isHistorySidebarOpen
- ? 'Hide history sidebar (Cmd/Ctrl+H)'
- : 'Show history sidebar (Cmd/Ctrl+H)';
+ ? 'Remove bookmark from this page (Ctrl+D)'
+ : 'Save bookmark for this page (Ctrl+D)';
}
function renderBookmarkEditor(): void {
@@ -496,8 +490,6 @@ function navigate(input: string): void {
}
closeBookmarkEditor();
-
- // Main process normalizes this to URL/search and performs navigation safely.
newTabSearch.value = '';
}
@@ -509,6 +501,42 @@ function closeTab(tabId: number): void {
requestTabClose(window.orb, tabId);
}
+function openMenu(): void {
+ const rect = btnMenu.getBoundingClientRect();
+ void window.orb.showMenu({
+ screenX: window.screenX + Math.round(rect.right),
+ screenY: window.screenY + Math.round(rect.bottom),
+ isBookmarkBarVisible: state.isBookmarkBarVisible,
+ theme: getCurrentTheme(),
+ });
+}
+
+function handleMenuAction(action: MenuAction): void {
+ switch (action) {
+ case MENU_ACTIONS.NEW_TAB:
+ requestTabCreate(window.orb);
+ break;
+ case MENU_ACTIONS.TOGGLE_BOOKMARKS:
+ toggleBookmarksSidebar();
+ break;
+ case MENU_ACTIONS.TOGGLE_HISTORY:
+ toggleHistorySidebar();
+ break;
+ case MENU_ACTIONS.TOGGLE_BOOKMARK_BAR:
+ toggleBookmarkBar();
+ break;
+ case MENU_ACTIONS.TOGGLE_THEME: {
+ const nextTheme = getNextTheme(getCurrentTheme());
+ setStoredTheme(nextTheme);
+ applyTheme(nextTheme);
+ break;
+ }
+ case MENU_ACTIONS.OPEN_FLOAT_SEARCH:
+ void window.orb.toggleFloat();
+ break;
+ }
+}
+
btnNewTab.addEventListener('click', () => {
requestTabCreate(window.orb);
});
@@ -525,28 +553,10 @@ btnReload.addEventListener('click', () => {
void window.orb.reload();
});
-btnTheme.addEventListener('click', () => {
- const nextTheme = getNextTheme(getCurrentTheme());
- setStoredTheme(nextTheme);
- applyTheme(nextTheme);
-});
-
btnBookmark.addEventListener('click', () => {
triggerBookmarkAction();
});
-btnBookmarkBar.addEventListener('click', () => {
- toggleBookmarkBar();
-});
-
-btnBookmarks.addEventListener('click', () => {
- toggleBookmarksSidebar();
-});
-
-btnHistory.addEventListener('click', () => {
- toggleHistorySidebar();
-});
-
btnHistoryClear.addEventListener('click', () => {
void window.orb.clearHistory().then(applyHistory);
});
@@ -555,6 +565,10 @@ btnFloat.addEventListener('click', () => {
void window.orb.toggleFloat();
});
+btnMenu.addEventListener('click', () => {
+ openMenu();
+});
+
bookmarkEditorSave.addEventListener('click', () => {
saveBookmarkFromEditor();
});
@@ -732,6 +746,10 @@ unsubscribeHistory = window.orb.onHistoryChanged(nextHistory => {
applyHistory(nextHistory);
});
+unsubscribeMenuAction = window.orb.onMenuAction(action => {
+ handleMenuAction(action);
+});
+
document.addEventListener('keydown', event => {
if (event.key === 'Escape' && state.isBookmarkEditorOpen) {
event.preventDefault();
@@ -807,6 +825,9 @@ window.addEventListener('beforeunload', () => {
unsubscribeHistory?.();
unsubscribeHistory = null;
+
+ unsubscribeMenuAction?.();
+ unsubscribeMenuAction = null;
});
window.orb.getBookmarks().then(initialBookmarks => {
diff --git a/src/renderer/menu.html b/src/renderer/menu.html
new file mode 100644
index 0000000..523cc0e
--- /dev/null
+++ b/src/renderer/menu.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
Orb Menu
+
+
+
+
+
+
diff --git a/src/renderer/menu.ts b/src/renderer/menu.ts
new file mode 100644
index 0000000..1358131
--- /dev/null
+++ b/src/renderer/menu.ts
@@ -0,0 +1,196 @@
+import './styles/tailwind.css';
+import { MENU_ACTIONS } from '../shared/ipc-contract';
+import type { MenuAction, MenuInitPayload } from '../shared/ipc-contract';
+import { ICONS } from './icons';
+import { normalizeTheme, ORB_THEME_STORAGE_KEY, resolveTheme } from './theme';
+
+const menuContainer = document.getElementById('menu') as HTMLDivElement;
+const themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+let menuState: MenuInitPayload = { isBookmarkBarVisible: true, theme: 'dark' };
+
+function getStoredTheme(): string | null {
+ try {
+ return window.localStorage.getItem(ORB_THEME_STORAGE_KEY);
+ } catch {
+ return null;
+ }
+}
+
+function syncTheme(): void {
+ const resolvedTheme = resolveTheme(getStoredTheme(), themeMediaQuery.matches);
+ document.documentElement.dataset.theme = resolvedTheme;
+}
+
+const onSystemThemeChanged = (): void => {
+ if (!normalizeTheme(getStoredTheme())) {
+ syncTheme();
+ }
+};
+
+syncTheme();
+themeMediaQuery.addEventListener('change', onSystemThemeChanged);
+
+interface MenuItem {
+ type: 'action';
+ action: MenuAction;
+ icon: string;
+ label: string;
+ shortcut?: string;
+ checked?: boolean;
+}
+
+interface MenuSeparator {
+ type: 'separator';
+}
+
+type MenuEntry = MenuItem | MenuSeparator;
+
+function buildMenuEntries(): MenuEntry[] {
+ const { isBookmarkBarVisible, theme } = menuState;
+ const themeIcon = theme === 'dark' ? ICONS.sun : ICONS.moon;
+ const themeLabel = theme === 'dark' ? 'Light Mode' : 'Dark Mode';
+
+ return [
+ {
+ type: 'action',
+ action: MENU_ACTIONS.NEW_TAB,
+ icon: ICONS.plus,
+ label: 'New Tab',
+ shortcut: 'Ctrl+T',
+ },
+ { type: 'separator' },
+ {
+ type: 'action',
+ action: MENU_ACTIONS.TOGGLE_BOOKMARKS,
+ icon: ICONS.bookmarks,
+ label: 'Bookmarks',
+ },
+ {
+ type: 'action',
+ action: MENU_ACTIONS.TOGGLE_HISTORY,
+ icon: ICONS.history,
+ label: 'History',
+ shortcut: 'Ctrl+H',
+ },
+ { type: 'separator' },
+ {
+ type: 'action',
+ action: MENU_ACTIONS.TOGGLE_BOOKMARK_BAR,
+ icon: ICONS.bookmarkBar,
+ label: 'Bookmarks Bar',
+ checked: isBookmarkBarVisible,
+ },
+ { type: 'separator' },
+ {
+ type: 'action',
+ action: MENU_ACTIONS.TOGGLE_THEME,
+ icon: themeIcon,
+ label: themeLabel,
+ },
+ { type: 'separator' },
+ {
+ type: 'action',
+ action: MENU_ACTIONS.OPEN_FLOAT_SEARCH,
+ icon: ICONS.floatSearch,
+ label: 'Floating Search',
+ shortcut: 'Ctrl+Shift+O',
+ },
+ ];
+}
+
+function escapeHtml(input: string): string {
+ return input
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+}
+
+function renderMenu(): void {
+ const entries = buildMenuEntries();
+ menuContainer.innerHTML = '';
+
+ entries.forEach(entry => {
+ if (entry.type === 'separator') {
+ const sep = document.createElement('div');
+ sep.className = 'my-1 border-t border-orb-border';
+ menuContainer.appendChild(sep);
+ return;
+ }
+
+ const btn = document.createElement('button');
+ btn.className =
+ 'flex w-full items-center gap-2.5 px-3 py-[7px] text-left text-[13px] text-orb-text' +
+ ' transition-colors hover:bg-orb-surface-2 active:bg-orb-surface-2' +
+ ' border-0 bg-transparent cursor-default';
+ btn.dataset.action = entry.action;
+
+ const iconSpan = document.createElement('span');
+ iconSpan.className = 'flex h-4 w-4 shrink-0 items-center justify-center text-orb-text-dim';
+ iconSpan.innerHTML = entry.icon;
+
+ const labelSpan = document.createElement('span');
+ labelSpan.className = 'flex-1 select-none';
+ labelSpan.textContent = entry.label;
+
+ btn.appendChild(iconSpan);
+ btn.appendChild(labelSpan);
+
+ if (entry.checked !== undefined) {
+ const checkSpan = document.createElement('span');
+ checkSpan.className = 'ml-auto flex h-4 w-4 shrink-0 items-center justify-center text-orb-accent';
+ if (entry.checked) {
+ checkSpan.innerHTML = ICONS.check;
+ }
+ btn.appendChild(checkSpan);
+ } else if (entry.shortcut) {
+ const shortcutSpan = document.createElement('span');
+ shortcutSpan.className = 'ml-auto shrink-0 select-none font-mono text-[11px] text-orb-text-dim';
+ shortcutSpan.textContent = escapeHtml(entry.shortcut);
+ btn.appendChild(shortcutSpan);
+ }
+
+ menuContainer.appendChild(btn);
+ });
+}
+
+menuContainer.addEventListener('click', event => {
+ const target = event.target;
+ if (!(target instanceof HTMLElement)) {
+ return;
+ }
+
+ const btn = target.closest('[data-action]');
+ if (!btn) {
+ return;
+ }
+
+ const action = btn.dataset.action as MenuAction | undefined;
+ if (!action) {
+ return;
+ }
+
+ void window.orb.menuAction(action);
+});
+
+window.orb.onMenuInit(state => {
+ menuState = state;
+ document.documentElement.dataset.theme = state.theme;
+ renderMenu();
+});
+
+window.addEventListener('storage', event => {
+ if (event.key === ORB_THEME_STORAGE_KEY) {
+ syncTheme();
+ }
+});
+
+window.addEventListener('focus', () => {
+ syncTheme();
+});
+
+window.addEventListener('beforeunload', () => {
+ themeMediaQuery.removeEventListener('change', onSystemThemeChanged);
+});
diff --git a/src/renderer/window.d.ts b/src/renderer/window.d.ts
index 4d1a15a..fcda134 100644
--- a/src/renderer/window.d.ts
+++ b/src/renderer/window.d.ts
@@ -5,6 +5,9 @@ import type {
BookmarkUpsertPayload,
BrowserBounds,
HistorySnapshot,
+ MenuAction,
+ MenuInitPayload,
+ MenuShowPayload,
TabsStateSnapshot,
} from '../shared/ipc-contract';
@@ -32,6 +35,10 @@ declare global {
getHistory: () => Promise;
clearHistory: () => Promise;
onHistoryChanged: (callback: (history: HistorySnapshot[]) => void) => () => void;
+ showMenu: (payload: MenuShowPayload) => Promise;
+ menuAction: (action: MenuAction) => Promise;
+ onMenuAction: (callback: (action: MenuAction) => void) => () => void;
+ onMenuInit: (callback: (state: MenuInitPayload) => void) => () => void;
platform: string;
};
}
diff --git a/src/shared/ipc-contract.ts b/src/shared/ipc-contract.ts
index f6c506b..394255e 100644
--- a/src/shared/ipc-contract.ts
+++ b/src/shared/ipc-contract.ts
@@ -40,6 +40,29 @@ export interface HistorySnapshot {
lastVisitedAt: string;
}
+export const MENU_ACTIONS = {
+ NEW_TAB: 'new-tab',
+ TOGGLE_BOOKMARKS: 'toggle-bookmarks',
+ TOGGLE_HISTORY: 'toggle-history',
+ TOGGLE_BOOKMARK_BAR: 'toggle-bookmark-bar',
+ TOGGLE_THEME: 'toggle-theme',
+ OPEN_FLOAT_SEARCH: 'open-float-search',
+} as const;
+
+export type MenuAction = (typeof MENU_ACTIONS)[keyof typeof MENU_ACTIONS];
+
+export interface MenuShowPayload {
+ screenX: number;
+ screenY: number;
+ isBookmarkBarVisible: boolean;
+ theme: 'light' | 'dark';
+}
+
+export interface MenuInitPayload {
+ isBookmarkBarVisible: boolean;
+ theme: 'light' | 'dark';
+}
+
export const IPC_CHANNELS = {
TOGGLE_FLOAT: 'toggle-float',
FLOAT_NAVIGATE: 'float-navigate',
@@ -62,4 +85,8 @@ export const IPC_CHANNELS = {
HISTORY_GET: 'history-get',
HISTORY_CLEAR: 'history-clear',
HISTORY_CHANGED: 'history-changed',
+ MENU_SHOW: 'menu-show',
+ MENU_INIT: 'menu-init',
+ MENU_ACTION: 'menu-action',
+ MENU_ACTION_RELAY: 'menu-action-relay',
} as const;
diff --git a/src/shared/ipc-preload.ts b/src/shared/ipc-preload.ts
index 4631d74..8a1ba48 100644
--- a/src/shared/ipc-preload.ts
+++ b/src/shared/ipc-preload.ts
@@ -4,9 +4,13 @@ import type {
BookmarkUpsertPayload,
BrowserBounds,
HistorySnapshot,
+ MenuAction,
+ MenuInitPayload,
+ MenuShowPayload,
TabSnapshot,
TabsStateSnapshot,
} from './ipc-contract';
+import { MENU_ACTIONS } from './ipc-contract';
function parseStringPayload(payload: unknown, maxLen = 2048): string | null {
if (typeof payload !== 'string') {
@@ -202,3 +206,56 @@ export function parseHistorySnapshotsPayload(payload: unknown): HistorySnapshot[
return payload;
}
+
+const validMenuActions: ReadonlySet = new Set(Object.values(MENU_ACTIONS));
+
+export function parseMenuActionPayload(payload: unknown): MenuAction | null {
+ if (typeof payload !== 'string' || !validMenuActions.has(payload)) {
+ return null;
+ }
+
+ return payload as MenuAction;
+}
+
+export function parseMenuShowPayload(payload: unknown): MenuShowPayload | null {
+ if (!payload || typeof payload !== 'object') {
+ return null;
+ }
+
+ const p = payload as Record;
+ if (typeof p.screenX !== 'number' || typeof p.screenY !== 'number') {
+ return null;
+ }
+
+ if (typeof p.isBookmarkBarVisible !== 'boolean') {
+ return null;
+ }
+
+ if (p.theme !== 'light' && p.theme !== 'dark') {
+ return null;
+ }
+
+ return {
+ screenX: p.screenX,
+ screenY: p.screenY,
+ isBookmarkBarVisible: p.isBookmarkBarVisible,
+ theme: p.theme,
+ };
+}
+
+export function parseMenuInitPayload(payload: unknown): MenuInitPayload | null {
+ if (!payload || typeof payload !== 'object') {
+ return null;
+ }
+
+ const p = payload as Record;
+ if (typeof p.isBookmarkBarVisible !== 'boolean') {
+ return null;
+ }
+
+ if (p.theme !== 'light' && p.theme !== 'dark') {
+ return null;
+ }
+
+ return { isBookmarkBarVisible: p.isBookmarkBarVisible, theme: p.theme };
+}
diff --git a/src/shared/ipc.ts b/src/shared/ipc.ts
index 60aa7b5..5fc493d 100644
--- a/src/shared/ipc.ts
+++ b/src/shared/ipc.ts
@@ -6,14 +6,21 @@ import type {
BookmarkUpsertPayload,
BrowserBounds,
HistorySnapshot,
+ MenuAction,
+ MenuInitPayload,
+ MenuShowPayload,
TabsStateSnapshot,
} from './ipc-contract';
-export { IPC_CHANNELS } from './ipc-contract';
+import { MENU_ACTIONS } from './ipc-contract';
+export { IPC_CHANNELS, MENU_ACTIONS } from './ipc-contract';
export type {
BookmarkSnapshot,
BookmarkUpsertPayload,
BrowserBounds,
HistorySnapshot,
+ MenuAction,
+ MenuInitPayload,
+ MenuShowPayload,
TabSnapshot,
TabsStateSnapshot,
} from './ipc-contract';
@@ -143,3 +150,41 @@ export function parseHistorySnapshotsPayload(payload: unknown): HistorySnapshot[
const parsedPayload = HistorySnapshotsPayloadSchema.safeParse(payload);
return parsedPayload.success ? parsedPayload.data : null;
}
+
+const MenuActionPayloadSchema = z.enum(
+ Object.values(MENU_ACTIONS) as [MenuAction, ...MenuAction[]],
+);
+
+const MenuShowPayloadSchema = z.object({
+ screenX: z.number(),
+ screenY: z.number(),
+ isBookmarkBarVisible: z.boolean(),
+ theme: z.enum(['light', 'dark']),
+});
+
+export function parseMenuActionPayload(payload: unknown): MenuAction | null {
+ const result = MenuActionPayloadSchema.safeParse(payload);
+ return result.success ? result.data : null;
+}
+
+export function parseMenuShowPayload(payload: unknown): MenuShowPayload | null {
+ const result = MenuShowPayloadSchema.safeParse(payload);
+ return result.success ? result.data : null;
+}
+
+export function parseMenuInitPayload(payload: unknown): MenuInitPayload | null {
+ if (!payload || typeof payload !== 'object') {
+ return null;
+ }
+
+ const p = payload as Record;
+ if (typeof p.isBookmarkBarVisible !== 'boolean') {
+ return null;
+ }
+
+ if (p.theme !== 'light' && p.theme !== 'dark') {
+ return null;
+ }
+
+ return { isBookmarkBarVisible: p.isBookmarkBarVisible, theme: p.theme };
+}
diff --git a/tests/renderer-contract.test.ts b/tests/renderer-contract.test.ts
index 6bc54e9..878f369 100644
--- a/tests/renderer-contract.test.ts
+++ b/tests/renderer-contract.test.ts
@@ -20,12 +20,9 @@ describe('renderer contract smoke', () => {
'btn-back',
'btn-forward',
'btn-reload',
- 'btn-theme',
'btn-bookmark',
- 'btn-bookmark-bar',
- 'btn-bookmarks',
- 'btn-history',
'btn-float',
+ 'btn-menu',
'bookmark-bar',
'bookmark-bar-list',
'bookmark-bar-empty',