From ceac8f3741585a612f987d37b0a3070932109cc2 Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Mon, 18 Aug 2025 09:41:15 +0900
Subject: [PATCH] Modal Standardization (#4784)

---
 src/components/custom/button/IconButton.vue   |  15 ++
 .../custom/widget/ModelSelector.vue           |  67 +++++++
 .../custom/widget/layout/BaseWidgetLayout.vue | 176 ++++++++++++++++++
 src/components/custom/widget/nav/NavItem.vue  |  24 +++
 src/components/custom/widget/nav/NavTitle.vue |  13 ++
 .../custom/widget/panel/LeftSidePanel.vue     |  75 ++++++++
 .../custom/widget/panel/PanelHeader.vue       |  12 ++
 .../custom/widget/panel/RightSidePanel.vue    |   5 +
 src/components/dialog/GlobalDialog.vue        |  18 +-
 src/composables/useCoreCommands.ts            |  12 ++
 src/composables/useModelSelectorDialog.ts     |  29 +++
 src/locales/ar/commands.json                  |   3 +
 src/locales/ar/main.json                      |   1 +
 src/locales/en/commands.json                  |   3 +
 src/locales/en/main.json                      |   1 +
 src/locales/es/commands.json                  |   3 +
 src/locales/es/main.json                      |   1 +
 src/locales/fr/commands.json                  |   3 +
 src/locales/fr/main.json                      |   1 +
 src/locales/ja/commands.json                  |   3 +
 src/locales/ja/main.json                      |   1 +
 src/locales/ko/commands.json                  |   3 +
 src/locales/ko/main.json                      |   3 +-
 src/locales/ru/commands.json                  |   3 +
 src/locales/ru/main.json                      |   1 +
 src/locales/zh-TW/commands.json               |   3 +
 src/locales/zh-TW/main.json                   |   1 +
 src/locales/zh/commands.json                  |   3 +
 src/locales/zh/main.json                      |   3 +-
 src/services/dialogService.ts                 |  39 +++-
 src/stores/dialogStore.ts                     |   4 +-
 src/types/custom_components/index.d.ts        |   2 +
 src/types/custom_components/navTypes.ts       |   9 +
 src/types/custom_components/widgetTypes.ts    |   3 +
 tailwind.config.js                            |   6 +-
 35 files changed, 533 insertions(+), 16 deletions(-)
 create mode 100644 src/components/custom/button/IconButton.vue
 create mode 100644 src/components/custom/widget/ModelSelector.vue
 create mode 100644 src/components/custom/widget/layout/BaseWidgetLayout.vue
 create mode 100644 src/components/custom/widget/nav/NavItem.vue
 create mode 100644 src/components/custom/widget/nav/NavTitle.vue
 create mode 100644 src/components/custom/widget/panel/LeftSidePanel.vue
 create mode 100644 src/components/custom/widget/panel/PanelHeader.vue
 create mode 100644 src/components/custom/widget/panel/RightSidePanel.vue
 create mode 100644 src/composables/useModelSelectorDialog.ts
 create mode 100644 src/types/custom_components/index.d.ts
 create mode 100644 src/types/custom_components/navTypes.ts
 create mode 100644 src/types/custom_components/widgetTypes.ts

diff --git a/src/components/custom/button/IconButton.vue b/src/components/custom/button/IconButton.vue
new file mode 100644
index 0000000000..80e66f2d7e
--- /dev/null
+++ b/src/components/custom/button/IconButton.vue
@@ -0,0 +1,15 @@
+<template>
+  <button
+    class="flex justify-center items-center outline-none border-none p-0 bg-white text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white w-8 h-8 rounded-lg cursor-pointer"
+    role="button"
+    @click="onClick"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+const { onClick } = defineProps<{
+  onClick: () => void
+}>()
+</script>
diff --git a/src/components/custom/widget/ModelSelector.vue b/src/components/custom/widget/ModelSelector.vue
new file mode 100644
index 0000000000..ea25dac662
--- /dev/null
+++ b/src/components/custom/widget/ModelSelector.vue
@@ -0,0 +1,67 @@
+<template>
+  <BaseWidgetLayout>
+    <template #leftPanel>
+      <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
+        <template #header-icon>
+          <i-lucide:puzzle class="text-neutral" />
+        </template>
+        <template #header-title>
+          <span class="text-neutral text-base">{{ t('g.title') }}</span>
+        </template>
+      </LeftSidePanel>
+    </template>
+
+    <template #header>
+      <!-- here -->
+    </template>
+
+    <template #content>
+      <!-- here -->
+    </template>
+
+    <template #rightPanel>
+      <RightSidePanel></RightSidePanel>
+    </template>
+  </BaseWidgetLayout>
+</template>
+
+<script setup lang="ts">
+import { provide, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { NavGroupData, NavItemData } from '@/types/custom_components/navTypes'
+import { OnCloseKey } from '@/types/custom_components/widgetTypes'
+
+import BaseWidgetLayout from './layout/BaseWidgetLayout.vue'
+import LeftSidePanel from './panel/LeftSidePanel.vue'
+import RightSidePanel from './panel/RightSidePanel.vue'
+
+const { t } = useI18n()
+
+const { onClose } = defineProps<{
+  onClose: () => void
+}>()
+
+provide(OnCloseKey, onClose)
+
+const tempNavigation = ref<(NavItemData | NavGroupData)[]>([
+  { id: 'installed', label: 'Installed' },
+  {
+    title: 'TAGS',
+    items: [
+      { id: 'tag-sd15', label: 'SD 1.5' },
+      { id: 'tag-sdxl', label: 'SDXL' },
+      { id: 'tag-utility', label: 'Utility' }
+    ]
+  },
+  {
+    title: 'CATEGORIES',
+    items: [
+      { id: 'cat-models', label: 'Models' },
+      { id: 'cat-nodes', label: 'Nodes' }
+    ]
+  }
+])
+
+const selectedNavItem = ref<string | null>('installed')
+</script>
diff --git a/src/components/custom/widget/layout/BaseWidgetLayout.vue b/src/components/custom/widget/layout/BaseWidgetLayout.vue
new file mode 100644
index 0000000000..5c221c9af5
--- /dev/null
+++ b/src/components/custom/widget/layout/BaseWidgetLayout.vue
@@ -0,0 +1,176 @@
+<template>
+  <div
+    class="base-widget-layout rounded-2xl overflow-hidden relative bg-zinc-100 dark-theme:bg-zinc-800"
+  >
+    <IconButton
+      v-show="!isRightPanelOpen && hasRightPanel"
+      class="absolute top-4 right-16 z-10 transition-opacity duration-200"
+      :class="{
+        'opacity-0 pointer-events-none': isRightPanelOpen || !hasRightPanel
+      }"
+      @click="toggleRightPanel"
+    >
+      <i-lucide:panel-right class="text-sm" />
+    </IconButton>
+    <IconButton
+      class="absolute top-4 right-6 z-10 transition-opacity duration-200"
+      @click="closeDialog"
+    >
+      <i class="pi pi-times text-sm"></i>
+    </IconButton>
+    <div class="flex w-full h-full">
+      <Transition name="slide-panel">
+        <nav
+          v-if="$slots.leftPanel && showLeftPanel"
+          :class="[
+            PANEL_SIZES.width,
+            PANEL_SIZES.minWidth,
+            PANEL_SIZES.maxWidth
+          ]"
+        >
+          <slot name="leftPanel"></slot>
+        </nav>
+      </Transition>
+
+      <div class="flex-1 flex bg-zinc-100 dark-theme:bg-neutral-900">
+        <div class="w-full h-full flex flex-col">
+          <header
+            v-if="$slots.header"
+            class="w-full h-16 px-6 py-4 flex justify-between gap-2"
+          >
+            <div class="flex-1 flex gap-2 flex-shrink-0">
+              <IconButton v-if="!notMobile" @click="toggleLeftPanel">
+                <i-lucide:panel-left v-if="!showLeftPanel" class="text-sm" />
+                <i-lucide:panel-left-close v-else class="text-sm" />
+              </IconButton>
+              <slot name="header"></slot>
+            </div>
+            <div class="flex justify-end gap-2 min-w-20">
+              <slot name="header-right-area"></slot>
+              <IconButton
+                v-if="isRightPanelOpen && hasRightPanel"
+                @click="toggleRightPanel"
+              >
+                <i-lucide:panel-right-close class="text-sm" />
+              </IconButton>
+            </div>
+          </header>
+          <main class="flex-1">
+            <slot name="content"></slot>
+          </main>
+        </div>
+        <Transition name="slide-panel-right">
+          <aside
+            v-if="hasRightPanel && isRightPanelOpen"
+            class="w-1/4 min-w-40 max-w-80"
+          >
+            <slot name="rightPanel"></slot>
+          </aside>
+        </Transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useBreakpoints } from '@vueuse/core'
+import { computed, inject, ref, useSlots, watch } from 'vue'
+
+import IconButton from '@/components/custom/button/IconButton.vue'
+import { OnCloseKey } from '@/types/custom_components/widgetTypes'
+
+const BREAKPOINTS = { sm: 480 }
+const PANEL_SIZES = {
+  width: 'w-1/3',
+  minWidth: 'min-w-40',
+  maxWidth: 'max-w-56'
+}
+
+const slots = useSlots()
+const closeDialog = inject(OnCloseKey, () => {})
+
+const breakpoints = useBreakpoints(BREAKPOINTS)
+const notMobile = breakpoints.greater('sm')
+
+const isLeftPanelOpen = ref<boolean>(true)
+const isRightPanelOpen = ref<boolean>(false)
+const mobileMenuOpen = ref<boolean>(false)
+
+const hasRightPanel = computed(() => !!slots.rightPanel)
+
+watch(notMobile, (isDesktop) => {
+  if (!isDesktop) {
+    mobileMenuOpen.value = false
+  }
+})
+
+const showLeftPanel = computed(() => {
+  const shouldShow = notMobile.value
+    ? isLeftPanelOpen.value
+    : mobileMenuOpen.value
+  return shouldShow
+})
+
+const toggleLeftPanel = () => {
+  if (notMobile.value) {
+    isLeftPanelOpen.value = !isLeftPanelOpen.value
+  } else {
+    mobileMenuOpen.value = !mobileMenuOpen.value
+  }
+}
+
+const toggleRightPanel = () => {
+  isRightPanelOpen.value = !isRightPanelOpen.value
+}
+</script>
+<style scoped>
+.base-widget-layout {
+  height: 80vh;
+  width: 90vw;
+  max-width: 1280px;
+  aspect-ratio: 20/13;
+}
+
+@media (min-width: 1450px) {
+  .base-widget-layout {
+    max-width: 1724px;
+  }
+}
+
+/* Fade transition for buttons */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Slide transition for left panel */
+.slide-panel-enter-active,
+.slide-panel-leave-active {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+  backface-visibility: hidden;
+}
+
+.slide-panel-enter-from,
+.slide-panel-leave-to {
+  transform: translateX(-100%);
+}
+
+/* Slide transition for right panel */
+.slide-panel-right-enter-active,
+.slide-panel-right-leave-active {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+  backface-visibility: hidden;
+}
+
+.slide-panel-right-enter-from,
+.slide-panel-right-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/src/components/custom/widget/nav/NavItem.vue b/src/components/custom/widget/nav/NavItem.vue
new file mode 100644
index 0000000000..fcf628cacc
--- /dev/null
+++ b/src/components/custom/widget/nav/NavItem.vue
@@ -0,0 +1,24 @@
+<template>
+  <div
+    class="flex items-center gap-2 px-4 py-2 text-xs rounded-md transition-colors cursor-pointer"
+    :class="
+      active
+        ? 'bg-neutral-100 dark-theme:bg-zinc-700 text-neutral'
+        : 'text-neutral hover:bg-zinc-100 hover:dark-theme:bg-zinc-700/50'
+    "
+    role="button"
+    @click="onClick"
+  >
+    <i-lucide:folder class="text-xs text-neutral" />
+    <span>
+      <slot></slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { active, onClick } = defineProps<{
+  active?: boolean
+  onClick: () => void
+}>()
+</script>
diff --git a/src/components/custom/widget/nav/NavTitle.vue b/src/components/custom/widget/nav/NavTitle.vue
new file mode 100644
index 0000000000..0ff17a9009
--- /dev/null
+++ b/src/components/custom/widget/nav/NavTitle.vue
@@ -0,0 +1,13 @@
+<template>
+  <h3
+    class="m-0 px-3 py-0 pt-5 text-sm font-bold uppercase text-neutral-400 dark-theme:text-neutral-400"
+  >
+    {{ title }}
+  </h3>
+</template>
+
+<script setup lang="ts">
+const { title } = defineProps<{
+  title: string
+}>()
+</script>
diff --git a/src/components/custom/widget/panel/LeftSidePanel.vue b/src/components/custom/widget/panel/LeftSidePanel.vue
new file mode 100644
index 0000000000..8eeed90bd4
--- /dev/null
+++ b/src/components/custom/widget/panel/LeftSidePanel.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="flex flex-col h-full w-full bg-white dark-theme:bg-zinc-800">
+    <PanelHeader>
+      <template #icon>
+        <slot name="header-icon"></slot>
+      </template>
+      <slot name="header-title"></slot>
+    </PanelHeader>
+
+    <nav class="flex-1 px-3 py-4 flex flex-col gap-2">
+      <template v-for="(item, index) in navItems" :key="index">
+        <div v-if="'items' in item" class="flex flex-col gap-2">
+          <NavTitle :title="item.title" />
+          <NavItem
+            v-for="subItem in item.items"
+            :key="subItem.id"
+            :active="activeItem === subItem.id"
+            @click="activeItem = subItem.id"
+          >
+            {{ subItem.label }}
+          </NavItem>
+        </div>
+        <div v-else class="flex flex-col gap-2">
+          <NavItem
+            :active="activeItem === item.id"
+            @click="activeItem = item.id"
+          >
+            {{ item.label }}
+          </NavItem>
+        </div>
+      </template>
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { NavGroupData, NavItemData } from '@/types/custom_components/navTypes'
+
+import NavItem from '../nav/NavItem.vue'
+import NavTitle from '../nav/NavTitle.vue'
+import PanelHeader from './PanelHeader.vue'
+
+const { navItems = [], modelValue } = defineProps<{
+  navItems?: (NavItemData | NavGroupData)[]
+  modelValue?: string | null
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | null]
+}>()
+
+const getFirstItemId = () => {
+  if (!navItems || navItems.length === 0) {
+    return null
+  }
+
+  const firstEntry = navItems[0]
+
+  if ('items' in firstEntry && firstEntry.items.length > 0) {
+    return firstEntry.items[0].id
+  }
+  if ('id' in firstEntry) {
+    return firstEntry.id
+  }
+
+  return null
+}
+
+const activeItem = computed({
+  get: () => modelValue ?? getFirstItemId(),
+  set: (value: string | null) => emit('update:modelValue', value)
+})
+</script>
diff --git a/src/components/custom/widget/panel/PanelHeader.vue b/src/components/custom/widget/panel/PanelHeader.vue
new file mode 100644
index 0000000000..9f00ed9e75
--- /dev/null
+++ b/src/components/custom/widget/panel/PanelHeader.vue
@@ -0,0 +1,12 @@
+<template>
+  <header class="flex items-center justify-between h-16 px-6">
+    <div class="flex items-center gap-2 pl-1">
+      <slot name="icon">
+        <i-lucide:puzzle class="text-neutral text-base" />
+      </slot>
+      <h2 class="font-bold text-base text-neutral">
+        <slot></slot>
+      </h2>
+    </div>
+  </header>
+</template>
diff --git a/src/components/custom/widget/panel/RightSidePanel.vue b/src/components/custom/widget/panel/RightSidePanel.vue
new file mode 100644
index 0000000000..44e6b79793
--- /dev/null
+++ b/src/components/custom/widget/panel/RightSidePanel.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="w-full h-full pl-4 pr-6 pb-8 bg-white dark-theme:bg-zinc-800">
+    <slot></slot>
+  </div>
+</template>
diff --git a/src/components/dialog/GlobalDialog.vue b/src/components/dialog/GlobalDialog.vue
index bdc3a28bbe..a8b60a60c3 100644
--- a/src/components/dialog/GlobalDialog.vue
+++ b/src/components/dialog/GlobalDialog.vue
@@ -10,14 +10,16 @@
     :aria-labelledby="item.key"
   >
     <template #header>
