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/styles/.pi-map.index.md
+1 -1
View File
@@ -2,7 +2,7 @@
dir: apps/web/src/styles
## role
Houses the complete CSS styling system for the web application, providing design tokens, global styles, component-specific styles, syntax highlighting themes, and responsive utility classes.
Provides the complete visual design system and styling foundation for the web application, including themes, tokens, utilities, and component-specific styles.
## parent
index: apps/web/src/.pi-map.index.md
map: apps/web/src/.pi-map.md
apps/web/src/styles/.pi-map.md
+4 -4
View File
@@ -4,16 +4,16 @@ dir: apps/web/src/styles
index: apps/web/src/styles/.pi-map.index.md
## role
Houses the complete CSS styling system for the web application, providing design tokens, global styles, component-specific styles, syntax highlighting themes, and responsive utility classes.
Provides the complete visual design system and styling foundation for the web application, including themes, tokens, utilities, and component-specific styles.
## files
- global.css | Defines global CSS styles for a web application shell layout, navigation, cards, forms, dialogs, settings pages, and responsive design patterns. | dep: CSS custom properties (CSS variables: --border, --panel, --brand, --muted, --ink, --bg, --danger, --success, --warning, --font-size-xs, --font-size-sm, --space-2, --space-3, --space-4, --space-5)
- syntax-highlight.css | Stylesheet for a syntax highlighting component with toolbar, line numbers, code display, and Prism.js theme integration | dep: Prism.js
- tokens.css | Defines a comprehensive CSS design token system with light/dark themes, spacing scales, breakpoints, and fluid typography for a web application.
- utilities.css | Provides responsive CSS utility classes and component-specific styles for a web application featuring terminals, session management, dialogs, tables, and forms with mobile-first responsive design. | dep: CSS custom properties (variables like --space-*, --border, --bg, --brand, --muted, --success, --danger, --text-xs, --text-sm), xterm.js (terminal library)
- utilities.css | Provides responsive CSS utility classes and component-specific styles for a web application including layout systems, terminal interfaces, session management, and mobile adaptations. | dep: CSS custom properties (var(--space-*), var(--border), var(--bg), var(--text), var(--muted), var(--success), var(--danger), var(--brand)), xterm.js (terminal component)
## arch
Token-based CSS architecture using CSS custom properties for light/dark theming, mobile-first responsive design with breakpoint scaling, and modular separation of concerns across tokens, globals, utilities, and component-specific stylesheets.
Token-driven CSS architecture using CSS custom properties for light/dark theming, utility-first responsive classes, and modular separation of concerns across global, component-specific, syntax highlighting, and design token layers.
## tags
space, global, css, web, application, responsive, design, syntax
var(, space, global, css, web, application, syntax, defines
## symbols
-
## workflows
apps/web/src/styles/utilities.css
+35 -3
View File
@@ -2138,7 +2138,8 @@ a.nav-item,
}
.mobile-edit-cancel,
.mobile-edit-save {
.mobile-edit-save,
.mobile-edit-delete {
min-height: 44px;
padding: var(--space-2) var(--space-3);
border-radius: 10px;
@@ -2159,8 +2160,15 @@ a.nav-item,
color: white;
}
.mobile-edit-delete {
background: var(--danger-light);
border: 1px solid var(--danger);
color: var(--danger);
}
.mobile-edit-save:disabled,
.mobile-edit-cancel:disabled {
.mobile-edit-cancel:disabled,
.mobile-edit-delete:disabled {
opacity: 0.6;
cursor: not-allowed;
}
@@ -2180,7 +2188,31 @@ a.nav-item,
flex: 1;
overflow-y: auto;
padding: var(--space-3);
padding-bottom: calc(var(--space-4) + 64px);
padding-bottom: calc(var(--space-3) + 148px);
}
/* Mobile Edit Actions (sticky bottom bar) */
.mobile-edit-actions {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3);
padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
background: var(--panel);
border-top: 1px solid var(--border);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}
.mobile-edit-actions .mobile-edit-save,
.mobile-edit-actions .mobile-edit-delete {
width: 100%;
justify-content: center;
min-height: 48px;
}
.mobile-edit-field {