feature/auto-hide-tab-bar refactored code and updated doc

Author: rritik772

Diff for: 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
+| window:autohidetabsbar               | bool     | auto hide tab bar based on true or false (requires restart)
 | 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 for: frontend/app/tab/tabbar.tsx

@@ -174,7 +174,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
     const isFullScreen = useAtomValue(atoms.isFullScreen);
 
     const settings = useAtomValue(atoms.settingsAtom);
-    const autoHideTabsBar = useRef<boolean>(settings["window:autohidetabsbar"]);
+    const autoHideTabsBar = settings?.["window:autohidetabsbar"] ?? false;
 
     let prevDelta: number;
     let prevDragDirection: string;
@@ -185,13 +185,15 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
         const tabBarHeight = tabBar.clientHeight + 1;
 
         if (currentY < 10) tabBar.style.top = '0px';
-        if (autoHideTabsBar.current && currentY > tabBarHeight) tabBar.style.top = `-${tabBarHeight}px`;
+        if (autoHideTabsBar && currentY > tabBarHeight) tabBar.style.top = `-${tabBarHeight}px`;
     };
 
     useEffect(() => {
+        if (!autoHideTabsBar) return;
+
         document.addEventListener("mousemove", handleAutoHideTabsBar);
         return () => document.removeEventListener("mousemove", handleAutoHideTabsBar);
-    }, [])
+    }, [autoHideTabsBar])
 
     // Update refs when tabIds change
     useEffect(() => {
@@ -669,7 +671,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
         title: "Add Tab",
     };
     return (
-        <div ref={tabbarWrapperRef} className={`tab-bar-wrapper${autoHideTabsBar.current ? '-auto-hide' : ''}`}>
+        <div ref={tabbarWrapperRef} className={`tab-bar-wrapper${autoHideTabsBar ? '-auto-hide' : ''}`}>
             <WindowDrag ref={draggerLeftRef} className="left" />
             {appMenuButton}
             {devLabel}