Enhance canvas functionality by adding media preview capabilities and image upload handling. Introduce compressed image previews during uploads, improve media library integration, and implement retry logic for bridge edge creation. Update dashboard to display media previews and optimize image node handling.

convex/storage.ts

@@ -42,9 +42,11 @@ async function assertCanvasOwner(
 }
 
 async function resolveStorageUrls(
-  ctx: QueryCtx,
+  ctx: QueryCtx | MutationCtx,
   storageIds: Array<Id<"_storage">>,
+  options?: { logLabel?: string },
 ): Promise<StorageUrlMap> {
+  const logLabel = options?.logLabel ?? "batchGetUrlsForCanvas";
   const resolved: StorageUrlMap = {};
   const operationStartedAt = Date.now();
   let failedCount = 0;
@@ -75,7 +77,7 @@ async function resolveStorageUrls(
       if (entry.error) {
         failedCount += 1;
         batchFailedCount += 1;
-        console.warn("[storage.batchGetUrlsForCanvas] getUrl failed", {
+        console.warn(`[storage.${logLabel}] getUrl failed`, {
           storageId: entry.storageId,
           error: entry.error,
         });
@@ -89,7 +91,7 @@ async function resolveStorageUrls(
       }
     }
 
-    logSlowQuery("batchGetUrlsForCanvas::resolveStorageBatch", batchStartedAt, {
+    logSlowQuery(`${logLabel}::resolveStorageBatch`, batchStartedAt, {
       batchSize: batch.length,
       successCount: entries.length - batchFailedCount,
       failedCount: batchFailedCount,
@@ -97,7 +99,7 @@ async function resolveStorageUrls(
     });
   }
 
-  logSlowQuery("batchGetUrlsForCanvas", operationStartedAt, {
+  logSlowQuery(logLabel, operationStartedAt, {
     requestStorageCount: storageIds.length,
     resolvedCount: totalResolved,
     failedCount,
@@ -147,7 +149,9 @@ export const batchGetUrlsForCanvas = mutation({
       });
     }
 
-    const result = await resolveStorageUrls(ctx, verifiedStorageIds);
+    const result = await resolveStorageUrls(ctx, verifiedStorageIds, {
+      logLabel: "batchGetUrlsForCanvas",
+    });
     logSlowQuery("batchGetUrlsForCanvas::total", startedAt, {
       canvasId,
       storageIdCount: verifiedStorageIds.length,
@@ -157,6 +161,96 @@ export const batchGetUrlsForCanvas = mutation({
     return result;
   },
 });
+
+export const batchGetUrlsForUserMedia = mutation({
+  args: {
+    storageIds: v.array(v.id("_storage")),
+  },
+  handler: async (ctx, { storageIds }) => {
+    const startedAt = Date.now();
+    const user = await requireAuth(ctx);
+
+    const uniqueSortedStorageIds = [...new Set(storageIds)].sort();
+    if (uniqueSortedStorageIds.length === 0) {
+      return {};
+    }
+
+    const ownedStorageIds = await collectOwnedImageStorageIdsForUser(ctx, user.userId);
+    const verifiedStorageIds = uniqueSortedStorageIds.filter((storageId) =>
+      ownedStorageIds.has(storageId),
+    );
+    const rejectedStorageIds = uniqueSortedStorageIds.length - verifiedStorageIds.length;
+    if (rejectedStorageIds > 0) {
+      console.warn("[storage.batchGetUrlsForUserMedia] rejected unowned storage ids", {
+        userId: user.userId,
+        requestedCount: uniqueSortedStorageIds.length,
+        rejectedStorageIds,
+      });
+    }
+
+    const result = await resolveStorageUrls(ctx, verifiedStorageIds, {
+      logLabel: "batchGetUrlsForUserMedia",
+    });
+    logSlowQuery("batchGetUrlsForUserMedia::total", startedAt, {
+      userId: user.userId,
+      storageIdCount: verifiedStorageIds.length,
+      rejectedStorageIds,
+      resolvedCount: Object.keys(result).length,
+    });
+
+    return result;
+  },
+});
+
+export const registerUploadedImageMedia = mutation({
+  args: {
+    canvasId: v.id("canvases"),
+    nodeId: v.optional(v.id("nodes")),
+    storageId: v.id("_storage"),
+    filename: v.optional(v.string()),
+    mimeType: v.optional(v.string()),
+    width: v.optional(v.number()),
+    height: v.optional(v.number()),
+  },
+  handler: async (ctx, args) => {
+    const user = await requireAuth(ctx);
+    await assertCanvasOwner(ctx, args.canvasId, user.userId);
+
+    if (args.nodeId) {
+      const node = await ctx.db.get(args.nodeId);
+      if (!node) {
+        console.warn("[storage.registerUploadedImageMedia] node not found", {
+          userId: user.userId,
+          canvasId: args.canvasId,
+          nodeId: args.nodeId,
+          storageId: args.storageId,
+        });
+      } else if (node.canvasId !== args.canvasId) {
+        console.warn("[storage.registerUploadedImageMedia] node/canvas mismatch", {
+          userId: user.userId,
+          canvasId: args.canvasId,
+          nodeId: args.nodeId,
+          nodeCanvasId: node.canvasId,
+          storageId: args.storageId,
+        });
+      }
+    }
+
+    console.info("[storage.registerUploadedImageMedia] acknowledged", {
+      userId: user.userId,
+      canvasId: args.canvasId,
+      nodeId: args.nodeId,
+      storageId: args.storageId,
+      filename: args.filename,
+      mimeType: args.mimeType,
+      width: args.width,
+      height: args.height,
+    });
+
+    return { ok: true as const };
+  },
+});
+
 async function listNodesForCanvas(
   ctx: QueryCtx | MutationCtx,
   canvasId: Id<"canvases">,
@@ -175,10 +269,53 @@ function collectStorageIds(
   for (const node of nodes) {
     const data = node.data as Record<string, unknown> | undefined;
     const storageId = data?.storageId;
+    const previewStorageId = data?.previewStorageId;
     if (typeof storageId === "string" && storageId.length > 0) {
       ids.add(storageId as Id<"_storage">);
     }
+    if (typeof previewStorageId === "string" && previewStorageId.length > 0) {
+      ids.add(previewStorageId as Id<"_storage">);
+    }
   }
 
   return [...ids];
 }
+
+async function collectOwnedImageStorageIdsForUser(
+  ctx: QueryCtx | MutationCtx,
+  userId: string,
+): Promise<Set<Id<"_storage">>> {
+  const canvases = await ctx.db
+    .query("canvases")
+    .withIndex("by_owner", (q) => q.eq("ownerId", userId))
+    .collect();
+  if (canvases.length === 0) {
+    return new Set();
+  }
+
+  const imageNodesByCanvas = await Promise.all(
+    canvases.map((canvas) =>
+      ctx.db
+        .query("nodes")
+        .withIndex("by_canvas_type", (q) => q.eq("canvasId", canvas._id).eq("type", "image"))
+        .collect(),
+    ),
+  );
+
+  const imageStorageIds = new Set<Id<"_storage">>();
+  for (const nodes of imageNodesByCanvas) {
+    for (const node of nodes) {
+      const data = node.data as Record<string, unknown> | undefined;
+      const storageId = data?.storageId;
+      const previewStorageId = data?.previewStorageId;
+      if (typeof storageId === "string" && storageId.length > 0) {
+        imageStorageIds.add(storageId as Id<"_storage">);
+      }
+      if (typeof previewStorageId === "string" && previewStorageId.length > 0) {
+        imageStorageIds.add(previewStorageId as Id<"_storage">);
+      }
+    }
+  }
+
+  return imageStorageIds;
+}