From 86dc52f93d95f17b21f613541a8517ee6b89e3eb Mon Sep 17 00:00:00 2001
From: Mike <mike.tasset@gmail.com>
Date: Wed, 8 Oct 2025 09:57:51 +0200
Subject: [PATCH] Feat: Show slidelist hover on smaller breakpoints, add loop
 query param (#5706)

---
 .../components/presentation/PageWrapper.vue   |  7 ++--
 .../presentation/SlideIndicator.vue           | 10 +++--
 .../presentation/controls/Controls.vue        | 38 ++++++++++++++++---
 3 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/packages/frontend-2/components/presentation/PageWrapper.vue b/packages/frontend-2/components/presentation/PageWrapper.vue
index d21cc1632..cf36cd656 100644
--- a/packages/frontend-2/components/presentation/PageWrapper.vue
+++ b/packages/frontend-2/components/presentation/PageWrapper.vue
@@ -19,10 +19,11 @@
       <PresentationSlideIndicator
         v-if="!isViewerLoading"
         :show-slide-list="!isLeftSidebarOpen"
+        :is-info-sidebar-open="isInfoSidebarOpen"
         class="absolute top-1/2 z-20"
         :class="[
           isInfoSidebarOpen
-            ? 'translate-y-[calc(-50%+25px-6rem)] lg:translate-y-[-50%]'
+            ? 'translate-y-[calc(-50%-5.5rem)] lg:translate-y-[calc(-50%-25px)]'
             : 'translate-y-[-50%]',
           isLeftSidebarOpen ? 'lg:left-60 hidden md:block' : 'left-0'
         ]"
@@ -106,7 +107,7 @@ const viewerState = shallowRef<InjectableViewerState>()
 
 const mixpanel = useMixpanel()
 const breakpoints = useBreakpoints(TailwindBreakpoints)
-const isMobile = breakpoints.smaller('sm')
+const isLgOrLarger = breakpoints.greaterOrEqual('lg')
 const isXlOrLarger = breakpoints.greaterOrEqual('xl')
 const { $intercom } = useNuxtApp()
 
@@ -154,7 +155,7 @@ onMounted(() => {
   })
 
   isLeftSidebarOpen.value = isXlOrLarger.value
-  isInfoSidebarOpen.value = !isMobile.value
+  isInfoSidebarOpen.value = isLgOrLarger.value
 })
 
 watch(
diff --git a/packages/frontend-2/components/presentation/SlideIndicator.vue b/packages/frontend-2/components/presentation/SlideIndicator.vue
index ff6923350..ec25b1083 100644
--- a/packages/frontend-2/components/presentation/SlideIndicator.vue
+++ b/packages/frontend-2/components/presentation/SlideIndicator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-5 absolute group">
+  <div class="p-3 lg:p-5 absolute group">
     <ul class="flex flex-col space-y-2">
       <li v-for="slide in visibleSlides" :key="slide.id">
         <div
@@ -11,9 +11,12 @@
 
     <div
       v-if="showSlideList"
-      class="hidden lg:block absolute top-[calc(50%+25px)] -translate-y-1/2 w-56 overflow-hidden bg-foundation border border-outline-3 rounded-2xl p-2 pr-0 shadow-md transition-all duration-300 ease-out opacity-0 invisible group-hover:opacity-100 group-hover:visible -translate-x-5 group-hover:translate-x-0"
+      class="hidden touch:hidden sm:block absolute top-1/2 lg:top-[calc(50%+25px)] -translate-y-1/2 w-56 overflow-hidden bg-foundation border border-outline-3 rounded-2xl p-2 pr-0 shadow-md transition-all duration-300 ease-out opacity-0 invisible group-hover:opacity-100 group-hover:visible -translate-x-5 group-hover:translate-x-0"
     >
-      <div class="simple-scrollbar overflow-y-auto max-h-[75vh] pr-2">
+      <div
+        class="simple-scrollbar overflow-y-auto lg:max-h-[75vh] pr-2"
+        :class="[isInfoSidebarOpen ? 'max-h-[calc(100vh-20.625rem)]' : 'max-h-[75vh]']"
+      >
         <PresentationSlideList class="w-full" hide-title />
       </div>
     </div>
@@ -30,5 +33,6 @@ const {
 
 defineProps<{
   showSlideList?: boolean
+  isInfoSidebarOpen?: boolean
 }>()
 </script>
diff --git a/packages/frontend-2/components/presentation/controls/Controls.vue b/packages/frontend-2/components/presentation/controls/Controls.vue
index f6817dfc3..627928299 100644
--- a/packages/frontend-2/components/presentation/controls/Controls.vue
+++ b/packages/frontend-2/components/presentation/controls/Controls.vue
@@ -35,21 +35,47 @@ defineProps<{
   hideUi?: boolean
 }>()
 
+const route = useRoute()
 const {
   ui: { slideIdx: currentVisibleIndex, slideCount },
   viewer: { hasViewChanged }
 } = useInjectedPresentationState()
 const { resetView } = useResetViewUtils()
 
-const disablePrevious = computed(() => currentVisibleIndex.value === 0)
-const disableNext = computed(() =>
-  slideCount.value ? currentVisibleIndex.value === slideCount.value - 1 : false
-)
+const isLoopEnabled = computed(() => route.query.loop === 'true')
+
+const disablePrevious = computed(() => {
+  if (isLoopEnabled.value) return false
+  return currentVisibleIndex.value === 0
+})
+
+const disableNext = computed(() => {
+  if (isLoopEnabled.value) return false
+  return slideCount.value ? currentVisibleIndex.value === slideCount.value - 1 : false
+})
+
 const onPrevious = () => {
-  currentVisibleIndex.value = clamp(currentVisibleIndex.value - 1, 0, slideCount.value)
+  if (isLoopEnabled.value && currentVisibleIndex.value === 0) {
+    currentVisibleIndex.value = slideCount.value - 1
+  } else {
+    currentVisibleIndex.value = clamp(
+      currentVisibleIndex.value - 1,
+      0,
+      slideCount.value
+    )
+  }
 }
+
 const onNext = () => {
-  currentVisibleIndex.value = clamp(currentVisibleIndex.value + 1, 0, slideCount.value)
+  if (isLoopEnabled.value && currentVisibleIndex.value === slideCount.value - 1) {
+    currentVisibleIndex.value = 0
+  } else {
+    currentVisibleIndex.value = clamp(
+      currentVisibleIndex.value + 1,
+      0,
+      slideCount.value
+    )
+  }
 }
 
 // Prevent viewer from moving when using arrow keys