fix(offline state #5511)

* Merge pending local state with server state before presenting

frontend/composables/use-shopping-list-item-actions.ts

@@ -89,9 +89,31 @@ export function useShoppingListItemActions(shoppingListId: string) {
     return true;
   }
 
+  function mergeListItemsByLatest(
+    list1: ShoppingListItemOut[],
+    list2: ShoppingListItemOut[]
+  ) {
+    const mergedList = [...list1];
+    list2.forEach((list2Item) => {
+      const confictingItem = mergedList.find((item) => item.id === list2Item.id)
+      if (confictingItem &&
+        list2Item.updatedAt && confictingItem.updatedAt &&
+        list2Item.updatedAt > confictingItem.updatedAt) {
+        mergedList.splice(mergedList.indexOf(confictingItem), 1, list2Item)
+      } else if (!confictingItem) {
+        mergedList.push(list2Item)
+      }
+    })
+    return mergedList
+  }
+
   async function getList() {
     const response = await api.shopping.lists.getOne(shoppingListId);
-    return response.data;
+    if (response.data) {
+      const createAndUpdateQueues = mergeListItemsByLatest(queue.update, queue.create);
+      response.data.listItems = mergeListItemsByLatest(response.data.listItems ?? [], createAndUpdateQueues);
+    }
+    return response.data
   }
 
   function createItem(item: ShoppingListItemOut) {

frontend/pages/shopping-lists/_id.vue

@@ -878,10 +878,9 @@ export default defineComponent({
 
         // make sure the item is at the end of the list with the other checked items
         item.position = shoppingList.value.listItems.length;
-
+      }
       // set a temporary updatedAt timestamp prior to refresh so it appears at the top of the checked items
       item.updatedAt = new Date().toISOString();
-      }
 
       // make updates reflect immediately
       if (shoppingList.value.listItems) {