Improve Electron experience and build system

.github/workflows/build.yml

@@ -17,72 +17,39 @@ permissions:
   contents: read
 
 jobs:
-  build:
+  build-linux:
-    name: Build (${{ matrix.os }})
+    name: Build Linux
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        os: [ubuntu-latest, macos-latest, windows-latest]
 
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Force npm to use Bash
-        if: runner.os == 'Windows'
-        run: npm config set script-shell "C:\Program Files\Git\bin\bash.exe"
-
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: '24'
 
-      - name: Cache npm (Linux/macOS)
+      - name: Cache dependencies
-        if: runner.os != 'Windows'
         uses: actions/cache@v4
         with:
-          path: ~/.npm
+          path: node_modules
-          key: npm-${{ runner.os }}-node-24-${{ hashFiles('package.json') }}
+          key: npm-ubuntu-latest-node-24-${{ hashFiles('package.json') }}
           restore-keys: |
-            npm-${{ runner.os }}-node-24-
+            npm-ubuntu-latest-node-24-
 
-      - name: Cache npm (Windows)
+      - name: Install dependencies
-        if: runner.os == 'Windows'
-        uses: actions/cache@v4
-        with:
-          path: ~\AppData\Local\npm-cache
-          key: npm-${{ runner.os }}-node-24-${{ hashFiles('package.json') }}
-          restore-keys: |
-            npm-${{ runner.os }}-node-24-
-
-      - name: Install root deps (no scripts)
         run: npm install --ignore-scripts --no-audit --no-fund
 
-      - name: Install Electron Forge deps
+      - name: Cache Electron downloads
-        run: npm run frontend:electron:dependencies
-
-      - name: Cache Electron downloads (Linux/macOS)
-        if: runner.os != 'Windows'
         uses: actions/cache@v4
         with:
           path: |
             ~/.cache/electron
             ~/.cache/electron-builder
-          key: electron-${{ runner.os }}-${{ hashFiles('package.json', 'frontend/electron/forge/package.json') }}
+          key: electron-ubuntu-latest-${{ hashFiles('package.json', 'package.json') }}
           restore-keys: |
-            electron-${{ runner.os }}-
+            electron-ubuntu-latest-
-
-      - name: Cache Electron downloads (Windows)
-        if: runner.os == 'Windows'
-        uses: actions/cache@v4
-        with:
-          path: |
-            ~\AppData\Local\electron\Cache
-            ~\AppData\Local\electron-builder\Cache
-          key: electron-${{ runner.os }}-${{ hashFiles('package.json', 'frontend/electron/forge/package.json') }}
-          restore-keys: |
-            electron-${{ runner.os }}-
 
       - name: Build Electron app
         shell: bash
@@ -91,8 +58,102 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-artifact@v4
         with:
-          name: fromchat-${{ runner.os }}
+          name: FromChat-linux
           path: |
-            frontend/electron/forge/out/**
+            frontend/build/electron/forge/make/*/**
           if-no-files-found: error
 
