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

@@ -232,7 +232,7 @@ export default defineComponent({
       editLabel.value = item;
 
       if (!editLabel.value.color) {
-        editLabel.value.color = "#E0E0E0";
+        editLabel.value.color = "#959595";
       }
     }
 

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

mealie/schema/labels/multi_purpose_label.py

@@ -10,7 +10,7 @@ from mealie.schema.response.pagination import PaginationBase
 
 class MultiPurposeLabelCreate(MealieModel):
     name: str
-    color: str = "#E0E0E0"
+    color: str = "#959595"
 
 
 class MultiPurposeLabelSave(MultiPurposeLabelCreate):