feat: enhance SpacesGrid to display snapshot data and improve space rendering

apps/web/src/components/spaces-grid.tsx

@@ -147,7 +147,11 @@ export function SpacesGrid() {
 
       {/* Spaces Grid */}
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-        {filteredSpaces.map((space) => (
+        {filteredSpaces.map((space) => {
+          const snapshot = space.snapshotText
+            ? JSON.parse(space.snapshotText).document
+            : undefined;
+          return (
             <Card
               className="group cursor-pointer border-border/50 transition-all duration-200 hover:border-border hover:shadow-lg"
               key={space.id}
@@ -205,21 +209,18 @@ export function SpacesGrid() {
                     onMount={(editor) => {
                       editor.updateInstanceState({ isReadonly: true });
                     }}
-                  snapshot={
-                    space.snapshotText
-                      ? JSON.parse(space.snapshotText).document
-                      : undefined
-                  }
+                    snapshot={snapshot}
                   />
                 </div>
               </CardContent>
 
               <CardFooter className="flex items-center justify-between pt-0 text-muted-foreground text-sm">
-              <span>{space.itemCount} items</span>
+                <span>{snapshot?.itemCount} items</span>
                 <span>Edited {space.lastEdited}</span>
               </CardFooter>
             </Card>
-        ))}
+          );
+        })}
       </div>
 
       {/* Empty State (when no spaces exist) */}

apps/web/src/lib/appwrite-db.ts

@@ -100,6 +100,8 @@ export async function upsertSpaceSnapshot(
     spaceId,
     userId: uid,
     snapshot: JSON.stringify(payload),
+    title: existing?.title,
+    color: existing?.color,
   } as const;
 
   if (existing) {

apps/web/src/routes/space.tsx

@@ -9,6 +9,7 @@ import {
 } from "tldraw";
 import { z } from "zod";
 import "tldraw/tldraw.css";
+import Loader from "@/components/loader";
 import {
   getLatestSpaceSnapshot,
   type RemoteSnapshot,
@@ -78,6 +79,10 @@ function SpaceRoute() {
     };
   }, [id, session, store]);
 
+  if (!(id && session)) {
+    return <Loader />;
+  }
+
   return (
     <div className="mx-4 mt-4" style={{ position: "relative", inset: 0 }}>
       <Tldraw