Source: /workspace/smartpantry-app/docs/STRUCTURE-EXTRACTION.md
# SmartPantry Structure Extraction — 2026-07-03
## Source
`/workspace/smartpantry-defirebased-archive/smartpantry-defirebased.html`
- 1.1MB, 23,390 lines
- No Firebase SDK imports
- No live Firestore calls
- 42 user-facing "Firebase" mentions remain (error messages, labels)
- This is the working source. Keep it until the new build is verified.
## Canonical navigation (panelNames map, source code)
```js
const panelNames = {
'inventory': 'Dashboard', // home/landing
'cupboard': 'My Cupboard', // inventory + browse
'whattocook': 'What to Cook', // recipes picker
'quickshop': 'Quick Shop', // shopping list
'discover': 'Discover', // recipe discovery
'manage': 'Manage' // household + settings
};
const navOrder = ['inventory', 'cupboard', 'whattocook', 'quickshop', 'discover', 'manage'];
```
## Module mapping (de-Google'd → Recipe Book modules)
| Module ID | Source nav-id | User-facing name | What it does |
| ------------ | --------------- | ---------------- | --------------------------------------------------- |
| `landing` | `inventory` | Dashboard | Home/landing view; draggable panel layout |
| `pantry` | `cupboard` | My Cupboard | Inventory of stock; browse 500+ ingredients; filters|
| `recipes` | `whattocook` | What to Cook | Recipe picker; based on stock + mealplan |
| `mealplan` | `mealplan` | Meal Plan | Weekly meal plan; auto-generate; modify |
| `shopping` | `quickshop` | Quick Shop | Shopping list; trip planning; print |
| `discover` | `discover` | Discover | Recipe search; new recipe suggestions |
| `manage` | `manage` | Manage | Households; settings; data export; admin |
**7 modules total** (I had said 6 in the plan — `discover` is its own view, not folded into `recipes`).
## Data layer (localStorage keys)
All data lives in `localStorage` under the `pantry_*` namespace. Migration map to a
clean schema (`schemas/visual-recipe-v0.5.json`-compatible):
| Old key | Purpose | New schema name |
| -------------------------------- | -------------------------------- | ------------------------------ |
| `pantry_inventory` / `_v2` | Current stock items | `pantry.inventory` |
| `pantry_custom_ingredients` | Custom ingredient overrides | `pantry.customIngredients` |
| `pantry_custom_ingredientDB` | Custom ingredient database | `pantry.ingredientDB` |
| `pantry_customCategories` | User-defined categories | `pantry.customCategories` |
| `pantry_customRecipes` | User-saved recipes | `recipes.customRecipes` |
| `pantry_favorites` | Favorited meals/recipes | `recipes.favorites` |
| `pantry_recipeSubs` | Recipe substitutions | `recipes.substitutions` |
| `pantry_recipeVisibility` | Which recipes are shown | `recipes.visibility` |
| `pantry_mealplan_weeks` | Weekly meal plans | `mealplan.weeks` |
| `pantry_completedMeals` | History of completed meals | `mealplan.completed` |
| `pantry_mealAttendance` | Who ate each meal | `mealplan.attendance` |
| `pantry_mealCompletionHistory` | When meals were cooked | `mealplan.cookHistory` |
| `pantry_mealCombos_v2` | Meal combos | `mealplan.combos` |
| `pantry_mealNotes` | Notes on meals | `mealplan.notes` |
| `pantry_mealRatings_v2` | Star ratings | `mealplan.ratings` |
| `pantry_mealDislikes` | Disliked meals | `mealplan.dislikes` |
| `pantry_mealRestrictions` | Dietary restrictions | `mealplan.restrictions` |
| `pantry_dislikes_v3` | Disliked ingredients | `pantry.dislikes` |
| `pantry_ingredientDislikes` | Per-household dislikes | `pantry.ingredientDislikes` |
| `pantry_ingredientRestrictions` | Per-household restrictions | `pantry.restrictions` |
| `pantry_shopping` | Shopping list | `shopping.list` |
| `pantry_custom_lists` | Multiple shopping lists | `shopping.customLists` |
| `pantry_shoppingTrips` | Historical shopping trips | `shopping.trips` |
| `pantry_selectedShopList` | Currently-selected list | `shopping.selectedList` |
| `pantry_shopTabMode` | Shop tab mode | `shopping.tabMode` |
| `pantry_quickIdeas` | Pinned quick-idea meals | `pantry.quickIdeas` |
| `pantry_pinnedQuickIdeas` | Pinned quick-ideas (v2) | `pantry.pinnedQuickIdeas` |
| `pantry_highlightedQuickIdeas` | Highlighted in quick-ideas | `pantry.highlighted` |
| `pantry_pinnedCollapsed` | Pinned-but-collapsed items | `pantry.pinnedCollapsed` |
| `pantry_recentlyFinished` | Recently-finished items | `pantry.recentlyFinished` |
| `pantry_recipeImageCache` | Cached recipe images | `recipes.imageCache` |
| `pantry_recipeNutrition` | Cached nutrition info | `recipes.nutrition` |
| `pantry_priceCache` | Cached ingredient prices | `shopping.priceCache` |
| `pantry_purchaseHistory` | Purchase history | `shopping.purchaseHistory` |
| `pantry_allHouseholds` | List of households | `manage.households` |
| `pantry_settings_v2` | App settings | `manage.settings` |
| `pantry_storageOverrides` | Storage overrides | `manage.storageOverrides` |
| `pantry_subPrefs` | Substitution preferences | `recipes.subPrefs` |
| `pantry_unitPrefs` | Unit preferences | `pantry.unitPrefs` |
| `pantry_categoryOrder` | Category order | `pantry.categoryOrder` |
| `pantry_activeTab` | Active tab on dashboard | `landing.activeTab` |
| `pantry_itemCategories` | Item-to-category mapping | `pantry.itemCategories` |
| `dashboardPanels` | Dashboard panel config | `landing.panels` |
| `panelOrder` | Panel order | `landing.panelOrder` |
| `panelProportionsById` | Panel size proportions | `landing.proportions` |
| `layoutSwaps` / `_undo` | Layout swap history | `landing.layoutHistory` |
| `ingredientViewMode` | Ingredient view mode | `pantry.viewMode` |
| `jsonBlobId` | Remote backup ID | `manage.remoteBackupId` |
## Visual structure
- **Top bar** (60px): brand + nav + auth area
- **Chip nav** (50px): 6 draggable chips
- **Main content**: tab-content area, one of 6 views visible at a time
- **Bottom nav** (mobile): icon-based nav
- **Modals**: recipe details, ingredient DB, shopping preview, etc.
- **Drag-and-drop**: Sortable.js for tabs + panels
## Stack
- Vanilla JS (no React/Vue/Svelte)
- Tailwind-like utility classes inline + some CSS variables
- Sortable.js for drag-and-drop
- localStorage for persistence (no IndexedDB)
- No build step (single HTML file)
- No external API calls (Firebase removed)
## What the rebuild must preserve
1. **All 7 views work** (not collapsed into 6)
2. **All 47 localStorage keys** migrate to the new schema
3. **All features in each view** work (no silent removal)
4. **Visual match** — same look, same UX
5. **No external services** — localStorage only
## What the rebuild can improve
1. **Code organisation** — split into 7 modules instead of 23K lines monolith
2. **Schema clarity** — use Recipe v0.5 namespaced keys
3. **Type safety** — JSDoc on functions (optional but good)
4. **Test coverage** — feature parity tests
5. **Documentation** — per-module README
## Build order
1. ✅ Extract structure (this doc)
2. → Write per-module Recipe Book entries
3. → Scaffold the new app shell (HTML + 7 module placeholders)
4. → Migrate the de-Google'd source into modules
5. → Test feature parity
6. → Deploy to new repo