Mark the current successor tab with [data-successor] attribute

src/services/tabs.fg.actions.ts

@@ -82,6 +82,7 @@ export function mutateNativeTabToSideberyTab(nativeTab: NativeTab): Tab {
       color: null,
       isGroup: tab.isGroup,
       preview: false,
+      isSuccessor: false
     }
   }
 
@@ -123,6 +124,7 @@ export function createReactiveProps(tab: Tab): ReactiveTabProps {
     color: null,
     isGroup: tab.isGroup,
     preview: false,
+    isSuccessor: false
   }
 
   if (reactFn) return reactFn(rProps)
@@ -2704,6 +2706,15 @@ function updateSuccession(exclude?: ID[]) {
         Logs.err('Tabs.updateSuccession: Cannot update succession:', err)
       })
       activeTab.successorTabId = target.id
+
+      // Mark the current successor tab
+      target.reactive.isSuccessor = true
+      const prevPrevActive = Tabs.byId[Tabs.successorId]
+      if (prevPrevActive) {
+        prevPrevActive.reactive.isSuccessor = false
+      }
+      Tabs.successorId = target.id
+
       return target
     }
   }

src/services/tabs.fg.ts

@@ -55,6 +55,7 @@ export const Tabs = {
   removingTabs: [] as ID[],
   ignoreTabsEvents: false,
   activeId: NOID,
+  successorId: NOID,
   blockedScrollPosition: false,
   activateSelectedOnMouseLeave: false,
   sorting: false,

src/sidebar/components/tab.vue

@@ -20,6 +20,7 @@
   :data-unread="tab.reactive.unread"
   :data-edit="tab.reactive.customTitleEdit"
   :data-preview="tab.reactive.preview"
+  :data-successor="tab.reactive.isSuccessor"
   :title="tab.reactive.tooltip"
   :draggable="!tab.reactive.customTitleEdit"
   @dragstart="onDragStart"

src/types/tabs.ts

@@ -75,6 +75,7 @@ export interface ReactiveTabProps {
   customColor: string | null
   isGroup: boolean
   preview: boolean
+  isSuccessor: boolean
 }
 
 export interface InlineTabData {