feature/auto-hide-tab-bar review comment resolved

window:autohidetabsbar --> window:autohidetabbar added invisible tab bar above and made it visible on hover using mouseenter and invisible mouseleave docs updated css updated
wavetermdev · Dec 16, 2024 · 9748972 · 9748972
1 parent 3fd9d97
commit 9748972
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 21 deletions.
diff --git a/docs/docs/config.mdx b/docs/docs/config.mdx
@@ -68,7 +68,7 @@ wsh editconfig
 | window:magnifiedblockblursecondarypx | int      | change the blur in CSS pixels that is applied to the visible portions of non-magnified blocks when a block is magnified (see [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) for more info on how this gets applied)      |
 | window:maxtabcachesize               | int      | number of tabs to cache. when tabs are cached, switching between them is very fast. (defaults to 10)                                                                                                                                                          |
 | window:showmenubar                   | bool     | set to use the OS-native menu bar (Windows and Linux only, requires app restart)                                                                                                                                                                              |
-| window:autohidetabsbar               | bool     | auto hide tab bar based on true or false (requires restart)
+| window:autohidetabbar                | bool     | show and hide the tab bar automatically when the mouse moves near the top of the window
 | window:nativetitlebar                | bool     | set to use the OS-native title bar, rather than the overlay (Windows and Linux only, requires app restart)                                                                                                                                                    |
 | window:disablehardwareacceleration   | bool     | set to disable Chromium hardware acceleration to resolve graphical bugs (requires app restart)                                                                                                                                                                |
 | telemetry:enabled                    | bool     | set to enable/disable telemetry                                                                                                                                                                                                                               |

diff --git a/frontend/app/tab/tabbar.scss b/frontend/app/tab/tabbar.scss
@@ -24,13 +24,13 @@
     margin-bottom: 20px;
 }
 
