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
1.5 KiB
1.5 KiB
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
ConfigProfilesMobileViewso 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
ConfigProfilesPageto pass the required state and callbacks. - Update
useConfigProfilessohandleSubmitreturns 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 typecheckandnpm run lintpass inapps/web.
Out of Scope
- Backend API changes.
- Changes to other pages.
- New features beyond existing desktop capabilities.