Squashed commit of the following:

commit d361a4d7dc
Author: Henry Jameson <me@hjkos.com>
Date:   Fri Feb 4 14:20:56 2022 +0200

    fix overflows

commit 571e73a346
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 23:13:28 2022 +0200

    better approach to unescaping

commit 39ecb33883
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:58:12 2022 +0200

    fix amps in links

commit 0f01931309
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:52:41 2022 +0200

    make chat messages behave same as posts for animated gifs

commit a9830ff491
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:50:32 2022 +0200

    support width/height img attributes

commit 9a6363431d
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:41:38 2022 +0200

    lint

commit ea6114f63c
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:36:13 2022 +0200

    better phrasing?

commit bfb3a4364b
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:34:57 2022 +0200

    options to disable (You)s and highlighting of yourself

commit 6d3229b1a1
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:23:28 2022 +0200

    fix poast mentions tripping

commit 06042569f1
Author: Henry Jameson <me@hjkos.com>
Date:   Thu Feb 3 22:10:45 2022 +0200

    fix alignment issues

Signed-off-by: Sam Therapy <sam@samtherapy.net>

src/components/chat_message/chat_message.scss

@@ -1,6 +1,7 @@
 @import '../../_variables.scss';
 
 .chat-message-wrapper {
+
   &.hovered-message-chain {
     .animated.Avatar {
       canvas {
@@ -40,6 +41,12 @@
   .chat-message {
     display: flex;
     padding-bottom: 0.5em;
+
+    .status-body:hover {
+      --_still-image-img-visibility: visible;
+      --_still-image-canvas-visibility: hidden;
+      --_still-image-label-visibility: hidden;
+    }
   }
 
   .avatar-wrapper {

src/components/mention_link/mention_link.js

@@ -87,7 +87,7 @@ const MentionLink = {
     classnames () {
       return [
         {
-          '-you': this.isYou,
+          '-you': this.isYou && this.shouldBoldenYou,
           '-highlighted': this.highlight
         },
         this.highlightType
@@ -115,6 +115,12 @@ const MentionLink = {
     shouldShowAvatar () {
       return this.mergedConfig.mentionLinkShowAvatar
     },
+    shouldShowYous () {
+      return this.mergedConfig.mentionLinkShowYous
+    },
+    shouldBoldenYou () {
+      return this.mergedConfig.mentionLinkBoldenYou
+    },
     shouldFadeDomain () {
       return this.mergedConfig.mentionLinkFadeDomain
     },

src/components/mention_link/mention_link.scss

@@ -3,12 +3,12 @@
 .MentionLink {
   position: relative;
   white-space: normal;
-  display: inline-block;
+  display: inline;
   color: var(--link);
 
   & .new,
   & .original {
-    display: inline-block;
+    display: inline;
     border-radius: 2px;
   }
 
@@ -38,8 +38,8 @@
     user-select: all;
   }
 
-  .short.-with-tooltip,
-  .you {
+  & .short.-with-tooltip,
+  & .you {
     user-select: none;
   }
 
@@ -48,6 +48,10 @@
     white-space: nowrap;
   }
 
+  .shortName {
+    white-space: normal;
+  }
+
   .new {
     &.-you {
       & .shortName,

src/components/mention_link/mention_link.vue

@@ -45,8 +45,8 @@
           v-html="'@' + serverName"
         /></span>
         <span
-          v-if="isYou"
-          class="you"
+          v-if="isYou && shouldShowYous"
+          :class="{ '-you': shouldBoldenYou }"
         >{{ $t('status.you') }}</span>
         <!-- eslint-enable vue/no-v-html -->
       </a>

src/components/mentions_line/mentions_line.scss

@@ -1,11 +1,8 @@
 .MentionsLine {
+  word-break: break-all;
+
   .showMoreLess {
     white-space: normal;
     color: var(--link);
   }
-
-  .fullExtraMentions,
-  .mention-link:not(:last-child) {
-    margin-right: 0.25em;
-  }
 }

src/components/popover/popover.vue

@@ -33,7 +33,7 @@
 @import '../../_variables.scss';
 
 .popover-trigger-button {
-  display: block;
+  display: inline-block;
 }
 
 .popover {

src/components/rich_content/rich_content.jsx

@@ -120,7 +120,8 @@ export default Vue.component('RichContent', {
           // don't include spaces when processing mentions - we'll include them
           // in MentionsLine
           lastSpacing = item
-          return currentMentions !== null ? item.trim() : item
+          // Don't remove last space in a container (fixes poast mentions)
+          return (index !== array.length - 1) && (currentMentions !== null) ? item.trim() : item
         }
 
         currentMentions = null

src/components/settings_modal/tabs/general_tab.vue

@@ -194,6 +194,11 @@
             </ChoiceSetting>
           </li>
         </ul>
+        <li>
+          <BooleanSetting path="mentionLinkShowYous">
+            {{ $t('settings.show_yous') }}
+          </BooleanSetting>
+        </li>
         <li>
           <ChoiceSetting
             id="mentionLinkDisplay"
@@ -228,6 +233,11 @@
               {{ $t('settings.mention_link_fade_domain') }}
             </BooleanSetting>
           </li>
+          <li>
+            <BooleanSetting path="mentionLinkBoldenYou">
+              {{ $t('settings.mention_link_bolden_you') }}
+            </BooleanSetting>
+          </li>
         </ul>
       </ul>
     </div>

src/components/status/status.scss

@@ -3,6 +3,8 @@
 .Status {
   min-width: 0;
   white-space: normal;
+  word-wrap: break-word;
+  word-break: break-word;
 
   &:hover {
     --_still-image-img-visibility: visible;
@@ -155,18 +157,24 @@
     position: relative;
     align-content: baseline;
     font-size: 12px;
-    line-height: 160%;
+    margin-top: 0.2em;
+    line-height: 130%;
     max-width: 100%;
     align-items: stretch;
   }
 
   & .reply-to-popover,
-  & .reply-to-no-popover {
+  & .reply-to-no-popover,
+  & .mentions {
     min-width: 0;
     margin-right: 0.4em;
     flex-shrink: 0;
   }
 
+  .reply-glued-label {
+    margin-right: 0.5em;
+  }
+
   .reply-to-popover {
     .reply-to:hover::before {
       content: '';
@@ -200,7 +208,6 @@
   & .reply-to {
     white-space: nowrap;
     position: relative;
-    padding-right: 0.25em;
   }
 
   & .mentions-text,

src/components/status/status.vue

@@ -252,7 +252,7 @@
             >
               <span
                 v-if="isReply"
-                class="glued-label"
+                class="glued-label reply-glued-label"
               >
                 <StatusPopover
                   v-if="!isPreview"

src/components/status_body/status_body.scss

@@ -9,7 +9,7 @@
   & .text,
   & .summary {
     font-family: var(--postFont, sans-serif);
-    white-space: pre-wrap;
+    white-space: normal;
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;

src/components/still-image/still-image.js

@@ -5,7 +5,9 @@ const StillImage = {
     'mimetype',
     'imageLoadError',
     'imageLoadHandler',
-    'alt'
+    'alt',
+    'height',
+    'width'
   ],
   data () {
     return {
@@ -15,6 +17,13 @@ const StillImage = {
   computed: {
     animated () {
       return this.stopGifs && (this.mimetype === 'image/gif' || this.src.endsWith('.gif'))
+    },
+    style () {
+      const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str
+      return {
+        height: this.height ? appendPx(this.height) : null,
+        width: this.width ? appendPx(this.width) : null
+      }
     }
   },
   methods: {

src/components/still-image/still-image.vue

@@ -2,6 +2,7 @@
   <div
     class="still-image"
     :class="{ animated: animated }"
+    :style="style"
   >
     <canvas
       v-if="animated"

src/i18n/en.json

@@ -503,9 +503,11 @@
     "mention_link_show_tooltip": "Show full user names as tooltip for remote users",
     "mention_link_show_avatar": "Show user avatar beside the link",
     "mention_link_fade_domain": "Fade domains (e.g. @example.org in @foo@example.org)",
+    "mention_link_bolden_you": "Highlight mention of you when you are mentioned",
     "fun": "Fun",
     "greentext": "Meme arrows",
     "fork_changes": "Fork changes",
+    "show_yous": "Show (You)s",
     "notifications": "Notifications",
     "notification_setting_filters": "Filters",
     "notification_setting_block_from_strangers": "Block notifications from users who you do not follow",

src/modules/config.js

@@ -83,6 +83,8 @@ export const defaultState = {
   mentionLinkShowTooltip: undefined, // instance default
   mentionLinkShowAvatar: undefined, // instance default
   mentionLinkFadeDomain: undefined, // instance default
+  mentionLinkShowYous: undefined, // instance default
+  mentionLinkBoldenYou: undefined, // instance default
   hidePostStats: undefined, // instance default
   hideUserStats: undefined, // instance default
   virtualScrolling: undefined, // instance default

src/modules/instance.js

@@ -25,6 +25,8 @@ const defaultState = {
   mentionLinkShowTooltip: true,
   mentionLinkShowAvatar: false,
   mentionLinkFadeDomain: true,
+  mentionLinkShowYous: false,
+  mentionLinkBoldenYou: true,
   hideFilteredStatuses: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: false,

src/services/html_converter/html_tree_converter.service.js

@@ -1,4 +1,5 @@
 import { getTagName } from './utility.service.js'
+import { unescape } from 'lodash'
 
 /**
  * This is a not-so-tiny purpose-built HTML parser/processor. This parses html
@@ -49,7 +50,7 @@ export const convertHtmlToTree = (html = '') => {
 
   const handleOpen = (tag) => {
     const curBuf = getCurrentBuffer()
-    const newLevel = [tag, []]
+    const newLevel = [unescape(tag), []]
     levels.push(newLevel)
     curBuf.push(newLevel)
   }