feat: window size persistence (#1102)

Author: tatoalo

apps/twig/src/main/utils/store.ts

@@ -32,6 +32,14 @@ interface RendererStoreSchema {
   [key: string]: string;
 }
 
+export interface WindowStateSchema {
+  x: number | undefined;
+  y: number | undefined;
+  width: number;
+  height: number;
+  isMaximized: boolean;
+}
+
 const schema = {
   folders: {
     type: "array" as const,
@@ -98,6 +106,18 @@ export const archiveStore = new Store<ArchiveStoreSchema>({
   defaults: { archivedTasks: [] },
 });
 
+export const windowStateStore = new Store<WindowStateSchema>({
+  name: "window-state",
+  cwd: app.getPath("userData"),
+  defaults: {
+    x: undefined,
+    y: undefined,
+    width: 1200,
+    height: 600,
+    isMaximized: true,
+  },
+});
+
 const log = logger.scope("store");
 
 interface LegacyTaskAssociation {
@@ -210,4 +230,5 @@ export async function clearAllStoreData(): Promise<void> {
   foldersStore.clear();
   rendererStore.clear();
   archiveStore.clear();
+  windowStateStore.clear();
 }

apps/twig/src/main/window.ts

@@ -1,17 +1,61 @@
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { createIPCHandler } from "@posthog/electron-trpc/main";
-import { app, BrowserWindow, shell } from "electron";
+import { app, BrowserWindow, screen, shell } from "electron";
 import { buildApplicationMenu } from "./menu.js";
 import { setMainWindowGetter } from "./trpc/context.js";
 import { trpcRouter } from "./trpc/router.js";
+import { type WindowStateSchema, windowStateStore } from "./utils/store.js";
 
 declare const MAIN_WINDOW_VITE_DEV_SERVER_URL: string | undefined;
 declare const MAIN_WINDOW_VITE_NAME: string;
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+function isPositionOnScreen(x: number, y: number): boolean {
+  const displays = screen.getAllDisplays();
+  return displays.some((display) => {
+    const { x: dx, y: dy, width, height } = display.bounds;
+    return x >= dx && x < dx + width && y >= dy && y < dy + height;
+  });
+}
+
+function getSavedWindowState(): WindowStateSchema {
+  const state = {
+    x: windowStateStore.get("x"),
+    y: windowStateStore.get("y"),
+    width: windowStateStore.get("width", 1200),
+    height: windowStateStore.get("height", 600),
+    isMaximized: windowStateStore.get("isMaximized", true),
+  };
+
+  // Validate position is still on a connected display
+  if (state.x !== undefined && state.y !== undefined) {
+    if (!isPositionOnScreen(state.x, state.y)) {
+      state.x = undefined;
+      state.y = undefined;
+    }
+  }
+
+  return state;
+}
+
+function saveWindowState(window: BrowserWindow): void {
+  const isMaximized = window.isMaximized();
+  windowStateStore.set("isMaximized", isMaximized);
+
+  // Only save bounds when not maximized, so restoring from maximized
+  // gives the user their previous windowed size/position
+  if (!isMaximized) {
+    const bounds = window.getBounds();
+    windowStateStore.set("x", bounds.x);
+    windowStateStore.set("y", bounds.y);
+    windowStateStore.set("width", bounds.width);
+    windowStateStore.set("height", bounds.height);
+  }
+}
+
 let mainWindow: BrowserWindow | null = null;
 
 export function getMainWindow(): BrowserWindow | null {
@@ -42,11 +86,28 @@ function setupExternalLinkHandlers(window: BrowserWindow): void {
 
 export function createWindow(): void {
   const isDev = !app.isPackaged;
+  const savedState = getSavedWindowState();
+  let saveTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const scheduleSaveWindowState = (window: BrowserWindow): void => {
+    if (saveTimeout) {
+      clearTimeout(saveTimeout);
+    }
+
+    saveTimeout = setTimeout(() => {
+      if (!window.isDestroyed()) {
+        saveWindowState(window);
+      }
+      saveTimeout = null;
+    }, 200);
+  };
 
   mainWindow = new BrowserWindow({
-    width: 900,
-    height: 600,
-    minWidth: 900,
+    ...(savedState.x !== undefined && { x: savedState.x }),
+    ...(savedState.y !== undefined && { y: savedState.y }),
+    width: savedState.width,
+    height: savedState.height,
+    minWidth: 1200,
     minHeight: 600,
     backgroundColor: "#0a0a0a",
     titleBarStyle: "hiddenInset",
@@ -63,10 +124,25 @@ export function createWindow(): void {
   });
 
   mainWindow.once("ready-to-show", () => {
-    mainWindow?.maximize();
+    if (savedState.isMaximized) {
+      mainWindow?.maximize();
+    }
     mainWindow?.show();
   });
 
+  // Persist window state on changes
+  mainWindow.on(
+    "resize",
+    () => mainWindow && scheduleSaveWindowState(mainWindow),
+  );
+  mainWindow.on(
+    "move",
+    () => mainWindow && scheduleSaveWindowState(mainWindow),
+  );
+  mainWindow.on("maximize", () => mainWindow && saveWindowState(mainWindow));
+  mainWindow.on("unmaximize", () => mainWindow && saveWindowState(mainWindow));
+  mainWindow.on("close", () => mainWindow && saveWindowState(mainWindow));
+
   setMainWindowGetter(() => mainWindow);
 
   createIPCHandler({
@@ -86,6 +162,10 @@ export function createWindow(): void {
   }
 
   mainWindow.on("closed", () => {
+    if (saveTimeout) {
+      clearTimeout(saveTimeout);
+      saveTimeout = null;
+    }
     mainWindow = null;
   });
 }