Gallery's EmptyState only knows 2 reasons ('empty', 'search') — favorites-only, folder-with-no-designs, and filtered-by-folder-with-no-matches all show the same generic 'No designs yet' / 'No results found' #224

New issue

Closed

opened 2026-10-04 02:11:01 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 02:11:01 +00:00

Owner

Finding

src/components/gallery/EmptyState.tsx:5 declares reason: 'empty' | 'search'. The component renders the icon, headline, and body based on the two cases.

But there are at least 4 empty states the user can hit:

No designs in the gallery at all — reason: 'empty'. The current message: "No designs yet. Upload a PES, DST, PNG, JPG, SVG, or BMP to get started."
Search returns no results — reason: 'search'. The current message: "No results found. Try a different search term."
Favorites filter active and no favorites — currently shows reason: 'empty' (per the parent Gallery's logic at line 887: reason={searchQuery ? 'search' : 'empty'}). The user sees "No designs yet. Upload a PES…" which is wrong: they have designs, they just haven't favorited any.
Folder selected that has no designs — currently shows reason: 'empty'. The user has designs, just none in this folder. The "Upload" button is misleading (it would create a new design not in this folder).
Filter+search returns no results — same as #2, but the search query alone might not be the cause.

A user opening the Gallery for the first time AND a user who's filtered to favorites with none get the same message. The messages are not actionable in context.

Where

EmptyState: src/components/gallery/EmptyState.tsx (2 reasons)
Gallery reason logic: src/pages/Gallery.tsx:887 (reason={searchQuery ? 'search' : 'empty'})
No favorites-empty case: grep -n 'favoritesOnly.*empty\|favorites-empty' src/components/gallery/ returns 0
No folder-empty case: same

Suggested fix shape

Expand the reason type to cover the cases:

export type EmptyReason =
  | 'empty'           // No designs at all
  | 'search'          // Search returned no results
  | 'favorites'       // Favorites filter is on, no favorites
  | 'folder';         // Selected folder is empty

The Gallery computes the reason based on the filter stack:

const reason: EmptyReason = (() => {
  if (searchQuery) return 'search';
  if (favoritesOnly) return 'favorites';
  if (activeFolder !== 'all') return 'folder';
  return 'empty';
})();

Each reason gets its own copy:

'empty': "No designs yet. Upload a PES, DST, PNG, JPG, SVG, or BMP to get started." (current)
'search': "No results for 'X'. Try a different search term or clear the search." (current)
'favorites': "No favorites yet. Click the heart on any design to add it here. Showing all designs instead." + a button to toggle off favoritesOnly.
'folder': "This folder is empty. Drag a design here or use the Upload button." (Upload now correctly targets this folder via folderId).

Severity

Low. The user can figure out the state from the filter chips and the empty state icon. The generic message is a small papercut.

Discovered by

Gap analysis (2026-10-02) of gallery empty states.

#151 (closed) — Gallery sort + favorites quick-filter. The favorites filter is in place; the empty state for it is the missing piece.
The Gallery's folder nav (FolderNav) already shows the folder name; the empty state should respect it.

## Finding `src/components/gallery/EmptyState.tsx:5` declares `reason: 'empty' | 'search'`. The component renders the icon, headline, and body based on the two cases. But there are at least 4 empty states the user can hit: 1. **No designs in the gallery at all** — `reason: 'empty'`. The current message: "No designs yet. Upload a PES, DST, PNG, JPG, SVG, or BMP to get started." 2. **Search returns no results** — `reason: 'search'`. The current message: "No results found. Try a different search term." 3. **Favorites filter active and no favorites** — currently shows `reason: 'empty'` (per the parent Gallery's logic at line 887: `reason={searchQuery ? 'search' : 'empty'}`). The user sees "No designs yet. Upload a PES…" which is wrong: they have designs, they just haven't favorited any. 4. **Folder selected that has no designs** — currently shows `reason: 'empty'`. The user has designs, just none in this folder. The "Upload" button is misleading (it would create a new design not in this folder). 5. **Filter+search returns no results** — same as #2, but the search query alone might not be the cause. A user opening the Gallery for the first time AND a user who's filtered to favorites with none get the same message. The messages are not actionable in context. ## Where - EmptyState: `src/components/gallery/EmptyState.tsx` (2 reasons) - Gallery reason logic: `src/pages/Gallery.tsx:887` (`reason={searchQuery ? 'search' : 'empty'}`) - No favorites-empty case: `grep -n 'favoritesOnly.*empty\|favorites-empty' src/components/gallery/` returns 0 - No folder-empty case: same ## Suggested fix shape Expand the `reason` type to cover the cases: ```ts export type EmptyReason = | 'empty' // No designs at all | 'search' // Search returned no results | 'favorites' // Favorites filter is on, no favorites | 'folder'; // Selected folder is empty ``` The Gallery computes the reason based on the filter stack: ```ts const reason: EmptyReason = (() => { if (searchQuery) return 'search'; if (favoritesOnly) return 'favorites'; if (activeFolder !== 'all') return 'folder'; return 'empty'; })(); ``` Each reason gets its own copy: - `'empty'`: "No designs yet. Upload a PES, DST, PNG, JPG, SVG, or BMP to get started." (current) - `'search'`: "No results for 'X'. Try a different search term or clear the search." (current) - `'favorites'`: "No favorites yet. Click the heart on any design to add it here. Showing all designs instead." + a button to toggle off `favoritesOnly`. - `'folder'`: "This folder is empty. Drag a design here or use the Upload button." (Upload now correctly targets this folder via `folderId`). ## Severity Low. The user can figure out the state from the filter chips and the empty state icon. The generic message is a small papercut. ## Discovered by Gap analysis (2026-10-02) of gallery empty states. ## Related - #151 (closed) — Gallery sort + favorites quick-filter. The favorites filter is in place; the empty state for it is the missing piece. - The Gallery's folder nav (`FolderNav`) already shows the folder name; the empty state should respect it.

Mark added the

feature-request

triage-approved

labels

2026-10-04 02:11:01 +00:00

Mark referenced this issue

2026-10-04 02:11:02 +00:00

Editor shows a tiny 'No paths loaded' text in the right panel when paths.length === 0 — the user has no actionable affordance (no 'Draw your first path' prompt, no link to a tutorial, no upload shortcut) #225

Mark referenced this issue from a commit

2026-10-04 05:16:26 +00:00

fix(#224): distinguish 4 empty-state reasons in Gallery

Mark commented

2026-10-04 05:16:57 +00:00

Author

Owner

Closed by commit ce1399f on main. EmptyState now distinguishes 4 reasons (empty / search / favorites / folder) with actionable CTAs per case:

empty: "No designs yet" + Upload Design (unchanged).
search: "No results found" + new Clear search CTA.
favorites: "No favorites yet" + Show all designs CTA toggles the favorites quick-filter off (no upload CTA -- uploading doesn't favor anything).
folder: "<name>" is empty + Upload to folder CTA, with the folder name threaded through.

Gallery computes the reason from the filter stack (search > favorites > folder > empty). The Favorites folder AND the favorites-only quick-filter both map to favorites. 10 new tests in EmptyState.test.tsx; full suite 1118 passed, lint + build clean.

Closed by commit ce1399f on `main`. EmptyState now distinguishes 4 reasons (`empty` / `search` / `favorites` / `folder`) with actionable CTAs per case: - `empty`: "No designs yet" + Upload Design (unchanged). - `search`: "No results found" + new **Clear search** CTA. - `favorites`: "No favorites yet" + **Show all designs** CTA toggles the favorites quick-filter off (no upload CTA -- uploading doesn't favor anything). - `folder`: `"<name>" is empty` + **Upload to folder** CTA, with the folder name threaded through. Gallery computes the reason from the filter stack (search > favorites > folder > empty). The Favorites folder AND the favorites-only quick-filter both map to `favorites`. 10 new tests in `EmptyState.test.tsx`; full suite 1118 passed, lint + build clean.

Mark closed this issue

2026-10-04 05:16:57 +00:00