refactor: convert managerStateStore to composable

- Move managerStateStore from store to composable pattern
- All functions are non-reactive utilities that don't need state management
- Follows Pinia guideline: "If it's not reactive, it shouldn't be in a store"
- Update all import paths across 8 files
- Move and update test file accordingly

This change improves architecture consistency as other utility functions
in the codebase also use composables rather than stores when reactivity
is not required.

Author: viva-jinyi

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -58,8 +58,8 @@ import { computed } from 'vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
+import { useManagerState } from '@/composables/useManagerState'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { useManagerStateStore } from '@/stores/managerStateStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 
@@ -74,6 +74,7 @@ const { missingNodePacks, isLoading, error, missingCoreNodes } =
   useMissingNodes()
 
 const comfyManagerStore = useComfyManagerStore()
+const managerState = useManagerState()
 
 // Check if any of the missing packs are currently being installed
 const isInstalling = computed(() => {
@@ -104,20 +105,18 @@ const uniqueNodes = computed(() => {
     })
 })
 
-const managerStateStore = useManagerStateStore()
-
 // Show manager buttons unless manager is disabled
 const showManagerButtons = computed(() => {
-  return managerStateStore.shouldShowManagerButtons()
+  return managerState.shouldShowManagerButtons()
 })
 
 // Only show Install All button for NEW_UI (new manager with v4 support)
 const showInstallAllButton = computed(() => {
-  return managerStateStore.shouldShowInstallButton()
+  return managerState.shouldShowInstallButton()
 })
 
 const openManager = async () => {
-  await managerStateStore.openManager({
+  await managerState.openManager({
     initialTab: ManagerTab.Missing,
     showToastOnLegacyError: true
   })

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -142,9 +142,9 @@ import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
 import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
+import { useManagerState } from '@/composables/useManagerState'
 import { type ReleaseNote } from '@/services/releaseService'
 import { useCommandStore } from '@/stores/commandStore'
-import { useManagerStateStore } from '@/stores/managerStateStore'
 import { useReleaseStore } from '@/stores/releaseStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { ManagerTab } from '@/types/comfyManagerTypes'
@@ -314,7 +314,7 @@ const menuItems = computed<MenuItem[]>(() => {
       label: t('helpCenter.managerExtension'),
       showRedDot: shouldShowManagerRedDot.value,
       action: async () => {
-        await useManagerStateStore().openManager({
+        await useManagerState().openManager({
           initialTab: ManagerTab.All,
           showToastOnLegacyError: false
         })

src/components/topbar/CommandMenubar.vue

@@ -106,9 +106,9 @@ import { useI18n } from 'vue-i18n'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
 import SettingDialogContent from '@/components/dialog/content/SettingDialogContent.vue'
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
+import { useManagerState } from '@/composables/useManagerState'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import { useManagerStateStore } from '@/stores/managerStateStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
@@ -124,6 +124,8 @@ const dialogStore = useDialogStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
 
+const managerState = useManagerState()
+
 const menuRef = ref<
   ({ dirty: boolean } & TieredMenuMethods & TieredMenuState) | null
 >(null)
@@ -156,10 +158,8 @@ const showSettings = (defaultPanel?: string) => {
   })
 }
 
-const managerStateStore = useManagerStateStore()
-
 const showManageExtensions = async () => {
-  await managerStateStore.openManager({
+  await managerState.openManager({
     initialTab: ManagerTab.All,
     showToastOnLegacyError: false
   })

src/composables/useConflictDetection.ts

@@ -3,12 +3,12 @@ import { computed, getCurrentInstance, onUnmounted, readonly, ref } from 'vue'
 
 import { useInstalledPacks } from '@/composables/nodePack/useInstalledPacks'
 import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
+import { useManagerState } from '@/composables/useManagerState'
 import config from '@/config'
 import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useComfyRegistryService } from '@/services/comfyRegistryService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
-import { useManagerStateStore } from '@/stores/managerStateStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import type { SystemStats } from '@/types'
 import type { components } from '@/types/comfyRegistryTypes'
@@ -638,8 +638,8 @@ export function useConflictDetection() {
   async function initializeConflictDetection(): Promise<void> {
     try {
       // Check if manager is disabled before running conflict detection
-      const managerStore = useManagerStateStore()
-      if (!managerStore.isManagerEnabled()) {
+      const managerState = useManagerState()
+      if (!managerState.isManagerEnabled()) {
         console.log(
           '[ConflictDetection] Manager is disabled, skipping conflict detection'
         )

src/composables/useCoreCommands.ts

@@ -1,5 +1,6 @@
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
+import { ManagerUIState, useManagerState } from '@/composables/useManagerState'
 import { useModelSelectorDialog } from '@/composables/useModelSelectorDialog'
 import {
   DEFAULT_DARK_COLOR_PALETTE,
@@ -24,10 +25,6 @@ import { useExecutionStore } from '@/stores/executionStore'
 import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
 import { useHelpCenterStore } from '@/stores/helpCenterStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
-import {
-  ManagerUIState,
-  useManagerStateStore
-} from '@/stores/managerStateStore'
 import { useQueueSettingsStore, useQueueStore } from '@/stores/queueStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
@@ -719,7 +716,7 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Custom Nodes Manager',
       versionAdded: '1.12.10',
       function: async () => {
-        await useManagerStateStore().openManager({
+        await useManagerState().openManager({
           showToastOnLegacyError: true
         })
       }
@@ -730,8 +727,8 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Check for Custom Node Updates',
       versionAdded: '1.17.0',
       function: async () => {
-        const managerStore = useManagerStateStore()
-        const state = managerStore.getManagerUIState()
+        const managerState = useManagerState()
+        const state = managerState.getManagerUIState()
 
         // For DISABLED state, show error toast instead of opening settings
         if (state === ManagerUIState.DISABLED) {
@@ -744,7 +741,7 @@ export function useCoreCommands(): ComfyCommand[] {
           return
         }
 
-        await managerStore.openManager({
+        await managerState.openManager({
           initialTab: ManagerTab.UpdateAvailable,
           showToastOnLegacyError: false
         })
@@ -756,7 +753,7 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Install Missing Custom Nodes',
       versionAdded: '1.17.0',
       function: async () => {
-        await useManagerStateStore().openManager({
+        await useManagerState().openManager({
           initialTab: ManagerTab.Missing,
           showToastOnLegacyError: false
         })
@@ -866,7 +863,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'mdi mdi-puzzle-outline',
       label: 'Manager',
       function: async () => {
-        await useManagerStateStore().openManager({
+        await useManagerState().openManager({
           initialTab: ManagerTab.All,
           showToastOnLegacyError: false
         })
@@ -934,7 +931,7 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Custom Nodes (Legacy)',
       versionAdded: '1.16.4',
       function: async () => {
-        await useManagerStateStore().openManager({
+        await useManagerState().openManager({
           legacyCommand: 'Comfy.Manager.CustomNodesManager.ToggleVisibility',
           showToastOnLegacyError: true,
           isLegacyOnly: true
@@ -947,7 +944,7 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Manager Menu (Legacy)',
       versionAdded: '1.16.4',
       function: async () => {
-        await useManagerStateStore().openManager({
+        await useManagerState().openManager({
           showToastOnLegacyError: true,
           isLegacyOnly: true
         })

src/stores/managerStateStore.ts src/composables/useManagerState.tssrc/stores/managerStateStore.ts renamed to src/composables/useManagerState.ts

@@ -1,5 +1,3 @@
-import { defineStore } from 'pinia'
-
 import { t } from '@/i18n'
 import { api } from '@/scripts/api'
 import { useDialogService } from '@/services/dialogService'
@@ -14,7 +12,7 @@ export enum ManagerUIState {
   NEW_UI = 'new'
 }
 
-export const useManagerStateStore = defineStore('managerState', () => {
+export function useManagerState() {
   const systemStatsStore = useSystemStatsStore()
 
   /**
@@ -179,4 +177,4 @@ export const useManagerStateStore = defineStore('managerState', () => {
     shouldShowManagerButtons,
     openManager
   }
-})
+}

src/services/comfyManagerService.ts

@@ -2,8 +2,8 @@ import axios, { AxiosError, AxiosResponse } from 'axios'
 import { v4 as uuidv4 } from 'uuid'
 import { ref } from 'vue'
 
+import { useManagerState } from '@/composables/useManagerState'
 import { api } from '@/scripts/api'
-import { useManagerStateStore } from '@/stores/managerStateStore'
 import { components } from '@/types/generatedManagerTypes'
 import { isAbortError } from '@/utils/typeGuardUtil'
 
@@ -54,8 +54,8 @@ export const useComfyManagerService = () => {
 
   // Check if manager service should be available
   const isManagerServiceAvailable = () => {
-    const managerStore = useManagerStateStore()
-    return managerStore.isNewManagerUI()
+    const managerState = useManagerState()
+    return managerState.isNewManagerUI()
   }
 
   const handleRequestError = (