Improve Electron experience and build system

frontend/src/electron/electron.ts

@@ -5,13 +5,11 @@
  * @version 1.0.0
  */
 
-import { PRODUCT_NAME } from "../core/config.ts";
-import { id } from "../utils/utils.ts";
+export const isElectron = import.meta.env.VITE_ELECTRON && window.electronInterface != undefined;
 
-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;
     }
 
-    &.platform-darwin .macos-padding {
-        width: 70px;
+    #main-wrapper {
+        flex: 1;
+        min-height: 0;
     }
 
-    // .window-controls {
-    //     -webkit-app-region: no-drag;
-
-    //     .hidden {
-    //         display: none;
-    //     }
-    // }
+    &.platform-darwin .macos-padding {
+        width: 80px;
+    }
 }

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 (
-            <div id="electron-title-bar">
-                {window.electronInterface.platform == "darwin" ? <div className="macos-padding"></div> : undefined}
-                <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>
-        )
-    }
+    return isElectron && (
+        <div id="electron-title-bar">
+            {window.electronInterface.platform == "darwin" && <div className="macos-padding"></div>}
+            <div id="window-title">{PRODUCT_NAME}</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)
                 });