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
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user