[refactor] Unify small modal dialog styles with showSmallLayoutDialog (#8834)

## Summary
Extract a shared `showSmallLayoutDialog` utility and move
dialog-specific logic into composables, unifying the duplicated `pt`
configurations across small modal dialogs.

## Changes
- **`showSmallLayoutDialog`**: Added to `dialogService.ts` with a single
unified `pt` config for all small modal dialogs (missing nodes, missing
models, import failed, node conflict)
- **Composables**: Extracted 4 dialog functions from `dialogService`
into dedicated composables following the `useSettingsDialog` /
`useModelSelectorDialog` pattern:
  - `useMissingNodesDialog`
  - `useMissingModelsDialog`
  - `useImportFailedNodeDialog`
  - `useNodeConflictDialog`
- Each composable uses direct imports, synchronous `show()`, `hide()`,
and a `DIALOG_KEY` constant
- Updated all call sites (`app.ts`, `useHelpCenter`, `PackEnableToggle`,
`PackInstallButton`, `useImportFailedDetection`)

## Review Focus
- Unified `pt` config removes minor style variations between dialogs —
intentional design unification

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8834-refactor-Unify-small-modal-dialog-styles-with-showSmallLayoutDialog-3056d73d365081b6963beffc0e5943bf)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: github-actions <github-actions@github.com>

src/composables/useHelpCenter.ts

@@ -4,11 +4,11 @@ import { computed, onMounted } from 'vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
-import { useDialogService } from '@/services/dialogService'
 import { useHelpCenterStore } from '@/stores/helpCenterStore'
 import type { HelpCenterTriggerLocation } from '@/stores/helpCenterStore'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import { useNodeConflictDialog } from '@/workbench/extensions/manager/composables/useNodeConflictDialog'
 
 export function useHelpCenter(
   triggerFrom: HelpCenterTriggerLocation = 'sidebar'
@@ -21,7 +21,7 @@ export function useHelpCenter(
   const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
 
   const conflictDetection = useConflictDetection()
-  const { showNodeConflictDialog } = useDialogService()
+  const { show: showNodeConflictDialog } = useNodeConflictDialog()
 
   // Use conflict acknowledgment state from composable - call only once
   const { shouldShowRedDot: shouldShowConflictRedDot, markConflictsAsSeen } =

src/composables/useMissingModelsDialog.ts

@@ -0,0 +1,26 @@
+import type { ComponentAttrs } from 'vue-component-type-helpers'
+
+import MissingModelsWarning from '@/components/dialog/content/MissingModelsWarning.vue'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const DIALOG_KEY = 'global-missing-models-warning'
+
+export function useMissingModelsDialog() {
+  const { showSmallLayoutDialog } = useDialogService()
+  const dialogStore = useDialogStore()
+
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show(props: ComponentAttrs<typeof MissingModelsWarning>) {
+    showSmallLayoutDialog({
+      key: DIALOG_KEY,
+      component: MissingModelsWarning,
+      props
+    })
+  }
+
+  return { show, hide }
+}

src/composables/useMissingNodesDialog.ts

@@ -0,0 +1,30 @@
+import type { ComponentAttrs } from 'vue-component-type-helpers'
+
+import MissingNodesContent from '@/components/dialog/content/MissingNodesContent.vue'
+import MissingNodesFooter from '@/components/dialog/content/MissingNodesFooter.vue'
+import MissingNodesHeader from '@/components/dialog/content/MissingNodesHeader.vue'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const DIALOG_KEY = 'global-missing-nodes'
+
+export function useMissingNodesDialog() {
+  const { showSmallLayoutDialog } = useDialogService()
+  const dialogStore = useDialogStore()
+
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show(props: ComponentAttrs<typeof MissingNodesContent>) {
+    showSmallLayoutDialog({
+      key: DIALOG_KEY,
+      headerComponent: MissingNodesHeader,
+      footerComponent: MissingNodesFooter,
+      component: MissingNodesContent,
+      props
+    })
+  }
+
+  return { show, hide }
+}