-      <component
-        :is="item.headerComponent"
-        v-if="item.headerComponent"
-        :id="item.key"
-      />
-      <h3 v-else :id="item.key">
-        {{ item.title || ' ' }}
-      </h3>
+      <div v-if="!item.dialogComponentProps?.headless">
+        <component
+          :is="item.headerComponent"
+          v-if="item.headerComponent"
+          :id="item.key"
+        />
+        <h3 v-else :id="item.key">
+          {{ item.title || ' ' }}
+        </h3>
+      </div>
     </template>
 
     <component
diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index 9162af2c54..dccdbed433 100644
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -1,5 +1,6 @@
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
+import { useModelSelectorDialog } from '@/composables/useModelSelectorDialog'
 import {
   DEFAULT_DARK_COLOR_PALETTE,
   DEFAULT_LIGHT_COLOR_PALETTE
@@ -878,6 +879,17 @@ export function useCoreCommands(): ComfyCommand[] {
           navigationStore.navigationStack.at(-2) ?? canvas.graph.rootGraph
         )
       }
+    },
+    {
+      id: 'Comfy.Dev.ShowModelSelector',
+      icon: 'pi pi-box',
+      label: 'Show Model Selector (Dev)',
+      versionAdded: '1.26.2',
+      category: 'view-controls' as const,
+      function: () => {
+        const modelSelectorDialog = useModelSelectorDialog()
+        modelSelectorDialog.show()
+      }
     }
   ]
 
