From 2e112cd6c049aed45095cb471ea2be50c1a8a575 Mon Sep 17 00:00:00 2001
From: Wetzel402 <wetzelredistribution@gmail.com>
Date: Thu, 19 Sep 2024 18:42:12 +0000
Subject: [PATCH 1/4] 	modified:   frontend/pages/group/data/labels.vue 
 modified:   frontend/pages/shopping-lists/_id.vue

---
 frontend/pages/group/data/labels.vue  |  2 +-
 frontend/pages/shopping-lists/_id.vue | 12 +++++-------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/pages/group/data/labels.vue b/frontend/pages/group/data/labels.vue
index ece501144fe..09b9dd9583a 100644
--- a/frontend/pages/group/data/labels.vue
+++ b/frontend/pages/group/data/labels.vue
@@ -231,7 +231,7 @@ export default defineComponent({
       editLabel.value = item;
 
       if (!editLabel.value.color) {
-        editLabel.value.color = "#E0E0E0";
+        editLabel.value.color = "#757575";
       }
     }
 
diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index 09ba649fa3d..09172dac3e9 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -56,14 +56,12 @@
 
       <!-- View By Label -->
       <div v-else>
-        <div v-for="(value, key, idx) in itemsByLabel" :key="key" class="mb-6">
+        <div v-for="(value, key) in itemsByLabel" :key="key" class="mb-6">
           <div @click="toggleShowChecked()">
-            <span v-if="idx || key !== $tc('shopping-list.no-label')">
-              <v-icon :color="getLabelColor(value[0])">
-                {{ $globals.icons.tags }}
-              </v-icon>
-            </span>
-            {{ key }}
+            <div class="text-left">
+              <BaseButton create :color="getLabelColor(value[0])" @click="createEditorOpen = true">{{ key }}</BaseButton>
+            </div>
+            <v-divider/>
           </div>
           <draggable :value="value" handle=".handle" delay="250" :delay-on-touch-only="true" @start="loadingCounter += 1" @end="loadingCounter -= 1" @input="updateIndexUncheckedByLabel(key, $event)">
             <v-lazy v-for="(item, index) in value" :key="item.id" class="ml-2 my-2">

From c131e1d0ca9f9fe97096fe95e9cd75976a26c8b7 Mon Sep 17 00:00:00 2001
From: Wetzel402 <wetzelredistribution@gmail.com>
Date: Thu, 19 Sep 2024 19:09:40 +0000
Subject: [PATCH 2/4] 	modified:  
 mealie/schema/labels/multi_purpose_label.py

---
 mealie/schema/labels/multi_purpose_label.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mealie/schema/labels/multi_purpose_label.py b/mealie/schema/labels/multi_purpose_label.py
index 04430b37349..1e98fd11a34 100644
--- a/mealie/schema/labels/multi_purpose_label.py
+++ b/mealie/schema/labels/multi_purpose_label.py
@@ -10,7 +10,7 @@
 
 class MultiPurposeLabelCreate(MealieModel):
     name: str
-    color: str = "#E0E0E0"
+    color: str = "#757575"
 
 
 class MultiPurposeLabelSave(MultiPurposeLabelCreate):

From f7930d793f93fabc59b1b7944b560dee8b3f4559 Mon Sep 17 00:00:00 2001
From: Wetzel402 <wetzelredistribution@gmail.com>
Date: Fri, 20 Sep 2024 17:32:32 +0000
Subject: [PATCH 3/4] 	modified:   frontend/pages/group/data/labels.vue 
 modified:   frontend/pages/shopping-lists/_id.vue 	modified:  
 mealie/schema/labels/multi_purpose_label.py

---
 frontend/pages/group/data/labels.vue        |   2 +-
 frontend/pages/shopping-lists/_id.vue       | 241 ++++++++------------
 mealie/schema/labels/multi_purpose_label.py |   2 +-
 3 files changed, 91 insertions(+), 154 deletions(-)

diff --git a/frontend/pages/group/data/labels.vue b/frontend/pages/group/data/labels.vue
index 09b9dd9583a..f6d0888d394 100644
--- a/frontend/pages/group/data/labels.vue
+++ b/frontend/pages/group/data/labels.vue
@@ -231,7 +231,7 @@ export default defineComponent({
       editLabel.value = item;
 
       if (!editLabel.value.color) {
-        editLabel.value.color = "#757575";
+        editLabel.value.color = "#959595";
       }
     }
 
diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index 09172dac3e9..3501733b194 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -17,7 +17,8 @@
         <v-container>
           <v-row>
             <v-col cols="3" class="text-left">
-              <ButtonLink :to="`/shopping-lists?disableRedirect=true`" :text="$tc('general.back')" :icon="$globals.icons.backArrow" />
+              <ButtonLink :to="`/shopping-lists?disableRedirect=true`" :text="$tc('general.back')"
+                :icon="$globals.icons.backArrow" />
             </v-col>
             <v-col cols="6" class="d-flex justify-center">
               <v-img max-height="100" max-width="100" :src="require('~/static/svgs/shopping-cart.svg')"></v-img>
@@ -27,29 +28,18 @@
       </template>
       <template #title> {{ shoppingList.name }} </template>
     </BasePageTitle>
-    <BannerWarning
-      v-if="$nuxt.isOffline"
-      :title="$tc('shopping-list.you-are-offline')"
-      :description="$tc('shopping-list.you-are-offline-description')"
-    />
+    <BannerWarning v-if="$nuxt.isOffline" :title="$tc('shopping-list.you-are-offline')"
+      :description="$tc('shopping-list.you-are-offline-description')" />
 
     <!-- Viewer -->
     <section v-if="!edit" class="py-2">
       <div v-if="!preferences.viewByLabel">
-        <draggable :value="listItems.unchecked" handle=".handle" delay="250" :delay-on-touch-only="true"  @start="loadingCounter += 1" @end="loadingCounter -= 1" @input="updateIndexUnchecked">
+        <draggable :value="listItems.unchecked" handle=".handle" delay="250" :delay-on-touch-only="true"
+          @start="loadingCounter += 1" @end="loadingCounter -= 1" @input="updateIndexUnchecked">
           <v-lazy v-for="(item, index) in listItems.unchecked" :key="item.id" class="my-2">
-            <ShoppingListItem
-              v-model="listItems.unchecked[index]"
-              class="my-2 my-sm-0"
-              :show-label=true
-              :labels="allLabels || []"
-              :units="allUnits || []"
-              :foods="allFoods || []"
-              :recipes="recipeMap"
-              @checked="saveListItem"
-              @save="saveListItem"
-              @delete="deleteListItem(item)"
-            />
+            <ShoppingListItem v-model="listItems.unchecked[index]" class="my-2 my-sm-0" :show-label=true
+              :labels="allLabels || []" :units="allUnits || []" :foods="allFoods || []" :recipes="recipeMap"
+              @checked="saveListItem" @save="saveListItem" @delete="deleteListItem(item)" />
           </v-lazy>
         </draggable>
       </div>
@@ -57,39 +47,25 @@
       <!-- View By Label -->
       <div v-else>
         <div v-for="(value, key) in itemsByLabel" :key="key" class="mb-6">
-          <div @click="toggleShowChecked()">
-            <div class="text-left">
-              <BaseButton create :color="getLabelColor(value[0])" @click="createEditorOpen = true">{{ key }}</BaseButton>
-            </div>
-            <v-divider/>
+          <div class="text-left">
+            <v-btn :color="getLabelColor(value[0]) ? getLabelColor(value[0]) : '#959595'">{{ key }}</v-btn>
           </div>
-          <draggable :value="value" handle=".handle" delay="250" :delay-on-touch-only="true" @start="loadingCounter += 1" @end="loadingCounter -= 1" @input="updateIndexUncheckedByLabel(key, $event)">
+          <v-divider />
+          <draggable :value="value" handle=".handle" delay="250" :delay-on-touch-only="true"
+            @start="loadingCounter += 1" @end="loadingCounter -= 1" @input="updateIndexUncheckedByLabel(key, $event)">
             <v-lazy v-for="(item, index) in value" :key="item.id" class="ml-2 my-2">
-              <ShoppingListItem
-                v-model="value[index]"
-                :show-label=false
-                :labels="allLabels || []"
-                :units="allUnits || []"
-                :foods="allFoods || []"
-                :recipes="recipeMap"
-                @checked="saveListItem"
-                @save="saveListItem"
-                @delete="deleteListItem(item)"
-              />
+              <ShoppingListItem v-model="value[index]" :show-label=false :labels="allLabels || []"
+                :units="allUnits || []" :foods="allFoods || []" :recipes="recipeMap" @checked="saveListItem"
+                @save="saveListItem" @delete="deleteListItem(item)" />
             </v-lazy>
           </draggable>
         </div>
       </div>
 
       <!-- Reorder Labels -->
-      <BaseDialog
-        v-model="reorderLabelsDialog"
-        :icon="$globals.icons.tagArrowUp"
-        :title="$t('shopping-list.reorder-labels')"
-        :submit-icon="$globals.icons.save"
-        :submit-text="$tc('general.save')"
-        @submit="saveLabelOrder"
-        @close="cancelLabelOrder">
+      <BaseDialog v-model="reorderLabelsDialog" :icon="$globals.icons.tagArrowUp"
+        :title="$t('shopping-list.reorder-labels')" :submit-icon="$globals.icons.save"
+        :submit-text="$tc('general.save')" @submit="saveLabelOrder" @close="cancelLabelOrder">
         <v-card height="fit-content" max-height="70vh" style="overflow-y: auto;">
           <draggable v-if="localLabels" :value="localLabels" handle=".handle" class="my-2" @input="updateLabelOrder">
             <div v-for="(labelSetting, index) in localLabels" :key="labelSetting.id">
@@ -100,100 +76,74 @@
       </BaseDialog>
 
       <!-- Settings -->
-      <BaseDialog
-        v-model="settingsDialog"
-        :icon="$globals.icons.cog"
-        :title="$t('general.settings')"
-        @confirm="updateSettings"
-      >
+      <BaseDialog v-model="settingsDialog" :icon="$globals.icons.cog" :title="$t('general.settings')"
+        @confirm="updateSettings">
         <v-container>
           <v-form>
-            <v-select
-              v-model="currentUserId"
-              :items="allUsers"
-              item-text="fullName"
-              item-value="id"
-              :label="$t('general.owner')"
-              :prepend-icon="$globals.icons.user"
-            />
+            <v-select v-model="currentUserId" :items="allUsers" item-text="fullName" item-value="id"
+              :label="$t('general.owner')" :prepend-icon="$globals.icons.user" />
           </v-form>
         </v-container>
       </BaseDialog>
 
       <!-- Create Item -->
       <div v-if="createEditorOpen">
-        <ShoppingListItemEditor
-          v-model="createListItemData"
-          class="my-4"
-          :labels="allLabels || []"
-          :units="allUnits || []"
-          :foods="allFoods || []"
-          @delete="createEditorOpen = false"
-          @cancel="createEditorOpen = false"
-          @save="createListItem"
-        />
+        <ShoppingListItemEditor v-model="createListItemData" class="my-4" :labels="allLabels || []"
+          :units="allUnits || []" :foods="allFoods || []" @delete="createEditorOpen = false"
+          @cancel="createEditorOpen = false" @save="createListItem" />
       </div>
       <div v-else class="mt-4 d-flex justify-end">
-        <BaseButton
-          v-if="preferences.viewByLabel" edit class="mr-2"
-          :disabled="$nuxt.isOffline"
+        <BaseButton v-if="preferences.viewByLabel" edit class="mr-2" :disabled="$nuxt.isOffline"
           @click="toggleReorderLabelsDialog">
           <template #icon> {{ $globals.icons.tags }} </template>
           {{ $t('shopping-list.reorder-labels') }}
         </BaseButton>
-        <BaseButton create @click="createEditorOpen = true" > {{ $t('general.add') }} </BaseButton>
+        <BaseButton create @click="createEditorOpen = true"> {{ $t('general.add') }} </BaseButton>
       </div>
 
       <!-- Action Bar -->
       <div class="d-flex justify-end mb-4 mt-2">
-        <BaseButtonGroup
-          :buttons="[
-            {
-              icon: $globals.icons.contentCopy,
-              text: '',
-              event: 'edit',
-              children: [
-                {
-                  icon: $globals.icons.contentCopy,
-                  text: $tc('shopping-list.copy-as-text'),
-                  event: 'copy-plain',
-                },
-                {
-                  icon: $globals.icons.contentCopy,
-                  text: $tc('shopping-list.copy-as-markdown'),
-                  event: 'copy-markdown',
-                },
-              ],
-            },
-            {
-              icon: $globals.icons.delete,
-              text: $tc('shopping-list.delete-checked'),
-              event: 'delete',
-            },
-            {
-              icon: $globals.icons.tags,
-              text: $tc('shopping-list.toggle-label-sort'),
-              event: 'sort-by-labels',
-            },
-            {
-              icon: $globals.icons.checkboxBlankOutline,
-              text: $tc('shopping-list.uncheck-all-items'),
-              event: 'uncheck',
-            },
-            {
-              icon: $globals.icons.checkboxOutline,
-              text: $tc('shopping-list.check-all-items'),
-              event: 'check',
-            },
-          ]"
-          @edit="edit = true"
-          @delete="openDeleteChecked"
-          @uncheck="openUncheckAll"
-          @check="openCheckAll"
-          @sort-by-labels="sortByLabels"
-          @copy-plain="copyListItems('plain')"
-          @copy-markdown="copyListItems('markdown')"
-        />
+        <BaseButtonGroup :buttons="[
+          {
+            icon: $globals.icons.contentCopy,
+            text: '',
+            event: 'edit',
+            children: [
+              {
+                icon: $globals.icons.contentCopy,
+                text: $tc('shopping-list.copy-as-text'),
+                event: 'copy-plain',
+              },
+              {
+                icon: $globals.icons.contentCopy,
+                text: $tc('shopping-list.copy-as-markdown'),
+                event: 'copy-markdown',
+              },
+            ],
+          },
+          {
+            icon: $globals.icons.delete,
+            text: $tc('shopping-list.delete-checked'),
+            event: 'delete',
+          },
+          {
+            icon: $globals.icons.tags,
+            text: $tc('shopping-list.toggle-label-sort'),
+            event: 'sort-by-labels',
+          },
+          {
+            icon: $globals.icons.checkboxBlankOutline,
+            text: $tc('shopping-list.uncheck-all-items'),
+            event: 'uncheck',
+          },
+          {
+            icon: $globals.icons.checkboxOutline,
+            text: $tc('shopping-list.check-all-items'),
+            event: 'check',
+          },
+        ]" @edit="edit = true" @delete="openDeleteChecked" @uncheck="openUncheckAll" @check="openCheckAll"
+          @sort-by-labels="sortByLabels" @copy-plain="copyListItems('plain')"
+          @copy-markdown="copyListItems('markdown')" />
       </div>
 
       <!-- Checked Items -->
