merge main

electron.vite.config.ts

@@ -76,12 +76,5 @@ export default defineConfig({
                 targets: [{ src: "node_modules/monaco-editor/min/vs/*", dest: "monaco" }],
             }),
         ],
-        css: {
-            preprocessorOptions: {
-                scss: {
-                    api: "modern-compiler", // or "modern"
-                },
-            },
-        },
     },
 });

frontend/app/store/global.ts

@@ -43,6 +43,9 @@ function setPlatform(platform: NodeJS.Platform) {
     PLATFORM = platform;
 }
 
+// Used to override the tab id when switching tabs to prevent flicker in the tab bar.
+const overrideStaticTabAtom = atom(null) as PrimitiveAtom<string>;
+
 function initGlobalAtoms(initOpts: GlobalInitOptions) {
     const windowIdAtom = atom(initOpts.windowId) as PrimitiveAtom<string>;
     const clientIdAtom = atom(initOpts.clientId) as PrimitiveAtom<string>;
@@ -100,9 +103,8 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) {
     const tabAtom: Atom<Tab> = atom((get) => {
         return WOS.getObjectValue(WOS.makeORef("tab", initOpts.tabId), get);
     });
-    const staticTabIdAtom: Atom<string> = atom((get) => {
+    // This atom is used to determine the tab id to use for the static tab. It is set to the overrideStaticTabAtom value if it is not null, otherwise it is set to the initOpts.tabId value.
-        return initOpts.tabId;
+    const staticTabIdAtom: Atom<string> = atom((get) => get(overrideStaticTabAtom) ?? initOpts.tabId);
-    });
     const controlShiftDelayAtom = atom(false);
     const updaterStatusAtom = atom<UpdaterStatus>("up-to-date") as PrimitiveAtom<UpdaterStatus>;
     try {
@@ -627,7 +629,9 @@ function createTab() {
 }
 
 function setActiveTab(tabId: string) {
-    // We use this hack to prevent a flicker in the tab bar when switching to a new tab. This class is unset in reinitWave in wave.ts. See tab.scss for where this class is used.
+    // We use this hack to prevent a flicker of the previously-hovered tab when this view was last active. This class is set in setActiveTab in global.ts. See tab.scss for where this class is used.
+    // Also overrides the staticTabAtom to the new tab id so that the active tab is set correctly.
+    globalStore.set(overrideStaticTabAtom, tabId);
     document.body.classList.add("nohover");
     getApi().setActiveTab(tabId);
 }
@@ -655,6 +659,7 @@ export {
     isDev,
     loadConnStatus,
     openLink,
+    overrideStaticTabAtom,
     PLATFORM,
     pushFlashError,
     pushNotification,

frontend/app/tab/tab.scss

@@ -100,6 +100,7 @@
     }
 }
 
+// Only apply hover effects when not in nohover mode. This prevents the previously-hovered tab from remaining hovered while a tab view is not mounted.
 body:not(.nohover) .tab:hover {
     & + .tab::after,
     &::after {
@@ -118,6 +119,11 @@ body:not(.nohover) .tab:hover {
     }
 }
 
+// When in nohover mode, always show the close button on the active tab. This prevents the close button of the active tab from flickering when nohover is toggled.
+body.nohover .tab.active .close {
+    visibility: visible;
+}
+
 @keyframes expandWidthAndFadeIn {
     from {
         width: var(--initial-tab-width);

frontend/app/tab/tab.tsx

@@ -155,47 +155,50 @@ const Tab = memo(
                 event.stopPropagation();
             };
 
-            function handleContextMenu(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+            const handleContextMenu = useCallback(
-                e.preventDefault();
+                (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-                let menu: ContextMenuItem[] = [
+                    e.preventDefault();
-                    { label: isPinned ? "Unpin Tab" : "Pin Tab", click: onPinChange },
+                    let menu: ContextMenuItem[] = [
-                    { label: "Rename Tab", click: () => handleRenameTab(null) },
+                        { label: isPinned ? "Unpin Tab" : "Pin Tab", click: () => onPinChange() },
-                    { label: "Copy TabId", click: () => navigator.clipboard.writeText(id) },
+                        { label: "Rename Tab", click: () => handleRenameTab(null) },
-                    { type: "separator" },
+                        { label: "Copy TabId", click: () => navigator.clipboard.writeText(id) },
-                ];
+                        { type: "separator" },
-                const fullConfig = globalStore.get(atoms.fullConfigAtom);
+                    ];
-                const bgPresets: string[] = [];
+                    const fullConfig = globalStore.get(atoms.fullConfigAtom);
-                for (const key in fullConfig?.presets ?? {}) {
+                    const bgPresets: string[] = [];
-                    if (key.startsWith("bg@")) {
+                    for (const key in fullConfig?.presets ?? {}) {
-                        bgPresets.push(key);
+                        if (key.startsWith("bg@")) {
-                    }
+                            bgPresets.push(key);
-                }
-                bgPresets.sort((a, b) => {
-                    const aOrder = fullConfig.presets[a]["display:order"] ?? 0;
-                    const bOrder = fullConfig.presets[b]["display:order"] ?? 0;
-                    return aOrder - bOrder;
-                });
-                if (bgPresets.length > 0) {
-                    const submenu: ContextMenuItem[] = [];
-                    const oref = makeORef("tab", id);
-                    for (const presetName of bgPresets) {
-                        const preset = fullConfig.presets[presetName];
-                        if (preset == null) {
-                            continue;
                         }
-                        submenu.push({
-                            label: preset["display:name"] ?? presetName,
-                            click: () => {
-                                ObjectService.UpdateObjectMeta(oref, preset);
-                                RpcApi.ActivityCommand(TabRpcClient, { settabtheme: 1 });
-                            },
-                        });
                     }
-                    menu.push({ label: "Backgrounds", type: "submenu", submenu }, { type: "separator" });
+                    bgPresets.sort((a, b) => {
-                }
+                        const aOrder = fullConfig.presets[a]["display:order"] ?? 0;
-                menu.push({ label: "Close Tab", click: () => onClose(null) });
+                        const bOrder = fullConfig.presets[b]["display:order"] ?? 0;
-                ContextMenuModel.showContextMenu(menu, e);
+                        return aOrder - bOrder;
-            }
+                    });
+                    if (bgPresets.length > 0) {
+                        const submenu: ContextMenuItem[] = [];
+                        const oref = makeORef("tab", id);
+                        for (const presetName of bgPresets) {
+                            const preset = fullConfig.presets[presetName];
+                            if (preset == null) {
+                                continue;
+                            }
+                            submenu.push({
+                                label: preset["display:name"] ?? presetName,
+                                click: () => {
+                                    ObjectService.UpdateObjectMeta(oref, preset);
+                                    RpcApi.ActivityCommand(TabRpcClient, { settabtheme: 1 });
+                                },
+                            });
+                        }
+                        menu.push({ label: "Backgrounds", type: "submenu", submenu }, { type: "separator" });
+                    }
+                    menu.push({ label: "Close Tab", click: () => onClose(null) });
+                    ContextMenuModel.showContextMenu(menu, e);
+                },
+                [onPinChange, handleRenameTab, id, onClose, isPinned]
+            );
 
             const showSeparator = useCallback(
                 (id) => {

frontend/app/tab/tabbar.tsx

@@ -589,12 +589,15 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
         deleteLayoutModelForTab(tabId);
     };
 
-    const handlePinChange = (tabId: string, pinned: boolean) => {
+    const handlePinChange = useCallback(
-        console.log("handlePinChange", tabId, pinned);
+        (tabId: string, pinned: boolean) => {
-        fireAndForget(async () => {
+            console.log("handlePinChange", tabId, pinned);
-            await WorkspaceService.ChangeTabPinning(workspace.oid, tabId, pinned);
+            fireAndForget(async () => {
-        });
+                await WorkspaceService.ChangeTabPinning(workspace.oid, tabId, pinned);
-    };
+            });
+        },
+        [workspace]
+    );
 
     const handleTabLoaded = useCallback((tabId: string) => {
         setTabsLoaded((prev) => {

frontend/wave.ts

@@ -22,6 +22,7 @@ import {
     initGlobal,
     initGlobalWaveEventSubs,
     loadConnStatus,
+    overrideStaticTabAtom,
     pushFlashError,
     pushNotification,
     removeNotificationById,
@@ -88,12 +89,12 @@ async function reinitWave() {
     console.log("Reinit Wave");
     getApi().sendLog("Reinit Wave");
 
-    // We use this hack to prevent a flicker in the tab bar when switching to a new tab. This class is set in setActiveTab in global.ts. See tab.scss for where this class is used.
+    // We use this hack to prevent a flicker of the previously-hovered tab when this view was last active. This class is set in setActiveTab in global.ts. See tab.scss for where this class is used.
-    requestAnimationFrame(() => {
+    // Also overrides the staticTabAtom to the new tab id so that the active tab is set correctly.
-        setTimeout(() => {
+    globalStore.set(overrideStaticTabAtom, savedInitOpts.tabId);
-            document.body.classList.remove("nohover");
+    setTimeout(() => {
-        }, 100);
+        document.body.classList.remove("nohover");
-    });
+    }, 100);
 
     const client = await WOS.reloadWaveObject<Client>(WOS.makeORef("client", savedInitOpts.clientId));
     const waveWindow = await WOS.reloadWaveObject<WaveWindow>(WOS.makeORef("window", savedInitOpts.windowId));