alex/headquarter
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: mobile edit-as-default with sticky save/delete actions

Browse Source 
- 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:
Developer
2026-06-13 22:29:15 +00:00
parent 8b15689fb3
commit 23fc0a6b82
29 changed files with 164 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/features/tool-workshop/.pi-map.index.md
+1 -1
View File
@@ -2,7 +2,7 @@
dir: apps/web/src/components/features/tool-workshop
## role
Provides a complete CRUD interface for managing reusable tool type definitions (Docker Compose, Dockerfile, Manifest) in a workshop-style admin panel with responsive desktop and mobile layouts.
Provides a complete UI for managing custom tool types in a "Tool Workshop" feature, enabling users to create, edit, list, and delete tool definitions with multiple definition formats.
## parent
index: apps/web/src/components/features/.pi-map.index.md
map: apps/web/src/components/features/.pi-map.md
apps/web/src/components/features/tool-workshop/.pi-map.md
+4 -4
View File
@@ -4,15 +4,15 @@ dir: apps/web/src/components/features/tool-workshop
index: apps/web/src/components/features/tool-workshop/.pi-map.index.md
## role
Provides a complete CRUD interface for managing reusable tool type definitions (Docker Compose, Dockerfile, Manifest) in a workshop-style admin panel with responsive desktop and mobile layouts.
Provides a complete UI for managing custom tool types in a "Tool Workshop" feature, enabling users to create, edit, list, and delete tool definitions with multiple definition formats.
## files
- ToolTypeEditorPanel.tsx | Renders a form panel for creating or editing tool types with support for compose, dockerfile, and manifest definition types | exp: ToolTypeFormState, ToolTypeEditorPanel | dep: ../../icon, ../tool/manifest-editor, ../../../api/tool-types, ../../../api/tool-definitions, React, Icon, ManifestEditor
- ToolTypeListSidebar.tsx | Renders a sidebar component for listing, selecting, creating, and deleting tool types in a "Tool Workshop" interface. | exp: ToolTypeListSidebar | dep: ../../icon, ../../../api/tool-types, React, Icon component, ToolType type
- ToolWorkshopMobileView.tsx | Renders a mobile-responsive three-view (list/detail/edit) interface for managing tool types in a tool workshop, with form handling for creating and editing tool configurations including Docker Compose, Dockerfile, or Manifest definitions. | exp: MobileView, ToolWorkshopMobileView | dep: react, ../mobile/mobile-list-view, ../mobile/mobile-detail-view, ../mobile/mobile-edit-view, ../mobile/mobile-fab, ../tool/manifest-editor, ../../icon, ../../../api/tool-types, ./ToolTypeEditorPanel, ../../../api/tool-definitions, mobile-list-view, mobile-detail-view, mobile-edit-view, mobile-fab, manifest-editor, icon, tool-types, ToolTypeEditorPanel, tool-definitions
- ToolWorkshopMobileView.tsx | Renders a mobile-responsive interface for managing tool types with list, detail, and edit views | exp: MobileView, ToolWorkshopMobileView | dep: react, ../mobile/mobile-list-view, ../mobile/mobile-detail-view, ../mobile/mobile-edit-view, ../mobile/mobile-fab, ../tool/manifest-editor, ../../icon, ../../../api/tool-types, ./ToolTypeEditorPanel, ../../../api/tool-definitions, mobile-list-view, mobile-detail-view, mobile-edit-view, mobile-fab, manifest-editor, icon, tool-types, tool-definitions
## arch
Compound component pattern with split-pane desktop layout (sidebar list + editor panel) and state-driven mobile view with three-view routing (list/detail/edit), using React state for form management and optimistic UI updates.
Implements a split-pane layout pattern with sidebar list navigation and detail/editor panel, plus a dedicated mobile-responsive view with state-driven screen switching, all using React functional components with TypeScript.
## tags
tool, mobile, view, type, types, editor, list, workshop
tool, mobile, view, type, types, editor, list, panel
## symbols
- ToolTypeFormState
- ToolTypeEditorPanel
apps/web/src/components/features/tool-workshop/ToolWorkshopMobileView.tsx
+5 -3
View File
@@ -60,7 +60,7 @@ export const ToolWorkshopMobileView = ({
try {
const ok = await onSubmit();
if (ok) {
onViewChange("list");
onViewChange(isCreating ? "list" : "edit");
}
} finally {
setIsSaving(false);
@@ -91,7 +91,7 @@ export const ToolWorkshopMobileView = ({
const toolType = toolTypes.find((t) => t.id === id);
if (toolType) {
onSelect(toolType);
onViewChange("detail");
onViewChange("edit");
}
}}
emptyMessage="No tool types yet"
@@ -189,6 +189,8 @@ export const ToolWorkshopMobileView = ({
title={isCreating ? "Create Tool Type" : "Edit Tool Type"}
onCancel={onCancel}
onSave={handleSave}
onDelete={isCreating ? undefined : handleDelete}
deleteLabel="Delete Tool Type"
isSaving={isSaving}
>
<div className="mobile-form-group">
@@ -452,7 +454,7 @@ export const ToolWorkshopMobileView = ({
const toolType = toolTypes.find((t) => t.id === id);
if (toolType) {
onSelect(toolType);
onViewChange("detail");
onViewChange("edit");
}
}}
emptyMessage="No tool types yet"