feat: more shopping list enhancements (#2587)

* fix new position calculataion

* ensure consistent list item ordering

* fix recipe ref overflow on small screens

* added recipe ref elevation

* tweaked line height (for long notes)

* removed unused user dependency

* remove old shopping list items when there's >100

* 🤷

* cleaned up function generator

* fixed test

* fix potential type error

* made max position calc more efficient

frontend/components/Domain/Recipe/RecipeIngredientListItem.vue

@@ -54,7 +54,7 @@ export default defineComponent({
 }
 
 .note {
-  line-height: 0.8em;
+  line-height: 1.25em;
   font-size: 0.8em;
   opacity: 0.7;
 }

frontend/components/Domain/Recipe/RecipeList.vue

@@ -1,6 +1,12 @@
 <template>
   <v-list :class="tile ? 'd-flex flex-wrap background' : 'background'">
-    <v-sheet v-for="recipe, index in recipes" :key="recipe.id" :class="attrs.class.sheet" :style="tile ? 'width: fit-content;' : 'width: 100%;'">
+    <v-sheet
+      v-for="recipe, index in recipes"
+      :key="recipe.id"
+      :elevation="2"
+      :class="attrs.class.sheet"
+      :style="tile ? 'max-width: 100%; width: fit-content;' : 'width: 100%;'"
+    >
       <v-list-item :to="'/recipe/' + recipe.slug" :class="attrs.class.listItem">
         <v-list-item-avatar :class="attrs.class.avatar">
           <v-icon :class="attrs.class.icon" dark :small="small"> {{ $globals.icons.primary }} </v-icon>

frontend/pages/shopping-lists/_id.vue

@@ -268,6 +268,7 @@ export default defineComponent({
       // only update the list with the new value if we're not loading, to prevent UI jitter
       if (!loadingCounter.value) {
         shoppingList.value = newListValue;
+        sortListItems();
         updateItemsByLabel();
       }
     }
@@ -473,6 +474,15 @@ export default defineComponent({
 
     const itemsByLabel = ref<{ [key: string]: ShoppingListItemOut[] }>({});
 
+    function sortListItems() {
+      if (!shoppingList.value?.listItems?.length) {
+        return;
+      }
+
+      // sort by position ascending, then createdAt descending
+      shoppingList.value.listItems.sort((a, b) => (a.position > b.position || a.createdAt < b.createdAt ? 1 : -1))
+    }
+
     function updateItemsByLabel() {
       const items: { [prop: string]: ShoppingListItemOut[] } = {};
       const noLabelText = i18n.tc("shopping-list.no-label");
@@ -603,6 +613,7 @@ export default defineComponent({
         });
       }
 
+      sortListItems();
       updateItemsByLabel();
 
       loadingCounter.value += 1;
@@ -656,7 +667,9 @@ export default defineComponent({
       loadingCounter.value += 1;
 
       // make sure it's inserted into the end of the list, which may have been updated
-      createListItemData.value.position = shoppingList.value?.listItems?.length || 1;
+      createListItemData.value.position = shoppingList.value?.listItems?.length
+        ? (shoppingList.value.listItems.reduce((a, b) => (a.position || 0) > (b.position || 0) ? a : b).position || 0) + 1
+        : 0;
       const { data } = await userApi.shopping.items.createOne(createListItemData.value);
       loadingCounter.value -= 1;