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
2026-06-14 08:10:58 +00:00
parent 13b3c60abc
commit a12d6a8169
23 changed files with 149 additions and 40 deletions
@@ -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>
))}