fixed issue for darwin title bar overlapping

feature/auto-hide-tab-bar fixed issue of window title bar

feature/auto-hide-tab-bar fixed issue in non hide mode

Author: rritik772

frontend/app/block/block.scss

@@ -2,6 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 @use "../mixins.scss";
+@use "../tab/tabbar.scss" as tabbar;
+
+.darwin:not(.fullscreen) .block.block-frame-default .block-frame-default-header {
+    .window-drag.left {
+        width: tabbar.$darwin-not-fullscreen-indent;
+    }
+}
 
 .block {
     display: flex;

frontend/app/block/blockframe.tsx

@@ -40,6 +40,7 @@ import clsx from "clsx";
 import * as jotai from "jotai";
 import * as React from "react";
 import { BlockFrameProps } from "./blocktypes";
+import { WindowDrag } from "../element/windowdrag";
 
 const NumActiveConnColors = 8;
 
@@ -181,9 +182,12 @@ const BlockFrame_Header = ({
     const preIconButton = util.useAtomValueSafe(viewModel?.preIconButton);
     let headerTextUnion = util.useAtomValueSafe(viewModel?.viewText);
     const magnified = jotai.useAtomValue(nodeModel.isMagnified);
+    const settings = jotai.useAtomValue(atoms.settingsAtom);
+    const autoHideTabBar = settings?.["window:autohidetabbar"] ?? false;
     const prevMagifiedState = React.useRef(magnified);
     const manageConnection = util.useAtomValueSafe(viewModel?.manageConnection);
     const dragHandleRef = preview ? null : nodeModel.dragHandleRef;
+    const draggerLeftRef = React.useRef<HTMLDivElement>(null);
     const connName = blockData?.meta?.connection;
     const connStatus = util.useAtomValueSafe(getConnStatusAtom(connName));
     const wshProblem = connName && !connStatus?.wshenabled && connStatus?.status == "connected";
@@ -252,6 +256,7 @@ const BlockFrame_Header = ({
 
     return (
         <div className="block-frame-default-header" ref={dragHandleRef} onContextMenu={onContextMenu}>
+            <WindowDrag ref={draggerLeftRef} className={clsx({ 'left': autoHideTabBar })} />
             {preIconButtonElem}
             <div className="block-frame-default-header-iconview">
                 {viewIconElem}

frontend/app/tab/tabbar.scss

@@ -3,14 +3,15 @@
 
 @use "./../theme.scss";
 
+$darwin-not-fullscreen-indent: 74px;
+
 .tab-bar-wrapper {
     --default-indent: 10px;
-    --darwin-not-fullscreen-indent: 74px;
 }
 
 .darwin:not(.fullscreen) .tab-bar-wrapper {
     .window-drag.left {
-        width: var(--darwin-not-fullscreen-indent);
+        width: $darwin-not-fullscreen-indent;
     }
 }