-.tab-bar-wrapper {
+.tab-bar-wrapper-always-visible {
     padding-top: 6px;
     position: relative;
+    opacity: 1;
 }
 
 .tab-bar-wrapper-auto-hide {
-    top: -20px; 
     left: 0; 
     right: 0;
 
@@ -39,15 +39,20 @@
 
     position: fixed;
     z-index: 1000;
+
+    opacity: 0;
     background: transparent;
     backdrop-filter: blur(10px);
-    border-radius: 12px;
+    border-radius: 6px;
 
-    transition: top 0.3s ease;
+    transition: opacity 0.3s ease, top 0.3s ease;
 }
 
-.tab-bar-wrapper,
-.tab-bar-wrapper-auto-hide {
+.tab-bar-wrapper-auto-hide-visible {
+    opacity: 1;
+}
+
+.tab-bar-wrapper {
     user-select: none;
     display: flex;
     flex-direction: row;

diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx
@@ -8,6 +8,7 @@ import { deleteLayoutModelForTab } from "@/layout/index";
 import { atoms, createTab, getApi, globalStore, isDev, PLATFORM, setActiveTab } from "@/store/global";
 import { fireAndForget } from "@/util/util";
 import { useAtomValue } from "jotai";
+import clsx from "clsx";
 import { OverlayScrollbars } from "overlayscrollbars";
 import { createRef, memo, useCallback, useEffect, useRef, useState } from "react";
 import { debounce } from "throttle-debounce";
@@ -174,26 +175,45 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
     const isFullScreen = useAtomValue(atoms.isFullScreen);
 
     const settings = useAtomValue(atoms.settingsAtom);
-    const autoHideTabsBar = settings?.["window:autohidetabsbar"] ?? false;
+    const autoHideTabBar = settings?.["window:autohidetabbar"] ?? false;
 
     let prevDelta: number;
     let prevDragDirection: string;
 
-    const handleAutoHideTabsBar = (event: MouseEvent) => {
-        const currentY = event.clientY;
+    const handleAutoHideTabBar = (event: MouseEvent) => {
         const tabBar = tabbarWrapperRef.current;
-        const tabBarHeight = tabBar.clientHeight + 1;
+        const tabBarHeight = tabBar?.clientHeight + 1;
 
-        if (currentY < 10) tabBar.style.top = '0px';
-        if (autoHideTabsBar && currentY > tabBarHeight) tabBar.style.top = `-${tabBarHeight}px`;
+        if (event.type === 'mouseenter') {
+            tabBar.style.top = '0px';
+            tabBar.addEventListener("mouseleave", handleAutoHideTabBar);
+            tabBar.classList.add('tab-bar-wrapper-auto-hide-visible')
+        }
+
+        if (event.type === 'mouseleave') {
+            tabBar.style.top = `-${tabBarHeight - 10}px`;
+            tabBar.removeEventListener("mouseleave", handleAutoHideTabBar);
+            tabBar.classList.remove('tab-bar-wrapper-auto-hide-visible')
+        }
     };
 
     useEffect(() => {
-        if (!autoHideTabsBar) return;
+        const tabBar = tabbarWrapperRef.current;
+        if (!autoHideTabBar) {
+            tabBar.style.top = '0px';
+            return;
+        }
+
+        const tabBarHeight = tabBar?.clientHeight + 1;
+        if (autoHideTabBar) {
+            tabbarWrapperRef.current.style.top = `-${tabBarHeight - 10}px`
+        }
 
-        document.addEventListener("mousemove", handleAutoHideTabsBar);
-        return () => document.removeEventListener("mousemove", handleAutoHideTabsBar);
-    }, [autoHideTabsBar])
+        tabbarWrapperRef.current.addEventListener("mouseenter", handleAutoHideTabBar);
+        return () => {
+            tabbarWrapperRef.current.removeEventListener("mouseenter", handleAutoHideTabBar);
+        }
+    }, [autoHideTabBar])
 
     // Update refs when tabIds change
     useEffect(() => {
@@ -671,7 +691,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
         title: "Add Tab",
     };
     return (
-        <div ref={tabbarWrapperRef} className={`tab-bar-wrapper${autoHideTabsBar ? '-auto-hide' : ''}`}>
+        <div ref={tabbarWrapperRef} className={clsx('tab-bar-wrapper', {'tab-bar-wrapper-auto-hide': autoHideTabBar, 'tab-bar-wrapper-always-visible': !autoHideTabBar})}>
             <WindowDrag ref={draggerLeftRef} className="left" />
             {appMenuButton}
             {devLabel}

diff --git a/frontend/types/gotypes.d.ts b/frontend/types/gotypes.d.ts
@@ -649,7 +649,7 @@ declare global {
         "window:reducedmotion"?: boolean;
         "window:tilegapsize"?: number;
         "window:showmenubar"?: boolean;
-        "window:autohidetabsbar"?: boolean;
+        "window:autohidetabbar"?: boolean;
         "window:nativetitlebar"?: boolean;
         "window:disablehardwareacceleration"?: boolean;
         "window:maxtabcachesize"?: number;

diff --git a/pkg/wconfig/metaconsts.go b/pkg/wconfig/metaconsts.go
@@ -61,7 +61,7 @@ const (
 	ConfigKey_WindowReducedMotion            = "window:reducedmotion"
 	ConfigKey_WindowTileGapSize              = "window:tilegapsize"
 	ConfigKey_WindowShowMenuBar              = "window:showmenubar"
-	ConfigKey_WindowAutoHideTabsBar          = "window:autohidetabsbar"
+	ConfigKey_WindowAutoHideTabBar           = "window:autohidetabbar"
 	ConfigKey_WindowNativeTitleBar           = "window:nativetitlebar"
 	ConfigKey_WindowDisableHardwareAcceleration = "window:disablehardwareacceleration"
 	ConfigKey_WindowMaxTabCacheSize          = "window:maxtabcachesize"

diff --git a/pkg/wconfig/settingsconfig.go b/pkg/wconfig/settingsconfig.go
@@ -88,7 +88,7 @@ type SettingsType struct {
 	WindowReducedMotion                 bool     `json:"window:reducedmotion,omitempty"`
 	WindowTileGapSize                   *int64   `json:"window:tilegapsize,omitempty"`
 	WindowShowMenuBar                   bool     `json:"window:showmenubar,omitempty"`
-	WindowAutoHideTabsBar               bool     `json:"window:autohidetabsbar,omitempty"`
+	WindowAutoHideTabBar                bool     `json:"window:autohidetabbar,omitempty"`
 	WindowNativeTitleBar                bool     `json:"window:nativetitlebar,omitempty"`
 	WindowDisableHardwareAcceleration   bool     `json:"window:disablehardwareacceleration,omitempty"`
 	WindowMaxTabCacheSize               int      `json:"window:maxtabcachesize,omitempty"`