feat: Added scroll to top on all pages that have recipeCardSection (#7384)

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -167,6 +167,7 @@
         :loading="loading"
       />
     </v-fade-transition>
+    <AppScrollToTop />
   </div>
 </template>
 

frontend/components/Layout/LayoutParts/AppScrollToTop.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-fade-transition>
+    <v-btn
+      v-if="showButton"
+      icon
+      position="fixed"
+      location="bottom right"
+      class="ma-4"
+      color="primary"
+      elevation="4"
+      style="z-index: 999;"
+      @click="scrollToTop"
+    >
+      <v-icon>{{ $globals.icons.arrowUp }}</v-icon>
+    </v-btn>
+  </v-fade-transition>
+</template>
+
+<script setup lang="ts">
+const showButton = ref(false);
+const threshold = 400;
+
+function onScroll() {
+  showButton.value = document.documentElement.scrollTop > threshold;
+}
+
+function scrollToTop() {
+  document.documentElement.scrollTop = 0;
+}
+
+onMounted(() => {
+  window.addEventListener("scroll", onScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", onScroll);
+});
+</script>

frontend/lib/icons/icons.ts

@@ -11,6 +11,7 @@ import {
   mdiArrowLeftBoldOutline,
   mdiArrowRightBold,
   mdiArrowRightBoldOutline,
+  mdiArrowUp,
   mdiBackupRestore,
   mdiBeakerOutline,
   mdiBellAlert,
@@ -177,6 +178,7 @@ export const icons = {
   api: mdiApi,
   arrowLeftBold: mdiArrowLeftBold,
   arrowRightBold: mdiArrowRightBold,
+  arrowUp: mdiArrowUp,
   arrowUpDown: mdiDrag,
   backupRestore: mdiBackupRestore,
   bellAlert: mdiBellAlert,