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/pages/group/timeline.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-sheet :class="$vuetify.breakpoint.smAndDown ? 'pa-0' : 'px-3 py-0'">
+    <BasePageTitle v-if="groupName" divider>
+      <template #header>
+        <v-img max-height="200" max-width="150" :src="require('~/static/svgs/manage-members.svg')" />
+      </template>
+      <template #title> {{ $t("recipe.group-global-timeline", { groupName }) }} </template>
+    </BasePageTitle>
+    <RecipeTimeline v-model="ready" show-recipe-cards :query-filter="queryFilter" />
+  </v-sheet>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
+import { useUserApi } from "~/composables/api";
+import RecipeTimeline from "~/components/Domain/Recipe/RecipeTimeline.vue";
+
+export default defineComponent({
+  components: { RecipeTimeline },
+  setup() {
+    const { $auth } = useContext();
+    const api = useUserApi();
+    const ready = ref<boolean>(false);
+
+    // @ts-expect-error - TS doesn't like the $auth global user attribute
+    const groupId: string = $auth.user.groupId;
+    const queryFilter = `recipe.group_id="${groupId}"`
+
+    const groupName = ref<string>("");
+    async function refreshGroupName() {
+      const { data } = await api.groups.getCurrentUserGroup();
+      if (data) {
+        groupName.value = data.name;
+      }
+    }
+
+    refreshGroupName();
+    ready.value = true;
+
+    return {
+      groupName,
+      queryFilter,
+      ready,
+    };
+  },
+  head() {
+    return {
+      title: this.$t("recipe.timeline") as string,
+    };
+  },
+});
+</script>