refactor: restructure state, routing, and more

js/src/features/particles/particle-list-view.tsx

@@ -1,15 +1,16 @@
-import { useParticleChildren } from "@/hooks/use-particle-children";
+import { useLiveParticleChildren } from "@/hooks/use-particle";
+import type { ParticlePath } from "@/lib/particle-path";
+import ControlsIndicator from "@/features/send/controls-indicator";
 
 interface ParticleListViewProps {
-  networkId: string;
-  particleSegments: string[];
+  path: ParticlePath;
 }
 
 /**
  * Grid/list of child particles for a container (folder, stream root, or network root).
  */
-export function ParticleListView({ networkId, particleSegments }: ParticleListViewProps) {
-  const { children, isLoading } = useParticleChildren(networkId, particleSegments);
+export function ParticleListView({ path }: ParticleListViewProps) {
+  const { children, isLoading } = useLiveParticleChildren(path);
 
   if (isLoading) {
     return (
@@ -21,8 +22,8 @@ export function ParticleListView({ networkId, particleSegments }: ParticleListVi
 
   if (children.length === 0) {
     return (
-      <div className="flex h-full items-center justify-center">
-        <p className="text-muted-foreground text-sm">No particles yet</p>
+      <div className="flex flex-col h-full items-center justify-center gap-2">
+        <ControlsIndicator type={"new"} />
       </div>
     );
   }