@@ -555,6 +591,7 @@ export function postActionBarTemplate({
isAuthenticated,
isUserPost,
isPinnedToProfile,
+ ownQuoteEmbed,
enableFeedFeedback,
feedContext,
feedGenerator,
@@ -569,6 +606,7 @@ export function postActionBarTemplate({
onClickDelete,
onClickPin,
onClickEditInteractionSettings,
+ onClickToggleQuoteDetachment,
});
}}
>
diff --git a/src/js/templates/smallPost.template.js b/src/js/templates/smallPost.template.js
index 48e1e0f6..7bf33612 100644
--- a/src/js/templates/smallPost.template.js
+++ b/src/js/templates/smallPost.template.js
@@ -258,6 +258,12 @@ export function smallPostTemplate({
postInteractionHandler.handlePinPost(post, doPin),
onClickEditInteractionSettings: (post) =>
postInteractionHandler.handleEditInteractionSettings(post),
+ onClickToggleQuoteDetachment: (post, quotedPostUri, doDetach) =>
+ postInteractionHandler.handleToggleQuoteDetachment(
+ post,
+ quotedPostUri,
+ doDetach,
+ ),
onClickReport: (post) => postInteractionHandler.handleReport(post),
enableFeedFeedback,
pluginService,
diff --git a/tests/e2e/specs/flows/quoteDetachment.test.js b/tests/e2e/specs/flows/quoteDetachment.test.js
new file mode 100644
index 00000000..c6a4e730
--- /dev/null
+++ b/tests/e2e/specs/flows/quoteDetachment.test.js
@@ -0,0 +1,178 @@
+import { test, expect } from "../../base.js";
+import { login } from "../../helpers.js";
+import { userProfile } from "../../testData.js";
+import { MockServer } from "../../mockServer.js";
+import { createPost } from "../../../shared/factories.js";
+
+test.describe("Quote detachment flow", () => {
+ const ownPostUri = `at://${userProfile.did}/app.bsky.feed.post/own1`;
+ const quotingPostUri = "at://did:plc:quoter/app.bsky.feed.post/quoting1";
+ const ownPost = createPost({
+ uri: ownPostUri,
+ text: "My own post",
+ authorHandle: userProfile.handle,
+ authorDisplayName: userProfile.displayName,
+ });
+
+ function makeQuotingPost(quotedRecord) {
+ return createPost({
+ uri: quotingPostUri,
+ text: "Look at this post",
+ authorHandle: "quoter.bsky.social",
+ authorDisplayName: "Quoter",
+ embed: { $type: "app.bsky.embed.record#view", record: quotedRecord },
+ });
+ }
+
+ test("detaches a quote of the user's post, preserving embeddingRules", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ mockServer.addTimelinePosts([
+ makeQuotingPost({
+ $type: "app.bsky.embed.record#viewRecord",
+ uri: ownPostUri,
+ cid: ownPost.cid,
+ author: ownPost.author,
+ value: ownPost.record,
+ labels: [],
+ indexedAt: "2025-01-01T00:00:00.000Z",
+ embeds: [],
+ }),
+ ]);
+ const embeddingRules = [{ $type: "app.bsky.feed.postgate#disableRule" }];
+ const priorDetachedUri = "at://did:plc:other/app.bsky.feed.post/q0";
+ mockServer.postgateRecords.set("own1", {
+ cid: "bafypriorpostgate",
+ value: {
+ $type: "app.bsky.feed.postgate",
+ post: ownPostUri,
+ embeddingRules,
+ detachedEmbeddingUris: [priorDetachedUri],
+ createdAt: "2024-01-01T00:00:00.000Z",
+ },
+ });
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto("/");
+
+ const quotingPost = page
+ .locator('[data-testid="small-post"]')
+ .filter({ hasText: "Look at this post" })
+ .first();
+ await expect(quotingPost).toBeVisible({ timeout: 10000 });
+
+ await quotingPost.locator('[data-testid="post-action-more"]').click();
+ const menuItem = page.locator(
+ '[data-testid="menu-action-post-toggle-quote-detachment"]',
+ );
+ await expect(menuItem).toHaveAttribute("data-teststate", "attached");
+ await menuItem.click();
+ await page.locator('[data-testid="modal-confirm-button"]').click();
+
+ await expect(
+ quotingPost.locator('[data-testid="removed-quote"]'),
+ ).toBeVisible();
+ await expect(quotingPost.locator(".quoted-post-link")).toHaveCount(0);
+
+ expect(mockServer.putPostgateCalls.length).toBe(1);
+ const body = mockServer.putPostgateCalls[0];
+ expect(body.rkey).toBe("own1");
+ expect(body.swapRecord).toBe("bafypriorpostgate");
+ expect(body.record.embeddingRules).toEqual(embeddingRules);
+ expect(body.record.detachedEmbeddingUris).toEqual([
+ priorDetachedUri,
+ quotingPostUri,
+ ]);
+ });
+
+ test("re-attaches a detached quote", async ({ page }) => {
+ const mockServer = new MockServer();
+ mockServer.addPosts([ownPost]);
+ mockServer.addTimelinePosts([
+ makeQuotingPost({
+ $type: "app.bsky.embed.record#viewDetached",
+ uri: ownPostUri,
+ detached: true,
+ }),
+ ]);
+ mockServer.postgateRecords.set("own1", {
+ cid: "bafypriorpostgate",
+ value: {
+ $type: "app.bsky.feed.postgate",
+ post: ownPostUri,
+ detachedEmbeddingUris: [quotingPostUri],
+ createdAt: "2024-01-01T00:00:00.000Z",
+ },
+ });
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto("/");
+
+ const quotingPost = page
+ .locator('[data-testid="small-post"]')
+ .filter({ hasText: "Look at this post" })
+ .first();
+ await expect(quotingPost).toBeVisible({ timeout: 10000 });
+
+ await quotingPost.locator('[data-testid="post-action-more"]').click();
+ const menuItem = page.locator(
+ '[data-testid="menu-action-post-toggle-quote-detachment"]',
+ );
+ await expect(menuItem).toHaveAttribute("data-teststate", "detached");
+ await menuItem.click();
+
+ await expect(quotingPost.locator(".quoted-post-link")).toBeVisible();
+ await expect(
+ quotingPost.locator('[data-testid="removed-quote"]'),
+ ).toHaveCount(0);
+
+ expect(mockServer.putPostgateCalls.length).toBe(1);
+ expect(mockServer.putPostgateCalls[0].record.detachedEmbeddingUris).toEqual(
+ [],
+ );
+ });
+
+ test("doesn't offer detachment on quotes of other users' posts", async ({
+ page,
+ }) => {
+ const otherPost = createPost({
+ uri: "at://did:plc:other/app.bsky.feed.post/theirs",
+ text: "Someone else's post",
+ authorHandle: "other.bsky.social",
+ authorDisplayName: "Other",
+ });
+ const mockServer = new MockServer();
+ mockServer.addTimelinePosts([
+ makeQuotingPost({
+ $type: "app.bsky.embed.record#viewRecord",
+ uri: otherPost.uri,
+ cid: otherPost.cid,
+ author: otherPost.author,
+ value: otherPost.record,
+ labels: [],
+ indexedAt: "2025-01-01T00:00:00.000Z",
+ embeds: [],
+ }),
+ ]);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto("/");
+
+ const quotingPost = page
+ .locator('[data-testid="small-post"]')
+ .filter({ hasText: "Look at this post" })
+ .first();
+ await expect(quotingPost).toBeVisible({ timeout: 10000 });
+ await quotingPost.locator('[data-testid="post-action-more"]').click();
+ await expect(
+ page.locator('[data-testid="menu-action-post-mute-thread"]'),
+ ).toBeVisible();
+ await expect(
+ page.locator('[data-testid="menu-action-post-toggle-quote-detachment"]'),
+ ).toHaveCount(0);
+ });
+});
diff --git a/tests/unit/specs/dataLayer/mutations.test.js b/tests/unit/specs/dataLayer/mutations.test.js
index c83381c1..209b150e 100644
--- a/tests/unit/specs/dataLayer/mutations.test.js
+++ b/tests/unit/specs/dataLayer/mutations.test.js
@@ -1,6 +1,6 @@
import { describe, it, beforeEach, afterEach, mock } from "node:test";
import assert from "node:assert/strict";
-import { Mutations } from "/js/dataLayer/mutations.js";
+import { Mutations, DetachedQuoteLimitError } from "/js/dataLayer/mutations.js";
import { DataStore } from "/js/dataLayer/dataStore.js";
import { createSessionState } from "/js/dataLayer/sessionState.js";
import { DraftMediaStore } from "/js/drafts.js";
@@ -3159,6 +3159,300 @@ describe("updatePostgateEmbeddingRules", () => {
});
});
+describe("toggleQuoteDetachment", () => {
+ const userDid = "did:plc:me";
+ const quotedPostUri = `at://${userDid}/app.bsky.feed.post/abc`;
+ const quotingPostUri = "at://did:plc:other/app.bsky.feed.post/quote1";
+ const quotedViewRecord = {
+ $type: "app.bsky.embed.record#viewRecord",
+ uri: quotedPostUri,
+ cid: "cid-abc",
+ author: { did: userDid, handle: "me.test" },
+ value: { text: "original" },
+ };
+ const detachedQuote = {
+ $type: "app.bsky.embed.record#viewDetached",
+ uri: quotedPostUri,
+ detached: true,
+ };
+ const quotedPost = {
+ uri: quotedPostUri,
+ cid: "cid-abc",
+ author: { did: userDid, handle: "me.test" },
+ record: { text: "original" },
+ };
+ const disableRule = { $type: "app.bsky.feed.postgate#disableRule" };
+
+ function quotingPostWith(record) {
+ return {
+ uri: quotingPostUri,
+ cid: "cid-quote",
+ author: { did: "did:plc:other", handle: "other.test", viewer: {} },
+ record: { text: "look" },
+ embed: { $type: "app.bsky.embed.record#view", record },
+ viewer: {},
+ };
+ }
+
+ function recordNotFoundError() {
+ return new ApiError({
+ status: 400,
+ statusText: "Bad Request",
+ data: { error: "RecordNotFound" },
+ headers: {},
+ url: "",
+ });
+ }
+
+ function setup(mockApi, quotingPost) {
+ const dataStore = new DataStore(createSessionState(null));
+ const patchStore = new PatchStore();
+ const mockPreferencesProvider = {
+ requirePreferences: () => Preferences.createLoggedOutPreferences(),
+ };
+ dataStore.$currentUser.set({ did: userDid, handle: "me.test" });
+ dataStore.$posts.set(quotingPost.uri, quotingPost);
+ return {
+ mutations: makeMutations(
+ mockApi,
+ dataStore,
+ patchStore,
+ mockPreferencesProvider,
+ ),
+ dataStore,
+ patchStore,
+ };
+ }
+
+ it("creates a record and detaches the embed when there is no prior record", async () => {
+ let putArgs = null;
+ const quotingPost = quotingPostWith(quotedViewRecord);
+ const mockApi = {
+ getPostgateRecord: async () => {
+ throw recordNotFoundError();
+ },
+ putPostgateRecord: async (rkey, record, swapRecord) => {
+ putArgs = { rkey, record, swapRecord };
+ return { cid: "cid-gate" };
+ },
+ };
+ const { mutations, dataStore, patchStore } = setup(mockApi, quotingPost);
+
+ await mutations.toggleQuoteDetachment(quotingPost, quotedPostUri, true);
+
+ assert.deepEqual(putArgs.rkey, "abc");
+ assert.deepEqual(putArgs.swapRecord, null);
+ assert.deepEqual(putArgs.record.post, quotedPostUri);
+ assert.deepEqual(putArgs.record.detachedEmbeddingUris, [quotingPostUri]);
+ assert.deepEqual(
+ dataStore.$posts.get(quotingPostUri).embed.record,
+ detachedQuote,
+ );
+ assert.deepEqual(patchStore.$postPatches.get(quotingPostUri), []);
+ });
+
+ it("applies the detached embed optimistically before the write lands", async () => {
+ const quotingPost = quotingPostWith(quotedViewRecord);
+ let patchesDuringWrite = null;
+ const mockApi = {
+ getPostgateRecord: async () => {
+ throw recordNotFoundError();
+ },
+ putPostgateRecord: async () => {
+ patchesDuringWrite = patchStore.$postPatches.get(quotingPostUri);
+ return { cid: "cid-gate" };
+ },
+ };
+ const { mutations, patchStore } = setup(mockApi, quotingPost);
+
+ await mutations.toggleQuoteDetachment(quotingPost, quotedPostUri, true);
+
+ assert.deepEqual(patchesDuringWrite.length, 1);
+ const patched = patchStore.applyPostPatches(
+ quotingPost,
+ patchesDuringWrite,
+ );
+ assert.deepEqual(patched.embed.record, detachedQuote);
+ });
+
+ it("merges into the prior record, preserving embeddingRules", async () => {
+ let putArgs = null;
+ const otherUri = "at://did:plc:third/app.bsky.feed.post/quote2";
+ const quotingPost = quotingPostWith(quotedViewRecord);
+ const mockApi = {
+ getPostgateRecord: async () => ({
+ cid: "cid-prior",
+ value: {
+ $type: "app.bsky.feed.postgate",
+ post: quotedPostUri,
+ embeddingRules: [disableRule],
+ detachedEmbeddingUris: [otherUri],
+ },
+ }),
+ putPostgateRecord: async (rkey, record, swapRecord) => {
+ putArgs = { rkey, record, swapRecord };
+ return { cid: "cid-next" };
+ },
+ };
+ const { mutations } = setup(mockApi, quotingPost);
+
+ await mutations.toggleQuoteDetachment(quotingPost, quotedPostUri, true);
+
+ assert.deepEqual(putArgs.swapRecord, "cid-prior");
+ assert.deepEqual(putArgs.record.embeddingRules, [disableRule]);
+ assert.deepEqual(putArgs.record.detachedEmbeddingUris, [
+ otherUri,
+ quotingPostUri,
+ ]);
+ });
+
+ it("rejects detaching past the cap without writing", async () => {
+ let putCalled = false;
+ const quotingPost = quotingPostWith(quotedViewRecord);
+ const fullUris = Array.from(
+ { length: 50 },
+ (_, i) => `at://did:plc:third/app.bsky.feed.post/q${i}`,
+ );
+ const mockApi = {
+ getPostgateRecord: async () => ({
+ cid: "cid-prior",
+ value: {
+ $type: "app.bsky.feed.postgate",
+ post: quotedPostUri,
+ detachedEmbeddingUris: fullUris,
+ },
+ }),
+ putPostgateRecord: async () => {
+ putCalled = true;
+ return { cid: "x" };
+ },
+ };
+ const { mutations, dataStore, patchStore } = setup(mockApi, quotingPost);
+
+ await assert.rejects(
+ () => mutations.toggleQuoteDetachment(quotingPost, quotedPostUri, true),
+ DetachedQuoteLimitError,
+ );
+ assert.deepEqual(putCalled, false);
+ assert.deepEqual(patchStore.$postPatches.get(quotingPostUri), []);
+ assert.deepEqual(
+ dataStore.$posts.get(quotingPostUri).embed.record,
+ quotedViewRecord,
+ );
+ });
+
+ it("re-attaches by removing the uri and restoring the cached quote", async () => {
+ let putArgs = null;
+ const quotingPost = quotingPostWith(detachedQuote);
+ const mockApi = {
+ getPostgateRecord: async () => ({
+ cid: "cid-prior",
+ value: {
+ $type: "app.bsky.feed.postgate",
+ post: quotedPostUri,
+ embeddingRules: [disableRule],
+ detachedEmbeddingUris: [quotingPostUri],
+ },
+ }),
+ putPostgateRecord: async (rkey, record, swapRecord) => {
+ putArgs = { rkey, record, swapRecord };
+ return { cid: "cid-next" };
+ },
+ };
+ const { mutations, dataStore } = setup(mockApi, quotingPost);
+ dataStore.$embeddedPosts.set(quotedPostUri, quotedPost);
+
+ await mutations.toggleQuoteDetachment(quotingPost, quotedPostUri, false);
+
+ assert.deepEqual(putArgs.record.detachedEmbeddingUris, []);
+ assert.deepEqual(putArgs.record.embeddingRules, [disableRule]);
+ const restored = dataStore.$posts.get(quotingPostUri).embed.record;
+ assert.deepEqual(restored.$type, "app.bsky.embed.record#viewRecord");
+ assert.deepEqual(restored.uri, quotedPostUri);
+ assert.deepEqual(restored.value, { text: "original" });
+ });
+
+ it("fetches the quoted post after re-attaching when it isn't cached", async () => {
+ const quotingPost = quotingPostWith(detachedQuote);
+ const mockApi = {
+ getPostgateRecord: async () => ({
+ cid: "cid-prior",
+ value: {
+ $type: "app.bsky.feed.postgate",
+ post: quotedPostUri,
+ detachedEmbeddingUris: [quotingPostUri],
+ },
+ }),
+ putPostgateRecord: async () => ({ cid: "cid-next" }),
+ getPost: async () => quotedPost,
+ };
+ const { mutations, dataStore } = setup(mockApi, quotingPost);
+
+ await mutations.toggleQuoteDetachment(quotingPost, quotedPostUri, false);
+
+ const restored = dataStore.$posts.get(quotingPostUri).embed.record;
+ assert.deepEqual(restored.$type, "app.bsky.embed.record#viewRecord");
+ assert.deepEqual(restored.uri, quotedPostUri);
+ });
+
+ it("skips the write when re-attaching with no prior record", async () => {
+ let putCalled = false;
+ const quotingPost = quotingPostWith(detachedQuote);
+ const mockApi = {
+ getPostgateRecord: async () => {
+ throw recordNotFoundError();
+ },
+ putPostgateRecord: async () => {
+ putCalled = true;
+ return { cid: "x" };
+ },
+ getPost: async () => quotedPost,
+ };
+ const { mutations } = setup(mockApi, quotingPost);
+
+ await mutations.toggleQuoteDetachment(quotingPost, quotedPostUri, false);
+
+ assert.deepEqual(putCalled, false);
+ });
+
+ it("removes the patch and rethrows on failure", async () => {
+ const quotingPost = quotingPostWith(quotedViewRecord);
+ const mockApi = {
+ getPostgateRecord: async () => {
+ throw recordNotFoundError();
+ },
+ putPostgateRecord: async () => {
+ throw new Error("network down");
+ },
+ };
+ const { mutations, dataStore, patchStore } = setup(mockApi, quotingPost);
+
+ await assert.rejects(
+ () => mutations.toggleQuoteDetachment(quotingPost, quotedPostUri, true),
+ /network down/,
+ );
+ assert.deepEqual(patchStore.$postPatches.get(quotingPostUri), []);
+ assert.deepEqual(
+ dataStore.$posts.get(quotingPostUri).embed.record,
+ quotedViewRecord,
+ );
+ });
+
+ it("refuses to write for a quoted post the user doesn't own", async () => {
+ const quotingPost = quotingPostWith(quotedViewRecord);
+ const { mutations } = setup({}, quotingPost);
+ await assert.rejects(
+ () =>
+ mutations.toggleQuoteDetachment(
+ quotingPost,
+ "at://did:plc:other/app.bsky.feed.post/abc",
+ true,
+ ),
+ /quoted post's author/,
+ );
+ });
+});
+
describe("updateThreadgateAllow", () => {
const userDid = "did:plc:me";
const postUri = `at://${userDid}/app.bsky.feed.post/abc`;