Use post shadow to swap detached quotes

src/state/queries/postgate/index.ts

@@ -1,8 +1,11 @@
 import {AppBskyFeedPostgate, AtUri, BskyAgent} from '@atproto/api'
-import {useMutation} from '@tanstack/react-query'
+import {useMutation, useQueryClient} from '@tanstack/react-query'
 
 import {networkRetry} from '#/lib/async/retry'
+import {updatePostShadow} from '#/state/cache/post-shadow'
+import {useGetPosts} from '#/state/queries/post'
 import {
+  createEmbed,
   createPostgateRecord,
   mergePostgateRecords,
   POSTGATE_COLLECTION,
@@ -26,6 +29,7 @@ export async function getPostgateRecord({
   }
 
   try {
+    // TODO don't retry on 404
     const {data} = await networkRetry(2, () =>
       agent.api.com.atproto.repo.getRecord({
         repo: urip.host,
@@ -100,6 +104,8 @@ export async function upsertPostgate(
 
 export function useToggleQuoteDetachmentMutation() {
   const agent = useAgent()
+  const queryClient = useQueryClient()
+  const getPosts = useGetPosts()
 
   return useMutation({
     mutationFn: async ({
@@ -134,5 +140,16 @@ export function useToggleQuoteDetachmentMutation() {
         }
       })
     },
+    async onSuccess(_data, {postUri, quotedUri, action}) {
+      const [post, quotedPost] = await getPosts({uris: [postUri, quotedUri]})
+
+      updatePostShadow(queryClient, postUri, {
+        embed: createEmbed({
+          post,
+          embeddedPost: quotedPost,
+          detached: action === 'detach',
+        }),
+      })
+    },
   })
 }

src/state/queries/postgate/util.ts

@@ -1,4 +1,9 @@
-import {AppBskyFeedPostgate} from '@atproto/api'
+import {
+  AppBskyEmbedRecord,
+  AppBskyEmbedRecordWithMedia,
+  AppBskyFeedDefs,
+  AppBskyFeedPostgate,
+} from '@atproto/api'
 import {ViewRemoved} from '@atproto/api/dist/client/types/app/bsky/embed/record'
 
 export const POSTGATE_COLLECTION = 'app.bsky.feed.postgate'
@@ -42,3 +47,60 @@ export function createEmbedViewRemovedRecord({uri}: {uri: string}) {
     record,
   }
 }
+
+export function createEmbed({
+  post,
+  embeddedPost,
+  detached,
+}: {
+  post: AppBskyFeedDefs.PostView
+  embeddedPost: AppBskyFeedDefs.PostView
+  detached: boolean
+}) {
+  if (AppBskyEmbedRecord.isView(post.embed)) {
+    if (detached) return createEmbedViewRemovedRecord({uri: post.uri})
+    return createEmbedRecordView({post: embeddedPost})
+  } else if (AppBskyEmbedRecordWithMedia.isView(post.embed)) {
+    if (detached)
+      return {
+        ...post.embed,
+        record: createEmbedViewRemovedRecord({uri: post.uri}),
+      }
+    return createEmbedRecordWithmediaView({post, embeddedPost})
+  }
+}
+
+export function createEmbedRecordView({
+  post,
+}: {
+  post: AppBskyFeedDefs.PostView
+}): AppBskyEmbedRecord.View {
+  return {
+    $type: 'app.bsky.embed.record#view',
+    record: {
+      $type: 'app.bsky.embed.record#viewRecord',
+      ...post,
+      value: post.record,
+    },
+  }
+}
+
+export function createEmbedRecordWithmediaView({
+  post,
+  embeddedPost,
+}: {
+  post: AppBskyFeedDefs.PostView
+  embeddedPost: AppBskyFeedDefs.PostView
+}): AppBskyEmbedRecordWithMedia.View | undefined {
+  if (!AppBskyEmbedRecordWithMedia.isView(post.embed)) return
+  return {
+    ...(post.embed || {}),
+    record: {
+      record: {
+        $type: 'app.bsky.embed.record#viewRecord',
+        ...embeddedPost,
+        value: embeddedPost.record,
+      },
+    },
+  }
+}