+ )}
+
+ {/* Date and actions row — pinned to the bottom so dates align across a
+ row regardless of how many tags each card shows */}
+
{formatRelativeDate(design.updatedAt)}
@@ -150,6 +196,7 @@ export function DesignGridItem({
onLoad={onSelect}
onDownloadJSON={onDownloadJSON}
onRename={startEditing}
+ onEditTags={onEditTags}
onDuplicate={onDuplicate}
onDelete={onDelete}
/>
diff --git a/src/features/bin-designer/components/DesignListDialog/BulkActionBar/BulkActionBar.test.tsx b/src/features/bin-designer/components/DesignListDialog/BulkActionBar/BulkActionBar.test.tsx
new file mode 100644
index 000000000..9e1d75aef
--- /dev/null
+++ b/src/features/bin-designer/components/DesignListDialog/BulkActionBar/BulkActionBar.test.tsx
@@ -0,0 +1,48 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { BulkActionBar } from './BulkActionBar';
+
+function setup(count: number) {
+ const handlers = {
+ onSelectAll: vi.fn(),
+ onTag: vi.fn(),
+ onExport: vi.fn(),
+ onDelete: vi.fn(),
+ onCancel: vi.fn(),
+ };
+ render(
);
+ return handlers;
+}
+
+describe('BulkActionBar', () => {
+ it('shows the selected count', () => {
+ setup(3);
+ expect(screen.getByText('3 selected')).toBeInTheDocument();
+ });
+
+ it('disables bulk actions when nothing is selected', () => {
+ setup(0);
+ expect(screen.getByRole('button', { name: /^delete$/i })).toBeDisabled();
+ expect(screen.getByRole('button', { name: /^export$/i })).toBeDisabled();
+ expect(screen.getByRole('button', { name: /^tag$/i })).toBeDisabled();
+ });
+
+ it('fires actions when selected', () => {
+ const h = setup(2);
+ fireEvent.click(screen.getByRole('button', { name: /^delete$/i }));
+ fireEvent.click(screen.getByRole('button', { name: /^export$/i }));
+ fireEvent.click(screen.getByRole('button', { name: /^tag$/i }));
+ expect(h.onDelete).toHaveBeenCalled();
+ expect(h.onExport).toHaveBeenCalled();
+ expect(h.onTag).toHaveBeenCalled();
+ });
+
+ it('select-all and cancel are always available', () => {
+ const h = setup(0);
+ fireEvent.click(screen.getByText(/select all/i));
+ fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
+ expect(h.onSelectAll).toHaveBeenCalled();
+ expect(h.onCancel).toHaveBeenCalled();
+ });
+});
diff --git a/src/features/bin-designer/components/DesignListDialog/BulkActionBar/BulkActionBar.tsx b/src/features/bin-designer/components/DesignListDialog/BulkActionBar/BulkActionBar.tsx
new file mode 100644
index 000000000..057c39adf
--- /dev/null
+++ b/src/features/bin-designer/components/DesignListDialog/BulkActionBar/BulkActionBar.tsx
@@ -0,0 +1,53 @@
+import { useTranslation } from '@/i18n';
+import { Button } from '@/design-system';
+
+interface BulkActionBarProps {
+ count: number;
+ onSelectAll: () => void;
+ onTag: () => void;
+ onExport: () => void;
+ onDelete: () => void;
+ onCancel: () => void;
+}
+
+/** Action bar shown in bulk-selection mode. Bulk actions disable when nothing is selected. */
+export function BulkActionBar({
+ count,
+ onSelectAll,
+ onTag,
+ onExport,
+ onDelete,
+ onCancel,
+}: BulkActionBarProps) {
+ const t = useTranslation();
+ const none = count === 0;
+
+ return (
+
+
+ {t('binDesigner.bulk.selected', { count })}
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/features/bin-designer/components/DesignListDialog/BulkActionBar/index.ts b/src/features/bin-designer/components/DesignListDialog/BulkActionBar/index.ts
new file mode 100644
index 000000000..d177e1ff9
--- /dev/null
+++ b/src/features/bin-designer/components/DesignListDialog/BulkActionBar/index.ts
@@ -0,0 +1 @@
+export { BulkActionBar } from './BulkActionBar';
diff --git a/src/features/bin-designer/components/DesignListDialog/DesignListDialog.tsx b/src/features/bin-designer/components/DesignListDialog/DesignListDialog.tsx
index 54eaaa2a8..a1dda1492 100644
--- a/src/features/bin-designer/components/DesignListDialog/DesignListDialog.tsx
+++ b/src/features/bin-designer/components/DesignListDialog/DesignListDialog.tsx
@@ -13,7 +13,14 @@ import {
deleteDesign,
duplicateDesign,
saveDesign,
+ updateDesignTags,
} from '@/features/bin-designer/storage/DesignerStorage';
+import { collectTags, filterByTags, toggleTag } from '@/features/bin-designer/utils/tagFilter';
+import { normalizeTags, tagsEqual } from '@/features/bin-designer/utils/tags';
+import { TagFilterBar } from './TagFilterBar';
+import { BulkActionBar } from './BulkActionBar';
+import { TagEditDialog } from './TagEditDialog';
+import { useDesignSelection } from './useDesignSelection';
import { removeRegistryEntry } from '../../store/customBinRegistry';
import { useDesignerStore } from '../../store';
import { useDesignerRouting } from '@/shared/hooks/useDesignerRouting';
@@ -61,6 +68,12 @@ export function DesignListDialog({ open, onClose }: DesignListDialogProps) {
const [sortBy, setSortBy] = useState
('recent');
const [focusedIndex, setFocusedIndex] = useState(0);
const [showImport, setShowImport] = useState(false);
+ const [activeTags, setActiveTags] = useState([]);
+ const [tagEdit, setTagEdit] = useState<{ mode: 'single' | 'bulk'; design?: SavedDesign } | null>(
+ null
+ );
+ const [showBulkDeleteConfirm, setShowBulkDeleteConfirm] = useState(false);
+ const selection = useDesignSelection();
const itemRefs = useRef>(new Map());
const gridRef = useRef(null);
@@ -102,6 +115,10 @@ export function DesignListDialog({ open, onClose }: DesignListDialogProps) {
setFocusedIndex(0);
setLoading(true);
setShowImport(false);
+ setActiveTags([]);
+ setTagEdit(null);
+ setShowBulkDeleteConfirm(false);
+ selection.exit();
} else if (!open && prevOpen) {
setPrevOpen(false);
}
@@ -128,12 +145,34 @@ export function DesignListDialog({ open, onClose }: DesignListDialogProps) {
}, []);
useThumbnailRegeneration(designs, handleThumbnailUpdated);
+ const allTags = useMemo(() => collectTags(designs), [designs]);
+
+ // Drop active filters whose tag no longer exists (e.g. after deleting the last
+ // design carrying it). Otherwise the list can get stuck showing nothing while
+ // the filter bar — which hides when no tags exist — offers no way to clear it.
+ const prunedActiveTags = activeTags.filter((tag) =>
+ allTags.some((t) => t.toLowerCase() === tag.toLowerCase())
+ );
+ if (prunedActiveTags.length !== activeTags.length) {
+ setActiveTags(prunedActiveTags);
+ }
+
+ // Drop selected IDs for designs that no longer exist (e.g. a single delete via
+ // the row menu while in selection mode) so the count and bulk actions stay honest.
+ if (selection.active && selection.count > 0) {
+ const presentIds = designs.map((d) => d.id);
+ const present = new Set(presentIds);
+ if ([...selection.selectedIds].some((id) => !present.has(id))) {
+ selection.prune(presentIds);
+ }
+ }
+
// Filter and sort designs
const sortedDesigns = useMemo(() => {
- let filtered = designs;
+ let filtered = filterByTags(designs, activeTags);
if (searchQuery.trim()) {
const query = searchQuery.toLowerCase();
- filtered = designs.filter((d) => d.name.toLowerCase().includes(query));
+ filtered = filtered.filter((d) => d.name.toLowerCase().includes(query));
}
return [...filtered].sort((a, b) => {
@@ -154,7 +193,7 @@ export function DesignListDialog({ open, onClose }: DesignListDialogProps) {
return b.updatedAt.localeCompare(a.updatedAt);
}
});
- }, [designs, searchQuery, sortBy, currentDesignId]);
+ }, [designs, activeTags, searchQuery, sortBy, currentDesignId]);
// Get localized sort options
const localizedSortOptions = useMemo(
@@ -256,6 +295,97 @@ export function DesignListDialog({ open, onClose }: DesignListDialogProps) {
[addToast, t]
);
+ const handleSaveTags = useCallback(
+ async (rawTags: string[]) => {
+ const edit = tagEdit;
+ if (!edit) return;
+
+ if (edit.mode === 'single' && edit.design) {
+ const next = normalizeTags(rawTags);
+ // Skip the write (and its updatedAt bump + sync) when nothing changed.
+ if (tagsEqual(next, edit.design.tags ?? [])) {
+ setTagEdit(null);
+ return;
+ }
+ const result = await updateDesignTags(edit.design.id, next);
+ if (isOk(result)) {
+ const saved = result.value;
+ setDesigns((prev) => prev.map((d) => (d.id === saved.id ? saved : d)));
+ if (saved.id === currentDesignId) {
+ useDesignerStore.getState().setDesignName(saved.name);
+ }
+ }
+ } else if (edit.mode === 'bulk') {
+ const ids = selection.selectedIds;
+ const targets = designs.filter((d) => ids.has(d.id));
+ const updated = new Map();
+ for (const d of targets) {
+ // Bulk = add the entered tags to each design's existing set (union).
+ const nextTags = normalizeTags([...(d.tags ?? []), ...rawTags]);
+ // Only write designs whose tag set actually changes — a no-op bulk
+ // tag shouldn't bump updatedAt or trigger a sync for every design.
+ if (tagsEqual(nextTags, d.tags ?? [])) continue;
+ const result = await updateDesignTags(d.id, nextTags);
+ if (isOk(result)) updated.set(result.value.id, result.value);
+ }
+ if (updated.size > 0) {
+ setDesigns((prev) => prev.map((d) => updated.get(d.id) ?? d));
+ addToast({
+ message: t('binDesigner.bulk.toastTagged', { count: updated.size }),
+ type: 'success',
+ duration: 2000,
+ });
+ }
+ selection.exit();
+ }
+ setTagEdit(null);
+ },
+ [tagEdit, selection, designs, currentDesignId, addToast, t]
+ );
+
+ const handleBulkDelete = useCallback(async () => {
+ const ids = [...selection.selectedIds];
+ // Track only the IDs that actually deleted, so a partial storage failure
+ // doesn't drop a still-present design from the UI.
+ const deletedIds: string[] = [];
+ for (const id of ids) {
+ const design = designs.find((d) => d.id === id);
+ if (!design) continue;
+ const result = await deleteDesign(design.id);
+ if (isOk(result)) {
+ removeRegistryEntry(design.id);
+ deletedIds.push(id);
+ }
+ }
+ if (deletedIds.length > 0) {
+ const removed = new Set(deletedIds);
+ setDesigns((prev) => prev.filter((d) => !removed.has(d.id)));
+ addToast({
+ message: t('binDesigner.bulk.toastDeleted', { count: deletedIds.length }),
+ type: 'success',
+ duration: 2000,
+ });
+ }
+ setShowBulkDeleteConfirm(false);
+ selection.exit();
+ }, [selection, designs, addToast, t]);
+
+ const handleBulkExport = useCallback(() => {
+ const ids = selection.selectedIds;
+ const targets = designs.filter((d) => ids.has(d.id));
+ for (const d of targets) {
+ downloadDesignAsFile(d.name, d.params);
+ }
+ if (targets.length > 0) {
+ addToast({
+ message: t('binDesigner.bulk.toastExported', { count: targets.length }),
+ type: 'success',
+ duration: 2000,
+ });
+ }
+ selection.exit();
+ }, [selection, designs, addToast, t]);
+
const getGridColumns = useCallback(() => {
if (effectiveViewMode === 'list' || !gridRef.current) return 1;
const style = window.getComputedStyle(gridRef.current);
@@ -368,7 +498,7 @@ export function DesignListDialog({ open, onClose }: DesignListDialogProps) {
}}
>
{t('binDesigner.savedDesigns')}
+ {!showImport && designs.length > 0 && !selection.active && (
+
+ )}