chatmessage improvements

src/components/chat_message/chat_message.js

@@ -106,6 +106,20 @@ const ChatMessage = {
         messageChainId: this.chatItem.messageChainId,
       })
     },
+    visibilityIcon(visibility) {
+      switch (visibility) {
+        case 'private':
+          return 'lock'
+        case 'unlisted':
+          return 'lock-open'
+        case 'direct':
+          return 'envelope'
+        case 'local':
+          return 'igloo'
+        default:
+          return 'globe'
+      }
+    },
     async deleteMessage() {
       const confirmed = window.confirm(this.$t('chats.delete_confirm'))
       if (confirmed) {

src/components/chat_message/chat_message.scss

@@ -33,7 +33,6 @@
 
   .chat-message {
     display: flex;
-    padding-bottom: 0.5em;
 
     .status-body:hover {
       --_still-image-img-visibility: visible;
@@ -124,10 +123,6 @@
     }
   }
 
-  .-pending {
-    color: red !important;
-  }
-
   .chat-message-inner.with-media {
     width: 100%;
 
@@ -143,8 +138,8 @@
 
 .chat-message-date-separator {
   text-align: center;
-  margin: 1.4em 0;
   font-size: 0.9em;
+  line-height: 2;
   user-select: none;
   color: var(--textFaint);
 }

src/components/chat_message/chat_message.vue

@@ -81,6 +81,17 @@
                 <span
                   class="created-at"
                 >
+                  <span
+                    v-if="message.visibility"
+                    class="visibility-icon"
+                    :title="visibilityLocalized"
+                  >
+                    <FAIcon
+                      fixed-width
+                      class="fa-scale-110"
+                      :icon="visibilityIcon(message.visibility)"
+                    />
+                  </span>
                   <span
                     v-if="message.pending"
                     class="loading-spinner"

src/components/chat_message_list/chat_message_list.scss

@@ -1,7 +1,7 @@
 .ChatMessageList {
-  padding: 0 0.8em;
-  height: 100%;
+  padding: 0.5em;
   display: flex;
+  gap: 0.5em;
   flex-direction: column;
   justify-content: end;
 }