diff --git a/apps/desktop/src/renderer/features/shell/TitleBar.tsx b/apps/desktop/src/renderer/features/shell/TitleBar.tsx index 733ef4f..a37ee2e 100644 --- a/apps/desktop/src/renderer/features/shell/TitleBar.tsx +++ b/apps/desktop/src/renderer/features/shell/TitleBar.tsx @@ -19,7 +19,7 @@ export function TitleBar({ onToggleView, view, onSettings, onAppearance, onToggl
- + diff --git a/apps/desktop/tests/e2e/screenshot-titlebar.spec.ts b/apps/desktop/tests/e2e/screenshot-titlebar.spec.ts new file mode 100644 index 0000000..0227ff3 --- /dev/null +++ b/apps/desktop/tests/e2e/screenshot-titlebar.spec.ts @@ -0,0 +1,40 @@ +import { test } from '@playwright/test'; +import { _electron as electron } from 'playwright'; +import { promises as fs } from 'node:fs'; +import nodePath from 'node:path'; +import os from 'node:os'; + +const MAIN_JS = nodePath.join(process.cwd(), 'dist-electron/main/index.js'); + +test('screenshot titlebar buttons', async () => { + const tmp = await fs.mkdtemp(nodePath.join(os.tmpdir(), 'hn-shot2-')); + const ud = nodePath.join(tmp, 'ud'); const v = nodePath.join(tmp, 'v'); + await fs.mkdir(ud, { recursive: true }); await fs.mkdir(v, { recursive: true }); + const app = await electron.launch({ args: ['--user-data-dir=' + ud, MAIN_JS] }); + const page = await app.firstWindow(); + await page.waitForLoadState('domcontentloaded'); + await page.evaluate((root: string) => (globalThis as any).dsh.invoke('vault:switch', { root }), v); + await page.waitForTimeout(500); + // Clip the top-right area where buttons are (full width, top 36px) + await page.screenshot({ path: 'test-results/titlebar-buttons.png', clip: { x: 780, y: 0, width: 420, height: 36 } }); + // Get computed styles of each button to check visibility + const btnInfo = await page.evaluate(() => { + return Array.from(document.querySelectorAll('button[title]')).filter(b => { + const r = b.getBoundingClientRect(); + return r.top < 36; // titlebar buttons only + }).map(b => { + const cs = getComputedStyle(b); + const r = b.getBoundingClientRect(); + return { + title: b.getAttribute('title'), + text: b.textContent, + color: cs.color, + fontSize: cs.fontSize, + x: Math.round(r.x), y: Math.round(r.y), + w: Math.round(r.width), h: Math.round(r.height) + }; + }); + }); + console.log('TITLEBAR_BTNS:', JSON.stringify(btnInfo, null, 2)); + await app.close(); +});