Refactor sidebarTabStore (#1111)

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -37,7 +37,7 @@ const sidebarLocation = computed<'left' | 'right'>(() =>
 )
 
 const sidebarPanelVisible = computed(
-  () => useWorkspaceStore().activeSidebarTab !== null
+  () => useWorkspaceStore().sidebarTab.activeSidebarTab !== null
 )
 const gutterClass = computed(() => {
   return sidebarPanelVisible.value ? '' : 'gutter-hidden'

src/components/sidebar/SideToolbar.vue

@@ -7,7 +7,7 @@
         :icon="tab.icon"
         :iconBadge="tab.iconBadge"
         :tooltip="tab.tooltip"
-        :selected="tab === selectedTab"
+        :selected="tab.id === selectedTab?.id"
         :class="tab.id + '-tab-button'"
         @click="onTabClick(tab)"
       />
@@ -60,17 +60,12 @@ const isSmall = computed(
 )
 
 const tabs = computed(() => workspaceStore.getSidebarTabs())
-const selectedTab = computed<SidebarTabExtension | null>(() => {
+const selectedTab = computed(() => workspaceStore.sidebarTab.activeSidebarTab)
-  const tabId = workspaceStore.activeSidebarTab
-  return tabs.value.find((tab) => tab.id === tabId) || null
-})
 const mountCustomTab = (tab: CustomSidebarTabExtension, el: HTMLElement) => {
   tab.render(el)
 }
 const onTabClick = (item: SidebarTabExtension) => {
-  workspaceStore.updateActiveSidebarTab(
+  workspaceStore.sidebarTab.toggleSidebarTab(item.id)
-    workspaceStore.activeSidebarTab === item.id ? null : item.id
-  )
 }
 onBeforeUnmount(() => {
   tabs.value.forEach((tab) => {

src/stores/workspace/sidebarTabStore.ts

@@ -0,0 +1,45 @@
+import { SidebarTabExtension } from '@/types/extensionTypes'
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+export const useSidebarTabStore = defineStore('sidebarTab', () => {
+  const sidebarTabs = ref<SidebarTabExtension[]>([])
+  const activeSidebarTabId = ref<string | null>(null)
+
+  const activeSidebarTab = computed<SidebarTabExtension | null>(() => {
+    return (
+      sidebarTabs.value.find((tab) => tab.id === activeSidebarTabId.value) ??
+      null
+    )
+  })
+
+  const toggleSidebarTab = (tabId: string) => {
+    activeSidebarTabId.value = activeSidebarTabId.value === tabId ? null : tabId
+  }
+
+  const registerSidebarTab = (tab: SidebarTabExtension) => {
+    sidebarTabs.value = [...sidebarTabs.value, tab]
+  }
+
+  const unregisterSidebarTab = (id: string) => {
+    const index = sidebarTabs.value.findIndex((tab) => tab.id === id)
+    if (index !== -1) {
+      const tab = sidebarTabs.value[index]
+      if (tab.type === 'custom' && tab.destroy) {
+        tab.destroy()
+      }
+      const newSidebarTabs = [...sidebarTabs.value]
+      newSidebarTabs.splice(index, 1)
+      sidebarTabs.value = newSidebarTabs
+    }
+  }
+
+  return {
+    sidebarTabs,
+    activeSidebarTabId,
+    activeSidebarTab,
+    toggleSidebarTab,
+    registerSidebarTab,
+    unregisterSidebarTab
+  }
+})

src/stores/workspaceStateStore.ts

@@ -4,18 +4,15 @@ import { useToastStore } from './toastStore'
 import { useQueueSettingsStore } from './queueStore'
 import { useMenuItemStore } from './menuItemStore'
 import { useCommandStore } from './commandStore'
+import { useSidebarTabStore } from './workspace/sidebarTabStore'
 
 interface WorkspaceState {
   spinner: boolean
-  activeSidebarTab: string | null
-  sidebarTabs: SidebarTabExtension[]
 }
 
 export const useWorkspaceStore = defineStore('workspace', {
   state: (): WorkspaceState => ({
-    spinner: false,
+    spinner: false
-    activeSidebarTab: null,
-    sidebarTabs: []
   }),
   getters: {
     toast(): ToastManager {
@@ -33,17 +30,14 @@ export const useWorkspaceStore = defineStore('workspace', {
       return {
         execute: useCommandStore().execute
       }
+    },
+    sidebarTab() {
+      return useSidebarTabStore()
     }
   },
   actions: {
-    updateActiveSidebarTab(tabId: string) {
-      this.activeSidebarTab = tabId
-    },
-    toggleSidebarTab(tabId: string) {
-      this.activeSidebarTab = this.activeSidebarTab === tabId ? null : tabId
-    },
     registerSidebarTab(tab: SidebarTabExtension) {
-      this.sidebarTabs = [...this.sidebarTabs, tab]
+      this.sidebarTab.registerSidebarTab(tab)
       useCommandStore().registerCommand({
         id: `Workspace.ToggleSidebarTab.${tab.id}`,
         icon: tab.icon,
@@ -51,24 +45,15 @@ export const useWorkspaceStore = defineStore('workspace', {
         tooltip: tab.tooltip,
         versionAdded: '1.3.9',
         function: () => {
-          this.toggleSidebarTab(tab.id)
+          this.sidebarTab.toggleSidebarTab(tab.id)
         }
       })
     },
     unregisterSidebarTab(id: string) {
-      const index = this.sidebarTabs.findIndex((tab) => tab.id === id)
+      this.sidebarTab.unregisterSidebarTab(id)
-      if (index !== -1) {
-        const tab = this.sidebarTabs[index]
-        if (tab.type === 'custom' && tab.destroy) {
-          tab.destroy()
-        }
-        const newSidebarTabs = [...this.sidebarTabs]
-        newSidebarTabs.splice(index, 1)
-        this.sidebarTabs = newSidebarTabs
-      }
     },
-    getSidebarTabs() {
+    getSidebarTabs(): SidebarTabExtension[] {
-      return [...this.sidebarTabs]
+      return this.sidebarTab.sidebarTabs
     }
   }
 })