From f15aa8a5c50507a7ede5b7bee5337e13165b9828 Mon Sep 17 00:00:00 2001
From: Mike <mike.tasset@gmail.com>
Date: Thu, 18 Sep 2025 14:53:33 +0200
Subject: [PATCH] Fix: Add scroll to slidelist (#5488)

---
 .../presentation/slideList/SlideList.vue      | 38 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-2/components/presentation/slideList/SlideList.vue b/packages/frontend-2/components/presentation/slideList/SlideList.vue
index f1a218ecd..d7fad03f9 100644
--- a/packages/frontend-2/components/presentation/slideList/SlideList.vue
+++ b/packages/frontend-2/components/presentation/slideList/SlideList.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="flex flex-col gap-1 w-full">
+  <ul ref="slideListRef" class="flex flex-col gap-1 w-full">
     <PresentationSlideListSlide
       v-for="(slide, index) in visibleSlides"
       :key="slide.id"
@@ -13,6 +13,7 @@
 <script setup lang="ts">
 import { useInjectedPresentationState } from '~/lib/presentations/composables/setup'
 import { graphql } from '~~/lib/common/generated/gql'
+import { useThrottleFn } from '@vueuse/core'
 
 graphql(`
   fragment PresentationSlideList_SavedViewGroup on SavedViewGroup {
@@ -31,6 +32,39 @@ defineProps<{
 }>()
 
 const {
-  response: { visibleSlides }
+  response: { visibleSlides },
+  ui: { slideIdx }
 } = useInjectedPresentationState()
+
+const slideListRef = ref<HTMLUListElement>()
+
+const containerRef = computed(() => slideListRef.value?.parentElement)
+
+const scrollToActiveSlide = () => {
+  if (!slideListRef.value || !containerRef.value) return
+
+  const activeSlideElement = slideListRef.value.children[slideIdx.value] as HTMLElement
+  if (!activeSlideElement) return
+
+  const containerHeight = containerRef.value.clientHeight
+  const slideElementHeight = activeSlideElement.offsetHeight
+  const slideElementTop = activeSlideElement.offsetTop
+
+  const scrollTop = slideElementTop - containerHeight / 2 + slideElementHeight / 2
+
+  containerRef.value.scrollTo({
+    top: Math.max(0, scrollTop),
+    behavior: 'smooth'
+  })
+}
+
+const throttledScrollToActiveSlide = useThrottleFn(scrollToActiveSlide, 100)
+
+watch(
+  slideIdx,
+  () => {
+    throttledScrollToActiveSlide()
+  },
+  { immediate: true }
+)
 </script>