diff --git a/src/composables/useModelSelectorDialog.ts b/src/composables/useModelSelectorDialog.ts
new file mode 100644
index 0000000000..da8745a01c
--- /dev/null
+++ b/src/composables/useModelSelectorDialog.ts
@@ -0,0 +1,29 @@
+import ModelSelector from '@/components/custom/widget/ModelSelector.vue'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const DIALOG_KEY = 'global-model-selector'
+
+export const useModelSelectorDialog = () => {
+  const dialogService = useDialogService()
+  const dialogStore = useDialogStore()
+
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show() {
+    dialogService.showLayoutDialog({
+      key: DIALOG_KEY,
+      component: ModelSelector,
+      props: {
+        onClose: hide
+      }
+    })
+  }
+
+  return {
+    show,
+    hide
+  }
+}
diff --git a/src/locales/ar/commands.json b/src/locales/ar/commands.json
index 9bb5923087..760d0a1780 100644
--- a/src/locales/ar/commands.json
+++ b/src/locales/ar/commands.json
@@ -107,6 +107,9 @@
   "Comfy_ContactSupport": {
     "label": "الاتصال بالدعم"
   },
+  "Comfy_Dev_ShowModelSelector": {
+    "label": "إظهار منتقي النماذج (للمطورين)"
+  },
   "Comfy_DuplicateWorkflow": {
     "label": "تكرار سير العمل الحالي"
   },
