try to save scroll state

routes/_components/Layout.html

@@ -1,17 +1,15 @@
 <Nav :page :dynamicPage :dynamicHref :dynamicIcon :dynamicLabel/>
 
-<VirtualListContainer storeKey="{{dynamicPage || page}}">
+<div class="container">
   <main>
     <slot></slot>
   </main>
-</VirtualListContainer>
+</div>
 <script>
 	import Nav from './Nav.html';
-	import VirtualListContainer from './VirtualListContainer.html'
 
 	export default {
 		components: {
-		  VirtualListContainer,
 			Nav
 		}
 	}

routes/_components/VirtualList.html

@@ -6,6 +6,7 @@
                          makeProps="{{makeProps}}"
                          key="{{visibleItem.key}}"
                          index="{{visibleItem.index}}"
+                         :storeKey
     />
   {{/each}}
   {{#if $showFooter}}
@@ -21,7 +22,7 @@
 <script>
   import VirtualListLazyItem from './VirtualListLazyItem'
   import VirtualListFooter from './VirtualListFooter.html'
-  import { virtualListStore } from '../_utils/virtualListStore'
+  import { getVirtualStore } from '../_utils/virtualStoreCache'
   import throttle from 'lodash/throttle'
   import { mark, stop } from '../_utils/marks'
 
@@ -60,7 +61,7 @@
     data: () => ({
       component: null
     }),
-    store: () => virtualListStore,
+    store: () => getVirtualStore(this.get('storeKey')),
     components: {
       VirtualListLazyItem,
       VirtualListFooter

routes/_components/VirtualListContainer.html

@@ -5,8 +5,7 @@
   <slot></slot>
 </div>
 <script>
-  import { virtualListStore } from '../_utils/virtualListStore'
-
+  import { getVirtualStore } from '../_utils/virtualStoreCache'
   import throttle from 'lodash/throttle'
   import { isFullscreen, attachFullscreenListener, detachFullscreenListener } from '../_utils/fullscreen'
   import { mark, stop } from '../_utils/marks'
@@ -25,10 +24,7 @@
       })
       stop('onCreate VirtualListContainer')
     },