@@ -210,16 +160,9 @@
         <v-expand-transition>
           <div v-show="showChecked">
             <div v-for="(item, idx) in listItems.checked" :key="item.id">
-              <ShoppingListItem
-                v-model="listItems.checked[idx]"
-                class="strike-through-note"
-                :labels="allLabels || []"
-                :units="allUnits || []"
-                :foods="allFoods || []"
-                @checked="saveListItem"
-                @save="saveListItem"
-                @delete="deleteListItem(item)"
-              />
+              <ShoppingListItem v-model="listItems.checked[idx]" class="strike-through-note" :labels="allLabels || []"
+                :units="allUnits || []" :foods="allFoods || []" @checked="saveListItem" @save="saveListItem"
+                @delete="deleteListItem(item)" />
             </div>
           </div>
         </v-expand-transition>
@@ -235,7 +178,9 @@
               {{ $globals.icons.primary }}
             </v-icon>
           </span>
-          {{ $tc('shopping-list.linked-recipes-count', shoppingList.recipeReferences ? shoppingList.recipeReferences.length : 0) }}
+          {{ $tc('shopping-list.linked-recipes-count', shoppingList.recipeReferences ?
+            shoppingList.recipeReferences.length
+            : 0) }}
         </div>
         <v-divider class="my-4"></v-divider>
         <RecipeList :recipes="Array.from(recipeMap.values())" show-description :disabled="$nuxt.isOffline">
