Developer
98d4393387
- Rewrite ConfigProfilesMobileView to match desktop functionality: full detail view with all fields, preview action showing resolved profile, and edit view with project/tool selects, includes, environment variables, runtime hints, files, mounts with nested files, and git mounts. - Update useConfigProfiles.handleSubmit to return boolean success. - Update ConfigProfilesPage to pass required state and callbacks. - Add mobile-specific CSS for config profile forms, includes, mount/file cards, and preview panels. - Allow MobileDetailView to render extra children. Quality gates: npm run typecheck, npm run lint, npm test -- --run (87 passed) Refs: openspec/changes/mobile-config-profiles-ui
35 lines
1.5 KiB
Markdown
35 lines
1.5 KiB
Markdown
# Mobile Config Profiles UI Rework
|
|
|
|
## Goal
|
|
|
|
Redesign the mobile **Config Profiles** detail ("preview") and edit pages to match the full desktop functionality, following the same mobile UX pattern used for the Tool Workshop.
|
|
|
|
## Scope
|
|
|
|
- Rewrite `ConfigProfilesMobileView` so the detail view displays all profile fields and supports resolving/previewing the profile.
|
|
- Rewrite the mobile edit view to expose every field available on the desktop editor:
|
|
- name, description, project, tool type, default flag
|
|
- includes with add/remove/reorder
|
|
- environment variables
|
|
- runtime hints
|
|
- files
|
|
- mounts with nested files
|
|
- git mounts
|
|
- Update `ConfigProfilesPage` to pass the required state and callbacks.
|
|
- Update `useConfigProfiles` so `handleSubmit` returns success status for cleaner mobile navigation.
|
|
- Add mobile-specific CSS for config profile forms.
|
|
|
|
## Acceptance Criteria
|
|
|
|
- On viewports narrower than 768 px, the Config Profiles page renders a mobile-friendly list/detail/edit flow.
|
|
- The mobile detail view shows all profile fields and offers a Preview action that displays the resolved profile.
|
|
- The mobile edit view supports all desktop fields, including includes, runtime hints, files, mounts, nested mount files, and git mounts.
|
|
- All existing desktop functionality remains intact.
|
|
- `npm run typecheck` and `npm run lint` pass in `apps/web`.
|
|
|
|
## Out of Scope
|
|
|
|
- Backend API changes.
|
|
- Changes to other pages.
|
|
- New features beyond existing desktop capabilities.
|