Update documentation for item categories feature

- Add categories.json to file structure in both docs
- Document itemCategories loading in frontend architecture
- Add Item Categories section to README with category table
- Update data model to include category field
- Update filtering documentation with categoryFilter
- Add customization instructions for adding categories

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

CLAUDE.md

@@ -13,6 +13,7 @@ Pantry is a simple web app for tracking kitchen pantry items. It's a single-page
 - `index.html` - Frontend (HTML/CSS/JS all in one file)
 - `api.php` - Backend API (JSON file-based storage)
 - `containers.json` - Container type definitions with categories
+- `categories.json` - Item category definitions (Flours, Spices, Pasta, etc.)
 - `og-image.png` - OpenGraph image for social sharing
 - `deploy` - Rsync deployment script
 
@@ -23,6 +24,7 @@ Pantry is a simple web app for tracking kitchen pantry items. It's a single-page
 - Uses QRCode.js from CDN for QR code generation
 - Custom CSS with CSS variables for theming (earthy color palette: cream, terracotta, forest green)
 - Container types loaded from `containers.json` at startup into `containerTypes` object
+- Item categories loaded from `categories.json` at startup into `itemCategories` object
 - All API calls go through the `apiCall()` function which POSTs to `api.php`
 
 **Backend (`api.php`)**:
@@ -36,6 +38,12 @@ Pantry is a simple web app for tracking kitchen pantry items. It's a single-page
 - Categories have: `name`, `containers[]`
 - Frontend displays as "Category: Container Name" (e.g., "Glass Spice Jars: Hex (Large)")
 
+**Item Categories (`categories.json`)**:
+- Defines item categories for organizing inventory (Flours, Spices, Pasta, Baking, etc.)
+- Each category has: key (e.g., `flours`), `name`, `color`
+- Category tabs are dynamically generated in the nav bar
+- Items display their category as a colored tag
+
 **Data Storage**:
 - `data/inventory.json` - Inventory items
 - `data/pin.txt` - 4-digit PIN for edit mode (plain text)
@@ -72,12 +80,13 @@ The `deploy` script uses rsync to push to YunoHost:
 ## Key Implementation Details
 
 **Data model:**
-- Items have: `id`, `name`, `container` (type ID), `outOfStock` (boolean)
+- Items have: `id`, `name`, `container` (type ID), `category` (category key), `outOfStock` (boolean)
 
 **Filtering:**
-- `currentFilter` - Tab filter: 'all', 'in-stock', 'out', 'spices', 'qr'
+- `currentFilter` - Tab filter: 'all', 'in-stock', 'out', 'category', 'recent', 'qr'
+- `categoryFilter` - Category filter (null or category key), set by clicking category tabs
 - `containerFilter` - Container type filter (null or container ID), set by clicking legend items
-- Both filters combine with search text
+- All filters combine with search text
 
 **Container legend:**
 - Clickable - filters inventory by that container type

README.md

@@ -7,7 +7,8 @@ A simple web app for tracking kitchen pantry items across your household.
 ## Features
 
 - **Search** - Instantly filter ingredients by name
-- **Filter tabs** - View All, In Stock, Out of Stock, or Spices only
+- **Filter tabs** - View All, In Stock, Out of Stock, Recent, or by category
+- **Category tabs** - Filter by item category (Flours, Spices, Pasta, Baking, etc.)
 - **Container filtering** - Click any container type in the legend to filter by it
 - **Container tracking** - Multiple container types organized by category with color-coded indicators
 - **Stock status** - Mark items as in-stock or out-of-stock
@@ -22,6 +23,7 @@ A simple web app for tracking kitchen pantry items across your household.
 index.html        - Frontend (HTML/CSS/JS, no build step)
 api.php           - Backend API (reads/writes JSON files)
 containers.json   - Container type definitions with categories
+categories.json   - Item category definitions
 og-image.png      - OpenGraph image for social sharing
 deploy            - Deployment script (rsync to server)
 data/             - Created automatically, excluded from git
@@ -42,6 +44,23 @@ Container types are defined in `containers.json` and organized by category:
 
 To add container types, edit `containers.json`.
 
+## Item Categories
+
+Item categories are defined in `categories.json`:
+
+| Key | Display Name |
+|-----|--------------|
+| flours | Flours & Starches |
+| spices | Spices & Seasonings |
+| pasta | Pasta & Grains |
+| baking | Baking |
+| produce | Beans & Dried Produce |
+| other | Other |
+
+Each item is assigned a category, which appears as a colored tag and can be filtered via category tabs.
+
+To add categories, edit `categories.json`.
+
 ## Deployment on YunoHost (My Webapp)
 
 ### 1. Install My Webapp
@@ -62,6 +81,7 @@ Upload to the `www` folder:
 - `index.html`
 - `api.php`
 - `containers.json`
+- `categories.json`
 - `og-image.png`
 
 ### 3. Set Permissions
@@ -106,6 +126,10 @@ Edit the script to set your `HOST` and `DIR` variables.
 
 Edit `containers.json` to add new categories or container types. The frontend loads this file automatically.
 
+### Adding Item Categories
+
+Edit `categories.json` to add new item categories. Each category needs a key, `name`, and `color` (hex). The frontend generates filter tabs automatically.
+
 ### Changing Colors
 
 Edit CSS variables at the top of `index.html`: