diff --git a/js/desktop/src/features/particles/stream-top-bar.tsx b/js/desktop/src/features/particles/stream-top-bar.tsx index 97f0f25..e5cca4b 100644 --- a/js/desktop/src/features/particles/stream-top-bar.tsx +++ b/js/desktop/src/features/particles/stream-top-bar.tsx @@ -24,6 +24,7 @@ import { CircleDot, EllipsisVertical, Pencil, + Lock, Globe, Trash2, } from 'lucide-react'; @@ -271,17 +272,25 @@ function MembersIndicator({ }) { const network = useNetwork(networkId); const visibility = parseVisibleTo(streamParticle.visible_to, networkId); + + const userId = useAuthStore((s) => s.user?.id); const humans = network?.humans ?? []; - const memberIds = - visibility.mode === 'network' - ? humans.map((h) => h.id) - : visibility.humanIds; - const shownMembers = memberIds + const isNetworkWide = visibility.mode === 'network'; + const allMemberIds = isNetworkWide + ? humans.map((h) => h.id) + : visibility.humanIds; + const othersIds = isNetworkWide + ? [] + : allMemberIds.filter((id) => id != userId); + + const isPrivate = othersIds.length == 0; + + const shownMembers = othersIds .slice(0, 3) .map((id) => humans.find((h) => h.id === id)) .filter((h): h is NonNullable => !!h); - const overflow = memberIds.length - shownMembers.length; + const overflow = othersIds.length - shownMembers.length; return ( @@ -290,11 +299,16 @@ function MembersIndicator({ onClick={onClick} className="no-drag flex items-center gap-1.5 rounded-full bg-white/5 px-2 py-1 text-xs text-white/70 backdrop-blur-sm transition-colors hover:bg-white/10" > - {visibility.mode === 'network' ? ( + {isNetworkWide ? ( <> Everyone + ) : isPrivate ? ( + <> + + Private + ) : ( <> @@ -314,9 +328,9 @@ function MembersIndicator({ - {visibility.mode === 'network' + {isNetworkWide ? `Everyone in ${network?.name ?? 'network'}` - : `${memberIds.length} ${memberIds.length === 1 ? 'member' : 'members'}`} + : `${allMemberIds.length} ${allMemberIds.length === 1 ? 'member' : 'members'}`} );