feat: restore delete buttons in mobile list views and fix edit action bar
- 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
+1
-1
@@ -16,7 +16,7 @@ dir: .
|
||||
Trust boundary: index routes, map orients, source decides.
|
||||
|
||||
## role
|
||||
Infrastructure and deployment configuration package for a self-hosted project management platform with OAuth2/SSO authentication.
|
||||
A self-hosted web-based project management and git repository platform with OAuth2 authentication, built as a containerized multi-service application with PostgreSQL, Redis, and Traefik deployment support.
|
||||
## parent
|
||||
-
|
||||
## children
|
||||
|
||||
+2
-2
@@ -18,7 +18,7 @@ index: ./.pi-map.index.md
|
||||
Trust boundary: index routes, map orients, source decides.
|
||||
|
||||
## role
|
||||
Infrastructure and deployment configuration package for a self-hosted project management platform with OAuth2/SSO authentication.
|
||||
A self-hosted web-based project management and git repository platform with OAuth2 authentication, built as a containerized multi-service application with PostgreSQL, Redis, and Traefik deployment support.
|
||||
## files
|
||||
- .env.example | Provides a template of environment variables for configuring a Headquarter application with PostgreSQL, Redis, Authentik SSO, and Docker/Traefik deployment
|
||||
- .gitignore | Specifies files and directories for Git to ignore across a multi-language project with Python, Node, and custom tooling | dep: Git
|
||||
@@ -31,7 +31,7 @@ Infrastructure and deployment configuration package for a self-hosted project ma
|
||||
- progress.md | Tracks completed and remaining tasks for a backend-frontend code refactoring project organized in 7 phases
|
||||
- swap-pane | Empty file with no functionality
|
||||
## arch
|
||||
Containerized microservices architecture using Docker Compose with PostgreSQL/Redis backing services, Traefik reverse proxy for TLS termination, and environment-driven configuration management.
|
||||
Monolithic full-stack architecture with separate frontend/backend services, Docker Compose orchestration, environment-driven configuration via .env files, and reverse proxy integration (Traefik) for TLS-terminated deployment; follows OpenSpec-driven AI-assisted development workflows with phased refactoring approach.
|
||||
## tags
|
||||
docker, redis, git, application, postgresql, compose, traefik, project
|
||||
## symbols
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps
|
||||
|
||||
## role
|
||||
Contains the deployable application entry points and executable binaries for the project.
|
||||
Contains the main application entry points and executable targets for the project.
|
||||
## parent
|
||||
index: ./.pi-map.index.md
|
||||
map: ./.pi-map.md
|
||||
|
||||
+2
-2
@@ -4,10 +4,10 @@ dir: apps
|
||||
index: apps/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Contains the deployable application entry points and executable binaries for the project.
|
||||
This appears to be an empty or minimal apps directory, typically serving as a container for application-specific modules or entry points in a larger project structure.
|
||||
## files
|
||||
## arch
|
||||
Layered architecture with separate application modules, each typically containing main functions, configuration, and dependency wiring to compose domain and infrastructure services into runnable programs.
|
||||
Standard monorepo or multi-app directory structure following organizational conventions where individual applications or services would be housed as subdirectories.
|
||||
## tags
|
||||
-
|
||||
## symbols
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web
|
||||
|
||||
## role
|
||||
Frontend web application providing the browser-based UI for the "headquarter" project, built with React/Vite/TypeScript and deployed via nginx.
|
||||
Frontend web application providing the browser-based user interface for the "headquarter" project, built as a modern React SPA with code editing, terminal, and routing capabilities.
|
||||
## parent
|
||||
index: apps/.pi-map.index.md
|
||||
map: apps/.pi-map.md
|
||||
|
||||
+2
-2
@@ -4,7 +4,7 @@ dir: apps/web
|
||||
index: apps/web/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Frontend web application providing the browser-based UI for the "headquarter" project, built with React/Vite/TypeScript and deployed via nginx.
|
||||
Frontend web application providing the main user interface for the "headquarter" project as a React-based single-page application.
|
||||
## files
|
||||
- .env.example | Template file defining example environment variables for frontend API and application URL configuration
|
||||
- .eslintrc.cjs | Configures ESLint for a TypeScript browser project with modern ECMAScript module support | dep: @typescript-eslint/parser, @typescript-eslint/eslint-plugin, eslint
|
||||
@@ -16,7 +16,7 @@ Frontend web application providing the browser-based UI for the "headquarter" pr
|
||||
- tsconfig.json | TypeScript configuration file for a React project using Vite with modern ES2020 target and bundler module resolution | dep: typescript, react, vite
|
||||
- vite.config.ts | Configures Vite build tool for a React project with custom dev server port and Vitest test settings. | dep: vite, @vitejs/plugin-react
|
||||
## arch
|
||||
Modern SPA architecture using Vite for bundling, React for component-based UI, TypeScript for type safety, nginx for static serving with client-side routing fallback, and Docker multi-stage builds for containerized deployment.
|
||||
Modern React SPA built with Vite, TypeScript, and nginx serving, featuring containerized deployment with multi-stage Docker builds, client-side routing, and optimized static asset delivery.
|
||||
## tags
|
||||
react, eslint, vite, typescript, dom, application, nginx, web
|
||||
## symbols
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src
|
||||
|
||||
## role
|
||||
Provides the core web application entry point, routing infrastructure, and shared domain type definitions for a React-based web frontend.
|
||||
Entry point and core infrastructure for a React web application handling routing, authentication, and type definitions.
|
||||
## parent
|
||||
index: apps/web/.pi-map.index.md
|
||||
map: apps/web/.pi-map.md
|
||||
|
||||
@@ -4,13 +4,13 @@ dir: apps/web/src
|
||||
index: apps/web/src/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Provides the core web application entry point, routing infrastructure, and shared domain type definitions for a React-based web frontend.
|
||||
Entry point and core infrastructure for a React web application handling routing, authentication, and type definitions.
|
||||
## files
|
||||
- main.tsx | Bootstraps a React application with routing, authentication, and session management providers. | dep: react, react-dom/client, react-router-dom, ./router, ./state/auth, ./state/sessions, ./styles/tokens.css, ./styles/global.css, ./styles/utilities.css, ./styles/syntax-highlight.css, ./styles/pages/git-history.css, ./styles/pages/projects.css, ./styles/pages/sessions.css, ./styles/pages/ssh-keys.css, ./styles/pages/workspace-detail.css, ./styles/pages/workspaces.css, react-dom
|
||||
- router.tsx | Defines the React Router configuration for a web application with protected routes, nested layouts, and redirects. | exp: AppRouter | dep: react-router-dom, ./components/app-shell, ./components/protected-route, ./pages/DashboardPage, ./pages/PlaceholderPage, ./pages/ProfilePage, ./pages/ProjectsPage, ./pages/GitRepositoriesPage, ./pages/GitHistoryPage, ./pages/ProjectSettingsPage, ./pages/SettingsPage, ./pages/TerminalPage, ./pages/ToolWorkshopPage, ./pages/SshKeysPage, ./pages/ConfigProfilesPage, ./pages/SessionsPage, ./pages/WorkspacesPage, ./pages/WorkspaceDetailPage
|
||||
- types.ts | Defines TypeScript type definitions for user sessions, projects, repositories, and workspaces in an application. | exp: SessionUser, SessionPayload, Project, WorkspaceSummary, RepositorySummary, ProjectWithRepos
|
||||
## arch
|
||||
Modular React SPA architecture using React Router v6 with nested route layouts, protected route guards via authentication context, provider composition pattern for dependency injection (session/auth), and centralized TypeScript type definitions for cross-cutting domain models.
|
||||
Modular React SPA with React Router v6 (nested routes, protected routes, layout nesting), provider-based context pattern for auth/session management, and centralized TypeScript type definitions.
|
||||
## tags
|
||||
pages, styles, css, router, react, session, dom, project
|
||||
## symbols
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components
|
||||
|
||||
## role
|
||||
Provides foundational React UI components and utilities for rendering layouts, navigation, data states, icons, code editing, syntax highlighting, authentication guards, and toast notifications in the web application.
|
||||
Provides reusable, accessible UI primitives and layout components for a React web application, including shell layout, data states, icons, code editing, routing guards, and toast notifications.
|
||||
## parent
|
||||
index: apps/web/src/.pi-map.index.md
|
||||
map: apps/web/src/.pi-map.md
|
||||
|
||||
@@ -4,7 +4,7 @@ dir: apps/web/src/components
|
||||
index: apps/web/src/components/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Provides reusable, accessible UI components and utilities for a React web application including layout shells, data state handling, iconography, routing guards, and toast notifications.
|
||||
Provides reusable, accessible UI primitives and layout components for a React web application, including shell layout, data states, icons, code editing, routing guards, and toast notifications.
|
||||
## files
|
||||
- app-shell.tsx | Renders the main application shell layout with navigation, header, session management, and mobile-responsive behavior for a React Router-based SPA. | exp: AppShell | dep: react-router-dom, ../api/sessions, ../hooks/use-theme, ../state/auth, ../state/sessions, ../hooks/use-mobile-viewport, ../state/events, ../state/toast, ../state/notifications, ./features/notification/event-toast-bridge, ./features/notification/notification-center, ./icon, ./features/mobile/mobile-nav, ./features/tool/start-tool-fab, ../utils/icons
|
||||
- code-editor.tsx | A React component that renders a syntax-highlighted code editor with line numbers using react-simple-code-editor. | exp: CodeEditor | dep: react, react-simple-code-editor, ../utils/language
|
||||
@@ -17,7 +17,7 @@ Provides reusable, accessible UI components and utilities for a React web applic
|
||||
- toast-rules.test.ts | Unit tests for mapping instance events to toast notification categories and severities | dep: vitest, ./toast-rules, ../types/events
|
||||
- toast-rules.ts | Maps instance events to toast notifications with deduplication logic to prevent spam | exp: func:mapEventToCategory(event: InstanceEventPayload) → string, call:event.event.startsWith, func:mapEventToSeverity(event: InstanceEventPayload) → "info" | "warning" | "error" | "success", func:handleEventToast(event: InstanceEventPayload) → void, call:shouldShowToast, call:toast.info, call:toast.success, call:toast.warning, call:toast.error, func:clearToastDedup() → void, call:lastToastTime.clear | dep: ../state/toast, ../types/events, toast state module, InstanceEventPayload type
|
||||
## arch
|
||||
Component-based React architecture with functional components, custom hooks for auth/session management, utility modules for pure logic (toast rules), centralized icon abstraction layer, and test coverage for critical routing and notification logic.
|
||||
Component-based React architecture with functional components, composition patterns, and separation of concerns between presentation (UI rendering), logic (rules/hooks), and testing; integrates third-party libraries (react-simple-code-editor, Phosphor icons) and React Router for SPA navigation.
|
||||
## tags
|
||||
toast, icon, react, state, code, loading, event, editor
|
||||
## symbols
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features
|
||||
|
||||
## role
|
||||
Contains reusable UI components that implement specific business features or domain logic for the web application.
|
||||
Contains reusable React components that implement specific product features and user-facing functionality across the web application.
|
||||
## parent
|
||||
index: apps/web/src/components/.pi-map.index.md
|
||||
map: apps/web/src/components/.pi-map.md
|
||||
|
||||
@@ -4,10 +4,10 @@ dir: apps/web/src/components/features
|
||||
index: apps/web/src/components/features/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Contains reusable React components that implement specific user-facing features and functionality within the web application.
|
||||
Contains reusable React components that implement specific product features and user-facing functionality across the web application.
|
||||
## files
|
||||
## arch
|
||||
Feature-based component organization following domain-driven design principles, likely with each sub-directory representing a distinct business capability or user workflow.
|
||||
Feature-based component organization with domain-specific groupings, likely combining presentational and container patterns with hooks for state management, following a modular architecture where each feature encapsulates its own UI, logic, and data fetching concerns.
|
||||
## tags
|
||||
-
|
||||
## symbols
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features/mobile
|
||||
|
||||
## role
|
||||
Provides mobile-optimized UI components for a responsive web application, covering navigation, data views, forms, modals, and specialized terminal interfaces.
|
||||
Provides a complete set of mobile-optimized UI components for CRUD operations, navigation, and terminal interfaces in a responsive web application.
|
||||
## parent
|
||||
index: apps/web/src/components/features/.pi-map.index.md
|
||||
map: apps/web/src/components/features/.pi-map.md
|
||||
|
||||
@@ -4,22 +4,22 @@ dir: apps/web/src/components/features/mobile
|
||||
index: apps/web/src/components/features/mobile/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Provides mobile-optimized UI components for a responsive web application, covering navigation, data views, forms, modals, and specialized terminal interfaces.
|
||||
Provides a complete set of mobile-optimized UI components for CRUD operations, navigation, and terminal interfaces in a responsive web application.
|
||||
## files
|
||||
- mobile-action-sheet.tsx | Renders a mobile-optimized action sheet modal with title, configurable action buttons, and cancel option. | exp: MobileActionSheetItem, func:MobileActionSheet({ isOpen, onClose, title, actions, }: MobileActionSheetProps), call:useRef, call:useEffect, call:onClose, call:document.addEventListener, call:document.removeEventListener, call:e.stopPropagation, call:actions.map, call:action.onClick | dep: react, ../../icon, icon
|
||||
- mobile-detail-view.tsx | A React component that renders a mobile-optimized detail view with a header, back/edit/delete actions, and a configurable list of typed fields. | exp: MobileDetailView | dep: ../../icon, React
|
||||
- mobile-edit-view.tsx | A React component that renders a mobile-optimized form for editing records with configurable field types and save/cancel/delete actions. | exp: MobileEditView | dep: react
|
||||
- mobile-fab.tsx | Renders a floating action button component for mobile with an add icon and configurable click handler and label. | exp: MobileFAB | dep: ../../icon, react, icon
|
||||
- mobile-list-view.tsx | Renders a mobile-optimized list view with optional search, empty state, and customizable item rendering | exp: MobileListView | dep: react, ../../icon, ../../../utils/icons, icon
|
||||
- mobile-list-view.tsx | A reusable React component that renders a mobile-optimized list view with optional search, custom item rendering, and action buttons (duplicate/delete). | exp: MobileListView | dep: react, ../../icon, ../../../utils/icons, icon
|
||||
- mobile-nav.tsx | Renders a mobile navigation bar with grouped items that trigger bottom sheets and standard links with active state highlighting | exp: MobileNav | dep: react, react-router-dom, ../../icon, ../tool/tools-bottom-sheet, ./spaces-bottom-sheet, ../../../utils/icons
|
||||
- mobile-page-header.tsx | Renders a mobile-only page header with optional back navigation and custom actions. | exp: func:MobilePageHeader({ title, showBack = true, actions }: MobilePageHeaderProps), call:useNavigate, call:useMobileViewport, call:navigate | dep: react-router-dom, ../../../hooks/use-mobile-viewport, ../../icon, use-mobile-viewport hook, Icon component
|
||||
- mobile-terminal-header.tsx | Renders a mobile-responsive header for a terminal interface with navigation, title, connection status, font size controls, and close actions. | exp: MobileTerminalHeader | dep: react, ../../icon, icon
|
||||
- mobile-terminal-wrapper.tsx | Wraps a terminal component with mobile-specific UI including auto-hiding header, virtual keyboard handling, and special keys interface. | exp: MobileTerminalWrapper | dep: react, ../terminal/terminal, ./mobile-terminal-header, ../terminal/special-keys-strip, ../terminal/special-keys-panel, ../../../hooks/use-mobile-viewport, ../../../hooks/use-virtual-keyboard, ../../../hooks/use-auto-hide, ../../../hooks/use-special-keys
|
||||
- spaces-bottom-sheet.tsx | Renders a mobile bottom sheet navigation menu for switching between "Projects" and "Workspaces" spaces with active state highlighting. | exp: SpacesBottomSheet | dep: react-router-dom, ../../icon, icon
|
||||
## arch
|
||||
Compositional React component library with feature-specific mobile adaptations, using bottom sheets/action sheets for mobile navigation patterns, typed configurable props for flexibility, and terminal-specific wrappers with keyboard-aware mobile handling.
|
||||
Feature-based component architecture using compound mobile patterns (bottom sheets, action sheets, FABs) with typed configurable props, consistent mobile-first design system, and specialized terminal wrapper with native-like behaviors (auto-hiding headers, virtual keyboard handling).
|
||||
## tags
|
||||
mobile, terminal, sheet, icon, view, react, header, renders
|
||||
mobile, terminal, sheet, react, icon, view, header, action
|
||||
## symbols
|
||||
- MobileActionSheet
|
||||
- MobilePageHeader
|
||||
|
||||
@@ -24,6 +24,8 @@ interface MobileListViewProps {
|
||||
export const MobileListView: React.FC<MobileListViewProps> = ({
|
||||
items,
|
||||
onItemClick,
|
||||
onItemDelete,
|
||||
onItemDuplicate,
|
||||
emptyMessage = "No items found",
|
||||
searchPlaceholder = "Search...",
|
||||
onSearch,
|
||||
@@ -73,11 +75,38 @@ export const MobileListView: React.FC<MobileListViewProps> = ({
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="mobile-list-item-actions"
|
||||
style={{ transform: "rotate(180deg)" }}
|
||||
>
|
||||
<Icon name="arrow-left" size="sm" />
|
||||
<div className="mobile-list-item-actions">
|
||||
{onItemDuplicate && (
|
||||
<button
|
||||
type="button"
|
||||
className="mobile-list-item-action mobile-list-item-action-duplicate"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onItemDuplicate(item.id);
|
||||
}}
|
||||
aria-label="Duplicate"
|
||||
>
|
||||
<Icon name="copy" size="sm" />
|
||||
</button>
|
||||
)}
|
||||
{onItemDelete && (
|
||||
<button
|
||||
type="button"
|
||||
className="mobile-list-item-action mobile-list-item-action-delete"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onItemDelete(item.id);
|
||||
}}
|
||||
aria-label="Delete"
|
||||
>
|
||||
<Icon name="delete" size="sm" />
|
||||
</button>
|
||||
)}
|
||||
{!onItemDelete && !onItemDuplicate && (
|
||||
<span style={{ transform: "rotate(180deg)" }}>
|
||||
<Icon name="arrow-left" size="sm" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
dir: apps/web/src/components/features/tool-workshop
|
||||
|
||||
## role
|
||||
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.
|
||||
Provides a complete UI for managing custom tool types (compose, dockerfile, manifest) in a workshop interface with list, edit, and mobile-responsive views.
|
||||
## parent
|
||||
index: apps/web/src/components/features/.pi-map.index.md
|
||||
map: apps/web/src/components/features/.pi-map.md
|
||||
|
||||
@@ -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 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.
|
||||
Provides a complete UI for managing custom tool types (compose, dockerfile, manifest) in a workshop interface with list, edit, and mobile-responsive views.
|
||||
## 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 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
|
||||
- ToolWorkshopMobileView.tsx | Renders a mobile-responsive workshop 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
|
||||
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.
|
||||
Feature-based component composition with split-pane layout (sidebar + editor panel), responsive mobile adaptation, and CRUD operations for tool type definitions.
|
||||
## tags
|
||||
tool, mobile, view, type, types, editor, list, panel
|
||||
tool, mobile, view, type, types, editor, list, workshop
|
||||
## symbols
|
||||
- ToolTypeFormState
|
||||
- ToolTypeEditorPanel
|
||||
|
||||
@@ -94,6 +94,7 @@ export const ToolWorkshopMobileView = ({
|
||||
onViewChange("edit");
|
||||
}
|
||||
}}
|
||||
onItemDelete={(id) => onDelete(id)}
|
||||
emptyMessage="No tool types yet"
|
||||
/>
|
||||
<MobileFAB
|
||||
@@ -457,6 +458,7 @@ export const ToolWorkshopMobileView = ({
|
||||
onViewChange("edit");
|
||||
}
|
||||
}}
|
||||
onItemDelete={(id) => onDelete(id)}
|
||||
emptyMessage="No tool types yet"
|
||||
/>
|
||||
<MobileFAB
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
# Restore Delete Button in Mobile List Views and Fix Edit Action Bar
|
||||
|
||||
## Summary
|
||||
|
||||
The `MobileListView` component accepted `onItemDelete` and `onItemDuplicate` callbacks but never rendered the corresponding action buttons. This change restores the delete button (and adds duplicate support) in each mobile list row for any view that supplies the callback.
|
||||
|
||||
In addition, the sticky bottom action bar added to `MobileEditView` in the previous change was positioned behind the 64px mobile navigation bar, making the Save and Delete buttons impossible to see on mobile. The bar is now raised above the navigation and given a higher z-index.
|
||||
|
||||
## Motivation
|
||||
|
||||
Users need a quick way to remove config profiles and tool types directly from the mobile list without first opening the edit view. The callback props already existed, so wiring them up restores intended behavior.
|
||||
|
||||
Users also reported that the Save/Delete buttons in the mobile edit view were not visible. Investigation showed the fixed-position action bar was rendering underneath the persistent mobile bottom navigation.
|
||||
|
||||
## Scope
|
||||
|
||||
- `MobileListView` shared component.
|
||||
- `ToolWorkshopMobileView` (passes `onItemDelete`).
|
||||
- `ConfigProfilesMobileView` already passed `onItemDelete`; it now actually renders.
|
||||
- `MobileEditView` sticky action bar CSS (`utilities.css`).
|
||||
- Mobile list item action CSS (`utilities.css`).
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [x] `MobileListView` renders a delete button when `onItemDelete` is provided.
|
||||
- [x] `MobileListView` renders a duplicate button when `onItemDuplicate` is provided.
|
||||
- [x] Tapping delete/duplicate does not also trigger the row click.
|
||||
- [x] `ToolWorkshopMobileView` list rows show the delete button.
|
||||
- [x] `ConfigProfilesMobileView` list rows show the delete button.
|
||||
- [x] Rows without delete/duplicate still show the chevron.
|
||||
- [x] The `MobileEditView` sticky bottom action bar sits above the mobile navigation bar.
|
||||
- [x] Save and Delete buttons in the edit view are visible and reachable.
|
||||
|
||||
## Related
|
||||
|
||||
- `openspec/changes/mobile-edit-default-bottom-actions`
|
||||
- `openspec/changes/mobile-config-profiles-ui`
|
||||
- `openspec/changes/mobile-tool-profile-ui`
|
||||
@@ -0,0 +1,12 @@
|
||||
# Restore Delete Button in Mobile List Views and Fix Edit Action Bar — Tasks
|
||||
|
||||
- [x] Read `MobileListView` source and confirm `onItemDelete`/`onItemDuplicate` were unused.
|
||||
- [x] Update `MobileListView` to render delete/duplicate action buttons when callbacks are provided.
|
||||
- [x] Stop propagation on action buttons so row click does not fire.
|
||||
- [x] Update `ToolWorkshopMobileView` to pass `onItemDelete` to both list view usages.
|
||||
- [x] Verify `ConfigProfilesMobileView` still passes `onItemDelete`.
|
||||
- [x] Add `.mobile-list-item-action` and variant CSS to `utilities.css`.
|
||||
- [x] Identify that `MobileEditView` sticky action bar was hidden behind the 64px mobile nav.
|
||||
- [x] Update `.mobile-edit-actions` to `bottom: 64px` and `z-index: 110`.
|
||||
- [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