Adapt the web version to Electron

frontend/src/auth.ts

@@ -55,6 +55,7 @@ export function showLogin(): void {
     document.getElementById('register-form')!.style.display = 'none';
     document.getElementById('chat-interface')!.style.display = 'none';
     clearAlerts();
+    document.getElementById("electron-title-bar")!.classList.add("color-surface");
 }
 
 /**
@@ -68,6 +69,7 @@ export function showRegister(): void {
     document.getElementById('register-form')!.style.display = 'flex';
     document.getElementById('chat-interface')!.style.display = 'none';
     clearAlerts();
+    document.getElementById("electron-title-bar")!.classList.add("color-surface");
 }
 
 /**
@@ -81,6 +83,7 @@ export function showChat(): void {
     document.getElementById('register-form')!.style.display = 'none';
     document.getElementById('chat-interface')!.style.display = 'block';
     loadMessages();
+    document.getElementById("electron-title-bar")!.classList.remove("color-surface");
 }
 
 /**

frontend/src/css/_auth.scss

@@ -5,7 +5,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    min-height: 100vh;
+    height: 100%;
     padding: 2rem;
     background-color: $color-dark-surface;
 

frontend/src/css/_chat.scss

@@ -2,6 +2,8 @@
 @use "common/material" as *;
 
 #chat-interface {
+    height: 100%;
+
     .header {
         display: flex;
         background-color: $color-dark-surface-container;

frontend/src/css/_electron.scss

@@ -0,0 +1,43 @@
+@use "common/material" as *;
+
+#electron-title-bar {
+    display: none;
+}
+
+html.electron {
+    #electron-title-bar {
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+        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;
+
+        &.color-surface {
+            background-color: $color-dark-surface;
+        }
+    }
+
+    #window-title {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+    }
+
+    &.platform-darwin .macos-padding {
+        width: 70px;
+    }
+
+    // .window-controls {
+    //     -webkit-app-region: no-drag;
+
+    //     .hidden {
+    //         display: none;
+    //     }
+    // }
+}

frontend/src/css/_panelchat.scss

@@ -7,7 +7,7 @@
     display: flex;
     flex-direction: row;
     width: 100%;
-    height: 100vh;
+    height: 100%;
 }
 
 #profile {

frontend/src/css/style.scss

@@ -7,6 +7,7 @@
 @use "common/components";
 @use "common/colors" as *;
 @use "common/material" as *;
+@use "electron";
 
 @use "lib/fonts/montserrat";
 @use "lib/fonts/material-symbols";
@@ -24,6 +25,13 @@ body {
     height: 100vh;
     position: relative;
     margin: 0;
+    display: flex;
+    flex-direction: column;
+
+    #main-wrapper {
+        flex: 1;
+        position: relative;
+    }
 }
 
 mdui-dialog {

frontend/src/electron.ts

@@ -0,0 +1,10 @@
+import "../electron.d.ts";
+import { PRODUCT_NAME } from "./config";
+
+if (window.electronInterface !== undefined) {
+    console.log("Running in Electron");
+    document.documentElement.classList.add("electron", `platform-${window.electronInterface.platform}`);
+    document.getElementById("window-title")!.textContent = PRODUCT_NAME;
+} else {
+    console.log("Running in normal browser");
+}

frontend/src/main.ts

@@ -15,4 +15,5 @@ import "./leftpanel";
 import "./init";
 import "./profile";
 import "./message-context-menu";
-import "./user-profile-dialog";
+import "./user-profile-dialog";
+import "./electron";