@@ -260,11 +205,7 @@
 
     <v-lazy>
       <div class="d-flex justify-end">
-        <BaseButton
-          edit
-          :disabled="$nuxt.isOffline"
-          @click="toggleSettingsDialog"
-        >
+        <BaseButton edit :disabled="$nuxt.isOffline" @click="toggleSettingsDialog">
           <template #icon> {{ $globals.icons.cog }} </template>
           {{ $t('general.settings') }}
         </BaseButton>
@@ -273,11 +214,7 @@
 
     <v-lazy>
       <div v-if="$nuxt.isOnline" class="d-flex justify-end mt-10">
-        <ButtonLink
-          :to="`/group/data/labels`"
-          :text="$tc('shopping-list.manage-labels')"
-          :icon="$globals.icons.tags"
-        />
+        <ButtonLink :to="`/group/data/labels`" :text="$tc('shopping-list.manage-labels')" :icon="$globals.icons.tags" />
       </div>
     </v-lazy>
   </v-container>
@@ -406,11 +343,11 @@ export default defineComponent({
         }
 
         // if the refresh was unsuccessful, the shopping list will be null, so we increment the attempt counter
-        attempts ++;
+        attempts++;
       }
 
       catch (error) {
-        attempts ++;
+        attempts++;
       }
 
       // if we hit too many errors, stop polling
