Feat/recipe timeline event UI

[michael-genson]

What type of PR is this?

(REQUIRED)

• bug
• feature

What this PR does / why we need it:

(REQUIRED)

This implements a new UI for recipe timeline events, and fixes a few bugs and visual glitches with the new "I Made This" functionality (#1801). With these changes we more-or-less complete #1451, save for implementing image handling (this PR is big enough already, I'll add that later).

To open the new UI, there's a new badge:

Here's what it looks like on desktop:

And on mobile we use the dense view:

If you are the "owner" of the event (your userId matches the event's userId") and the eventType is not system, then there's a context menu that lets you edit or delete the event:

If no events are on the recipe, you get a generic message instead. Note that this shouldn't happen with new recipes, as they always create an event since that API was implemented. To trigger this I had to delete the default event through the API.

The already-implemented "I Made This" UI rendered horribly on mobile, so that has been updated.
Desktop:

Mobile:

Lastly, I made all of this text localizable.

Which issue(s) this PR fixes:

(REQUIRED)

Completes FR #1451

Special notes for your reviewer:

Ooh boy did I learn a lot about Vue and JS working on this. Happy to fix/refactor anything that doesn't make sense or can look better. I tried to mirror the existing components as best as possible.

Did I implement the localizations correctly? Will the JSON be automatically updated next time the Crowdin code runs? I mirrored a different PR I found that added new localizations, and I think I did it right.

In a few places I had to do some cheeky stuff to convert between local datetimes and UTC datetimes. What I did definitely works, but my Python brain had trouble wrapping my head around how JS handles datetimes. It's worth reviewing and seeing if I cooked too much pasta with the datetime stuff, specifically in RecipeLastMade.vue and RecipeDialogTimeline.vue.

Testing

(fill-in or delete this section)

I tested the following functionalities:

• Using "I Made This" to generate new events
• Using the API to generate other events
• Editing and deleting existing events via the context menu (and confirming the changes are reflected without a refresh)

I tested the following elements:

• Desktop rendering (various screen sizes)
• Mobile rendering (various screen sizes)
• Having a lot of events
• Having few events
• Having no events

Release Notes

(REQUIRED)

added new recipe timeline interface

[hay-kot]

A few small things in the frontend but looks good overall. Given the previous merged, does anything here need to change?

[michael-genson]

A few small things in the frontend but looks good overall. Given the previous merged, does anything here need to change?

Thanks! I'll take a look at your comments - looking briefly they make sense.
Regarding other merges I don't think anything needs to change but I'll merge and run through everything and confirm

[michael-genson]

I ended out changing the mobile view a bit to more closely match the desktop view, and I think it looks better:

I replaced most of the different attributes using an attrs object like you suggested, but I had to use some ternaries for other attributes (like col)

[michael-genson]

@hay-kot this should be ready :)