llink/js/desktop/src/features/particles/particle-view-resolver.tsx

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';

/**
 * Route-level component for /:networkId/*.
 * Reads params from the router, resolves the particle, and renders
 * the appropriate view based on particle type.
 */
export default function ParticleViewResolver() {
  const { networkId, '*': rest } = useParams();
  if (!networkId)
    throw new Error('ParticleViewResolver requires a :networkId route param');
  const segments = (rest ?? '').split('/').filter(Boolean);
  const path = particlePath(networkId, segments); // path of current container particle

  const { particle, isLoading, error } = useLiveParticle(path);

  if (isLoading) {
    return (
      <div className="flex h-full items-center justify-center">
        <p className="text-muted-foreground text-sm">Loading...</p>
      </div>
    );
  }

  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 <InaccessibleParticle />;
  }

  switch (particle.type) {
    case 'stream':
      return <StreamView streamParticle={particle} path={path} />;
    case 'folder':
      return <FolderView folderParticle={particle} path={path} />;
    default:
      return (
        <div className="flex h-full items-center justify-center">
          <p className="text-muted-foreground text-sm">
            {particle.type} particle: {particle.id}
          </p>
        </div>
      );
  }
}

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 (
    <div className="flex h-full flex-col items-center justify-center gap-4 p-8 text-center">
      <Lock className="text-muted-foreground size-8" />
      <div className="flex max-w-sm flex-col gap-1">
        <p className="text-sm font-medium">This particle isn't available</p>
        <p className="text-muted-foreground text-xs">
          It may have been deleted, or your access was removed.
        </p>
      </div>
      <Button size="sm" onClick={() => navigate('/', { replace: true })}>
        Go home
      </Button>
    </div>
  );
}