Merge branch 'chat-refactor' into shigusegubu-themes3

src/components/chat_message/chat_message.js

@@ -64,25 +64,27 @@ const ChatMessage = {
     Timeago,
   },
   computed: {
+    isMessage() {
+      return this.chatItem.type === 'message'
+    },
+    message() {
+      if (!this.isMessage) return null
+      return this.chatItem.data.retweeted_status ?? this.chatItem.data
+    },
     isStatus() {
       // ChatMessage only has account_id while Status has full user data
       return !!this.message.user
     },
     author() {
-      const accountId = this.message.account_id || this.message.user.id
+      const accountId = this.isStatus ? this.message.user.id : this.message.account_id
 
       return this.$store.getters.findUser(accountId)
     },
     isCurrentUser() {
       return this.author.id === this.currentUser.id
     },
-    message() {
+
-      if (!this.isMessage) return null
+    // Reply stuff
-      return this.chatItem.data.retweeted_status ?? this.chatItem.data
-    },
-    isMessage() {
-      return this.chatItem.type === 'message'
-    },
     isCustomReply() {
       if (!this.previousItem) return false
       if (!this.message.in_reply_to_status_id) return false
@@ -116,6 +118,8 @@ const ChatMessage = {
         return user ? user.statusnet_profile_url : 'NOT_FOUND'
       }
     },
+
+    // Quote stuff
     quoteId() {
       return this.message.quote_id
     },
@@ -125,6 +129,8 @@ const ChatMessage = {
     quoteVisible() {
       return this.message.quote_visible
     },
+
+    // Content
     messageForStatusContent() {
       return {
         ...this.message,
@@ -137,6 +143,8 @@ const ChatMessage = {
     hasAttachment() {
       return this.message.attachments.length > 0
     },
+
+    // Stylistic
     classnames() {
       return {
         '-outgoing': this.isCurrentUser,
@@ -145,13 +153,6 @@ const ChatMessage = {
         '-focused': this.focused,
       }
     },
-    ...mapPiniaState(useInterfaceStore, {
-      betterShadow: (store) => store.browserSupport.cssFilter,
-    }),
-    ...mapState({
-      currentUser: (state) => state.users.currentUser,
-      restrictedNicknames: (state) => useInstanceStore().restrictedNicknames,
-    }),
     popoverMarginStyle() {
       if (this.isCurrentUser) {
         return {}
@@ -159,7 +160,16 @@ const ChatMessage = {
         return { left: 50 }
       }
     },
-    ...mapPiniaState(useMergedConfigStore, ['mergedConfig', 'findUser']),
+
+    // Global stuff
+    ...mapPiniaState(useInterfaceStore, {
+      betterShadow: (store) => store.browserSupport.cssFilter,
+    }),
+    ...mapState({
+      currentUser: (state) => state.users.currentUser,
+      restrictedNicknames: (state) => useInstanceStore().restrictedNicknames,
+    }),
+    ...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
   },
   data() {
     return {

src/components/chat_message/chat_message.vue

@@ -145,8 +145,12 @@
                 :full-content="true"
               >
                 <template #footer>
-                  <EmojiReactions :status="message" />
+                  <EmojiReactions
+                    v-if="isStatus"
+                    :status="message"
+                  />
                   <Quote
+                    v-if="isStatus"
                     class="quoted-post"
                     :status-id="quoteId"
                     :status-url="quoteUrl"

src/components/chat_view/chat_view.js

@@ -343,6 +343,8 @@ const Chat = {
           accountId: this.recipientId,
           credentials: useOAuthStore().token,
         })
+        this.$store.commit('addNewUsers', [data.account])
+        data.account = this.$store.getters.findUser(data.account.id)
         this.chat = data
       } catch (e) {
         console.error('Error creating or getting a chat', e)

src/components/conversation/conversation.scss

@@ -93,38 +93,18 @@
     }
   }
 
-  .auto-reply-to-section {
-    margin: 0 1em;
-    gap: 0.5em;
-
-    h4 {
-      margin: 0.5em 0;
-      line-height: 1.1;
-
-      button {
-        line-height: 1.1;
-      }
-    }
-
-    .reply-to-preview {
-      display: flex;
-      align-items: center;
-      gap: 0.5em;
-      border: 1px solid var(--border);
-      border-radius: var(--roundness);
-      padding: 0.5em;
-    }
-  }
-
   .chat-view-reply-form {
     position: sticky;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     bottom: 0;
+    padding: 0;
+  }
 
-    .reply-form form {
+  .reply-to-text {
-      margin-top: 0;
+    line-height: 1.2;
-    }
+    padding-top: 0.5em;
+    margin-bottom: -0.5em;
   }
 }

src/components/conversation/conversation.vue

@@ -219,7 +219,7 @@
       class="chat-view-reply-form panel-footer -flexible-height"
     >
       <div class="auto-reply-to-section">
-        <span class="reply-to-text">
+        <center class="reply-to-text">
           {{ explicitReplyStatus ? $t('status.reply_to_selected') : $t('status.reply_to_last') }}
           <button
             v-if="explicitReplyStatus"
@@ -229,7 +229,7 @@
             <FAIcon icon="times" />
             {{ $t('general.cancel') }}
           </button>
-        </span>
+        </center>
       </div>
       <PostStatusForm
         class="reply-form"
@@ -242,6 +242,8 @@
         :preserve-focus="!mobileLayout"
         :auto-focus="!mobileLayout"
         disable-quotes
+        disable-lock-warning
+        disable-notice
         mentions-line
         mentions-line-read-only
         @posted="onPosted"

src/components/post_status_form/post_status_form.scss

@@ -1,6 +1,20 @@
 .post-status-form {
   position: relative;
 
+  form {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5em;
+    position: relative;
+    gap: 0.25em;
+  }
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.85;
+  }
+
   .attachments {
     margin-bottom: 0.5em;
   }
@@ -16,7 +30,6 @@
   .form-bottom {
     display: flex;
     justify-content: space-between;
-    padding: 0.5em 0.5em 0.25em;
     height: 2.5em;
 
     .post-button-group {
@@ -42,11 +55,11 @@
   .form-bottom-left {
     display: flex;
     gap: 1.5em;
-    margin-right: 1em;
+    margin: 0 0.5em;
 
     button {
-      padding: 0.5em;
+      padding: 0.25em;
-      margin: -0.5em;
+      margin: -0.25em;
     }
   }
 
@@ -190,20 +203,6 @@
     cursor: not-allowed;
   }
 
-  form {
-    display: flex;
-    flex-direction: column;
-    margin: 0.6em;
-    position: relative;
-  }
-
-  .form-group {
-    display: flex;
-    flex-direction: column;
-    padding: 0.25em 0.5em 0.5em;
-    line-height: 1.85;
-  }
-
   .inputs-wrapper {
     padding: 0;
     display: flex;
@@ -212,9 +211,7 @@
 
   .keyboard-enter-hint {
     text-align: right;
-    margin-right: 1em;
     line-height: 1;
-    margin-bottom: 0.5em;
   }
 
   textarea.input.form-post-body {

src/components/post_status_form/post_status_form.vue

@@ -74,7 +74,7 @@
           </a>
         </p>
         <p
-          v-else-if="newStatus.visibility === 'direct'"
+          v-else-if="!hideScopeNotice && newStatus.visibility === 'direct'"
           class="visibility-notice notice-dismissible"
         >
           <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>

src/components/user_panel/user_panel.vue

@@ -39,9 +39,7 @@
   }
 
   .post-status-form {
-    form {
+    margin: 0.5em;
-      margin-top: 0;
-    }
   }
 
   .signed-in {