From 04dc593b16ec2e2128454dccc9c926ed056fa32f Mon Sep 17 00:00:00 2001
From: Cody <wetzelredistribution@gmail.com>
Date: Tue, 24 Sep 2024 09:29:06 -0500
Subject: [PATCH] feat: Shopping list UI overhaul - add label headings per
 category  (#4235)

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
---
 frontend/pages/group/data/labels.vue        |  2 +-
 frontend/pages/shopping-lists/_id.vue       | 12 ++++--------
 mealie/schema/labels/multi_purpose_label.py |  2 +-
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/frontend/pages/group/data/labels.vue b/frontend/pages/group/data/labels.vue
index d30af8c1838..0f031828ca3 100644
--- a/frontend/pages/group/data/labels.vue
+++ b/frontend/pages/group/data/labels.vue
@@ -232,7 +232,7 @@ export default defineComponent({
       editLabel.value = item;
 
       if (!editLabel.value.color) {
-        editLabel.value.color = "#E0E0E0";
+        editLabel.value.color = "#959595";
       }
     }
 
diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index 54c4a471b8f..6afa28ff157 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -56,15 +56,11 @@
 
       <!-- View By Label -->
       <div v-else>
-        <div v-for="(value, key, idx) 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 v-for="(value, key) in itemsByLabel" :key="key" class="mb-6">
+          <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-lazy v-for="(item, index) in value" :key="item.id" class="ml-2 my-2">
               <ShoppingListItem
diff --git a/mealie/schema/labels/multi_purpose_label.py b/mealie/schema/labels/multi_purpose_label.py
index 04430b37349..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 = "#E0E0E0"
+    color: str = "#959595"
 
 
 class MultiPurposeLabelSave(MultiPurposeLabelCreate):