mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-07-17 01:07:56 +00:00
a931acadd3
## Summary Phase 3 of the dialog migration. Closes the parity gaps in the Reka renderer (maximize affordance, headless layout mode, overlay-class plumbing), then flips `useSettingsDialog` onto the Reka path. Public API of `useDialogService` / `dialogStore` is unchanged. Parent: [FE-571](https://linear.app/comfyorg/issue/FE-571/dialog-system-migration-primevue-reka-ui-parent) This phase: [FE-575](https://linear.app/comfyorg/issue/FE-575/phase-3-migrate-settings-dialog-workspace-non-workspace-designer) Predecessors: #11719 (Phase 0, merged), #12041 (Phase 1, merged), #12109 (Phase 2, **stacked PR base**) > **Stacked on Phase 2**: this PR targets `jaewon/dialog-reka-migration-phase-2`. Rebase onto `main` after #12109 lands. ## Changes ### Reka primitives — parity gaps closed | File | Change | | --- | --- | | `src/components/ui/dialog/dialog.variants.ts` | New `maximized` variant. `false` keeps the centered/sized layout; `true` switches to `inset-2 top-2 left-2 size-auto max-h-none max-w-none sm:max-w-none` for full-screen mode | | `src/components/ui/dialog/DialogContent.vue` | Accepts `maximized` prop, forwards to variants | | `src/components/ui/dialog/DialogMaximize.vue` **(new)** | Icon-only button toggling `lucide--maximize-2` / `lucide--minimize-2`; emits `toggle`; uses `g.maximizeDialog` / `g.restoreDialog` i18n | | `src/stores/dialogStore.ts` | Adds `overlayClass?: HTMLAttributes['class']` to `CustomDialogComponentProps` (Reka-only; PrimeVue path uses `pt.mask`) | | `src/components/dialog/GlobalDialog.vue` | (a) Forwards `overlayClass` to `DialogOverlay`; (b) passes `:maximized` to `DialogContent`; (c) renders `DialogMaximize` in the header when `maximizable`, wired to a local `toggleMaximize`; (d) when `headless: true`, skips the inner `flex-1 overflow-auto px-4 py-2` wrapper so layout dialogs control their own chrome | ### Settings flip | File | Change | | --- | --- | | `src/platform/settings/composables/useSettingsDialog.ts` | Adds `dialogComponentProps: { renderer: 'reka', size: 'full', contentClass: '\<...\>', overlayClass }`. `contentClass` is `w-[90vw] max-w-[960px] sm:max-w-[960px] h-[80vh] max-h-none rounded-2xl overflow-hidden` — matches the previous `BaseModalLayout size="sm"` (960px × 80vh). `overlayClass: 'p-8'` only when `isCloud && teamWorkspacesEnabled` (preserves the workspace breathing-room contract) | | `src/components/dialog/GlobalDialog.vue` | Drops the now-dead `getDialogPt` workspace special case and the orphan `.settings-dialog-workspace` CSS. Removes unused imports (`merge`, `computed`, `useFeatureFlags`, `isCloud`, `DialogPassThroughOptions`) | ### Tests - `src/platform/settings/composables/useSettingsDialog.test.ts` **(new)** — 5 tests: renderer flip + sizing, workspace `overlayClass` toggle, panel forwarding, `showAbout()` ## Quality gates - [x] `pnpm typecheck` — clean - [x] `pnpm lint` — 0 errors (3 pre-existing warnings unrelated to this PR) - [x] `pnpm format` — applied - [x] `pnpm test:unit` (touched + adjacent areas): - `useSettingsDialog.test.ts` — 5/5 - `dialogService.renderer.test.ts` — 5/5 - `GlobalDialog.test.ts` — 9/9 - All `src/components/dialog/` — 73/73 - All `src/platform/settings/` — 75/75 - `CustomizationDialog.test.ts` — 4/4 - [ ] CI Playwright matrix - [ ] Manual verification on a backend ## Screenshots End-to-end verification of the Reka flip on a local dev server: | | | | --- | --- | | Settings dialog rendered via Reka (non-modal, focus stays in dialog body) |  | | Keybinding panel inside the Reka Settings dialog |  | | Nested PrimeVue **Modify keybinding** dialog stacked on top — `document.activeElement` is the `<input autofocus>`, proving the focus-trap fix |  | ## Public API impact None. `useSettingsDialog().show()` keeps the same signature. Reka primitives gain optional `maximized` prop and `overlayClass` field — additive, non-breaking. ## Out of scope (later phases) - Manager dialog — Phase 4 (FE-576) — will consume the new `maximizable` affordance - `ConfirmDialog` callers — Phase 5 (FE-577) - Removing PrimeVue `Dialog`/`<style>` overrides in `GlobalDialog.vue` — Phase 6 (FE-578) ## Review focus 1. **Sizing strategy** — `contentClass` overrides Reka's default content sizing (matching the existing `BaseModalLayout size="sm"` of 960 × 80vh). Worth a designer pass per FE-575's acceptance criteria. 2. **`overlayClass: 'p-8'` workspace mode** — Reka's `DialogContent` is positioned with viewport coordinates, so overlay padding does not constrain it the way the old PrimeVue `mask.p-8` did. Cosmetic gutter only. If designer flags missing breathing room, follow-up by shrinking `contentClass` in workspace mode. 3. **`headless: true` semantics for Reka** — now skips the inner padding wrapper. Existing migrated dialogs (Phases 1–2) all set a header, so no visible impact. The Reka-headless path is new with this PR. 4. **Maximize wiring** — `toggleMaximize` mutates `item.dialogComponentProps.maximized` directly (Pinia deep-reactive proxy). The store's `onMaximize` / `onUnmaximize` callbacks are still wired for the PrimeVue path; not double-fired. ## Test plan - [x] Unit: 102/102 across touched + adjacent areas - [ ] CI: full Vitest + Playwright matrix - [ ] Manual on a backend: - Open Settings via gear icon / keyboard shortcut → renders through Reka, search works, panel navigation works, ESC closes - Open Settings → trigger a reset confirmation (stacked confirm) → confirm renders above Settings, ESC closes only the confirm - Cloud workspace mode: Settings opens with workspace panel; `overlayClass` applied - Cloud non-workspace mode: Settings opens without workspace panel; no `overlayClass` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-12182-feat-dialog-migrate-Settings-dialog-to-Reka-UI-Phase-3-35e6d73d36508144bb4af88f83c5ab20) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: GitHub Action <action@github.com>
