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

feat: restore delete buttons in mobile list views and fix edit action bar

Browse Source 
- Wire MobileListView onItemDelete/onItemDuplicate callbacks to render
  action buttons in each list row.
- Pass onItemDelete in ToolWorkshopMobileView list view.
- Add CSS for mobile-list-item-action buttons.
- Fix MobileEditView sticky bottom action bar that was hidden behind
  the 64px mobile navigation bar; raise to bottom: 64px and z-index 110.

Quality gates: npm run typecheck, npm run lint, npm test -- --run (87 passed)

Refs: openspec/changes/mobile-list-delete-button
This commit is contained in:
Developer
2026-06-14 08:10:58 +00:00
parent 13b3c60abc
commit a12d6a8169
23 changed files with 149 additions and 40 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
Provides the complete visual design system and styling foundation for the web application, including themes, tokens, utilities, and component-specific styles.
Provides the complete visual design system and styling infrastructure for the web application, including tokens, utilities, global layouts, 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
Provides the complete visual design system and styling foundation for the web application, including themes, tokens, utilities, and component-specific styles.
Provides the complete visual design system and styling infrastructure for the web application, including tokens, utilities, global layouts, 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 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)
- utilities.css | Provides a comprehensive responsive CSS utility system with layout primitives, mobile-first adaptations, terminal-specific styling, and component patterns for a web application | dep: CSS custom properties (variables), xterm.js (terminal integration)
## arch
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.
CSS custom properties-based design token architecture with theme-aware variables (light/dark), mobile-first responsive utilities, and modular separation of concerns across tokens, utilities, global styles, and component-specific stylesheets.
## tags
var(, space, global, css, web, application, syntax, defines
space, global, css, web, application, syntax, defines, layout
## symbols
-
## workflows
apps/web/src/styles/utilities.css
+30 -2
View File
@@ -2053,10 +2053,38 @@ a.nav-item,
.mobile-list-item-actions {
display: flex;
align-items: center;
gap: var(--space-1);
flex-shrink: 0;
color: var(--muted);
}
.mobile-list-item-action {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
background: transparent;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--muted);
cursor: pointer;
}
.mobile-list-item-action:active {
background: var(--bg);
}
.mobile-list-item-action-delete {
color: var(--danger);
border-color: var(--danger);
}
.mobile-list-item-action-delete:active {
background: var(--danger-light);
}
.mobile-list-empty {
display: flex;
flex-direction: column;
@@ -2196,8 +2224,8 @@ a.nav-item,
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
bottom: 64px;
z-index: 110;
display: flex;
flex-direction: column;
gap: var(--space-2);