add 'dev' label to application. also add 'un-magnify' icon when magnified

emain/emain.ts

@@ -525,6 +525,9 @@ function ensureBoundsAreVisible(bounds: electron.Rectangle): electron.Rectangle
     return bounds;
 }
 
+electron.ipcMain.on("getIsDev", (event) => {
+    event.returnValue = isDev;
+});
 electron.ipcMain.on("getPlatform", (event, url) => {
     event.returnValue = unamePlatform;
 });

emain/preload.ts

@@ -4,6 +4,7 @@
 const { contextBridge, ipcRenderer } = require("electron");
 
 contextBridge.exposeInMainWorld("api", {
+    getIsDev: () => ipcRenderer.sendSync("getIsDev"),
     getPlatform: () => ipcRenderer.sendSync("getPlatform"),
     getCursorPoint: () => ipcRenderer.sendSync("getCursorPoint"),
     openNewWindow: () => ipcRenderer.send("openNewWindow"),

frontend/app/block/block.tsx

@@ -21,7 +21,9 @@ import clsx from "clsx";
 import * as jotai from "jotai";
 import * as React from "react";
 
+import { getLayoutStateAtomForTab } from "@/layout/lib/layoutAtom";
 import { adaptFromReactOrNativeKeyEvent, checkKeyPressed } from "@/util/keyutil";
+import { isBlockMagnified } from "@/util/layoututil";
 import "./block.less";
 
 export interface LayoutComponentModel {
@@ -263,6 +265,9 @@ const BlockFrame_Default_Component = ({
     const preIconButton = util.useAtomValueSafe(viewModel.preIconButton);
     const endIconButtons = util.useAtomValueSafe(viewModel.endIconButtons);
     const customBg = util.useAtomValueSafe(viewModel.blockBg);
+    const tabId = globalStore.get(atoms.activeTabId);
+    const tabAtom = WOS.getWaveObjectAtom<Tab>(WOS.makeORef("tab", tabId));
+    const layoutTreeState = util.useAtomValueSafe(getLayoutStateAtomForTab(tabId, tabAtom));
     if (preview) {
         isFocused = true;
     }
@@ -302,6 +307,17 @@ const BlockFrame_Default_Component = ({
     endIconsElem.push(
         <IconButton key="settings" decl={settingsDecl} className="block-frame-endicon-button block-frame-settings" />
     );
+    if (isBlockMagnified(layoutTreeState, blockId)) {
+        const magnifyDecl: HeaderIconButton = {
+            elemtype: "iconbutton",
+            icon: "regular@magnifying-glass-minus",
+            title: "Minimize",
+            click: layoutModel?.onMagnifyToggle,
+        };
+        endIconsElem.push(
+            <IconButton key="magnify" decl={magnifyDecl} className="block-frame-endicon-button block-frame-magnify" />
+        );
+    }
     const closeDecl: HeaderIconButton = {
         elemtype: "iconbutton",
         icon: "xmark-large",

frontend/app/store/global.ts

@@ -413,6 +413,15 @@ function getObjectId(obj: any): number {
     return objectIdWeakMap.get(obj);
 }
 
+let cachedIsDev: boolean = null;
+
+function isDev() {
+    if (cachedIsDev == null) {
+        cachedIsDev = getApi().getIsDev();
+    }
+    return cachedIsDev;
+}
+
 export {
     PLATFORM,
     WOS,
@@ -428,6 +437,7 @@ export {
     globalWS,
     initGlobal,
     initWS,
+    isDev,
     sendWSCommand,
     setBlockFocus,
     setPlatform,

frontend/app/tab/tabbar.less

@@ -28,6 +28,18 @@
         height: 33px;
     }
 
+    .dev-label {
+        width: 26x;
+        height: 100%;
+        font-size: 26px;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 2px;
+        color: var(--accent-color);
+    }
+
     .add-tab-btn {
         width: 22px;
         height: 100%;

frontend/app/tab/tabbar.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { WindowDrag } from "@/element/windowdrag";
-import { atoms } from "@/store/global";
+import { atoms, isDev } from "@/store/global";
 import * as services from "@/store/services";
 import { deleteLayoutStateAtomForTab } from "frontend/layout/lib/layoutAtom";
 import { useAtomValue } from "jotai";
@@ -478,11 +478,19 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
     };
 
     const tabsWrapperWidth = tabIds.length * tabWidthRef.current;
-    console.log;
+    let devLabel: React.ReactNode = null;
+    if (isDev()) {
+        devLabel = (
+            <div className="dev-label">
+                <i className="fa fa-brands fa-dev fa-fw" />
+            </div>
+        );
+    }
 
     return (
         <div ref={tabbarWrapperRef} className="tab-bar-wrapper">
             <WindowDrag ref={draggerLeftRef} className="left" />
+            {devLabel}
             <div className="tab-bar" ref={tabBarRef} data-overlayscrollbars-initialize>
                 <div className="tabs-wrapper" ref={tabsWrapperRef} style={{ width: `${tabsWrapperWidth}px` }}>
                     {tabIds.map((tabId, index) => {

frontend/types/custom.d.ts

@@ -30,6 +30,7 @@ declare global {
     };
 
     type ElectronApi = {
+        getIsDev(): boolean;
         getCursorPoint: () => Electron.Point;
 
         getPlatform: () => NodeJS.Platform;

frontend/util/layoututil.ts

@@ -15,4 +15,16 @@ function findLeafIdFromBlockId(layoutTree: LayoutTreeState<TabLayoutData>, block
     return null;
 }
 
-export { findLeafIdFromBlockId };
+function isBlockMagnified(layoutTree: LayoutTreeState<TabLayoutData>, blockId: string): boolean {
+    if (layoutTree?.leafs == null || layoutTree.magnifiedNodeId == null) {
+        return false;
+    }
+    for (let leaf of layoutTree.leafs) {
+        if (leaf.data.blockId == blockId) {
+            return layoutTree.magnifiedNodeId == leaf.id;
+        }
+    }
+    return false;
+}
+
+export { findLeafIdFromBlockId, isBlockMagnified };