feat: improve readability of ingredients list (#2502)

* feat: improve readability of notes in ingredients list

Makes the notes in the ingredients list more readable by making them slightly opaque. This creates a better visual separation between the notes and the rest of the ingredient.

* Use server display if available

* Move note to newline and make quantity more distinct

* Use safeMarkdown for shopping list

* Use component

* Wrap unit in accent color

* Update RecipeIngredientListItem to set food in bold

frontend/components/Domain/Recipe/RecipeIngredientListItem.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="ma-0 pa-0 text-subtitle-1 dense-markdown ingredient-item">
+    <SafeMarkdown v-if="quantity" class="d-inline" :source="quantity" />
+    <template v-if="unit">{{ unit }} </template>
+    <SafeMarkdown v-if="note && !name" class="text-bold d-inline" :source="note" />
+    <template v-else>
+      <SafeMarkdown v-if="name" class="text-bold d-inline" :source="name" />
+      <SafeMarkdown v-if="note" class="note" :source="note" />
+    </template>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+import { RecipeIngredient } from "~/lib/api/types/group";
+import { useParsedIngredientText } from "~/composables/recipes";
+
+export default defineComponent({
+  props: {
+    ingredient: {
+      type: Object as () => RecipeIngredient,
+      required: true,
+    },
+    disableAmount: {
+      type: Boolean,
+      default: false,
+    },
+    scale: {
+      type: Number,
+      default: 1,
+    },
+  },
+  setup(props) {
+    const parsed = useParsedIngredientText(props.ingredient, props.disableAmount, props.scale);
+    return {
+      ...parsed,
+    };
+  },
+});
+</script>
+<style>
+.ingredient-item {
+  .d-inline {
+    & > p {
+      display: inline;
+    }
+  }
+
+  .text-bold {
+    font-weight: bold;
+  }
+}
+
+.note {
+  line-height: 0.8em;
+  font-size: 0.8em;
+  opacity: 0.7;
+}
+</style>