From a463959a365a5d618a79c96a26f6506e700d6ea3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 1 Oct 2020 01:43:07 +0300
Subject: Initial work on highlighting changed settings. Some refactoring to
 simplify addition of new settings

---
 src/components/settings_modal/tabs/general_tab.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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

diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 0eb37e44..679ef684 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -1,4 +1,4 @@
-import Checkbox from 'src/components/checkbox/checkbox.vue'
+import BooleanSetting from '../helpers/boolean_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -16,7 +16,7 @@ const GeneralTab = {
     }
   },
   components: {
-    Checkbox,
+    BooleanSetting,
     InterfaceLanguageSwitcher
   },
   computed: {
-- 
cgit v1.2.3-70-g09d2


From c6d4c20982261b55b16dda59c3e657eb1feb0041 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Mar 2021 16:11:44 +0200
Subject: Made Select component to make using styled selects easier

---
 src/App.scss                                       | 34 +---------
 src/components/font_control/font_control.js        | 12 ++--
 src/components/font_control/font_control.vue       | 32 ++++------
 .../interface_language_switcher.vue                | 41 +++++-------
 src/components/poll/poll_form.js                   |  6 +-
 src/components/poll/poll_form.vue                  | 51 ++++++---------
 .../post_status_form/post_status_form.js           |  4 +-
 .../post_status_form/post_status_form.vue          | 31 ++++------
 src/components/select/select.vue                   | 67 ++++++++++++++++++++
 .../settings_modal/tabs/filtering_tab.js           | 12 +---
 .../settings_modal/tabs/filtering_tab.vue          | 38 ++++++------
 src/components/settings_modal/tabs/general_tab.js  |  6 +-
 src/components/settings_modal/tabs/general_tab.vue | 72 ++++++++--------------
 .../settings_modal/tabs/theme_tab/theme_tab.js     | 12 +---
 .../settings_modal/tabs/theme_tab/theme_tab.vue    | 70 ++++++++-------------
 src/components/shadow_control/shadow_control.js    |  4 +-
 src/components/shadow_control/shadow_control.vue   | 32 ++++------
 src/components/user_card/user_card.js              |  6 +-
 src/components/user_card/user_card.vue             | 27 +++-----
 19 files changed, 240 insertions(+), 317 deletions(-)
 create mode 100644 src/components/select/select.vue

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

diff --git a/src/App.scss b/src/App.scss
index 90d083bb..77f2ea79 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -187,7 +187,7 @@ a {
   }
 }
 
