refactor: restructure state, routing, and more

js/src/features/particles/folder-view.tsx

@@ -1,19 +1,19 @@
 import { Particle } from "@/api/types";
-import { useParticleChildren } from "@/hooks/use-particle-children";
+import { useLiveParticleChildren } from "@/hooks/use-particle";
+import type { ParticlePath } from "@/lib/particle-path";
 
 interface FolderViewProps {
   folderParticle: Particle;
-  networkId: string;
-  particleSegments: string[];
+  path: ParticlePath;
 }
 
-export function FolderView({ networkId, particleSegments, folderParticle }: FolderViewProps) {
-  const { children, error, isLoading } = useParticleChildren(networkId, particleSegments);
+export function FolderView({ path, folderParticle }: FolderViewProps) {
+  const { children, error, isLoading } = useLiveParticleChildren(path);
 
   return (
     <div className="flex h-full items-center justify-center">
       <p className="text-muted-foreground text-sm">
-        Folder view — {networkId}/{particleSegments.join("/")}
+        Folder view — {folderParticle.id}
       </p>
     </div>
   );

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>
     );
   }

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

@@ -1,20 +1,22 @@
-import { useParticle } from "@/hooks/use-particle";
-import { StreamView } from "./stream-view";
-import { FolderView } from "./folder-view";
-import { ParticleListView } from "./particle-list-view";
+import { useParams } from "react-router-dom";
+import { useLiveParticle } from "@/hooks/use-particle";
+import { particlePath } from "@/lib/particle-path";
 import { isContainerType } from "@/api/types";
-
-interface ParticleViewResolverProps {
-  networkId: string;
-  particleSegments: string[];
-}
+import { StreamView } from "@/features/particles/stream-view";
+import { FolderView } from "@/features/particles/folder-view";
+import { ParticleListView } from "@/features/particles/particle-list-view";
 
 /**
- * Resolves a particle by its path segments and renders the appropriate view
- * based on particle type (e.g. stream would show clips in story mode, folder would list files, etc.)
+ * Route-level component for /:networkId/*.
+ * Reads params from the router, resolves the particle, and renders
+ * the appropriate view based on particle type.
  */
-export function ParticleViewResolver({ networkId, particleSegments }: ParticleViewResolverProps) {
-  const { particle, isLoading, error } = useParticle(networkId, particleSegments);
+export default function ParticleViewResolver() {
+  const { networkId, "*": rest } = useParams();
+  const segments = (rest ?? "").split("/").filter(Boolean);
+  const path = particlePath(networkId!, segments);
+
+  const { particle, isLoading, error } = useLiveParticle(path);
 
   if (isLoading) {
     return (
@@ -32,12 +34,11 @@ export function ParticleViewResolver({ networkId, particleSegments }: ParticleVi
     );
   }
 
-  // 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(" / ")}
+          Particle: {segments.join(" / ")}
         </p>
       </div>
     );
@@ -45,15 +46,13 @@ export function ParticleViewResolver({ networkId, particleSegments }: ParticleVi
 
   switch (particle.type) {
     case "stream":
-      return <StreamView streamParticle={particle} networkId={networkId} particleSegments={particleSegments} />;
+      return <StreamView streamParticle={particle} path={path} />;
     case "folder":
-      return <FolderView folderParticle={particle} networkId={networkId} particleSegments={particleSegments} />;
+      return <FolderView folderParticle={particle} path={path} />;
     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} />;
+        return <ParticleListView path={path} />;
       }
-      // Leaf particle — placeholder
       return (
         <div className="flex h-full items-center justify-center">
           <p className="text-muted-foreground text-sm">

js/src/features/particles/stream-view.tsx

@@ -1,19 +1,19 @@
 import { Particle } from "@/api/types";
-import { useParticleChildren } from "@/hooks/use-particle-children";
+import { useLiveParticleChildren } from "@/hooks/use-particle";
+import type { ParticlePath } from "@/lib/particle-path";
 
 interface StreamViewProps {
   streamParticle: Particle;
-  networkId: string;
-  particleSegments: string[];
+  path: ParticlePath;
 }
 
-export function StreamView({ networkId, particleSegments, streamParticle }: StreamViewProps) {
-  const { children, error, isLoading } = useParticleChildren(networkId, particleSegments);
+export function StreamView({ path, streamParticle }: StreamViewProps) {
+  const { children, error, isLoading } = useLiveParticleChildren(path);
 
   return (
     <div className="flex h-full items-center justify-center">
       <p className="text-muted-foreground text-sm">
-        Stream view — {networkId}/{particleSegments.join("/")}
+        Stream view — {streamParticle.id}
       </p>
 
       {isLoading && <p className="text-muted-foreground text-sm">Loading stream data...</p>}