diff --git a/src/locales/ar/main.json b/src/locales/ar/main.json
index 44c430c3d1..c55a6de5b7 100644
--- a/src/locales/ar/main.json
+++ b/src/locales/ar/main.json
@@ -840,6 +840,7 @@
     "Save": "حفظ",
     "Save As": "حفظ باسم",
     "Show Keybindings Dialog": "عرض مربع حوار اختصارات لوحة المفاتيح",
+    "Show Model Selector (Dev)": "إظهار منتقي النماذج (للمطورين)",
     "Show Settings Dialog": "عرض نافذة الإعدادات",
     "Sign Out": "تسجيل خروج",
     "Toggle Essential Bottom Panel": "تبديل اللوحة السفلية الأساسية",
diff --git a/src/locales/en/commands.json b/src/locales/en/commands.json
index 2945d7ba24..5b0d9c445a 100644
--- a/src/locales/en/commands.json
+++ b/src/locales/en/commands.json
@@ -107,6 +107,9 @@
   "Comfy_ContactSupport": {
     "label": "Contact Support"
   },
+  "Comfy_Dev_ShowModelSelector": {
+    "label": "Show Model Selector (Dev)"
+  },
   "Comfy_DuplicateWorkflow": {
     "label": "Duplicate Current Workflow"
   },
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 7bac7e521d..b4c2537082 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -980,6 +980,7 @@
     "Clear Pending Tasks": "Clear Pending Tasks",
     "Clear Workflow": "Clear Workflow",
     "Contact Support": "Contact Support",
