diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index ce537663f..8c672bd20 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -10,6 +10,7 @@ import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_i import UserAvatar from '../user_avatar/user_avatar.vue' import { useSyncConfigStore } from 'src/stores/sync_config.js' +import { useUserHighlightStore } from 'src/stores/user_highlight.js' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' @@ -100,23 +101,23 @@ const MentionLink = { userNameFullUi() { return this.user && this.user.screen_name_ui }, - highlight() { - return this.user && this.mergedConfig.highlight[this.user.screen_name] + highlightData() { + return this.highlight[this.user?.screen_name] }, highlightType() { - return this.highlight && '-' + this.highlight.type + return this.highlightData && '-' + this.highlightData.type }, highlightClass() { - if (this.highlight) return highlightClass(this.user) + return this.highlightData && highlightClass(this.user) }, style() { - if (this.highlight) { + if (this.highlightData) { const { backgroundColor, backgroundPosition, backgroundImage, ...rest - } = highlightStyle(this.highlight) + } = highlightStyle(this.highlightData) return rest } }, @@ -124,7 +125,7 @@ const MentionLink = { return [ { '-you': this.isYou && this.shouldBoldenYou, - '-highlighted': this.highlight, + '-highlighted': !!this.highlightData, '-has-selection': this.hasSelection, }, this.highlightType, @@ -160,6 +161,7 @@ const MentionLink = { return this.mergedConfig.mentionLinkFadeDomain }, ...mapPiniaState(useSyncConfigStore, ['mergedConfig']), + ...mapPiniaState(useUserHighlightStore, ['highlight']), ...mapState({ currentUser: (state) => state.users.currentUser, }),