Update styling and accessibility, refine product and shopping list functionalities

App.js

@@ -32,6 +32,7 @@ export default function App() {
   const [productCache, setProductCache] = useState({});
   const [manualPrices, setManualPrices] = useState({});
   const [recentProducts, setRecentProducts] = useState([]);
+  const [lastDeletedListItem, setLastDeletedListItem] = useState(null);
   const [isHydrated, setIsHydrated] = useState(false);
   const [storageError, setStorageError] = useState('');
 
@@ -133,10 +134,13 @@ export default function App() {
         <ShoppingListScreen
           onCompleteList={completeShoppingList}
           onDeleteItem={deleteListItem}
+          onUndoDelete={undoDeleteListItem}
           onStartScan={() => setActiveTab('scan')}
+          onOpenProfile={() => setActiveTab('profile')}
           onToggleItem={toggleListItem}
           onUpdateItemPrice={updateListItemPrice}
           preferences={preferences}
+          lastDeletedItem={lastDeletedListItem}
           shoppingList={shoppingList}
         />
       );
@@ -161,7 +165,7 @@ export default function App() {
           shoppingList={shoppingList}
       />
     );
-  }, [activeTab, manualPrices, preferences, productCache, recentProducts, shoppingList]);
+  }, [activeTab, lastDeletedListItem, manualPrices, preferences, productCache, recentProducts, shoppingList]);
 
   async function scanProductByBarcode(barcode) {
     const result = await lookupProductByBarcode(
@@ -334,6 +338,9 @@ export default function App() {
   }
 
   function deleteListItem(itemId) {
+    const index = shoppingList.items.findIndex((item) => item.id === itemId);
+    if (index < 0) return;
+    setLastDeletedListItem({ item: shoppingList.items[index], index });
     setShoppingList((current) => {
       const items = current.items.filter((item) => item.id !== itemId);
       return {
@@ -344,7 +351,19 @@ export default function App() {
     });
   }
 
+  function undoDeleteListItem() {
+    if (!lastDeletedListItem) return;
+    setShoppingList((current) => {
+      if (current.items.some((item) => item.id === lastDeletedListItem.item.id)) return current;
+      const items = [...current.items];
+      items.splice(Math.min(lastDeletedListItem.index, items.length), 0, lastDeletedListItem.item);
+      return { ...current, items, estimatedTotal: calculateEstimatedTotal(items) };
+    });
+    setLastDeletedListItem(null);
+  }
+
   function completeShoppingList() {
+    setLastDeletedListItem(null);
     setShoppingList({
       ...initialShoppingList,
       createdAt: new Date().toISOString()
@@ -389,6 +408,10 @@ export default function App() {
         <ProductDetailScreen
           onAddToList={addProductToShoppingList}
           onBack={goBackToTabs}
+          onOpenList={() => {
+            setActiveTab('list');
+            goBackToTabs();
+          }}
           onSaveManualPrice={saveManualPriceForProduct}
           onShowRatingCriteria={showRatingCriteria}
           onShowAlternatives={showAlternatives}