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:
Developer
2026-06-13 22:04:17 +00:00
parent 35f0a3ea2e
commit 98d4393387
29 changed files with 1135 additions and 337 deletions
@@ -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.