make repeaters list users clickable

src/components/user_list_popover/user_list_popover.js

@@ -4,6 +4,9 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
 import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
@@ -29,6 +32,15 @@ const UserListPopover = {
       return useMergedConfigStore().mergedConfig.nonSquareEmoji
     },
   },
+  methods: {
+    generateProfileLink(user) {
+      return generateProfileLink(
+        user.id,
+        user.screen_name,
+        useInstanceStore().restrictedNicknames,
+      )
+    },
+  }
 }
 
 export default UserListPopover

src/components/user_list_popover/user_list_popover.vue

@@ -10,8 +10,9 @@
     <template #content>
       <div class="user-list-popover">
         <template v-if="users.length">
-          <div
+          <a
             v-for="(user) in usersCapped"
+            :href="$router.resolve(generateProfileLink(user)).href"
             :key="user.id"
             class="user-list-row"
           >
@@ -32,7 +33,7 @@
               <!-- eslint-enable vue/no-v-html -->
               <span class="user-list-screen-name">{{ user.screen_name_ui }}</span><UnicodeDomainIndicator :user="user" />
             </div>
-          </div>
+          </a>
         </template>
         <template v-else>
           <FAIcon
@@ -58,6 +59,7 @@
     padding: 0.25em;
     display: flex;
     flex-direction: row;
+    color: var(--text);
 
     .user-list-names {
       display: flex;