From 3d3ad27ca09dbd7310276a54cf6949da031c1edc Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sun, 8 Mar 2026 20:12:34 +0900
Subject: [PATCH] clean up sidebar css

---
 src/styles/status-icon.css                    | 69 +++++++++++++++++++
 src/views/Sidebar/components/FriendItem.vue   | 20 ++++--
 .../Sidebar/components/FriendsSidebar.vue     | 27 +++++---
 .../Sidebar/components/GroupsSidebar.vue      | 19 +++--
 4 files changed, 114 insertions(+), 21 deletions(-)
 create mode 100644 src/styles/status-icon.css

diff --git a/src/styles/status-icon.css b/src/styles/status-icon.css
new file mode 100644
index 00000000..1469ca77
--- /dev/null
+++ b/src/styles/status-icon.css
@@ -0,0 +1,69 @@
+/*
+ * Status icon styles for avatar status indicator dots and mask cutouts.
+ */
+
+.status-icon::after {
+    position: absolute;
+    right: 0.75px;
+    bottom: 0.75px;
+    width: 9px;
+    height: 9px;
+    content: '';
+    background: var(--status-offline);
+    border-radius: 50%;
+}
+
+.status-icon.active::after {
+    background: var(--status-active);
+}
+
+.status-icon.online::after {
+    background: var(--status-online);
+}
+
+.status-icon.joinme::after {
+    background: var(--status-joinme);
+    mask-image: url(/images/masks/joinme.svg);
+}
+
+.status-icon.askme::after {
+    background: var(--status-askme);
+    mask-image: url(/images/masks/askme.svg);
+}
+
+.status-icon.busy::after {
+    background: var(--status-busy);
+    mask-image: url(/images/masks/busy.svg);
+}
+
+.status-icon.offline::after {
+    background: var(--status-offline);
+}
+
+.active img,
+.offline img {
+    filter: grayscale(1);
+}
+
+.friend-row:hover .active img,
+.friend-row:hover .offline img {
+    filter: none;
+}
+
+/* Avatar mask cutout for status dot */
+.status-icon img {
+    mask-image: url(/images/masks/usercutout.svg);
+}
+
+.status-icon.mobile img {
+    mask-image: url(/images/masks/usercutoutmobile.svg);
+}
+
+.status-icon.mobile::after {
+    right: -2px;
+    bottom: -0.5px;
+    width: 14px;
+    height: 14px;
+    border-radius: 0;
+    mask-image: url(/images/masks/phone.svg) !important;
+}
diff --git a/src/views/Sidebar/components/FriendItem.vue b/src/views/Sidebar/components/FriendItem.vue
index 730ec773..4180a3e6 100644
--- a/src/views/Sidebar/components/FriendItem.vue
+++ b/src/views/Sidebar/components/FriendItem.vue
@@ -1,8 +1,10 @@
 <template>
-    <div class="x-friend-item hover:bg-muted/50" @click="showUserDialog(friend.id)">
+    <div
+        class="box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:bg-muted/50 hover:rounded-lg"
+        @click="showUserDialog(friend.id)">
         <template v-if="friend.ref">
             <div
-                class="avatar"
+                class="relative inline-block flex-none size-9 mr-2.5"
                 :class="isFriendActiveOrOffline ? undefined : userStatusClass(friend.ref, friend.pendingOffline)">
                 <Avatar class="size-full rounded-full">
                     <AvatarImage :src="userImage(friend.ref, true)" class="object-cover" />
@@ -11,11 +13,17 @@
                     </AvatarFallback>
                 </Avatar>
             </div>
-            <div class="detail h-9 flex flex-col justify-between">
-                <span v-if="!hideNicknames && friend.$nickName" class="name" :style="{ color: friend.ref.$userColour }">
+            <div class="flex-1 overflow-hidden h-9 flex flex-col justify-between">
+                <span
+                    v-if="!hideNicknames && friend.$nickName"
+                    class="block truncate font-medium leading-[18px]"
+                    :style="{ color: friend.ref.$userColour }">
                     {{ friend.ref.displayName }} ({{ friend.$nickName }})
                 </span>
-                <span v-else class="name" :style="{ color: friend.ref.$userColour }"
+                <span
+                    v-else
+                    class="block truncate font-medium leading-[18px]"
+                    :style="{ color: friend.ref.$userColour }"
                     >{{ friend.ref.displayName
                     }}{{ isGroupByInstance && allFavoriteFriendIds.has(friend.id) ? ' ⭐' : '' }}</span
                 >
@@ -71,6 +79,8 @@
     import { useAppearanceSettingsStore, useFriendStore, useUserStore } from '../../../stores';
     import { userImage, userStatusClass } from '../../../shared/utils';
 
