Feature(modeling-commons): Add back to top to model lists

Author: omargfh

apps/modeling-commons-frontend/app/components/model/list/ModelsListing.vue

@@ -20,6 +20,8 @@
     <p v-if="totalCount && totalCount > 0" class="mx-auto text-center text-xs text-dimmed">
       Showing {{ rows.length }} of {{ totalCount }} models
     </p>
+
+    <BackToTop :show="showBackToTop" @click="scrollToTop" />
   </div>
 </template>
 
@@ -39,6 +41,8 @@ const filters = computed(() => props.filters);
 
 const orientation = ref<"horizontal" | "vertical">("horizontal");
 
+const { show: showBackToTop, scrollToTop } = useBackToTop();
+
 const { rows, totalCount, pending, error, hasMore, refresh, nextPage } = useForumModels({
   filters,
 });

apps/modeling-commons-frontend/app/pages/models/index.vue

@@ -156,6 +156,8 @@
         Showing {{ rows.length }} of {{ totalCount }} models
       </p>
     </div>
+
+    <BackToTop :show="showBackToTop" @click="scrollToTop" />
   </UContainer>
 </template>
 
@@ -203,6 +205,8 @@ const highlightFlags = ref({
   ),
 });
 
+const { show: showBackToTop, scrollToTop } = useBackToTop();
+
 const author = reactive(useUserFilter(filters, setFilter));
 const tags = reactive(useTagsFilter(filters, setFilter));
 const version = reactive(useNetlogoVersionsFilter(filters, setFilter));