adjust favorites public ui

src/views/Favorites/FavoritesAvatar.vue

@@ -121,11 +121,14 @@
                                             >
                                         </div>
                                         <div class="group-item__bottom">
-                                            <Badge
+                                            <span class="group-item__visibility">
-                                                :class="avatarGroupVisibilityColors[group.visibility]"
+                                                <span class="group-item__visibility-text">{{
-                                                variant="outline">
+                                                    t(`view.favorite.visibility.${group.visibility}`)
-                                                {{ t(`view.favorite.visibility.${group.visibility}`) }}
+                                                }}</span>
-                                            </Badge>
+                                                <span
+                                                    class="group-item__visibility-dot"
+                                                    :class="avatarGroupVisibilityDotColors[group.visibility]"></span>
+                                            </span>
                                             <DropdownMenu
                                                 :open="activeGroupMenu === remoteGroupMenuKey(group.key)"
                                                 @update:open="
@@ -556,7 +559,6 @@
     } from '../../stores';
     import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
     import { avatarRequest, favoriteRequest } from '../../api';
-    import { Badge } from '../../components/ui/badge';
     import { Slider } from '../../components/ui/slider';
     import { Switch } from '../../components/ui/switch';
     import { debounce } from '../../shared/utils';
@@ -575,10 +577,10 @@
         displayName: `Group ${index + 1}`
     }));
 
-    const avatarGroupVisibilityColors = {
+    const avatarGroupVisibilityDotColors = {
-        public: 'text-green-500 border-green-500',
+        public: 'bg-green-500',
-        friends: 'text-cyan-500 border-cyan-500',
+        friends: 'bg-sky-500',
-        private: 'text-red-500 border-red-500'
+        private: 'bg-red-500'
     };
     const avatarGroupVisibilityOptions = ref(['public', 'friends', 'private']);
     const historyGroupKey = 'local-history';
@@ -720,17 +722,6 @@
         loadAvatarSplitterPreferences();
     });
 
-    function getBadgeVariant(visibility) {
-        switch (visibility) {
-            case 'public':
-                return 'default';
-            case 'friends':
-                return 'secondary';
-            case 'private':
-                return 'destructive';
-        }
-    }
-
     async function loadAvatarSplitterPreferences() {
         const storedSize = await configRepository.getString('VRCX_FavoritesAvatarSplitter', '260');
         const parsedSize = Number(storedSize);
@@ -1619,6 +1610,24 @@
         gap: 8px;
     }
 
+    .group-item__visibility {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+    }
+
+    .group-item__visibility-text {
+        font-size: 11px;
+        color: var(--muted-foreground);
+    }
+
+    .group-item__visibility-dot {
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+
     .group-item--placeholder {
         pointer-events: none;
         opacity: 0.7;

src/views/Favorites/FavoritesFriend.vue

@@ -123,9 +123,14 @@
                                             >
                                         </div>
                                         <div class="group-item__bottom">
-                                            <Badge variant="outline">
+                                            <span class="group-item__visibility">
-                                                {{ t(`view.favorite.visibility.${group.visibility}`) }}
+                                                <span class="group-item__visibility-text">{{
-                                            </Badge>
+                                                    t(`view.favorite.visibility.${group.visibility}`)
+                                                }}</span>
+                                                <span
+                                                    class="group-item__visibility-dot"
+                                                    :class="friendGroupVisibilityDotColors[group.visibility]"></span>
+                                            </span>
                                             <DropdownMenu
                                                 :open="activeGroupMenu === remoteGroupMenuKey(group.key)"
                                                 @update:open="
@@ -451,7 +456,6 @@
     import { useAppearanceSettingsStore, useFavoriteStore, useModalStore, useUserStore } from '../../stores';
     import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
     import { debounce, userImage } from '../../shared/utils';
-    import { Badge } from '../../components/ui/badge';
     import { Slider } from '../../components/ui/slider';
     import { Switch } from '../../components/ui/switch';
     import { favoriteRequest } from '../../api';
@@ -462,10 +466,10 @@
     import configRepository from '../../service/config.js';
 
     const friendGroupVisibilityOptions = ref(['public', 'friends', 'private']);
-    const friendGroupVisibilitColors = {
+    const friendGroupVisibilityDotColors = {
-        public: 'text-green-500 border-green-500',
+        public: 'bg-green-500',
-        friends: 'text-cyan-500 border-cyan-500',
+        friends: 'bg-sky-500',
-        private: 'text-red-500 border-red-500'
+        private: 'bg-red-500'
     };
 
     const friendSplitterSize = ref(260);
@@ -1264,6 +1268,24 @@
         gap: 8px;
     }
 
+    .group-item__visibility {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+    }
+
+    .group-item__visibility-text {
+        font-size: 11px;
+        color: var(--muted-foreground);
+    }
+
+    .group-item__visibility-dot {
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+
     .group-item.is-active {
     }
 

src/views/Favorites/FavoritesWorld.vue

@@ -123,9 +123,14 @@
                                             >
                                         </div>
                                         <div class="group-item__bottom">
-                                            <Badge variant="outline">
+                                            <span class="group-item__visibility">
-                                                {{ t(`view.favorite.visibility.${group.visibility}`) }}
+                                                <span class="group-item__visibility-text">{{
-                                            </Badge>
+                                                    t(`view.favorite.visibility.${group.visibility}`)
+                                                }}</span>
+                                                <span
+                                                    class="group-item__visibility-dot"
+                                                    :class="worldGroupVisibilityDotColors[group.visibility]"></span>
+                                            </span>
                                             <DropdownMenu
                                                 :open="activeGroupMenu === remoteGroupMenuKey(group.key)"
                                                 @update:open="
@@ -487,7 +492,6 @@
     import { useAppearanceSettingsStore, useFavoriteStore, useModalStore, useWorldStore } from '../../stores';
     import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
     import { favoriteRequest, worldRequest } from '../../api';
-    import { Badge } from '../../components/ui/badge';
     import { Slider } from '../../components/ui/slider';
     import { Switch } from '../../components/ui/switch';
     import { debounce } from '../../shared/utils';
@@ -578,10 +582,10 @@
             }
         }
     });
-    const worldGroupVisibilityColors = {
+    const worldGroupVisibilityDotColors = {
-        public: 'text-green-500 border-green-500',
+        public: 'bg-green-500',
-        friends: 'text-cyan-500 border-cyan-500',
+        friends: 'bg-sky-500',
-        private: 'text-red-500 border-red-500'
+        private: 'bg-red-500'
     };
     const worldGroupVisibilityOptions = ref(['public', 'friends', 'private']);
     const worldSplitterSize = ref(260);
@@ -633,17 +637,6 @@
         loadWorldSplitterPreferences();
     });
 
-    function getBadgeVariant(visibility) {
-        switch (visibility) {
-            case 'public':
-                return 'default';
-            case 'friends':
-                return 'secondary';
-            case 'private':
-                return 'destructive';
-        }
-    }
-
     async function loadWorldSplitterPreferences() {
         const storedSize = await configRepository.getString('VRCX_FavoritesWorldSplitter', '260');
         const parsedSize = Number(storedSize);
@@ -1495,6 +1488,24 @@
         gap: 8px;
     }
 
+    .group-item__visibility {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+    }
+
+    .group-item__visibility-text {
+        font-size: 11px;
+        color: var(--muted-foreground);
+    }
+
+    .group-item__visibility-dot {
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+
     .group-item.is-active {
     }