66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { useParticle } from "@/hooks/use-particle";
|
|
import { StreamView } from "./stream-view";
|
|
import { FolderView } from "./folder-view";
|
|
import { ParticleListView } from "./particle-list-view";
|
|
import { isContainerType } from "@/api/types";
|
|
|
|
interface ParticleViewResolverProps {
|
|
networkId: string;
|
|
particleSegments: string[];
|
|
}
|
|
|
|
/**
|
|
* Resolves a particle by its path segments and renders the appropriate view
|
|
* based on particle type. This is the extensibility point for future particle types.
|
|
*/
|
|
export function ParticleViewResolver({ networkId, particleSegments }: ParticleViewResolverProps) {
|
|
const { particle, isLoading, error } = useParticle(networkId, particleSegments);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center">
|
|
<p className="text-muted-foreground text-sm">Loading...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center">
|
|
<p className="text-destructive text-sm">Failed to load particle</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// While the hook is stubbed, particle will be null — show a placeholder
|
|
if (!particle) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center">
|
|
<p className="text-muted-foreground text-sm">
|
|
Particle: {particleSegments.join(" / ")}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
switch (particle.type) {
|
|
case "stream":
|
|
return <StreamView streamParticle={particle} networkId={networkId} particleSegments={particleSegments} />;
|
|
case "folder":
|
|
return <FolderView folderParticle={particle} networkId={networkId} particleSegments={particleSegments} />;
|
|
default:
|
|
// For container types we haven't built a view for, fall back to list
|
|
if (isContainerType(particle.type)) {
|
|
return <ParticleListView networkId={networkId} particleSegments={particleSegments} />;
|
|
}
|
|
// Leaf particle — placeholder
|
|
return (
|
|
<div className="flex h-full items-center justify-center">
|
|
<p className="text-muted-foreground text-sm">
|
|
{particle.type} particle: {particle.id}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
}
|