feat: Timeline Image Uploader Improvements (#2494)

* improved UI responsiveness and added image preview

* added global image cropper component

* added image cropper to last made dialog

* style tweaks

* added more specific text for creating event

* mopped up some slop

* renamed height and width vars

---------

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

frontend/lib/api/user/recipes/recipe.ts

@@ -196,10 +196,10 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
     );
   }
 
-  async updateTimelineEventImage(eventId: string, fileObject: File) {
+  async updateTimelineEventImage(eventId: string, fileObject: Blob | File, fileName: string) {
     const formData = new FormData();
     formData.append("image", fileObject);
-    formData.append("extension", fileObject.name.split(".").pop() ?? "");
+    formData.append("extension", fileName.split(".").pop() ?? "");
 
     return await this.requests.put<UpdateImageResponse, FormData>(routes.recipesTimelineEventIdImage(eventId), formData);
   }

frontend/lib/icons/icons.ts

@@ -135,6 +135,10 @@ import {
   mdiDockTop,
   mdiDockBottom,
   mdiCheckboxOutline,
+  mdiFlipHorizontal,
+  mdiFlipVertical,
+  mdiRotateLeft,
+  mdiRotateRight,
 } from "@mdi/js";
 
 export const icons = {
@@ -200,6 +204,8 @@ export const icons = {
   fileImage: mdiFileImage,
   filePDF: mdiFilePdfBox,
   filter: mdiFilter,
+  flipHorizontal: mdiFlipHorizontal,
+  flipVertical: mdiFlipVertical,
   folderOutline: mdiFolderOutline,
   food: mdiFood,
   formatColorFill: mdiFormatColorFill,
@@ -226,6 +232,8 @@ export const icons = {
   printerSettings: mdiPrinterPosCog,
   refreshCircle: mdiRefreshCircle,
   robot: mdiRobot,
+  rotateLeft: mdiRotateLeft,
+  rotateRight: mdiRotateRight,
   search: mdiMagnify,
   shareVariant: mdiShareVariant,
   shuffleVariant: mdiShuffleVariant,