Add scroll restoring

Author: fallaciousreasoning

src/components/BetterList.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import { onMount, tick } from 'svelte'
+  import VirtualList from './VirtualList.svelte'
 
   export let items: any[]
   export let height = '100%'
 
   export let scrollPos: number = 0
+  let initialScrollPos = scrollPos
 
   // Number of additional elements out of view. Helps when scrolling fast.
   export let pad = 1
@@ -100,6 +102,10 @@
   onMount(() => {
     mounted = true
     onScroll()
+
+    if (initialScrollPos !== 0) {
+      setTimeout(() => (viewport.scrollTop = initialScrollPos))
+    }
   })
 </script>
 

src/components/mountains/MountainsFilter.svelte

@@ -13,13 +13,9 @@
     visibleOnly,
     scrollPos,
   } from '../../stores/mountainFilters'
-  import { getOlContext } from '../../ol/Map.svelte'
-  import onMountTick from '../../utils/onMountTick'
   import { fromLonLat } from 'ol/proj'
   import { extent } from '../../stores/map'
     import { containsCoordinate } from 'ol/extent'
-    import { onMount } from 'svelte'
-    import BettererList from '../BettererList.svelte'
     import BetterList from '../BetterList.svelte'
 
   let hasGrade: number
@@ -96,7 +92,7 @@
     (showing {filteredMountains.length} of {totalMountains} mountains)
   </div>
   <div class="flex flex-col gap-2 -mx-4 -mb-4 min-h-0 flex-1">
-    <BetterList items={sorted} let:item>
+    <BetterList items={sorted} let:item bind:scrollPos={$scrollPos}>
       <div
         class="cursor-pointer px-4 py-1"
         on:keyup={(e) => {