diff --git a/CLAUDE.md b/CLAUDE.md index 8ad25c0..ce2c886 100644 --- a/CLAUDE.md +++ b/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 diff --git a/README.md b/README.md index 1147e84..8dcf985 100644 --- a/README.md +++ b/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`: