feat: Shopping list UI overhaul

frontend/components/Domain/ShoppingList/ShoppingListItem.vue

@@ -140,7 +140,7 @@ export default defineComponent({
   setup(props, context) {
     const { i18n } = useContext();
     const displayRecipeRefs = ref(false);
-    const itemLabelCols = ref<string>(props.value.checked ? "auto" : props.showLabel ? "4" : "6");
+    const itemLabelCols = ref<string>(props.value.checked ? "auto" : props.showLabel ? "8" : "9");
 
     const contextMenu: actions[] = [
       {

frontend/components/global/BaseButtonGroup.vue

@@ -4,14 +4,13 @@
       <v-menu v-if="btn.children" :key="'menu-' + btn.event" active-class="pa-0" offset-y top left :style="stretch ? 'width: 100%;' : ''">
         <template #activator="{ on, attrs }">
           <v-btn tile :large="large" icon v-bind="attrs" v-on="on">
-            <v-icon>
-              {{ btn.icon }}
-            </v-icon>
+            <v-icon>{{ btn.icon }}</v-icon>
           </v-btn>
         </template>
         <v-list dense>
           <template v-for="(child, idx) in btn.children">
             <v-list-item :key="idx" dense @click="$emit(child.event)">
+              <v-icon :color=child.color>{{ child.icon }}</v-icon>
               <v-list-item-title>{{ child.text }}</v-list-item-title>
             </v-list-item>
             <v-divider v-if="child.divider" :key="`divider-${idx}`" class="my-1"></v-divider>

frontend/composables/use-users/preferences.ts

@@ -115,7 +115,7 @@ export function useShoppingListPreferences(): Ref<UserShoppingListPreferences> {
     "shopping-list-preferences",
     {
       viewAllLists: false,
-      viewByLabel: false,
+      viewByLabel: true,
     },
     { mergeDefaults: true }
     // we cast to a Ref because by default it will return an optional type ref

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";
       }
     }