Repository navigation
feat(ui): redesign phase 6a — Export, Settings and Shortcuts dialogs, keyboard shortcuts - #31
Merged
Merged
Conversation
… keyboard shortcuts - Export dialog (Export step, header Export, Ctrl+E): 3D scene pane with camera mirrored from Preview, displacement, depth of field, ground summary with Edit, upscale, Create scene / Download glTF, View in 3D; Animation pane with frames and Render. - Settings dialog (gear, Ctrl+,): Inpainting, Depth, Masks, Slicing, Project and Appearance sections with a jump nav; loading a state file closes it. - Shortcuts dialog (?) and the HANDOFF section 6 shortcuts, handled on the app root and ignored in text fields (Ctrl+Enter still generates from the prompts). Delete stays scoped to the layer list. - Dialogs are native modal <dialog>s that stay mounted, so their values are always readable; existing test ids are kept. - e2e driver: Export/Configuration map to the dialogs; it closes dialogs before touching the workspace. - Drop the unused help tooltips; the composite canvas layer's test id no longer collides with the Composite view tab. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Copilot review overview
🟢 Approval recommended
The dialog-driven UI/state refactor is consistently applied across components, tests, and the e2e driver, with only a minor shortcuts-label wording nit noted.
Review effort: Lite
Findings: 1
Open (1)
What changed in this PR
Implements phase 6a of the redesign by moving Export/Settings/Shortcuts into native modal <dialog> components, centralizing keyboard shortcut handling at the app shell root, and updating UI state + tests/e2e driver to match the new interaction model.
Changes:
- Replaces the former Inspector “Export” / “Configuration” panels with always-mounted modal dialogs (ExportDialog, SettingsDialog, ShortcutsDialog) driven by
uiStore.dialog. - Adds an app-root keyboard shortcut handler (
lib/shortcuts.ts) and wires Inpaint-specific actions viaregisterInpaintActions. - Updates unit tests and the Playwright Svelte UiDriver to open/close dialogs and keep scenarios frontend-neutral.
| File | Description |
|---|---|
| frontend/src/lib/state/ui.svelte.ts | Refactors UI state to add dialog + settings section state; removes Export/Configuration from MainTab. |
| frontend/src/lib/state/ui.svelte.test.ts | Updates and extends store tests for dialog behavior and Export step semantics. |
| frontend/src/lib/shortcuts.ts | Adds centralized keyboard shortcut handling and a shortcuts list for the dialog. |
| frontend/src/lib/shortcuts.test.ts | Adds comprehensive shortcut behavior tests (modifiers, text-field exclusions, dialog gating). |
| frontend/src/lib/helpTexts.ts | Removes unused legacy contextual help text constants. |
| frontend/src/lib/components/upload/InputImagePanel.svelte | Updates composite layer test id and routes empty-state “load project” to Settings dialog section. |
| frontend/src/lib/components/shell/Shell.test.ts | Adjusts shell tests for dialogs (Export/Settings) instead of Inspector tabs. |
| frontend/src/lib/components/shell/Inspector.svelte | Removes Export/Configuration panels from the Inspector; keeps only step panels. |
| frontend/src/lib/components/shell/AppShell.svelte | Mounts dialogs at the root and attaches keydown handling to the app container. |
| frontend/src/lib/components/shell/AppHeader.svelte | Switches Settings/Export header actions to open dialogs (with shortcut hints). |
| frontend/src/lib/components/shared/HelpTooltip.test.ts | Removes tests for the deleted HelpTooltip component. |
| frontend/src/lib/components/shared/HelpTooltip.svelte | Removes the (now-unused) HelpTooltip component implementation. |
| frontend/src/lib/components/shared/Dialog.test.ts | Adds tests for the shared native <dialog> wrapper behavior (open/close/backdrop/etc). |
| frontend/src/lib/components/shared/Dialog.svelte | Introduces a reusable native <dialog> wrapper tied to uiStore.dialog. |
| frontend/src/lib/components/inpainting/InpaintPanel.svelte | Registers inpaint shortcut actions and routes “Model settings” to the Settings dialog. |
| frontend/src/lib/components/export/ExportTab.svelte | Removes the old Export Inspector panel component. |
| frontend/src/lib/components/dialogs/ShortcutsDialog.test.ts | Adds tests validating dialog open behavior and shortcut list rendering. |
| frontend/src/lib/components/dialogs/ShortcutsDialog.svelte | Adds the shortcuts dialog UI, rendering SHORTCUTS. |
| frontend/src/lib/components/dialogs/SettingsDialog.test.ts | Adds tests for Settings dialog behavior, section nav, probes, persistence, and restore-close behavior. |
| frontend/src/lib/components/dialogs/SettingsDialog.svelte | Implements the Settings dialog UI + section nav and wiring to workflow actions. |
| frontend/src/lib/components/dialogs/ExportDialog.test.ts | Updates/expands export tests for dialog layout (tabs), camera draft mirroring, and “View in 3D”. |
| frontend/src/lib/components/dialogs/ExportDialog.svelte | Implements the Export dialog (3D scene + animation panes) and workflow hooks. |
| frontend/src/lib/components/config/ConfigurationTab.test.ts | Removes tests for the deleted ConfigurationTab panel. |
| frontend/src/lib/components/config/ConfigurationTab.svelte | Removes the old Configuration Inspector panel component. |
| e2e/drivers/svelte.ts | Updates the UiDriver to open Export/Settings as dialogs and close dialogs before workspace interactions. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| { keys: 'Ctrl+Enter', action: 'Generate candidates' }, | ||
| { keys: '1 2 3', action: 'Pick candidate' }, | ||
| { keys: 'A', action: 'Apply picked candidate' }, | ||
| { keys: 'I M L C', action: 'View: Input, depth Map, sLice, Composite' }, |
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Phase 6 (first half) of the Claude Design handoff (
docs/redesign/HANDOFF.md§3, §6, §8).?) and the §6 shortcuts, handled on the app root:<dialog>s that stay mounted, so their controls always exist. All existing test ids are kept, and the mirrored controls use new ids.openTab('Export' | 'Configuration')opens the dialogs, the driver closes any dialog (Esc) before touching the workspace, and sliders/buttons inside the Export dialog open it on the right pane. The scenarios are unchanged.view-composite.Still to come in 6b: toasts, job cards and job cancel (backend), the model-download detail line, the narrower Inspector, and removing the legacy CSS aliases.
Tests: vitest 373 passing,
svelte-checkclean, e2e 46/46 locally.🤖 Generated with Claude Code