feat: redesign mobile Config Profiles detail, preview, and edit pages
- 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
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
# 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.
|
||||
@@ -0,0 +1,10 @@
|
||||
# Tasks: Mobile Config Profiles UI Rework
|
||||
|
||||
- [x] Inspect existing ConfigProfilesMobileView, desktop editor, hook, and page.
|
||||
- [x] Update `useConfigProfiles.handleSubmit` to return boolean success.
|
||||
- [x] Rewrite `ConfigProfilesMobileView` detail view with full field display and preview action.
|
||||
- [x] Rewrite `ConfigProfilesMobileView` edit view with all desktop fields (includes, env vars, runtime hints, files, mounts, git mounts).
|
||||
- [x] Update `ConfigProfilesPage` to pass required props to mobile view.
|
||||
- [x] Add responsive CSS for config profile mobile forms.
|
||||
- [x] Run `npm run typecheck` and `npm run lint` in `apps/web` and fix issues.
|
||||
- [x] Update project maps for changed files.
|
||||
Reference in New Issue
Block a user