feat: Timeline Filters (#3284)

* added timeline event filters

* updated empty timeline text

* simplify icons/labels for event types

* added missing translations

* cloned sort improvements to explore page

* added filter indicator

* lint

* removed lint warning

* add top margin to "no events found" text

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

* fixed reversed sort icons

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

* fixed sort dir on timeline filter

* sync checkbox state with preferences state

---------

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/composables/recipes/use-recipe-timeline-events.ts

@@ -0,0 +1,35 @@
+import { computed, useContext } from "@nuxtjs/composition-api";
+import { TimelineEventType } from "~/lib/api/types/recipe";
+
+export interface TimelineEventTypeData {
+  value: TimelineEventType;
+  label: string;
+  icon: string;
+}
+
+export const useTimelineEventTypes = () => {
+  const { $globals, i18n } = useContext();
+  const eventTypeOptions = computed<TimelineEventTypeData[]>(() => {
+    return [
+      {
+        value: "comment",
+        label: i18n.tc("recipe.comment"),
+        icon: $globals.icons.commentTextMultiple,
+      },
+      {
+        value: "info",
+        label: i18n.tc("settings.theme.info"),
+        icon: $globals.icons.informationVariant,
+      },
+      {
+        value: "system",
+        label: i18n.tc("general.system"),
+        icon: $globals.icons.cog,
+      },
+    ];
+  });
+
+  return {
+    eventTypeOptions,
+  }
+}

frontend/composables/use-users/preferences.ts

@@ -1,5 +1,6 @@
 import { Ref, useContext } from "@nuxtjs/composition-api";
 import { useLocalStorage } from "@vueuse/core";
+import { TimelineEventType } from "~/lib/api/types/recipe";
 
 export interface UserPrintPreferences {
   imagePosition: string;
@@ -28,6 +29,7 @@ export interface UserShoppingListPreferences {
 
 export interface UserTimelinePreferences {
   orderDirection: string;
+  types: TimelineEventType[];
 }
 
 export function useUserPrintPreferences(): Ref<UserPrintPreferences> {
@@ -87,6 +89,7 @@ export function useTimelinePreferences(): Ref<UserTimelinePreferences> {
     "timeline-preferences",
     {
       orderDirection: "asc",
+      types: ["info", "system", "comment"] as TimelineEventType[],
     },
     { mergeDefaults: true }
     // we cast to a Ref because by default it will return an optional type ref