fixes for zoom (tab bar)

Author: sawka

emain/menu.ts

@@ -215,7 +215,11 @@ async function getAppMenu(
             label: "Reset Zoom",
             accelerator: "CommandOrControl+0",
             click: (_, window) => {
-                getWindowWebContents(window ?? ww)?.setZoomFactor(1);
+                const wc = getWindowWebContents(window ?? ww);
+                if (wc) {
+                    wc.setZoomFactor(1);
+                    wc.send("zoom-factor-change", 1);
+                }
             },
         },
         {
@@ -226,7 +230,9 @@ async function getAppMenu(
                 if (wc == null) {
                     return;
                 }
-                wc.setZoomFactor(Math.min(5, wc.getZoomFactor() + 0.2));
+                const newZoom = Math.min(5, wc.getZoomFactor() + 0.2);
+                wc.setZoomFactor(newZoom);
+                wc.send("zoom-factor-change", newZoom);
             },
         },
         {
@@ -237,7 +243,9 @@ async function getAppMenu(
                 if (wc == null) {
                     return;
                 }
-                wc.setZoomFactor(Math.min(5, wc.getZoomFactor() + 0.2));
+                const newZoom = Math.min(5, wc.getZoomFactor() + 0.2);
+                wc.setZoomFactor(newZoom);
+                wc.send("zoom-factor-change", newZoom);
             },
             visible: false,
             acceleratorWorksWhenHidden: true,
@@ -250,7 +258,9 @@ async function getAppMenu(
                 if (wc == null) {
                     return;
                 }
-                wc.setZoomFactor(Math.max(0.2, wc.getZoomFactor() - 0.2));
+                const newZoom = Math.max(0.2, wc.getZoomFactor() - 0.2);
+                wc.setZoomFactor(newZoom);
+                wc.send("zoom-factor-change", newZoom);
             },
         },
         {
@@ -261,7 +271,9 @@ async function getAppMenu(
                 if (wc == null) {
                     return;
                 }
-                wc.setZoomFactor(Math.max(0.2, wc.getZoomFactor() - 0.2));
+                const newZoom = Math.max(0.2, wc.getZoomFactor() - 0.2);
+                wc.setZoomFactor(newZoom);
+                wc.send("zoom-factor-change", newZoom);
             },
             visible: false,
             acceleratorWorksWhenHidden: true,

frontend/app/tab/tabbar.scss

@@ -3,7 +3,7 @@
 
 .tab-bar-wrapper {
     --default-indent: 10px;
-    --darwin-not-fullscreen-indent: 74px;
+    --darwin-not-fullscreen-indent: calc(74px * var(--zoomfactor-inv));
 }
 
 .darwin:not(.fullscreen) .tab-bar-wrapper {
@@ -29,8 +29,10 @@
     user-select: none;
     display: flex;
     flex-direction: row;
+    align-items: end;
     width: 100vw;
     -webkit-app-region: drag;
+    height: max(33px, calc(33px * var(--zoomfactor-inv)));
 
     button {
         -webkit-app-region: no-drag;
@@ -97,6 +99,10 @@
 
     .add-tab {
         padding: 0 10px;
+        height: 27px;
+    }
+
+    .workspace-switcher {
     }
 
     .window-drag {

frontend/app/workspace/workspace-layout-model.ts

@@ -17,6 +17,7 @@ import { ImperativePanelGroupHandle, ImperativePanelHandle } from "react-resizab
 const dlog = debug("wave:workspace");
 
 const AIPANEL_DEFAULTWIDTH = 300;
+const AIPANEL_DEFAULTWIDTHRATIO = 0.33;
 const AIPANEL_MINWIDTH = 250;
 const AIPANEL_MAXWIDTHRATIO = 0.5;
 
@@ -110,7 +111,8 @@ class WorkspaceLayoutModel {
             return;
         }
         const width = this.getAIPanelWidth();
-        this.aiPanelWrapperRef.style.width = `${width}px`;
+        const clampedWidth = this.getClampedAIPanelWidth(width, window.innerWidth);
+        this.aiPanelWrapperRef.style.width = `${clampedWidth}px`;
     }
 
     enableTransitions(duration: number): void {
@@ -149,6 +151,7 @@ class WorkspaceLayoutModel {
         const layout = [aiPanelPercentage, mainContentPercentage];
         this.panelGroupRef.setLayout(layout);
         this.inResize = false;
+        this.updateWrapperWidth();
     }
 
     handlePanelLayout(sizes: number[]): void {
@@ -248,7 +251,7 @@ class WorkspaceLayoutModel {
     getAIPanelWidth(): number {
         this.initializeFromTabMeta();
         if (this.aiPanelWidth == null) {
-            this.aiPanelWidth = Math.max(AIPANEL_DEFAULTWIDTH, window.innerWidth / 3);
+            this.aiPanelWidth = Math.max(AIPANEL_DEFAULTWIDTH, window.innerWidth * AIPANEL_DEFAULTWIDTHRATIO);
         }
         return this.aiPanelWidth;
     }

frontend/tailwindsetup.css

@@ -68,6 +68,11 @@
     --container-tiny: 120px;
 }
 
+:root {
+    --zoomfactor: 1;
+    --zoomfactor-inv: 1;
+}
+
 /* Chart tooltip styling for sysinfo plots */
 svg [aria-label="tip"] g path {
     color: var(--border-color);

frontend/wave.ts

@@ -50,6 +50,12 @@ let savedInitOpts: WaveInitOpts = null;
 (window as any).removeNotificationById = removeNotificationById;
 (window as any).modalsModel = modalsModel;
 
+function updateZoomFactor(zoomFactor: number) {
+    console.log("update zoomfactor", zoomFactor);
+    document.documentElement.style.setProperty("--zoomfactor", String(zoomFactor));
+    document.documentElement.style.setProperty("--zoomfactor-inv", String(1 / zoomFactor));
+}
+
 async function initBare() {
     getApi().sendLog("Init Bare");
     document.body.style.visibility = "hidden";
@@ -58,6 +64,10 @@ async function initBare() {
     getApi().onWaveInit(initWaveWrap);
     setKeyUtilPlatform(platform);
     loadFonts();
+    updateZoomFactor(getApi().getZoomFactor());
+    getApi().onZoomFactorChange((zoomFactor) => {
+        updateZoomFactor(zoomFactor);
+    });
     document.fonts.ready.then(() => {
         console.log("Init Bare Done");
         getApi().setWindowInitStatus("ready");