fix issues

frontend/app/store/global.ts

@@ -143,6 +143,7 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) {
     const notificationsAtom = atom<NotificationType[]>([]);
     const notificationPopoverModeAtom = atom<boolean>(false);
     const reinitVersion = atom(0);
+    const tabIndicesMovedAtom = atom<number[]>([]);
     atoms = {
         // initialized in wave.ts (will not be null inside of application)
         clientId: clientIdAtom,
@@ -165,6 +166,7 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) {
         notifications: notificationsAtom,
         notificationPopoverMode: notificationPopoverModeAtom,
         reinitVersion,
+        tabIndicesMoved: tabIndicesMovedAtom,
     };
 }
 

frontend/app/tab/tab.scss

@@ -22,6 +22,7 @@
 		border-right-width: 1px;
 		border-right-style: solid;
 		border-color: rgb(from var(--main-text-color) r g b / 0.2);
+		opacity: 1;
 	}
 
     .tab-inner {
@@ -55,6 +56,11 @@
         .name {
             color: var(--main-text-color);
         }
+
+		& + .tab .separator,
+		.separator {
+			opacity: 0;
+		}
     }
 
     .name {

frontend/app/tab/tab.tsx

@@ -6,7 +6,7 @@ import { ContextMenuModel } from "@/store/contextmenu";
 import * as services from "@/store/services";
 import * as WOS from "@/store/wos";
 import { clsx } from "clsx";
-import { Atom, useAtomValue } from "jotai";
+import { useAtomValue } from "jotai";
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 
 import { atoms, globalStore, refocusNode } from "@/app/store/global";
@@ -16,13 +16,12 @@ import "./tab.scss";
 
 interface TabProps {
     id: string;
-    active: boolean;
+    isActive: boolean;
     isFirst: boolean;
     isBeforeActive: boolean;
     isDragging: boolean;
     tabWidth: number;
     isNew: boolean;
-    tabIndicesMovedAtom: Atom<number[]>;
     tabIds: string[];
     onClick: () => void;
     onClose: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null) => void;
@@ -37,13 +36,12 @@ const Tab = memo(
         (
             {
                 id,
-                active,
+                isActive,
                 isFirst,
                 isBeforeActive,
                 isDragging,
                 tabWidth,
                 isNew,
-                tabIndicesMovedAtom,
                 tabIds,
                 onLoaded,
                 onClick,
@@ -63,10 +61,7 @@ const Tab = memo(
             const loadedRef = useRef(false);
             const tabRef = useRef<HTMLDivElement>(null);
 
-            const tabIndicesMoved = useAtomValue(tabIndicesMovedAtom);
+            const tabIndicesMoved = useAtomValue<number[]>(atoms.tabIndicesMoved);
-
-            console.log("tabIndicesMoved", tabIndicesMoved);
-            console.log("tabIds", tabIds);
 
             useImperativeHandle(ref, () => tabRef.current as HTMLDivElement);
 
@@ -205,16 +200,14 @@ const Tab = memo(
                     const found = tabIndicesMoved.find((i, ii) => ii !== 0 && i === idx) === undefined;
                     return found;
                 },
-                [tabIndicesMoved, isFirst, active]
+                [isFirst, tabIndicesMoved]
             );
 
-            console.log("showSeparator(id)=====", id, showSeparator(id));
-
             return (
                 <div
                     ref={tabRef}
                     className={clsx("tab", {
-                        active,
+                        active: isActive,
                         isDragging,
                         "before-active": isBeforeActive,
                         "new-tab": isNew,

frontend/app/tab/tabbar.tsx

@@ -7,7 +7,7 @@ import { WindowDrag } from "@/element/windowdrag";
 import { deleteLayoutModelForTab } from "@/layout/index";
 import { atoms, createTab, getApi, isDev, PLATFORM } from "@/store/global";
 import { fireAndForget } from "@/util/util";
-import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import { OverlayScrollbars } from "overlayscrollbars";
 import { createRef, memo, useCallback, useEffect, useRef, useState } from "react";
 import { debounce } from "throttle-debounce";
@@ -37,9 +37,6 @@ const OS_OPTIONS = {
     },
 };
 
-const tabIndicesMovedAtom = atom<number[]>([]);
-const tabIdsAtom = atom<string[]>([]);
-
 interface TabBarProps {
     workspace: Workspace;
 }
@@ -103,6 +100,7 @@ const ConfigErrorIcon = ({ buttonRef }: { buttonRef: React.RefObject<HTMLElement
 };
 
 const TabBar = memo(({ workspace }: TabBarProps) => {
+    const [tabIds, setTabIds] = useState([]);
     const [dragStartPositions, setDragStartPositions] = useState<number[]>([]);
     const [draggingTab, setDraggingTab] = useState<string>();
     const [tabsLoaded, setTabsLoaded] = useState({});
@@ -137,8 +135,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
     const activeTabId = useAtomValue(atoms.staticTabId);
     const isFullScreen = useAtomValue(atoms.isFullScreen);
     const settings = useAtomValue(atoms.settingsAtom);
-    const [tabIds, setTabIds] = useAtom(tabIdsAtom);
+    const setTabIndicesMoved = useSetAtom(atoms.tabIndicesMoved);
-    const setTabIndicesMoved = useSetAtom(tabIndicesMovedAtom);
 
     let prevDelta: number;
     let prevDragDirection: string;
@@ -584,7 +581,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
                                 id={tabId}
                                 isFirst={index === 0}
                                 onClick={() => handleSelectTab(tabId)}
-                                active={activeTabId === tabId}
+                                isActive={activeTabId === tabId}
                                 onMouseDown={(event) => handleDragStart(event, tabId, tabRefs.current[index])}
                                 onClose={(event) => handleCloseTab(event, tabId)}
                                 onLoaded={() => handleTabLoaded(tabId)}
@@ -592,7 +589,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
                                 isDragging={draggingTab === tabId}
                                 tabWidth={tabWidthRef.current}
                                 isNew={tabId === newTabId}
-                                tabIndicesMovedAtom={tabIndicesMovedAtom}
                                 tabIds={tabIds}
                                 onMouseEnter={() => handleMouseEnterTab(index)}
                                 onMouseLeave={() => handleMouseLeaveTab(index)}

frontend/types/custom.d.ts

@@ -27,6 +27,7 @@ declare global {
         notifications: jotai.PrimitiveAtom<NotificationType[]>;
         notificationPopoverMode: jotia.atom<boolean>;
         reinitVersion: jotai.PrimitiveAtom<number>;
+        tabIndicesMoved: jotai.atom<number[]>;
     };
 
     type WritableWaveObjectAtom<T extends WaveObj> = jotai.WritableAtom<T, [value: T], void>;