feat: mobile edit-as-default with sticky save/delete actions
- Update MobileEditView to render Save and optional Delete in a sticky bottom action bar; header now shows Cancel + title only. - Make ConfigProfilesMobileView open edit view on profile tap. - Make ToolWorkshopMobileView open edit view on tool type tap. - Wire delete into MobileEditView for existing profiles and tool types. - Stay on edit view after saving an existing item; create flow returns to list as before. - Update ToolWorkshopPage cancel to return to list. - Add mobile-edit-actions and mobile-edit-delete CSS. Quality gates: npm run typecheck, npm run lint, npm test -- --run (87 passed) Refs: openspec/changes/mobile-edit-default-bottom-actions
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
# Mobile Edit-as-Default with Sticky Bottom Actions
|
||||
|
||||
## Summary
|
||||
|
||||
On mobile, tapping a config profile or tool type now opens the edit view directly instead of the read-only detail view. Save and Delete actions are anchored to a sticky bottom action bar so they are always reachable while scrolling long forms.
|
||||
|
||||
## Motivation
|
||||
|
||||
The previous mobile flow required an extra tap (list → detail → edit) for every change. Power users on phones primarily want to edit, so the default view should be edit. The Save and Delete buttons were also at the top of long forms, forcing users to scroll back up to commit changes.
|
||||
|
||||
## Scope
|
||||
|
||||
- Config Profiles mobile view (`ConfigProfilesMobileView`).
|
||||
- Tool Workshop mobile view (`ToolWorkshopMobileView`).
|
||||
- Shared `MobileEditView` component.
|
||||
- Mobile edit-view CSS (`utilities.css`).
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [x] Tapping a config profile opens the edit form.
|
||||
- [x] Tapping a tool type opens the edit form.
|
||||
- [x] Create flows still open the edit form and return to the list after save.
|
||||
- [x] Edit flows stay on the edit form after a successful save and show a success message.
|
||||
- [x] Delete is available in the edit view for existing items.
|
||||
- [x] Save and Delete buttons are sticky at the bottom of the viewport on mobile.
|
||||
- [x] Detail and preview views remain reachable from edit where already wired.
|
||||
|
||||
## Non-Goals
|
||||
|
||||
- Changing desktop behavior or layout.
|
||||
- Removing detail/preview views entirely.
|
||||
- Altering the user profile page flow (it already uses `MobileEditView` and benefits from the sticky bar automatically).
|
||||
|
||||
## Related
|
||||
|
||||
- `openspec/changes/mobile-config-profiles-ui`
|
||||
- `openspec/changes/mobile-tool-profile-ui`
|
||||
@@ -0,0 +1,14 @@
|
||||
# Mobile Edit-as-Default with Sticky Bottom Actions — Tasks
|
||||
|
||||
- [x] Update `MobileEditView` to accept an optional `onDelete` callback and render Save/Delete in a sticky bottom action bar.
|
||||
- [x] Move the Save button out of the `MobileEditView` header; keep Cancel + title in the header.
|
||||
- [x] Update `ConfigProfilesMobileView` so list item clicks open edit view.
|
||||
- [x] Update `ConfigProfilesMobileView` to pass `onDelete` to `MobileEditView` when editing existing profiles.
|
||||
- [x] Update `ConfigProfilesMobileView` cancel/save navigation to return to list on create and stay on edit on save.
|
||||
- [x] Update `ToolWorkshopMobileView` so list item clicks open edit view.
|
||||
- [x] Update `ToolWorkshopMobileView` to pass `onDelete` to `MobileEditView` when editing existing tool types.
|
||||
- [x] Update `ToolWorkshopMobileView` cancel/save navigation to return to list on create and stay on edit on save.
|
||||
- [x] Add CSS for `.mobile-edit-actions` sticky bottom bar and `.mobile-edit-delete` button.
|
||||
- [x] Increase `.mobile-edit-form` bottom padding so content is not hidden behind the sticky bar.
|
||||
- [x] Run `npm run typecheck`, `npm run lint`, and `npm test -- --run` in `apps/web`.
|
||||
- [x] Update project maps for changed files.
|
||||
Reference in New Issue
Block a user