refactor: extract properties for container particles to flat fields in firestore

js/src/features/compose/compose-overlay.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useAuthStore } from "@/stores/auth-store";
-import { useCreateParticle } from "@/hooks/use-create-particle";
+import { useCreateParticle, useCreateStreamParticle } from "@/hooks/use-create-particle";
 import { useRecordingMode } from "@/hooks/use-recording-mode";
 import { useRecorder } from "@/features/compose/use-recorder";
 import { particlePath, toFirestoreChildrenPath } from "@/lib/particle-path";
@@ -38,6 +38,7 @@ export function ComposeOverlay({
   const [recordingMode] = useRecordingMode();
   const userEmail = useAuthStore((s) => s.user?.email);
   const createParticle = useCreateParticle();
+  const createStream = useCreateStreamParticle();
 
   // Refs to avoid stale closures in keyboard handler
   const stepRef = useRef(step);
@@ -158,15 +159,14 @@ export function ComposeOverlay({
 
       const collectionPath = toFirestoreChildrenPath(particlePath(networkId));
 
-      const streamId = await createParticle.mutateAsync({
+      const streamId = await createStream.mutateAsync({
         collectionPath,
-        type: "stream",
         properties: {
           name: streamName,
           status: "open",
-          visible_to: visibleTo,
         },
         createdByEmail: userEmail,
+        visibleTo,
       });
 
       const streamChildrenPath = toFirestoreChildrenPath(

js/src/features/layout.tsx

@@ -13,7 +13,7 @@ import {
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { useNetworks } from "@/hooks/use-networks";
 import { particlePath, toFirestoreDocPath } from "@/lib/particle-path";
-import { useLiveParticle } from "@/hooks/use-particle";
+import { useLiveParticle, useParticle } from "@/hooks/use-particle";
 import { useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { getParticle } from "@/lib/firestore-particles";
@@ -60,19 +60,9 @@ function TopBar() {
   const { networkId, "*": rest } = useParams();
   const segments = [networkId, ...rest?.split("/") ?? []].filter(Boolean);
 
-  const path = rest ? particlePath(networkId!, rest.split("/").filter(Boolean)) : null;
+  const path = rest ? particlePath(networkId!, rest.split("/").filter(Boolean)) : undefined;
 
-  const { data: particle } = useQuery(
-    {
-      queryKey: ["particle", path],
-      queryFn: async () => {
-        if (!path) return null;
-        const particle = await getParticle(toFirestoreDocPath(path));
-        return particle;
-      },
-      enabled: !!path,
-    },
-  );
+  const { data: particle } = useParticle(path);
 
   return (
     <div className="drag-region flex items-center gap-3 border-b px-3 py-1">

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

@@ -14,7 +14,7 @@ import { ParticleListView } from "@/features/particles/particle-list-view";
 export default function ParticleViewResolver() {
   const { networkId, "*": rest } = useParams();
   const segments = (rest ?? "").split("/").filter(Boolean);
-  const path = particlePath(networkId!, segments);
+  const path = particlePath(networkId!, segments); // path of current container particle
 
   const { particle, isLoading, error } = useLiveParticle(path);
 

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

@@ -1,8 +1,8 @@
 import { useState, useEffect, useCallback, useReducer } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import type { Particle } from "@/api/types";
 import { useLiveParticleChildren } from "@/hooks/use-particle";
-import type { ParticlePath } from "@/lib/particle-path";
+import { parseParticlePath, type ParticlePath } from "@/lib/particle-path";
 import { ComposeOverlay } from "@/features/compose/compose-overlay";
 import { PlaybackPageIndicator } from "@/features/playback/playback-page-indicator";
 import { ParticleRenderer } from "@/features/playback/particle-renderer";
@@ -94,7 +94,7 @@ interface StreamViewProps {
 }
 
 export function StreamView({ path, streamParticle }: StreamViewProps) {
-  const { networkId } = useParams();
+  const { networkId } = parseParticlePath(path);
   const navigate = useNavigate();
   const { children } = useLiveParticleChildren(path);