From 01ed4f68dc0e3e97a9070d8291ac03483502ff9d Mon Sep 17 00:00:00 2001
From: kongmoumou <35442047+kongmoumou@users.noreply.github.com>
Date: Sun, 19 Mar 2023 20:24:27 +0800
Subject: [PATCH] fix: sticky hover style on mobile (#1513)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 components/account/AccountFollowButton.vue | 16 ++++++++--------
 components/account/AccountMoreButton.vue   |  2 +-
 components/nav/NavSideItem.vue             |  2 +-
 components/status/StatusActionButton.vue   |  6 +++---
 components/status/StatusActions.vue        |  8 ++++----
 components/status/StatusActionsMore.vue    |  2 +-
 components/tag/TagActionButton.vue         |  2 +-
 unocss.config.ts                           |  1 +
 8 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 600e2b95..f3cb771d 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -98,23 +98,23 @@ const buttonStyle = $computed(() => {
     @click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollow()"
   >
     <template v-if="relationship?.blocking">
-      <span group-hover="hidden">{{ $t('account.blocking') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.unblock') }}</span>
+      <span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
+      <span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
     </template>
     <template v-if="relationship?.muting">
-      <span group-hover="hidden">{{ $t('account.muting') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.unmute') }}</span>
+      <span elk-group-hover="hidden">{{ $t('account.muting') }}</span>
+      <span hidden elk-group-hover="inline">{{ $t('account.unmute') }}</span>
     </template>
     <template v-else-if="relationship ? relationship.following : context === 'following'">
-      <span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
+      <span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
+      <span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
     </template>
     <template v-else-if="relationship?.requested">
       <span>{{ $t('account.follow_requested') }}</span>
     </template>
     <template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
-      <span group-hover="hidden">{{ $t('account.follows_you') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.follow_back') }}</span>
+      <span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
+      <span hidden elk-group-hover="inline">{{ $t('account.follow_back') }}</span>
     </template>
     <template v-else>
       <span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
index 4c915194..6bf619a7 100644
--- a/components/account/AccountMoreButton.vue
+++ b/components/account/AccountMoreButton.vue
@@ -68,7 +68,7 @@ const toggleReblogs = async () => {
 <template>
   <CommonDropdown :eager-mount="command">
     <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="More actions">
-      <div rounded-5 p2 group-hover="bg-purple/10">
+      <div rounded-5 p2 elk-group-hover="bg-purple/10">
         <div i-ri:more-2-fill />
       </div>
     </button>
diff --git a/components/nav/NavSideItem.vue b/components/nav/NavSideItem.vue
index 6d323e17..3296df7b 100644
--- a/components/nav/NavSideItem.vue
+++ b/components/nav/NavSideItem.vue
@@ -60,7 +60,7 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
         px2 py2 mx3 sm:mxa
         xl="ml0 mr5 px5 w-auto"
         transition-100
-        group-hover="bg-active" group-focus-visible:ring="2 current"
+        elk-group-hover="bg-active" group-focus-visible:ring="2 current"
       >
         <slot name="icon">
           <div :class="icon" text-xl />
diff --git a/components/status/StatusActionButton.vue b/components/status/StatusActionButton.vue
index ca6c1d48..2795116b 100644
--- a/components/status/StatusActionButton.vue
+++ b/components/status/StatusActionButton.vue
@@ -6,7 +6,7 @@ const { as = 'button', command, disabled, content, icon } = defineProps<{
   icon: string
   activeIcon?: string
   hover: string
-  groupHover: string
+  elkGroupHover: string
   active?: boolean
   disabled?: boolean
   as?: string
@@ -62,8 +62,8 @@ useCommand({
       <div
         rounded-full p2
         v-bind="disabled ? {} : {
-          'group-hover': groupHover,
-          'group-focus-visible': groupHover,
+          'elk-group-hover': elkGroupHover,
+          'group-focus-visible': elkGroupHover,
           'group-focus-visible:ring': '2 current',
         }"
       >
diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index 8acab172..335ff064 100644
--- a/components/status/StatusActions.vue
+++ b/components/status/StatusActions.vue
@@ -38,7 +38,7 @@ const reply = () => {
       <StatusActionButton
         :content="$t('action.reply')"
         :text="!getPreferences(userSettings, 'hideReplyCount') && status.repliesCount || ''"
-        color="text-blue" hover="text-blue" group-hover="bg-blue/10"
+        color="text-blue" hover="text-blue" elk-group-hover="bg-blue/10"
         icon="i-ri:chat-1-line"
         :command="command"
         @click="reply"
@@ -56,7 +56,7 @@ const reply = () => {
       <StatusActionButton
         :content="$t('action.boost')"
         :text="!getPreferences(userSettings, 'hideBoostCount') && status.reblogsCount ? status.reblogsCount : ''"
-        color="text-green" hover="text-green" group-hover="bg-green/10"
+        color="text-green" hover="text-green" elk-group-hover="bg-green/10"
         icon="i-ri:repeat-line"
         active-icon="i-ri:repeat-fill"
         :active="!!status.reblogged"
@@ -77,7 +77,7 @@ const reply = () => {
       <StatusActionButton
         :content="$t('action.favourite')"
         :text="!getPreferences(userSettings, 'hideFavoriteCount') && status.favouritesCount ? status.favouritesCount : ''"
-        color="text-rose" hover="text-rose" group-hover="bg-rose/10"
+        color="text-rose" hover="text-rose" elk-group-hover="bg-rose/10"
         icon="i-ri:heart-3-line"
         active-icon="i-ri:heart-3-fill"
         :active="!!status.favourited"
@@ -97,7 +97,7 @@ const reply = () => {
     <div flex-none>
       <StatusActionButton
         :content="$t('action.bookmark')"
-        color="text-yellow" hover="text-yellow" group-hover="bg-yellow/10"
+        color="text-yellow" hover="text-yellow" elk-group-hover="bg-yellow/10"
         icon="i-ri:bookmark-line"
         active-icon="i-ri:bookmark-fill"
         :active="!!status.bookmarked"
diff --git a/components/status/StatusActionsMore.vue b/components/status/StatusActionsMore.vue
index b1b9d2c0..d957dd7d 100644
--- a/components/status/StatusActionsMore.vue
+++ b/components/status/StatusActionsMore.vue
@@ -118,7 +118,7 @@ const showFavoritedAndBoostedBy = () => {
       :content="$t('action.more')"
       color="text-primary"
       hover="text-primary"
-      group-hover="bg-primary-light"
+      elk-group-hover="bg-primary-light"
       icon="i-ri:more-line"
       my--2
     />
diff --git a/components/tag/TagActionButton.vue b/components/tag/TagActionButton.vue
index 55f17b5a..4b0803cd 100644
--- a/components/tag/TagActionButton.vue
+++ b/components/tag/TagActionButton.vue
@@ -41,7 +41,7 @@ const toggleFollowTag = async () => {
     @click="toggleFollowTag()"
   >
     <CommonTooltip placement="bottom" :content="tag.following ? $t('tag.unfollow') : $t('tag.follow')">
-      <div rounded-full p2 group-hover="bg-orange/10" group-focus-visible="bg-orange/10" group-focus-visible:ring="2 current">
+      <div rounded-full p2 elk-group-hover="bg-orange/10" group-focus-visible="bg-orange/10" group-focus-visible:ring="2 current">
         <div :class="[tag.following ? 'i-ri:star-fill' : 'i-ri:star-line']" />
       </div>
     </CommonTooltip>
diff --git a/unocss.config.ts b/unocss.config.ts
index f32d04b9..848ac6d4 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -66,6 +66,7 @@ export default defineConfig({
 
       'timeline-title-style': 'text-primary text-lg font-bold',
     },
+    [/^elk-group-hover[:-](\S+)$/, ([,r]) => `media-mouse-group-hover-${r} group-active-${r}`],
   ],
   presets: [
     presetUno({