feat: add Electron desktop client

[mahata]

Summary

• Adds an Electron desktop client (electron/ workspace package) that wraps the existing mlack web app in a native desktop window
• Includes system tray icon with context menu, native OS notifications for new messages when the window is unfocused, and persistent login sessions
• Integrates into the monorepo with root-level electron:dev, electron:build, and electron:package scripts

Details

Architecture

The Electron app is a thin wrapper — it loads the mlack web app (localhost:8787 in dev, mlack.uk in prod) in a BrowserWindow. No server changes required.

Features

• Native notifications: WebSocket messages are intercepted via an injected script that monkey-patches WebSocket in the renderer. When the window is unfocused and a new message arrives, a native OS notification is shown. Clicking it focuses the window.
• System tray: Tray icon with "Open MLack" and "Quit" options. Clicking the icon shows/focuses the window.
• Persistent sessions: Electron's default session persists cookies, so login state survives app restarts.
• External links: Links that open new windows are opened in the system browser.
• Packaging: electron-builder configured for macOS (.dmg), Windows (.exe), and Linux (.AppImage).

Usage

pnpm dev                    # Terminal 1: start web server
pnpm electron:dev           # Terminal 2: launch desktop app (localhost)
pnpm electron:package       # Build distributable

New files

File	Purpose
electron/package.json	Package config with Electron deps and scripts
electron/tsconfig.json	TypeScript config for main process
electron/src/main.ts	Main process (BrowserWindow, lifecycle)
electron/src/preload.ts	Context bridge for notification API
electron/src/tray.ts	System tray icon and menu
electron/src/notifications.ts	Desktop notification logic
electron/assets/icon.png	Placeholder icon (replace later)

[Copilot]

Pull request overview

Adds a new electron/ workspace package that wraps the existing MLack web app in an Electron BrowserWindow, with a tray icon and native notifications, and wires it into the monorepo via root electron:* scripts.

Changes:

• Add electron/ workspace package (main process, preload, tray, notifications) plus packaging config.
• Update monorepo scripts/workspace config to support pnpm electron:dev|build|package.
• Update pnpm configuration/lockfile to include Electron + electron-builder dependencies.

Show a summary per file

File	Description
pnpm-workspace.yaml	Adds electron as a workspace package.
package.json	Adds root scripts for Electron workflows and pnpm.onlyBuiltDependencies config.
pnpm-lock.yaml	Locks Electron/electron-builder dependency graph and related transitive deps.
electron/package.json	Defines mlack-desktop package scripts and electron-builder packaging targets.
electron/tsconfig.json	TypeScript config for the Electron main/preload build output.
electron/src/main.ts	Creates the BrowserWindow, handles external links, bootstraps tray + notifications.
electron/src/tray.ts	Implements tray icon + context menu actions.
electron/src/notifications.ts	Implements IPC-driven notifications and injects WS interception script.
electron/src/preload.ts	Exposes mlackDesktop bridge for renderer → main IPC interactions.
electron/assets/icon.png	Adds placeholder tray/app icon asset.
electron/.gitignore	Ignores build artifacts for the Electron package.

Copilot's findings

• Files reviewed: 9/11 changed files
• Comments generated: 7

[Copilot]

The app calls createTray() and setupNotifications() again inside the activate handler when creating a new window. On macOS, this path can be hit multiple times during the app lifetime, which can lead to multiple tray icons (since the old tray isn’t destroyed) and duplicate IPC notification listeners. Consider ensuring any existing tray/listeners are torn down before recreating them, or structure initialization so tray + IPC are set up exactly once per app lifecycle.

[Copilot]

The tray "Quit" action calls process.exit(0) after destroying the window. For Electron apps this bypasses normal shutdown/cleanup (and can skip async teardown), which can lead to corrupted state or incomplete telemetry/log flushing. Prefer app.quit() (and optionally app.exit(0) only after before-quit completes) instead of process.exit.

[Copilot]

The show-notification IPC channel is accepted from any renderer without validating the sender’s origin. Since this app loads a remote URL in production, a compromised/modified page could spam OS notifications with arbitrary content. Consider checking event.senderFrame.url (or event.sender.getURL()) against an allowlist (dev localhost + prod domain) and applying basic validation/truncation to title/body before showing notifications.

Suggested change

	import type { BrowserWindow } from "electron";
	export function setupNotifications(mainWindow: BrowserWindow): void {
	ipcMain.on("show-notification", (_event, data: { title: string; body: string; channelId?: number }) => {
	if (mainWindow.isFocused()) {
	return;
	}
	const notification = new Notification({
	title: data.title,
	body: data.body,
	silent: false,
	});
	notification.on("click", () => {
	mainWindow.show();
	mainWindow.focus();
	if (data.channelId !== undefined) {
	mainWindow.webContents.send("notification-clicked", data.channelId);
	import type { BrowserWindow, IpcMainEvent } from "electron";
	const localDevelopmentOrigins = new Set([
	"http://localhost:3000",
	"http://localhost:5173",
	"http://127.0.0.1:3000",
	"http://127.0.0.1:5173",
	]);
	const notificationTitleLimit = 120;
	const notificationBodyLimit = 500;
	function getOrigin(value: string): string | null {
	try {
	return new URL(value).origin;
	} catch {
	return null;
	}
	}
	function isAllowedNotificationSender(event: IpcMainEvent, mainWindow: BrowserWindow): boolean {
	const senderUrl = event.senderFrame?.url || event.sender.getURL();
	const senderOrigin = getOrigin(senderUrl);
	if (!senderOrigin) {
	return false;
	}
	if (localDevelopmentOrigins.has(senderOrigin)) {
	return true;
	}
	const mainWindowOrigin = getOrigin(mainWindow.webContents.getURL());
	return mainWindowOrigin !== null && senderOrigin === mainWindowOrigin;
	}
	function normalizeNotificationText(value: unknown, maxLength: number): string | null {
	if (typeof value !== "string") {
	return null;
	}
	const normalizedValue = value.replace(/\s+/g, " ").trim();
	if (!normalizedValue) {
	return null;
	}
	return normalizedValue.slice(0, maxLength);
	}
	export function setupNotifications(mainWindow: BrowserWindow): void {
	ipcMain.on("show-notification", (event, data: unknown) => {
	if (!isAllowedNotificationSender(event, mainWindow)) {
	return;
	}
	if (mainWindow.isFocused()) {
	return;
	}
	if (!data || typeof data !== "object") {
	return;
	}
	const payload = data as { title?: unknown; body?: unknown; channelId?: unknown };
	const title = normalizeNotificationText(payload.title, notificationTitleLimit);
	const body = normalizeNotificationText(payload.body, notificationBodyLimit);
	const channelId = Number.isInteger(payload.channelId) ? payload.channelId : undefined;
	if (!title || !body) {
	return;
	}
	const notification = new Notification({
	title,
	body,
	silent: false,
	});
	notification.on("click", () => {
	mainWindow.show();
	mainWindow.focus();
	if (channelId !== undefined) {
	mainWindow.webContents.send("notification-clicked", channelId);

[Copilot]

electron-builder is configured to use assets/icon.icns (mac) and assets/icon.ico (win), but this PR only adds assets/icon.png. As-is, packaging for macOS/Windows will likely fail due to missing icon files. Either add the .icns/.ico assets or update the config to use files that exist.

Suggested change

	"icon": "assets/icon.icns",
	"target": ["dmg"]
	},
	"win": {
	"icon": "assets/icon.ico",
	"icon": "assets/icon.png",
	"target": ["dmg"]
	},
	"win": {
	"icon": "assets/icon.png",