adjust favorites public ui

src/views/Favorites/FavoritesAvatar.vue

@@ -121,11 +121,14 @@
                                             >
                                         </div>
                                         <div class="group-item__bottom">
-                                            <Badge
-                                                :class="avatarGroupVisibilityColors[group.visibility]"
-                                                variant="outline">
-                                                {{ t(`view.favorite.visibility.${group.visibility}`) }}
-                                            </Badge>
+                                            <span class="group-item__visibility">
+                                                <span class="group-item__visibility-text">{{
+                                                    t(`view.favorite.visibility.${group.visibility}`)
+                                                }}</span>
+                                                <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 = {
-        public: 'text-green-500 border-green-500',
-        friends: 'text-cyan-500 border-cyan-500',
-        private: 'text-red-500 border-red-500'
+    const avatarGroupVisibilityDotColors = {
+        public: 'bg-green-500',
+        friends: 'bg-sky-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;