+    "Show Model Selector (Dev)": "Show Model Selector (Dev)",
     "Duplicate Current Workflow": "Duplicate Current Workflow",
     "Export": "Export",
     "Export (API)": "Export (API)",
diff --git a/src/locales/es/commands.json b/src/locales/es/commands.json
index 55e903e228..580515847e 100644
--- a/src/locales/es/commands.json
+++ b/src/locales/es/commands.json
@@ -107,6 +107,9 @@
   "Comfy_ContactSupport": {
     "label": "Contactar soporte"
   },
+  "Comfy_Dev_ShowModelSelector": {
+    "label": "Mostrar selector de modelo (Dev)"
+  },
   "Comfy_DuplicateWorkflow": {
     "label": "Duplicar flujo de trabajo actual"
   },
diff --git a/src/locales/es/main.json b/src/locales/es/main.json
index 131c85f7a6..e056b0afb3 100644
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -840,6 +840,7 @@
     "Save": "Guardar",
     "Save As": "Guardar como",
     "Show Keybindings Dialog": "Mostrar diálogo de combinaciones de teclas",
+    "Show Model Selector (Dev)": "Mostrar selector de modelo (Desarrollo)",
     "Show Settings Dialog": "Mostrar diálogo de configuración",
     "Sign Out": "Cerrar sesión",
     "Toggle Essential Bottom Panel": "Alternar panel inferior esencial",
