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/RecipeCardMobile.vue

@@ -7,8 +7,18 @@
       :to="$listeners.selected ? undefined : `/recipe/${slug}`"
       @click="$emit('selected')"
     >
+      <v-img v-if="vertical">
+        <RecipeCardImage
+          :icon-size="100"
+          :height="75"
+          :slug="slug"
+          :recipe-id="recipeId"
+          small
+          :image-version="image"
+        />
+      </v-img>
       <v-list-item three-line>
-        <slot name="avatar">
+        <slot v-if="!vertical" name="avatar">
           <v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0 ml-n4">
             <RecipeCardImage
               :icon-size="100"
@@ -17,7 +27,7 @@
               :recipe-id="recipeId"
               small
               :image-version="image"
-            ></RecipeCardImage>
+            />
           </v-list-item-avatar>
         </slot>
         <v-list-item-content>
@@ -25,7 +35,7 @@
           <v-list-item-subtitle>
             <SafeMarkdown :source="description" />
           </v-list-item-subtitle>
-          <div class="d-flex justify-center align-center">
+          <div class="d-flex flex-wrap justify-end align-center">
             <slot name="actions">
               <RecipeFavoriteBadge v-if="loggedIn" :slug="slug" show-always />
               <v-rating
@@ -107,6 +117,10 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    vertical: {
+      type: Boolean,
+      default: false,
+    }
   },
   setup() {
     const { $auth } = useContext();