From 0673511fc246d67356dd656ad81ba401e3179108 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 3 Mar 2021 16:46:53 +0200
Subject: [PATCH] fix shoutbox header, use custom scroll-to-bottom system,
 remove vue-chat-scroll, temporarily add chat test hack

---
 package.json                             |  1 -
 src/App.vue                              |  2 +-
 src/components/chat_panel/chat_panel.js  | 12 ++++++++++++
 src/components/chat_panel/chat_panel.vue | 15 ++++++++++-----
 src/main.js                              |  2 --
 src/modules/chat.js                      | 19 +++++++++++++++++++
 yarn.lock                                |  4 ----
 7 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 372155dfb9..8dbf25030b 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,6 @@
     "punycode.js": "^2.1.0",
     "v-click-outside": "^2.1.1",
     "vue": "^2.6.11",
-    "vue-chat-scroll": "^1.2.1",
     "vue-i18n": "^7.3.2",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.6.11",
diff --git a/src/App.vue b/src/App.vue
index 1a1667788d..e09ce4c8f3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -50,7 +50,7 @@
       <media-modal />
     </div>
     <chat-panel
-      v-if="currentUser && chat"
+      v-if="currentUser"
       :floating="true"
       class="floating-chat mobile-hidden"
     />
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index c388709802..556694aef2 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -35,6 +35,18 @@ const chatPanel = {
     userProfileLink (user) {
       return generateProfileLink(user.id, user.username, this.$store.state.instance.restrictedNicknames)
     }
+  },
+  watch: {
+    messages (newVal) {
+      const scrollEl = this.$el.querySelector('.chat-window')
+      if (!scrollEl) return
+      if (scrollEl.scrollTop + scrollEl.offsetHeight + 20 > scrollEl.scrollHeight) {
+        this.$nextTick(() => {
+          if (!scrollEl) return
+          scrollEl.scrollTop = scrollEl.scrollHeight - scrollEl.offsetHeight
+        })
+      }
+    }
   }
 }
 
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 7993c94d9a..8a829115b2 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -10,17 +10,15 @@
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
-          <span>{{ $t('shoutbox.title') }}</span>
+          {{ $t('shoutbox.title') }}
           <FAIcon
             v-if="floating"
             icon="times"
+            class="close-icon"
           />
         </div>
       </div>
-      <div
-        v-chat-scroll
-        class="chat-window"
-      >
+      <div class="chat-window">
         <div
           v-for="message in messages"
           :key="message.id"
@@ -94,6 +92,13 @@
     .icon {
       color: $fallback--text;
       color: var(--text, $fallback--text);
+      margin-right: 0.5em;
+    }
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
   }
 
diff --git a/src/main.js b/src/main.js
index 90ee288783..e1cac748fc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,7 +28,6 @@ import pushNotifications from './lib/push_notifications_plugin.js'
 
 import messages from './i18n/messages.js'
 
-import VueChatScroll from 'vue-chat-scroll'
 import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'
@@ -42,7 +41,6 @@ const currentLocale = (window.navigator.language || 'en').split('-')[0]
 Vue.use(Vuex)
 Vue.use(VueRouter)
 Vue.use(VueI18n)
-Vue.use(VueChatScroll)
 Vue.use(VueClickOutside)
 Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)
diff --git a/src/modules/chat.js b/src/modules/chat.js
index c798549dd1..264ba00b71 100644
--- a/src/modules/chat.js
+++ b/src/modules/chat.js
@@ -18,6 +18,25 @@ const chat = {
   actions: {
     initializeChat (store, socket) {
       const channel = socket.channel('chat:public')
+      let id = 0
+      const createmsg = () => {
+        id += 1
+        return {
+          text: 'test' + id,
+          author: {
+            username: 'test',
+            avatar: '',
+            id
+          }
+        }
+      }
+
+      const loop = () => {
+        store.commit('addMessage', createmsg())
+        setTimeout(loop, 3000)
+      }
+      loop()
+
       channel.on('new_msg', (msg) => {
         store.commit('addMessage', msg)
       })
diff --git a/yarn.lock b/yarn.lock
index 6d0095db96..80c09312d8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8923,10 +8923,6 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
-vue-chat-scroll@^1.2.1:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/vue-chat-scroll/-/vue-chat-scroll-1.3.5.tgz#a5ee5bae5058f614818a96eac5ee3be4394a2f68"
-
 vue-eslint-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz#00f4e4da94ec974b821a26ff0ed0f7a78402b8a1"