added keying to checkout

frontend/src/Components/Checkout.elm

@@ -4,6 +4,8 @@ import Cart exposing (Cart)
 import Html exposing (Html, a, button, div, h2, img, p, span, text)
 import Html.Attributes as Attr
 import Html.Events exposing (onClick)
+import Html.Lazy
+import Html.Keyed
 import Lib exposing (getItemQuantityPairs, getQuantityElement, getTotal, titleToPath)
 import Messages as Msg exposing (Msg)
 import Stock exposing (ItemId, Product, Stock)
@@ -17,8 +19,8 @@ checkout { stock, cart } =
                 [ h2 [ Attr.class "text-2xl font-semibold mb-4" ] [ text "cart" ]
 
                 -- Products in cart
-                , div [ Attr.class "space-y-4" ]
-                    (getItemQuantityPairs cart stock |> List.filter (\( _, qty ) -> qty > 0) |> List.map cartItem)
+                , Html.Keyed.node "div" [ Attr.class "space-y-4" ]
+                    (getItemQuantityPairs cart stock |> List.filter (\( _, qty ) -> qty > 0) |> List.map keyedCartItem)
 
                 -- Total and checkout section
                 , div [ Attr.class "flex justify-between items-center mt-8" ]
@@ -35,6 +37,9 @@ checkout { stock, cart } =
             ]
         ]
 
+keyedCartItem : ( (ItemId, Product), Cart.Quantity ) -> (String, Html Msg)
+keyedCartItem ((( id, _), _) as args) = 
+    (String.fromInt id, Html.Lazy.lazy cartItem args)
 
 cartItem : ( ( ItemId, Product ), Cart.Quantity ) -> Html Msg
 cartItem ( ( id, { title, kind, quantity } ), qty ) =

frontend/src/Stock.elm

@@ -24,7 +24,7 @@ type alias ItemId =
 
 
 type alias Stock =
-    Dict Int Product
+    Dict ItemId Product
 
 
 type alias StockResult =