+  build-macos:
+    name: Build macOS
+    runs-on: macos-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+
+      - name: Cache dependencies
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: npm-macos-latest-node-24-${{ hashFiles('package.json') }}
+          restore-keys: |
+            npm-macos-latest-node-24-
+
+      - name: Install dependencies
+        run: npm install --ignore-scripts --no-audit --no-fund
+
+      # - name: Cache Electron downloads
+      #   uses: actions/cache@v4
+      #   with:
+      #     path: |
+      #       ~/.cache/electron
+      #       ~/.cache/electron-builder
+      #     key: electron-macos-latest-${{ hashFiles('package.json') }}
+      #     restore-keys: |
+      #       electron-macos-latest-
+
+      - name: Build Electron app
+        shell: bash
+        run: npm run build:electron
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: FromChat-macOS
+          path: |
+            frontend/build/electron/forge/make/zip/darwin/*/**.zip
+          if-no-files-found: error
+
+  build-windows:
+    name: Build Windows
+    runs-on: windows-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Force npm to use Bash
+        run: npm config set script-shell "C:\Program Files\Git\bin\bash.exe"
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+
+      - name: Cache dependencies
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: npm-windows-latest-node-24-${{ hashFiles('package.json') }}
+          restore-keys: |
+            npm-windows-latest-node-24-
+
+      - name: Install dependencies
+        run: npm install --ignore-scripts --no-audit --no-fund
+
+      - name: Cache Electron downloads
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~\AppData\Local\electron\Cache
+            ~\AppData\Local\electron-builder\Cache
+          key: electron-windows-latest-${{ hashFiles('package.json') }}
+          restore-keys: |
+            electron-windows-latest-
+
+      - name: Build Electron app
+        shell: bash
+        run: npm run build:electron
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: FromChat-windows
+          path: |
+            frontend/build/electron/forge/make/zip/win32/x64
+          if-no-files-found: error

.github/workflows/deploy.yml

@@ -13,7 +13,6 @@ on:
       - ".nvmrc"
       - ".github/workflows/deploy.yml"
       - "!frontend/electron/**"
-      - "!frontend/src/electron/**"
       - "!**.d.ts"
   workflow_dispatch:
 

.vscode/settings.json

@@ -2,5 +2,8 @@
     "files.exclude": {
         "**/__pycache__": true,
         "**/package-lock.json": true
-    }
+    },
+    "github-actions.workflows.pinned.workflows": [],
+    "github-actions.workflows.pinned.workflows.ignore": true,
+    "github-actions.workflows.pinned.workflows.ignoreContextAccess": true
 }

deployment/frontend/Dockerfile

@@ -36,7 +36,7 @@ USER app
 
 # 3.1. Frontend static files
 WORKDIR /app
-COPY --from=frontend --chown=app /app/frontend/dist .
+COPY --from=frontend --chown=app /app/frontend/build/normal/dist .
 
 # 3.2. Static file server
 WORKDIR /server

frontend/electron/forge/package.json

@@ -1,33 +0,0 @@
-{
-    "name": "FromChat",
-    "productName": "FromChat",
-    "version": "1.0.0",
-    "description": "A 100% Open Source Messenger",
-    "main": "dist-electron/main.js",
-    "scripts": {
-        "package": "electron-forge package",
-        "make": "electron-forge make",
-        "publish": "electron-forge publish"
-    },
-    "keywords": [],
-    "author": {
-        "name": "denis0001-dev",
-        "email": "denis0001.dev@ya.ru"
-    },
-    "license": "GPL-2.0",
-    "devDependencies": {
-        "@electron-forge/cli": "^7.8.3",
-        "@electron-forge/maker-deb": "^7.8.3",
-        "@electron-forge/maker-rpm": "^7.8.3",
-        "@electron-forge/maker-squirrel": "^7.8.3",
-        "@electron-forge/maker-zip": "^7.8.3",
-        "@electron-forge/plugin-auto-unpack-natives": "^7.8.3",
-        "@electron-forge/plugin-fuses": "^7.8.3",
-        "@electron/fuses": "^1.8.0",
-        "electron": "37.3.1",
-        "vite": "^5.4.19"
-    },
-    "dependencies": {
-        "electron-squirrel-startup": "^1.0.1"
-    }
-}

frontend/electron/main.ts

@@ -4,7 +4,7 @@ import path from "node:path";
 app.whenReady().then(() => {
     const win = new BrowserWindow({
         title: 'Main window',
-        minWidth: 650,
+        minWidth: 800,
         minHeight: 420,
         webPreferences: {
             preload: path.join(import.meta.dirname, "preload.mjs")
@@ -16,11 +16,11 @@ app.whenReady().then(() => {
             y: 16 - 4
         },
         titleBarOverlay: process.platform !== "darwin"
-    })
+    });
 
     if (process.env.VITE_DEV_SERVER_URL) {
-        win.loadURL(process.env.VITE_DEV_SERVER_URL)
+        win.loadURL(process.env.VITE_DEV_SERVER_URL);
     } else {
-        win.loadFile('dist/index.html');
+        win.loadFile('frontend/build/electron/dist/index.html');
     }
 });

