From 8d3d8fffab0106a8aff5822044a8c3c30bd6e057 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 12 Aug 2022 01:19:19 +0300
Subject: fixes, clear cache on logout

---
 src/services/entity_normalizer/entity_normalizer.service.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/services/entity_normalizer/entity_normalizer.service.js')

diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index e9cbcfe6..b1ad2691 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -48,6 +48,7 @@ export const parseUser = (data) => {
 
   if (masto) {
     output.screen_name = data.acct
+    output.fqn = data.fqn
     output.statusnet_profile_url = data.url
 
     // There's nothing else to get
-- 
cgit v1.2.3-70-g09d2


From 50f5afbce1f2bc4dbd0ddf6c951c7e519dfc6ce3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 15 Aug 2022 23:19:33 +0300
Subject: add and remove users to/from lists from their profile

---
 src/components/account_actions/account_actions.js  |  4 +-
 src/components/account_actions/account_actions.vue |  1 +
 src/components/lists_edit/lists_edit.js            | 10 +--
 src/components/lists_new/lists_new.js              |  4 +-
 src/components/popover/popover.js                  | 25 +++++-
 src/i18n/en.json                                   |  3 +-
 src/modules/lists.js                               | 97 +++++++++++++++-------
 src/modules/users.js                               |  9 ++
 src/services/api/api.service.js                    | 35 +++++---
 .../entity_normalizer/entity_normalizer.service.js |  1 +
 10 files changed, 134 insertions(+), 55 deletions(-)

(limited to 'src/services/entity_normalizer/entity_normalizer.service.js')

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 99762562..735dd81c 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -1,6 +1,7 @@
 import { mapState } from 'vuex'
 import ProgressButton from '../progress_button/progress_button.vue'
 import Popover from '../popover/popover.vue'
+import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEllipsisV
@@ -19,7 +20,8 @@ const AccountActions = {
   },
   components: {
     ProgressButton,
-    Popover
+    Popover,
+    UserListMenu
   },
   methods: {
     showRepeats () {
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 23547f2c..770740e0 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -28,6 +28,7 @@
               class="dropdown-divider"
             />
           </template>
+          <UserListMenu :user="user" />
           <button
             v-if="relationship.blocking"
             class="btn button-default btn-block dropdown-item"
diff --git a/src/components/lists_edit/lists_edit.js b/src/components/lists_edit/lists_edit.js
index a68bb589..e4d0c22a 100644
--- a/src/components/lists_edit/lists_edit.js
+++ b/src/components/lists_edit/lists_edit.js
@@ -27,9 +27,9 @@ const ListsNew = {
     }
   },
   created () {
-    this.$store.dispatch('fetchList', { id: this.id })
+    this.$store.dispatch('fetchList', { listId: this.id })
       .then(() => { this.title = this.findListTitle(this.id) })
-    this.$store.dispatch('fetchListAccounts', { id: this.id })
+    this.$store.dispatch('fetchListAccounts', { listId: this.id })
       .then(() => {
         this.selectedUserIds = this.findListAccounts(this.id)
         this.selectedUserIds.forEach(userId => {
@@ -76,13 +76,13 @@ const ListsNew = {
       this.userIds = results
     },
     updateList () {
-      this.$store.dispatch('setList', { id: this.id, title: this.title })
-      this.$store.dispatch('setListAccounts', { id: this.id, accountIds: this.selectedUserIds })
+      this.$store.dispatch('setList', { listId: this.id, title: this.title })
+      this.$store.dispatch('setListAccounts', { listId: this.id, accountIds: this.selectedUserIds })
 
       this.$router.push({ name: 'lists-timeline', params: { id: this.id } })
     },
     deleteList () {
-      this.$store.dispatch('deleteList', { id: this.id })
+      this.$store.dispatch('deleteList', { listId: this.id })
       this.$router.push({ name: 'lists' })
     }
   }
diff --git a/src/components/lists_new/lists_new.js b/src/components/lists_new/lists_new.js
index 63dc28ad..a04b409e 100644
--- a/src/components/lists_new/lists_new.js
+++ b/src/components/lists_new/lists_new.js
@@ -69,8 +69,8 @@ const ListsNew = {
       // and "updating the accounts on the list".
       this.$store.dispatch('createList', { title: this.title })
         .then((list) => {
-          this.$store.dispatch('setListAccounts', { id: list.id, accountIds: this.selectedUserIds })
-          this.$router.push({ name: 'lists-timeline', params: { id: list.id } })
+          this.$store.dispatch('setListAccounts', { listId: list.id, accountIds: this.selectedUserIds })
+          this.$router.push({ name: 'lists-timeline', params: { listId: list.id } })
         })
     }
   }
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index d2af59fe..dd332c35 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -4,7 +4,7 @@ const Popover = {
     // Action to trigger popover: either 'hover' or 'click'
     trigger: String,
 
-    // Either 'top' or 'bottom'
+    // 'top', 'bottom', 'left', 'right'
     placement: String,
 
     // Takes object with properties 'x' and 'y', values of these can be
@@ -84,6 +84,8 @@ const Popover = {
       const anchorStyle = getComputedStyle(anchorEl)
       const topPadding = parseFloat(anchorStyle.paddingTop)
       const bottomPadding = parseFloat(anchorStyle.paddingBottom)
+      const rightPadding = parseFloat(anchorStyle.paddingRight)
+      const leftPadding = parseFloat(anchorStyle.paddingLeft)
 
       // Screen position of the origin point for popover = center of the anchor
       const origin = {
@@ -170,7 +172,7 @@ const Popover = {
       if (overlayCenter) {
         translateX = origin.x + horizOffset
         translateY = origin.y + vertOffset
-      } else {
+      } else if (this.placement !== 'right' && this.placement !== 'left') {
         // Default to whatever user wished with placement prop
         let usingTop = this.placement !== 'bottom'
 
@@ -189,6 +191,25 @@ const Popover = {
 
         const xOffset = (this.offset && this.offset.x) || 0
         translateX = origin.x + horizOffset + xOffset
+      } else {
+        // Default to whatever user wished with placement prop
+        let usingRight = this.placement !== 'left'
+
+        // Handle special cases, first force to displaying on top if there's not space on bottom,
+        // regardless of what placement value was. Then check if there's not space on top, and
+        // force to bottom, again regardless of what placement value was.
+        const rightBoundary = origin.x - anchorWidth * 0.5 + (this.removePadding ? rightPadding : 0)
+        const leftBoundary = origin.x + anchorWidth * 0.5 - (this.removePadding ? leftPadding : 0)
+        if (leftBoundary + content.offsetWidth > xBounds.max) usingRight = true
+        if (rightBoundary - content.offsetWidth < xBounds.min) usingRight = false
+
+        const xOffset = (this.offset && this.offset.x) || 0
+        translateX = usingRight
+          ? rightBoundary - xOffset - content.offsetWidth
+          : leftBoundary + xOffset
+
+        const yOffset = (this.offset && this.offset.y) || 0
+        translateY = origin.y + vertOffset + yOffset
       }
 
       this.styles = {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a7c86e6c..7352b75c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -980,7 +980,8 @@
     "create": "Create",
     "save": "Save changes",
     "delete": "Delete list",
-    "following_only": "Limit to Following"
+    "following_only": "Limit to Following",
+    "manage_lists": "Manage lists"
   },
   "file_type": {
     "audio": "Audio",
diff --git a/src/modules/lists.js b/src/modules/lists.js
index 84c15759..5c9432ad 100644
--- a/src/modules/lists.js
+++ b/src/modules/lists.js
@@ -9,27 +9,42 @@ export const mutations = {
   setLists (state, value) {
     state.allLists = value
   },
-  setList (state, { id, title }) {
-    if (!state.allListsObject[id]) {
-      state.allListsObject[id] = {}
+  setList (state, { listId, title }) {
+    if (!state.allListsObject[listId]) {
+      state.allListsObject[listId] = { accountIds: [] }
     }
-    state.allListsObject[id].title = title
+    state.allListsObject[listId].title = title
 
-    if (!find(state.allLists, { id })) {
-      state.allLists.push({ id, title })
+    if (!find(state.allLists, { listId })) {
+      state.allLists.push({ listId, title })
     } else {
-      find(state.allLists, { id }).title = title
+      find(state.allLists, { listId }).title = title
     }
   },
-  setListAccounts (state, { id, accountIds }) {
-    if (!state.allListsObject[id]) {
-      state.allListsObject[id] = {}
+  setListAccounts (state, { listId, accountIds }) {
+    if (!state.allListsObject[listId]) {
+      state.allListsObject[listId] = { accountIds: [] }
     }
-    state.allListsObject[id].accountIds = accountIds
+    state.allListsObject[listId].accountIds = accountIds
   },
-  deleteList (state, { id }) {
-    delete state.allListsObject[id]
-    remove(state.allLists, list => list.id === id)
+  addListAccount (state, { listId, accountId }) {
+    if (!state.allListsObject[listId]) {
+      state.allListsObject[listId] = { accountIds: [] }
+    }
+    state.allListsObject[listId].accountIds.push(accountId)
+  },
+  removeListAccount (state, { listId, accountId }) {
+    if (!state.allListsObject[listId]) {
+      state.allListsObject[listId] = { accountIds: [] }
+    }
+    const { accountIds } = state.allListsObject[listId]
+    const set = new Set(accountIds)
+    set.delete(accountId)
+    state.allListsObject[listId].accountIds = [...set]
+  },
+  deleteList (state, { listId }) {
+    delete state.allListsObject[listId]
+    remove(state.allLists, list => list.id === listId)
   }
 }
 
@@ -40,37 +55,57 @@ const actions = {
   createList ({ rootState, commit }, { title }) {
     return rootState.api.backendInteractor.createList({ title })
       .then((list) => {
-        commit('setList', { id: list.id, title })
+        commit('setList', { listId: list.id, title })
         return list
       })
   },
-  fetchList ({ rootState, commit }, { id }) {
-    return rootState.api.backendInteractor.getList({ id })
+  fetchList ({ rootState, commit }, { listId }) {
+    return rootState.api.backendInteractor.getList({ listId })
       .then((list) => commit('setList', { id: list.id, title: list.title }))
   },
-  fetchListAccounts ({ rootState, commit }, { id }) {
-    return rootState.api.backendInteractor.getListAccounts({ id })
-      .then((accountIds) => commit('setListAccounts', { id, accountIds }))
+  fetchListAccounts ({ rootState, commit }, { listId }) {
+    return rootState.api.backendInteractor.getListAccounts({ listId })
+      .then((accountIds) => commit('setListAccounts', { listId, accountIds }))
   },
-  setList ({ rootState, commit }, { id, title }) {
-    rootState.api.backendInteractor.updateList({ id, title })
-    commit('setList', { id, title })
+  setList ({ rootState, commit }, { listId, title }) {
+    rootState.api.backendInteractor.updateList({ listId, title })
+    commit('setList', { listId, title })
   },
-  setListAccounts ({ rootState, commit }, { id, accountIds }) {
-    const saved = rootState.lists.allListsObject[id].accountIds || []
+  setListAccounts ({ rootState, commit }, { listId, accountIds }) {
+    const saved = rootState.lists.allListsObject[listId].accountIds || []
     const added = accountIds.filter(id => !saved.includes(id))
     const removed = saved.filter(id => !accountIds.includes(id))
-    commit('setListAccounts', { id, accountIds })
+    commit('setListAccounts', { listId, accountIds })
     if (added.length > 0) {
-      rootState.api.backendInteractor.addAccountsToList({ id, accountIds: added })
+      rootState.api.backendInteractor.addAccountsToList({ listId, accountIds: added })
     }
     if (removed.length > 0) {
-      rootState.api.backendInteractor.removeAccountsFromList({ id, accountIds: removed })
+      rootState.api.backendInteractor.removeAccountsFromList({ listId, accountIds: removed })
     }
   },
-  deleteList ({ rootState, commit }, { id }) {
-    rootState.api.backendInteractor.deleteList({ id })
-    commit('deleteList', { id })
+  addListAccount ({ rootState, commit }, { listId, accountId }) {
+    return rootState
+      .api
+      .backendInteractor
+      .addAccountsToList({ listId, accountIds: [accountId] })
+      .then((result) => {
+        commit('addListAccount', { listId, accountId })
+        return result
+      })
+  },
+  removeListAccount ({ rootState, commit }, { listId, accountId }) {
+    return rootState
+      .api
+      .backendInteractor
+      .removeAccountsFromList({ listId, accountIds: [accountId] })
+      .then((result) => {
+        commit('removeListAccount', { listId, accountId })
+        return result
+      })
+  },
+  deleteList ({ rootState, commit }, { listId }) {
+    rootState.api.backendInteractor.deleteList({ listId })
+    commit('deleteList', { listId })
   }
 }
 
diff --git a/src/modules/users.js b/src/modules/users.js
index c13beb29..59e8b391 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -170,6 +170,9 @@ export const mutations = {
       state.relationships[relationship.id] = relationship
     })
   },
+  updateUserInLists (state, { id, inLists }) {
+    state.usersObject[id].inLists = inLists
+  },
   saveBlockIds (state, blockIds) {
     state.currentUser.blockIds = blockIds
   },
@@ -291,6 +294,12 @@ const users = {
           .then((relationships) => store.commit('updateUserRelationship', relationships))
       }
     },
+    fetchUserInLists (store, id) {
+      if (store.state.currentUser) {
+        store.rootState.api.backendInteractor.fetchUserInLists({ id })
+          .then((inLists) => store.commit('updateUserInLists', { id, inLists }))
+      }
+    },
     fetchBlocks (store) {
       return store.rootState.api.backendInteractor.fetchBlocks()
         .then((blocks) => {
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 7b6f7d67..df899827 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -52,6 +52,7 @@ const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
 const MASTODON_USER_URL = '/api/v1/accounts'
 const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
 const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
+const MASTODON_USER_IN_LISTS = id => `/api/v1/accounts/${id}/lists`
 const MASTODON_LIST_URL = id => `/api/v1/lists/${id}`
 const MASTODON_LIST_TIMELINE_URL = id => `/api/v1/timelines/list/${id}`
 const MASTODON_LIST_ACCOUNTS_URL = id => `/api/v1/lists/${id}/accounts`
@@ -262,6 +263,13 @@ const unfollowUser = ({ id, credentials }) => {
   }).then((data) => data.json())
 }
 
+const fetchUserInLists = ({ id, credentials }) => {
+  const url = MASTODON_USER_IN_LISTS(id)
+  return fetch(url, {
+    headers: authHeaders(credentials)
+  }).then((data) => data.json())
+}
+
 const pinOwnStatus = ({ id, credentials }) => {
   return promisedRequest({ url: MASTODON_PIN_OWN_STATUS(id), credentials, method: 'POST' })
     .then((data) => parseStatus(data))
@@ -408,14 +416,14 @@ const createList = ({ title, credentials }) => {
   }).then((data) => data.json())
 }
 
-const getList = ({ id, credentials }) => {
-  const url = MASTODON_LIST_URL(id)
+const getList = ({ listId, credentials }) => {
+  const url = MASTODON_LIST_URL(listId)
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => data.json())
 }
 
-const updateList = ({ id, title, credentials }) => {
-  const url = MASTODON_LIST_URL(id)
+const updateList = ({ listId, title, credentials }) => {
+  const url = MASTODON_LIST_URL(listId)
   const headers = authHeaders(credentials)
   headers['Content-Type'] = 'application/json'
 
@@ -426,15 +434,15 @@ const updateList = ({ id, title, credentials }) => {
   })
 }
 
-const getListAccounts = ({ id, credentials }) => {
-  const url = MASTODON_LIST_ACCOUNTS_URL(id)
+const getListAccounts = ({ listId, credentials }) => {
+  const url = MASTODON_LIST_ACCOUNTS_URL(listId)
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => data.json())
     .then((data) => data.map(({ id }) => id))
 }
 
-const addAccountsToList = ({ id, accountIds, credentials }) => {
-  const url = MASTODON_LIST_ACCOUNTS_URL(id)
+const addAccountsToList = ({ listId, accountIds, credentials }) => {
+  const url = MASTODON_LIST_ACCOUNTS_URL(listId)
   const headers = authHeaders(credentials)
   headers['Content-Type'] = 'application/json'
 
@@ -445,8 +453,8 @@ const addAccountsToList = ({ id, accountIds, credentials }) => {
   })
 }
 
-const removeAccountsFromList = ({ id, accountIds, credentials }) => {
-  const url = MASTODON_LIST_ACCOUNTS_URL(id)
+const removeAccountsFromList = ({ listId, accountIds, credentials }) => {
+  const url = MASTODON_LIST_ACCOUNTS_URL(listId)
   const headers = authHeaders(credentials)
   headers['Content-Type'] = 'application/json'
 
@@ -457,8 +465,8 @@ const removeAccountsFromList = ({ id, accountIds, credentials }) => {
   })
 }
 
-const deleteList = ({ id, credentials }) => {
-  const url = MASTODON_LIST_URL(id)
+const deleteList = ({ listId, credentials }) => {
+  const url = MASTODON_LIST_URL(listId)
   return fetch(url, {
     method: 'DELETE',
     headers: authHeaders(credentials)
@@ -1563,7 +1571,8 @@ const apiService = {
   sendChatMessage,
   readChat,
   deleteChatMessage,
-  setReportState
+  setReportState,
+  fetchUserInLists
 }
 
 export default apiService
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index b1ad2691..13ad087f 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -43,6 +43,7 @@ export const parseUser = (data) => {
   // case for users in "mentions" property for statuses in MastoAPI
   const mastoShort = masto && !Object.prototype.hasOwnProperty.call(data, 'avatar')
 
+  output.inLists = null
   output.id = String(data.id)
   output._original = data // used for server-side settings
 
-- 
cgit v1.2.3-70-g09d2


From 0a79a747730bb4a10eb2544412dab68a10602240 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 29 Aug 2022 18:46:41 -0400
Subject: Use dedicated indicator for non-ascii domain names

---
 src/components/basic_user_card/basic_user_card.js  |  4 ++-
 src/components/basic_user_card/basic_user_card.vue |  8 ++---
 src/components/emoji_input/emoji_input.js          |  4 ++-
 src/components/emoji_input/emoji_input.vue         | 16 ++++++++-
 src/components/emoji_input/suggestor.js            | 11 ++++---
 src/components/mention_link/mention_link.js        |  2 ++
 src/components/mention_link/mention_link.vue       |  3 ++
 src/components/notification/notification.js        |  4 ++-
 src/components/notification/notification.vue       | 21 ++++++------
 src/components/status/status.js                    |  4 ++-
 src/components/status/status.vue                   | 16 ++++-----
 .../unicode_domain_indicator.vue                   | 26 +++++++++++++++
 src/components/user_card/user_card.js              |  4 ++-
 src/components/user_card/user_card.vue             |  9 ++---
 src/components/user_link/user_link.vue             | 38 ++++++++++++++++++++++
 .../user_list_popover/user_list_popover.js         |  2 ++
 .../user_list_popover/user_list_popover.vue        |  2 +-
 .../user_reporting_modal/user_reporting_modal.js   |  4 ++-
 .../user_reporting_modal/user_reporting_modal.vue  | 10 ++++--
 src/i18n/en.json                                   |  3 ++
 .../entity_normalizer/entity_normalizer.service.js |  6 ++--
 .../entity_normalizer/entity_normalizer.spec.js    |  3 +-
 22 files changed, 151 insertions(+), 49 deletions(-)
 create mode 100644 src/components/unicode_domain_indicator/unicode_domain_indicator.vue
 create mode 100644 src/components/user_link/user_link.vue

(limited to 'src/services/entity_normalizer/entity_normalizer.service.js')

diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js
index 8b1a2c38..31de2d75 100644
--- a/src/components/basic_user_card/basic_user_card.js
+++ b/src/components/basic_user_card/basic_user_card.js
@@ -1,5 +1,6 @@
 import UserPopover from '../user_popover/user_popover.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import UserLink from '../user_link/user_link.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -10,7 +11,8 @@ const BasicUserCard = {
   components: {
     UserPopover,
     UserAvatar,
-    RichContent
+    RichContent,
+    UserLink
   },
   methods: {
     userProfileLink (user) {
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 9cca7840..418de926 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -30,12 +30,10 @@
         />
       </div>
       <div>
-        <router-link
+        <user-link
           class="basic-user-card-screen-name"
-          :to="userProfileLink(user)"
-        >
-          @{{ user.screen_name_ui }}
-        </router-link>
+          :user="user"
+        />
       </div>
       <slot />
     </div>
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 5ba3907f..b664d6b3 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -1,5 +1,6 @@
 import Completion from '../../services/completion/completion.js'
 import EmojiPicker from '../emoji_picker/emoji_picker.vue'
+import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
 import { take } from 'lodash'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
 
@@ -120,7 +121,8 @@ const EmojiInput = {
     }
   },
   components: {
-    EmojiPicker
+    EmojiPicker,
+    UnicodeDomainIndicator
   },
   computed: {
     padEmoji () {
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 7d95ab7e..81b81913 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -50,7 +50,21 @@
             <span v-else>{{ suggestion.replacement }}</span>
           </span>
           <div class="label">
-            <span class="displayText">{{ suggestion.displayText }}</span>
+            <span
+              v-if="suggestion.user"
+              class="displayText"
+            >
+              {{ suggestion.displayText }}<UnicodeDomainIndicator
+                :user="suggestion.user"
+                :at="false"
+              />
+            </span>
+            <span
+              v-if="!suggestion.user"
+              class="displayText"
+            >
+              {{ suggestion.displayText }}
+            </span>
             <span class="detailText">{{ suggestion.detailText }}</span>
           </div>
         </div>
diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
index e8efbd1e..0ddb4d68 100644
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@@ -116,11 +116,12 @@ export const suggestUsers = ({ dispatch, state }) => {
 
       return diff + nameAlphabetically + screenNameAlphabetically
       /* eslint-disable camelcase */
-    }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({
-      displayText: screen_name_ui,
-      detailText: name,
-      imageUrl: profile_image_url_original,
-      replacement: '@' + screen_name + ' '
+    }).map((user) => ({
+      user,
+      displayText: user.screen_name_ui,
+      detailText: user.name,
+      imageUrl: user.profile_image_url_original,
+      replacement: '@' + user.screen_name + ' '
     }))
     /* eslint-enable camelcase */
 
diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 4a74fbe2..6515bd11 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -2,6 +2,7 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
 import { mapGetters, mapState } from 'vuex'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
 import { defineAsyncComponent } from 'vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -16,6 +17,7 @@ const MentionLink = {
   name: 'MentionLink',
   components: {
     UserAvatar,
+    UnicodeDomainIndicator,
     UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue'))
   },
   props: {
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 3af502ef..869a3257 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -47,6 +47,9 @@
             class="serverName"
             :class="{ '-faded': shouldFadeDomain }"
             v-html="'@' + serverName"
+          /><UnicodeDomainIndicator
+            v-if="shouldShowFullUserName"
+            :user="user"
           />
           </span>
           <span
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index f60a1a6a..ddba560e 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -5,6 +5,7 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
 import Timeago from '../timeago/timeago.vue'
 import Report from '../report/report.vue'
+import UserLink from '../user_link/user_link.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import UserPopover from '../user_popover/user_popover.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
@@ -50,7 +51,8 @@ const Notification = {
     Status,
     Report,
     RichContent,
-    UserPopover
+    UserPopover,
+    UserLink
   },
   methods: {
     toggleUserExpanded () {
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 6a5417b3..26b174ff 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -11,9 +11,10 @@
       class="Notification container -muted"
     >
       <small>
-        <router-link :to="userProfileLink">
-          {{ notification.from_profile.screen_name_ui }}
-        </router-link>
+        <user-link
+          :user="notification.from_profile"
+          :at="false"
+        />
       </small>
       <button
         class="button-unstyled unmute"
@@ -174,12 +175,10 @@
           v-if="notification.type === 'follow' || notification.type === 'follow_request'"
           class="follow-text"
         >
-          <router-link
-            :to="userProfileLink"
+          <user-link
             class="follow-name"
-          >
-            @{{ notification.from_profile.screen_name_ui }}
-          </router-link>
+            :user="notification.from_profile"
+          />
           <div
             v-if="notification.type === 'follow_request'"
             style="white-space: nowrap;"
@@ -210,9 +209,9 @@
           v-else-if="notification.type === 'move'"
           class="move-text"
         >
-          <router-link :to="targetUserProfileLink">
-            @{{ notification.target.screen_name_ui }}
-          </router-link>
+          <user-link
+            :user="notification.target"
+          />
         </div>
         <Report
           v-else-if="notification.type === 'pleroma:report'"
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 384063a7..19356664 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -13,6 +13,7 @@ import StatusPopover from '../status_popover/status_popover.vue'
 import UserPopover from '../user_popover/user_popover.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
 import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
+import UserLink from '../user_link/user_link.vue'
 import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
 import MentionLink from 'src/components/mention_link/mention_link.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -115,7 +116,8 @@ const Status = {
     RichContent,
     MentionLink,
     MentionsLine,
-    UserPopover
+    UserPopover,
+    UserLink
   },
   props: [
     'statusoid',
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 967a966c..91f5fffa 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -25,9 +25,10 @@
             class="fa-scale-110 fa-old-padding repeat-icon"
             icon="retweet"
           />
-          <router-link :to="userProfileLink">
-            {{ status.user.screen_name_ui }}
-          </router-link>
+          <user-link
+            :user="status.user"
+            :at="false"
+          />
         </small>
         <small
           v-if="showReasonMutedThread"
@@ -164,13 +165,12 @@
                 >
                   {{ status.user.name }}
                 </h4>
-                <router-link
+                <user-link
                   class="account-name"
                   :title="status.user.screen_name_ui"
-                  :to="userProfileLink"
-                >
-                  {{ status.user.screen_name_ui }}
-                </router-link>
+                  :user="status.user"
+                  :at="false"
+                />
                 <img
                   v-if="!!(status.user && status.user.favicon)"
                   class="status-favicon"
diff --git a/src/components/unicode_domain_indicator/unicode_domain_indicator.vue b/src/components/unicode_domain_indicator/unicode_domain_indicator.vue
new file mode 100644
index 00000000..8f35245f
--- /dev/null
+++ b/src/components/unicode_domain_indicator/unicode_domain_indicator.vue
@@ -0,0 +1,26 @@
+<template>
+  <FAIcon
+    v-if="user && user.screen_name_ui_contains_non_ascii"
+    icon="code"
+    :title="$t('unicode_domain_indicator.tooltip')"
+  />
+</template>
+
+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCode
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCode
+)
+
+const UnicodeDomainIndicator = {
+  props: {
+    user: Object
+  }
+}
+
+export default UnicodeDomainIndicator
+</script>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 4c81e2c7..37458ba2 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -5,6 +5,7 @@ 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 UserLink from '../user_link/user_link.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
@@ -134,7 +135,8 @@ export default {
     ProgressButton,
     FollowButton,
     Select,
-    RichContent
+    RichContent,
+    UserLink
   },
   methods: {
     muteUser () {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index ace89c51..b84ff27d 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -106,13 +106,10 @@
               </button>
             </div>
             <div class="bottom-line">
-              <router-link
+              <user-link
                 class="user-screen-name"
-                :title="user.screen_name_ui"
-                :to="userProfileLink(user)"
-              >
-                @{{ user.screen_name_ui }}
-              </router-link>
+                :user="user"
+              />
               <template v-if="!hideBio">
                 <span
                   v-if="user.deactivated"
diff --git a/src/components/user_link/user_link.vue b/src/components/user_link/user_link.vue
new file mode 100644
index 00000000..efd96e12
--- /dev/null
+++ b/src/components/user_link/user_link.vue
@@ -0,0 +1,38 @@
+<template>
+  <router-link
+    :title="user.screen_name_ui"
+    :to="userProfileLink(user)"
+  >
+    {{ at ? '@' : '' }}{{ user.screen_name_ui }}<UnicodeDomainIndicator
+      :user="user"
+    />
+  </router-link>
+</template>
+
+<script>
+import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
+const UserLink = {
+  props: {
+    user: Object,
+    at: {
+      type: Boolean,
+      default: true
+    }
+  },
+  components: {
+    UnicodeDomainIndicator
+  },
+  methods: {
+    userProfileLink (user) {
+      return generateProfileLink(
+        user.id, user.screen_name,
+        this.$store.state.instance.restrictedNicknames
+      )
+    }
+  }
+}
+
+export default UserLink
+</script>
diff --git a/src/components/user_list_popover/user_list_popover.js b/src/components/user_list_popover/user_list_popover.js
index e24eb9f7..046e0abd 100644
--- a/src/components/user_list_popover/user_list_popover.js
+++ b/src/components/user_list_popover/user_list_popover.js
@@ -1,5 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
+import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
@@ -15,6 +16,7 @@ const UserListPopover = {
   ],
   components: {
     RichContent,
+    UnicodeDomainIndicator,
     Popover: defineAsyncComponent(() => import('../popover/popover.vue')),
     UserAvatar: defineAsyncComponent(() => import('../user_avatar/user_avatar.vue'))
   },
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index a3ce54c3..635dc7f6 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -29,7 +29,7 @@
                 :emoji="user.emoji"
               />
               <!-- eslint-enable vue/no-v-html -->
-              <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
+              <span class="user-list-screen-name">{{ user.screen_name_ui }}</span><UnicodeDomainIndicator :user="user" />
             </div>
           </div>
         </template>
diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js
index 85ffc661..67fde084 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.js
+++ b/src/components/user_reporting_modal/user_reporting_modal.js
@@ -2,13 +2,15 @@ import Status from '../status/status.vue'
 import List from '../list/list.vue'
 import Checkbox from '../checkbox/checkbox.vue'
 import Modal from '../modal/modal.vue'
+import UserLink from '../user_link/user_link.vue'
 
 const UserReportingModal = {
   components: {
     Status,
     List,
     Checkbox,
-    Modal
+    Modal,
+    UserLink
   },
   data () {
     return {
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 429a66e2..8c42ab7b 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -5,9 +5,13 @@
   >
     <div class="user-reporting-panel panel">
       <div class="panel-heading">
-        <div class="title">
-          {{ $t('user_reporting.title', [user.screen_name_ui]) }}
-        </div>
+        <i18n-t
+          tag="div"
+          keypath="user_reporting.title"
+          class="title"
+        >
+          <UserLink :user="user" />
+        </i18n-t>
       </div>
       <div class="panel-body">
         <div class="user-reporting-panel-left">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 91722d9a..4ce56678 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1006,5 +1006,8 @@
     "update_changelog": "For more details on what's changed, see {theFullChangelog}.",
     "update_changelog_here": "the full changelog",
     "art_by": "Art by {linkToArtist}"
+  },
+  "unicode_domain_indicator": {
+    "tooltip": "This domain contains non-ascii characters."
   }
 }
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index e9cbcfe6..ce316832 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -214,12 +214,14 @@ export const parseUser = (data) => {
   output.screen_name_ui = output.screen_name
   if (output.screen_name && output.screen_name.includes('@')) {
     const parts = output.screen_name.split('@')
-    let unicodeDomain = punycode.toUnicode(parts[1])
+    const unicodeDomain = punycode.toUnicode(parts[1])
     if (unicodeDomain !== parts[1]) {
       // Add some identifier so users can potentially spot spoofing attempts:
       // lain.com and xn--lin-6cd.com would appear identical otherwise.
-      unicodeDomain = '🌏' + unicodeDomain
+      output.screen_name_ui_contains_non_ascii = true
       output.screen_name_ui = [parts[0], unicodeDomain].join('@')
+    } else {
+      output.screen_name_ui_contains_non_ascii = false
     }
   }
 
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index 98bb05a8..3923596b 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -269,7 +269,8 @@ describe('API Entities normalizer', () => {
     it('converts IDN to unicode and marks it as internatonal', () => {
       const user = makeMockUserMasto({ acct: 'lain@xn--lin-6cd.com' })
 
-      expect(parseUser(user)).to.have.property('screen_name_ui').that.equal('lain@🌏lаin.com')
+      expect(parseUser(user)).to.have.property('screen_name_ui').that.equal('lain@lаin.com')
+      expect(parseUser(user)).to.have.property('screen_name_ui_contains_non_ascii').that.equal(true)
     })
   })
 
-- 
cgit v1.2.3-70-g09d2