\n {/* Checkbox */}\n \n {item.checked && (\n \n )}\n \n\n {/* Quantity + Unit */}\n \n\n {/* Item Name */}\n \n\n {/* Delete button */}\n \n \n \n

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

\n \n\n {/* Save/Cancel buttons */}\n \n {saving ? 'Saving...' : 'Save'}\n \n

\n );\n }\n\n // Display mode\n return (\n \n {/* Checkbox */}\n {\n e.stopPropagation();\n onToggleChecked();\n }}\n disabled={disabled}\n className={`checkbox flex-shrink-0 ${item.checked ? 'checked' : ''}`}\n >\n {item.checked && (\n \n )}\n \n\n {/* Content */}\n

\n {/* Quantity and Unit */}\n {(item.quantity !== null || item.unit) && (\n \n {formatQuantityUnit()}\n \n )}\n {/* Item name */}\n {item.name}\n

\n \n {/* Notes */}\n {item.notes && (\n

\n {item.notes}\n

\n )}\n

\n\n {/* Delete button */}\n {\n e.stopPropagation();\n onDelete();\n }}\n disabled={disabled}\n className=\"text-gray-400 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100 p-1 flex-shrink-0\"\n style={{ opacity: 1 }} // Always visible for now since group-hover needs parent styling\n >\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/GroceryItemRow.tsx","extension","actionData","errors"]