Hey everyone, I just pushed a major update to Packstack. Beyond a massive styles and usability refresh, here are the highlights:

* 📦 **Bulk Inventory Management:** Multi-select for archiving/restoring.
* 📂 **Custom Categories:** Full control over renaming and reordering.
* ✏️ **Quick Edit:** Click any item name in your packing list to edit on the fly.
* ⚠️ **Navigation Safeguard:** No more losing unsaved packs by accident.
* ℹ️ **Tooltips:** Improved UI clarity.

**The Big Teaser:** Mobile is coming! I'm working on native iOS and Android apps that sync perfectly with your existing account. No data re-entry required.

Stay tuned!

# FULL BREAKDOWN

  
Major Infrastructure

Full dependency upgrade and shadcn migration

* Vite 4 -> 6, TypeScript 5.1 -> 5.7, React 18.2 -> 18.3
* Tailwind CSS v3 -> v4 (CSS-based config, deleted JS config files)
* Replaced 16 hand-rolled Radix UI wrappers with official shadcn/ui components
* Upgraded zustand v4 -> v5, date-fns v2 -> v4, react-day-picker v8 -> v9, cmdk v0 -> v1, Sentry to v10
* Consolidated 11 individual u/radix-ui/react-\* packages into the unified radix-ui package
* Downgraded Zod v4 back to v3 to fix email validation breakage with u/hookform/resolvers

TanStack Router migration

* Replaced react-router-dom with u/tanstack/react-router (code-based routing)
* Added route-level data loading with ensureQueryData -- data fetching starts on navigation instead of after component mount
* Auth guard moved to beforeLoad hook on layout routes
* Simplified PackPage by removing manual loading states (data available via Route.useLoaderData())

# Features

Bulk archive/restore for inventory

* Added PUT /item/bulk-archive and PUT /item/bulk-restore backend endpoints
* Multi-select checkboxes on every inventory row with per-category "select all" (including indeterminate state)
* Selection toolbar with archive/restore buttons that derive from the actual selected items' status (disabled when mixed)
* Moved "Show archived items" toggle into the selection toolbar
* Archived items show a subtle red highlight behind the name
* Replaced GripHorizontal with GripVertical drag handle

Manage Categories sheet

* Removed the category sidebar from the Inventory page
* Added a standalone "Manage Categories" button
* Converted the category management modal from a Dialog to a Sheet (slides in from the right)
* Added inline rename inputs for each category with batch save (reorder + renames together)
* Backend updated to handle renaming global categories by creating user-owned copies
* Made the "Uncategorized" row draggable with gap-based position encoding (no backend changes needed)

Clickable item names on packing lists

* Item names in the packing list are now clickable, opening the edit item modal
* Added updateBaseItem action to the Zustand store so edits sync back to the packing list immediately
* Added onSave callback to ItemForm to bridge React Query and Zustand store data flows

Navigation guard on New Pack page

* Added useBlocker from TanStack Router to warn users before navigating away with unsaved changes
* Also covers browser tab close/refresh via enableBeforeUnload
* Saving resets the store so the blocker doesn't fire on the post-save redirect

Tooltips on inventory form

* Created a new Tooltip component (Radix-based, shadcn/new-york style)
* Moved Product and Variant helper text from FormDescription to info icon tooltips
* Added a consumable tooltip explaining "Products that get used up during a hike, e.g. food, fuel, sunscreen"

# UI/Design Improvements

Header redesign

* 3-column grid layout with logo left, centered nav links (pill-style active state), and right-side actions
* "Create Pack" is now a proper button with outline variant
* Gear icon dropdown consolidates Settings, dark/light mode toggle switch, Join Reddit link, and Logout
* Extracted useDarkMode hook for reusable dark mode logic

Light mode color overhaul

* Switched primary from washed-out periwinkle to a deep indigo (225 70% 48%)
* Sharpened borders, inputs, muted text, popover text, accent surfaces, and focus rings
* Added a surface design token (subtle gray in light, invisible in dark) for card/sidebar depth
* Applied bg-surface to trip cards and pack page sidebars

Settings page modernization

* Split into labeled sections (Account, Preferences)
* Weight and Distance units side-by-side in a 2-column grid
* Logout moved to the header dropdown
* Changed all variant="secondary" buttons to default across the entire app

Packing lists view redesign

* Widened container from 512px to 672px
* Cards have more padding, softer corners, hover effects, and calendar icons for dates
* Action buttons (clone/delete) appear on card hover with contextual colors
* Added tooltips to duplicate and delete buttons

Pack page layout

* Full-height sidebars with independent scrolling using shadcn ScrollArea
* Inventory sidebar has static header/search with scrollable gear list
* Save button changed from green secondary to primary indigo

Weight breakdown chart

* Dialog widened to 768px with side-by-side chart + table layout
* Enabled arc link labels showing "Category (X.X%)" on each segment
* Polished table with semibold headers and tighter color dots

Auth pages polish

* Full viewport centering with Packstack logo above the form
* Login: "Welcome back" heading with styled error banners
* Register: "Create an account" with consistent spacing
* Fixed "Back to" link pointing to wrong page on password reset

Empty states redesign

* Removed bordered Box wrapper for a lighter feel
* Added circular icon badges (PackageOpen, Map, Backpack)
* Improved copy: "Your pack is empty", "No packing lists yet", "Your inventory is empty"

Inventory table polish

* Empty values now show a styled em dash
* Category headers changed from primary blue to neutral black/white
* Added "Total value" metric next to the search bar
* Fixed drag handle padding for even spacing
* All buttons now show pointer cursor on hover
* Sticky header section (search, toolbar) on the Inventory page
* Input backgrounds lightened on bg-surface areas
* "Worn" toggle now fills with primary color when selected, with brighter outline in non-worn state

Inventory item selected state

* Replaced heavy full-border selected state with a 2px left accent bar + subtle background tint

# Bug Fixes

Infinite re-render loop

* CategorizedPackItemsTable was using useTripPacks without useShallow, causing the selector to create a new object on every render
* This triggered Zustand's useSyncExternalStore to detect a "mismatch" on each render, creating an infinite loop
* Fixed by wrapping the selector with useShallow

Category reorder instability

* Categories were reordering when toggling "Show archived items" because uncatPosition was calculated from the filtered groups
* Fixed by computing sort orders from the full unfiltered inventory data

Nav blocker on save

* useBlocker was firing on the post-save redirect because items still existed in the store
* Fixed by resetting the packs store to initial state before redirecting



Major Packstack Updates: UI Overhaul + Mobile App in the works!