[refactor] Manager dialog simplification (#8041)

## Summary
Simplifies the Manager dialog by consolidating components and using
BaseModalLayout with v-model support for right panel state.

## Changes
- **Consolidation**: Merged ManagerDialogContent, ManagerHeader,
ManagerNavSidebar, RegistrySearchBar, and SearchFilterDropdown into
single ManagerDialog component
- **Right panel**: Added v-model:rightPanelOpen to BaseModalLayout for
external panel state control; clicking a node card now auto-opens the
info panel
- **Cleanup**: Removed unused useResponsiveCollapse composable, TabItem
and SearchOption types
- **UI tweaks**: Moved action buttons (Install All/Update All) from
header-right-area to contentFilter area


[manager-capture.webm](https://github.com/user-attachments/assets/2dd6092a-965d-4885-8ba6-6a2cc51f024a)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8041-refactor-Manager-dialog-simplification-2e86d73d3650815ba699e49a2748b682)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>

src/workbench/extensions/manager/composables/nodePack/useMissingNodes.ts

@@ -14,7 +14,6 @@ import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comf
 
 /**
  * Composable to find missing NodePacks from workflow
- * Uses the same filtering approach as ManagerDialogContent.vue
  * Automatically fetches workflow pack data when initialized
  * This is a shared singleton composable - all components use the same instance
  */
@@ -25,7 +24,6 @@ export const useMissingNodes = createSharedComposable(() => {
   const { workflowPacks, isLoading, error, startFetchWorkflowPacks } =
     useWorkflowPacks()
 
-  // Same filtering logic as ManagerDialogContent.vue
   const filterMissingPacks = (packs: components['schemas']['Node'][]) =>
     packs.filter((pack) => !comfyManagerStore.isPackInstalled(pack.id))
 

src/workbench/extensions/manager/composables/nodePack/useUpdateAvailableNodes.ts

@@ -7,7 +7,6 @@ import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comf
 
 /**
  * Composable to find NodePacks that have updates available
- * Uses the same filtering approach as ManagerDialogContent.vue
  * Automatically fetches installed pack data when initialized
  */
 export const useUpdateAvailableNodes = () => {
@@ -34,7 +33,6 @@ export const useUpdateAvailableNodes = () => {
     return compare(latestVersion, installedVersion) > 0
   }
 
-  // Same filtering logic as ManagerDialogContent.vue
   const filterOutdatedPacks = (packs: components['schemas']['Node'][]) =>
     packs.filter(isOutdatedPack)
 

src/workbench/extensions/manager/composables/useManagerDialog.ts

@@ -0,0 +1,36 @@
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+import type { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+import ManagerDialog from '@/workbench/extensions/manager/components/manager/ManagerDialog.vue'
+
+const DIALOG_KEY = 'global-manager'
+
+export function useManagerDialog() {
+  const dialogService = useDialogService()
+  const dialogStore = useDialogStore()
+
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show(initialTab?: ManagerTab) {
+    dialogService.showLayoutDialog({
+      key: DIALOG_KEY,
+      component: ManagerDialog,
+      props: {
+        onClose: hide,
+        initialTab
+      },
+      dialogComponentProps: {
+        pt: {
+          content: { class: '!px-0 overflow-hidden h-full !py-0' }
+        }
+      }
+    })
+  }
+
+  return {
+    show,
+    hide
+  }
+}

src/workbench/extensions/manager/composables/useManagerState.test.ts

@@ -53,6 +53,13 @@ vi.mock('@/stores/toastStore', () => ({
   }))
 }))
 
+vi.mock('@/workbench/extensions/manager/composables/useManagerDialog', () => ({
+  useManagerDialog: vi.fn(() => ({
+    show: vi.fn(),
+    hide: vi.fn()
+  }))
+}))
+
 describe('useManagerState', () => {
   beforeEach(() => {
     vi.clearAllMocks()

src/workbench/extensions/manager/composables/useManagerState.ts

@@ -7,6 +7,7 @@ import { api } from '@/scripts/api'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import { useManagerDialog } from '@/workbench/extensions/manager/composables/useManagerDialog'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 export enum ManagerUIState {
@@ -19,6 +20,7 @@ export function useManagerState() {
   const systemStatsStore = useSystemStatsStore()
   const { systemStats, isInitialized: systemInitialized } =
     storeToRefs(systemStatsStore)
+  const managerDialog = useManagerDialog()
 
   /**
    * The current manager UI state.
@@ -186,11 +188,9 @@ export function useManagerState() {
             detail: t('manager.legacyMenuNotAvailable'),
             life: 3000
           })
-          dialogService.showManagerDialog({ initialTab: ManagerTab.All })
+          await managerDialog.show(ManagerTab.All)
         } else {
-          dialogService.showManagerDialog(
-            options?.initialTab ? { initialTab: options.initialTab } : undefined
-          )
+          await managerDialog.show(options?.initialTab)
         }
         break
     }