Gallery View for Spools (Color Grid) #20

New Issue

tonym · 2026-01-16T04:29:16Z

tonym commented

2026-01-16 04:29:16 +00:00

Summary

Add a gallery/grid view option for spools showing large color blocks instead of detailed table rows.

Upstream Issue

https://github.com/Donkie/Spoolman/issues/768

Problem

When selecting filaments by color, the detailed list view shows too much information. Users want to quickly browse by color visually.

Proposed Design

┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│        │ │        │ │        │ │        │
│  🔴    │ │  🔵    │ │  🟢    │ │  🟡    │
│        │ │        │ │        │ │        │
│  PLA   │ │  PETG  │ │  PLA   │ │  TPU   │
├────────┤ ├────────┤ ├────────┤ ├────────┤
│ 847g   │ │ 523g   │ │ 102g   │ │ 945g   │
└────────┘ └────────┘ └────────┘ └────────┘
  Prusa     Hatchbox    eSUN      Overture

Each tile shows:

Large color block (fills most of tile)
Material type overlay
Remaining weight
Filament/vendor name below

Implementation

Frontend

Add view toggle button (Table | Gallery) on spool list page
Store preference in localStorage
Gallery uses CSS Grid or Ant Design Card grid
Clicking tile goes to spool detail

Responsive

Mobile: 2 columns
Tablet: 3-4 columns
Desktop: 5-6 columns

#17 Image Attachments - gallery could show filament photos if available

## Summary Add a gallery/grid view option for spools showing large color blocks instead of detailed table rows. ## Upstream Issue - https://github.com/Donkie/Spoolman/issues/768 ## Problem When selecting filaments by color, the detailed list view shows too much information. Users want to quickly browse by color visually. ## Proposed Design ``` ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │ │ │ │ │ │ │ 🔴 │ │ 🔵 │ │ 🟢 │ │ 🟡 │ │ │ │ │ │ │ │ │ │ PLA │ │ PETG │ │ PLA │ │ TPU │ ├────────┤ ├────────┤ ├────────┤ ├────────┤ │ 847g │ │ 523g │ │ 102g │ │ 945g │ └────────┘ └────────┘ └────────┘ └────────┘ Prusa Hatchbox eSUN Overture ``` Each tile shows: - Large color block (fills most of tile) - Material type overlay - Remaining weight - Filament/vendor name below ## Implementation ### Frontend - Add view toggle button (Table | Gallery) on spool list page - Store preference in localStorage - Gallery uses CSS Grid or Ant Design Card grid - Clicking tile goes to spool detail ### Responsive - Mobile: 2 columns - Tablet: 3-4 columns - Desktop: 5-6 columns ## Related - #17 Image Attachments - gallery could show filament photos if available

tonym referenced this issue

2026-01-16 04:48:43 +00:00

Table Column Customization (Show/Hide, Reorder, Manufacturer Column) #29

tonym referenced this issue

2026-01-16 04:59:11 +00:00

Spool-Level Overrides (Color, Price, Weight) #36

tonym referenced this issue from a commit

2026-01-23 05:09:50 +00:00

feat: Add quick wins batch (#42, #43, #25, #35, #20, #36, #39)

tonym closed this issue

2026-01-23 05:14:10 +00:00

tonym referenced this issue from a commit