-input, textarea, .select, .input {
+input, textarea, .input {
 
   &.unstyled {
     border-radius: 0;
@@ -217,11 +217,7 @@ input, textarea, .select, .input {
   hyphens: none;
   padding: 8px .5em;
 
-  &.select {
-    padding: 0;
-  }
-
-  &:disabled, &[disabled=disabled] {
+  &:disabled, &[disabled=disabled], &.disabled {
     cursor: not-allowed;
     opacity: 0.5;
   }
@@ -239,25 +235,6 @@ input, textarea, .select, .input {
     pointer-events: none;
   }
 
-  select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background: transparent;
-    border: none;
-    color: $fallback--text;
-    color: var(--inputText, --text, $fallback--text);
-    margin: 0;
-    padding: 0 2em 0 .2em;
-    font-family: sans-serif;
-    font-family: var(--inputFont, sans-serif);
-    font-size: 14px;
-    width: 100%;
-    z-index: 1;
-    height: 28px;
-    line-height: 16px;
-  }
-
   &[type=range] {
     background: none;
     border: none;
@@ -809,13 +786,6 @@ nav {
   }
 }
 
-.select-multiple {
-  display: flex;
-  .option-list {
-    margin: 0;
-    padding-left: .5em;
-  }
-}
 .setting-list,
 .option-list{
   list-style-type: none;
diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 6274780b..137ef9c0 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -1,14 +1,10 @@
 import { set } from 'vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
+import Select from '../select/select.vue'
 
 export default {
+  components: {
+    Select
+  },
   props: [
     'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
   ],
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index dd117ec0..996ff92c 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -22,30 +22,20 @@
       class="opt-l"
       :for="name + '-o'"
     />
-    <label
-      :for="name + '-font-switcher'"
-      class="select"
+    <Select
+      :id="name + '-font-switcher'"
+      v-model="preset"
       :disabled="!present"
+      class="font-switcher"
     >
-      <select
-        :id="name + '-font-switcher'"
-        v-model="preset"
-        :disabled="!present"
-        class="font-switcher"
+      <option
+        v-for="option in availableOptions"
+        :key="option"
+        :value="option"
       >
-        <option
-          v-for="option in availableOptions"
-          :key="option"
-          :value="option"
-        >
-          {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
-        </option>
-      </select>
-      <FAIcon
-        class="select-down-icon"
-        icon="chevron-down"
-      />
-    </label>
+        {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
+      </option>
+    </Select>
     <input
       v-if="isCustom"
       :id="name"
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index dc3bd408..cf307a24 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -3,27 +3,18 @@
     <label for="interface-language-switcher">
       {{ $t('settings.interfaceLanguage') }}
     </label>
-    <label
-      for="interface-language-switcher"
-      class="select"
+    <Select
+      id="interface-language-switcher"
+      v-model="language"
     >
-      <select
-        id="interface-language-switcher"
-        v-model="language"
+      <option
+        v-for="lang in languages"
+        :key="lang.code"
+        :value="lang.code"
       >
-        <option
-          v-for="lang in languages"
-          :key="lang.code"
-          :value="lang.code"
-        >
-          {{ lang.name }}
-        </option>
-      </select>
-      <FAIcon
-        class="select-down-icon"
-        icon="chevron-down"
-      />
-    </label>
+        {{ lang.name }}
+      </option>
+    </Select>
   </div>
 </template>
 
@@ -32,16 +23,12 @@ import languagesObject from '../../i18n/messages'
 import localeService from '../../services/locale/locale.service.js'
 import ISO6391 from 'iso-639-1'
 import _ from 'lodash'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
+import Select from '../select/select.vue'
 
 export default {
+  components: {
+    Select
+  },
   computed: {
     languages () {
       return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index 1f8df3f9..e30645c3 100644
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@@ -1,19 +1,21 @@
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
 import { uniq } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import Select from '../select/select.vue'
 import {
   faTimes,
-  faChevronDown,
   faPlus
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faTimes,
-  faChevronDown,
   faPlus
 )
 
 export default {
+  components: {
+    Select
+  },
   name: 'PollForm',
   props: ['visible'],
   data: () => ({
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index c4403210..f10d1550 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -46,23 +46,13 @@
         class="poll-type"
         :title="$t('polls.type')"
       >
-        <label
-          for="poll-type-selector"
-          class="select"
+        <Select
+          v-model="pollType"
+          @change="updatePollToParent"
         >
-          <select
-            v-model="pollType"
-            class="select"
-            @change="updatePollToParent"
-          >
-            <option value="single">{{ $t('polls.single_choice') }}</option>
-            <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
-          </select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
+          <option value="single">{{ $t('polls.single_choice') }}</option>
+          <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
+        </Select>
       </div>
       <div
         class="poll-expiry"
@@ -76,24 +66,19 @@
           :max="maxExpirationInCurrentUnit"
           @change="expiryAmountChange"
         >
-        <label class="expiry-unit select">
-          <select
-            v-model="expiryUnit"
-            @change="expiryAmountChange"
+        <Select
+          v-model="expiryUnit"
+          class="expiry-unit"
+          @change="expiryAmountChange"
+        >
+          <option
+            v-for="unit in expiryUnits"
+            :key="unit"
+            :value="unit"
           >
-            <option
-              v-for="unit in expiryUnits"
-              :key="unit"
-              :value="unit"
-            >
-              {{ $t(`time.${unit}_short`, ['']) }}
-            </option>
-          </select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
+            {{ $t(`time.${unit}_short`, ['']) }}
+          </option>
+        </Select>
       </div>
     </div>
   </div>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index e540654b..5342894f 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -11,10 +11,10 @@ import { reject, map, uniqBy, debounce } from 'lodash'
 import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters, mapState } from 'vuex'
 import Checkbox from '../checkbox/checkbox.vue'
+import Select from '../select/select.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faChevronDown,
   faSmileBeam,
   faPollH,
   faUpload,
@@ -24,7 +24,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faChevronDown,
   faSmileBeam,
   faPollH,
   faUpload,
@@ -84,6 +83,7 @@ const PostStatusForm = {
     PollForm,
     ScopeSelector,
     Checkbox,
+    Select,
     Attachment,
     StatusContent
   },
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 73f6a4f1..cc4f6251 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -189,28 +189,19 @@
             v-if="postFormats.length > 1"
             class="text-format"
           >
-            <label
-              for="post-content-type"
-              class="select"
+            <Select
+              id="post-content-type"
+              v-model="newStatus.contentType"
+              class="form-control"
             >
-              <select
-                id="post-content-type"
-                v-model="newStatus.contentType"
-                class="form-control"
+              <option
+                v-for="postFormat in postFormats"
+                :key="postFormat"
+                :value="postFormat"
               >
-                <option
-                  v-for="postFormat in postFormats"
-                  :key="postFormat"
-                  :value="postFormat"
-                >
-                  {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                </option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
+                {{ $t(`post_status.content_type["${postFormat}"]`) }}
+              </option>
+            </Select>
           </div>
           <div
             v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
new file mode 100644
index 00000000..a27a2541
--- /dev/null
+++ b/src/components/select/select.vue
@@ -0,0 +1,67 @@
+
+<template>
+  <label
+    class="Select input"
+    :class="{ disabled }"
+  >
+    <select
+      :disabled="disabled"
+      :value="value"
+      @change="$emit('change', $event.target.value)"
+    >
+      <slot />
+    </select>
+    <FAIcon
+      class="select-down-icon"
+      icon="chevron-down"
+    />
+  </label>
+</template>
+
+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
+export default {
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: [
+    'value',
+    'disabled'
+  ]
+}
+</script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.Select {
+  padding: 0;
+
+  select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: transparent;
+    border: none;
+    color: $fallback--text;
+    color: var(--inputText, --text, $fallback--text);
+    margin: 0;
+    padding: 0 2em 0 .2em;
+    font-family: sans-serif;
+    font-family: var(--inputFont, sans-serif);
+    font-size: 14px;
+    width: 100%;
+    z-index: 1;
+    height: 28px;
+    line-height: 16px;
+  }
+}
+</style>
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 6e95f7af..89199d85 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -1,15 +1,8 @@
 import { filter, trim } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
+import Select from '../../select/select.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
 
 const FilteringTab = {
   data () {
@@ -18,7 +11,8 @@ const FilteringTab = {
     }
   },
   components: {
-    BooleanSetting
+    BooleanSetting,
+    Select
   },
   computed: {
     ...SharedComputedObject(),
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 402c2a4a..4023fbe2 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -38,26 +38,17 @@
       </div>
       <div>
         {{ $t('settings.replies_in_timeline') }}
-        <label
-          for="replyVisibility"
-          class="select"
+        <Select
+          id="replyVisibility"
+          v-model="replyVisibility"
         >
-          <select
-            id="replyVisibility"
-            v-model="replyVisibility"
-          >
-            <option
-              value="all"
-              selected
-            >{{ $t('settings.reply_visibility_all') }}</option>
-            <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
-            <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
-          </select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
+          <option
+            value="all"
+            selected
+          >{{ $t('settings.reply_visibility_all') }}</option>
+          <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
+          <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
+        </Select>
       </div>
       <div>
         <BooleanSetting path="hidePostStats">
@@ -88,3 +79,12 @@
   </div>
 </template>
 <script src="./filtering_tab.js"></script>
+<style lang="scss">
+.select-multiple {
+  display: flex;
+  .option-list {
+    margin: 0;
+    padding-left: .5em;
+  }
+}
+</style>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 2db523be..03648d0b 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -1,15 +1,14 @@
 import BooleanSetting from '../helpers/boolean_setting.vue'
+import Select from '../../select/select.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faChevronDown,
   faGlobe
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faChevronDown,
   faGlobe
 )
 
@@ -27,7 +26,8 @@ const GeneralTab = {
   },
   components: {
     BooleanSetting,
-    InterfaceLanguageSwitcher
+    InterfaceLanguageSwitcher,
+    Select
   },
   computed: {
     postFormats () {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 9228c78e..a0413cfa 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -87,59 +87,41 @@
         <li>
           <div>
             {{ $t('settings.subject_line_behavior') }}
-            <label
-              for="subjectLineBehavior"
-              class="select"
+            <Select
+              id="subjectLineBehavior"
+              v-model="subjectLineBehavior"
             >
-              <select
-                id="subjectLineBehavior"
-                v-model="subjectLineBehavior"
-              >
-                <option value="email">
-                  {{ $t('settings.subject_line_email') }}
-                  {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
-                </option>
-                <option value="masto">
-                  {{ $t('settings.subject_line_mastodon') }}
-                  {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
-                </option>
-                <option value="noop">
-                  {{ $t('settings.subject_line_noop') }}
-                  {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
-                </option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
+              <option value="email">
+                {{ $t('settings.subject_line_email') }}
+                {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
+              </option>
+              <option value="masto">
+                {{ $t('settings.subject_line_mastodon') }}
+                {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
+              </option>
+              <option value="noop">
+                {{ $t('settings.subject_line_noop') }}
+                {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
+              </option>
+            </Select>
           </div>
         </li>
         <li v-if="postFormats.length > 0">
           <div>
             {{ $t('settings.post_status_content_type') }}
-            <label
-              for="postContentType"
-              class="select"
+            <Select
+              id="postContentType"
+              v-model="postContentType"
             >
-              <select
-                id="postContentType"
-                v-model="postContentType"
+              <option
+                v-for="postFormat in postFormats"
+                :key="postFormat"
+                :value="postFormat"
               >
-                <option
-                  v-for="postFormat in postFormats"
-                  :key="postFormat"
-                  :value="postFormat"
-                >
-                  {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                  {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
-                </option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
+                {{ $t(`post_status.content_type["${postFormat}"]`) }}
+                {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
+              </option>
+            </Select>
           </div>
         </li>
         <li>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 6cf75fe7..73068e19 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -33,16 +33,9 @@ import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
 import ExportImport from 'src/components/export_import/export_import.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Select from 'src/components/select/select.vue'
 
 import Preview from './preview.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
 
 // List of color values used in v1
 const v1OnlyNames = [
@@ -384,7 +377,8 @@ export default {
     TabSwitcher,
     Preview,
     ExportImport,
-    Checkbox
+    Checkbox,
+    Select
   },
   methods: {
     loadTheme (
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index b8add42f..2b4b8ba0 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -59,32 +59,23 @@
           <template slot="before">
             <div class="presets">
               {{ $t('settings.presets') }}
-              <label
-                for="preset-switcher"
-                class="select"
+              <Select
+                id="preset-switcher"
+                v-model="selected"
+                class="preset-switcher"
               >
-                <select
-                  id="preset-switcher"
-                  v-model="selected"
-                  class="preset-switcher"
+                <option
+                  v-for="style in availableStyles"
+                  :key="style.name"
+                  :value="style"
+                  :style="{
+                    backgroundColor: style[1] || (style.theme || style.source).colors.bg,
+                    color: style[3] || (style.theme || style.source).colors.text
+                  }"
                 >
-                  <option
-                    v-for="style in availableStyles"
-                    :key="style.name"
-                    :value="style"
-                    :style="{
-                      backgroundColor: style[1] || (style.theme || style.source).colors.bg,
-                      color: style[3] || (style.theme || style.source).colors.text
-                    }"
-                  >
-                    {{ style[0] || style.name }}
-                  </option>
-                </select>
-                <FAIcon
-                  class="select-down-icon"
-                  icon="chevron-down"
-                />
-              </label>
+                  {{ style[0] || style.name }}
+                </option>
+              </Select>
             </div>
           </template>
         </ExportImport>
@@ -902,28 +893,19 @@
           <div class="tab-header shadow-selector">
             <div class="select-container">
               {{ $t('settings.style.shadows.component') }}
-              <label
-                for="shadow-switcher"
-                class="select"
+              <Select
+                id="shadow-switcher"
+                v-model="shadowSelected"
+                class="shadow-switcher"
               >
-                <select
-                  id="shadow-switcher"
-                  v-model="shadowSelected"
-                  class="shadow-switcher"
+                <option
+                  v-for="shadow in shadowsAvailable"
+                  :key="shadow"
+                  :value="shadow"
                 >
-                  <option
-                    v-for="shadow in shadowsAvailable"
-                    :key="shadow"
-                    :value="shadow"
-                  >
-                    {{ $t('settings.style.shadows.components.' + shadow) }}
-                  </option>
-                </select>
-                <FAIcon
-                  class="select-down-icon"
-                  icon="chevron-down"
-                />
-              </label>
+                  {{ $t('settings.style.shadows.components.' + shadow) }}
+                </option>
+              </Select>
             </div>
             <div class="override">
               <label
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 800c39d5..2d5d6eb1 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -1,5 +1,6 @@
 import ColorInput from '../color_input/color_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
+import Select from '../select/select.vue'
 import { getCssShadow } from '../../services/style_setter/style_setter.js'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -45,7 +46,8 @@ export default {
   },
   components: {
     ColorInput,
-    OpacityInput
+    OpacityInput,
+    Select
   },
   methods: {
     add () {
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 37d491f0..6b5acbdb 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -59,30 +59,20 @@
         :disabled="usingFallback"
         class="id-control style-control"
       >
-        <label
-          for="shadow-switcher"
-          class="select"
+        <Select
+          id="shadow-switcher"
+          v-model="selectedId"
+          class="shadow-switcher"
           :disabled="!ready || usingFallback"
         >
-          <select
-            id="shadow-switcher"
-            v-model="selectedId"
-            class="shadow-switcher"
-            :disabled="!ready || usingFallback"
+          <option
+            v-for="(shadow, index) in cValue"
+            :key="index"
+            :value="index"
           >
-            <option
-              v-for="(shadow, index) in cValue"
-              :key="index"
-              :value="index"
-            >
-              {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
-            </option>
-          </select>
-          <FAIcon
-            icon="chevron-down"
-            class="select-down-icon"
-          />
-        </label>
+            {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
+          </option>
+        </Select>
         <button
           class="btn button-default"
           :disabled="!ready || !present"
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 3a8efafc..d9fb64d1 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -4,13 +4,13 @@ import ProgressButton from '../progress_button/progress_button.vue'
 import FollowButton from '../follow_button/follow_button.vue'
 import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import AccountActions from '../account_actions/account_actions.vue'
+import Select from '../select/select.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBell,
   faRss,
-  faChevronDown,
   faSearchPlus,
   faExternalLinkAlt
 } from '@fortawesome/free-solid-svg-icons'
@@ -18,7 +18,6 @@ import {
 library.add(
   faRss,
   faBell,
-  faChevronDown,
   faSearchPlus,
   faExternalLinkAlt
 )
@@ -118,7 +117,8 @@ export default {
     ModerationTools,
     AccountActions,
     ProgressButton,
-    FollowButton
+    FollowButton,
+    Select
   },
   methods: {
     muteUser () {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 4b7ee7d5..c5b73fde 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -132,25 +132,16 @@
               class="userHighlightCl"
               type="color"
             >
-            <label
-              for="theme_tab"
-              class="userHighlightSel select"
+            <Select
+              :id="'userHighlightSel'+user.id"
+              v-model="userHighlightType"
+              class="userHighlightSel"
             >
-              <select
-                :id="'userHighlightSel'+user.id"
-                v-model="userHighlightType"
-                class="userHighlightSel"
-              >
-                <option value="disabled">{{ $t('user_card.highlight.disabled') }}</option>
-                <option value="solid">{{ $t('user_card.highlight.solid') }}</option>
-                <option value="striped">{{ $t('user_card.highlight.striped') }}</option>
-                <option value="side">{{ $t('user_card.highlight.side') }}</option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
+              <option value="disabled">{{ $t('user_card.highlight.disabled') }}</option>
+              <option value="solid">{{ $t('user_card.highlight.solid') }}</option>
+              <option value="striped">{{ $t('user_card.highlight.striped') }}</option>
+              <option value="side">{{ $t('user_card.highlight.side') }}</option>
+            </Select>
           </div>
         </div>
         <div
-- 
cgit v1.2.3-70-g09d2


From 1f0ac68fcd3f382eedf69d1f5fdcffdc16c3885e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Mar 2021 16:55:14 +0200
Subject: implement ChoiceSetting for settings modal similar to BooleanSetting

---
 .../settings_modal/helpers/choice_setting.js       | 34 ++++++++++++++++
 .../settings_modal/helpers/choice_setting.vue      | 29 ++++++++++++++
 .../settings_modal/tabs/filtering_tab.js           | 11 ++++--
 .../settings_modal/tabs/filtering_tab.vue          | 17 +++-----
 src/components/settings_modal/tabs/general_tab.js  | 18 +++++++--
 src/components/settings_modal/tabs/general_tab.vue | 46 ++++++----------------
 6 files changed, 103 insertions(+), 52 deletions(-)
 create mode 100644 src/components/settings_modal/helpers/choice_setting.js
 create mode 100644 src/components/settings_modal/helpers/choice_setting.vue

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

diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js
new file mode 100644
index 00000000..042e8106
--- /dev/null
+++ b/src/components/settings_modal/helpers/choice_setting.js
@@ -0,0 +1,34 @@
+import { get, set } from 'lodash'
+import Select from 'src/components/select/select.vue'
+import ModifiedIndicator from './modified_indicator.vue'
+export default {
+  components: {
+    Select,
+    ModifiedIndicator
+  },
+  props: [
+    'path',
+    'disabled',
+    'options'
+  ],
+  computed: {
+    pathDefault () {
+      const [firstSegment, ...rest] = this.path.split('.')
+      return [firstSegment + 'DefaultValue', ...rest].join('.')
+    },
+    state () {
+      return get(this.$parent, this.path)
+    },
+    defaultState () {
+      return get(this.$parent, this.pathDefault)
+    },
+    isChanged () {
+      return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
+    }
+  },
+  methods: {
+    update (e) {
+      set(this.$parent, this.path, e)
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
new file mode 100644
index 00000000..1a8275b4
--- /dev/null
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -0,0 +1,29 @@
+<template>
+  <label
+    class="ChoiceSetting"
+  >
+    <slot />
+    <Select
+      :value="state"
+      :disabled="disabled"
+      @change="update"
+    >
+      <option
+        v-for="option in options"
+        :key="option.key"
+        :value="option.value"
+      >
+        {{ option.label }}
+        {{ option.value === defaultValue ? $t('settings.instance_default_simple') : '' }}
+      </option>
+    </Select>
+    <ModifiedIndicator :changed="isChanged" />
+  </label>
+</template>
+
+<script src="./choice_setting.js"></script>
+
+<style lang="scss">
+.ChoiceSetting {
+}
+</style>
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 89199d85..4eaf4217 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -1,18 +1,23 @@
 import { filter, trim } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
-import Select from '../../select/select.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
 const FilteringTab = {
   data () {
     return {
-      muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n')
+      muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n'),
+      replyVisibilityOptions: ['all', 'following', 'self'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.reply_visibility_${mode}`)
+      }))
     }
   },
   components: {
     BooleanSetting,
-    Select
+    ChoiceSetting
   },
   computed: {
     ...SharedComputedObject(),
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 4023fbe2..fb5fc375 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -36,20 +36,13 @@
           </li>
         </ul>
       </div>
-      <div>
-        {{ $t('settings.replies_in_timeline') }}
-        <Select
+      <ChoiceSetting
           id="replyVisibility"
-          v-model="replyVisibility"
+          path="replyVisibility"
+          :options="replyVisibilityOptions"
         >
-          <option
-            value="all"
-            selected
-          >{{ $t('settings.reply_visibility_all') }}</option>
-          <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
-          <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
-        </Select>
-      </div>
+        {{ $t('settings.replies_in_timeline') }}
+      </ChoiceSetting>
       <div>
         <BooleanSetting path="hidePostStats">
           {{ $t('settings.hide_post_stats') }}
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 03648d0b..07fccf57 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -1,5 +1,5 @@
 import BooleanSetting from '../helpers/boolean_setting.vue'
-import Select from '../../select/select.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -15,6 +15,11 @@ library.add(
 const GeneralTab = {
   data () {
     return {
+      subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
+      })),
       loopSilentAvailable:
       // Firefox
       Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
@@ -26,13 +31,20 @@ const GeneralTab = {
   },
   components: {
     BooleanSetting,
-    InterfaceLanguageSwitcher,
-    Select
+    ChoiceSetting,
+    InterfaceLanguageSwitcher
   },
   computed: {
     postFormats () {
       return this.$store.state.instance.postFormats || []
     },
+    postContentOptions () {
+      return this.postFormats.map(format => ({
+        key: format,
+        value: format,
+        label: this.$t(`post_status.content_type["${format}"]`)
+      }))
+    },
     instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
     instanceWallpaperUsed () {
       return this.$store.state.instance.background &&
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index a0413cfa..7fb82c06 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -85,44 +85,22 @@
           </BooleanSetting>
         </li>
         <li>
-          <div>
+          <ChoiceSetting
+            id="subjectLineBehavior"
+            path="subjectLineBehavior"
+            :options="subjectLineOptions"
+          >
             {{ $t('settings.subject_line_behavior') }}
-            <Select
-              id="subjectLineBehavior"
-              v-model="subjectLineBehavior"
-            >
-              <option value="email">
-                {{ $t('settings.subject_line_email') }}
-                {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
-              </option>
-              <option value="masto">
-                {{ $t('settings.subject_line_mastodon') }}
-                {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
-              </option>
-              <option value="noop">
-                {{ $t('settings.subject_line_noop') }}
-                {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
-              </option>
-            </Select>
-          </div>
+          </ChoiceSetting>
         </li>
         <li v-if="postFormats.length > 0">
-          <div>
+          <ChoiceSetting
+            id="postContentType"
+            path="postContentType"
+            :options="postContentOptions"
+          >
             {{ $t('settings.post_status_content_type') }}
-            <Select
-              id="postContentType"
-              v-model="postContentType"
-            >
-              <option
-                v-for="postFormat in postFormats"
-                :key="postFormat"
-                :value="postFormat"
-              >
-                {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
-              </option>
-            </Select>
-          </div>
+          </ChoiceSetting>
         </li>
         <li>
           <BooleanSetting path="minimalScopesMode">
-- 
cgit v1.2.3-70-g09d2


From 0c1014524232907925bf5fa59079dd06d0ef0472 Mon Sep 17 00:00:00 2001
From: Eris <femmediscord@gmail.com>
Date: Mon, 14 Jun 2021 19:42:56 +0000
Subject: New option: Hide shoutbox

---
 src/App.js                                         | 3 +++
 src/App.vue                                        | 2 +-
 src/components/settings_modal/tabs/general_tab.js  | 1 +
 src/components/settings_modal/tabs/general_tab.vue | 5 +++++
 src/i18n/en.json                                   | 1 +
 src/modules/config.js                              | 1 +
 6 files changed, 12 insertions(+), 1 deletion(-)

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

diff --git a/src/App.js b/src/App.js
index fe4c30cb..8d9ec8c7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -73,6 +73,9 @@ export default {
         this.$store.state.instance.instanceSpecificPanelContent
     },
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
+    hideSB () {
+      return this.$store.getters.mergedConfig.hideShoutbox
+    },
     isMobileLayout () { return this.$store.state.interface.mobileLayout },
     privateMode () { return this.$store.state.instance.private },
     sidebarAlign () {
diff --git a/src/App.vue b/src/App.vue
index 6c582c03..39decde9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -50,7 +50,7 @@
       <media-modal />
     </div>
     <shout-panel
-      v-if="currentUser && shout"
+      v-if="currentUser && shout && !hideSB"
       :floating="true"
       class="floating-shout mobile-hidden"
     />
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 07fccf57..0e838e59 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -50,6 +50,7 @@ const GeneralTab = {
       return this.$store.state.instance.background &&
         !this.$store.state.users.currentUser.background_image
     },
+    shout () { return this.$store.state.shout.channel.state === 'joined' }, 
     ...SharedComputedObject()
   }
 }
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index bdb29edf..3a9af1ea 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -21,6 +21,11 @@
             {{ $t('settings.hide_wallpaper') }}
           </BooleanSetting>
         </li>
+        <li v-if="shout">
+          <BooleanSetting path="hideShoutbox">
+            {{ $t('settings.hide_shoutbox') }} {{ $t('shoutbox.title') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
     <div class="setting-item">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index aa440ac1..79dcb919 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -349,6 +349,7 @@
     "max_thumbnails": "Maximum amount of thumbnails per post",
     "hide_isp": "Hide instance-specific panel",
     "right_sidebar": "Show sidebar on the right side",
+    "hide_shoutbox": "Hide ",
     "hide_wallpaper": "Hide instance wallpaper",
     "preload_images": "Preload images",
     "use_one_click_nsfw": "Open NSFW attachments with just one click",
diff --git a/src/modules/config.js b/src/modules/config.js
index 0f596750..bdab3f4d 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -21,6 +21,7 @@ export const defaultState = {
   customThemeSource: undefined,
   hideISP: false,
   hideInstanceWallpaper: false,
+  hideShoutbox: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: undefined, // instance default
   collapseMessageWithSubject: undefined, // instance default
-- 
cgit v1.2.3-70-g09d2


From 1668315bf8c454a995a968dc034d9e51715987c5 Mon Sep 17 00:00:00 2001
From: Eris <femmediscord@gmail.com>
Date: Mon, 14 Jun 2021 20:02:13 +0000
Subject: Fix lint error

---
 src/components/settings_modal/tabs/general_tab.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 0e838e59..be0fc768 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -50,7 +50,7 @@ const GeneralTab = {
       return this.$store.state.instance.background &&
         !this.$store.state.users.currentUser.background_image
     },
-    shout () { return this.$store.state.shout.channel.state === 'joined' }, 
+    shout () { return this.$store.state.shout.channel.state === 'joined' },
     ...SharedComputedObject()
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 7e3393b5a2eda7f696781853123de8df965ffbf2 Mon Sep 17 00:00:00 2001
From: Eris <femmediscord@gmail.com>
Date: Tue, 15 Jun 2021 00:59:36 +0000
Subject: Use cleaner instance config check for shoutbox setting

---
 src/components/settings_modal/tabs/general_tab.js  | 2 +-
 src/components/settings_modal/tabs/general_tab.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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

diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index be0fc768..eeda61bf 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -50,7 +50,7 @@ const GeneralTab = {
       return this.$store.state.instance.background &&
         !this.$store.state.users.currentUser.background_image
     },
-    shout () { return this.$store.state.shout.channel.state === 'joined' },
+    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
     ...SharedComputedObject()
   }
 }
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 8c255dd3..84f8ef8d 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -21,7 +21,7 @@
             {{ $t('settings.hide_wallpaper') }}
           </BooleanSetting>
         </li>
-        <li v-if="shout">
+        <li v-if="instanceShoutboxPresent">
           <BooleanSetting path="hideShoutbox">
             {{ $t('general.hide') }} {{ $t('shoutbox.title') }}
           </BooleanSetting>
-- 
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.js')

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