make buttons nodrag, make iconbutton a proper button

frontend/app/element/iconbutton.scss

@@ -2,6 +2,11 @@
     cursor: pointer;
     opacity: 0.7;
     align-items: center;
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    outline: inherit;
 
     &.bulb {
         color: var(--bulb-color);
@@ -18,9 +23,9 @@
         opacity: 1;
     }
 
-	&.no-action {
+    &.no-action {
-		cursor: default;
+        cursor: default;
-	}
+    }
 
     &.disabled {
         cursor: default;

frontend/app/element/iconbutton.tsx

@@ -4,24 +4,27 @@
 import { useLongClick } from "@/app/hook/useLongClick";
 import { makeIconClass } from "@/util/util";
 import clsx from "clsx";
-import { memo, useRef } from "react";
+import { forwardRef, memo, useRef } from "react";
 import "./iconbutton.scss";
 
-export const IconButton = memo(({ decl, className }: { decl: IconButtonDecl; className?: string }) => {
+type IconButtonProps = { decl: IconButtonDecl; className?: string };
-    const buttonRef = useRef<HTMLDivElement>(null);
+export const IconButton = memo(
-    const spin = decl.iconSpin ?? false;
+    forwardRef<HTMLButtonElement, IconButtonProps>(({ decl, className }, ref) => {
-    useLongClick(buttonRef, decl.click, decl.longClick, decl.disabled);
+        ref = ref ?? useRef<HTMLButtonElement>(null);
-    return (
+        const spin = decl.iconSpin ?? false;
-        <div
+        useLongClick(ref, decl.click, decl.longClick, decl.disabled);
-            ref={buttonRef}
+        return (
-            className={clsx("iconbutton", className, decl.className, {
+            <button
-                disabled: decl.disabled,
+                ref={ref}
-                "no-action": decl.noAction,
+                className={clsx("iconbutton", className, decl.className, {
-            })}
+                    disabled: decl.disabled,
-            title={decl.title}
+                    "no-action": decl.noAction,
-            style={{ color: decl.iconColor ?? "inherit" }}
+                })}
-        >
+                title={decl.title}
-            {typeof decl.icon === "string" ? <i className={makeIconClass(decl.icon, true, { spin })} /> : decl.icon}
+                style={{ color: decl.iconColor ?? "inherit" }}
-        </div>
+            >
-    );
+                {typeof decl.icon === "string" ? <i className={makeIconClass(decl.icon, true, { spin })} /> : decl.icon}
-});
+            </button>
+        );
+    })
+);

frontend/app/tab/tabbar.scss

@@ -23,6 +23,7 @@
 }
 
 .tab-bar-wrapper {
+    margin-top: 6px;
     position: relative;
     user-select: none;
     display: flex;
@@ -30,13 +31,16 @@
     width: 100vw;
     -webkit-app-region: drag;
 
+    button {
+        -webkit-app-region: no-drag;
+    }
+
     .tabs-wrapper {
         transition: var(--tabs-wrapper-transition);
         height: 26px;
     }
 
     .tab-bar {
-        margin-top: 6px;
         position: relative; // Needed for absolute positioning of child tabs
         display: flex;
         flex-direction: row;
@@ -58,7 +62,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 6px 6px 0 0;
+        padding: 0 6px 0 0;
     }
 
     .app-menu-button {

frontend/app/tab/tabbar.tsx

@@ -11,6 +11,7 @@ import { useAtomValue } from "jotai";
 import { OverlayScrollbars } from "overlayscrollbars";
 import { createRef, memo, useCallback, useEffect, useRef, useState } from "react";
 import { debounce } from "throttle-debounce";
+import { IconButton } from "../element/iconbutton";
 import { WorkspaceService } from "../store/services";
 import { Tab } from "./tab";
 import "./tabbar.scss";
@@ -147,7 +148,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
     const tabBarRef = useRef<HTMLDivElement>(null);
     const tabsWrapperRef = useRef<HTMLDivElement>(null);
     const tabRefs = useRef<React.RefObject<HTMLDivElement>[]>([]);
-    const addBtnRef = useRef<HTMLDivElement>(null);
+    const addBtnRef = useRef<HTMLButtonElement>(null);
     const draggingRemovedRef = useRef(false);
     const draggingTabDataRef = useRef({
         tabId: "",
@@ -645,6 +646,13 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
                 <i className="fa fa-ellipsis" />
             </div>
         ) : undefined;
+
+    const addtabButtonDecl: IconButtonDecl = {
+        elemtype: "iconbutton",
+        icon: "plus",
+        click: handleAddTab,
+        title: "Add Tab",
+    };
     return (
         <div ref={tabbarWrapperRef} className="tab-bar-wrapper">
             <WindowDrag ref={draggerLeftRef} className="left" />
@@ -677,9 +685,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
                     })}
                 </div>
             </div>
-            <div ref={addBtnRef} className="add-tab-btn" onClick={handleAddTab}>
+            <IconButton decl={addtabButtonDecl} ref={addBtnRef} />
-                <i className="fa fa-solid fa-plus fa-fw" />
-            </div>
             <UpdateStatusBanner ref={updateStatusBannerRef} />
             <ConfigErrorIcon buttonRef={configErrorButtonRef} />
         </div>

frontend/app/tab/workspaceswitcher.scss

@@ -9,7 +9,6 @@
     align-items: center;
     gap: 12px;
     border-radius: 6px;
-    margin-top: 6px;
     margin-right: 13px;
     box-sizing: border-box;
     background-color: rgb(from var(--main-text-color) r g b / 0.1) !important;