Feature: Global Timeline (#2265)

* extended query filter to accept nested tables

* decoupled timeline api from recipe slug

* modified frontend to use simplified events api

* fixed nested loop index ghosting

* updated existing tests

* gave mypy a snack

* added tests for nested queries

* fixed "last made" render error

* decoupled recipe timeline from dialog

* removed unused props

* tweaked recipe get_all to accept ids

* created group global timeline
added new timeline page to sidebar
reformatted the recipe timeline
added vertical option to recipe card mobile

* extracted timeline item into its own component

* fixed apploader centering

* added paginated scrolling to recipe timeline

* added sort direction config
fixed infinite scroll on dialog
fixed hasMore var not resetting during instantiation

* added sort direction to user preferences

* updated API docs with new query filter feature

* better error tracing

* fix for recipe not found response

* simplified recipe crud route for slug/id
added test for fetching by slug/id

* made query filter UUID validation clearer

* moved timeline menu option below shopping lists

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeTimelineBadge.vue

@@ -14,17 +14,20 @@
           {{ $globals.icons.timelineText }}
         </v-icon>
       </v-btn>
-      <RecipeDialogTimeline v-model="showTimeline" :slug="slug" :recipe-name="recipeName" />
+      <BaseDialog v-model="showTimeline" :title="timelineAttrs.title" :icon="$globals.icons.timelineText" width="70%">
+        <RecipeTimeline v-model="showTimeline" :query-filter="timelineAttrs.queryFilter" max-height="70vh" />
+      </BaseDialog>
+
     </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";
+import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
+import RecipeTimeline from "./RecipeTimeline.vue";
 export default defineComponent({
-  components: { RecipeDialogTimeline },
+  components: { RecipeTimeline },
 
   props: {
     buttonStyle: {
@@ -41,13 +44,26 @@ export default defineComponent({
     },
   },
 
-  setup() {
+  setup(props) {
+    const { $vuetify, i18n } = useContext();
     const showTimeline = ref(false);
     function toggleTimeline() {
       showTimeline.value = !showTimeline.value;
     }
 
-    return { showTimeline, toggleTimeline };
+    const timelineAttrs = computed(() => {
+      let title = i18n.tc("recipe.timeline")
+      if ($vuetify.breakpoint.smAndDown) {
+        title += ` – ${props.recipeName}`
+      }
+
+      return {
+        title,
+        queryFilter: `recipe.slug="${props.slug}"`,
+      }
+    })
+
+    return { showTimeline, timelineAttrs, toggleTimeline };
   },
 });
 </script>