Add setup window on first app launch

src/main/index.ts

@@ -3,12 +3,21 @@ import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 import { autoUpdater } from 'electron-updater'
+import Store from './lib/Store'
 
 autoUpdater.autoDownload = false;
 autoUpdater.autoInstallOnAppQuit = true;
 
+const store = new Store({
+  configName: 'user-preferences',
+  defaults: {
+    showSetupWindow: true
+  }
+});
+
 let mainWindow: BrowserWindow;
 let splashWindow: BrowserWindow;
+let setupWindow: BrowserWindow;
 
 function createSplashWindow(): void {
   splashWindow = new BrowserWindow({
@@ -24,7 +33,22 @@ function createSplashWindow(): void {
   splashWindow.show();
 }
 
-function createWindow(): void {
+function createSetupWindow(): void {
+  setupWindow = new BrowserWindow({
+    width: 380, 
+    height: 390,
+    show: false,
+    autoHideMenuBar: true,
+    ...(process.platform === 'linux' ? { icon } : {}),
+    webPreferences: {
+      preload: join(__dirname, '../preload/index.js'),
+      sandbox: false
+    },
+  });
+  setupWindow.loadFile('src/renderer/setup.html');
+}
+
+function createMainWindow(): void {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     width: 900,
@@ -38,20 +62,6 @@ function createWindow(): void {
     }
   })
 
-  createSplashWindow();
-
-  mainWindow.on('ready-to-show', () => {
-    if (is.dev) {
-      setTimeout((): void => {
-        splashWindow.close();
-        mainWindow.show();
-      }, 2000);
-    } else {
-      splashWindow.close();
-      mainWindow.show();
-    }
-  })
-
   mainWindow.webContents.setWindowOpenHandler((details) => {
     shell.openExternal(details.url)
     return { action: 'deny' }
@@ -66,6 +76,35 @@ function createWindow(): void {
   }
 }
 
+function finishSetup(): void {
+  store.set('showSetupWindow', false);
+  createMainWindow();
+  mainWindow.on('ready-to-show', () => {
+    mainWindow.show();
+    setupWindow.close();
+  })
+}
+
+function createWindow(): void {
+  createSplashWindow();
+  
+  let showSetupWindow = store.get('showSetupWindow');
+  if (showSetupWindow) {
+    createSetupWindow();
+    setupWindow.on('ready-to-show', () => {
+      splashWindow.close();
+      setupWindow.show();
+    })
+  } else {
+    createMainWindow();
+    mainWindow.on('ready-to-show', () => {
+      splashWindow.close();
+      mainWindow.show();
+    })
+  }
+  
+}
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
@@ -82,6 +121,7 @@ app.whenReady().then(() => {
 
   // IPC test
   ipcMain.on('ping', () => console.log('pong'))
+  ipcMain.on('finish-setup', () => finishSetup())
 
   ipcMain.handle('get-version', () => app.getVersion())
 

src/main/lib/Store.ts

@@ -0,0 +1,47 @@
+// Source - https://stackoverflow.com/a/55203597
+// Posted by Herman Andres Figueroa, modified by community. See post 'Timeline' for change history
+// Retrieved 2026-01-26, License - CC BY-SA 4.0
+import { app } from 'electron'
+import path from 'path';
+import fs from 'fs';
+
+export default class Store {
+    constructor(opts) {
+        // Renderer process has to get `app` module via `remote`, whereas the main process can get it directly
+        // app.getPath('userData') will return a string of the user's app data directory path.
+        const userDataPath = app.getPath('userData');
+        // We'll use the `configName` property to set the file name and path.join to bring it all together as a string
+        this.path = path.join(userDataPath, opts.configName + '.json');
+
+        this.data = parseDataFile(this.path, opts.defaults);
+    }
+    
+    path; data;
+
+    // This will just return the property on the `data` object
+    get(key) {
+        return this.data[key];
+    }
+
+    // ...and this will set it
+    set(key, val) {
+        this.data[key] = val;
+        // Wait, I thought using the node.js' synchronous APIs was bad form?
+        // We're not writing a server so there's not nearly the same IO demand on the process
+        // Also if we used an async API and our app was quit before the asynchronous write had a chance to complete,
+        // we might lose that data. Note that in a real app, we would try/catch this.
+        fs.writeFileSync(this.path, JSON.stringify(this.data));
+    }
+}
+
+function parseDataFile(filePath, defaults) {
+    // We'll try/catch it in case the file doesn't exist yet, which will be the case on the first application run.
+    // `fs.readFileSync` will return a JSON string which we then parse into a Javascript object
+    try {
+        // @ts-ignore
+        return JSON.parse(fs.readFileSync(filePath));
+    } catch(error) {
+        // if there was some kind of error, return the passed in defaults instead.
+        return defaults;
+    }
+}

src/renderer/setup.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Splash</title>
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
+    />
+  </head>
+
+  <body id="root">
+    <h2>First Launch</h2>
+    <img alt="logo" class="logo" src='./src/assets/electron.svg' height="256px" width="256px" />
+    <button type="button" id="button">Finish setup</button>
+
+    <style>
+        #root {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            margin: 0;
+            height: 350px;
+            width: 350px;
+        }
+        .logo {
+            -webkit-user-drag: none;
+            filter: drop-shadow(0 0 1.6em #6988e6aa);
+        }
+    </style>
+
+    <script>
+      document.getElementById("button").addEventListener("click", () => {
+        window.electron.ipcRenderer.send('finish-setup')
+      })
+    </script>
+  </body>
+</html>