From c72209f56d3cce032a60c70080f8d2177affe669 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Wed, 11 Mar 2026 22:24:00 +0900
Subject: [PATCH] fix style

---
 .../components/FavoritesAvatarItem.vue        | 39 +++++++++++++------
 .../FavoritesAvatarLocalHistoryItem.vue       | 37 ++++++++++++------
 .../components/FavoritesFriendItem.vue        | 19 ++++++++-
 .../components/FavoritesWorldItem.vue         | 37 ++++++++++++------
 .../components/FriendsLocationsCard.vue       |  5 ++-
 5 files changed, 100 insertions(+), 37 deletions(-)

diff --git a/src/views/Favorites/components/FavoritesAvatarItem.vue b/src/views/Favorites/components/FavoritesAvatarItem.vue
index ee9ed2ec..839018d4 100644
--- a/src/views/Favorites/components/FavoritesAvatarItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarItem.vue
@@ -2,17 +2,21 @@
     <template v-if="localFavFakeRef">
         <ContextMenu>
             <ContextMenuTrigger as-child>
-                <Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleViewDetails">
+                <Item
+                    variant="outline"
+                    class="favorites-item cursor-pointer hover:bg-muted x-hover-list"
+                    :style="itemStyle"
+                    @click="handleViewDetails">
                     <ItemMedia variant="image">
-                        <img
-                            v-if="smallThumbnail"
-                            :src="smallThumbnail"
-                            loading="lazy"
-                            decoding="async"
-                            fetchpriority="low"
-                            class="object-cover" />
-                        <Avatar v-else>
-                            <AvatarFallback>{{ avatarFallback }}</AvatarFallback>
+                        <Avatar class="rounded-sm size-full">
+                            <AvatarImage
+                                v-if="smallThumbnail"
+                                :src="smallThumbnail"
+                                loading="lazy"
+                                decoding="async"
+                                fetchpriority="low"
+                                class="rounded-sm object-cover" />
+                            <AvatarFallback class="rounded-sm">{{ avatarFallback }}</AvatarFallback>
                         </Avatar>
                     </ItemMedia>
                     <ItemContent class="min-w-0">
@@ -79,7 +83,7 @@
         </ContextMenu>
     </template>
     <template v-else>
-        <Item variant="outline" :style="itemStyle">
+        <Item variant="outline" class="favorites-item hover:bg-muted x-hover-list" :style="itemStyle">
             <ItemMedia variant="image" />
             <ItemContent class="min-w-0">
                 <ItemTitle class="truncate max-w-full">{{ favorite.name || favorite.id }}</ItemTitle>
@@ -95,7 +99,7 @@
 
 <script setup>
     import { AlertTriangle, Lock, MoreHorizontal, Trash2 } from 'lucide-vue-next';
-    import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+    import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
     import {
@@ -199,3 +203,14 @@
         favoriteRequest.deleteFavorite({ objectId: props.favorite.id });
     }
 </script>
+
+<style scoped>
+    .favorites-item :deep(img) {
+        filter: saturate(0.8) contrast(0.8);
+        transition: filter 0.2s ease;
+    }
+
+    .favorites-item:hover :deep(img) {
+        filter: saturate(1) contrast(1);
+    }
+</style>
diff --git a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
index aa52727b..b380bbc2 100644
--- a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
@@ -1,17 +1,21 @@
 <template>
     <ContextMenu>
         <ContextMenuTrigger as-child>
-            <Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleViewDetails">
+            <Item
+                variant="outline"
+                class="favorites-item cursor-pointer hover:bg-muted x-hover-list"
+                :style="itemStyle"
+                @click="handleViewDetails">
                 <ItemMedia variant="image">
-                    <img
-                        v-if="smallThumbnail"
-                        :src="smallThumbnail"
-                        loading="lazy"
-                        decoding="async"
-                        fetchpriority="low"
-                        class="object-cover" />
-                    <Avatar v-else>
-                        <AvatarFallback>{{ avatarFallback }}</AvatarFallback>
+                    <Avatar class="rounded-sm size-full">
+                        <AvatarImage
+                            v-if="smallThumbnail"
+                            :src="smallThumbnail"
+                            loading="lazy"
+                            decoding="async"
+                            fetchpriority="low"
+                            class="rounded-sm object-cover" />
+                        <AvatarFallback class="rounded-sm">{{ avatarFallback }}</AvatarFallback>
                     </Avatar>
                 </ItemMedia>
                 <ItemContent class="min-w-0">
@@ -62,7 +66,7 @@
 
 <script setup>
     import { MoreHorizontal } from 'lucide-vue-next';
-    import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+    import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { Button } from '@/components/ui/button';
     import {
         ContextMenu,
@@ -120,3 +124,14 @@
         showAvatarDialog(props.favorite.id);
     }
 </script>
