Remove left indent for tab-bar for non-Mac targets and when in full screen (#128)

This adds a new global atom to track whether a window is in full screen.
It also updates the behavior of the tab bar so that it will only add an
extra left indent on macOS windows that are not in full screen.
Otherwise, the indent will be much smaller.

frontend/app/app.tsx

@@ -4,7 +4,7 @@
 import { Workspace } from "@/app/workspace/workspace";
 import { getLayoutStateAtomForTab, globalLayoutTransformsMap } from "@/faraday/lib/layoutAtom";
 import { ContextMenuModel } from "@/store/contextmenu";
-import { WOS, atoms, globalStore, setBlockFocus } from "@/store/global";
+import { PLATFORM, WOS, atoms, globalStore, setBlockFocus } from "@/store/global";
 import * as services from "@/store/services";
 import * as keyutil from "@/util/keyutil";
 import * as layoututil from "@/util/layoututil";
@@ -15,6 +15,7 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { CenteredDiv } from "./element/quickelems";
 
+import clsx from "clsx";
 import "overlayscrollbars/overlayscrollbars.css";
 import "./app.less";
 import "./term.less";
@@ -96,7 +97,7 @@ function switchTab(offset: number) {
     services.ObjectService.SetActiveTab(newActiveTabId);
 }
 
-var transformRegexp = /translate3d\(\s*([0-9.]+)px\s*,\s*([0-9.]+)px,\s*0\)/;
+const transformRegexp = /translate3d\(\s*([0-9.]+)px\s*,\s*([0-9.]+)px,\s*0\)/;
 
 function parseFloatFromCSS(s: string | number): number {
     if (typeof s == "number") {
@@ -247,8 +248,10 @@ const AppInner = () => {
             document.removeEventListener("keydown", staticKeyDownHandler);
         };
     }, []);
+
+    const isFullScreen = jotai.useAtomValue(atoms.isFullScreen);
     return (
-        <div className="mainapp" onContextMenu={handleContextMenu}>
+        <div className={clsx("mainapp", PLATFORM, { fullscreen: isFullScreen })} onContextMenu={handleContextMenu}>
             <DndProvider backend={HTML5Backend}>
                 <Workspace />
             </DndProvider>

frontend/app/store/global.ts

@@ -49,6 +49,16 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) {
         return uiContext;
     }) as jotai.Atom<UIContext>;
 
+    const isFullScreenAtom = jotai.atom(false) as jotai.PrimitiveAtom<boolean>;
+    try {
+        getApi().onFullScreenChange((isFullScreen) => {
+            console.log("fullscreen change", isFullScreen);
+            globalStore.set(isFullScreenAtom, isFullScreen);
+        });
+    } catch (_) {
+        // do nothing
+    }
+
     const clientAtom: jotai.Atom<Client> = jotai.atom((get) => {
         const clientId = get(clientIdAtom);
         if (clientId == null) {
@@ -99,6 +109,7 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) {
         tabAtom: tabAtom,
         activeTabId: activeTabIdAtom,
         userInput: userInputAtom,
+        isFullScreen: isFullScreenAtom,
     };
 }
 

frontend/app/tab/tab.less

@@ -44,7 +44,7 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-50%, -50%);
+        transform: translate3d(-50%, -50%, 0);
         user-select: none;
         z-index: 3;
         font-size: 11px;
@@ -63,7 +63,7 @@
         position: absolute;
         top: 50%;
         right: 0px;
-        transform: translateY(-50%);
+        transform: translate3d(0, -50%, 0);
         width: 20px;
         height: 20px;
         display: flex;

frontend/app/tab/tabbar.less

@@ -1,15 +1,31 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+.tab-bar-wrapper {
+    --default-indent: 10px;
+    --darwin-not-fullscreen-indent: 74px;
+}
+
+.darwin:not(.fullscreen) .tab-bar-wrapper {
+    .tab-bar {
+        margin-left: var(--darwin-not-fullscreen-indent);
+    }
+
+    .window-drag.left {
+        width: var(--darwin-not-fullscreen-indent);
+    }
+}
+
 .tab-bar-wrapper {
     position: relative;
     // border-bottom: 1px solid var(--border-color);
     user-select: none;
     display: flex;
+    flex-direction: row;
 
     .tab-bar {
         position: relative; // Needed for absolute positioning of child tabs
-        margin-left: 100px;
+        margin-left: var(--default-indent);
         height: 33px;
         // 36 is the width of add tab button
         // 100 is offset from the left, for macOS window controls and dragging
@@ -19,10 +35,9 @@
     }
 
     .add-tab-btn {
-        width: 36px;
+        width: 22px;
         height: 100%;
         cursor: pointer;
-        position: absolute;
         font-size: 14px;
         text-align: center;
         user-select: none;
@@ -36,6 +51,8 @@
         }
 
         i {
+            overflow: hidden;
+            margin-top: 5px;
             font-size: 11px;
         }
     }
