Move chat to sidebar.

package.json

@@ -25,6 +25,7 @@
     "sanitize-html": "^1.13.0",
     "sass-loader": "^4.0.2",
     "vue": "^2.3.4",
+    "vue-chat-scroll": "^1.2.1",
     "vue-i18n": "^7.3.2",
     "vue-router": "^2.5.3",
     "vue-template-compiler": "^2.3.4",

src/App.js

@@ -2,6 +2,7 @@ import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
 import Notifications from './components/notifications/notifications.vue'
 import UserFinder from './components/user_finder/user_finder.vue'
+import ChatPanel from './components/chat_panel/chat_panel.vue'
 
 export default {
   name: 'app',
@@ -9,7 +10,8 @@ export default {
     UserPanel,
     NavPanel,
     Notifications,
-    UserFinder
+    UserFinder,
+    ChatPanel
   },
   data: () => ({
     mobileActivePanel: 'timeline'
@@ -21,7 +23,8 @@ export default {
     },
     logoStyle () { return { 'background-image': `url(${this.$store.state.config.logo})` } },
     style () { return { 'background-image': `url(${this.background})` } },
-    sitename () { return this.$store.state.config.name }
+    sitename () { return this.$store.state.config.name },
+    chat () { return this.$store.state.chat.channel }
   },
   methods: {
     activatePanel (panelName) {

src/App.vue

@@ -23,6 +23,7 @@
             <div class="sidebar">
               <user-panel></user-panel>
               <nav-panel></nav-panel>
+              <chat-panel v-if="currentUser && chat"></chat-panel>
               <notifications v-if="currentUser"></notifications>
             </div>
           </div>

src/components/chat_panel/chat_panel.js

@@ -1,4 +1,4 @@
-const chat = {
+const chatPanel = {
   data () {
     return {
       currentMessage: '',
@@ -18,4 +18,4 @@ const chat = {
   }
 }
 
-export default chat
+export default chatPanel

src/components/chat_panel/chat_panel.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="chat-panel panel panel-default">
-    <div class="panel-heading timeline-heading base02-background base04">
-      <div class="title">
-        {{$t('chat.title')}}
+  <div class="chat-panel">
+    <div class="panel panel-default base01-background">
+      <div class="panel-heading timeline-heading base02-background base04">
+        <div class="title">
+          {{$t('chat.title')}}
+        </div>
       </div>
-    </div>
-    <div class="panel-body base01-background">
-      <div class="chat-window">
+      <div class="chat-window" v-chat-scroll>
         <div class="chat-message" v-for="message in messages" :key="message.id">
           <span class="chat-avatar">
             <img :src="message.author.avatar" />
@@ -26,12 +26,11 @@
   </div>
 </template>
 
-<script src="./chat.js"></script>
-
+<script src="./chat_panel.js"></script>
 
 <style lang="scss">
  .chat-window {
-   max-height: 80vh;
+   max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
  }

src/components/nav_panel/nav_panel.vue

@@ -7,11 +7,6 @@
             {{ $t("nav.timeline") }}
           </router-link>
         </li>
-        <li v-if='chat && currentUser'>
-          <router-link class="base00-background" to='/chat'>
-            {{ $t("nav.chat") }}
-          </router-link>
-        </li>
         <li v-if='currentUser'>
           <router-link class="base00-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
             {{ $t("nav.mentions") }}

src/main.js

@@ -12,7 +12,6 @@ import UserProfile from './components/user_profile/user_profile.vue'
 import Settings from './components/settings/settings.vue'
 import Registration from './components/registration/registration.vue'
 import UserSettings from './components/user_settings/user_settings.vue'
-import Chat from './components/chat/chat.vue'
 
 import statusesModule from './modules/statuses.js'
 import usersModule from './modules/users.js'
@@ -27,6 +26,8 @@ import createPersistedState from './lib/persisted_state.js'
 
 import messages from './i18n/messages.js'
 
+import VueChatScroll from 'vue-chat-scroll'
+
 const currentLocale = (window.navigator.language || 'en').split('-')[0]
 
 Vue.use(Vuex)
@@ -39,6 +40,7 @@ Vue.use(VueTimeago, {
   }
 })
 Vue.use(VueI18n)
+Vue.use(VueChatScroll)
 
 const persistedStateOptions = {
   paths: [
@@ -97,8 +99,7 @@ window.fetch('/static/config.json')
       { name: 'mentions', path: '/:username/mentions', component: Mentions },
       { name: 'settings', path: '/settings', component: Settings },
       { name: 'registration', path: '/registration', component: Registration },
-      { name: 'user-settings', path: '/user-settings', component: UserSettings },
-      { name: 'chat', path: '/chat', component: Chat }
+      { name: 'user-settings', path: '/user-settings', component: UserSettings }
     ]
 
     const router = new VueRouter({

yarn.lock

@@ -5696,6 +5696,12 @@ 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.2.1"
+  resolved "https://registry.yarnpkg.com/vue-chat-scroll/-/vue-chat-scroll-1.2.1.tgz#54f123004b887d91f2f7fb69b9bebdf6f61ea9b4"
+  dependencies:
+    vue "^2.1.10"
+
 vue-hot-reload-api@^2.0.1:
   version "2.0.9"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.0.9.tgz#2e8cfbfc8e531eea57d8c1f0bd761047c7e11b56"
@@ -5747,7 +5753,7 @@ vue-timeago@^3.1.2:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/vue-timeago/-/vue-timeago-3.2.0.tgz#73fd0635de6ea4ecfbbce035b2e44035d806fba1"
 
-vue@^2.3.4:
+vue@^2.1.10, vue@^2.3.4:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.3.4.tgz#5ec3b87a191da8090bbef56b7cfabd4158038171"