diff --git a/src/locales/fr/commands.json b/src/locales/fr/commands.json
index c530334819..69a9f4fc32 100644
--- a/src/locales/fr/commands.json
+++ b/src/locales/fr/commands.json
@@ -107,6 +107,9 @@
   "Comfy_ContactSupport": {
     "label": "Contacter le support"
   },
+  "Comfy_Dev_ShowModelSelector": {
+    "label": "Afficher le sélecteur de modèle (Dev)"
+  },
   "Comfy_DuplicateWorkflow": {
     "label": "Dupliquer le flux de travail actuel"
   },
diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json
index ea6795d1ea..1859dd367d 100644
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -840,6 +840,7 @@
     "Save": "Enregistrer",
     "Save As": "Enregistrer sous",
     "Show Keybindings Dialog": "Afficher la boîte de dialogue des raccourcis clavier",
+    "Show Model Selector (Dev)": "Afficher le sélecteur de modèle (Dev)",
     "Show Settings Dialog": "Afficher la boîte de dialogue des paramètres",
     "Sign Out": "Se déconnecter",
     "Toggle Essential Bottom Panel": "Afficher/Masquer le panneau inférieur essentiel",
diff --git a/src/locales/ja/commands.json b/src/locales/ja/commands.json
index 5464260b55..caaf7732d0 100644
--- a/src/locales/ja/commands.json
+++ b/src/locales/ja/commands.json
@@ -107,6 +107,9 @@
   "Comfy_ContactSupport": {
     "label": "サポートに連絡"
   },
+  "Comfy_Dev_ShowModelSelector": {
+    "label": "モデルセレクターを表示（開発用）"
+  },
   "Comfy_DuplicateWorkflow": {
     "label": "現在のワークフローを複製"
   },
diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json
index d6c2bb9dba..3d1cbc3993 100644
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -840,6 +840,7 @@
     "Save": "保存",
     "Save As": "名前を付けて保存",
     "Show Keybindings Dialog": "キーバインドダイアログを表示",
+    "Show Model Selector (Dev)": "モデルセレクターを表示（開発用）",
     "Show Settings Dialog": "設定ダイアログを表示",
     "Sign Out": "サインアウト",
     "Toggle Essential Bottom Panel": "エッセンシャル下部パネルの切り替え",
diff --git a/src/locales/ko/commands.json b/src/locales/ko/commands.json
index ab83464986..7105cd8212 100644
--- a/src/locales/ko/commands.json
+++ b/src/locales/ko/commands.json
@@ -107,6 +107,9 @@
   "Comfy_ContactSupport": {
     "label": "지원팀에 문의하기"
   },
+  "Comfy_Dev_ShowModelSelector": {
+    "label": "모델 선택기 표시 (개발자용)"
+  },
   "Comfy_DuplicateWorkflow": {
     "label": "현재 워크플로 복제"
   },
diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json
index 81422e08c8..672fad4fca 100644
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -839,7 +839,8 @@
     "Restart": "재시작",
     "Save": "저장",
     "Save As": "다른 이름으로 저장",