frontend/forge.config.ts

@@ -1,29 +1,28 @@
 import { FusesPlugin } from '@electron-forge/plugin-fuses';
 import { FuseV1Options, FuseVersion } from '@electron/fuses';
-import type { ForgeConfig } from "@electron-forge/shared-types";
+import type { ForgeConfig } from '@electron-forge/shared-types';
 
-const config: ForgeConfig = {
+export default {
     packagerConfig: {
-        asar: true
+        asar: true,
     },
+    outDir: "frontend/build/electron/forge",
     rebuildConfig: {},
     makers: [
-        {
-            name: '@electron-forge/maker-squirrel',
-            config: {},
-        },
         {
             name: '@electron-forge/maker-zip',
             config: {},
-            platforms: ['darwin'],
+            platforms: ['win32', 'darwin'],
         },
         {
             name: '@electron-forge/maker-deb',
             config: {},
+            platforms: ['linux'],
         },
         {
             name: '@electron-forge/maker-rpm',
             config: {},
+            platforms: ['linux'],
         },
     ],
     plugins: [
@@ -43,6 +42,4 @@ const config: ForgeConfig = {
             [FuseV1Options.OnlyLoadAppFromAsar]: true,
         }),
     ],
-};
+} satisfies ForgeConfig;
-
-export default config;

frontend/src/electron/electron.ts

@@ -5,13 +5,11 @@
  * @version 1.0.0
  */
 
-import { PRODUCT_NAME } from "../core/config.ts";
+export const isElectron = import.meta.env.VITE_ELECTRON && window.electronInterface != undefined;
-import { id } from "../utils/utils.ts";
 
-if (window.electronInterface !== undefined) {
+if (isElectron) {
     console.log("Running in Electron");
     document.documentElement.classList.add("electron", `platform-${window.electronInterface.platform}`);
-    id("window-title").textContent = PRODUCT_NAME;
 } else {
     console.log("Running in normal browser");
 }

frontend/src/main.tsx

@@ -10,6 +10,7 @@ import "mdui/mdui.css";
 
 import "./utils/material";
 import "./core/init";
+import "./electron/electron";
 import { createRoot } from 'react-dom/client';
 import App from './ui/App';
 import { StrictMode } from 'react';

frontend/src/resources/css/_electron.scss

@@ -9,13 +9,14 @@ html.electron {
         display: flex;
         flex-direction: row;
         gap: 8px;
-        height: 40px;
+        min-height: 40px;
         background-color: $color-dark-surface-container;
         width: 100%;
         -webkit-app-region: drag;
         user-select: none;
         z-index: 10;
         transition: background-color 0.5s ease;
+        flex-shrink: 0;
 
         &.color-surface {
             background-color: $color-dark-surface;
@@ -29,15 +30,12 @@ html.electron {
         font-weight: 500;
     }
 
+    #main-wrapper {
+        flex: 1;
+        min-height: 0;
+    }
+
     &.platform-darwin .macos-padding {
-        width: 70px;
+        width: 80px;
     }
-
-    // .window-controls {
-    //     -webkit-app-region: no-drag;
-
-    //     .hidden {
-    //         display: none;
-    //     }
-    // }
 }

frontend/src/resources/css/style.scss

@@ -24,17 +24,20 @@ body {
     background-color: $color-dark-surface;
     color: $color-dark-on-surface;
     line-height: 1.6;
+
+    #main-wrapper {
+        flex: 1;
+        position: relative;
+        min-height: 0;
+    }
+}
+
+body, #root {
     height: 100vh;
     position: relative;
     margin: 0;
     display: flex;
     flex-direction: column;
