Repository navigation
feat(ui): redesign phase 1 — tokens, app shell, header stepper, status bar - #26
Merged
Merged
Conversation
…s bar First step of the Claude Design handoff (docs/redesign/HANDOFF.md §12): - New design tokens (dark-first, light via data-theme on <html>) with IBM Plex bundled locally and Lucide icons; the dashed Dash-era panels are gone and buttons follow the primary/secondary/ghost/selected system. - AppShell: header, canvas column, Inspector, log drawer, status bar. - AppHeader with the 7-step WorkflowStepper (done/current/todo), undo/redo for the selected slice, theme, Settings and the primary Export action. - Inspector hosts the pre-redesign tab bodies per step until each step gets its own panel; Settings shows the Configuration panel. - StatusBar: running job + progress, latest message, image size, log toggle. LogDrawer holds the whole log. - New projects take on the theme on screen; after an upload's depth map is ready the workflow moves to Slices. - e2e driver maps the former tabs onto steps/Settings; image waits no longer require the image to be on screen. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Session workflow completion state can become incorrect across project uploads and navigateCamera() can mark Preview as done even without an active project.
Review effort: Lite
Findings: 2
Open (2)
What changed in this PR
Implements phase 1 of the Svelte UI redesign by introducing a new token-based visual system and a new app shell (header stepper + inspector + status/log), while temporarily reusing the pre-redesign tab bodies inside the new Inspector.
Changes:
- Introduces new redesign layout components (
AppShell,AppHeader,WorkflowStepper,Inspector,StatusBar,LogDrawer) and removes the old header/tabs/footer/log panel shell. - Updates workflow + UI state for step navigation, dark-first theming via
data-theme, and session-tracked workflow completion flags. - Updates unit tests and Playwright e2e helpers/driver to match the new shell and behavior (including depth completion advancing to Slices).
| File | Description |
|---|---|
| frontend/src/lib/workflow.ts | Preserves theme on new project upload, advances to Slices after depth, and marks session workflow completion (preview/inpaint/export). |
| frontend/src/lib/workflow.test.ts | Updates workflow tests for new UI store reset behavior and post-depth step advancement. |
| frontend/src/lib/state/ui.svelte.ts | Adds workflow step state, session completion flags, log drawer state, and dark-first default theme. |
| frontend/src/lib/state/logs.svelte.ts | Removes last3 helper and updates comments for the new log drawer. |
| frontend/src/lib/components/shell/WorkflowStepper.svelte | Adds the 7-step workflow stepper UI and “done/current/todo” states. |
| frontend/src/lib/components/shell/StatusBar.svelte | Adds the redesigned status bar with latest message, image size, and log toggle. |
| frontend/src/lib/components/shell/Shell.test.ts | Adds tests covering the new shell: stepper navigation, settings/export behavior, undo, and log drawer/status bar. |
| frontend/src/lib/components/shell/MainTabs.svelte | Removes the legacy workflow tab strip component. |
| frontend/src/lib/components/shell/LogPanel.svelte | Removes the legacy 3-line log panel component. |
| frontend/src/lib/components/shell/LogDrawer.svelte | Adds a scrollable full log drawer that stays mounted for e2e visibility. |
| frontend/src/lib/components/shell/Inspector.svelte | Adds the new Inspector column hosting the legacy tab bodies per-step. |
| frontend/src/lib/components/shell/Header.svelte | Removes the legacy header component. |
| frontend/src/lib/components/shell/Footer.svelte | Removes the legacy footer component. |
| frontend/src/lib/components/shell/AppShell.svelte | Adds the new top-level app layout shell (header/main/log drawer/status). |
| frontend/src/lib/components/shell/AppHeader.svelte | Adds redesigned header actions and integrates the workflow stepper. |
| frontend/src/lib/components/shell/ActivityIndicator.svelte | Refactors activity indicator markup/styles to match new header/status usage. |
| frontend/src/App.test.ts | Updates app tests for the new shell structure and data-theme behavior. |
| frontend/src/App.svelte | Switches to AppShell and applies theme via <html data-theme=…>. |
| frontend/src/app.css | Replaces legacy palette with redesign tokens, typography, and component utility styles. |
| frontend/package.json | Adds local IBM Plex font packages and Lucide Svelte icons. |
| frontend/package-lock.json | Lockfile updates for added font/icon dependencies. |
| e2e/helpers/image.ts | Updates waitForImage to wait for decode without requiring on-screen visibility. |
| e2e/drivers/svelte.ts | Remaps driver “tabs” to redesigned stepper/settings and updates theme assertion. |
| docs/redesign/tokens.css | Adds design-token source file for the redesign. |
| docs/redesign/prototype/Prototype.dc.html | Adds the design-canvas prototype source used as implementation reference. |
| docs/redesign/HANDOFF.md | Adds the redesign implementation handoff document and phase plan. |
Files not reviewed (1)
- frontend/package-lock.json: Generated file
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+43
to
48
| let view = await api.createProject(file); | ||
| projectId = view.id; | ||
| // A new project keeps the theme the user is already looking at. | ||
| const dark = uiStore.theme === 'dark'; | ||
| if (view.settings.darkMode !== dark) view = await api.updateSettings(view.id, { darkMode: dark }); | ||
| projectStore.applyView(view); |
Owner
Author
There was a problem hiding this comment.
Fixed: a new upload now calls uiStore.resetSession(), which clears the Inpaint/Preview/Export progress and returns to the Image step. Restoring a project clears the progress too. A test covers it.
Comment on lines
292
to
295
| export async function navigateCamera(direction: api.CameraDirection): Promise<void> { | ||
| uiStore.markPreviewed(); | ||
| await runSliceMutation('navigate', (id) => api.navigateCamera(id, direction)); | ||
| } |
Owner
Author
There was a problem hiding this comment.
Fixed: runSliceMutation now reports success, and navigateCamera marks Preview only after a successful move. With no project, or when the call fails, Preview isn't marked. A test covers it.
…on a real move - A new upload clears this session's Inpaint/Preview/Export progress and starts over at the Image step; restoring a project clears the progress. - navigateCamera marks Preview done only after a successful camera move (runSliceMutation now reports success). 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 1 of the UI redesign from the Claude Design handoff (docs/redesign/HANDOFF.md, §12 step 1). The handoff docs are included in this PR.
What changes
docs/redesign/tokens.css: dark-first, with light mode viadata-themeon<html>.AppShell):AppHeader: logo and project name, the 7-stepWorkflowStepper, undo/redo for the selected slice, theme toggle, Settings, and Export… as the primary action.WorkflowStepper:StatusBar/LogDrawer:Tests
Shell.test.tscovers stepper states and navigation, Settings toggling, Export enablement, header undo, status bar and log drawer.data-theme, the dark default, the new project inheriting the theme, and the move to Slices.waitForImagehelper now waits for a decoded image instead of an on-screen one, because the depth map now lives in a panel that isn't always showing.Next: phase 2, the
LayerPanelwithDepthRuler.🤖 Generated with Claude Code