Adding Category Visibility Controls to My Receipt Scanner PWA

Just wrapped up another coding session on my receipt scanner app, and I'm pretty happy with how the category management is shaping up.

What I Built Today

The big focus was making category filters more polished and giving users control over which categories show up in their interface.

Redesigned Filter Pills

I completely overhauled the category filter design on the main dashboard. The old horizontal scroll with gray outlines felt clunky, so I switched to a flex-wrap layout that adapts better to different screen sizes.

The new styling is way cleaner:

• Active pills: Full colored background matching the category color, white text, nice drop shadow
• Inactive pills: Dark background with a small colored dot on the left
• Special categories: "All" gets a teal treatment, "Flagged" uses red

Much better visual hierarchy and it works great on mobile.

Category Visibility Toggle

This was the meaty feature - users can now hide categories they don't want cluttering their filter bar. Added an eye icon toggle in the Settings page that lets you show/hide each category.

The implementation details I'm proud of:

• Hidden categories get dimmed to 50% opacity so you know they're there but disabled
• You can't hide a category that has receipts assigned to it (shows an alert with the count)
• Hover tooltips explain what will happen when you click
• Hidden categories are automatically filtered out of the main dashboard

Technical Bits

Added an is_visible boolean column to the categories table. I'm defaulting it to true and using a check for is_visible !== false so existing categories without the column still show up.

The receipt counting logic queries all user receipts and groups by category_id before allowing a hide action. Probably not the most efficient approach at scale, but it works perfectly for the current use case.

What's Next

I need to run the database migration to add the is_visible column in Supabase. After that, I want to test the flow end-to-end and maybe add some loading states when toggling visibility.

Feeling good about the progress - the app is starting to feel like a real product instead of just a prototype. The little UX touches like preventing users from hiding categories with data make a huge difference in polish.