+    import '@/styles/status-icon.css';
+
     const props = defineProps({
         friend: { type: Object, required: true },
         isGroupByInstance: Boolean
diff --git a/src/views/Sidebar/components/FriendsSidebar.vue b/src/views/Sidebar/components/FriendsSidebar.vue
index 3f73fbba..8405b249 100644
--- a/src/views/Sidebar/components/FriendsSidebar.vue
+++ b/src/views/Sidebar/components/FriendsSidebar.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="relative h-full">
         <div ref="scrollViewportRef" class="h-full w-full overflow-auto">
-            <div class="x-friend-list px-1.5 py-2.5">
+            <div class="px-1.5 py-2.5">
                 <div v-if="virtualRows.length" class="relative w-full box-border" :style="virtualContainerStyle">
                     <template v-for="item in virtualItems" :key="String(item.virtualItem.key)">
                         <div
@@ -12,7 +12,7 @@
                             :style="rowStyle(item)">
                             <template v-if="item.row.type === 'toggle-header'">
                                 <div
-                                    class="x-friend-group flex cursor-pointer items-center pt-4 pb-1.5 text-xs"
+                                    class="flex cursor-pointer items-center pt-4 pb-1.5 text-xs"
                                     :style="item.row.headerPadding ? { padding: item.row.headerPadding } : undefined"
                                     @click="item.row.onClick && item.row.onClick()">
                                     <ChevronDown
@@ -31,15 +31,22 @@
                                 <ContextMenu>
                                     <ContextMenuTrigger as-child>
                                         <div
-                                            class="x-friend-item hover:bg-muted/50"
+                                            class="friend-row box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:bg-muted/50 hover:rounded-lg"
                                             @click="showUserDialog(currentUser.id)">
-                                            <div class="avatar" :class="userStatusClass(currentUser)">
-                                                <img :src="userImage(currentUser)" loading="lazy" />
+                                            <div
+                                                class="relative inline-block flex-none size-9 mr-2.5"
+                                                :class="userStatusClass(currentUser)">
+                                                <img
+                                                    class="size-full rounded-full object-cover"
+                                                    :src="userImage(currentUser)"
+                                                    loading="lazy" />
                                             </div>
-                                            <div class="detail h-9 flex flex-col justify-between">
-                                                <span class="name" :style="{ color: currentUser.$userColour }">{{
-                                                    currentUser.displayName
-                                                }}</span>
+                                            <div class="flex-1 overflow-hidden h-9 flex flex-col justify-between">
+                                                <span
+                                                    class="block truncate font-medium leading-[18px]"
+                                                    :style="{ color: currentUser.$userColour }"
+                                                    >{{ currentUser.displayName }}</span
+                                                >
                                                 <Location
                                                     v-if="isGameRunning && !gameLogDisabled"
                                                     class="extra block truncate text-xs"
@@ -208,6 +215,8 @@
     import Location from '../../../components/Location.vue';
     import configRepository from '../../../service/config';
 
+    import '@/styles/status-icon.css';
+
     const { t } = useI18n();
 
     const friendStore = useFriendStore();
diff --git a/src/views/Sidebar/components/GroupsSidebar.vue b/src/views/Sidebar/components/GroupsSidebar.vue
index 0fd8b102..f42f0e63 100644
--- a/src/views/Sidebar/components/GroupsSidebar.vue
+++ b/src/views/Sidebar/components/GroupsSidebar.vue
@@ -1,7 +1,7 @@
 <template>
     <div ref="scrollRootRef" class="relative h-full">
         <div ref="scrollViewportRef" class="h-full w-full overflow-auto">
-            <div class="x-friend-list px-1.5 py-2.5">
+            <div class="px-1.5 py-2.5">
                 <div v-if="virtualRows.length" class="relative w-full box-border" :style="virtualContainerStyle">
                     <template v-for="item in virtualItems" :key="String(item.virtualItem.key)">
                         <div
@@ -12,7 +12,7 @@
                             :style="rowStyle(item)">
                             <template v-if="item.row.type === 'group-header'">
                                 <div
-                                    class="x-friend-group cursor-pointer pt-4 pb-1.5 text-xs"
+                                    class="cursor-pointer pt-4 pb-1.5 text-xs"
                                     :style="
                                         item.row.headerPaddingTop
                                             ? { paddingTop: item.row.headerPaddingTop }
@@ -32,13 +32,18 @@
                             <template v-else-if="item.row.type === 'group-item'">
                                 <ContextMenu>
                                     <ContextMenuTrigger as-child>
-                                        <div class="x-friend-item" @click="showGroupDialog(item.row.ownerId)">
+                                        <div
+                                            class="box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:bg-muted/50 hover:rounded-lg"
+                                            @click="showGroupDialog(item.row.ownerId)">
                                             <template v-if="item.row.isVisible">
-                                                <div class="avatar">
-                                                    <img :src="getSmallGroupIconUrl(item.row.iconUrl)" loading="lazy" />
+                                                <div class="relative inline-block flex-none size-9 mr-2.5">
+                                                    <img
+                                                        class="size-full rounded-full object-cover"
+                                                        :src="getSmallGroupIconUrl(item.row.iconUrl)"
+                                                        loading="lazy" />
                                                 </div>
-                                                <div class="detail">
-                                                    <span class="name">
+                                                <div class="flex-1 overflow-hidden">
+                                                    <span class="block truncate font-medium leading-[18px]">
                                                         <span v-text="item.row.name"></span>
                                                         <span class="ml-1.5 font-normal">
                                                             ({{ item.row.userCount }}/{{ item.row.capacity }})