Use anchored Windows tray popup (#226)

* Use anchored Windows tray popup

* Fix tray diagnostics typing

---------

Co-authored-by: Owen McGirr <o.a.mcgirr@gmail.com>

Author: enaboapps

src/main/tray.test.ts

@@ -10,12 +10,18 @@ const electronMock = vi.hoisted(() => {
     click?: () => void;
     type?: string;
   };
+  type FakeMenu = {
+    template: MenuTemplateItem[];
+    once: ReturnType<typeof vi.fn>;
+    emitMenuWillClose: () => void;
+  };
 
   class FakeTray {
     readonly handlers = new Map<string, Handler[]>();
     readonly setToolTip = vi.fn();
     readonly setContextMenu = vi.fn();
     readonly popUpContextMenu = vi.fn();
+    readonly focus = vi.fn();
     readonly destroy = vi.fn();
 
     on(event: string, handler: Handler): this {
@@ -38,11 +44,28 @@ const electronMock = vi.hoisted(() => {
       setTemplateImage: vi.fn()
     }))
   };
-  const buildFromTemplate = vi.fn((template: MenuTemplateItem[]) => ({ template }));
+  const menus: FakeMenu[] = [];
+  const buildFromTemplate = vi.fn((template: MenuTemplateItem[]) => {
+    let menuWillCloseHandler: Handler | null = null;
+    const menu = {
+      template,
+      once: vi.fn((event: string, handler: Handler) => {
+        if (event === 'menu-will-close') {
+          menuWillCloseHandler = handler;
+        }
+      }),
+      emitMenuWillClose: () => {
+        menuWillCloseHandler?.();
+      }
+    };
+    menus.push(menu);
+    return menu;
+  });
 
   return {
     FakeTray,
     trayInstances,
+    menus,
     buildFromTemplate,
     image
   };
@@ -67,12 +90,14 @@ vi.mock('electron', () => ({
 }));
 
 import { createSwitchifyTray } from './tray';
+import { trayMenuPosition } from './tray';
 
 describe('createSwitchifyTray', () => {
   const originalPlatform = process.platform;
 
   beforeEach(() => {
     electronMock.trayInstances.length = 0;
+    electronMock.menus.length = 0;
     electronMock.buildFromTemplate.mockClear();
     electronMock.image.resize.mockClear();
     setPlatform('win32');
@@ -98,33 +123,63 @@ describe('createSwitchifyTray', () => {
     expect(callbacks.quit).not.toHaveBeenCalled();
   });
 
-  it('attaches the context menu on Windows', () => {
+  it('uses an anchored manual popup on Windows right-click', () => {
     const callbacks = createCallbacks();
     createSwitchifyTray({
       ...callbacks,
       getStatus: () => status()
     });
 
-    expect(tray().setContextMenu).toHaveBeenCalledTimes(1);
-    expect(tray().setContextMenu).toHaveBeenCalledWith(lastMenu());
-    expect(tray().popUpContextMenu).not.toHaveBeenCalled();
-    expect(tray().handlers.has('right-click')).toBe(false);
+    expect(tray().setContextMenu).not.toHaveBeenCalled();
+    expect(tray().handlers.has('right-click')).toBe(true);
+
+    tray().emit('right-click', {}, { x: 100, y: 100, width: 16, height: 24 });
+
+    expect(tray().popUpContextMenu).toHaveBeenCalledTimes(1);
+    expect(tray().popUpContextMenu).toHaveBeenCalledWith(lastMenu(), { x: 100, y: 124 });
   });
 
-  it('refreshes the context menu with the latest status on update', () => {
+  it('refreshes the context menu with the latest status before Windows popup', () => {
     const callbacks = createCallbacks();
     let connectedClientCount = 0;
-    const switchifyTray = createSwitchifyTray({
+    createSwitchifyTray({
       ...callbacks,
       getStatus: () => status({ connectedClientCount })
     });
 
     connectedClientCount = 1;
-    switchifyTray.update();
+    tray().emit('right-click', {}, { x: 100, y: 100, width: 16, height: 24 });
 
     const disconnectItem = lastMenu().template.find((item) => item.label === 'Disconnect device');
     expect(disconnectItem?.enabled).toBe(true);
-    expect(tray().setContextMenu).toHaveBeenLastCalledWith(lastMenu());
+    expect(tray().popUpContextMenu).toHaveBeenLastCalledWith(lastMenu(), { x: 100, y: 124 });
+  });
+
+  it('restores notification area focus when the Windows popup closes', () => {
+    const callbacks = createCallbacks();
+    createSwitchifyTray({
+      ...callbacks,
+      getStatus: () => status()
+    });
+
+    tray().emit('right-click', {}, { x: 100, y: 100, width: 16, height: 24 });
+    lastMenu().emitMenuWillClose();
+
+    expect(tray().focus).toHaveBeenCalledTimes(1);
+  });
+
+  it('attaches the context menu on non-Windows platforms', () => {
+    setPlatform('darwin');
+    const callbacks = createCallbacks();
+    createSwitchifyTray({
+      ...callbacks,
+      getStatus: () => status()
+    });
+
+    expect(tray().setContextMenu).toHaveBeenCalledTimes(1);
+    expect(tray().setContextMenu).toHaveBeenCalledWith(lastMenu());
+    expect(tray().popUpContextMenu).not.toHaveBeenCalled();
+    expect(tray().handlers.has('right-click')).toBe(false);
   });
 
   it('refreshes the tooltip on update', () => {
@@ -152,6 +207,17 @@ describe('createSwitchifyTray', () => {
   });
 });
 
+describe('trayMenuPosition', () => {
+  it('anchors a menu below the tray bounds', () => {
+    expect(trayMenuPosition({ x: 10.4, y: 20.2, width: 16, height: 18.6 })).toEqual({ x: 10, y: 39 });
+  });
+
+  it('returns undefined for missing or invalid bounds', () => {
+    expect(trayMenuPosition(undefined)).toBeUndefined();
+    expect(trayMenuPosition({ x: Number.NaN, y: 20, width: 16, height: 18 })).toBeUndefined();
+  });
+});
+
 function createCallbacks(): Omit<Parameters<typeof createSwitchifyTray>[0], 'getStatus'> {
   return {
     showWindow: vi.fn(),
@@ -182,13 +248,15 @@ function tray(): InstanceType<typeof electronMock.FakeTray> {
   return currentTray;
 }
 
-function lastMenu(): { template: Array<{ label?: string; enabled?: boolean; click?: () => void; type?: string }> } {
-  const calls = electronMock.buildFromTemplate.mock.calls;
-  const template = calls.at(-1)?.[0];
-  if (!template) {
+function lastMenu(): {
+  template: Array<{ label?: string; enabled?: boolean; click?: () => void; type?: string }>;
+  emitMenuWillClose: () => void;
+} {
+  const menu = electronMock.menus.at(-1);
+  if (!menu) {
     throw new Error('Expected a menu template.');
   }
-  return { template };
+  return menu;
 }
 
 function setPlatform(platform: NodeJS.Platform): void {

src/main/tray.ts

@@ -1,4 +1,4 @@
-import { app, Menu, nativeImage, Tray, type NativeImage } from 'electron';
+import { app, Menu, nativeImage, Tray, type NativeImage, type Rectangle } from 'electron';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
 import type { PcControlStatus } from '../shared/server-status';
@@ -16,6 +16,9 @@ export type SwitchifyTray = {
   destroy: () => void;
 };
 
+type TrayEventName = 'click' | 'right-click' | 'double-click' | 'mouse-enter' | 'mouse-leave';
+type TrayBounds = Pick<Rectangle, 'x' | 'y' | 'width' | 'height'>;
+
 export function createSwitchifyTray(options: SwitchifyTrayOptions): SwitchifyTray {
   const tray = new Tray(createTrayIcon());
   let currentMenu: Menu | null = null;
@@ -24,10 +27,16 @@ export function createSwitchifyTray(options: SwitchifyTrayOptions): SwitchifyTra
     const status = options.getStatus();
     currentMenu = buildTrayMenu(options, status);
     tray.setToolTip(`Switchify PC - ${formatTooltipStatus(status)}`);
-    tray.setContextMenu(currentMenu);
+    if (process.platform !== 'win32') {
+      tray.setContextMenu(currentMenu);
+    }
   };
 
   tray.on('click', options.showWindow);
+  if (process.platform === 'win32') {
+    registerWindowsTrayMenu(tray, update, () => currentMenu);
+    registerWindowsTrayDiagnostics(tray);
+  }
   update();
 
   return {
@@ -52,6 +61,68 @@ function buildTrayMenu(options: SwitchifyTrayOptions, status: PcControlStatus):
   ]);
 }
 
+function registerWindowsTrayMenu(tray: Tray, update: () => void, getCurrentMenu: () => Menu | null): void {
+  tray.on('right-click', (_event, bounds) => {
+    update();
+    const menu = getCurrentMenu();
+    if (!menu) return;
+
+    menu.once?.('menu-will-close', () => {
+      tray.focus?.();
+    });
+    tray.popUpContextMenu(menu, trayMenuPosition(bounds));
+  });
+}
+
+function registerWindowsTrayDiagnostics(tray: Tray): void {
+  tray.on('click', (_event, bounds) => logTrayEvent('click', bounds));
+  tray.on('right-click', (_event, bounds) => logTrayEvent('right-click', bounds));
+  tray.on('double-click', (_event, bounds) => logTrayEvent('double-click', bounds));
+  tray.on('mouse-enter', (_event, position) => logTrayEvent('mouse-enter', isTrayBounds(position) ? position : undefined));
+  tray.on('mouse-leave', (_event, position) => logTrayEvent('mouse-leave', isTrayBounds(position) ? position : undefined));
+}
+
+export function trayMenuPosition(bounds: TrayBounds | undefined): { x: number; y: number } | undefined {
+  if (!bounds || !isFiniteBounds(bounds)) return undefined;
+  return {
+    x: Math.round(bounds.x),
+    y: Math.round(bounds.y + bounds.height)
+  };
+}
+
+function isFiniteBounds(bounds: TrayBounds): boolean {
+  return (
+    Number.isFinite(bounds.x) &&
+    Number.isFinite(bounds.y) &&
+    Number.isFinite(bounds.width) &&
+    Number.isFinite(bounds.height)
+  );
+}
+
+function isTrayBounds(value: unknown): value is TrayBounds {
+  if (!value || typeof value !== 'object') return false;
+  const maybeBounds = value as Partial<TrayBounds>;
+  return (
+    typeof maybeBounds.x === 'number' &&
+    typeof maybeBounds.y === 'number' &&
+    typeof maybeBounds.width === 'number' &&
+    typeof maybeBounds.height === 'number'
+  );
+}
+
+function shouldLogTrayDiagnostics(): boolean {
+  return process.platform === 'win32' && (app.isPackaged || process.env.SWITCHIFY_TRAY_DEBUG === '1');
+}
+
+function logTrayEvent(eventName: TrayEventName, bounds?: TrayBounds): void {
+  if (!shouldLogTrayDiagnostics()) return;
+  console.info('[tray]', eventName, bounds ? formatBounds(bounds) : '');
+}
+
+function formatBounds(bounds: TrayBounds): string {
+  return `x=${Math.round(bounds.x)} y=${Math.round(bounds.y)} width=${Math.round(bounds.width)} height=${Math.round(bounds.height)}`;
+}
+
 function createTrayIcon(): NativeImage {
   const iconPath = app.isPackaged
     ? join(process.resourcesPath, 'icon.png')