From bcfe1de1b2b48992eef0cc3f28458fe1b5c0716d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 14 Aug 2026 18:54:18 +0300
Subject: [PATCH] UI improvements

---
 src/components/avatar_list/avatar_list.vue    |  2 +-
 .../chat_list_item/chat_list_item.vue         |  2 +-
 src/components/chat_message/chat_message.vue  |  2 +-
 src/components/chat_title/chat_title.vue      |  2 +-
 src/components/desktop_nav/desktop_nav.js     | 25 ++++++++++++++++-
 src/components/desktop_nav/desktop_nav.vue    | 19 +++++++++++++
 src/components/mention_link/mention_link.vue  |  2 +-
 src/components/notification/notification.vue  |  2 +-
 src/components/status/status.js               |  3 --
 src/components/status/status.vue              |  9 ++----
 src/components/user_avatar/user_avatar.js     | 23 ++++++++-------
 src/components/user_card/user_card.vue        |  8 +++---
 .../user_list_popover/user_list_popover.vue   |  2 +-
 src/i18n/en.json                              |  3 ++
 src/stores/interface.js                       | 28 +++++++++++++------
 src/stores/statuses.js                        |  2 +-
 16 files changed, 94 insertions(+), 40 deletions(-)

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index 9252ba324..fde4e14c9 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -7,7 +7,7 @@
       class="avatars-item"
     >
       <UserAvatar
-        :user="user"
+        :user-id="user.id"
         class="avatar-small"
       />
     </router-link>
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index 236562df0..8f38f518f 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@@ -5,7 +5,7 @@
   >
     <div class="chat-list-item-left">
       <UserAvatar
-        :user="chat.account"
+        :user-id="chat.account.id"
         height="48px"
         width="48px"
       />
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 88ab2fc0a..a6700201d 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -83,7 +83,7 @@
           <UserAvatar
             v-if="author"
             :compact="true"
-            :user="author"
+            :user-id="author.id"
           />
         </UserPopover>
         <div
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index 905a32d85..cae9064d2 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -10,7 +10,7 @@
     >
       <UserAvatar
         class="titlebar-avatar"
-        :user="user"
+        :user-id="user.id"
       />
     </UserPopover>
     <RichContent
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index 85625105f..8252ddf2b 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -6,6 +6,11 @@ import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useUsersStore } from 'src/stores/users.js'
+import { useStreamingStore } from 'src/stores/streaming.js'
+
+import {
+  WSConnectionStatus,
+} from 'src/api/websocket.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -20,6 +25,8 @@ import {
   faSignOutAlt,
   faTachometerAlt,
   faUserPlus,
+  faPlug,
+  faPlugCircleXmark
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -34,6 +41,8 @@ library.add(
   faTachometerAlt,
   faCog,
   faInfoCircle,
+  faPlug,
+  faPlugCircleXmark
 )
 
 export default {
@@ -93,9 +102,23 @@ export default {
       hideSitename: (store) => store.instanceIdentity.hideSitename,
     }),
     ...mapState(useUsersStore, ['currentUser']),
+    ...mapState(useStreamingStore, {
+      streamingConnected: (store) => store.state === WSConnectionStatus.JOINED
+    }),
+    ...mapState(useMergedConfigStore, ['mergedConfig']),
     shouldConfirmLogout() {
-      return useMergedConfigStore().mergedConfig.modalOnLogout
+      return this.mergedConfig.modalOnLogout
     },
