WIP chat avatars

src/boot/routes.js

@@ -58,7 +58,7 @@ export default (store) => {
     { name: 'external-user-profile', path: '/users/:id', component: UserProfile },
     { name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
     { name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
-    { name: 'chat', path: '/chats/:recipient_id', component: Chat, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute },
+    { name: 'chat', path: '/users/:username/chats/:recipient_id', component: Chat, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute },
     { name: 'chats', path: '/users/:username/chats', component: ChatList, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute },
     { name: 'settings', path: '/settings', component: Settings },
     { name: 'registration', path: '/registration', component: Registration },

src/components/chat/chat.js

@@ -282,7 +282,7 @@ const Chat = {
       }
     }, 100),
     goBack () {
-      this.$router.push({ name: 'chats', params: { username: this.screen_name } })
+      this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } })
     },
     fetchChat (isFirstFetch, chatId) {
       this.chatViewItems = chatService.getView(this.currentChatMessageService)

src/components/chat/chat.vue

@@ -71,6 +71,7 @@
               :poster="poster"
               :preserve-focus="true"
               :polls-available="false"
+              :auto-focus="true"
               :placeholder="formPlaceholder"
               max-height="160"
               @resize="handleResize"

src/components/chat_message/chat_message.js

@@ -5,6 +5,7 @@ import Gallery from '../gallery/gallery.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
 import StatusContent from '../status_content/status_content.vue'
 import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const ChatMessage = {
   name: 'ChatMessage',
@@ -32,9 +33,15 @@ const ChatMessage = {
     isCurrentUser () {
       return this.message.account_id === this.currentUser.id
     },
+    author () {
+      return this.findUser(this.message.account_id)
+    },
     message () {
       return this.chatViewItem.data
     },
+    userProfileLink () {
+      return generateProfileLink(this.author.id, this.author.screen_name, this.$store.state.instance.restrictedNicknames)
+    },
     isMessage () {
       return this.chatViewItem.type === 'message'
     },
@@ -48,9 +55,10 @@ const ChatMessage = {
     },
     ...mapState({
       betterShadow: state => state.interface.browserSupport.cssFilter,
-      currentUser: state => state.users.currentUser
+      currentUser: state => state.users.currentUser,
+      restrictedNicknames: state => state.instance.restrictedNicknames
     }),
-    ...mapGetters(['mergedConfig'])
+    ...mapGetters(['mergedConfig', 'findUser'])
   },
   methods: {
     onHover (bool) {

src/components/chat_message/chat_message.scss

@@ -37,7 +37,6 @@
 
     .avatar-wrapper {
       margin-right: 10px;
-      margin-top: auto;
       width: 32px;
     }
 

src/components/chat_message/chat_message.vue

@@ -10,6 +10,21 @@
       class="direct-conversation"
       :class="[{ 'outgoing': isCurrentUser, 'incoming': !isCurrentUser }]"
     >
+      <div
+        v-if="!isCurrentUser"
+        class="avatar-wrapper"
+      >
+        <router-link
+          v-if="chatViewItem.isHead"
+          :to="userProfileLink"
+        >
+          <UserAvatar
+            :compact="true"
+            :better-shadow="betterShadow"
+            :user="author"
+          />
+        </router-link>
+      </div>
       <div class="direct-conversation-inner">
         <div class="media status">
           <StatusContent

src/components/notification/notification.js

@@ -1,3 +1,4 @@
+import { mapState } from 'vuex'
 import Status from '../status/status.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
@@ -90,7 +91,10 @@ const Notification = {
         text: this.notification.chatMessage.content,
         attachments: []
       }
-    }
+    },
+    ...mapState({
+      currentUser: state => state.users.currentUser
+    })
   }
 }
 

src/components/notification/notification.vue

@@ -113,7 +113,7 @@
             class="timeago"
           >
             <router-link
-              :to="{ name: 'chat', params: { recipient_id: notification.chatMessage.account_id } }"
+              :to="{ name: 'chat', params: { recipient_id: notification.chatMessage.account_id, username: currentUser.screen_name } }"
               class="faint-link"
             >
               <Timeago
@@ -174,9 +174,7 @@
           </router-link>
         </div>
         <div v-else-if="notification.type === 'pleroma:chat_mention'">
-          <StatusContent
-            :status="messageForStatusContent"
-            :full-content="true" />
+          <StatusContent :status="messageForStatusContent" />
         </div>
         <template v-else>
           <status

src/components/post_status_form/post_status_form.js

@@ -40,7 +40,8 @@ const PostStatusForm = {
     'placeholder',
     'maxHeight',
     'poster',
-    'preserveFocus'
+    'preserveFocus',
+    'autoFocus'
   ],
   components: {
     MediaUpload,
@@ -54,7 +55,7 @@ const PostStatusForm = {
     const textLength = this.$refs.textarea.value.length
     this.$refs.textarea.setSelectionRange(textLength, textLength)
 
-    if (this.replyTo) {
+    if (this.replyTo || this.autoFocus) {
       this.$refs.textarea.focus()
     }
   },

src/components/status_content/status_content.js

@@ -18,7 +18,7 @@ const StatusContent = {
   ],
   data () {
     return {
-      showingTall: this.inConversation && this.focused,
+      showingTall: this.fullContent || (this.inConversation && this.focused),
       showingLongSubject: false,
       // not as computed because it sets the initial state which will be changed later
       expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject

src/components/status_content/status_content.vue

@@ -71,7 +71,7 @@
         @click.prevent="toggleShowMore"
       >{{ $t("general.show_more") }}</a>
       <a
-        v-if="showingMore"
+        v-if="showingMore && !fullContent"
         href="#"
         class="status-unhider"
         @click.prevent="toggleShowMore"