show private indicator for appropriate streams #255

Merged
talksik merged 5 commits from show-private-for-personal-streams into main 2026-06-09 19:38:52 +00:00
@@ -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<typeof h> => !!h);
const overflow = memberIds.length - shownMembers.length;
const overflow = othersIds.length - shownMembers.length;
return (
<Tooltip>
@@ -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 ? (
<>
<Globe className="size-3 text-white/50" />
<span>Everyone</span>
</>
) : isPrivate ? (
<>
<Lock className="size-3 text-white/50" />
<span>Private</span>
</>
) : (
<>
<AvatarGroup>
@@ -314,9 +328,9 @@ function MembersIndicator({
</button>
</TooltipTrigger>
<TooltipContent>
{visibility.mode === 'network'
{isNetworkWide
? `Everyone in ${network?.name ?? 'network'}`
: `${memberIds.length} ${memberIds.length === 1 ? 'member' : 'members'}`}
: `${allMemberIds.length} ${allMemberIds.length === 1 ? 'member' : 'members'}`}
</TooltipContent>
</Tooltip>
);