+    streamingEnabled() {
+      return this.mergedConfig.useStreamingApi
+    },
+    streamingTooltip() {
+      if (this.streamingConnected) {
+        return this.$t('timeline.socket_reconnected')
+      } else {
+        return this.$t('timeline.socket_disconnected')
+      }
+    }
   },
   methods: {
     scrollToTop() {
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 3883b3c6f..9a93b395c 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -15,6 +15,25 @@
         >
           {{ sitename }}
         </router-link>
+        <div
+          class="nav-icon"
+          v-if="streamingEnabled"
+          :title="streamingTooltip"
+        >
+          <FAIcon
+            v-if="streamingConnected"
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="plug"
+          />
+
+          <FAIcon
+            v-else
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="plug-circle-xmark"
+          />
+        </div>
       </div>
       <router-link
         class="logo"
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 0452cad58..33f0d9db7 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -31,7 +31,7 @@
           <UserAvatar
             v-if="shouldShowAvatar"
             class="mention-avatar"
-            :user="user"
+            :user-id="user.id"
           /><span
             class="shortName"
           >@<span
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 8e5c2d25b..3fc486127 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -57,7 +57,7 @@
           <UserAvatar
             class="post-avatar"
             :compact="true"
-            :user="notification.from_profile"
+            :user-id="notification.from_profile.id"
           />
         </UserPopover>
       </a>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 1f942827b..28c7e040f 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -223,9 +223,6 @@ const Status = {
     botStatus() {
       return this.status.user.actor_type === 'Service'
     },
-    showActorTypeIndicator() {
-      return !this.hideBotIndication
-    },
     sensitiveStatus() {
       return this.status.nsfw
     },
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index c1d340975..20c40d0d3 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -55,8 +55,7 @@
         <UserAvatar
           v-if="retweet"
           class="left-side repeater-avatar"
-          :show-actor-type-indicator="showActorTypeIndicator"
-          :user="statusoid.user"
+          :user-id="statusoid.user.id"
         />
         <div class="right-side faint">
           <bdi
@@ -114,15 +113,14 @@
             >
               <UserAvatar
                 class="post-avatar"
-                :show-actor-type-indicator="showActorTypeIndicator"
                 :compact="compact"
-                :user="status?.user"
+                :user-id="status?.user.id"
               />
             </UserPopover>
           </a>
           <UserAvatar
             v-else
-            :user="status?.user"
+            :user-id="status?.user.id"
             class="post-avatar"
             :compact="compact"
             :title="$t('status.unknown_user_info')"
@@ -529,7 +527,6 @@
           <UserAvatar
             class="post-avatar"
             :compact="compact"
-            :show-actor-type-indicator="showActorTypeIndicator"
           />
         </div>
         <div class="right-side">
diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index 3ab0ee9e7..585cf52ee 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/src/components/user_avatar/user_avatar.js
@@ -1,5 +1,7 @@
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useUsersStore } from 'src/stores/users.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faPeopleGroup, faRobot } from '@fortawesome/free-solid-svg-icons'
@@ -8,10 +10,10 @@ library.add(faRobot, faPeopleGroup)
 
 const UserAvatar = {
   props: {
-    // User object to show avatar of
-    user: {
+    // UserID of a user to show avatar of
+    userId: {
       required: true,
-      type: Object,
+      type: String,
     },
     // Use less space and use alternative roundness
     compact: {
@@ -19,12 +21,6 @@ const UserAvatar = {
       type: Boolean,
       default: false,
     },
-    // Show small icon indicating if account is a bot or group
-    showActorTypeIndicator: {
-      required: false,
-      type: Boolean,
-      default: false,
-    },
     // Override avatar image URL, useful for profile editing
     url: {
       required: false,
@@ -39,7 +35,14 @@ const UserAvatar = {
       betterShadow: useInterfaceStore().browserSupport.cssFilter,
     }
   },
-  components: {},
+  computed: {
+    user() {
+      return useUsersStore().findUser(this.userId)
+    },
+    showActorTypeIndicator() {
+      return useMergedConfigStore().mergedConfig.hideBotIndication
+    },
+  },
   methods: {
     imgSrc(src) {
       return !src || this.showPlaceholder ? this.defaultAvatar : src
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index e6c6485f7..525a22833 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -23,7 +23,7 @@
             class="user-info-avatar -link"
             @click="zoomAvatar"
           >
-            <UserAvatar :user="user" />
+            <UserAvatar :user-id="user.id" />
             <div class="user-info-avatar -link -overlay">
               <FAIcon
                 class="fa-scale-110 fa-old-padding"
@@ -38,7 +38,7 @@
             @click="changeAvatar"
           >
             <UserAvatar
-              :user="user"
+              :user-id="user.id"
               :url="avatarImgSrc"
             />
             <div class="user-info-avatar -link -overlay">
@@ -51,7 +51,7 @@
           <UserAvatar
             v-else-if="typeof avatarAction === 'function'"
             class="user-info-avatar"
-            :user="user"
+            :user-id="user.id"
             @click="avatarAction"
           />
           <router-link
@@ -59,7 +59,7 @@
             class="user-info-avatar"
             :to="userProfileLink(user)"
           >
-            <UserAvatar :user="user" />
+            <UserAvatar :user-id="user.id" />
           </router-link>
           <div class="user-summary">
             <div class="top-line">
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index ddeb6f6f6..8f774a9b1 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -17,7 +17,7 @@
             class="user-list-row"
           >
             <UserAvatar
-              :user="user"
+              :user-id="user.id"
               class="avatar-small"
               :compact="true"
             />
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 4b257be9f..8c7379742 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1633,6 +1633,8 @@
     "no_more_statuses": "No more statuses",
     "no_statuses": "No statuses",
     "socket_reconnected": "Realtime connection established",
+    "socket_disconnected": "Realtime connection unavaialable",
+    "socket_closed": "Realtime connection closed",
     "socket_broke": "Realtime connection lost: CloseEvent code {0}",
     "quick_view_settings": "Quick view settings",
     "quick_filter_settings": "Quick filter settings",
@@ -1730,6 +1732,7 @@
     "more_actions": "More actions on this status",
     "loading": "Loading...",
     "load_error": "Unable to load status: {error}",
+    "interact_error": "Error interacting with status: {error}",
     "admin_change_scope": "Change visibility",
     "mark_as_sensitive": "Sensitive",
     "mark_as_non-sensitive": "Non-sensitive"
diff --git a/src/stores/interface.js b/src/stores/interface.js
index 19aa37221..fd74e579f 100644
--- a/src/stores/interface.js
+++ b/src/stores/interface.js
@@ -95,14 +95,26 @@ export const useInterfaceStore = defineStore('interface', {
       }
     },
     onStreamDisconnect(closeEvent) {
-      // TODO better explanation/localization
-      const { code } = closeEvent
-      this.pushGlobalNotice({
-        level: 'error',
-        messageKey: 'timeline.socket_broke',
-        messageArgs: [code],
-        timeout: 5000,
-      })
+      const intendedCodes = new Set([
+        1000, // Normal (intended) closure
+        1001, // Going away
+      ])
+      const { code } = closeEvent.original
+      if (intendedCodes.has(code)) {
+        this.pushGlobalNotice({
+          level: 'success',
+          messageKey: 'timeline.socket_closed',
+          messageArgs: [code],
+          timeout: 5000,
+        })
+      } else {
+        this.pushGlobalNotice({
+          level: 'error',
+          messageKey: 'timeline.socket_broke',
+          messageArgs: [code],
+          timeout: 5000,
+        })
+      }
     },
     setTemporaryChanges({ confirm, revert }) {
       this.temporaryChangesCountdown = 10
diff --git a/src/stores/statuses.js b/src/stores/statuses.js
index 0e05e053a..fa1198a93 100644
--- a/src/stores/statuses.js
+++ b/src/stores/statuses.js
@@ -338,7 +338,7 @@ export const useStatusesStore = defineStore('statuses', {
 
           useInterfaceStore().pushGlobalNotice({
             level: 'error',
-            messageKey: 'status.react_error',
+            messageKey: 'status.interact_error',
             messageArgs: [error],
             timeout: 5000,
           })