Global Search Box for Spools/Filaments #35

New Issue

tonym · 2026-01-16T04:57:58Z

tonym commented

2026-01-16 04:57:58 +00:00

Summary

Add a prominent search box to quickly find spools/filaments by name, color, material, etc.

Upstream Issues

https://github.com/Donkie/Spoolman/issues/598 (4 reactions)
https://github.com/Donkie/Spoolman/issues/356 (9 reactions) - Fuzzy search

Problem

With large inventories, scrolling through filtered lists is tedious. Users want to quickly type and find items.

Proposed Solution

Prominent search input at top of spool/filament lists
Searches across multiple fields: name, material, color, vendor, notes
Real-time filtering as you type

2. Fuzzy Search

Tolerate spelling variations and typos
Use libraries like fuse.js for fuzzy matching
Category-aware filtering based on current page context

3. Global Search (Header)

Search icon in header/nav
Opens search modal or dropdown
Search across ALL resources (spools, filaments, vendors, locations)
Keyboard shortcut: Cmd/Ctrl+K

4. Search Results

Group by resource type
Show color swatch, name, key details
Click to navigate to item

Implementation

// Fuzzy search with fuse.js
const fuse = new Fuse(items, {
  keys: ["name", "material", "vendor.name", "color_hex"],
  threshold: 0.4
});

#16 Filter by Color

## Summary Add a prominent search box to quickly find spools/filaments by name, color, material, etc. ## Upstream Issues - https://github.com/Donkie/Spoolman/issues/598 (4 reactions) - https://github.com/Donkie/Spoolman/issues/356 (9 reactions) - Fuzzy search ## Problem With large inventories, scrolling through filtered lists is tedious. Users want to quickly type and find items. ## Proposed Solution ### 1. Search Box on List Pages - Prominent search input at top of spool/filament lists - Searches across multiple fields: name, material, color, vendor, notes - Real-time filtering as you type ### 2. Fuzzy Search - Tolerate spelling variations and typos - Use libraries like fuse.js for fuzzy matching - Category-aware filtering based on current page context ### 3. Global Search (Header) - Search icon in header/nav - Opens search modal or dropdown - Search across ALL resources (spools, filaments, vendors, locations) - Keyboard shortcut: Cmd/Ctrl+K ### 4. Search Results - Group by resource type - Show color swatch, name, key details - Click to navigate to item ## Implementation ```tsx // Fuzzy search with fuse.js const fuse = new Fuse(items, { keys: ["name", "material", "vendor.name", "color_hex"], threshold: 0.4 }); ``` ## Related - #16 Filter by Color

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:09 +00:00

tonym referenced this issue from a commit

2026-01-23 05:17:45 +00:00

docs: Update CLAUDE.md with completed issues #20, #25, #35, #36, #39, #42, #43

Sign in to join this conversation.