Feat/recipe timeline event UI (#1831)

* added new icons

* added timeline badge and dialog to action menu

* more icons

* implemented timeline dialog using temporary API

* added route for fetching all timeline events

* formalized API call and added mobile-friendly view

* cleaned tags

* improved last made UI for mobile

* added event context menu with placeholder methods

* adjusted default made this date
set time to 1 minute before midnight
adjusted display to properly interpret UTC

* fixed local date display

* implemented update/delete routes

* fixed formating for long subjects

* added api error handling

* made everything localizable

* fixed weird formatting

* removed unnecessary async

* combined mobile/desktop views w/ conditional attrs

frontend/components/Domain/Recipe/RecipeTimelineBadge.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-tooltip bottom nudge-right="50" :color="buttonStyle ? 'info' : 'secondary'">
+    <template #activator="{ on, attrs }">
+      <v-btn
+        small
+        :color="buttonStyle ? 'info' : 'secondary'"
+        :fab="buttonStyle"
+        class="ml-1"
+        v-bind="attrs"
+        v-on="on"
+        @click.prevent="toggleTimeline"
+      >
+        <v-icon :small="!buttonStyle" :color="buttonStyle ? 'white' : 'secondary'">
+          {{ $globals.icons.timelineText }}
+        </v-icon>
+      </v-btn>
+      <RecipeDialogTimeline v-model="showTimeline" :slug="slug" :recipe-name="recipeName" />
+    </template>
+    <span>{{ $t('recipe.open-timeline') }}</span>
+  </v-tooltip>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api";
+import RecipeDialogTimeline from "./RecipeDialogTimeline.vue";
+export default defineComponent({
+  components: { RecipeDialogTimeline },
+
+  props: {
+    buttonStyle: {
+      type: Boolean,
+      default: false,
+    },
+    slug: {
+      type: String,
+      default: "",
+    },
+    recipeName: {
+      type: String,
+      default: "",
+    },
+  },
+
+  setup() {
+    const showTimeline = ref(false);
+    function toggleTimeline() {
+      showTimeline.value = !showTimeline.value;
+    }
+
+    return { showTimeline, toggleTimeline };
+  },
+});
+</script>