import { useParams } from "react-router-dom";
import { particlePath } from "@/lib/particle-path";
import { ParticleListView } from "@/features/particles/particle-list-view";
import ControlsIndicator from "@/features/compose/controls-indicator";
import { ComposeOverlay } from "./compose/compose-overlay";

/**
 * Route-level component for /:networkId (index).
 * Shows root-level particles for the selected network.
 */
export default function NetworkRoot() {
  const { networkId } = useParams();
  const path = particlePath(networkId!, []);

  return (
    <div className="flex flex-col h-full relative">
      <ParticleListView path={path} />
      <ComposeOverlay networkId={networkId!} />
      <ControlsIndicator type={"new"} />
    </div>
  );
}