diff --git a/js/src/components/composing-indicator.tsx b/js/src/components/composing-indicator.tsx index 8c22b51..d53e3c4 100644 --- a/js/src/components/composing-indicator.tsx +++ b/js/src/components/composing-indicator.tsx @@ -1,4 +1,5 @@ import type { Human } from "@/api/types"; +import { resolveHumanDisplay } from "@/lib/humans"; import type { ComposingUser } from "@/features/particles/stream-presence-context"; interface ComposingIndicatorProps { @@ -22,8 +23,7 @@ export function ComposingIndicator({ style={{ writingMode: "vertical-rl" }} > {users.map((u) => { - const human = networkHumans?.find((h) => h.id === u.humanId); - const name = human?.email_prefix ?? u.humanId; + const { displayName } = resolveHumanDisplay(u.humanId, networkHumans); const modeLabel = u.mode === "typing" ? "typing" : "recording"; return ( @@ -37,7 +37,7 @@ export function ComposingIndicator({ - {name} {modeLabel} + {displayName} {modeLabel} ); diff --git a/js/src/features/particles/deleted-particle-view.tsx b/js/src/features/particles/deleted-particle-view.tsx index 885bd1a..8244aea 100644 --- a/js/src/features/particles/deleted-particle-view.tsx +++ b/js/src/features/particles/deleted-particle-view.tsx @@ -2,6 +2,7 @@ import { useEffect } from "react"; import { Trash2 } from "lucide-react"; import type { Particle } from "@/api/types"; import { useNetwork } from "@/hooks/use-networks"; +import { resolveHumanDisplay } from "@/lib/humans"; // How long to linger on a tombstone before auto-advancing. Matches the // "reading" cadence of a short text particle. @@ -24,8 +25,8 @@ export function DeletedParticleView({ const deleterId = "deleted_by_human_id" in particle ? particle.deleted_by_human_id : undefined; const deleter = deleterId - ? network?.humans?.find((h) => h.id === deleterId) - : undefined; + ? resolveHumanDisplay(deleterId, network?.humans) + : null; useEffect(() => { if (paused) return; @@ -42,7 +43,7 @@ export function DeletedParticleView({ This particle was deleted

{deleter && ( -

by {deleter.email_prefix}

+

by {deleter.displayName}

)} diff --git a/js/src/features/particles/fallback-particle-view.tsx b/js/src/features/particles/fallback-particle-view.tsx index 46bcfcc..2561b4f 100644 --- a/js/src/features/particles/fallback-particle-view.tsx +++ b/js/src/features/particles/fallback-particle-view.tsx @@ -7,6 +7,8 @@ import { CardTitle, } from "@/components/ui/card"; import { FileIcon, HelpCircleIcon, ScrollTextIcon, BookOpenIcon } from "lucide-react"; +import { useNetwork } from "@/hooks/use-networks"; +import { resolveHumanDisplay } from "@/lib/humans"; const TYPE_META: Record = { quest: { icon: ScrollTextIcon, label: "Quest" }, @@ -16,9 +18,12 @@ const TYPE_META: Record = { interface FallbackParticleViewProps { particle: Particle; + networkId: string; } -export function FallbackParticleView({ particle }: FallbackParticleViewProps) { +export function FallbackParticleView({ particle, networkId }: FallbackParticleViewProps) { + const network = useNetwork(networkId); + const creator = resolveHumanDisplay(particle.created_by_human_id, network?.humans); const meta = TYPE_META[particle.type] ?? { icon: HelpCircleIcon, label: particle.type, @@ -51,7 +56,7 @@ export function FallbackParticleView({ particle }: FallbackParticleViewProps) {

- From {particle.created_by_human_id} + From {creator.displayName}

diff --git a/js/src/features/particles/particle-list-view.tsx b/js/src/features/particles/particle-list-view.tsx index ae9d1a4..9b06cce 100644 --- a/js/src/features/particles/particle-list-view.tsx +++ b/js/src/features/particles/particle-list-view.tsx @@ -18,6 +18,7 @@ import { useLiveLatestChild } from "@/hooks/use-particle"; import { useAuthStore } from "@/stores/auth-store"; import { particlePath } from "@/lib/particle-path"; import { getInitials } from "@/lib/utils"; +import { resolveHumanDisplay } from "@/lib/humans"; import { RelativeTimestamp } from "@/components/relative-timestamp"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Separator } from "@/components/ui/separator"; @@ -174,9 +175,11 @@ const StreamRow = memo(function StreamRow({ } // Group stream if (isCurrentUser) return "You: "; - const creator = network?.humans?.find((h) => h.id === latestChild.created_by_human_id); - const name = creator?.email_prefix ?? latestChild.created_by_human_id; - const capitalized = name.charAt(0).toUpperCase() + name.slice(1); + const { displayName } = resolveHumanDisplay( + latestChild.created_by_human_id, + network?.humans, + ); + const capitalized = displayName.charAt(0).toUpperCase() + displayName.slice(1); return `${capitalized}: `; }, [latestChild, userId, isDM, network]); diff --git a/js/src/features/particles/particle-view-resolver.tsx b/js/src/features/particles/particle-view-resolver.tsx index 7c984a1..36a1c7b 100644 --- a/js/src/features/particles/particle-view-resolver.tsx +++ b/js/src/features/particles/particle-view-resolver.tsx @@ -1,6 +1,10 @@ -import { useParams } from "react-router-dom"; +import { useEffect } from "react"; +import { useNavigate, useParams } from "react-router-dom"; +import { useQueryClient } from "@tanstack/react-query"; +import { Lock } from "lucide-react"; import { useLiveParticle } from "@/hooks/use-particle"; import { particlePath } from "@/lib/particle-path"; +import { Button } from "@/components/ui/button"; import { StreamView } from "@/features/particles/stream-view"; import { FolderView } from "@/features/particles/folder-view"; @@ -26,22 +30,11 @@ export default function ParticleViewResolver() { ); } - if (error) { - return ( -
-

Failed to load particle

-
- ); - } - - if (!particle) { - return ( -
-

- Particle: {segments.join(" / ")} -

-
- ); + if (error || !particle) { + // Errors here are almost always Firestore permission-denied — the user lost + // access to the network or to a custom-visibility particle. The React Router + // stays on the dead route, so without an explicit escape the user is stuck. + return ; } switch (particle.type) { @@ -59,3 +52,28 @@ export default function ParticleViewResolver() { ); } } + +function InaccessibleParticle() { + const navigate = useNavigate(); + const queryClient = useQueryClient(); + + useEffect(() => { + // Refresh the networks list so the home page reflects current access. + queryClient.invalidateQueries({ queryKey: ["networks"] }); + }, [queryClient]); + + return ( +
+ +
+

This particle isn't available

+

+ It may have been deleted, or your access was removed. +

+
+ +
+ ); +} diff --git a/js/src/features/particles/reaction-bar.tsx b/js/src/features/particles/reaction-bar.tsx index 2c9bdf3..d04c077 100644 --- a/js/src/features/particles/reaction-bar.tsx +++ b/js/src/features/particles/reaction-bar.tsx @@ -3,6 +3,7 @@ import { Plus, X } from "lucide-react"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { REACTION_EMOJIS, type Reactions } from "@/api/types"; import { cn } from "@/lib/utils"; +import { resolveHumanDisplay } from "@/lib/humans"; import type { Human } from "@/api/types"; interface ReactionBarProps { @@ -17,10 +18,7 @@ function getReactorNames( humans?: Human[], ): string { return humanIds - .map((id) => { - const human = humans?.find((h) => h.id === id); - return human?.email_prefix ?? id; - }) + .map((id) => resolveHumanDisplay(id, humans).displayName) .join(", "); } diff --git a/js/src/features/particles/stream-members-overlay.tsx b/js/src/features/particles/stream-members-overlay.tsx index f9ba7e2..c95a089 100644 --- a/js/src/features/particles/stream-members-overlay.tsx +++ b/js/src/features/particles/stream-members-overlay.tsx @@ -12,6 +12,7 @@ import { updateParticleVisibleTo } from "@/lib/firestore-particles"; import { particlePath, toFirestoreDocPath } from "@/lib/particle-path"; import { useNetwork } from "@/hooks/use-networks"; import { cn, getInitials } from "@/lib/utils"; +import { resolveHumanDisplay } from "@/lib/humans"; import type { Particle } from "@/api/types"; import { usePlaybackSuspenderStore } from "@/stores/playback-suspender-store"; @@ -158,7 +159,7 @@ export function StreamMembersOverlay({
    {memberIds.map((id) => { - const human = humans.find((h) => h.id === id); + const display = resolveHumanDisplay(id, humans); const isCreatorRow = id === creatorId; const canRemove = isCreator && visibility.mode === "custom" && !isCreatorRow; @@ -169,11 +170,16 @@ export function StreamMembersOverlay({ > - {human ? getInitials(human.email) : "?"} + {display.initials} - - {human?.email_prefix ?? id} + + {display.displayName} {isCreatorRow && ( @@ -185,7 +191,7 @@ export function StreamMembersOverlay({ type="button" onClick={() => removeMember(id)} className="rounded p-1 text-white/30 opacity-0 transition-opacity hover:bg-white/10 hover:text-white/70 group-hover:opacity-100" - aria-label={`Remove ${human?.email_prefix ?? id}`} + aria-label={`Remove ${display.displayName}`} > diff --git a/js/src/features/particles/stream-top-bar.tsx b/js/src/features/particles/stream-top-bar.tsx index 3dc0fb4..f028032 100644 --- a/js/src/features/particles/stream-top-bar.tsx +++ b/js/src/features/particles/stream-top-bar.tsx @@ -24,7 +24,7 @@ import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbS import { WindowControls } from "@/components/window-controls"; import { RelativeTimestamp } from "@/components/relative-timestamp"; import { useStreamPresence } from "@/features/particles/stream-presence-context"; -import { getInitials } from "@/lib/utils"; +import { resolveHumanDisplay } from "@/lib/humans"; function getParticleDisplayName(particle: Particle): string { switch (particle.type) { @@ -112,18 +112,17 @@ export function TopBar({ networkId, particle, streamParticle }: TopBarProps) { {huddleParticipants.map((humanId) => { - const human = network?.humans?.find((h) => h.id === humanId); - const initials = human ? getInitials(human.email) : "?"; + const display = resolveHumanDisplay(humanId, network?.humans); return ( - {initials} + {display.initials} - {human?.email ?? humanId} + {display.email} ); })} @@ -267,7 +266,7 @@ function MembersIndicator({ {shownMembers.map((human) => ( - {getInitials(human.email)} + {resolveHumanDisplay(human.id, humans).initials} ))} @@ -289,19 +288,17 @@ function MembersIndicator({ function ParticleBreadcrumbContent({ particle, networkId }: { particle: Particle; networkId: string }) { const network = useNetwork(networkId); const { onlineHumanIds } = useStreamPresence(); - const creator = network?.humans?.find((h) => h.id === particle.created_by_human_id); - const prefix = creator?.email_prefix ?? particle.created_by_human_id; - const initials = prefix.slice(0, 2).toUpperCase(); + const display = resolveHumanDisplay(particle.created_by_human_id, network?.humans); const isOnline = particle.created_by_human_id ? onlineHumanIds.has(particle.created_by_human_id) : false; return ( - {initials} + {display.initials} - {prefix} - + {display.displayName} - ); } diff --git a/js/src/features/particles/stream-view.tsx b/js/src/features/particles/stream-view.tsx index ba8f83e..3bfe371 100644 --- a/js/src/features/particles/stream-view.tsx +++ b/js/src/features/particles/stream-view.tsx @@ -405,7 +405,7 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) { /> ); default: - return ; + return ; } } diff --git a/js/src/hooks/use-stream-autoplay.ts b/js/src/hooks/use-stream-autoplay.ts index 7a74433..16f8235 100644 --- a/js/src/hooks/use-stream-autoplay.ts +++ b/js/src/hooks/use-stream-autoplay.ts @@ -4,7 +4,7 @@ import type { Network, Particle, StreamProperties } from "@/api/types"; import { apiClient } from "@/api/client"; import { useAuthStore } from "@/stores/auth-store"; import { useAutoplayStore } from "@/stores/autoplay-store"; -import { getInitials } from "@/lib/utils"; +import { resolveHumanDisplay } from "@/lib/humans"; /** * Triggers autoplay when a stream's latest child changes to a new media particle. @@ -44,9 +44,10 @@ export function useStreamAutoplay( if (latestChild.type !== "media") return; const particle = latestChild; - const creator = network?.humans?.find((h) => h.id === particle.created_by_human_id); - const senderName = creator?.email_prefix ?? particle.created_by_human_id; - const senderInitials = creator ? getInitials(creator.email) : particle.created_by_human_id.slice(0, 2).toUpperCase(); + const { displayName, initials } = resolveHumanDisplay( + particle.created_by_human_id, + network?.humans, + ); apiClient.getParticleDownloadUrl(particle.properties.object_id).then((downloadUrl) => { window.electronAutoplay.play({ @@ -56,8 +57,8 @@ export function useStreamAutoplay( downloadUrl, mimeType: particle.properties.mime_type, durationMs: particle.properties.duration_ms, - senderName, - senderInitials, + senderName: displayName, + senderInitials: initials, }); }).catch(() => { // Failed to get download URL — skip autoplay silently diff --git a/js/src/lib/humans.ts b/js/src/lib/humans.ts new file mode 100644 index 0000000..543fdb6 --- /dev/null +++ b/js/src/lib/humans.ts @@ -0,0 +1,43 @@ +import type { Human } from "@/api/types"; +import { getInitials } from "@/lib/utils"; + +export const REMOVED_MEMBER_LABEL = "Removed member"; +export const REMOVED_MEMBER_INITIALS = "–"; + +export interface HumanDisplay { + /** True when the human was found in the provided list. */ + exists: boolean; + /** Short name for inline text (e.g. message sender). */ + displayName: string; + /** Full email or fallback label for tooltips. */ + email: string; + /** Initials for avatar fallback. */ + initials: string; +} + +/** + * Resolve a human's display info by id, falling back consistently when the + * human has been removed from the network. Member content (particles, reactions, + * etc.) is retained after removal, so every render path needs a graceful fallback + * instead of leaking raw ids into the UI. + */ +export function resolveHumanDisplay( + humanId: string | null | undefined, + humans: Human[] | undefined, +): HumanDisplay { + const human = humanId ? humans?.find((h) => h.id === humanId) : undefined; + if (!human) { + return { + exists: false, + displayName: REMOVED_MEMBER_LABEL, + email: REMOVED_MEMBER_LABEL, + initials: REMOVED_MEMBER_INITIALS, + }; + } + return { + exists: true, + displayName: human.email_prefix, + email: human.email, + initials: getInitials(human.email), + }; +}