@@ -690,8 +627,8 @@ export default defineComponent({
     function sortItems(a: ShoppingListItemOut | ListItemGroup, b: ShoppingListItemOut | ListItemGroup) {
       return (
         ((a.position || 0) > (b.position || 0)) ||
-        ((a.createdAt || "") < (b.createdAt || ""))
-        ? 1 : -1
+          ((a.createdAt || "") < (b.createdAt || ""))
+          ? 1 : -1
       );
     }
 
@@ -702,7 +639,7 @@ export default defineComponent({
 
       const checkedItemKey = "__checkedItem"
       const listItemGroupsMap = new Map<string, ListItemGroup>();
-      listItemGroupsMap.set(checkedItemKey, {position: Number.MAX_SAFE_INTEGER, createdAt: "", items: []});
+      listItemGroupsMap.set(checkedItemKey, { position: Number.MAX_SAFE_INTEGER, createdAt: "", items: [] });
 
       // group items by checked status, food, or note
       shoppingList.value.listItems.forEach((item) => {
@@ -712,7 +649,7 @@ export default defineComponent({
 
         const group = listItemGroupsMap.get(key);
         if (!group) {
-          listItemGroupsMap.set(key, {position: item.position || 0, createdAt: item.createdAt || "", items: [item]});
+          listItemGroupsMap.set(key, { position: item.position || 0, createdAt: item.createdAt || "", items: [item] });
         } else {
           group.items.push(item);
         }
@@ -940,10 +877,10 @@ export default defineComponent({
       loadingCounter.value -= 1;
 
       if (shoppingList.value.listItems) {
-          // add the item to the list immediately so the user sees the change
-          shoppingList.value.listItems.push(createListItemData.value);
-          updateListItemOrder();
-        }
+        // add the item to the list immediately so the user sees the change
+        shoppingList.value.listItems.push(createListItemData.value);
+        updateListItemOrder();
+      }
       createListItemData.value = listItemFactory(createListItemData.value.isFood || false);
       refresh();
     }
@@ -1039,7 +976,7 @@ export default defineComponent({
       loadingCounter.value += 1;
       const { data } = await userApi.shopping.lists.updateOne(
         shoppingList.value.id,
-        {...shoppingList.value, userId: currentUserId.value},
+        { ...shoppingList.value, userId: currentUserId.value },
       );
       loadingCounter.value -= 1;
 
diff --git a/mealie/schema/labels/multi_purpose_label.py b/mealie/schema/labels/multi_purpose_label.py
index 1e98fd11a34..934f29f1485 100644
--- a/mealie/schema/labels/multi_purpose_label.py
+++ b/mealie/schema/labels/multi_purpose_label.py
@@ -10,7 +10,7 @@
 
 class MultiPurposeLabelCreate(MealieModel):
     name: str
-    color: str = "#757575"
+    color: str = "#959595"
 
 
 class MultiPurposeLabelSave(MultiPurposeLabelCreate):

From 49937ba4ace0b2115b76dbfaa4fe96348b8cf714 Mon Sep 17 00:00:00 2001
From: Wetzel402 <wetzelredistribution@gmail.com>
Date: Fri, 20 Sep 2024 17:58:00 +0000
Subject: [PATCH 4/4] 	modified:   frontend/pages/shopping-lists/_id.vue

---
 frontend/pages/shopping-lists/_id.vue | 235 ++++++++++++++++----------
 1 file changed, 148 insertions(+), 87 deletions(-)

diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index 3501733b194..1b44825f6e7 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -17,8 +17,7 @@
         <v-container>
           <v-row>
             <v-col cols="3" class="text-left">
-              <ButtonLink :to="`/shopping-lists?disableRedirect=true`" :text="$tc('general.back')"
-                :icon="$globals.icons.backArrow" />
+              <ButtonLink :to="`/shopping-lists?disableRedirect=true`" :text="$tc('general.back')" :icon="$globals.icons.backArrow" />
             </v-col>
             <v-col cols="6" class="d-flex justify-center">
               <v-img max-height="100" max-width="100" :src="require('~/static/svgs/shopping-cart.svg')"></v-img>
@@ -28,18 +27,29 @@
       </template>
       <template #title> {{ shoppingList.name }} </template>
     </BasePageTitle>
-    <BannerWarning v-if="$nuxt.isOffline" :title="$tc('shopping-list.you-are-offline')"
-      :description="$tc('shopping-list.you-are-offline-description')" />
+    <BannerWarning
+      v-if="$nuxt.isOffline"
+      :title="$tc('shopping-list.you-are-offline')"
+      :description="$tc('shopping-list.you-are-offline-description')"
+    />
 
     <!-- Viewer -->
     <section v-if="!edit" class="py-2">
       <div v-if="!preferences.viewByLabel">
-        <draggable :value="listItems.unchecked" handle=".handle" delay="250" :delay-on-touch-only="true"
-          @start="loadingCounter += 1" @end="loadingCounter -= 1" @input="updateIndexUnchecked">
+        <draggable :value="listItems.unchecked" handle=".handle" delay="250" :delay-on-touch-only="true"  @start="loadingCounter += 1" @end="loadingCounter -= 1" @input="updateIndexUnchecked">
           <v-lazy v-for="(item, index) in listItems.unchecked" :key="item.id" class="my-2">
-            <ShoppingListItem v-model="listItems.unchecked[index]" class="my-2 my-sm-0" :show-label=true
-              :labels="allLabels || []" :units="allUnits || []" :foods="allFoods || []" :recipes="recipeMap"
-              @checked="saveListItem" @save="saveListItem" @delete="deleteListItem(item)" />
+            <ShoppingListItem
+              v-model="listItems.unchecked[index]"
+              class="my-2 my-sm-0"
+              :show-label=true
+              :labels="allLabels || []"
+              :units="allUnits || []"
+              :foods="allFoods || []"
+              :recipes="recipeMap"
+              @checked="saveListItem"
+              @save="saveListItem"
+              @delete="deleteListItem(item)"
+            />
           </v-lazy>
         </draggable>
       </div>
@@ -50,22 +60,34 @@
           <div class="text-left">
             <v-btn :color="getLabelColor(value[0]) ? getLabelColor(value[0]) : '#959595'">{{ key }}</v-btn>
           </div>
-          <v-divider />
-          <draggable :value="value" handle=".handle" delay="250" :delay-on-touch-only="true"
-            @start="loadingCounter += 1" @end="loadingCounter -= 1" @input="updateIndexUncheckedByLabel(key, $event)">
+          <v-divider/>
+          <draggable :value="value" handle=".handle" delay="250" :delay-on-touch-only="true" @start="loadingCounter += 1" @end="loadingCounter -= 1" @input="updateIndexUncheckedByLabel(key, $event)">
             <v-lazy v-for="(item, index) in value" :key="item.id" class="ml-2 my-2">
-              <ShoppingListItem v-model="value[index]" :show-label=false :labels="allLabels || []"
-                :units="allUnits || []" :foods="allFoods || []" :recipes="recipeMap" @checked="saveListItem"
-                @save="saveListItem" @delete="deleteListItem(item)" />
+              <ShoppingListItem
+                v-model="value[index]"
+                :show-label=false
+                :labels="allLabels || []"
+                :units="allUnits || []"
+                :foods="allFoods || []"
+                :recipes="recipeMap"
+                @checked="saveListItem"
+                @save="saveListItem"
+                @delete="deleteListItem(item)"
+              />
             </v-lazy>
           </draggable>
         </div>
       </div>
 
       <!-- Reorder Labels -->
-      <BaseDialog v-model="reorderLabelsDialog" :icon="$globals.icons.tagArrowUp"
-        :title="$t('shopping-list.reorder-labels')" :submit-icon="$globals.icons.save"
-        :submit-text="$tc('general.save')" @submit="saveLabelOrder" @close="cancelLabelOrder">
+      <BaseDialog
+        v-model="reorderLabelsDialog"
+        :icon="$globals.icons.tagArrowUp"
+        :title="$t('shopping-list.reorder-labels')"
+        :submit-icon="$globals.icons.save"
+        :submit-text="$tc('general.save')"
+        @submit="saveLabelOrder"
+        @close="cancelLabelOrder">
         <v-card height="fit-content" max-height="70vh" style="overflow-y: auto;">
           <draggable v-if="localLabels" :value="localLabels" handle=".handle" class="my-2" @input="updateLabelOrder">
             <div v-for="(labelSetting, index) in localLabels" :key="labelSetting.id">
@@ -76,74 +98,100 @@
       </BaseDialog>
 
       <!-- Settings -->
-      <BaseDialog v-model="settingsDialog" :icon="$globals.icons.cog" :title="$t('general.settings')"
-        @confirm="updateSettings">
+      <BaseDialog
+        v-model="settingsDialog"
+        :icon="$globals.icons.cog"
+        :title="$t('general.settings')"
+        @confirm="updateSettings"
+      >
         <v-container>
           <v-form>
-            <v-select v-model="currentUserId" :items="allUsers" item-text="fullName" item-value="id"
-              :label="$t('general.owner')" :prepend-icon="$globals.icons.user" />
+            <v-select
+              v-model="currentUserId"
+              :items="allUsers"
+              item-text="fullName"
+              item-value="id"
+              :label="$t('general.owner')"
+              :prepend-icon="$globals.icons.user"
+            />
           </v-form>
         </v-container>
       </BaseDialog>
 
       <!-- Create Item -->
       <div v-if="createEditorOpen">
-        <ShoppingListItemEditor v-model="createListItemData" class="my-4" :labels="allLabels || []"
-          :units="allUnits || []" :foods="allFoods || []" @delete="createEditorOpen = false"
-          @cancel="createEditorOpen = false" @save="createListItem" />
+        <ShoppingListItemEditor
+          v-model="createListItemData"
+          class="my-4"
+          :labels="allLabels || []"
+          :units="allUnits || []"
+          :foods="allFoods || []"
+          @delete="createEditorOpen = false"
+          @cancel="createEditorOpen = false"
+          @save="createListItem"
+        />
       </div>
       <div v-else class="mt-4 d-flex justify-end">
-        <BaseButton v-if="preferences.viewByLabel" edit class="mr-2" :disabled="$nuxt.isOffline"
+        <BaseButton
+          v-if="preferences.viewByLabel" edit class="mr-2"
+          :disabled="$nuxt.isOffline"
           @click="toggleReorderLabelsDialog">
           <template #icon> {{ $globals.icons.tags }} </template>
           {{ $t('shopping-list.reorder-labels') }}
         </BaseButton>
-        <BaseButton create @click="createEditorOpen = true"> {{ $t('general.add') }} </BaseButton>
+        <BaseButton create @click="createEditorOpen = true" > {{ $t('general.add') }} </BaseButton>
       </div>
 
       <!-- Action Bar -->
       <div class="d-flex justify-end mb-4 mt-2">
-        <BaseButtonGroup :buttons="[
-          {
-            icon: $globals.icons.contentCopy,
-            text: '',
-            event: 'edit',
-            children: [
-              {
-                icon: $globals.icons.contentCopy,
-                text: $tc('shopping-list.copy-as-text'),
-                event: 'copy-plain',
-              },
-              {
-                icon: $globals.icons.contentCopy,
-                text: $tc('shopping-list.copy-as-markdown'),
-                event: 'copy-markdown',
-              },
-            ],
-          },
-          {
-            icon: $globals.icons.delete,
-            text: $tc('shopping-list.delete-checked'),
-            event: 'delete',
-          },
-          {
-            icon: $globals.icons.tags,
-            text: $tc('shopping-list.toggle-label-sort'),
-            event: 'sort-by-labels',
-          },
-          {
-            icon: $globals.icons.checkboxBlankOutline,
-            text: $tc('shopping-list.uncheck-all-items'),
-            event: 'uncheck',
-          },
-          {
-            icon: $globals.icons.checkboxOutline,
-            text: $tc('shopping-list.check-all-items'),
-            event: 'check',
-          },
-        ]" @edit="edit = true" @delete="openDeleteChecked" @uncheck="openUncheckAll" @check="openCheckAll"
-          @sort-by-labels="sortByLabels" @copy-plain="copyListItems('plain')"
-          @copy-markdown="copyListItems('markdown')" />
+        <BaseButtonGroup
+          :buttons="[
+            {
+              icon: $globals.icons.contentCopy,
+              text: '',
+              event: 'edit',
+              children: [
+                {
+                  icon: $globals.icons.contentCopy,
+                  text: $tc('shopping-list.copy-as-text'),
+                  event: 'copy-plain',
+                },
+                {
+                  icon: $globals.icons.contentCopy,
+                  text: $tc('shopping-list.copy-as-markdown'),
+                  event: 'copy-markdown',
+                },
+              ],
+            },
+            {
+              icon: $globals.icons.delete,
+              text: $tc('shopping-list.delete-checked'),
+              event: 'delete',
+            },
+            {
+              icon: $globals.icons.tags,
+              text: $tc('shopping-list.toggle-label-sort'),
+              event: 'sort-by-labels',
+            },
+            {
+              icon: $globals.icons.checkboxBlankOutline,
+              text: $tc('shopping-list.uncheck-all-items'),
+              event: 'uncheck',
+            },
+            {
+              icon: $globals.icons.checkboxOutline,
+              text: $tc('shopping-list.check-all-items'),
+              event: 'check',
+            },
+          ]"
+          @edit="edit = true"
+          @delete="openDeleteChecked"
+          @uncheck="openUncheckAll"
+          @check="openCheckAll"
+          @sort-by-labels="sortByLabels"
+          @copy-plain="copyListItems('plain')"
+          @copy-markdown="copyListItems('markdown')"
+        />
       </div>
 
       <!-- Checked Items -->
@@ -160,9 +208,16 @@
         <v-expand-transition>
           <div v-show="showChecked">
             <div v-for="(item, idx) in listItems.checked" :key="item.id">
-              <ShoppingListItem v-model="listItems.checked[idx]" class="strike-through-note" :labels="allLabels || []"
-                :units="allUnits || []" :foods="allFoods || []" @checked="saveListItem" @save="saveListItem"
-                @delete="deleteListItem(item)" />
+              <ShoppingListItem
+                v-model="listItems.checked[idx]"
+                class="strike-through-note"
+                :labels="allLabels || []"
+                :units="allUnits || []"
+                :foods="allFoods || []"
+                @checked="saveListItem"
+                @save="saveListItem"
+                @delete="deleteListItem(item)"
+              />
             </div>
           </div>
         </v-expand-transition>
@@ -178,9 +233,7 @@
               {{ $globals.icons.primary }}
             </v-icon>
           </span>
-          {{ $tc('shopping-list.linked-recipes-count', shoppingList.recipeReferences ?
-            shoppingList.recipeReferences.length
-            : 0) }}
+          {{ $tc('shopping-list.linked-recipes-count', shoppingList.recipeReferences ? shoppingList.recipeReferences.length : 0) }}
         </div>
         <v-divider class="my-4"></v-divider>
         <RecipeList :recipes="Array.from(recipeMap.values())" show-description :disabled="$nuxt.isOffline">
@@ -205,7 +258,11 @@
 
     <v-lazy>
       <div class="d-flex justify-end">
-        <BaseButton edit :disabled="$nuxt.isOffline" @click="toggleSettingsDialog">
+        <BaseButton
+          edit
+          :disabled="$nuxt.isOffline"
+          @click="toggleSettingsDialog"
+        >
           <template #icon> {{ $globals.icons.cog }} </template>
           {{ $t('general.settings') }}
         </BaseButton>
@@ -214,7 +271,11 @@
 
     <v-lazy>
       <div v-if="$nuxt.isOnline" class="d-flex justify-end mt-10">
-        <ButtonLink :to="`/group/data/labels`" :text="$tc('shopping-list.manage-labels')" :icon="$globals.icons.tags" />
+        <ButtonLink
+          :to="`/group/data/labels`"
+          :text="$tc('shopping-list.manage-labels')"
+          :icon="$globals.icons.tags"
+        />
       </div>
     </v-lazy>
   </v-container>
@@ -343,11 +404,11 @@ export default defineComponent({
         }
 
         // if the refresh was unsuccessful, the shopping list will be null, so we increment the attempt counter
-        attempts++;
+        attempts ++;
       }
 
       catch (error) {
-        attempts++;
+        attempts ++;
       }
 
       // if we hit too many errors, stop polling
@@ -627,8 +688,8 @@ export default defineComponent({
     function sortItems(a: ShoppingListItemOut | ListItemGroup, b: ShoppingListItemOut | ListItemGroup) {
       return (
         ((a.position || 0) > (b.position || 0)) ||
-          ((a.createdAt || "") < (b.createdAt || ""))
-          ? 1 : -1
+        ((a.createdAt || "") < (b.createdAt || ""))
+        ? 1 : -1
       );
     }
 
@@ -639,7 +700,7 @@ export default defineComponent({
 
       const checkedItemKey = "__checkedItem"
       const listItemGroupsMap = new Map<string, ListItemGroup>();
-      listItemGroupsMap.set(checkedItemKey, { position: Number.MAX_SAFE_INTEGER, createdAt: "", items: [] });
+      listItemGroupsMap.set(checkedItemKey, {position: Number.MAX_SAFE_INTEGER, createdAt: "", items: []});
 
       // group items by checked status, food, or note
       shoppingList.value.listItems.forEach((item) => {
@@ -649,7 +710,7 @@ export default defineComponent({
 
         const group = listItemGroupsMap.get(key);
         if (!group) {
-          listItemGroupsMap.set(key, { position: item.position || 0, createdAt: item.createdAt || "", items: [item] });
+          listItemGroupsMap.set(key, {position: item.position || 0, createdAt: item.createdAt || "", items: [item]});
         } else {
           group.items.push(item);
         }
@@ -877,10 +938,10 @@ export default defineComponent({
       loadingCounter.value -= 1;
 
       if (shoppingList.value.listItems) {
-        // add the item to the list immediately so the user sees the change
-        shoppingList.value.listItems.push(createListItemData.value);
-        updateListItemOrder();
-      }
+          // add the item to the list immediately so the user sees the change
+          shoppingList.value.listItems.push(createListItemData.value);
+          updateListItemOrder();
+        }
       createListItemData.value = listItemFactory(createListItemData.value.isFood || false);
       refresh();
     }
@@ -976,7 +1037,7 @@ export default defineComponent({
       loadingCounter.value += 1;
       const { data } = await userApi.shopping.lists.updateOne(
         shoppingList.value.id,
-        { ...shoppingList.value, userId: currentUserId.value },
+        {...shoppingList.value, userId: currentUserId.value},
       );
       loadingCounter.value -= 1;