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