feat(preferences): option to hide account hover card (#1431)

components/account/AccountHoverWrapper.vue

@@ -8,13 +8,15 @@ const props = defineProps<{
 }>()
 
 const account = props.account || (props.handle ? useAccountByHandle(props.handle!) : undefined)
+const userSettings = useUserSettings()
+
 defineOptions({
   inheritAttrs: false,
 })
 </script>
 
 <template>
-  <VMenu v-if="!disabled && account" placement="bottom-start" :delay="{ show: 500, hide: 100 }" v-bind="$attrs" :close-on-content-click="false">
+  <VMenu v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')" placement="bottom-start" :delay="{ show: 500, hide: 100 }" v-bind="$attrs" :close-on-content-click="false">
     <slot />
     <template #popper>
       <AccountHoverCard v-if="account" :account="account" />

composables/settings/definition.ts

@@ -12,6 +12,7 @@ export interface PreferencesSettings {
   hideFavoriteCount: boolean
   hideFollowerCount: boolean
   hideTranslation: boolean
+  hideAccountHoverCard: boolean
   grayscaleMode: boolean
   enableAutoplay: boolean
   experimentalVirtualScroller: boolean
@@ -64,6 +65,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   hideFavoriteCount: false,
   hideFollowerCount: false,
   hideTranslation: false,
+  hideAccountHoverCard: false,
   grayscaleMode: false,
   enableAutoplay: true,
   experimentalVirtualScroller: true,

locales/en.json

@@ -362,6 +362,7 @@
       "enable_autoplay": "Enable Autoplay",
       "github_cards": "GitHub Cards",
       "grayscale_mode": "Grayscale mode",
+      "hide_account_hover_card": "Hide account hover card",
       "hide_boost_count": "Hide boost count",
       "hide_favorite_count": "Hide favorite count",
       "hide_follower_count": "Hide follower count",

pages/settings/preferences/index.vue

@@ -39,6 +39,12 @@ const userSettings = useUserSettings()
     >
       {{ $t('settings.preferences.hide_translation') }}
     </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'hideAccountHoverCard')"
+      @click="togglePreferences('hideAccountHoverCard')"
+    >
+      {{ $t('settings.preferences.hide_account_hover_card') }}
+    </SettingsToggleItem>
     <SettingsToggleItem
       :checked="getPreferences(userSettings, 'grayscaleMode')"
       @click="togglePreferences('grayscaleMode')"