-    "Show Keybindings Dialog": "키 바인딩 대화상자 표시",
+    "Show Keybindings Dialog": "단축키 대화상자 표시",
+    "Show Model Selector (Dev)": "모델 선택기 표시 (개발자용)",
     "Show Settings Dialog": "설정 대화상자 표시",
     "Sign Out": "로그아웃",
     "Toggle Essential Bottom Panel": "필수 하단 패널 전환",
diff --git a/src/locales/ru/commands.json b/src/locales/ru/commands.json
index f43032963a..fa3927190b 100644
--- a/src/locales/ru/commands.json
+++ b/src/locales/ru/commands.json
@@ -107,6 +107,9 @@
   "Comfy_ContactSupport": {
     "label": "Связаться с поддержкой"
   },
+  "Comfy_Dev_ShowModelSelector": {
+    "label": "Показать выбор модели (Dev)"
+  },
   "Comfy_DuplicateWorkflow": {
     "label": "Дублировать текущий рабочий процесс"
   },
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index 2fd0a228dd..b5df49c07a 100644
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -840,6 +840,7 @@
     "Save": "Сохранить",
     "Save As": "Сохранить как",
     "Show Keybindings Dialog": "Показать диалог клавиш быстрого доступа",
+    "Show Model Selector (Dev)": "Показать выбор модели (Dev)",
     "Show Settings Dialog": "Показать диалог настроек",
     "Sign Out": "Выйти",
     "Toggle Essential Bottom Panel": "Показать/скрыть основную нижнюю панель",
diff --git a/src/locales/zh-TW/commands.json b/src/locales/zh-TW/commands.json
index 01a790f1fc..71d1907b6f 100644
--- a/src/locales/zh-TW/commands.json
+++ b/src/locales/zh-TW/commands.json
@@ -107,6 +107,9 @@
   "Comfy_ContactSupport": {
     "label": "聯絡支援"
   },
+  "Comfy_Dev_ShowModelSelector": {
+    "label": "顯示模型選擇器（開發）"
+  },
   "Comfy_DuplicateWorkflow": {
     "label": "複製目前工作流程"
   },
diff --git a/src/locales/zh-TW/main.json b/src/locales/zh-TW/main.json
index 31d0f9412d..3e9a2350c7 100644
--- a/src/locales/zh-TW/main.json
+++ b/src/locales/zh-TW/main.json
@@ -840,6 +840,7 @@
     "Save": "儲存",
     "Save As": "另存新檔",
     "Show Keybindings Dialog": "顯示快捷鍵對話框",
+    "Show Model Selector (Dev)": "顯示模型選擇器（開發用）",
     "Show Settings Dialog": "顯示設定對話框",
     "Sign Out": "登出",
     "Toggle Essential Bottom Panel": "切換基本下方面板",
diff --git a/src/locales/zh/commands.json b/src/locales/zh/commands.json
index 8a0a1b897c..a42111c547 100644
--- a/src/locales/zh/commands.json
+++ b/src/locales/zh/commands.json
@@ -107,6 +107,9 @@
   "Comfy_ContactSupport": {
     "label": "联系支持"
   },
+  "Comfy_Dev_ShowModelSelector": {
+    "label": "顯示模型選擇器（開發）"
+  },
   "Comfy_DuplicateWorkflow": {
     "label": "复制当前工作流"
   },
diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json
index 3efab33570..6c678c651a 100644
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -839,7 +839,8 @@
     "Restart": "重启",
     "Save": "保存",
     "Save As": "另存为",
-    "Show Keybindings Dialog": "显示快捷键对话框",
+    "Show Keybindings Dialog": "顯示快捷鍵對話框",
+    "Show Model Selector (Dev)": "顯示模型選擇器（開發用）",
     "Show Settings Dialog": "显示设置对话框",
     "Sign Out": "退出登录",
     "Toggle Essential Bottom Panel": "切换基础底部面板",
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index 9b9c577a96..890caa6f97 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -1,3 +1,6 @@
+import { merge } from 'es-toolkit/compat'
+import { Component } from 'vue'
+
 import ApiNodesSignInContent from '@/components/dialog/content/ApiNodesSignInContent.vue'
 import ConfirmationDialogContent from '@/components/dialog/content/ConfirmationDialogContent.vue'
 import ErrorDialogContent from '@/components/dialog/content/ErrorDialogContent.vue'
