From bcbfb347d67518bcbec99e5df9b997b6b525d2e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sat, 12 Jun 2021 14:19:49 +0200
Subject: [PATCH] scroll to end of browser on new view opened

---
 ui/src/views/Browse.vue | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/ui/src/views/Browse.vue b/ui/src/views/Browse.vue
index 98c3dfa..823f7ff 100644
--- a/ui/src/views/Browse.vue
+++ b/ui/src/views/Browse.vue
@@ -1,6 +1,11 @@
 <template>
-  <div class="browser">
-    <div class="view" v-for="(address, idx) in addresses" :key="address">
+  <div class="browser" ref="root">
+    <div
+      class="view"
+      v-for="(address, idx) in addresses"
+      :key="address"
+      :data-address="address"
+    >
       <header :class="{ disabled: addresses.length === 1 }">
         <sl-icon-button
           class="this-button"
@@ -33,10 +38,19 @@ export default defineComponent({
       required: true,
     },
   },
-  data: () => {
-    return {};
+  watch: {
+    addresses(addresses: string[], prevAddresses: string[]) {
+      const root = this.$refs.root as HTMLDivElement;
+      if (addresses.length > prevAddresses.length) {
+        this.$nextTick().then(() => {
+          root.scrollTo({
+            left: root.scrollWidth,
+            behavior: "smooth",
+          });
+        });
+      }
+    },
   },
-  setup(props) {},
   methods: {
     visit(idx: number) {
       this.$router.push({
@@ -57,7 +71,12 @@ export default defineComponent({
 <style scoped lang="scss">
 .browser {
   display: flex;
+
   min-height: 100%;
+  margin-left: -2rem;
+  margin-right: -2rem;
+  padding: 0 2rem;
+
   overflow-x: auto;
 }