Fix broken conversation

changelog.d/broken.fix

@@ -0,0 +1,2 @@
+Fix display of the broken/deleted/banned users
+

src/components/status/status.js

@@ -452,7 +452,7 @@ const Status = {
     },
     scrobblePresent () {
       if (this.mergedConfig.hideScrobbles) return false
-      if (!this.status.user.latestScrobble) return false
+      if (!this.status.user?.latestScrobble) return false
       const value = this.mergedConfig.hideScrobblesAfter.match(/\d+/gs)[0]
       const unit = this.mergedConfig.hideScrobblesAfter.match(/\D+/gs)[0]
       let multiplier = 60 * 1000 // minutes is smallest unit
@@ -474,7 +474,7 @@ const Status = {
       return this.status.user.latestScrobble.artist
     },
     scrobble () {
-      return this.status.user.latestScrobble
+      return this.status.user?.latestScrobble
     }
   },
   methods: {

src/components/status/status.scss

@@ -108,6 +108,10 @@
     overflow: hidden;
     text-overflow: ellipsis;
     flex: 1 1 0;
+
+    &.unknown {
+      min-width: 8em;
+    }
   }
 
   .heading-left {

src/components/status/status.vue

@@ -109,6 +109,7 @@
           class="left-side"
         >
           <a
+            v-if="status.user?.name"
             :href="$router.resolve(userProfileLink).href"
             @click.prevent
           >
@@ -120,10 +121,17 @@
                 class="post-avatar"
                 :show-actor-type-indicator="showActorTypeIndicator"
                 :compact="compact"
-                :user="status.user"
+                :user="status?.user"
               />
             </UserPopover>
           </a>
+          <UserAvatar
+            v-else
+            :user="status?.user"
+            class="post-avatar"
+            :compact="compact"
+            :title="$t('status.unknown_user_info')"
+          />
         </div>
         <div class="right-side">
           <div
@@ -133,29 +141,31 @@
             <div class="heading-name-row">
               <div class="heading-left">
                 <h4
-                  v-if="status.user.name_html"
                   class="status-username"
-                  :title="status.user.name"
+                  :title="status.user?.name ?? $t('status.unknown_user_info')"
+                >
+                  <user-link
+                    v-if="status.user?.name"
+                    class="account-name"
+                    :title="status.user?.screen_name_ui"
+                    :user="status?.user"
+                    :at="false"
                   >
                     <RichContent
+                      v-if="status.user.name_html"
                       :html="status.user.name"
                       :emoji="status.user.emoji"
                       :is-local="status.user.is_local"
                     />
-                </h4>
-                <h4
+                    <span v-else>{{ status.user.name }}</span>
+                  </user-link>
+                  <span
                     v-else
-                  class="status-username"
-                  :title="status.user.name"
+                    class="account-name unknown"
                   >
-                  {{ status.user.name }}
+                    {{ $t('status.unknown_user') }}
+                  </span>
                 </h4>
-                <user-link
-                  class="account-name"
-                  :title="status.user.screen_name_ui"
-                  :user="status.user"
-                  :at="false"
-                />
                 <img
                   v-if="!!(status.user && status.user.favicon)"
                   class="status-favicon"

src/i18n/en.json

@@ -1346,6 +1346,8 @@
     "show_content": "Show content",
     "hide_content": "Hide content",
     "status_deleted": "This post was deleted",
+    "unknown_user": "unknown user",
+    "unknown_user_info": "Unable to fetch information about this user",
     "nsfw": "NSFW",
     "expand": "Expand",
     "you": "(You)",

src/modules/statuses.js

@@ -111,7 +111,10 @@ const sortTimeline = (timeline) => {
 
 const getLatestScrobble = (state, user) => {
   const scrobblesSupport = state.pleromaScrobblesAvailable
-  if (!scrobblesSupport) return
+
+  if (!scrobblesSupport || !user.name || user.id === 'undefined') {
+    return
+  }
 
   if (state.scrobblesNextFetch[user.id] && state.scrobblesNextFetch[user.id] > Date.now()) {
     return

src/services/status_parser/status_parser.js

@@ -2,7 +2,7 @@ export const muteFilterHits = (muteFilters, status) => {
   const statusText = status.text.toLowerCase()
   const statusSummary = status.summary.toLowerCase()
   const replyToUser = status.in_reply_to_screen_name?.toLowerCase()
-  const poster = status.user.screen_name.toLowerCase()
+  const poster = status.user.screen_name?.toLowerCase()
   const mentions = (status.attentions || []).map(att => att.screen_name.toLowerCase())
 
 

src/services/user_highlighter/user_highlighter.js

@@ -46,7 +46,7 @@ const highlightStyle = (prefs) => {
 
 const highlightClass = (user) => {
   return 'USER____' + user.screen_name
-    .replace(/\./g, '_')
+    ?.replace(/\./g, '_')
     .replace(/@/g, '_AT_')
 }