-
-    #main-wrapper {
-        flex: 1;
-        position: relative;
-        height: 100vh;
-    }
 }
 
 mdui-dialog {

frontend/src/ui/App.tsx

@@ -1,4 +1,5 @@
 import { MINIMUM_WIDTH } from "../core/config";
+import { isElectron } from "../electron/electron";
 import { ElectronTitleBar } from "./components/Electron";
 import useWindowSize from "./hooks/useWindowSize";
 import ChatScreen from "./screen/ChatScreen";
@@ -17,7 +18,7 @@ export default function App() {
         restoreUserFromStorage();
     }, [restoreUserFromStorage]);
 
-    if (width < MINIMUM_WIDTH) {
+    if (!isElectron && width < MINIMUM_WIDTH) {
         return <DownloadAppScreen />
     }
 

frontend/src/ui/components/Electron.tsx

@@ -1,18 +1,11 @@
 import { PRODUCT_NAME } from "../../core/config";
+import { isElectron } from "../../electron/electron";
 
 export function ElectronTitleBar() {
-    if (window.electronInterface !== undefined) {
+    return isElectron && (
-        return (
         <div id="electron-title-bar">
-                {window.electronInterface.platform == "darwin" ? <div className="macos-padding"></div> : undefined}
+            {window.electronInterface.platform == "darwin" && <div className="macos-padding"></div>}
             <div id="window-title">{PRODUCT_NAME}</div>
-                {/* <div className="window-controls">
-                    <mdui-button-icon icon="remove" id="window-minimize"></mdui-button-icon>
-                    <mdui-button-icon icon="stack--outlined" id="window-restore" className="hidden"></mdui-button-icon>
-                    <mdui-button-icon icon="ad--outlined" id="window-maximize"></mdui-button-icon>
-                    <mdui-button-icon icon="close" id="window-close"></mdui-button-icon>
-                </div> */}
         </div>
     )
 }
-}

frontend/src/ui/components/chat/MessagePanelRenderer.tsx

@@ -153,20 +153,20 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
                     <ChatMessages 
                         messages={panelState.messages} 
                         isDm={panel.isDm()} 
-                        onReplySelect={(m) => {
+                        onReplySelect={(message) => {
                             if (editMessage || editVisible) {
-                                setPendingAction({ type: "reply", message: m });
+                                setPendingAction({ type: "reply", message: message });
                                 setEditVisible(false); // onCloseEdit will apply pending
                             } else {
-                                setReplyTo(m);
+                                setReplyTo(message);
                             }
                         }}
-                        onEditSelect={(m) => {
+                        onEditSelect={(message) => {
                             if (replyTo || replyToVisible) {
-                                setPendingAction({ type: "edit", message: m });
+                                setPendingAction({ type: "edit", message: message });
                                 setReplyToVisible(false); // onCloseReply will apply pending
                             } else {
-                                setEditMessage(m);
+                                setEditMessage(message);
                             }
                         }}
                     >

frontend/src/ui/state.ts

@@ -6,6 +6,7 @@ import { PublicChatPanel } from "./panels/PublicChatPanel";
 import { DMPanel, type DMPanelData } from "./panels/DMPanel";
 import { getAuthHeaders } from "../auth/api";
 import { restoreKeys } from "../auth/crypto";
+import { API_BASE_URL } from "../core/config";
 
 type Page = "login" | "register" | "chat"
 export type ChatTabs = "chats" | "channels" | "contacts" | "dms"
@@ -199,7 +200,7 @@ export const useAppState = create<AppState>((set, get) => ({
             const token = localStorage.getItem('authToken');
             
             if (token) {
-                const response = await fetch("/api/user/profile", {
+                const response = await fetch(`${API_BASE_URL}/user/profile`, {
                     headers: getAuthHeaders(token)
                 });
 

frontend/vite.config.ts

@@ -25,9 +25,19 @@ if (process.env.VITE_ELECTRON) {
         electron({
             main: {
                 entry: "electron/main.ts",
+                vite: {
+                    build: {
+                        outDir: "build/electron/core"
+                    }
+                }
             },
             preload: {
-                input: "frontend/electron/preload.ts"
+                input: "frontend/electron/preload.ts",
+                vite: {
+                    build: {
+                        outDir: "build/electron/core"
+                    }
+                }
             },
             renderer: {},
         })
@@ -68,6 +78,7 @@ export default defineConfig({
             }
         },
         cssMinify: true,
-        assetsInlineLimit: 0
+        assetsInlineLimit: 0,
+        outDir: process.env.VITE_ELECTRON ? "build/electron/dist" : "build/normal/dist"
     }
 });

package.json

@@ -1,9 +1,12 @@
 {
-    "name": "pixelchat",
+    "name": "FromChat",
     "private": true,
     "version": "0.0.0",
     "type": "module",
-    "main": "frontend/dist-electron/main.js",
+    "main": "frontend/build/electron/core/main.js",
+    "description": "A 100% Open Source Messenger",
+    "license": "GPL-3.0",
+    "authors": "denis0001-dev",
     "scripts": {
         "backend:run": "cd backend && dotenv -e ../deployment/.env -- ../.venv/bin/fastapi dev --port 8300 main.py",
         "backend:dependencies": "python3 -m venv .venv && ./.venv/bin/pip3 install -r backend/requirements.txt",
@@ -13,8 +16,7 @@
         "frontend:typecheck": "tsc --project frontend",
         "frontend:build": "npm run frontend:typecheck && vite build frontend",
         "frontend:electron:dev": "VITE_ELECTRON=true npm run frontend:dev",
-        "frontend:electron:dependencies": "cd frontend/electron/forge && npm install",
+        "frontend:electron:build": "VITE_ELECTRON=true npm run frontend:build && rm -rf out && electron-forge make --force",
-        "frontend:electron:build": "VITE_ELECTRON=true npm run frontend:build && cp -r frontend/dist frontend/dist-electron frontend/electron/forge && cd frontend/electron/forge && npm run make",
         "frontend:preview": "vite preview frontend",
         "frontend:dependencies": "npm install --ignore-scripts",
         "frontend:clean": "rm -rf frontend/dist",
@@ -25,10 +27,22 @@
         "preview": "cd deployment && docker compose up --build --watch",
         "preview:clean": "cd deployment && docker compose down -v",
         "clean": "npm run backend:clean && npm run frontend:clean && npm run preview:clean",
-        "install": "npm run backend:dependencies && npm run frontend:electron:dependencies && cp deployment/.env.example deployment/.env",
+        "install": "npm run backend:dependencies && cp deployment/.env.example deployment/.env",
         "prepare": "husky"
     },
+    "files": [
+        "frontend/build/electron"
+    ],
     "devDependencies": {
+        "@electron-forge/cli": "^7.9.0",
+        "@electron-forge/maker-deb": "^7.9.0",
+        "@electron-forge/maker-dmg": "^7.9.0",
+        "@electron-forge/maker-rpm": "^7.9.0",
+        "@electron-forge/maker-squirrel": "^7.9.0",
+        "@electron-forge/maker-zip": "^7.9.0",
+        "@electron-forge/plugin-auto-unpack-natives": "^7.9.0",
+        "@electron-forge/plugin-fuses": "^7.9.0",
+        "@electron/fuses": "^1.8.0",
         "@types/react": "^19.1.12",
         "@types/react-dom": "^19.1.9",
         "@vitejs/plugin-react": "^5.0.2",
@@ -47,11 +61,15 @@
         "vite-plugin-html": "^3.2.2"
     },
     "dependencies": {
+        "electron-squirrel-startup": "^1.0.1",
         "mdui": "^2.1.4",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "tweetnacl": "^1.0.3",
         "use-immer": "^0.11.0",
         "zustand": "^5.0.8"
+    },
+    "config": {
+        "forge": "frontend/forge.config.ts"
     }
 }