From 0a5606eee6b2e5f6fa7ffc9edaae87663dbacfc9 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sun, 13 Nov 2022 14:53:48 +0000
Subject: [PATCH 01/18] added new icons

---
 frontend/lib/icons/icons.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/lib/icons/icons.ts b/frontend/lib/icons/icons.ts
index 9e97a668ea..85234e13df 100644
--- a/frontend/lib/icons/icons.ts
+++ b/frontend/lib/icons/icons.ts
@@ -60,6 +60,7 @@ import {
   mdiAlert,
   mdiCheckboxMarkedCircle,
   mdiInformation,
+  mdiInformationVariant,
   mdiBellAlert,
   mdiRefreshCircle,
   mdiMenu,
@@ -122,6 +123,8 @@ import {
   mdiCursorMove,
   mdiText,
   mdiTextBoxOutline,
+  mdiTimelineText,
+  mdiMessageText,
 } from "@mdi/js";
 
 export const icons = {
@@ -190,10 +193,12 @@ export const icons = {
   home: mdiHome,
   import: mdiImport,
   information: mdiInformation,
+  informationVariant: mdiInformationVariant,
   link: mdiLink,
   lock: mdiLock,
   logout: mdiLogout,
   menu: mdiMenu,
+  messageText: mdiMessageText,
   newBox: mdiNewBox,
   notificationClearAll: mdiNotificationClearAll,
   openInNew: mdiOpenInNew,
@@ -216,6 +221,7 @@ export const icons = {
   sortClockDescending: mdiSortClockDescending,
   star: mdiStar,
   testTube: mdiTestTube,
+  timelineText: mdiTimelineText,
   tools: mdiTools,
   potSteam: mdiPotSteam,
   translate: mdiTranslate,

From c1427da031cfb54b3284bfb61df7e6d23dd1326c Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sun, 13 Nov 2022 19:57:11 +0000
Subject: [PATCH 02/18] added timeline badge and dialog to action menu

---
 .../Domain/Recipe/RecipeActionMenu.vue        |  5 +-
 .../Domain/Recipe/RecipeDialogTimeline.vue    | 44 +++++++++++++++++
 .../Domain/Recipe/RecipeTimelineBadge.vue     | 49 +++++++++++++++++++
 3 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
 create mode 100644 frontend/components/Domain/Recipe/RecipeTimelineBadge.vue

diff --git a/frontend/components/Domain/Recipe/RecipeActionMenu.vue b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
index 9b5edd5d47..b4c981a4a4 100644
--- a/frontend/components/Domain/Recipe/RecipeActionMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
@@ -22,6 +22,7 @@
     <v-spacer></v-spacer>
     <div v-if="!open" class="custom-btn-group ma-1">
       <RecipeFavoriteBadge v-if="loggedIn" class="mx-1" color="info" button-style :slug="recipe.slug" show-always />
+      <RecipeTimelineBadge button-style :slug="recipe.slug" />
       <v-tooltip v-if="!locked" bottom color="info">
         <template #activator="{ on, attrs }">
           <v-btn fab small class="mx-1" color="info" v-bind="attrs" v-on="on" @click="$emit('edit', true)">
@@ -69,7 +70,6 @@
         :key="index"
         :fab="$vuetify.breakpoint.xs"
         :small="$vuetify.breakpoint.xs"
-        class="mx-1"
         :color="btn.color"
         @click="emitHandler(btn.event)"
       >
@@ -84,6 +84,7 @@
 import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
+import RecipeTimelineBadge from "./RecipeTimelineBadge.vue";
 import { Recipe } from "~/lib/api/types/recipe";
 
 const SAVE_EVENT = "save";
@@ -93,7 +94,7 @@ const JSON_EVENT = "json";
 const OCR_EVENT = "ocr";
 
 export default defineComponent({
-  components: { RecipeContextMenu, RecipeFavoriteBadge },
+  components: { RecipeContextMenu, RecipeFavoriteBadge, RecipeTimelineBadge },
   props: {
     recipe: {
       required: true,
diff --git a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
new file mode 100644
index 0000000000..09c584f915
--- /dev/null
+++ b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
@@ -0,0 +1,44 @@
+<template>
+    <BaseDialog
+        v-model="dialog"
+        title="Event Timeline"
+        :icon="$globals.icons.timelineText"
+      >
+        <v-card-text>
+          Placeholder. Coming soon!
+        </v-card-text>
+      </BaseDialog>
+  </template>
+
+  <script lang="ts">
+  import { computed, defineComponent } from "@nuxtjs/composition-api";
+  export default defineComponent({
+    props: {
+      value: {
+        type: Boolean,
+        default: false,
+      },
+      slug: {
+        type: String,
+        default: "",
+      }
+    },
+
+    setup(props, context) {
+      // V-Model Support
+      const dialog = computed({
+        get: () => {
+          return props.value;
+        },
+        set: (val) => {
+          console.log(val);
+          context.emit("input", val);
+        },
+      });
+
+      return {
+        dialog
+      };
+    },
+  });
+  </script>
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue b/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
new file mode 100644
index 0000000000..bb42222850
--- /dev/null
+++ b/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
@@ -0,0 +1,49 @@
+<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 />
+      </template>
+      <span>Open Event 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: {
+      slug: {
+        type: String,
+        default: "",
+      },
+      buttonStyle: {
+        type: Boolean,
+        default: false,
+      },
+    },
+
+    setup() {
+      const showTimeline = ref(false);
+      function toggleTimeline() {
+        showTimeline.value = !showTimeline.value;
+      }
+
+      return { showTimeline, toggleTimeline };
+    },
+  });
+  </script>

From 760aaa9044efbca5915052f6615a72bccc248667 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sun, 13 Nov 2022 20:58:12 +0000
Subject: [PATCH 03/18] more icons

---
 frontend/lib/icons/icons.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/lib/icons/icons.ts b/frontend/lib/icons/icons.ts
index 85234e13df..a8443764e2 100644
--- a/frontend/lib/icons/icons.ts
+++ b/frontend/lib/icons/icons.ts
@@ -37,6 +37,7 @@ import {
   mdiHeartOutline,
   mdiDotsHorizontal,
   mdiCheckboxBlankOutline,
+  mdiCommentTextMultiple,
   mdiCommentTextMultipleOutline,
   mdiDownload,
   mdiFile,
@@ -165,6 +166,7 @@ export const icons = {
   codeBraces: mdiCodeJson,
   codeJson: mdiCodeJson,
   cog: mdiCog,
+  commentTextMultiple: mdiCommentTextMultiple,
   commentTextMultipleOutline: mdiCommentTextMultipleOutline,
   contentCopy: mdiContentCopy,
   database: mdiDatabase,

From d1a4ddb1640896c9b8b400ef97367562b19f8be8 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sun, 13 Nov 2022 22:15:15 +0000
Subject: [PATCH 04/18] implemented timeline dialog using temporary API

---
 .../Domain/Recipe/RecipeActionMenu.vue        |   2 +-
 .../Domain/Recipe/RecipeDialogTimeline.vue    | 122 ++++++++++++++++--
 .../Domain/Recipe/RecipeTimelineBadge.vue     |  14 +-
 3 files changed, 124 insertions(+), 14 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeActionMenu.vue b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
index b4c981a4a4..4eb753227e 100644
--- a/frontend/components/Domain/Recipe/RecipeActionMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
@@ -22,7 +22,7 @@
     <v-spacer></v-spacer>
     <div v-if="!open" class="custom-btn-group ma-1">
       <RecipeFavoriteBadge v-if="loggedIn" class="mx-1" color="info" button-style :slug="recipe.slug" show-always />
-      <RecipeTimelineBadge button-style :slug="recipe.slug" />
+      <RecipeTimelineBadge button-style :slug="recipe.slug" :recipe-name="recipe.name"  />
       <v-tooltip v-if="!locked" bottom color="info">
         <template #activator="{ on, attrs }">
           <v-btn fab small class="mx-1" color="info" v-bind="attrs" v-on="on" @click="$emit('edit', true)">
diff --git a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
index 09c584f915..ce3d03e349 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
@@ -1,18 +1,63 @@
 <template>
     <BaseDialog
         v-model="dialog"
-        title="Event Timeline"
+        :title="`Timeline – ${recipeName}`"
         :icon="$globals.icons.timelineText"
+        width="70%"
       >
-        <v-card-text>
-          Placeholder. Coming soon!
-        </v-card-text>
+        <v-card
+          v-if="timelineEvents && timelineEvents.length"
+          height="fit-content"
+          max-height="70vh"
+          width="100%"
+          style="overflow-y: auto;"
+        >
+          <v-timeline>
+            <v-timeline-item
+              v-for="event in timelineEvents"
+              :key="event.id"
+              class="px-3"
+              fill-dot
+              :icon="chooseEventIcon(event)"
+            >
+              <template #opposite>
+                <v-chip v-if="event.timestamp" label large>
+                  <v-icon class="mr-1"> {{ $globals.icons.calendar }} </v-icon>
+                  {{ new Date(event.timestamp).toLocaleDateString($i18n.locale) }}
+                </v-chip>
+              </template>
+              <v-card>
+                <v-sheet>
+                  <v-card-title>
+                    <div class="mr-3"><UserAvatar :user-id="event.userId" /></div>
+                    {{ event.subject }}
+                  </v-card-title>
+                  <v-card-text v-if="event.message">
+                    {{ event.message }}
+                  </v-card-text>
+                </v-sheet>
+              </v-card>
+            </v-timeline-item>
+          </v-timeline>
+        </v-card>
+        <v-card v-else>
+          <v-card-title class="justify-center">
+            Nothing on the timeline yet. Try making this recipe!
+          </v-card-title>
+        </v-card>
       </BaseDialog>
   </template>
 
   <script lang="ts">
-  import { computed, defineComponent } from "@nuxtjs/composition-api";
+  import { computed, defineComponent, ref, useContext, } from "@nuxtjs/composition-api";
+  import { whenever } from "@vueuse/core";
+  import { RecipeTimelineEventOut } from "~/lib/api/types/recipe"
+  import { RequestResponse } from "~/lib/api/types/non-generated";
+  import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
+
   export default defineComponent({
+    components: { UserAvatar },
+
     props: {
       value: {
         type: Boolean,
@@ -21,7 +66,11 @@
       slug: {
         type: String,
         default: "",
-      }
+      },
+      recipeName: {
+        type: String,
+        default: "",
+      },
     },
 
     setup(props, context) {
@@ -31,13 +80,70 @@
           return props.value;
         },
         set: (val) => {
-          console.log(val);
           context.emit("input", val);
         },
       });
 
+      whenever(
+        () => props.value,
+        () => {
+          refreshTimelineEvents();
+        }
+      );
+
+      const timelineEvents = ref([{}] as RecipeTimelineEventOut[])
+      const { $axios, $globals } = useContext();
+
+      function chooseEventIcon(event: RecipeTimelineEventOut) {
+        switch (event.eventType) {
+          case "comment":
+            return $globals.icons.commentTextMultiple;
+
+          case "info":
+            return $globals.icons.informationVariant;
+
+          case "system":
+            return $globals.icons.cog;
+
+          default:
+            return $globals.icons.informationVariant;
+        };
+      };
+
+      async function refreshTimelineEvents() {
+        // TODO: implement this properly when PR #1801 is merged
+        // TODO: switch message to eventMessage when PR #1801 is merged
+        // TODO: implement infinite scroll and paginate
+
+        console.error("Using temporary API implementation; not suitable for production!!!");
+
+        function getRequests() {
+          return {
+            async get<T>(url: string, params = {}): Promise<RequestResponse<any>> {
+              let error = null;
+              const response = await $axios.get<T>(url, params).catch((e) => {
+                error = e;
+              });
+              if (response != null) {
+                return { response, error, data: response?.data };
+              }
+              return { response: null, error, data: null };
+            }
+          };
+        }
+
+        const url = `/api/recipes/${props.slug}/timeline/events?orderBy=timestamp&orderDirection=asc&perPage=-1`
+        const response = await getRequests().get(url)
+        timelineEvents.value = response.data.items;
+      };
+
+      // preload events
+      refreshTimelineEvents();
+
       return {
-        dialog
+        chooseEventIcon,
+        dialog,
+        timelineEvents,
       };
     },
   });
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue b/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
index bb42222850..baaddf5f0f 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
@@ -14,9 +14,9 @@
             {{ $globals.icons.timelineText }}
           </v-icon>
         </v-btn>
-        <RecipeDialogTimeline v-model="showTimeline" :slug=slug />
+        <RecipeDialogTimeline v-model="showTimeline" :slug="slug" :recipe-name="recipeName" />
       </template>
-      <span>Open Event Timeline</span>
+      <span>Open Timeline</span>
     </v-tooltip>
   </template>
 
@@ -27,13 +27,17 @@
     components: { RecipeDialogTimeline },
 
     props: {
+      buttonStyle: {
+        type: Boolean,
+        default: false,
+      },
       slug: {
         type: String,
         default: "",
       },
-      buttonStyle: {
-        type: Boolean,
-        default: false,
+      recipeName: {
+        type: String,
+        default: "",
       },
     },
 

From 55c203ec70f8c266bd0cbb7a471c68665885df0d Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 14 Nov 2022 17:28:45 +0000
Subject: [PATCH 05/18] added route for fetching all timeline events

---
 frontend/lib/api/user/recipes/recipe.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/lib/api/user/recipes/recipe.ts b/frontend/lib/api/user/recipes/recipe.ts
index abaef9f506..552476ea6a 100644
--- a/frontend/lib/api/user/recipes/recipe.ts
+++ b/frontend/lib/api/user/recipes/recipe.ts
@@ -11,8 +11,9 @@ import {
   UpdateImageResponse,
   RecipeZipTokenResponse,
   RecipeTimelineEventIn,
+  RecipeTimelineEventOut,
 } from "~/lib/api/types/recipe";
-import { ApiRequestInstance } from "~/lib/api/types/non-generated";
+import { ApiRequestInstance, PaginationData } from "~/lib/api/types/non-generated";
 
 export type Parser = "nlp" | "brute";
 
@@ -132,6 +133,12 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
   }
 
   async createTimelineEvent(recipeSlug: string, payload: RecipeTimelineEventIn) {
-    return await this.requests.post(routes.recipesSlugTimelineEvent(recipeSlug), payload);
+    return await this.requests.post<RecipeTimelineEventOut>(routes.recipesSlugTimelineEvent(recipeSlug), payload);
+  }
+
+  async getAllTimelineEvents(recipeSlug: string, page = 1, perPage = -1, params = {} as any) {
+    return await this.requests.get<PaginationData<RecipeTimelineEventOut>>(routes.recipesSlugTimelineEvent(recipeSlug), {
+      params: { page, perPage, ...params },
+    });
   }
 }

From 4d7ca6d3d670888efe5da9ccf5ef0d8e59d2e36b Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 14 Nov 2022 17:31:15 +0000
Subject: [PATCH 06/18] formalized API call and added mobile-friendly view

---
 .../Domain/Recipe/RecipeDialogTimeline.vue    | 323 ++++++++++--------
 1 file changed, 184 insertions(+), 139 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
index ce3d03e349..9f3f5bee73 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
@@ -1,150 +1,195 @@
 <template>
-    <BaseDialog
-        v-model="dialog"
-        :title="`Timeline – ${recipeName}`"
-        :icon="$globals.icons.timelineText"
-        width="70%"
+  <BaseDialog
+    v-model="dialog"
+    :title="useMobileFormat ? 'Timeline' : `Timeline – ${recipeName}`"
+    :icon="$globals.icons.timelineText"
+    width="70%"
+  >
+    <!-- Desktop -->
+    <div v-if="!useMobileFormat">
+      <v-card
+        v-if="timelineEvents && timelineEvents.length"
+        height="fit-content"
+        max-height="70vh"
+        width="100%"
+        style="overflow-y: auto;"
       >
-        <v-card
-          v-if="timelineEvents && timelineEvents.length"
-          height="fit-content"
-          max-height="70vh"
-          width="100%"
-          style="overflow-y: auto;"
-        >
-          <v-timeline>
-            <v-timeline-item
-              v-for="event in timelineEvents"
-              :key="event.id"
-              class="px-3"
-              fill-dot
-              :icon="chooseEventIcon(event)"
-            >
-              <template #opposite>
-                <v-chip v-if="event.timestamp" label large>
-                  <v-icon class="mr-1"> {{ $globals.icons.calendar }} </v-icon>
+        <v-timeline>
+          <v-timeline-item
+            v-for="event in timelineEvents"
+            :key="event.id"
+            class="px-3"
+            fill-dot
+            :icon="chooseEventIcon(event)"
+          >
+            <template #opposite>
+              <v-chip v-if="event.timestamp" label large>
+                <v-icon class="mr-1"> {{ $globals.icons.calendar }} </v-icon>
+                {{ new Date(event.timestamp).toLocaleDateString($i18n.locale) }}
+              </v-chip>
+            </template>
+            <v-card>
+              <v-sheet>
+                <v-card-title>
+                  <div class="mr-3"><UserAvatar :user-id="event.userId" /></div>
+                  {{ event.subject }}
+                </v-card-title>
+                <v-card-text v-if="event.eventMessage">
+                  {{ event.eventMessage }}
+                </v-card-text>
+              </v-sheet>
+            </v-card>
+          </v-timeline-item>
+        </v-timeline>
+      </v-card>
+      <v-card v-else>
+        <v-card-title class="justify-center">
+          Nothing on the timeline yet. Try making this recipe!
+        </v-card-title>
+      </v-card>
+    </div>
+
+    <!-- Mobile | Dense -->
+    <div v-else>
+      <v-card
+        v-if="timelineEvents && timelineEvents.length"
+        height="fit-content"
+        max-height="70vh"
+        width="100%"
+        style="overflow-y: auto;"
+      >
+        <v-timeline align-top dense>
+          <v-timeline-item
+            v-for="event in timelineEvents"
+            :key="event.id"
+            class="pr-3 mb-9"
+            fill-dot
+            small
+            :icon="chooseEventIcon(event)"
+          >
+            <v-row v-if="event.timestamp" class="mb-1">
+              <v-col align-self="center" sm="auto" cols="2" class="pa-0">
+                <UserAvatar :user-id="event.userId" />
+              </v-col>
+              <v-col align-self="center" class="ml-3 pa-0">
+                <v-chip label small>
+                  <v-icon> {{ $globals.icons.calendar }} </v-icon>
                   {{ new Date(event.timestamp).toLocaleDateString($i18n.locale) }}
                 </v-chip>
-              </template>
-              <v-card>
-                <v-sheet>
-                  <v-card-title>
-                    <div class="mr-3"><UserAvatar :user-id="event.userId" /></div>
-                    {{ event.subject }}
-                  </v-card-title>
-                  <v-card-text v-if="event.message">
-                    {{ event.message }}
-                  </v-card-text>
-                </v-sheet>
-              </v-card>
-            </v-timeline-item>
-          </v-timeline>
-        </v-card>
-        <v-card v-else>
-          <v-card-title class="justify-center">
-            Nothing on the timeline yet. Try making this recipe!
-          </v-card-title>
-        </v-card>
-      </BaseDialog>
-  </template>
-
-  <script lang="ts">
-  import { computed, defineComponent, ref, useContext, } from "@nuxtjs/composition-api";
-  import { whenever } from "@vueuse/core";
-  import { RecipeTimelineEventOut } from "~/lib/api/types/recipe"
-  import { RequestResponse } from "~/lib/api/types/non-generated";
-  import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
-
-  export default defineComponent({
-    components: { UserAvatar },
-
-    props: {
-      value: {
-        type: Boolean,
-        default: false,
-      },
-      slug: {
-        type: String,
-        default: "",
+              </v-col>
+            </v-row>
+            <v-row class="mt-0">
+              <v-col class="pa-0">
+                <strong>{{ event.subject }}</strong>
+                <div v-if="event.eventMessage" class="text-caption">
+                  {{ event.eventMessage }}
+                </div>
+              </v-col>
+            </v-row>
+          </v-timeline-item>
+        </v-timeline>
+      </v-card>
+      <v-card v-else>
+        <v-card-text class="justify-center pa-1">
+          Nothing on the timeline yet. Try making this recipe!
+        </v-card-text>
+      </v-card>
+    </div>
+
+  </BaseDialog>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, useContext, } from "@nuxtjs/composition-api";
+import { whenever } from "@vueuse/core";
+import { useUserApi } from "~/composables/api";
+import { RecipeTimelineEventOut } from "~/lib/api/types/recipe"
+import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
+
+export default defineComponent({
+  components: { UserAvatar },
+
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    slug: {
+      type: String,
+      default: "",
+    },
+    recipeName: {
+      type: String,
+      default: "",
+    },
+  },
+
+  setup(props, context) {
+    const api = useUserApi();
+    const { $globals, $vuetify } = useContext();
+    const timelineEvents = ref([{}] as RecipeTimelineEventOut[])
+
+    const useMobileFormat = computed(() => {
+      return $vuetify.breakpoint.smAndDown;
+    });
+
+    // V-Model Support
+    const dialog = computed({
+      get: () => {
+        return props.value;
       },
-      recipeName: {
-        type: String,
-        default: "",
+      set: (val) => {
+        context.emit("input", val);
       },
-    },
+    });
 
-    setup(props, context) {
-      // V-Model Support
-      const dialog = computed({
-        get: () => {
-          return props.value;
-        },
-        set: (val) => {
-          context.emit("input", val);
-        },
-      });
-
-      whenever(
-        () => props.value,
-        () => {
-          refreshTimelineEvents();
-        }
-      );
-
-      const timelineEvents = ref([{}] as RecipeTimelineEventOut[])
-      const { $axios, $globals } = useContext();
-
-      function chooseEventIcon(event: RecipeTimelineEventOut) {
-        switch (event.eventType) {
-          case "comment":
-            return $globals.icons.commentTextMultiple;
-
-          case "info":
-            return $globals.icons.informationVariant;
-
-          case "system":
-            return $globals.icons.cog;
-
-          default:
-            return $globals.icons.informationVariant;
-        };
-      };
+    whenever(
+      () => props.value,
+      () => {
+        refreshTimelineEvents();
+      }
+    );
 
-      async function refreshTimelineEvents() {
-        // TODO: implement this properly when PR #1801 is merged
-        // TODO: switch message to eventMessage when PR #1801 is merged
-        // TODO: implement infinite scroll and paginate
-
-        console.error("Using temporary API implementation; not suitable for production!!!");
-
-        function getRequests() {
-          return {
-            async get<T>(url: string, params = {}): Promise<RequestResponse<any>> {
-              let error = null;
-              const response = await $axios.get<T>(url, params).catch((e) => {
-                error = e;
-              });
-              if (response != null) {
-                return { response, error, data: response?.data };
-              }
-              return { response: null, error, data: null };
-            }
-          };
-        }
-
-        const url = `/api/recipes/${props.slug}/timeline/events?orderBy=timestamp&orderDirection=asc&perPage=-1`
-        const response = await getRequests().get(url)
-        timelineEvents.value = response.data.items;
-      };
+    function chooseEventIcon(event: RecipeTimelineEventOut) {
+      switch (event.eventType) {
+        case "comment":
+          return $globals.icons.commentTextMultiple;
+
+        case "info":
+          return $globals.icons.informationVariant;
 
-      // preload events
-      refreshTimelineEvents();
+        case "system":
+          return $globals.icons.cog;
 
-      return {
-        chooseEventIcon,
-        dialog,
-        timelineEvents,
+        default:
+          return $globals.icons.informationVariant;
       };
-    },
-  });
-  </script>
+    };
+
+    async function refreshTimelineEvents() {
+      // TODO: implement infinite scroll and paginate instead of loading all events at once
+      const page = 1;
+      const perPage = -1;
+      const orderBy = "timestamp";
+      const orderDirection = "asc";
+
+      const response = await api.recipes.getAllTimelineEvents(props.slug, page, perPage, { orderBy, orderDirection })
+      if (!response?.data) {
+        return;
+      }
+
+      timelineEvents.value = response.data.items;
+    };
+
+    // preload events
+    refreshTimelineEvents();
+
+    return {
+      chooseEventIcon,
+      dialog,
+      timelineEvents,
+      useMobileFormat,
+    };
+  },
+});
+</script>

From 3e862adf74141468504ec1a45c02136d250a1f66 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 14 Nov 2022 18:36:12 +0000
Subject: [PATCH 07/18] cleaned tags

---
 .../Domain/Recipe/RecipeDialogTimeline.vue           | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
index 9f3f5bee73..8577d27da4 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
@@ -58,7 +58,7 @@
         width="100%"
         style="overflow-y: auto;"
       >
-        <v-timeline align-top dense>
+        <v-timeline dense>
           <v-timeline-item
             v-for="event in timelineEvents"
             :key="event.id"
@@ -67,19 +67,19 @@
             small
             :icon="chooseEventIcon(event)"
           >
-            <v-row v-if="event.timestamp" class="mb-1">
-              <v-col align-self="center" sm="auto" cols="2" class="pa-0">
+            <v-row v-if="event.timestamp" no-gutters class="mb-1">
+              <v-col align-self="center" cols="auto">
                 <UserAvatar :user-id="event.userId" />
               </v-col>
-              <v-col align-self="center" class="ml-3 pa-0">
+              <v-col align-self="center" class="ml-3">
                 <v-chip label small>
                   <v-icon> {{ $globals.icons.calendar }} </v-icon>
                   {{ new Date(event.timestamp).toLocaleDateString($i18n.locale) }}
                 </v-chip>
               </v-col>
             </v-row>
-            <v-row class="mt-0">
-              <v-col class="pa-0">
+            <v-row no-gutters class="mt-0">
+              <v-col>
                 <strong>{{ event.subject }}</strong>
                 <div v-if="event.eventMessage" class="text-caption">
                   {{ event.eventMessage }}

From b7d481ef76524bb18eb5b1f29a462eacbe992788 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 14 Nov 2022 18:48:10 +0000
Subject: [PATCH 08/18] improved last made UI for mobile

---
 .../Domain/Recipe/RecipeLastMade.vue          | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeLastMade.vue b/frontend/components/Domain/Recipe/RecipeLastMade.vue
index 948650d048..83711284fd 100644
--- a/frontend/components/Domain/Recipe/RecipeLastMade.vue
+++ b/frontend/components/Domain/Recipe/RecipeLastMade.vue
@@ -42,21 +42,25 @@
         </BaseDialog>
       </div>
       <div>
-        <v-chip
-          label
-          color="accent custom-transparent"
-          class="ma-1"
-          style="height:100%;"
-        >
-          <v-icon left>
-            {{ $globals.icons.calendar }}
-          </v-icon>
-            Last Made {{ value ? new Date(value).toLocaleDateString($i18n.locale) : "Never" }}
-        </v-chip>
-        <BaseButton @click="madeThisDialog = true">
-          <template #icon> {{ $globals.icons.chefHat }} </template>
-          I Made This
-        </BaseButton>
+        <div class="d-flex justify-center flex-wrap">
+          <BaseButton :small="$vuetify.breakpoint.smAndDown" @click="madeThisDialog = true">
+            <template #icon> {{ $globals.icons.chefHat }} </template>
+            I Made This
+          </BaseButton>
+        </div>
+        <div class="d-flex justify-center flex-wrap">
+          <v-chip
+            label
+            :small="$vuetify.breakpoint.smAndDown"
+            color="accent custom-transparent"
+            class="ma-1 pa-3"
+          >
+            <v-icon left>
+              {{ $globals.icons.calendar }}
+            </v-icon>
+              Last Made {{ value ? new Date(value).toLocaleDateString($i18n.locale) : "Never" }}
+          </v-chip>
+        </div>
       </div>
     </div>
   </template>

From 38ddf9c9078c460fb9b349a62ddafb0eb72934b6 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 14 Nov 2022 21:55:10 +0000
Subject: [PATCH 09/18] added event context menu with placeholder methods

---
 .../Domain/Recipe/RecipeDialogTimeline.vue    |  47 +++-
 .../Recipe/RecipeTimelineContextMenu.vue      | 205 ++++++++++++++++++
 2 files changed, 249 insertions(+), 3 deletions(-)
 create mode 100644 frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue

diff --git a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
index 8577d27da4..e9d5a4f2d8 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
@@ -31,8 +31,30 @@
             <v-card>
               <v-sheet>
                 <v-card-title>
-                  <div class="mr-3"><UserAvatar :user-id="event.userId" /></div>
-                  {{ event.subject }}
+                  <v-row>
+                    <v-col cols="auto">
+                      <div class="mr-1" style="display: inline;"><UserAvatar :user-id="event.userId" /></div>
+                      {{ event.subject }}
+                    </v-col>
+                    <v-spacer />
+                    <v-col cols="auto" class="pa-0">
+                      <RecipeTimelineContextMenu
+                        v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
+                        :menu-top="false"
+                        :slug="slug"
+                        :event-id="event.id"
+                        :menu-icon="$globals.icons.dotsVertical"
+                        fab
+                        color="transparent"
+                        :elevation="0"
+                        :card-menu="false"
+                        :use-items="{
+                          edit: true,
+                          delete: true,
+                        }"
+                      />
+                    </v-col>
+                  </v-row>
                 </v-card-title>
                 <v-card-text v-if="event.eventMessage">
                   {{ event.eventMessage }}
@@ -77,6 +99,24 @@
                   {{ new Date(event.timestamp).toLocaleDateString($i18n.locale) }}
                 </v-chip>
               </v-col>
+              <v-spacer />
+                <v-col cols="auto">
+                  <RecipeTimelineContextMenu
+                    v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
+                    :menu-top="false"
+                    :slug="slug"
+                    :event-id="event.id"
+                    :menu-icon="$globals.icons.dotsVertical"
+                    fab
+                    color="transparent"
+                    :elevation="0"
+                    :card-menu="false"
+                    :use-items="{
+                      edit: true,
+                      delete: true,
+                    }"
+                  />
+                </v-col>
             </v-row>
             <v-row no-gutters class="mt-0">
               <v-col>
@@ -102,12 +142,13 @@
 <script lang="ts">
 import { computed, defineComponent, ref, useContext, } from "@nuxtjs/composition-api";
 import { whenever } from "@vueuse/core";
+import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue";
 import { useUserApi } from "~/composables/api";
 import { RecipeTimelineEventOut } from "~/lib/api/types/recipe"
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 
 export default defineComponent({
-  components: { UserAvatar },
+  components: { RecipeTimelineContextMenu, UserAvatar },
 
   props: {
     value: {
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue b/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue
new file mode 100644
index 0000000000..43da198da5
--- /dev/null
+++ b/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue
@@ -0,0 +1,205 @@
+<template>
+    <div class="text-center">
+      <BaseDialog
+        v-model="recipeEventEditDialog"
+        title="Edit Timeline Event"
+        :icon="$globals.icons.edit"
+        :submit-text="$tc('general.save')"
+        @submit="editTimelineEvent"
+      >
+      <!-- TODO: edit form -->
+      </BaseDialog>
+      <BaseDialog
+        v-model="recipeEventDeleteDialog"
+        title="Delete Timeline Event"
+        color="error"
+        :icon="$globals.icons.alertCircle"
+        @confirm="deleteTimelineEvent()"
+      >
+        <v-card-text>
+          Are you sure you want to delete this event?
+        </v-card-text>
+      </BaseDialog>
+      <v-menu
+        offset-y
+        left
+        :bottom="!menuTop"
+        :nudge-bottom="!menuTop ? '5' : '0'"
+        :top="menuTop"
+        :nudge-top="menuTop ? '5' : '0'"
+        allow-overflow
+        close-delay="125"
+        open-on-hover
+        content-class="d-print-none"
+      >
+        <template #activator="{ on, attrs }">
+          <v-btn :fab="fab" :small="fab" :elevation="elevation" :color="color" :icon="!fab" v-bind="attrs" v-on="on" @click.prevent>
+            <v-icon>{{ icon }}</v-icon>
+          </v-btn>
+        </template>
+        <v-list dense>
+          <v-list-item v-for="(item, index) in menuItems" :key="index" @click="contextMenuEventHandler(item.event)">
+            <v-list-item-icon>
+              <v-icon :color="item.color"> {{ item.icon }} </v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>{{ item.title }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </div>
+  </template>
+
+  <script lang="ts">
+  import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
+  import { useUserApi } from "~/composables/api";
+
+  export interface TimelineContextMenuIncludes {
+    edit: boolean;
+    delete: boolean;
+  }
+
+  export interface ContextMenuItem {
+    title: string;
+    icon: string;
+    color: string | undefined;
+    event: string;
+  }
+
+  export default defineComponent({
+    props: {
+      useItems: {
+        type: Object as () => TimelineContextMenuIncludes,
+        default: () => ({
+          edit: true,
+          delete: true,
+        }),
+      },
+      // Append items are added at the end of the useItems list
+      appendItems: {
+        type: Array as () => ContextMenuItem[],
+        default: () => [],
+      },
+      // Append items are added at the beginning of the useItems list
+      leadingItems: {
+        type: Array as () => ContextMenuItem[],
+        default: () => [],
+      },
+      menuTop: {
+        type: Boolean,
+        default: true,
+      },
+      fab: {
+        type: Boolean,
+        default: false,
+      },
+      elevation: {
+        type: Number,
+        default: null
+      },
+      color: {
+        type: String,
+        default: "primary",
+      },
+      slug: {
+        type: String,
+        required: true,
+      },
+      eventId: {
+        type: String,
+        required: true,
+      },
+      menuIcon: {
+        type: String,
+        default: null,
+      },
+    },
+    setup(props, context) {
+      const api = useUserApi();
+
+      const state = reactive({
+        recipeEventEditDialog: false,
+        recipeEventDeleteDialog: false,
+        loading: false,
+        menuItems: [] as ContextMenuItem[],
+      });
+
+      const { i18n, $globals } = useContext();
+
+      // ===========================================================================
+      // Context Menu Setup
+
+      const defaultItems: { [key: string]: ContextMenuItem } = {
+        edit: {
+          title: i18n.tc("general.edit"),
+          icon: $globals.icons.edit,
+          color: undefined,
+          event: "edit",
+        },
+        delete: {
+          title: i18n.tc("general.delete"),
+          icon: $globals.icons.delete,
+          color: "error",
+          event: "delete",
+        },
+      };
+
+      // Get Default Menu Items Specified in Props
+      for (const [key, value] of Object.entries(props.useItems)) {
+        if (value) {
+          const item = defaultItems[key];
+          if (item) {
+            state.menuItems.push(item);
+          }
+        }
+      }
+
+      // Add Leading and Appending Items
+      state.menuItems = [...state.menuItems, ...props.leadingItems, ...props.appendItems];
+
+      const icon = props.menuIcon || $globals.icons.dotsVertical;
+
+      // ===========================================================================
+      // Context Menu Event Handler
+
+      function editTimelineEvent() {
+        // TODO: implement
+        console.log("TODO");
+      }
+
+      function deleteTimelineEvent() {
+        // TODO: implement
+        console.log("TODO");
+      }
+
+      const eventHandlers: { [key: string]: () => void | Promise<any> } = {
+        edit: () => {
+          state.recipeEventEditDialog = true;
+        },
+        delete: () => {
+          state.recipeEventDeleteDialog = true;
+        },
+      };
+
+      function contextMenuEventHandler(eventKey: string) {
+        const handler = eventHandlers[eventKey];
+
+        if (handler && typeof handler === "function") {
+          handler();
+          state.loading = false;
+          return;
+        }
+
+        context.emit(eventKey);
+        state.loading = false;
+      }
+
+      return {
+        ...toRefs(state),
+        contextMenuEventHandler,
+        deleteTimelineEvent,
+        editTimelineEvent,
+        icon,
+      };
+    },
+  });
+  </script>

From ef6b388c06d4e8c280b24a4ca46c6610fb5d5f49 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 15 Nov 2022 02:49:48 +0000
Subject: [PATCH 10/18] adjusted default made this date set time to 1 minute
 before midnight adjusted display to properly interpret UTC

---
 .../Domain/Recipe/RecipeLastMade.vue          | 271 +++++++++---------
 1 file changed, 141 insertions(+), 130 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeLastMade.vue b/frontend/components/Domain/Recipe/RecipeLastMade.vue
index 83711284fd..c7633ac1c6 100644
--- a/frontend/components/Domain/Recipe/RecipeLastMade.vue
+++ b/frontend/components/Domain/Recipe/RecipeLastMade.vue
@@ -1,147 +1,158 @@
 <template>
+  <div>
     <div>
-      <div>
-        <BaseDialog
-          v-model="madeThisDialog"
-          :icon="$globals.icons.chefHat"
-          title="I Made This"
-          :submit-text="$tc('general.save')"
-          @submit="createTimelineEvent"
-          >
-          <v-card-text>
-            <v-form ref="domMadeThisForm">
-              <v-textarea
-                v-model="newTimelineEvent.eventMessage"
-                autofocus
-                label="Comment"
-                hint="How did it turn out?"
-                persistent-hint
-                rows="4"
-              ></v-textarea>
-              <v-menu
-                v-model="datePickerMenu"
-                :close-on-content-click="false"
-                transition="scale-transition"
-                offset-y
-                max-width="290px"
-                min-width="auto"
-              >
-                <template #activator="{ on, attrs }">
-                  <v-text-field
-                    v-model="newTimelineEvent.timestamp"
-                    :prepend-icon="$globals.icons.calendar"
-                    v-bind="attrs"
-                    readonly
-                    v-on="on"
-                  ></v-text-field>
-                </template>
-                <v-date-picker v-model="newTimelineEvent.timestamp" no-title @input="datePickerMenu = false"></v-date-picker>
-              </v-menu>
-            </v-form>
-          </v-card-text>
-        </BaseDialog>
+      <BaseDialog
+        v-model="madeThisDialog"
+        :icon="$globals.icons.chefHat"
+        title="I Made This"
+        :submit-text="$tc('general.save')"
+        @submit="createTimelineEvent"
+        >
+        <v-card-text>
+          <v-form ref="domMadeThisForm">
+            <v-textarea
+              v-model="newTimelineEvent.eventMessage"
+              autofocus
+              label="Comment"
+              hint="How did it turn out?"
+              persistent-hint
+              rows="4"
+            ></v-textarea>
+            <v-menu
+              v-model="datePickerMenu"
+              :close-on-content-click="false"
+              transition="scale-transition"
+              offset-y
+              max-width="290px"
+              min-width="auto"
+            >
+              <template #activator="{ on, attrs }">
+                <v-text-field
+                  v-model="newTimelineEvent.timestamp"
+                  :prepend-icon="$globals.icons.calendar"
+                  v-bind="attrs"
+                  readonly
+                  v-on="on"
+                ></v-text-field>
+              </template>
+              <v-date-picker
+                v-model="newTimelineEvent.timestamp"
+                no-title
+                :local="$i18n.locale"
+                @input="datePickerMenu = false"
+              />
+            </v-menu>
+          </v-form>
+        </v-card-text>
+      </BaseDialog>
+    </div>
+    <div>
+      <div class="d-flex justify-center flex-wrap">
+        <BaseButton :small="$vuetify.breakpoint.smAndDown" @click="madeThisDialog = true">
+          <template #icon> {{ $globals.icons.chefHat }} </template>
+          I Made This
+        </BaseButton>
       </div>
-      <div>
-        <div class="d-flex justify-center flex-wrap">
-          <BaseButton :small="$vuetify.breakpoint.smAndDown" @click="madeThisDialog = true">
-            <template #icon> {{ $globals.icons.chefHat }} </template>
-            I Made This
-          </BaseButton>
-        </div>
-        <div class="d-flex justify-center flex-wrap">
-          <v-chip
-            label
-            :small="$vuetify.breakpoint.smAndDown"
-            color="accent custom-transparent"
-            class="ma-1 pa-3"
-          >
-            <v-icon left>
-              {{ $globals.icons.calendar }}
-            </v-icon>
-              Last Made {{ value ? new Date(value).toLocaleDateString($i18n.locale) : "Never" }}
-          </v-chip>
-        </div>
+      <div class="d-flex justify-center flex-wrap">
+        <v-chip
+          label
+          :small="$vuetify.breakpoint.smAndDown"
+          color="accent custom-transparent"
+          class="ma-1 pa-3"
+        >
+          <v-icon left>
+            {{ $globals.icons.calendar }}
+          </v-icon>
+            Last Made {{ value ? new Date(value+"Z").toLocaleDateString($i18n.locale) : "Never" }}
+        </v-chip>
       </div>
     </div>
-  </template>
+  </div>
+</template>
 
-  <script lang="ts">
-  import { defineComponent, reactive, ref, toRefs, useContext, } from "@nuxtjs/composition-api";
-  import { whenever } from "@vueuse/core";
-  import { VForm } from "~/types/vuetify";
-  import { useUserApi } from "~/composables/api";
-  import { RecipeTimelineEventIn } from "~/lib/api/types/recipe";
+<script lang="ts">
+import { defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
+import { whenever } from "@vueuse/core";
+import { VForm } from "~/types/vuetify";
+import { useUserApi } from "~/composables/api";
+import { RecipeTimelineEventIn } from "~/lib/api/types/recipe";
 
-  export default defineComponent({
-    props: {
-      value: {
-        type: String,
-        default: null,
-      },
-      recipeSlug: {
-        type: String,
-        required: true,
-      },
+export default defineComponent({
+  props: {
+    value: {
+      type: String,
+      default: null,
     },
-    setup(props, context) {
-      const madeThisDialog = ref(false);
-      const userApi = useUserApi();
-      const { $auth } = useContext();
-      const domMadeThisForm = ref<VForm>();
-      const newTimelineEvent = ref<RecipeTimelineEventIn>({
-        // @ts-expect-error - TS doesn't like the $auth global user attribute
-        // eslint-disable-next-line
-        subject: `${$auth.user.fullName} made this`,
-        eventType: "comment",
-        eventMessage: "",
-        timestamp: "",
-      });
-
-      const state = reactive({datePickerMenu: false});
+    recipeSlug: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props, context) {
+    const madeThisDialog = ref(false);
+    const userApi = useUserApi();
+    const { $auth } = useContext();
+    const domMadeThisForm = ref<VForm>();
+    const newTimelineEvent = ref<RecipeTimelineEventIn>({
+      // @ts-expect-error - TS doesn't like the $auth global user attribute
+      // eslint-disable-next-line
+      subject: `${$auth.user.fullName} made this`,
+      eventType: "comment",
+      eventMessage: "",
+      timestamp: undefined,
+    });
 
-      whenever(
-        () => madeThisDialog.value,
-        () => {
-          // Set timestamp to now
-          newTimelineEvent.value.timestamp = new Date().toISOString().substring(0, 10);
-        }
-      );
+    whenever(
+      () => madeThisDialog.value,
+      () => {
+        // Set timestamp to now
+        newTimelineEvent.value.timestamp = (
+          new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)
+        ).toISOString().substring(0, 10);
+      }
+    );
 
-      async function createTimelineEvent() {
-        if (!newTimelineEvent.value.timestamp) {
-          return;
-        }
+    const state = reactive({datePickerMenu: false});
+    async function createTimelineEvent() {
+      if (!newTimelineEvent.value.timestamp) {
+        return;
+      }
 
-        const actions: Promise<any>[] = []
+      const actions: Promise<any>[] = [];
 
-        // the user only selects the date, so we set the time to noon
-        newTimelineEvent.value.timestamp += "T12:00:00";
-        actions.push(userApi.recipes.createTimelineEvent(props.recipeSlug, newTimelineEvent.value));
+      // the user only selects the date, so we set the time to end of day local time
+      // we choose the end of day so it always comes after "new recipe" events
+      newTimelineEvent.value.timestamp = new Date(newTimelineEvent.value.timestamp + "T23:59:59").toISOString();
+      actions.push(userApi.recipes.createTimelineEvent(props.recipeSlug, newTimelineEvent.value));
 
-        // we also update the recipe's last made value
-        if (!props.value || newTimelineEvent.value.timestamp > props.value) {
-          const payload = {lastMade: newTimelineEvent.value.timestamp};
-          actions.push(userApi.recipes.patchOne(props.recipeSlug, payload));
+      // we also update the recipe's last made value
+      if (!props.value || newTimelineEvent.value.timestamp > props.value) {
+        const payload = {lastMade: newTimelineEvent.value.timestamp};
+        actions.push(userApi.recipes.patchOne(props.recipeSlug, payload));
 
-          // update recipe in parent so the user can see it
-          context.emit("input", newTimelineEvent.value.timestamp);
-        }
+        // update recipe in parent so the user can see it
+        // we remove the trailing "Z" since this is how the API returns it
+        context.emit(
+          "input", newTimelineEvent.value.timestamp
+            .substring(0, newTimelineEvent.value.timestamp.length - 1)
+        );
+      }
 
-        await Promise.allSettled(actions)
+      await Promise.allSettled(actions);
 
-        // reset form
-        newTimelineEvent.value.eventMessage = "";
-        madeThisDialog.value = false;
-        domMadeThisForm.value?.reset();
-      }
+      // reset form
+      newTimelineEvent.value.eventMessage = "";
+      madeThisDialog.value = false;
+      domMadeThisForm.value?.reset();
+    }
 
-      return {
-        ...toRefs(state),
-        domMadeThisForm,
-        madeThisDialog,
-        newTimelineEvent,
-        createTimelineEvent,
-      };
-    },
-  });
-  </script>
+    return {
+      ...toRefs(state),
+      domMadeThisForm,
+      madeThisDialog,
+      newTimelineEvent,
+      createTimelineEvent,
+    };
+  },
+});
+</script>

From 75b2eb3e3b16d108060909055c839053ffde9f53 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 15 Nov 2022 02:54:07 +0000
Subject: [PATCH 11/18] fixed local date display

---
 frontend/components/Domain/Recipe/RecipeDialogTimeline.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
index e9d5a4f2d8..90f1640ffd 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
@@ -25,7 +25,7 @@
             <template #opposite>
               <v-chip v-if="event.timestamp" label large>
                 <v-icon class="mr-1"> {{ $globals.icons.calendar }} </v-icon>
-                {{ new Date(event.timestamp).toLocaleDateString($i18n.locale) }}
+                {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
               </v-chip>
             </template>
             <v-card>
@@ -96,7 +96,7 @@
               <v-col align-self="center" class="ml-3">
                 <v-chip label small>
                   <v-icon> {{ $globals.icons.calendar }} </v-icon>
-                  {{ new Date(event.timestamp).toLocaleDateString($i18n.locale) }}
+                  {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
                 </v-chip>
               </v-col>
               <v-spacer />

From 138217ec51153b454c1d54c19695fba1640778f7 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 15 Nov 2022 05:51:52 +0000
Subject: [PATCH 12/18] implemented update/delete routes

---
 .../Domain/Recipe/RecipeDialogTimeline.vue    | 55 ++++++++++++++++---
 .../Recipe/RecipeTimelineContextMenu.vue      | 43 ++++++++-------
 frontend/lib/api/user/recipes/recipe.ts       | 11 +++-
 3 files changed, 80 insertions(+), 29 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
index 90f1640ffd..3057208643 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
@@ -16,7 +16,7 @@
       >
         <v-timeline>
           <v-timeline-item
-            v-for="event in timelineEvents"
+            v-for="(event, index) in timelineEvents"
             :key="event.id"
             class="px-3"
             fill-dot
@@ -42,7 +42,7 @@
                         v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
                         :menu-top="false"
                         :slug="slug"
-                        :event-id="event.id"
+                        :event="event"
                         :menu-icon="$globals.icons.dotsVertical"
                         fab
                         color="transparent"
@@ -52,6 +52,8 @@
                           edit: true,
                           delete: true,
                         }"
+                        @update="updateTimelineEvent(index)"
+                        @delete="deleteTimelineEvent(index)"
                       />
                     </v-col>
                   </v-row>
@@ -82,7 +84,7 @@
       >
         <v-timeline dense>
           <v-timeline-item
-            v-for="event in timelineEvents"
+            v-for="(event, index) in timelineEvents"
             :key="event.id"
             class="pr-3 mb-9"
             fill-dot
@@ -105,7 +107,7 @@
                     v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
                     :menu-top="false"
                     :slug="slug"
-                    :event-id="event.id"
+                    :event="event"
                     :menu-icon="$globals.icons.dotsVertical"
                     fab
                     color="transparent"
@@ -115,6 +117,8 @@
                       edit: true,
                       delete: true,
                     }"
+                    @update="updateTimelineEvent(index)"
+                    @delete="deleteTimelineEvent(index)"
                   />
                 </v-col>
             </v-row>
@@ -140,11 +144,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, useContext, } from "@nuxtjs/composition-api";
+import { computed, defineComponent, ref, useAsync, useContext } from "@nuxtjs/composition-api";
 import { whenever } from "@vueuse/core";
 import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue";
+import { useAsyncKey } from "~/composables/use-utils";
 import { useUserApi } from "~/composables/api";
-import { RecipeTimelineEventOut } from "~/lib/api/types/recipe"
+import { RecipeTimelineEventOut, RecipeTimelineEventUpdate } from "~/lib/api/types/recipe"
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 
 export default defineComponent({
@@ -207,6 +212,39 @@ export default defineComponent({
       };
     };
 
+    function updateTimelineEvent(index: number) {
+      const event = timelineEvents.value[index]
+      const payload: RecipeTimelineEventUpdate = {
+        subject: event.subject,
+        eventMessage: event.eventMessage,
+        image: event.image,
+      };
+
+      useAsync(async () => {
+        const { data } = await api.recipes.updateTimelineEvent(props.slug, event.id, payload);
+        if (!data) {
+          // TODO: handle error
+          console.error("uh oh!");
+          return;
+        }
+
+        timelineEvents.value[index] = data;
+      }, useAsyncKey());
+    }
+
+    function deleteTimelineEvent(index: number) {
+      useAsync(async () => {
+        const { data } = await api.recipes.deleteTimelineEvent(props.slug, timelineEvents.value[index].id);
+        if (!data) {
+          // TODO: handle error
+          console.error("uh oh!");
+          return;
+        }
+
+        timelineEvents.value.splice(index, 1);
+      }, useAsyncKey());
+    }
+
     async function refreshTimelineEvents() {
       // TODO: implement infinite scroll and paginate instead of loading all events at once
       const page = 1;
@@ -214,7 +252,7 @@ export default defineComponent({
       const orderBy = "timestamp";
       const orderDirection = "asc";
 
-      const response = await api.recipes.getAllTimelineEvents(props.slug, page, perPage, { orderBy, orderDirection })
+      const response = await api.recipes.getAllTimelineEvents(props.slug, page, perPage, { orderBy, orderDirection });
       if (!response?.data) {
         return;
       }
@@ -227,8 +265,11 @@ export default defineComponent({
 
     return {
       chooseEventIcon,
+      deleteTimelineEvent,
       dialog,
+      refreshTimelineEvents,
       timelineEvents,
+      updateTimelineEvent,
       useMobileFormat,
     };
   },
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue b/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue
index 43da198da5..3a43ba591d 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue
@@ -5,16 +5,28 @@
         title="Edit Timeline Event"
         :icon="$globals.icons.edit"
         :submit-text="$tc('general.save')"
-        @submit="editTimelineEvent"
+        @submit="$emit('update')"
       >
-      <!-- TODO: edit form -->
+      <v-card-text>
+        <v-form ref="domMadeThisForm">
+          <v-text-field
+            v-model="event.subject"
+            label="Subject"
+          />
+          <v-textarea
+            v-model="event.eventMessage"
+            label="Message"
+            rows="4"
+          />
+        </v-form>
+      </v-card-text>
       </BaseDialog>
       <BaseDialog
         v-model="recipeEventDeleteDialog"
         title="Delete Timeline Event"
         color="error"
         :icon="$globals.icons.alertCircle"
-        @confirm="deleteTimelineEvent()"
+        @confirm="$emit('delete')"
       >
         <v-card-text>
           Are you sure you want to delete this event?
@@ -50,8 +62,9 @@
   </template>
 
   <script lang="ts">
-  import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
-  import { useUserApi } from "~/composables/api";
+  import { defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
+  import { VForm } from "~/types/vuetify";
+  import { RecipeTimelineEventOut } from "~/lib/api/types/recipe";
 
   export interface TimelineContextMenuIncludes {
     edit: boolean;
@@ -104,8 +117,8 @@
         type: String,
         required: true,
       },
-      eventId: {
-        type: String,
+      event: {
+        type: Object as () => RecipeTimelineEventOut,
         required: true,
       },
       menuIcon: {
@@ -114,8 +127,7 @@
       },
     },
     setup(props, context) {
-      const api = useUserApi();
-
+      const domEditEventForm = ref<VForm>();
       const state = reactive({
         recipeEventEditDialog: false,
         recipeEventDeleteDialog: false,
@@ -161,16 +173,6 @@
       // ===========================================================================
       // Context Menu Event Handler
 
-      function editTimelineEvent() {
-        // TODO: implement
-        console.log("TODO");
-      }
-
-      function deleteTimelineEvent() {
-        // TODO: implement
-        console.log("TODO");
-      }
-
       const eventHandlers: { [key: string]: () => void | Promise<any> } = {
         edit: () => {
           state.recipeEventEditDialog = true;
@@ -196,8 +198,7 @@
       return {
         ...toRefs(state),
         contextMenuEventHandler,
-        deleteTimelineEvent,
-        editTimelineEvent,
+        domEditEventForm,
         icon,
       };
     },
diff --git a/frontend/lib/api/user/recipes/recipe.ts b/frontend/lib/api/user/recipes/recipe.ts
index 552476ea6a..fa3fb3ec28 100644
--- a/frontend/lib/api/user/recipes/recipe.ts
+++ b/frontend/lib/api/user/recipes/recipe.ts
@@ -12,6 +12,7 @@ import {
   RecipeZipTokenResponse,
   RecipeTimelineEventIn,
   RecipeTimelineEventOut,
+  RecipeTimelineEventUpdate,
 } from "~/lib/api/types/recipe";
 import { ApiRequestInstance, PaginationData } from "~/lib/api/types/non-generated";
 
@@ -48,7 +49,7 @@ const routes = {
   recipesSlugCommentsId: (slug: string, id: number) => `${prefix}/recipes/${slug}/comments/${id}`,
 
   recipesSlugTimelineEvent: (slug: string) => `${prefix}/recipes/${slug}/timeline/events`,
-  recipesSlugTimelineEventId: (slug: string, id: number) => `${prefix}/recipes/${slug}/timeline/events/${id}`,
+  recipesSlugTimelineEventId: (slug: string, id: string) => `${prefix}/recipes/${slug}/timeline/events/${id}`,
 };
 
 export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
@@ -136,6 +137,14 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
     return await this.requests.post<RecipeTimelineEventOut>(routes.recipesSlugTimelineEvent(recipeSlug), payload);
   }
 
+  async updateTimelineEvent(recipeSlug: string, eventId: string, payload: RecipeTimelineEventUpdate) {
+    return await this.requests.put<RecipeTimelineEventOut, RecipeTimelineEventUpdate>(routes.recipesSlugTimelineEventId(recipeSlug, eventId), payload);
+  }
+
+  async deleteTimelineEvent(recipeSlug: string, eventId: string) {
+    return await this.requests.delete<RecipeTimelineEventOut>(routes.recipesSlugTimelineEventId(recipeSlug, eventId));
+  }
+
   async getAllTimelineEvents(recipeSlug: string, page = 1, perPage = -1, params = {} as any) {
     return await this.requests.get<PaginationData<RecipeTimelineEventOut>>(routes.recipesSlugTimelineEvent(recipeSlug), {
       params: { page, perPage, ...params },

From b99595fdd99d68885ad7ef4387410c013d9e89e8 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 15 Nov 2022 06:07:41 +0000
Subject: [PATCH 13/18] fixed formating for long subjects

---
 .../Domain/Recipe/RecipeDialogTimeline.vue    | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
index 3057208643..b2a083748d 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
@@ -32,12 +32,14 @@
               <v-sheet>
                 <v-card-title>
                   <v-row>
-                    <v-col cols="auto">
-                      <div class="mr-1" style="display: inline;"><UserAvatar :user-id="event.userId" /></div>
+                    <v-col align-self="center" cols="2">
+                      <UserAvatar :user-id="event.userId" />
+                    </v-col>
+                    <v-col cols="9">
                       {{ event.subject }}
                     </v-col>
                     <v-spacer />
-                    <v-col cols="auto" class="pa-0">
+                    <v-col cols="1" class="pa-0">
                       <RecipeTimelineContextMenu
                         v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
                         :menu-top="false"
@@ -102,25 +104,25 @@
                 </v-chip>
               </v-col>
               <v-spacer />
-                <v-col cols="auto">
-                  <RecipeTimelineContextMenu
-                    v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
-                    :menu-top="false"
-                    :slug="slug"
-                    :event="event"
-                    :menu-icon="$globals.icons.dotsVertical"
-                    fab
-                    color="transparent"
-                    :elevation="0"
-                    :card-menu="false"
-                    :use-items="{
-                      edit: true,
-                      delete: true,
-                    }"
-                    @update="updateTimelineEvent(index)"
-                    @delete="deleteTimelineEvent(index)"
-                  />
-                </v-col>
+              <v-col cols="auto">
+                <RecipeTimelineContextMenu
+                  v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
+                  :menu-top="false"
+                  :slug="slug"
+                  :event="event"
+                  :menu-icon="$globals.icons.dotsVertical"
+                  fab
+                  color="transparent"
+                  :elevation="0"
+                  :card-menu="false"
+                  :use-items="{
+                    edit: true,
+                    delete: true,
+                  }"
+                  @update="updateTimelineEvent(index)"
+                  @delete="deleteTimelineEvent(index)"
+                />
+              </v-col>
             </v-row>
             <v-row no-gutters class="mt-0">
               <v-col>

From aab53527d6890d2a0942512e5cddce3714e25073 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 15 Nov 2022 15:45:51 +0000
Subject: [PATCH 14/18] added api error handling

---
 .../Domain/Recipe/RecipeDialogTimeline.vue    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
index b2a083748d..e86dcaaae6 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
@@ -149,6 +149,7 @@
 import { computed, defineComponent, ref, useAsync, useContext } from "@nuxtjs/composition-api";
 import { whenever } from "@vueuse/core";
 import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue";
+import { alert } from "~/composables/use-toast";
 import { useAsyncKey } from "~/composables/use-utils";
 import { useUserApi } from "~/composables/api";
 import { RecipeTimelineEventOut, RecipeTimelineEventUpdate } from "~/lib/api/types/recipe"
@@ -174,7 +175,7 @@ export default defineComponent({
 
   setup(props, context) {
     const api = useUserApi();
-    const { $globals, $vuetify } = useContext();
+    const { $globals, $vuetify, i18n } = useContext();
     const timelineEvents = ref([{}] as RecipeTimelineEventOut[])
 
     const useMobileFormat = computed(() => {
@@ -223,27 +224,26 @@ export default defineComponent({
       };
 
       useAsync(async () => {
-        const { data } = await api.recipes.updateTimelineEvent(props.slug, event.id, payload);
-        if (!data) {
-          // TODO: handle error
-          console.error("uh oh!");
+        const { response } = await api.recipes.updateTimelineEvent(props.slug, event.id, payload);
+        if (response?.status !== 200) {
+          alert.error(i18n.t("events.something-went-wrong") as string);
           return;
         }
 
-        timelineEvents.value[index] = data;
+        alert.success("Event Successfully Updated");
       }, useAsyncKey());
     }
 
     function deleteTimelineEvent(index: number) {
       useAsync(async () => {
-        const { data } = await api.recipes.deleteTimelineEvent(props.slug, timelineEvents.value[index].id);
-        if (!data) {
-          // TODO: handle error
-          console.error("uh oh!");
+        const { response } = await api.recipes.deleteTimelineEvent(props.slug, timelineEvents.value[index].id);
+        if (response?.status !== 200) {
+          alert.error(i18n.t("events.something-went-wrong") as string);
           return;
         }
 
         timelineEvents.value.splice(index, 1);
+        alert.success("Event Successfully Deleted");
       }, useAsyncKey());
     }
 

From dad8ab4031680fc72cce6ab0a62928459c4d46bb Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 15 Nov 2022 16:46:48 +0000
Subject: [PATCH 15/18] made everything localizable

---
 .../Domain/Recipe/RecipeDialogTimeline.vue    |  10 +-
 .../Domain/Recipe/RecipeLastMade.vue          |  12 +-
 .../Domain/Recipe/RecipeTimelineBadge.vue     |   2 +-
 .../Recipe/RecipeTimelineContextMenu.vue      | 380 +++++++++---------
 frontend/lang/messages/en-US.json             |  16 +-
 5 files changed, 217 insertions(+), 203 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
index e86dcaaae6..6c327f2e71 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseDialog
     v-model="dialog"
-    :title="useMobileFormat ? 'Timeline' : `Timeline – ${recipeName}`"
+    :title="useMobileFormat ? $tc('recipe.timeline') : `${$tc('recipe.timeline')} – ${recipeName}`"
     :icon="$globals.icons.timelineText"
     width="70%"
   >
@@ -70,7 +70,7 @@
       </v-card>
       <v-card v-else>
         <v-card-title class="justify-center">
-          Nothing on the timeline yet. Try making this recipe!
+          {{ $t("recipe.timeline-is-empty") }}
         </v-card-title>
       </v-card>
     </div>
@@ -137,7 +137,7 @@
       </v-card>
       <v-card v-else>
         <v-card-text class="justify-center pa-1">
-          Nothing on the timeline yet. Try making this recipe!
+          {{ $t("recipe.timeline-is-empty") }}
         </v-card-text>
       </v-card>
     </div>
@@ -230,7 +230,7 @@ export default defineComponent({
           return;
         }
 
-        alert.success("Event Successfully Updated");
+        alert.success(i18n.t("events.event-updated") as string);
       }, useAsyncKey());
     }
 
@@ -243,7 +243,7 @@ export default defineComponent({
         }
 
         timelineEvents.value.splice(index, 1);
-        alert.success("Event Successfully Deleted");
+        alert.success(i18n.t("events.event-deleted") as string);
       }, useAsyncKey());
     }
 
diff --git a/frontend/components/Domain/Recipe/RecipeLastMade.vue b/frontend/components/Domain/Recipe/RecipeLastMade.vue
index c7633ac1c6..61805cbade 100644
--- a/frontend/components/Domain/Recipe/RecipeLastMade.vue
+++ b/frontend/components/Domain/Recipe/RecipeLastMade.vue
@@ -4,7 +4,7 @@
       <BaseDialog
         v-model="madeThisDialog"
         :icon="$globals.icons.chefHat"
-        title="I Made This"
+        :title="$tc('recipe.made-this')"
         :submit-text="$tc('general.save')"
         @submit="createTimelineEvent"
         >
@@ -13,8 +13,8 @@
             <v-textarea
               v-model="newTimelineEvent.eventMessage"
               autofocus
-              label="Comment"
-              hint="How did it turn out?"
+              :label="$tc('recipe.comment')"
+              :hint="$tc('recipe.how-did-it-turn-out')"
               persistent-hint
               rows="4"
             ></v-textarea>
@@ -63,7 +63,7 @@
           <v-icon left>
             {{ $globals.icons.calendar }}
           </v-icon>
-            Last Made {{ value ? new Date(value+"Z").toLocaleDateString($i18n.locale) : "Never" }}
+            Last Made {{ value ? new Date(value+"Z").toLocaleDateString($i18n.locale) : $t("general.never") }}
         </v-chip>
       </div>
     </div>
@@ -91,12 +91,12 @@ export default defineComponent({
   setup(props, context) {
     const madeThisDialog = ref(false);
     const userApi = useUserApi();
-    const { $auth } = useContext();
+    const { $auth, i18n } = useContext();
     const domMadeThisForm = ref<VForm>();
     const newTimelineEvent = ref<RecipeTimelineEventIn>({
       // @ts-expect-error - TS doesn't like the $auth global user attribute
       // eslint-disable-next-line
-      subject: `${$auth.user.fullName} made this`,
+      subject: i18n.t("recipe.user-made-this", { user: $auth.user.fullName } as string),
       eventType: "comment",
       eventMessage: "",
       timestamp: undefined,
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue b/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
index baaddf5f0f..2f96a273f9 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
@@ -16,7 +16,7 @@
         </v-btn>
         <RecipeDialogTimeline v-model="showTimeline" :slug="slug" :recipe-name="recipeName" />
       </template>
-      <span>Open Timeline</span>
+      <span>{{ $t('recipe.open-timeline') }}</span>
     </v-tooltip>
   </template>
 
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue b/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue
index 3a43ba591d..cbd2281055 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineContextMenu.vue
@@ -1,206 +1,206 @@
 <template>
-    <div class="text-center">
-      <BaseDialog
-        v-model="recipeEventEditDialog"
-        title="Edit Timeline Event"
-        :icon="$globals.icons.edit"
-        :submit-text="$tc('general.save')"
-        @submit="$emit('update')"
-      >
+  <div class="text-center">
+    <BaseDialog
+      v-model="recipeEventEditDialog"
+      :title="$tc('recipe.edit-timeline-event')"
+      :icon="$globals.icons.edit"
+      :submit-text="$tc('general.save')"
+      @submit="$emit('update')"
+    >
+    <v-card-text>
+      <v-form ref="domMadeThisForm">
+        <v-text-field
+          v-model="event.subject"
+          :label="$tc('general.subject')"
+        />
+        <v-textarea
+          v-model="event.eventMessage"
+          :label="$tc('general.message')"
+          rows="4"
+        />
+      </v-form>
+    </v-card-text>
+    </BaseDialog>
+    <BaseDialog
+      v-model="recipeEventDeleteDialog"
+      :title="$tc('events.delete-event')"
+      color="error"
+      :icon="$globals.icons.alertCircle"
+      @confirm="$emit('delete')"
+    >
       <v-card-text>
-        <v-form ref="domMadeThisForm">
-          <v-text-field
-            v-model="event.subject"
-            label="Subject"
-          />
-          <v-textarea
-            v-model="event.eventMessage"
-            label="Message"
-            rows="4"
-          />
-        </v-form>
+        {{ $t("events.event-delete-confirmation") }}
       </v-card-text>
-      </BaseDialog>
-      <BaseDialog
-        v-model="recipeEventDeleteDialog"
-        title="Delete Timeline Event"
-        color="error"
-        :icon="$globals.icons.alertCircle"
-        @confirm="$emit('delete')"
-      >
-        <v-card-text>
-          Are you sure you want to delete this event?
-        </v-card-text>
-      </BaseDialog>
-      <v-menu
-        offset-y
-        left
-        :bottom="!menuTop"
-        :nudge-bottom="!menuTop ? '5' : '0'"
-        :top="menuTop"
-        :nudge-top="menuTop ? '5' : '0'"
-        allow-overflow
-        close-delay="125"
-        open-on-hover
-        content-class="d-print-none"
-      >
-        <template #activator="{ on, attrs }">
-          <v-btn :fab="fab" :small="fab" :elevation="elevation" :color="color" :icon="!fab" v-bind="attrs" v-on="on" @click.prevent>
-            <v-icon>{{ icon }}</v-icon>
-          </v-btn>
-        </template>
-        <v-list dense>
-          <v-list-item v-for="(item, index) in menuItems" :key="index" @click="contextMenuEventHandler(item.event)">
-            <v-list-item-icon>
-              <v-icon :color="item.color"> {{ item.icon }} </v-icon>
-            </v-list-item-icon>
-            <v-list-item-title>{{ item.title }}</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-    </div>
-  </template>
-
-  <script lang="ts">
-  import { defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
-  import { VForm } from "~/types/vuetify";
-  import { RecipeTimelineEventOut } from "~/lib/api/types/recipe";
-
-  export interface TimelineContextMenuIncludes {
-    edit: boolean;
-    delete: boolean;
-  }
-
-  export interface ContextMenuItem {
-    title: string;
-    icon: string;
-    color: string | undefined;
-    event: string;
-  }
-
-  export default defineComponent({
-    props: {
-      useItems: {
-        type: Object as () => TimelineContextMenuIncludes,
-        default: () => ({
-          edit: true,
-          delete: true,
-        }),
-      },
-      // Append items are added at the end of the useItems list
-      appendItems: {
-        type: Array as () => ContextMenuItem[],
-        default: () => [],
-      },
-      // Append items are added at the beginning of the useItems list
-      leadingItems: {
-        type: Array as () => ContextMenuItem[],
-        default: () => [],
-      },
-      menuTop: {
-        type: Boolean,
-        default: true,
-      },
-      fab: {
-        type: Boolean,
-        default: false,
-      },
-      elevation: {
-        type: Number,
-        default: null
-      },
-      color: {
-        type: String,
-        default: "primary",
-      },
-      slug: {
-        type: String,
-        required: true,
-      },
-      event: {
-        type: Object as () => RecipeTimelineEventOut,
-        required: true,
+    </BaseDialog>
+    <v-menu
+      offset-y
+      left
+      :bottom="!menuTop"
+      :nudge-bottom="!menuTop ? '5' : '0'"
+      :top="menuTop"
+      :nudge-top="menuTop ? '5' : '0'"
+      allow-overflow
+      close-delay="125"
+      open-on-hover
+      content-class="d-print-none"
+    >
+      <template #activator="{ on, attrs }">
+        <v-btn :fab="fab" :small="fab" :elevation="elevation" :color="color" :icon="!fab" v-bind="attrs" v-on="on" @click.prevent>
+          <v-icon>{{ icon }}</v-icon>
+        </v-btn>
+      </template>
+      <v-list dense>
+        <v-list-item v-for="(item, index) in menuItems" :key="index" @click="contextMenuEventHandler(item.event)">
+          <v-list-item-icon>
+            <v-icon :color="item.color"> {{ item.icon }} </v-icon>
+          </v-list-item-icon>
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
+import { VForm } from "~/types/vuetify";
+import { RecipeTimelineEventOut } from "~/lib/api/types/recipe";
+
+export interface TimelineContextMenuIncludes {
+  edit: boolean;
+  delete: boolean;
+}
+
+export interface ContextMenuItem {
+  title: string;
+  icon: string;
+  color: string | undefined;
+  event: string;
+}
+
+export default defineComponent({
+  props: {
+    useItems: {
+      type: Object as () => TimelineContextMenuIncludes,
+      default: () => ({
+        edit: true,
+        delete: true,
+      }),
+    },
+    // Append items are added at the end of the useItems list
+    appendItems: {
+      type: Array as () => ContextMenuItem[],
+      default: () => [],
+    },
+    // Append items are added at the beginning of the useItems list
+    leadingItems: {
+      type: Array as () => ContextMenuItem[],
+      default: () => [],
+    },
+    menuTop: {
+      type: Boolean,
+      default: true,
+    },
+    fab: {
+      type: Boolean,
+      default: false,
+    },
+    elevation: {
+      type: Number,
+      default: null
+    },
+    color: {
+      type: String,
+      default: "primary",
+    },
+    slug: {
+      type: String,
+      required: true,
+    },
+    event: {
+      type: Object as () => RecipeTimelineEventOut,
+      required: true,
+    },
+    menuIcon: {
+      type: String,
+      default: null,
+    },
+  },
+  setup(props, context) {
+    const domEditEventForm = ref<VForm>();
+    const state = reactive({
+      recipeEventEditDialog: false,
+      recipeEventDeleteDialog: false,
+      loading: false,
+      menuItems: [] as ContextMenuItem[],
+    });
+
+    const { i18n, $globals } = useContext();
+
+    // ===========================================================================
+    // Context Menu Setup
+
+    const defaultItems: { [key: string]: ContextMenuItem } = {
+      edit: {
+        title: i18n.tc("general.edit"),
+        icon: $globals.icons.edit,
+        color: undefined,
+        event: "edit",
       },
-      menuIcon: {
-        type: String,
-        default: null,
+      delete: {
+        title: i18n.tc("general.delete"),
+        icon: $globals.icons.delete,
+        color: "error",
+        event: "delete",
       },
-    },
-    setup(props, context) {
-      const domEditEventForm = ref<VForm>();
-      const state = reactive({
-        recipeEventEditDialog: false,
-        recipeEventDeleteDialog: false,
-        loading: false,
-        menuItems: [] as ContextMenuItem[],
-      });
-
-      const { i18n, $globals } = useContext();
-
-      // ===========================================================================
-      // Context Menu Setup
-
-      const defaultItems: { [key: string]: ContextMenuItem } = {
-        edit: {
-          title: i18n.tc("general.edit"),
-          icon: $globals.icons.edit,
-          color: undefined,
-          event: "edit",
-        },
-        delete: {
-          title: i18n.tc("general.delete"),
-          icon: $globals.icons.delete,
-          color: "error",
-          event: "delete",
-        },
-      };
-
-      // Get Default Menu Items Specified in Props
-      for (const [key, value] of Object.entries(props.useItems)) {
-        if (value) {
-          const item = defaultItems[key];
-          if (item) {
-            state.menuItems.push(item);
-          }
+    };
+
+    // Get Default Menu Items Specified in Props
+    for (const [key, value] of Object.entries(props.useItems)) {
+      if (value) {
+        const item = defaultItems[key];
+        if (item) {
+          state.menuItems.push(item);
         }
       }
+    }
 
-      // Add Leading and Appending Items
-      state.menuItems = [...state.menuItems, ...props.leadingItems, ...props.appendItems];
-
-      const icon = props.menuIcon || $globals.icons.dotsVertical;
+    // Add Leading and Appending Items
+    state.menuItems = [...state.menuItems, ...props.leadingItems, ...props.appendItems];
 
-      // ===========================================================================
-      // Context Menu Event Handler
+    const icon = props.menuIcon || $globals.icons.dotsVertical;
 
-      const eventHandlers: { [key: string]: () => void | Promise<any> } = {
-        edit: () => {
-          state.recipeEventEditDialog = true;
-        },
-        delete: () => {
-          state.recipeEventDeleteDialog = true;
-        },
-      };
+    // ===========================================================================
+    // Context Menu Event Handler
 
-      function contextMenuEventHandler(eventKey: string) {
-        const handler = eventHandlers[eventKey];
+    const eventHandlers: { [key: string]: () => void | Promise<any> } = {
+      edit: () => {
+        state.recipeEventEditDialog = true;
+      },
+      delete: () => {
+        state.recipeEventDeleteDialog = true;
+      },
+    };
 
-        if (handler && typeof handler === "function") {
-          handler();
-          state.loading = false;
-          return;
-        }
+    function contextMenuEventHandler(eventKey: string) {
+      const handler = eventHandlers[eventKey];
 
-        context.emit(eventKey);
+      if (handler && typeof handler === "function") {
+        handler();
         state.loading = false;
+        return;
       }
 
-      return {
-        ...toRefs(state),
-        contextMenuEventHandler,
-        domEditEventForm,
-        icon,
-      };
-    },
-  });
-  </script>
+      context.emit(eventKey);
+      state.loading = false;
+    }
+
+    return {
+      ...toRefs(state),
+      contextMenuEventHandler,
+      domEditEventForm,
+      icon,
+    };
+  },
+});
+</script>
diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index fbe38eda11..56426f68b3 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -52,6 +52,9 @@
     "apprise-url": "Apprise URL",
     "database": "Database",
     "delete-event": "Delete Event",
+    "event-delete-confirmation": "Are you sure you want to delete this event?",
+    "event-deleted": "Event Deleted",
+    "event-updated": "Event Updated",
     "new-notification-form-description": "Mealie uses the Apprise library to generate notifications. They offer many options for services to use for notifications. Refer to their wiki for a comprehensive guide on how to create the URL for your service. If available, selecting the type of your notification may include extra features.",
     "new-version": "New version available!",
     "notification": "Notification",
@@ -96,9 +99,11 @@
     "keyword": "Keyword",
     "link-copied": "Link Copied",
     "loading-recipes": "Loading Recipes",
+    "message": "Message",
     "monday": "Monday",
     "name": "Name",
     "new": "New",
+    "never": "Never",
     "no": "No",
     "no-recipe-found": "No Recipe Found",
     "ok": "OK",
@@ -119,6 +124,7 @@
     "sort": "Sort",
     "sort-alphabetically": "Alphabetical",
     "status": "Status",
+    "subject": "Subject",
     "submit": "Submit",
     "success-count": "Success: {count}",
     "sunday": "Sunday",
@@ -275,6 +281,7 @@
     "carbohydrate-content": "Carbohydrate",
     "categories": "Categories",
     "comment-action": "Comment",
+    "comment": "Comment",
     "comments": "Comments",
     "delete-confirmation": "Are you sure you want to delete this recipe?",
     "delete-recipe": "Delete Recipe",
@@ -355,7 +362,14 @@
     "decrease-scale-label": "Decrease Scale by 1",
     "increase-scale-label": "Increase Scale by 1",
     "locked": "Locked",
-    "public-link": "Public Link"
+    "public-link": "Public Link",
+    "edit-timeline-event": "Edit Timeline Event",
+    "timeline": "Timeline",
+    "timeline-is-empty": "Nothing on the timeline yet. Try making this recipe!",
+    "open-timeline": "Open Timeline",
+    "made-this": "I Made This",
+    "how-did-it-turn-out": "How did it turn out?",
+    "user-made-this": "{user} made this"
   },
   "search": {
     "advanced-search": "Advanced Search",

From 01ab263930453627613d6a595e063df417affcc1 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 15 Nov 2022 17:25:51 +0000
Subject: [PATCH 16/18] fixed weird formatting

---
 .../Domain/Recipe/RecipeTimelineBadge.vue     | 94 +++++++++----------
 1 file changed, 47 insertions(+), 47 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue b/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
index 2f96a273f9..d699f0ff39 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
@@ -1,53 +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>
+  <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 },
+<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: "",
-      },
+  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;
-      }
+  setup() {
+    const showTimeline = ref(false);
+    function toggleTimeline() {
+      showTimeline.value = !showTimeline.value;
+    }
 
-      return { showTimeline, toggleTimeline };
-    },
-  });
-  </script>
+    return { showTimeline, toggleTimeline };
+  },
+});
+</script>

From d7ac6b4fcb7b8498eb1aa887d5625526e25dd558 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 5 Dec 2022 23:32:44 +0000
Subject: [PATCH 17/18] removed unnecessary async

---
 .../Domain/Recipe/RecipeDialogTimeline.vue    | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
index 6c327f2e71..0e6590e82c 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
@@ -146,11 +146,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, useAsync, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
 import { whenever } from "@vueuse/core";
 import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue";
 import { alert } from "~/composables/use-toast";
-import { useAsyncKey } from "~/composables/use-utils";
 import { useUserApi } from "~/composables/api";
 import { RecipeTimelineEventOut, RecipeTimelineEventUpdate } from "~/lib/api/types/recipe"
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
@@ -215,7 +214,7 @@ export default defineComponent({
       };
     };
 
-    function updateTimelineEvent(index: number) {
+    async function updateTimelineEvent(index: number) {
       const event = timelineEvents.value[index]
       const payload: RecipeTimelineEventUpdate = {
         subject: event.subject,
@@ -223,7 +222,6 @@ export default defineComponent({
         image: event.image,
       };
 
-      useAsync(async () => {
         const { response } = await api.recipes.updateTimelineEvent(props.slug, event.id, payload);
         if (response?.status !== 200) {
           alert.error(i18n.t("events.something-went-wrong") as string);
@@ -231,21 +229,18 @@ export default defineComponent({
         }
 
         alert.success(i18n.t("events.event-updated") as string);
-      }, useAsyncKey());
-    }
+      };
 
-    function deleteTimelineEvent(index: number) {
-      useAsync(async () => {
-        const { response } = await api.recipes.deleteTimelineEvent(props.slug, timelineEvents.value[index].id);
-        if (response?.status !== 200) {
-          alert.error(i18n.t("events.something-went-wrong") as string);
-          return;
-        }
+    async function deleteTimelineEvent(index: number) {
+      const { response } = await api.recipes.deleteTimelineEvent(props.slug, timelineEvents.value[index].id);
+      if (response?.status !== 200) {
+        alert.error(i18n.t("events.something-went-wrong") as string);
+        return;
+      }
 
-        timelineEvents.value.splice(index, 1);
-        alert.success(i18n.t("events.event-deleted") as string);
-      }, useAsyncKey());
-    }
+      timelineEvents.value.splice(index, 1);
+      alert.success(i18n.t("events.event-deleted") as string);
+    };
 
     async function refreshTimelineEvents() {
       // TODO: implement infinite scroll and paginate instead of loading all events at once

From 081e09956543b7f7e1d42aa9a07653ba7a2cd7dc Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 5 Dec 2022 23:35:10 +0000
Subject: [PATCH 18/18] combined mobile/desktop views w/ conditional attrs

---
 .../Domain/Recipe/RecipeDialogTimeline.vue    | 247 ++++++++----------
 1 file changed, 109 insertions(+), 138 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
index 0e6590e82c..e2075972e6 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogTimeline.vue
@@ -1,147 +1,90 @@
 <template>
   <BaseDialog
     v-model="dialog"
-    :title="useMobileFormat ? $tc('recipe.timeline') : `${$tc('recipe.timeline')} – ${recipeName}`"
+    :title="attrs.title"
     :icon="$globals.icons.timelineText"
     width="70%"
   >
-    <!-- Desktop -->
-    <div v-if="!useMobileFormat">
-      <v-card
-        v-if="timelineEvents && timelineEvents.length"
-        height="fit-content"
-        max-height="70vh"
-        width="100%"
-        style="overflow-y: auto;"
-      >
-        <v-timeline>
-          <v-timeline-item
-            v-for="(event, index) in timelineEvents"
-            :key="event.id"
-            class="px-3"
-            fill-dot
-            :icon="chooseEventIcon(event)"
-          >
-            <template #opposite>
-              <v-chip v-if="event.timestamp" label large>
-                <v-icon class="mr-1"> {{ $globals.icons.calendar }} </v-icon>
-                {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
-              </v-chip>
-            </template>
-            <v-card>
-              <v-sheet>
-                <v-card-title>
-                  <v-row>
-                    <v-col align-self="center" cols="2">
-                      <UserAvatar :user-id="event.userId" />
-                    </v-col>
-                    <v-col cols="9">
-                      {{ event.subject }}
-                    </v-col>
-                    <v-spacer />
-                    <v-col cols="1" class="pa-0">
-                      <RecipeTimelineContextMenu
-                        v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
-                        :menu-top="false"
-                        :slug="slug"
-                        :event="event"
-                        :menu-icon="$globals.icons.dotsVertical"
-                        fab
-                        color="transparent"
-                        :elevation="0"
-                        :card-menu="false"
-                        :use-items="{
-                          edit: true,
-                          delete: true,
-                        }"
-                        @update="updateTimelineEvent(index)"
-                        @delete="deleteTimelineEvent(index)"
-                      />
-                    </v-col>
-                  </v-row>
-                </v-card-title>
-                <v-card-text v-if="event.eventMessage">
-                  {{ event.eventMessage }}
-                </v-card-text>
-              </v-sheet>
-            </v-card>
-          </v-timeline-item>
-        </v-timeline>
-      </v-card>
-      <v-card v-else>
-        <v-card-title class="justify-center">
-          {{ $t("recipe.timeline-is-empty") }}
-        </v-card-title>
-      </v-card>
-    </div>
-
-    <!-- Mobile | Dense -->
-    <div v-else>
-      <v-card
-        v-if="timelineEvents && timelineEvents.length"
-        height="fit-content"
-        max-height="70vh"
-        width="100%"
-        style="overflow-y: auto;"
-      >
-        <v-timeline dense>
-          <v-timeline-item
-            v-for="(event, index) in timelineEvents"
-            :key="event.id"
-            class="pr-3 mb-9"
-            fill-dot
-            small
-            :icon="chooseEventIcon(event)"
-          >
-            <v-row v-if="event.timestamp" no-gutters class="mb-1">
-              <v-col align-self="center" cols="auto">
-                <UserAvatar :user-id="event.userId" />
-              </v-col>
-              <v-col align-self="center" class="ml-3">
-                <v-chip label small>
-                  <v-icon> {{ $globals.icons.calendar }} </v-icon>
-                  {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
-                </v-chip>
-              </v-col>
-              <v-spacer />
-              <v-col cols="auto">
-                <RecipeTimelineContextMenu
-                  v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
-                  :menu-top="false"
-                  :slug="slug"
-                  :event="event"
-                  :menu-icon="$globals.icons.dotsVertical"
-                  fab
-                  color="transparent"
-                  :elevation="0"
-                  :card-menu="false"
-                  :use-items="{
-                    edit: true,
-                    delete: true,
-                  }"
-                  @update="updateTimelineEvent(index)"
-                  @delete="deleteTimelineEvent(index)"
-                />
-              </v-col>
-            </v-row>
-            <v-row no-gutters class="mt-0">
-              <v-col>
-                <strong>{{ event.subject }}</strong>
-                <div v-if="event.eventMessage" class="text-caption">
-                  {{ event.eventMessage }}
-                </div>
-              </v-col>
-            </v-row>
-          </v-timeline-item>
-        </v-timeline>
-      </v-card>
-      <v-card v-else>
-        <v-card-text class="justify-center pa-1">
-          {{ $t("recipe.timeline-is-empty") }}
-        </v-card-text>
-      </v-card>
-    </div>
-
+    <v-card
+      v-if="timelineEvents && timelineEvents.length"
+      height="fit-content"
+      max-height="70vh"
+      width="100%"
+      style="overflow-y: auto;"
+    >
+      <v-timeline :dense="attrs.timeline.dense">
+        <v-timeline-item
+          v-for="(event, index) in timelineEvents"
+          :key="event.id"
+          :class="attrs.timeline.item.class"
+          fill-dot
+          :small="attrs.timeline.item.small"
+          :icon="chooseEventIcon(event)"
+        >
+          <template v-if="!useMobileFormat" #opposite>
+            <v-chip v-if="event.timestamp" label large>
+              <v-icon class="mr-1"> {{ $globals.icons.calendar }} </v-icon>
+              {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
+            </v-chip>
+          </template>
+          <v-card>
+            <v-sheet>
+              <v-card-title>
+                <v-row>
+                  <v-col align-self="center" :cols="useMobileFormat ? 'auto' : '2'">
+                    <UserAvatar :user-id="event.userId" />
+                  </v-col>
+                  <v-col v-if="useMobileFormat" align-self="center" class="ml-3">
+                    <v-chip label>
+                      <v-icon> {{ $globals.icons.calendar }} </v-icon>
+                      {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
+                    </v-chip>
+                  </v-col>
+                  <v-col v-else cols="9">
+                    {{ event.subject }}
+                  </v-col>
+                  <v-spacer />
+                  <v-col :cols="useMobileFormat ? 'auto' : '1'" :class="useMobileFormat ? '' : 'pa-0'">
+                    <RecipeTimelineContextMenu
+                      v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
+                      :menu-top="false"
+                      :slug="slug"
+                      :event="event"
+                      :menu-icon="$globals.icons.dotsVertical"
+                      fab
+                      color="transparent"
+                      :elevation="0"
+                      :card-menu="false"
+                      :use-items="{
+                        edit: true,
+                        delete: true,
+                      }"
+                      @update="updateTimelineEvent(index)"
+                      @delete="deleteTimelineEvent(index)"
+                    />
+                  </v-col>
+                </v-row>
+              </v-card-title>
+              <v-card-text>
+                <v-row>
+                  <v-col>
+                    <strong v-if="useMobileFormat">{{ event.subject }}</strong>
+                    <div v-if="event.eventMessage" :class="useMobileFormat ? 'text-caption' : ''">
+                      {{ event.eventMessage }}
+                    </div>
+                  </v-col>
+                </v-row>
+              </v-card-text>
+            </v-sheet>
+          </v-card>
+        </v-timeline-item>
+      </v-timeline>
+    </v-card>
+    <v-card v-else>
+      <v-card-title class="justify-center pa-9">
+        {{ $t("recipe.timeline-is-empty") }}
+      </v-card-title>
+    </v-card>
   </BaseDialog>
 </template>
 
@@ -181,6 +124,33 @@ export default defineComponent({
       return $vuetify.breakpoint.smAndDown;
     });
 
+    const attrs = computed(() => {
+      if (useMobileFormat.value) {
+        return {
+          title: i18n.tc("recipe.timeline"),
+          timeline: {
+            dense: true,
+            item: {
+              class: "pr-3",
+              small: true
+            }
+          }
+        }
+      }
+      else {
+        return {
+          title: `${i18n.tc("recipe.timeline")} – ${props.recipeName}`,
+          timeline: {
+            dense: false,
+            item: {
+              class: "px-3",
+              small: false
+            }
+          }
+        }
+      }
+    })
+
     // V-Model Support
     const dialog = computed({
       get: () => {
@@ -261,6 +231,7 @@ export default defineComponent({
     refreshTimelineEvents();
 
     return {
+      attrs,
       chooseEventIcon,
       deleteTimelineEvent,
       dialog,