-    store: () => {
-
-      return virtualListStore
-    },
+    store: () => getVirtualStore(this.get('storeKey')),
     events: {
       scroll(node, callback) {
         const onScroll = throttle(event => {

routes/_components/VirtualListItem.html

@@ -21,7 +21,7 @@
   }
 </style>
 <script>
-  import { virtualListStore } from '../_utils/virtualListStore'
+  import { getVirtualStore } from '../_utils/virtualStoreCache'
   import { AsyncLayout } from '../_utils/AsyncLayout'
 
   const keyGetter = node => node.getAttribute('virtual-list-key')
@@ -39,7 +39,7 @@
       let key = this.get('key')
       asyncLayout.unobserve(key, this.refs.node)
     },
-    store: () => virtualListStore,
+    store: () => getVirtualStore(this.get('storeKey')),
     computed: {
       'shown': ($itemHeights, key) => $itemHeights[key] > 0
     },

routes/_components/VirtualListLazyItem.html

@@ -4,6 +4,7 @@
                  :props
                  :key
                  :index
+                 :storeKey
                  />
 {{/if}}
 <script>

routes/accounts/[accountId].html

@@ -2,7 +2,7 @@
   <title>{{'Pinafore – ' + profileName}}</title>
 </:Head>
 
-<Layout page='accounts'
+<VirtualListLayout page='accounts'
         dynamicPage="{{profileName}}"
         dynamicHref="/accounts/{{params.accountId}}"
         dynamicLabel="{{shortProfileName}}"
@@ -20,9 +20,9 @@
     </FreeTextLayout>
   </HiddenFromSSR>
   {{/if}}
-</Layout>
+</VirtualListLayout>
 <script>
-  import Layout from '../_components/Layout.html'
+  import VirtualListLayout from '../_components/VirtualListLayout.html'
   import LazyTimeline from '../_components/LazyTimeline.html'
   import FreeTextLayout from '../_components/FreeTextLayout.html'
   import { store } from '../_utils/store.js'
@@ -65,7 +65,7 @@
       }
     },
     components: {
-      Layout,
+      VirtualListLayout,
       LazyTimeline,
       FreeTextLayout,
       HiddenFromSSR,

routes/federated.html

@@ -2,7 +2,7 @@
   <title>Pinafore – Federated</title>
 </:Head>
 
-<Layout page='federated'>
+<VirtualListLayout page='federated'>
   {{#if $isUserLoggedIn}}
   <LazyTimeline timeline='federated' />
   {{else}}
@@ -14,10 +14,10 @@
     </FreeTextLayout>
   </HiddenFromSSR>
   {{/if}}
-</Layout>
+</VirtualListLayout>
 
 <script>
-  import Layout from './_components/Layout.html'
+  import VirtualListLayout from './_components/VirtualListLayout.html'
   import LazyTimeline from './_components/LazyTimeline.html'
   import FreeTextLayout from './_components/FreeTextLayout.html'
   import { store } from './_utils/store.js'
@@ -26,7 +26,7 @@
   export default {
     store: () => store,
     components: {
-      Layout,
+      VirtualListLayout,
       LazyTimeline,
       FreeTextLayout,
       HiddenFromSSR

routes/index.html

@@ -2,17 +2,17 @@
 	<title>Pinafore – Home</title>
 </:Head>
 
-<Layout page='home'>
+<VirtualListLayout page='home'>
   {{#if $isUserLoggedIn}}
   <LazyTimeline timeline='home' />
   {{else}}
   <NotLoggedInHome/>
   {{/if}}
-</Layout>
+</VirtualListLayout>
 
 
 <script>
-  import Layout from './_components/Layout.html'
+  import VirtualListLayout from './_components/VirtualListLayout.html'
   import NotLoggedInHome from './_components/NotLoggedInHome.html'
   import LazyTimeline from './_components/LazyTimeline.html'
   import { store } from './_utils/store.js'
@@ -20,7 +20,7 @@
 	export default {
 		store: () => store,
 		components: {
-		  Layout,
+      VirtualListLayout,
       LazyTimeline,
 			NotLoggedInHome
 		}

routes/local.html

@@ -2,7 +2,7 @@
   <title>Pinafore – Local</title>
 </:Head>
 
-<Layout page='local'>
+<VirtualListLayout page='local'>
   {{#if $isUserLoggedIn}}
   <LazyTimeline timeline='local' />
   {{else}}
@@ -14,10 +14,10 @@
     </FreeTextLayout>
   </HiddenFromSSR>
   {{/if}}
-</Layout>
+</VirtualListLayout>
 
 <script>
-  import Layout from './_components/Layout.html'
+  import VirtualListLayout from './_components/VirtualListLayout.html'
   import LazyTimeline from './_components/LazyTimeline.html'
   import FreeTextLayout from './_components/FreeTextLayout.html'
   import { store } from './_utils/store.js'
@@ -26,7 +26,7 @@
   export default {
     store: () => store,
     components: {
-      Layout,
+      VirtualListLayout,
       LazyTimeline,
       FreeTextLayout,
       HiddenFromSSR

routes/notifications.html

@@ -2,7 +2,7 @@
 	<title>Pinafore – Notifications</title>
 </:Head>
 
-<Layout page='notifications'>
+<VirtualListLayout page='notifications'>
   <HiddenFromSSR>
     <FreeTextLayout>
       <h1>Notifications</h1>
@@ -10,16 +10,16 @@
       <p>Your notifications will appear here when logged in.</p>
     </FreeTextLayout>
   </HiddenFromSSR>
-</Layout>
+</VirtualListLayout>
 
 <script>
-  import Layout from './_components/Layout.html';
+  import VirtualListLayout from './_components/VirtualListLayout.html';
   import FreeTextLayout from './_components/FreeTextLayout.html'
   import HiddenFromSSR from './_components/HiddenFromSSR'
 
   export default {
     components: {
-      Layout,
+      VirtualListLayout,
       FreeTextLayout,
       HiddenFromSSR
     },

routes/tags/[tagName].html

@@ -2,7 +2,7 @@
   <title>Pinafore – #{{params.tagName}}</title>
 </:Head>
 
-<Layout page='tags'
+<VirtualListLayout page='tags'
         dynamicPage="{{params.tagName}}"
         dynamicHref="/tags/{{params.tagName}}"
         dynamicLabel="{{'#' + params.tagName}}"
@@ -20,9 +20,9 @@
     </FreeTextLayout>
   </HiddenFromSSR>
   {{/if}}
-</Layout>
+</VirtualListLayout>
 <script>
-  import Layout from '../_components/Layout.html'
+  import VirtualListLayout from '../_components/VirtualListLayout.html'
   import LazyTimeline from '../_components/LazyTimeline.html'
   import FreeTextLayout from '../_components/FreeTextLayout.html'
   import { store } from '../_utils/store.js'
@@ -32,7 +32,7 @@
   export default {
     store: () => store,
     components: {
-      Layout,
+      VirtualListLayout,
       LazyTimeline,
       FreeTextLayout,
       HiddenFromSSR,