feat(renderer): About dialog + wire Help > About Etherpad Desktop

Help > About fired the IPC but the renderer had no handler and no
AboutDialog component existed. The menu entry was dead. This adds
the dialog (name, version, license, links) and the handler in
App.tsx.

Version is injected at build time via electron-vite's \`define\`
from package.json. AboutDialog falls back to '0.1.0' in environments
where the define isn't applied (e.g. unit tests).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: JohnMcLear

electron.vite.config.ts

@@ -1,6 +1,9 @@
 import { defineConfig } from 'electron-vite';
 import react from '@vitejs/plugin-react';
 import { resolve } from 'node:path';
+import { readFileSync } from 'node:fs';
+
+const pkg = JSON.parse(readFileSync('./package.json', 'utf8')) as { version: string };
 
 export default defineConfig({
   main: {
@@ -39,5 +42,8 @@ export default defineConfig({
     resolve: {
       alias: { '@shared': resolve('src/shared') },
     },
+    define: {
+      __APP_VERSION__: JSON.stringify(pkg.version),
+    },
   },
 });

src/renderer/App.tsx

@@ -8,6 +8,7 @@ import { OpenPadDialog } from './dialogs/OpenPadDialog.js';
 import { SettingsDialog } from './dialogs/SettingsDialog.js';
 import { RemoveWorkspaceDialog } from './dialogs/RemoveWorkspaceDialog.js';
 import { HttpAuthDialog } from './dialogs/HttpAuthDialog.js';
+import { AboutDialog } from './dialogs/AboutDialog.js';
 import { WorkspaceRail } from './rail/WorkspaceRail.js';
 import { PadSidebar } from './sidebar/PadSidebar.js';
 import { TabStrip } from './tabs/TabStrip.js';
@@ -99,6 +100,7 @@ export function App(): JSX.Element {
         const k = (p as { kind: string }).kind;
         if (k === 'menu.newTab' || k === 'menu.openPad') dialogActions.openDialog('openPad');
         if (k === 'menu.settings') dialogActions.openDialog('settings');
+        if (k === 'menu.about') dialogActions.openDialog('about');
         if (k === 'menu.reload') {
           const { activeTabId: activeId } = useShellStore.getState();
           if (activeId) void ipc.tab.reload({ tabId: activeId });
@@ -138,6 +140,7 @@ export function App(): JSX.Element {
       {openDialog === 'settings' && <SettingsDialog />}
       {openDialog === 'removeWorkspace' && <RemoveWorkspaceDialog />}
       {openDialog === 'httpAuth' && <HttpAuthDialog />}
+      {openDialog === 'about' && <AboutDialog />}
     </ErrorBoundary>
   );
 }

src/renderer/dialogs/AboutDialog.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { dialogActions } from '../state/store.js';
+
+export function AboutDialog(): JSX.Element {
+  // App version comes from package.json at build time. Vite injects __APP_VERSION__
+  // via define; if not configured, fall back to a constant.
+  const version =
+    typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.1.0';
+
+  return (
+    <div role="dialog" aria-modal="true" aria-labelledby="about-title" style={overlayStyle}>
+      <div style={panelStyle}>
+        <h2 id="about-title" style={{ margin: 0, fontSize: 22, fontWeight: 700 }}>
+          Etherpad Desktop
+        </h2>
+        <p style={{ margin: 0, color: 'var(--text-muted)' }}>Version {version}</p>
+        <p style={{ margin: '8px 0 0' }}>
+          Native desktop client for{' '}
+          <a
+            href="https://etherpad.org/"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: 'var(--accent)', textDecoration: 'none' }}
+          >
+            Etherpad
+          </a>
+          .
+        </p>
+        <p style={{ margin: '8px 0 0', color: 'var(--text-muted)', fontSize: 13 }}>
+          Released under the Apache-2.0 license. Source on{' '}
+          <a
+            href="https://github.com/ether/etherpad-desktop"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: 'var(--accent)', textDecoration: 'none' }}
+          >
+            GitHub
+          </a>
+          .
+        </p>
+        <p style={{ margin: '8px 0 0', color: 'var(--text-muted)', fontSize: 13 }}>
+          Made by the Etherpad Foundation and contributors.
+        </p>
+        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 16 }}>
+          <button className="btn-primary" onClick={() => dialogActions.closeDialog()}>
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const overlayStyle: React.CSSProperties = {
+  position: 'fixed',
+  inset: 0,
+  background: 'var(--modal-overlay-bg)',
+  display: 'grid',
+  placeItems: 'center',
+  zIndex: 100,
+};
+const panelStyle: React.CSSProperties = {
+  background: 'var(--panel-bg)',
+  color: 'var(--panel-fg)',
+  padding: 24,
+  borderRadius: 12,
+  width: 380,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4,
+  boxShadow: 'var(--panel-shadow)',
+  border: '1px solid var(--panel-border)',
+};

src/renderer/global.d.ts

@@ -4,6 +4,9 @@ declare global {
   interface Window {
     etherpadDesktop: EtherpadDesktopApi;
   }
+
+  // Build-time constant injected by electron-vite's define option
+  const __APP_VERSION__: string;
 }
 
 export {};

src/renderer/state/store.ts

@@ -10,6 +10,7 @@ export type DialogKind =
   | 'settings'
   | 'removeWorkspace'
   | 'httpAuth'
+  | 'about'
   | null;
 
 export type ShellState = {

tests/e2e/menu-click.spec.ts

@@ -82,3 +82,29 @@ test('File > Settings opens SettingsDialog (the user-reported bug)', async () =>
     await h.close();
   }
 });
+
+async function clickHelpMenuItem(h: AppHandle, label: string): Promise<boolean> {
+  return await h.app.evaluate(({ Menu }, { lbl }) => {
+    const menu = Menu.getApplicationMenu();
+    if (!menu) return false;
+    const help = menu.items.find((m) => m.label === 'Help');
+    if (!help || !help.submenu) return false;
+    const item = help.submenu.items.find((m) => m.label === lbl);
+    if (!item) return false;
+    item.click();
+    return true;
+  }, { lbl: label });
+}
+
+test('Help > About Etherpad Desktop opens AboutDialog (the user-reported bug)', async () => {
+  const h = await launchApp();
+  try {
+    await setupWorkspace(h, 'AboutTest');
+    const ok = await clickHelpMenuItem(h, 'About Etherpad Desktop');
+    expect(ok).toBe(true);
+    await expect(h.shell.getByRole('heading', { name: /^etherpad desktop$/i })).toBeVisible();
+    await expect(h.shell.getByText(/version 0\.1\.0/i)).toBeVisible();
+  } finally {
+    await h.close();
+  }
+});

tests/renderer/dialogs/AboutDialog.spec.tsx

@@ -0,0 +1,19 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { AboutDialog } from '../../../src/renderer/dialogs/AboutDialog';
+import { useShellStore, dialogActions } from '../../../src/renderer/state/store';
+
+beforeEach(() => {
+  useShellStore.setState(useShellStore.getInitialState());
+  dialogActions.openDialog('about');
+});
+
+describe('AboutDialog', () => {
+  it('shows the app name + Close dismisses', async () => {
+    render(<AboutDialog />);
+    expect(screen.getByRole('heading', { name: /etherpad desktop/i })).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: /close/i }));
+    expect(useShellStore.getState().openDialog).toBeNull();
+  });
+});