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

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">