@@ -43,10 +60,6 @@
     .window-drag {
         position: absolute;
         height: 100%;
-
-        &.left {
-            width: 100px;
-        }
     }
 
     // Customize scrollbar styles

frontend/app/tab/tabbar.tsx

@@ -69,6 +69,8 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
     const windowData = useAtomValue(atoms.waveWindow);
     const { activetabid } = windowData;
 
+    const isFullScreen = useAtomValue(atoms.isFullScreen);
+
     let prevDelta: number;
     let prevDragDirection: string;
 
@@ -145,7 +147,7 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
         tabRefs.current.forEach((ref, index) => {
             if (ref.current) {
                 ref.current.style.width = `${newTabWidth}px`;
-                ref.current.style.transform = `translateX(${index * newTabWidth}px)`;
+                ref.current.style.transform = `translate3d(${index * newTabWidth}px,0,0)`;
             }
         });
 
@@ -173,9 +175,9 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
             const lastTabRect = lastTabRef.current.getBoundingClientRect();
             addButton.style.position = "absolute";
             if (newScrollable) {
-                addButton.style.transform = `translateX(${tabBarRect.left + tabBarWidth + 1}px)`;
+                addButton.style.transform = `translate3d(${tabBarRect.left + tabBarWidth + 1}px,0,0)`;
             } else {
-                addButton.style.transform = `translateX(${lastTabRect.right + 1}px)`;
+                addButton.style.transform = `translate3d(${lastTabRect.right + 1}px,0,0)`;
             }
         }
         // Update dragger right position if needed
@@ -183,12 +185,12 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
         if (draggerRight && addButton) {
             const addButtonRect = addButton.getBoundingClientRect();
             const targetPos = addButtonRect.left + addButtonRect.width;
-            draggerRight.style.transform = `translateX(${targetPos}px)`;
+            draggerRight.style.transform = `translate3d(${targetPos}px,0,0)`;
             draggerRight.style.width = `${document.documentElement.offsetWidth - targetPos}px`;
         }
 
         debouncedUpdateTabPositions();
-    }, [tabIds]);
+    }, [tabIds, isFullScreen]);
 
     useEffect(() => {
         window.addEventListener("resize", () => handleResizeTabs());
@@ -324,7 +326,7 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
             currentX = Math.min(Math.max(currentX, minLeft), maxRight);
         }
 
-        ref.current!.style.transform = `translateX(${currentX}px)`;
+        ref.current!.style.transform = `translate3d(${currentX}px,0,0)`;
         ref.current!.style.zIndex = "100";
 
         const tabIndex = draggingTabDataRef.current.tabIndex;
@@ -350,7 +352,7 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
             tabIds.forEach((localTabId, index) => {
                 const ref = tabRefs.current.find((ref) => ref.current.dataset.tabId === localTabId);
                 if (ref.current && localTabId !== tabId) {
-                    ref.current.style.transform = `translateX(${index * tabWidth}px)`;
+                    ref.current.style.transform = `translate3d(${index * tabWidth}px,0,0)`;
                     ref.current.classList.add("animate");
                 }
             });
@@ -369,7 +371,7 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
         const ref = tabRefs.current.find((ref) => ref.current.dataset.tabId === draggingTab);
         if (ref.current) {
             ref.current.classList.add("animate");
-            ref.current.style.transform = `translateX(${finalLeftPosition}px)`;
+            ref.current.style.transform = `translate3d(${finalLeftPosition}px,0,0)`;
         }
 
         if (dragged) {

frontend/types/custom.d.ts

@@ -16,6 +16,7 @@ declare global {
         tabAtom: jotai.Atom<Tab>; // driven from WOS
         activeTabId: jotai.Atom<string>; // derrived from windowDataAtom
         userInput: jotai.PrimitiveAtom<Array<UserInputRequest>>;
+        isFullScreen: jotai.PrimitiveAtom<boolean>;
     };
 
     type TabLayoutData = {
@@ -41,6 +42,7 @@ declare global {
         onIframeNavigate: (callback: (url: string) => void) => void;
         downloadFile: (path: string) => void;
         openExternal: (url: string) => void;
+        onFullScreenChange: (callback: (isFullScreen: boolean) => void) => void;
     };
 
     type ElectronContextMenuItem = {

frontend/wave.ts

@@ -28,6 +28,7 @@ loadFonts();
 (window as any).WOS = WOS;
 (window as any).globalStore = globalStore;
 (window as any).WshServer = WshServer;
+(window as any).isFullScreen = false;
 
 document.title = `The Next Wave (${windowId.substring(0, 8)})`;