show private indicator for appropriate streams (#255)

* show private for sterams with no other members

* invalid calculation

* refactor: more readable code

* fix type error

* format

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 =
+  const isNetworkWide = visibility.mode === 'network';
-    visibility.mode === 'network'
+  const allMemberIds = isNetworkWide
-      ? humans.map((h) => h.id)
+    ? humans.map((h) => h.id)
-      : visibility.humanIds;
+    : visibility.humanIds;
-  const shownMembers = memberIds
+  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>
   );