Gallery has no 'tag' system for designs — user wanting to group designs by project (e.g., 'logo', 'birthday', 'wedding') can only use folders (one folder per design) or favorites (binary), no multi-tag #310

New issue

Closed

opened 2026-10-04 03:50:03 +00:00 by Mark · 0 comments

Mark commented

2026-10-04 03:50:03 +00:00

Owner

Finding

The Gallery has folders and favorites as the only organization. A user wanting to tag a single design with multiple attributes:

"Logo" + "Work" + "Q1-2024"
Currently: pick ONE folder, lose the rest
Or: don't folder it, lose the organization

grep -rn 'tag\b\|tags\b' src/components/gallery/ returns 0 (except for unrelated HTML elements).

The fix is a tag system: each design can have multiple tags, and the user can filter by tag.

Where

Gallery state: src/pages/Gallery.tsx
Design type: src/components/gallery/types.ts (currently has folderId, isFavorite; no tags)
No tags: grep -rn 'tags' src/components/gallery/types.ts returns 0
The filter state: searchQuery, sortMode, favoritesOnly, activeFolder (no tag filter)

Suggested fix shape

Type: add tags: string[] to the Design type:

export interface Design {
  // ... existing fields
  tags: string[];
}

Add tags UI: in the per-card edit modal (rename dialog or a new "Edit tags" dialog):

<Input
  value={tagsInput}
  onChange={(e) => setTagsInput(e.target.value)}
  placeholder="Comma-separated tags (e.g., logo, work, q1-2024)"
/>

Tag chips on card: below the design's name, show small tag chips:

{design.tags.slice(0, 3).map((tag) => (
  <span className="text-[10px] px-1.5 py-0.5 rounded" style={{ backgroundColor: '#EAE5DD' }}>
    {tag}
  </span>
))}
{design.tags.length > 3 && <span className="text-[10px]">+{design.tags.length - 3}</span>}

Filter by tag: in the gallery's filter bar, a "Tags" dropdown:

<Select value={activeTag} onChange={(e) => setActiveTag(e.target.value)}>
  <option value="">All tags</option>
  {allTags.map((tag) => (
    <option key={tag} value={tag}>{tag}</option>
  ))}
</Select>

allTags is computed from the union of all designs' tags.

Tag suggestions: as the user types in the tag input, show existing tags (autocomplete).
Bulk tag: in the multi-select toolbar (per #179), a "Tag..." button applies the same tag(s) to all selected designs.

Severity

Low. The user can use folders or favorites. Power users with complex organization notice.

Discovered by

Gap analysis (2026-10-02) of gallery organization.

The folder system (per #148) is the single-attribute organization. Tags are the multi-attribute.
The favorites (per the snippet earlier) is a binary tag. Multi-tags is the richer version.
Notion/Figma have tags. Standard in modern design tools.

## Finding The Gallery has folders and favorites as the only organization. A user wanting to tag a single design with multiple attributes: - "Logo" + "Work" + "Q1-2024" - Currently: pick ONE folder, lose the rest - Or: don't folder it, lose the organization `grep -rn 'tag\b\|tags\b' src/components/gallery/` returns 0 (except for unrelated HTML elements). The fix is a tag system: each design can have multiple tags, and the user can filter by tag. ## Where - Gallery state: `src/pages/Gallery.tsx` - Design type: `src/components/gallery/types.ts` (currently has folderId, isFavorite; no tags) - No tags: `grep -rn 'tags' src/components/gallery/types.ts` returns 0 - The filter state: `searchQuery, sortMode, favoritesOnly, activeFolder` (no tag filter) ## Suggested fix shape 1. **Type**: add `tags: string[]` to the Design type: ```ts export interface Design { // ... existing fields tags: string[]; } ``` 2. **Add tags UI**: in the per-card edit modal (rename dialog or a new "Edit tags" dialog): ```tsx <Input value={tagsInput} onChange={(e) => setTagsInput(e.target.value)} placeholder="Comma-separated tags (e.g., logo, work, q1-2024)" /> ``` 3. **Tag chips on card**: below the design's name, show small tag chips: ```tsx {design.tags.slice(0, 3).map((tag) => ( <span className="text-[10px] px-1.5 py-0.5 rounded" style={{ backgroundColor: '#EAE5DD' }}> {tag} </span> ))} {design.tags.length > 3 && <span className="text-[10px]">+{design.tags.length - 3}</span>} ``` 4. **Filter by tag**: in the gallery's filter bar, a "Tags" dropdown: ```tsx <Select value={activeTag} onChange={(e) => setActiveTag(e.target.value)}> <option value="">All tags</option> {allTags.map((tag) => ( <option key={tag} value={tag}>{tag}</option> ))} </Select> ``` `allTags` is computed from the union of all designs' tags. 5. **Tag suggestions**: as the user types in the tag input, show existing tags (autocomplete). 6. **Bulk tag**: in the multi-select toolbar (per #179), a "Tag..." button applies the same tag(s) to all selected designs. ## Severity Low. The user can use folders or favorites. Power users with complex organization notice. ## Discovered by Gap analysis (2026-10-02) of gallery organization. ## Related - The folder system (per #148) is the single-attribute organization. Tags are the multi-attribute. - The favorites (per the snippet earlier) is a binary tag. Multi-tags is the richer version. - Notion/Figma have tags. Standard in modern design tools.