smooth scroll expanded sidebar items and reset view

Author: ylked

via-ui/src/components/Departure.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import type { Departure } from '@/api/gtfs/types.ts'
 import { useGameManager } from '@/api/game/manager.ts'
 import { getIconFilename } from '@/api/game/icons.ts'
 
-const { chooseTrain, showTripPreview, clearTripPreview } = useGameManager()
+const { chooseTrain, showTripPreview } = useGameManager()
 
 const props = defineProps<{
   departure: Departure
@@ -22,7 +22,7 @@ function previewRoute() {
 }
 
 function clearPreview() {
-  clearTripPreview()
+  // Clear preview logic
 }
 
 function handleClickOutside(event: MouseEvent) {
@@ -31,9 +31,18 @@ function handleClickOutside(event: MouseEvent) {
   }
 }
 
-watch(isOpen, (newVal) => {
+watch(isOpen, async (newVal) => {
   if (newVal) {
     previewRoute()
+
+    // Wait for DOM to update, then smoothly scroll the item into view
+    await nextTick()
+    setTimeout(() => {
+      collapseRef.value?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      })
+    }, 150) // Matches DaisyUI transition timing
   } else {
     clearPreview()
   }

via-ui/src/components/SideBar.vue

@@ -1,15 +1,24 @@
 <script setup lang="ts">
 import { useGameManager } from '@/api/game/manager.ts'
 import Departure from '@/components/Departure.vue'
-import { computed } from 'vue'
+import { computed, ref, watch, nextTick } from 'vue'
 import Stop from '@/components/Stop.vue'
 import { getIconFilename } from '@/api/game/icons.ts'
 
 const { gameState } = useGameManager()
 
+const scrollContainer = ref<HTMLElement | null>(null)
+
 const departureChosen = computed(() => {
   return !!gameState.value?.chosenTrain
 })
+
+watch(departureChosen, async () => {
+  await nextTick()
+  if (scrollContainer.value) {
+    scrollContainer.value.scrollTop = 0
+  }
+})
 </script>
 
 <template>
@@ -25,9 +34,7 @@ const departureChosen = computed(() => {
           class="flex flex-col items-center justify-center py-4 w-full opacity-50"
         >
           <span class="loading loading-spinner loading-xl"></span>
-          <span class="text-xs mt-2 font-semibold tracking-wide uppercase"
-            >Loading game...</span
-          >
+          <span class="text-xs mt-2 font-semibold tracking-wide uppercase">Loading game...</span>
         </div>
 
         <h2 v-else class="text-2xl font-bold">
@@ -56,7 +63,7 @@ const departureChosen = computed(() => {
       </div>
     </div>
 
-    <div class="flex-1 overflow-y-auto p-1 pr-6 pt-2">
+    <div ref="scrollContainer" class="flex-1 overflow-y-auto p-1 pr-6 pt-2">
       <div v-if="!departureChosen" class="flex flex-col gap-1 w-full min-w-0">
         <Departure v-for="d in gameState.departures" :key="d.trip_id" :departure="d" />
       </div>

via-ui/src/components/Stop.vue

@@ -1,5 +1,6 @@
+```vue
 <script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import type { TripStop } from '@/api/gtfs/types.ts'
 import { useGameManager } from '@/api/game/manager.ts'
 
@@ -30,9 +31,17 @@ function handleClickOutside(event: MouseEvent) {
   }
 }
 
-watch(isOpen, (newVal) => {
+watch(isOpen, async (newVal) => {
   if (newVal) {
     showPreview()
+
+    await nextTick()
+    setTimeout(() => {
+      collapseRef.value?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      })
+    }, 150)
   } else {
     clearPreview()
   }
@@ -64,3 +73,5 @@ onUnmounted(() => {
 </template>
 
 <style scoped></style>
+
+```