chore: Nuxt 4 upgrade (#7426)

frontend/app/components/Domain/Recipe/RecipeTimelineBadge.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-tooltip
+    location="bottom"
+    nudge-right="50"
+    :color="buttonStyle ? 'info' : 'secondary'"
+  >
+    <template #activator="{ props: activatorProps }">
+      <v-btn
+        icon
+        :variant="buttonStyle ? 'flat' : undefined"
+        :rounded="buttonStyle ? 'circle' : undefined"
+        size="small"
+        :color="buttonStyle ? 'info' : 'secondary'"
+        :fab="buttonStyle"
+        v-bind="{ ...activatorProps, ...$attrs }"
+        @click.prevent="toggleTimeline"
+      >
+        <v-icon
+          :size="!buttonStyle ? undefined : 'x-large'"
+          :color="buttonStyle ? 'white' : 'secondary'"
+        >
+          {{ $globals.icons.timelineText }}
+        </v-icon>
+      </v-btn>
+      <BaseDialog
+        v-model="showTimeline"
+        :title="$t('recipe.timeline')"
+        :icon="$globals.icons.timelineText"
+        width="70%"
+      >
+        <RecipeTimeline
+          v-model="showTimeline"
+          :query-filter="timelineAttrs.queryFilter"
+          max-height="60vh"
+        />
+      </BaseDialog>
+    </template>
+    <span>{{ $t('recipe.open-timeline') }}</span>
+  </v-tooltip>
+</template>
+
+<script setup lang="ts">
+import RecipeTimeline from "./RecipeTimeline.vue";
+
+interface Props {
+  buttonStyle?: boolean;
+  slug?: string;
+  recipeName?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  buttonStyle: false,
+  slug: "",
+  recipeName: "",
+});
+
+const showTimeline = ref(false);
+
+function toggleTimeline() {
+  showTimeline.value = !showTimeline.value;
+}
+
+const timelineAttrs = computed(() => {
+  return {
+    queryFilter: `recipe.slug="${props.slug}"`,
+  };
+});
+</script>