From 76547fe66d1771f5bff732a34b0547f890f4621a Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 10 Jan 2022 00:37:39 -0500
Subject: Add a pref for whether to display mention as icon or text

---
 src/components/settings_modal/tabs/general_tab.vue | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index bd3ee84e..5fec2d89 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/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>
 
-- 
cgit v1.2.3-70-g09d2


From 1d4b1b296e8ee37f119f419df49791d99fef4774 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 10 Jan 2022 01:16:33 -0500
Subject: Add pref for whether to display full user names and tooltips

---
 src/components/mention_link/mention_link.js        | 20 ++++++++++++++++++++
 src/components/mention_link/mention_link.vue       | 16 +++++++++++-----
 src/components/settings_modal/tabs/general_tab.js  |  5 +++++
 src/components/settings_modal/tabs/general_tab.vue | 19 +++++++++++++++++++
 src/modules/config.js                              |  5 ++++-
 src/modules/instance.js                            |  5 +++++
 6 files changed, 64 insertions(+), 6 deletions(-)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 637641af..f71c7716 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -50,6 +50,10 @@ const MentionLink = {
     userName () {
       return this.user && this.userNameFullUi.split('@')[0]
     },
+    serverName () {
+      // XXX assumed that domain does not contain @
+      return this.user && (this.userNameFullUi.split('@')[1] || this.$store.getters.instanceDomain)
+    },
     userNameFull () {
       return this.user && this.user.screen_name
     },
@@ -88,6 +92,22 @@ const MentionLink = {
     useAtIcon () {
       return this.mergedConfig.useAtIcon
     },
+    isRemote () {
+      return this.userName !== this.userNameFull
+    },
+    shouldShowFullUserName () {
+      const conf = this.mergedConfig.mentionLinkDisplay
+      if (conf === 'short') {
+        return false
+      } else if (conf === 'full') {
+        return true
+      } else { // full_for_remote
+        return this.isRemote
+      }
+    },
+    shouldShowTooltip () {
+      return this.mergedConfig.mentionLinkShowTooltip && this.mergedConfig.mentionLinkDisplay === 'short' && this.isRemote
+    },
     ...mapGetters(['mergedConfig']),
     ...mapState({
       currentUser: state => state.users.currentUser
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index f633bf50..fe16cbf5 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -28,10 +28,16 @@
           size="sm"
           icon="at"
           class="at"
-        /><span class="shortName">{{ !useAtIcon ? '@' : '' }}<span
-            class="userName"
-            v-html="userName"
-          /></span>
+        /><span
+          class="shortName"
+        >{{ !useAtIcon ? '@' : '' }}<span
+          class="userName"
+          v-html="userName"
+        /><span
+          v-if="shouldShowFullUserName"
+          class="serverName"
+          v-html="'@' + serverName"
+        /></span>
         <span
           v-if="isYou"
           class="you"
@@ -39,7 +45,7 @@
         <!-- eslint-enable vue/no-v-html -->
       </a>
       <span
-        v-if="userName !== userNameFull"
+        v-if="shouldShowTooltip"
         class="full popover-default"
         :class="[highlightType]"
       >
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index eeda61bf..952c328d 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -20,6 +20,11 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
       })),
+      mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.mention_link_display_${mode}`)
+      })),
       loopSilentAvailable:
       // Firefox
       Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 5fec2d89..8fce1eee 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -152,6 +152,25 @@
             {{ $t('settings.use_at_icon') }}
           </BooleanSetting>
         </li>
+        <li>
+          <ChoiceSetting
+            id="mentionLinkDisplay"
+            path="mentionLinkDisplay"
+            :options="mentionLinkDisplayOptions"
+          >
+            {{ $t('settings.mention_link_display') }}
+          </ChoiceSetting>
+        </li>
+        <ul
+          v-if="mentionLinkDisplay === 'short'"
+          class="setting-list suboptions"
+        >
+          <li>
+            <BooleanSetting path="mentionLinkShowTooltip">
+              {{ $t('settings.mention_link_show_tooltip') }}
+            </BooleanSetting>
+          </li>
+        </ul>
       </ul>
     </div>
 
diff --git a/src/modules/config.js b/src/modules/config.js
index 43c8b92f..e1a49a7d 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -11,7 +11,8 @@ const browserLocale = (window.navigator.language || 'en').split('-')[0]
  */
 export const multiChoiceProperties = [
   'postContentType',
-  'subjectLineBehavior'
+  'subjectLineBehavior',
+  'mentionLinkDisplay' // short | full_for_remote | full
 ]
 
 export const defaultState = {
@@ -71,6 +72,8 @@ export const defaultState = {
   useContainFit: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
+  mentionLinkDisplay: undefined, // instance default
+  mentionLinkShowTooltip: undefined, // instance default
   hidePostStats: undefined, // instance default
   hideUserStats: undefined, // instance default
   virtualScrolling: undefined, // instance default
diff --git a/src/modules/instance.js b/src/modules/instance.js
index aaaf7acf..200a7a6f 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -21,6 +21,8 @@ const defaultState = {
   collapseMessageWithSubject: false,
   greentext: false,
   useAtIcon: false,
+  mentionLinkDisplay: 'short',
+  mentionLinkShowTooltip: true,
   hideFilteredStatuses: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: false,
@@ -101,6 +103,9 @@ const instance = {
       return instanceDefaultProperties
         .map(key => [key, state[key]])
         .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
+    },
+    instanceDomain (state) {
+      return new URL(state.server).hostname
     }
   },
   actions: {
-- 
cgit v1.2.3-70-g09d2


From 9fde13c9685e934c8f610c96d481457b3d37c389 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 10 Jan 2022 02:05:41 -0500
Subject: Add option to display user avatar in mention link

---
 src/components/mention_link/mention_link.js        | 7 +++++++
 src/components/mention_link/mention_link.scss      | 9 +++++++++
 src/components/mention_link/mention_link.vue       | 5 +++++
 src/components/settings_modal/tabs/general_tab.vue | 5 +++++
 src/modules/config.js                              | 1 +
 src/modules/instance.js                            | 1 +
 6 files changed, 28 insertions(+)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index f71c7716..426dbe97 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -1,6 +1,7 @@
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters, mapState } from 'vuex'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
+import UserAvatar from '../user_avatar/user_avatar.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faAt
@@ -12,6 +13,9 @@ library.add(
 
 const MentionLink = {
   name: 'MentionLink',
+  components: {
+    UserAvatar
+  },
   props: {
     url: {
       required: true,
@@ -108,6 +112,9 @@ const MentionLink = {
     shouldShowTooltip () {
       return this.mergedConfig.mentionLinkShowTooltip && this.mergedConfig.mentionLinkDisplay === 'short' && this.isRemote
     },
+    shouldShowAvatar () {
+      return this.mergedConfig.mentionLinkShowAvatar
+    },
     ...mapGetters(['mergedConfig']),
     ...mapState({
       currentUser: state => state.users.currentUser
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 5f467582..be00093a 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -1,3 +1,5 @@
+@import '../../_variables.scss';
+
 .MentionLink {
   position: relative;
   white-space: normal;
@@ -10,6 +12,13 @@
     border-radius: 2px;
   }
 
+  .mention-avatar {
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    width: 1.5em;
+    height: 1.5em;
+    vertical-align: middle;
+  }
+
   .full {
     position: absolute;
     display: inline-block;
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index c9baee10..8e78243a 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -23,6 +23,11 @@
         :href="url"
         @click.prevent="onClick"
       >
+        <UserAvatar
+          v-if="shouldShowAvatar"
+          class="mention-avatar"
+          :user="user"
+        />
         <!-- eslint-disable vue/no-v-html -->
         <span
           class="shortName"
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 8fce1eee..b4495941 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -171,6 +171,11 @@
             </BooleanSetting>
           </li>
         </ul>
+        <li>
+          <BooleanSetting path="mentionLinkShowAvatar">
+            {{ $t('settings.mention_link_show_avatar') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
 
diff --git a/src/modules/config.js b/src/modules/config.js
index e1a49a7d..cfb753ce 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -74,6 +74,7 @@ export const defaultState = {
   useAtIcon: undefined, // instance default
   mentionLinkDisplay: undefined, // instance default
   mentionLinkShowTooltip: undefined, // instance default
+  mentionLinkShowAvatar: undefined, // instance default
   hidePostStats: undefined, // instance default
   hideUserStats: undefined, // instance default
   virtualScrolling: undefined, // instance default
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 200a7a6f..6c8823c3 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -23,6 +23,7 @@ const defaultState = {
   useAtIcon: false,
   mentionLinkDisplay: 'short',
   mentionLinkShowTooltip: true,
+  mentionLinkShowAvatar: true,
   hideFilteredStatuses: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: false,
-- 
cgit v1.2.3-70-g09d2


From 0c60b31eee3e31810ebd41bc186a9825a39cd821 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 10 Jan 2022 02:31:26 -0500
Subject: Add option to fade domains in mention link

---
 src/components/mention_link/mention_link.js        |  3 +++
 src/components/mention_link/mention_link.scss      |  8 ++++++++
 src/components/mention_link/mention_link.vue       | 15 +++++++++++++--
 src/components/settings_modal/tabs/general_tab.vue |  5 +++++
 src/modules/config.js                              |  1 +
 src/modules/instance.js                            |  1 +
 6 files changed, 31 insertions(+), 2 deletions(-)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 426dbe97..5209907d 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -115,6 +115,9 @@ const MentionLink = {
     shouldShowAvatar () {
       return this.mergedConfig.mentionLinkShowAvatar
     },
+    shouldFadeDomain () {
+      return this.mergedConfig.mentionLinkFadeDomain
+    },
     ...mapGetters(['mergedConfig']),
     ...mapState({
       currentUser: state => state.users.currentUser
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 9a285ad8..03306dcc 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -100,4 +100,12 @@
     opacity: 1;
     pointer-events: initial;
   }
+
+  .serverName.-faded {
+    color: var(--faintLink, $fallback--link);
+  }
+
+  .full .-faded {
+    color: var(--faint, $fallback--faint);
+  }
 }
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index c0d71322..ac20eb5a 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -41,6 +41,7 @@
         /><span
           v-if="shouldShowFullUserName"
           class="serverName"
+          :class="{ '-faded': shouldFadeDomain }"
           v-html="'@' + serverName"
         /></span>
         <span
@@ -56,8 +57,18 @@
       >
         <span
           class="userNameFull"
-          v-text="'@' + userNameFull"
-        />
+        >
+          <!-- eslint-disable vue/no-v-html -->
+          @<span
+            class="userName"
+            v-html="userName"
+          /><span
+            class="serverName"
+            :class="{ '-faded': shouldFadeDomain }"
+            v-html="'@' + serverName"
+          />
+          <!-- eslint-enable vue/no-v-html -->
+        </span>
       </span>
     </span>
   </span>
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index b4495941..50599eae 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -176,6 +176,11 @@
             {{ $t('settings.mention_link_show_avatar') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="mentionLinkFadeDomain">
+            {{ $t('settings.mention_link_fade_domain') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
 
diff --git a/src/modules/config.js b/src/modules/config.js
index cfb753ce..9f2d4ef3 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -75,6 +75,7 @@ export const defaultState = {
   mentionLinkDisplay: undefined, // instance default
   mentionLinkShowTooltip: undefined, // instance default
   mentionLinkShowAvatar: undefined, // instance default
+  mentionLinkFadeDomain: undefined, // instance default
   hidePostStats: undefined, // instance default
   hideUserStats: undefined, // instance default
   virtualScrolling: undefined, // instance default
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 6c8823c3..2859b00b 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -24,6 +24,7 @@ const defaultState = {
   mentionLinkDisplay: 'short',
   mentionLinkShowTooltip: true,
   mentionLinkShowAvatar: true,
+  mentionLinkFadeDomain: true,
   hideFilteredStatuses: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: false,
-- 
cgit v1.2.3-70-g09d2


From c8983d56063bcb6970c7ba459288049d5d4d2d81 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 10 Jan 2022 02:53:27 -0500
Subject: Make mention link prefs ui more intuitive

---
 src/components/settings_modal/tabs/general_tab.vue | 35 +++++++++++-----------
 1 file changed, 18 insertions(+), 17 deletions(-)

(limited to 'src/components/settings_modal/tabs/general_tab.vue')

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 50599eae..44b1ac92 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -147,11 +147,6 @@
             {{ $t('settings.greentext') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting path="useAtIcon">
-            {{ $t('settings.use_at_icon') }}
-          </BooleanSetting>
-        </li>
         <li>
           <ChoiceSetting
             id="mentionLinkDisplay"
@@ -162,25 +157,31 @@
           </ChoiceSetting>
         </li>
         <ul
-          v-if="mentionLinkDisplay === 'short'"
           class="setting-list suboptions"
         >
-          <li>
+          <li
+            v-if="mentionLinkDisplay === 'short'"
+          >
             <BooleanSetting path="mentionLinkShowTooltip">
               {{ $t('settings.mention_link_show_tooltip') }}
             </BooleanSetting>
           </li>
+          <li>
+            <BooleanSetting path="useAtIcon">
+              {{ $t('settings.use_at_icon') }}
+            </BooleanSetting>
+          </li>
+          <li>
+            <BooleanSetting path="mentionLinkShowAvatar">
+              {{ $t('settings.mention_link_show_avatar') }}
+            </BooleanSetting>
+          </li>
+          <li>
+            <BooleanSetting path="mentionLinkFadeDomain">
+              {{ $t('settings.mention_link_fade_domain') }}
+            </BooleanSetting>
+          </li>
         </ul>
-        <li>
-          <BooleanSetting path="mentionLinkShowAvatar">
-            {{ $t('settings.mention_link_show_avatar') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="mentionLinkFadeDomain">
-            {{ $t('settings.mention_link_fade_domain') }}
-          </BooleanSetting>
-        </li>
       </ul>
     </div>
 
-- 
cgit v1.2.3-70-g09d2