+
+<style scoped>
+    .favorites-item :deep(img) {
+        filter: saturate(0.8) contrast(0.8);
+        transition: filter 0.2s ease;
+    }
+
+    .favorites-item:hover :deep(img) {
+        filter: saturate(1) contrast(1);
+    }
+</style>
diff --git a/src/views/Favorites/components/FavoritesFriendItem.vue b/src/views/Favorites/components/FavoritesFriendItem.vue
index a0d2f399..6aad4b8e 100644
--- a/src/views/Favorites/components/FavoritesFriendItem.vue
+++ b/src/views/Favorites/components/FavoritesFriendItem.vue
@@ -2,7 +2,11 @@
     <template v-if="favorite.ref">
         <ContextMenu>
             <ContextMenuTrigger as-child>
-                <Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleOpenProfile">
+                <Item
+                    variant="outline"
+                    class="favorites-item cursor-pointer hover:bg-muted x-hover-list"
+                    :style="itemStyle"
+                    @click="handleOpenProfile">
                     <ItemMedia variant="image">
                         <Avatar>
                             <AvatarImage :src="userImage(favorite.ref, true)" loading="lazy" />
@@ -107,7 +111,7 @@
         </ContextMenu>
     </template>
     <template v-else>
-        <Item variant="outline" :style="itemStyle">
+        <Item variant="outline" class="favorites-item hover:bg-muted x-hover-list" :style="itemStyle">
             <ItemMedia variant="image">
                 <Avatar>
                     <AvatarFallback>{{ avatarFallback }}</AvatarFallback>
@@ -303,3 +307,14 @@
         }
     }
 </script>
+
+<style scoped>
+    .favorites-item :deep(img) {
+        filter: saturate(0.8) contrast(0.8);
+        transition: filter 0.2s ease;
+    }
+
+    .favorites-item:hover :deep(img) {
+        filter: saturate(1) contrast(1);
+    }
+</style>
diff --git a/src/views/Favorites/components/FavoritesWorldItem.vue b/src/views/Favorites/components/FavoritesWorldItem.vue
index 79fa111c..257b3a49 100644
--- a/src/views/Favorites/components/FavoritesWorldItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldItem.vue
@@ -1,17 +1,21 @@
 <template>
     <ContextMenu>
         <ContextMenuTrigger as-child>
-            <Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleViewDetails">
+            <Item
+                variant="outline"
+                class="favorites-item cursor-pointer hover:bg-muted x-hover-list"
+                :style="itemStyle"
+                @click="handleViewDetails">
                 <ItemMedia variant="image">
-                    <img
-                        v-if="smallThumbnail"
-                        :src="smallThumbnail"
-                        loading="lazy"
-                        decoding="async"
-                        fetchpriority="low"
-                        class="object-cover" />
-                    <Avatar v-else>
-                        <AvatarFallback>{{ avatarFallback }}</AvatarFallback>
+                    <Avatar class="rounded-sm size-full">
+                        <AvatarImage
+                            v-if="smallThumbnail"
+                            :src="smallThumbnail"
+                            loading="lazy"
+                            decoding="async"
+                            fetchpriority="low"
+                            class="rounded-sm object-cover" />
+                        <AvatarFallback class="rounded-sm">{{ avatarFallback }}</AvatarFallback>
                     </Avatar>
                 </ItemMedia>
                 <ItemContent class="min-w-0">
@@ -90,7 +94,7 @@
         DropdownMenuSeparator,
         DropdownMenuTrigger
     } from '@/components/ui/dropdown-menu';
-    import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+    import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
     import { computed } from 'vue';
     import { useI18n } from 'vue-i18n';
@@ -181,3 +185,14 @@
         favoriteRequest.deleteFavorite({ objectId: props.favorite.id });
     }
 </script>
+
+<style scoped>
+    .favorites-item :deep(img) {
+        filter: saturate(0.8) contrast(0.8);
+        transition: filter 0.2s ease;
+    }
+
+    .favorites-item:hover :deep(img) {
+        filter: saturate(1) contrast(1);
+    }
+</style>
diff --git a/src/views/FriendsLocations/components/FriendsLocationsCard.vue b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
index 9885f685..fac656bf 100644
--- a/src/views/FriendsLocations/components/FriendsLocationsCard.vue
+++ b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
@@ -1,7 +1,10 @@
 <template>
     <ContextMenu>
         <ContextMenuTrigger as-child>
-            <Card class="friend-card x-hover-card relative" :style="cardStyle" @click="showUserDialog(friend.id)">
+            <Card
+                class="friend-card x-hover-card hover:bg-muted relative"
+                :style="cardStyle"
+                @click="showUserDialog(friend.id)">
                 <div class="friend-card__header grid items-center mb-1.75">
                     <div>
                         <Avatar :style="{ width: `${avatarSize}px`, height: `${avatarSize}px` }">