fix(web): revoke draft image blob urls on project deletion

Author: maria-rcks

apps/web/src/composerDraftStore.test.ts

@@ -211,6 +211,58 @@ describe("composerDraftStore clearComposerContent", () => {
   });
 });
 
+describe("composerDraftStore draft thread cleanup", () => {
+  let originalRevokeObjectUrl: typeof URL.revokeObjectURL;
+  let revokeSpy: ReturnType<typeof vi.fn<(url: string) => void>>;
+
+  beforeEach(() => {
+    resetComposerDraftStore();
+    originalRevokeObjectUrl = URL.revokeObjectURL;
+    revokeSpy = vi.fn();
+    URL.revokeObjectURL = revokeSpy;
+  });
+
+  afterEach(() => {
+    URL.revokeObjectURL = originalRevokeObjectUrl;
+  });
+
+  it("revokes draft image blob URLs when clearing a project's draft thread", () => {
+    const projectId = ProjectId.makeUnsafe("project-clear");
+    const threadId = ThreadId.makeUnsafe("thread-clear-project");
+    const image = makeImage({
+      id: "img-project-clear",
+      previewUrl: "blob:project-clear",
+    });
+
+    useComposerDraftStore.getState().setProjectDraftThreadId(projectId, threadId);
+    useComposerDraftStore.getState().addImage(threadId, image);
+
+    useComposerDraftStore.getState().clearProjectDraftThreadId(projectId);
+
+    expect(useComposerDraftStore.getState().draftsByThreadId[threadId]).toBeUndefined();
+    expect(useComposerDraftStore.getState().draftThreadsByThreadId[threadId]).toBeUndefined();
+    expect(revokeSpy).toHaveBeenCalledWith("blob:project-clear");
+  });
+
+  it("revokes draft image blob URLs when clearing a matching project draft thread by id", () => {
+    const projectId = ProjectId.makeUnsafe("project-clear-by-id");
+    const threadId = ThreadId.makeUnsafe("thread-clear-by-id");
+    const image = makeImage({
+      id: "img-project-clear-by-id",
+      previewUrl: "blob:project-clear-by-id",
+    });
+
+    useComposerDraftStore.getState().setProjectDraftThreadId(projectId, threadId);
+    useComposerDraftStore.getState().addImage(threadId, image);
+
+    useComposerDraftStore.getState().clearProjectDraftThreadById(projectId, threadId);
+
+    expect(useComposerDraftStore.getState().draftsByThreadId[threadId]).toBeUndefined();
+    expect(useComposerDraftStore.getState().draftThreadsByThreadId[threadId]).toBeUndefined();
+    expect(revokeSpy).toHaveBeenCalledWith("blob:project-clear-by-id");
+  });
+});
+
 describe("composerDraftStore syncPersistedAttachments", () => {
   const threadId = ThreadId.makeUnsafe("thread-sync-persisted");
 

apps/web/src/composerDraftStore.ts

@@ -662,6 +662,47 @@ function revokeObjectPreviewUrl(previewUrl: string): void {
   URL.revokeObjectURL(previewUrl);
 }
 
+function revokeDraftThreadPreviewUrls(draft: ComposerThreadDraftState | undefined): void {
+  if (!draft) {
+    return;
+  }
+  for (const image of draft.images) {
+    revokeObjectPreviewUrl(image.previewUrl);
+  }
+}
+
+type ComposerDraftStoreData = Pick<
+  ComposerDraftStoreState,
+  "draftsByThreadId" | "draftThreadsByThreadId" | "projectDraftThreadIdByProjectId"
+>;
+
+function removeDraftThreadState(
+  state: ComposerDraftStoreData,
+  threadId: ThreadId,
+  nextProjectDraftThreadIdByProjectId: Record<ProjectId, ThreadId>,
+): ComposerDraftStoreData {
+  const nextDraftThreadsByThreadId: Record<ThreadId, DraftThreadState> = {
+    ...state.draftThreadsByThreadId,
+  };
+  let nextDraftsByThreadId = state.draftsByThreadId;
+
+  if (!Object.values(nextProjectDraftThreadIdByProjectId).includes(threadId)) {
+    delete nextDraftThreadsByThreadId[threadId];
+    const existingDraft = state.draftsByThreadId[threadId];
+    if (existingDraft !== undefined) {
+      revokeDraftThreadPreviewUrls(existingDraft);
+      nextDraftsByThreadId = { ...state.draftsByThreadId };
+      delete nextDraftsByThreadId[threadId];
+    }
+  }
+
+  return {
+    draftsByThreadId: nextDraftsByThreadId,
+    draftThreadsByThreadId: nextDraftThreadsByThreadId,
+    projectDraftThreadIdByProjectId: nextProjectDraftThreadIdByProjectId,
+  };
+}
+
 function normalizePersistedAttachment(value: unknown): PersistedComposerImageAttachment | null {
   if (!value || typeof value !== "object") {
     return null;
@@ -1429,22 +1470,7 @@ export const useComposerDraftStore = create<ComposerDraftStoreState>()(
           const { [projectId]: _removed, ...restProjectMappingsRaw } =
             state.projectDraftThreadIdByProjectId;
           const restProjectMappings = restProjectMappingsRaw as Record<ProjectId, ThreadId>;
-          const nextDraftThreadsByThreadId: Record<ThreadId, DraftThreadState> = {
-            ...state.draftThreadsByThreadId,
-          };
-          let nextDraftsByThreadId = state.draftsByThreadId;
-          if (!Object.values(restProjectMappings).includes(threadId)) {
-            delete nextDraftThreadsByThreadId[threadId];
-            if (state.draftsByThreadId[threadId] !== undefined) {
-              nextDraftsByThreadId = { ...state.draftsByThreadId };
-              delete nextDraftsByThreadId[threadId];
-            }
-          }
-          return {
-            draftsByThreadId: nextDraftsByThreadId,
-            draftThreadsByThreadId: nextDraftThreadsByThreadId,
-            projectDraftThreadIdByProjectId: restProjectMappings,
-          };
+          return removeDraftThreadState(state, threadId, restProjectMappings);
         });
       },
       clearProjectDraftThreadById: (projectId, threadId) => {
@@ -1458,34 +1484,13 @@ export const useComposerDraftStore = create<ComposerDraftStoreState>()(
           const { [projectId]: _removed, ...restProjectMappingsRaw } =
             state.projectDraftThreadIdByProjectId;
           const restProjectMappings = restProjectMappingsRaw as Record<ProjectId, ThreadId>;
-          const nextDraftThreadsByThreadId: Record<ThreadId, DraftThreadState> = {
-            ...state.draftThreadsByThreadId,
-          };
-          let nextDraftsByThreadId = state.draftsByThreadId;
-          if (!Object.values(restProjectMappings).includes(threadId)) {
-            delete nextDraftThreadsByThreadId[threadId];
-            if (state.draftsByThreadId[threadId] !== undefined) {
-              nextDraftsByThreadId = { ...state.draftsByThreadId };
-              delete nextDraftsByThreadId[threadId];
-            }
-          }
-          return {
-            draftsByThreadId: nextDraftsByThreadId,
-            draftThreadsByThreadId: nextDraftThreadsByThreadId,
-            projectDraftThreadIdByProjectId: restProjectMappings,
-          };
+          return removeDraftThreadState(state, threadId, restProjectMappings);
         });
       },
       clearDraftThread: (threadId) => {
         if (threadId.length === 0) {
           return;
         }
-        const existing = get().draftsByThreadId[threadId];
-        if (existing) {
-          for (const image of existing.images) {
-            revokeObjectPreviewUrl(image.previewUrl);
-          }
-        }
         set((state) => {
           const hasDraftThread = state.draftThreadsByThreadId[threadId] !== undefined;
           const hasProjectMapping = Object.values(state.projectDraftThreadIdByProjectId).includes(
@@ -1500,15 +1505,7 @@ export const useComposerDraftStore = create<ComposerDraftStoreState>()(
               ([, draftThreadId]) => draftThreadId !== threadId,
             ),
           ) as Record<ProjectId, ThreadId>;
-          const { [threadId]: _removedDraftThread, ...restDraftThreadsByThreadId } =
-            state.draftThreadsByThreadId;
-          const { [threadId]: _removedComposerDraft, ...restDraftsByThreadId } =
-            state.draftsByThreadId;
-          return {
-            draftsByThreadId: restDraftsByThreadId,
-            draftThreadsByThreadId: restDraftThreadsByThreadId,
-            projectDraftThreadIdByProjectId: nextProjectDraftThreadIdByProjectId,
-          };
+          return removeDraftThreadState(state, threadId, nextProjectDraftThreadIdByProjectId);
         });
       },
       setStickyModelSelection: (modelSelection) => {