@@ -20,7 +23,11 @@ import TemplateWorkflowsContent from '@/components/templates/TemplateWorkflowsCo
 import TemplateWorkflowsDialogHeader from '@/components/templates/TemplateWorkflowsDialogHeader.vue'
 import { t } from '@/i18n'
 import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
-import { type ShowDialogOptions, useDialogStore } from '@/stores/dialogStore'
+import {
+  type DialogComponentProps,
+  type ShowDialogOptions,
+  useDialogStore
+} from '@/stores/dialogStore'
 
 export type ConfirmationDialogType =
   | 'default'
@@ -424,6 +431,33 @@ export const useDialogService = () => {
     }
   }
 
+  function showLayoutDialog(options: {
+    key: string
+    component: Component
+    props: { onClose: () => void }
+    dialogComponentProps?: DialogComponentProps
+  }) {
+    const layoutDefaultProps: DialogComponentProps = {
+      headless: true,
+      unstyled: true,
+      modal: true,
+      closable: false,
+      pt: {
+        mask: {
+          class: 'bg-black bg-opacity-40'
+        }
+      }
+    }
+
+    return dialogStore.showDialog({
+      ...options,
+      dialogComponentProps: merge(
+        layoutDefaultProps,
+        options.dialogComponentProps || {}
+      )
+    })
+  }
+
   return {
     showLoadWorkflowWarning,
     showMissingModelsWarning,
@@ -443,6 +477,7 @@ export const useDialogService = () => {
     prompt,
     confirm,
     toggleManagerDialog,
-    toggleManagerProgressDialog
+    toggleManagerProgressDialog,
+    showLayoutDialog
   }
 }
diff --git a/src/stores/dialogStore.ts b/src/stores/dialogStore.ts
index 09b9179ed9..1b1ee14c5d 100644
--- a/src/stores/dialogStore.ts
+++ b/src/stores/dialogStore.ts
@@ -28,9 +28,11 @@ interface CustomDialogComponentProps {
   pt?: DialogPassThroughOptions
   closeOnEscape?: boolean
   dismissableMask?: boolean
+  unstyled?: boolean
+  headless?: boolean
 }
 
-type DialogComponentProps = InstanceType<typeof GlobalDialog>['$props'] &
+export type DialogComponentProps = InstanceType<typeof GlobalDialog>['$props'] &
   CustomDialogComponentProps
 
 interface DialogInstance {
diff --git a/src/types/custom_components/index.d.ts b/src/types/custom_components/index.d.ts
new file mode 100644
index 0000000000..7001781191
--- /dev/null
+++ b/src/types/custom_components/index.d.ts
@@ -0,0 +1,2 @@
+export * from './navTypes'
+export * from './widgetTypes'
diff --git a/src/types/custom_components/navTypes.ts b/src/types/custom_components/navTypes.ts
new file mode 100644
index 0000000000..785faedb49
--- /dev/null
+++ b/src/types/custom_components/navTypes.ts
@@ -0,0 +1,9 @@
+export interface NavItemData {
+  id: string
+  label: string
+}
+
+export interface NavGroupData {
+  title: string
+  items: NavItemData[]
+}
diff --git a/src/types/custom_components/widgetTypes.ts b/src/types/custom_components/widgetTypes.ts
new file mode 100644
index 0000000000..28d4bb15b6
--- /dev/null
+++ b/src/types/custom_components/widgetTypes.ts
@@ -0,0 +1,3 @@
+import { InjectionKey } from 'vue'
+
+export const OnCloseKey: InjectionKey<() => void> = Symbol()
diff --git a/tailwind.config.js b/tailwind.config.js
index 598163bb6b..5ac89e5538 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -79,14 +79,14 @@ export default {
       colors: {
         zinc: {
           50: '#fafafa',
-          100: '#f4f4f5',
+          100: '#8282821a',
           200: '#e4e4e7',
           300: '#d4d4d8',
           400: '#a1a1aa',
           500: '#71717a',
           600: '#52525b',
-          700: '#3f3f46',
-          800: '#27272a',
+          700: '#38393b',
+          800: '#262729',
           900: '#18181b',
           950: '#09090b'
         },