Add shopping list tab with auto-generation from planner

- New ShoppingList.js view with category-grouped items
- Check item = auto-transfer to pantry
- "Generate shortfalls" button computes weekly needs vs pantry stock
- Badge on shopping tab icon shows unchecked item count
- Bottom dock expanded to 5 columns for new tab

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

js/app.js

@@ -13,6 +13,9 @@ let setupMealPlanner;
 let getPantryHTML;
 let refreshPantry;
 let setupPantry;
+let getShoppingListHTML;
+let refreshShoppingList;
+let setupShoppingList;
 let getMealPlanEditorHTML;
 let setupMealPlanEditor;
 let getBottomNavHTML;
@@ -24,6 +27,7 @@ const moduleLoadPromise = Promise.all([
     import(`./views/RecipeDetailV2.js?v=${APP_ASSET_VERSION}`),
     import(`./views/MealPlanner.js?v=${APP_ASSET_VERSION}`),
     import(`./views/Pantry.js?v=${APP_ASSET_VERSION}`),
+    import(`./views/ShoppingList.js?v=${APP_ASSET_VERSION}`),
     import(`./ui/mealPlanEditor.js?v=${APP_ASSET_VERSION}`),
     import(`./ui/bottomNav.js?v=${APP_ASSET_VERSION}`),
 ]).then(([
@@ -32,6 +36,7 @@ const moduleLoadPromise = Promise.all([
     recipeDetailModule,
     mealPlannerModule,
     pantryModule,
+    shoppingListModule,
     mealPlanEditorModule,
     bottomNavModule,
 ]) => {
@@ -40,6 +45,7 @@ const moduleLoadPromise = Promise.all([
     ({ getRecipeDetailHTML, setupRecipeDetail } = recipeDetailModule);
     ({ getMealPlannerHTML, setupMealPlanner } = mealPlannerModule);
     ({ getPantryHTML, refreshPantry, setupPantry } = pantryModule);
+    ({ getShoppingListHTML, refreshShoppingList, setupShoppingList } = shoppingListModule);
     ({ getMealPlanEditorHTML, setupMealPlanEditor } = mealPlanEditorModule);
     ({ getBottomNavHTML, setupBottomNav } = bottomNavModule);
 });
@@ -82,6 +88,7 @@ async function initApp() {
             ${getRecipeListHTML()}
             ${getMealPlannerHTML()}
             ${getPantryHTML()}
+            ${getShoppingListHTML()}
             ${getBottomNavHTML()}
             ${getRecipeDetailHTML()}
             ${getFilterHTML()}
@@ -89,10 +96,11 @@ async function initApp() {
             ${getAppToastHTML()}
         `;
 
-        setupBottomNav({ refreshPantry });
+        setupBottomNav({ refreshPantry, refreshShoppingList });
         setupRecipeList();
         setupMealPlanner();
         setupPantry();
+        setupShoppingList();
         setupFilter();
         setupMealPlanEditor();
         setupRecipeDetail();