Add a pref for whether to display mention as icon or text

src/components/mention_link/mention_link.js

@@ -85,6 +85,9 @@ const MentionLink = {
         this.highlightType
       ]
     },
+    useAtIcon () {
+      return this.mergedConfig.useAtIcon
+    },
     ...mapGetters(['mergedConfig']),
     ...mapState({
       currentUser: state => state.users.currentUser

src/components/mention_link/mention_link.vue

@@ -24,13 +24,14 @@
       >
         <!-- eslint-disable vue/no-v-html -->
         <FAIcon
+          v-if="useAtIcon"
           size="sm"
           icon="at"
           class="at"
-        /><span class="shortName"><span
+        /><span class="shortName">{{ !useAtIcon ? '@' : '' }}<span
-          class="userName"
+            class="userName"
-          v-html="userName"
+            v-html="userName"
-        /></span>
+          /></span>
         <span
           v-if="isYou"
           class="you"

src/components/settings_modal/tabs/general_tab.vue

@@ -147,6 +147,11 @@
             {{ $t('settings.greentext') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="useAtIcon">
+            {{ $t('settings.use_at_icon') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
 

src/modules/config.js

@@ -70,6 +70,7 @@ export const defaultState = {
   useOneClickNsfw: false,
   useContainFit: false,
   greentext: undefined, // instance default
+  useAtIcon: undefined, // instance default
   hidePostStats: undefined, // instance default
   hideUserStats: undefined, // instance default
   virtualScrolling: undefined, // instance default

src/modules/instance.js

@@ -20,6 +20,7 @@ const defaultState = {
   background: '/static/aurora_borealis.jpg',
   collapseMessageWithSubject: false,
   greentext: false,
+  useAtIcon: false,
   hideFilteredStatuses: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: false,