\n {/* Sidebar - Lists */}\n

Grocery Lists

\n setShowNewListForm(true)}\n className=\"p-1 rounded transition-colors\"\n style={{ color: 'var(--accent)' }}\n >\n \n \n

\n \n {showNewListForm && (\n

\n \n

\n {lists.length === 0 ? (\n

\n No lists yet. Create one to get started.\n

\n ) : (\n

\n {lists.map((list) => (\n setSelectedList(list)}\n >\n

{list.name}

\n {list.items.length} item{list.items.length !== 1 ? 's' : ''}\n

\n {list.name !== DEFAULT_GROCERY_LIST_NAME && (\n {\n e.stopPropagation();\n handleDeleteList(list.id);\n }}\n disabled={deletingListId === list.id}\n className=\"opacity-0 group-hover:opacity-100 p-1 text-gray-400 hover:text-red-500 transition-all disabled:opacity-50\"\n >\n {deletingListId === list.id ? (\n \n ) : (\n \n )}\n \n )}\n

\n ))}\n

\n )}\n

\n \n {/* Main content - List details */}\n

\n {selectedList ? (\n <>\n {/* Header */}\n

{selectedList.name}

\n {selectedList.items.filter(i => i.checked).length} of {selectedList.items.length} checked\n

\n {selectedList.items.length > 0 && (\n \n {clearingAllItems ? (\n \n ) : (\n \n )}\n {clearingAllItems ? 'Clearing...' : 'Clear All'}\n \n )}\n setShowAddItem(true)}\n className=\"btn-secondary text-sm flex items-center gap-1\"\n >\n \n Add Item\n \n setShowAddRecipe(true)}\n className=\"btn-primary text-sm flex items-center gap-1\"\n >\n \n Add Recipe\n \n

\n \n {/* Items */}\n

\n {selectedList.items.length === 0 ? (\n

\n 🛒\n

No items yet

Add items or import from a recipe

\n ) : (\n

\n {combineItems(selectedList.items).map((combinedItem, index) => (\n

\n {combinedItem.sourceItems.length === 1 ? (\n // Single item - use regular GroceryItemRow\n setEditingItemId(combinedItem.sourceItems[0].id)}\n onSave={(updates) => handleUpdateItem(combinedItem.sourceItems[0], updates)}\n onToggleChecked={() => handleToggleItem(combinedItem.sourceItems[0])}\n onDelete={() => handleDeleteItem(combinedItem.sourceItems[0].id)}\n disabled={!!togglingItemId || !!deletingItemId}\n />\n ) : (\n // Multiple items - use CombinedGroceryItemRow\n handleToggleCombinedItems(combinedItem.sourceItems, checked)}\n onDeleteAll={() => handleDeleteCombinedItems(combinedItem.sourceItems)}\n disabled={!!togglingItemId || !!deletingItemId}\n />\n )}\n

\n ))}\n

\n )}\n

\n \n ) : (\n

\n 👈\n

Select a list to view items

\n )}\n

\n \n {/* Add item modal */}\n {showAddItem && selectedList && (\n

setShowAddItem(false)}>\n

e.stopPropagation()}>\n

Add Item

\n {/* Quantity + Unit + Name row */}\n

\n \n setNewItemName(e.target.value)}\n className=\"input flex-1\"\n placeholder=\"Item name\"\n autoFocus\n disabled={addingItem}\n />\n

\n {/* Notes row */}\n \n

\n \n \n

\n )}\n \n {/* Add recipe picker modal */}\n {showAddRecipe && selectedList && (\n

setShowAddRecipe(false)}>\n

e.stopPropagation()}>\n

Add Recipe Ingredients

Select a recipe to add its ingredients

\n {recipes.length === 0 ? (\n

\n No recipes yet. Create a recipe first.\n

\n ) : (\n

\n {recipes.map((recipe) => (\n handleSelectRecipeForPreview(recipe)}\n className=\"w-full p-3 text-left rounded-lg transition-colors flex items-center justify-between hover:bg-opacity-50\"\n style={{ background: 'transparent' }}\n >\n

{recipe.title}

\n {recipe.ingredients.length} ingredients · {recipe.servingSize} serving{recipe.servingSize !== 1 ? 's' : ''}\n

\n \n \n ))}\n

\n )}\n

\n \n

\n )}\n\n {/* Add recipe preview modal */}\n {selectedRecipeForPreview && selectedList && (\n handleAddRecipeIngredients(selectedRecipeForPreview.id, servings)}\n onClose={() => setSelectedRecipeForPreview(null)}\n isAdding={addingRecipeId === selectedRecipeForPreview.id}\n />\n )}\n \n );\n}\n\n","deleted","label",[175,176,157],"frontend","components","permalink","https://www.val.town/x/shapedlines/carmy/code/frontend/components/GroceryListsView.tsx","extension","actionData","errors"]