Feature(modeling-commons): Add back to top component

Author: omargfh

apps/modeling-commons-frontend/app/components/shared/BackToTop.vue

@@ -0,0 +1,25 @@
+<template>
+  <Transition
+    enter-active-class="transition duration-200 ease-out"
+    enter-from-class="opacity-0 translate-y-2"
+    leave-active-class="transition duration-150 ease-in"
+    leave-to-class="opacity-0 translate-y-2"
+  >
+    <UButton
+      v-if="show"
+      icon="i-lucide-arrow-up"
+      color="primary"
+      size="lg"
+      :ui="{ base: 'rounded-full shadow-lg' }"
+      class="fixed bottom-6 right-6 z-50"
+      aria-label="Back to top"
+      @click="emit('click')"
+    />
+  </Transition>
+</template>
+
+<script setup lang="ts">
+defineProps<{ show: boolean }>();
+
+const emit = defineEmits<{ click: [] }>();
+</script>

apps/modeling-commons-frontend/app/composables/shared/useBackToTop.ts

@@ -0,0 +1,22 @@
+export function useBackToTop(threshold = 600) {
+  const show = ref(false);
+
+  const update = () => {
+    show.value = window.scrollY > threshold;
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  onMounted(() => {
+    window.addEventListener("scroll", update, { passive: true });
+    update();
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("scroll", update);
+  });
+
+  return { show, scrollToTop };
+}