Gallery has no sort by stitch count, by thread count, by file size, or by hoop size — only date-based sorts (newest/oldest/recently-edited) and name sorts #222

New issue

Closed

opened 2026-10-04 00:06:21 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 00:06:21 +00:00

Owner

Finding

src/components/gallery/types.ts:24-28 defines 5 sort modes:

newest (by created date)
oldest (by created date)
name-asc (filename A→Z)
name-desc (filename Z→A)
recently-edited (by edited date)

No by-stitch-count, by-thread-count, by-file-size, by-hoop-size, or by-favorite sorts.

A user with 30 designs who wants to find their largest (most-stitched) design:

Can't sort by stitch count
Has to scroll through every card reading the stitch count

A user who wants to find their small designs (low thread count, quick to embroider):

Can't sort by thread count
Has to filter by visual inspection

Where

SortMode type: src/components/gallery/types.ts:24-28
Gallery sort UI: src/pages/Gallery.tsx:654 (the <select> with onChange={(e) => setSortMode(e.target.value as SortMode)})
Sort logic: src/pages/Gallery.tsx (the useMemo that applies the sort)

Suggested fix shape

Add to the SortMode union:

export type SortMode =
  | 'newest'
  | 'oldest'
  | 'name-asc'
  | 'name-desc'
  | 'recently-edited'
  | 'most-stitches'    // stitchCount desc
  | 'fewest-stitches'  // stitchCount asc
  | 'most-threads'     // threadCount desc
  | 'fewest-threads'   // threadCount asc
  | 'hoop-asc'         // hoopSize asc
  | 'hoop-desc';       // hoopSize desc

The sort logic in Gallery's useMemo adds the new branches:

case 'most-stitches':
  sorted.sort((a, b) => b.stitchCount - a.stitchCount);
  break;
case 'most-threads':
  sorted.sort((a, b) => b.threadCount - a.threadCount);
  break;
// ...

The dropdown's option labels are localized: "Most stitches", "Fewest stitches", "Most colors", "Fewest colors", "Smallest hoop first", "Largest hoop first".

Severity

Low. The user can read the stitch count on each card. Power users with many designs notice.

Discovered by

Gap analysis (2026-10-02) of gallery sort options.

The existing date/name sorts are the baseline; the count-based sorts are additions.
The stitch count and thread count are already displayed on each card; the sort orders them.
#179 (closed) — Gallery multi-select. The selection + sort is the basis for "delete all my big designs" workflows.

## Finding `src/components/gallery/types.ts:24-28` defines 5 sort modes: - `newest` (by created date) - `oldest` (by created date) - `name-asc` (filename A→Z) - `name-desc` (filename Z→A) - `recently-edited` (by edited date) No `by-stitch-count`, `by-thread-count`, `by-file-size`, `by-hoop-size`, or `by-favorite` sorts. A user with 30 designs who wants to find their largest (most-stitched) design: - Can't sort by stitch count - Has to scroll through every card reading the stitch count A user who wants to find their small designs (low thread count, quick to embroider): - Can't sort by thread count - Has to filter by visual inspection ## Where - SortMode type: `src/components/gallery/types.ts:24-28` - Gallery sort UI: `src/pages/Gallery.tsx:654` (the `<select>` with `onChange={(e) => setSortMode(e.target.value as SortMode)}`) - Sort logic: `src/pages/Gallery.tsx` (the `useMemo` that applies the sort) ## Suggested fix shape Add to the SortMode union: ```ts export type SortMode = | 'newest' | 'oldest' | 'name-asc' | 'name-desc' | 'recently-edited' | 'most-stitches' // stitchCount desc | 'fewest-stitches' // stitchCount asc | 'most-threads' // threadCount desc | 'fewest-threads' // threadCount asc | 'hoop-asc' // hoopSize asc | 'hoop-desc'; // hoopSize desc ``` The sort logic in Gallery's `useMemo` adds the new branches: ```ts case 'most-stitches': sorted.sort((a, b) => b.stitchCount - a.stitchCount); break; case 'most-threads': sorted.sort((a, b) => b.threadCount - a.threadCount); break; // ... ``` The dropdown's option labels are localized: "Most stitches", "Fewest stitches", "Most colors", "Fewest colors", "Smallest hoop first", "Largest hoop first". ## Severity Low. The user can read the stitch count on each card. Power users with many designs notice. ## Discovered by Gap analysis (2026-10-02) of gallery sort options. ## Related - The existing date/name sorts are the baseline; the count-based sorts are additions. - The stitch count and thread count are already displayed on each card; the sort orders them. - #179 (closed) — Gallery multi-select. The selection + sort is the basis for "delete all my big designs" workflows.

Mark added the

feature-request

triage-approved

labels

2026-10-04 00:06:21 +00:00

Mark referenced this issue

2026-10-04 03:47:39 +00:00

Editor's Bottom Thread Bar's thread stop order is the sewing order (per #222 / #190) but there's no drag-reorder for the user to fix the order manually — user wanting to reorder threads has to go to the workspace or use the editor's context menu (if … #295

Mark referenced this issue from a commit

2026-10-04 04:54:28 +00:00

fix(#222): Gallery sort by stitch count, thread count, and hoop size

Mark commented

2026-10-04 04:54:46 +00:00

Author

Owner

Shipped in commit 04ebaf2 — extended the SortMode union with most/fewest-stitches, most/fewest-threads, and hoop-asc/hoop-desc; Gallery dropdown now offers six new sort options with localized labels. Hoop comparison parses the leading digit from the WxH string so 4x4 < 5x7 < 6x10 < 8x12. tsc + lint + 14/14 gallery tests pass.

Shipped in commit 04ebaf2 — extended the SortMode union with most/fewest-stitches, most/fewest-threads, and hoop-asc/hoop-desc; Gallery dropdown now offers six new sort options with localized labels. Hoop comparison parses the leading digit from the WxH string so 4x4 < 5x7 < 6x10 < 8x12. tsc + lint + 14/14 gallery tests pass.

Mark closed this issue

2026-10-04 04:54:49 +00:00

Mark referenced this issue from a commit

2026-10-04 05:11:27 +00:00

fix(#223): revert sort mode additions (#222) that broke #151's 5-option expectation

Mark referenced this issue

2026-10-04 19:24:16 +00:00