Check existing subs and offer to unsubscribe

docs/src/routes/subscribe.ts

···
 
 subscribe.get("/", async (c) => {
 	const publicationUri = c.req.query("publicationUri");
+	const action = c.req.query("action");
+	const wantsJson = c.req.header("accept")?.includes("application/json");
+
+	// JSON path: subscription status check for the web component.
+	if (wantsJson) {
+		if (action && action !== "unsubscribe") {
+			return c.json({ error: `Unsupported action: ${action}` }, 400);
+		}
+		if (!publicationUri || !publicationUri.startsWith("at://")) {
+			return c.json({ error: "Missing or invalid publicationUri" }, 400);
+		}
+		const did = getSessionDid(c);
+		if (!did) {
+			return c.json({ authenticated: false }, 401);
+		}
+		try {
+			const client = createOAuthClient(
+				c.env.SEQUOIA_SESSIONS,
+				c.env.CLIENT_URL,
+			);
+			const session = await client.restore(did);
+			const agent = new Agent(session);
+			const recordUri = await findExistingSubscription(
+				agent,
+				did,
+				publicationUri,
+			);
+			return recordUri
+				? c.json({ subscribed: true, recordUri })
+				: c.json({ subscribed: false });
+		} catch {
+			return c.json({ authenticated: false }, 401);
+		}
+	}
+
+	// HTML path: full-page subscribe/unsubscribe flow.
 	const styleHref = await getVocsStyleHref(c.env.ASSETS, c.req.url);
 
+	if (action && action !== "unsubscribe") {
+		return c.html(renderError(`Unsupported action: ${action}`, styleHref), 400);
+	}
+
 	if (!publicationUri || !publicationUri.startsWith("at://")) {
 		return c.html(
 			renderError("Missing or invalid publication URI.", styleHref),
···
 
 	const did = getSessionDid(c);
 	if (!did) {
-		return c.html(renderHandleForm(publicationUri, styleHref, returnTo));
+		return c.html(
+			renderHandleForm(publicationUri, styleHref, returnTo, undefined, action),
+		);
 	}
 
 	try {
···
 		const session = await client.restore(did);
 		const agent = new Agent(session);
 
+		if (action === "unsubscribe") {
+			const existingUri = await findExistingSubscription(
+				agent,
+				did,
+				publicationUri,
+			);
+			if (existingUri) {
+				const rkey = existingUri.split("/").pop()!;
+				await agent.com.atproto.repo.deleteRecord({
+					repo: did,
+					collection: COLLECTION,
+					rkey,
+				});
+			}
+			return c.html(
+				renderSuccess(
+					publicationUri,
+					null,
+					"Unsubscribed ✓",
+					existingUri
+						? "You've successfully unsubscribed!"
+						: "You weren't subscribed to this publication.",
+					styleHref,
+					returnTo,
+				),
+			);
+		}
+
 		const existingUri = await findExistingSubscription(
 			agent,
 			did,
···
 		);
 		if (existingUri) {
 			return c.html(
-				renderSuccess(publicationUri, existingUri, true, styleHref, returnTo),
+				renderSuccess(
+					publicationUri,
+					existingUri,
+					"Subscribed ✓",
+					"You're already subscribed to this publication.",
+					styleHref,
+					returnTo,
+				),
 			);
 		}
 
···
 			renderSuccess(
 				publicationUri,
 				result.data.uri,
-				false,
+				"Subscribed ✓",
+				"You've successfully subscribed!",
 				styleHref,
 				returnTo,
 			),
···
 				styleHref,
 				returnTo,
 				"Session expired. Please sign in again.",
+				action,
 			),
 		);
 	}
···
 	const handle = (body["handle"] as string | undefined)?.trim();
 	const publicationUri = body["publicationUri"] as string | undefined;
 	const formReturnTo = (body["returnTo"] as string | undefined) || undefined;
+	const formAction = (body["action"] as string | undefined) || undefined;
 
 	if (!handle || !publicationUri) {
 		const styleHref = await getVocsStyleHref(c.env.ASSETS, c.req.url);
···
 
 	const returnTo =
 		`${c.env.CLIENT_URL}/subscribe?publicationUri=${encodeURIComponent(publicationUri)}` +
+		(formAction ? `&action=${encodeURIComponent(formAction)}` : "") +
 		(formReturnTo ? `&returnTo=${encodeURIComponent(formReturnTo)}` : "");
 	setReturnToCookie(c, returnTo, c.env.CLIENT_URL);
 
···
 	styleHref: string,
 	returnTo?: string,
 	error?: string,
+	action?: string,
 ): string {
 	const errorHtml = error
 		? `<p class="vocs_Paragraph error">${escapeHtml(error)}</p>`
···
 	const returnToInput = returnTo
 		? `<input type="hidden" name="returnTo" value="${escapeHtml(returnTo)}" />`
 		: "";
+	const actionInput = action
+		? `<input type="hidden" name="action" value="${escapeHtml(action)}" />`
+		: "";
 
 	return page(
 		`
···
 		<form method="POST" action="/subscribe/login">
 			<input type="hidden" name="publicationUri" value="${escapeHtml(publicationUri)}" />
 			${returnToInput}
+			${actionInput}
 			<input
 				type="text"
 				name="handle"
···
 
 function renderSuccess(
 	publicationUri: string,
-	recordUri: string,
-	existing: boolean,
+	recordUri: string | null,
+	heading: string,
+	msg: string,
 	styleHref: string,
 	returnTo?: string,
 ): string {
-	const msg = existing
-		? "You're already subscribed to this publication."
-		: "You've successfully subscribed!";
 	const escapedPublicationUri = escapeHtml(publicationUri);
-	const escapedRecordUri = escapeHtml(recordUri);
+	const escapedReturnTo = returnTo ? escapeHtml(returnTo) : "";
 
 	const redirectHtml = returnTo
-		? `<p class="vocs_Paragraph" id="redirect-msg">Redirecting to <a class="vocs_Anchor" href="${escapeHtml(returnTo)}">${escapeHtml(returnTo)}</a> in <span id="countdown">${REDIRECT_DELAY_SECONDS}</span>\u00a0seconds\u2026</p>
+		? `<p class="vocs_Paragraph" id="redirect-msg">Redirecting to <a class="vocs_Anchor" href="${escapedReturnTo}">${escapedReturnTo}</a> in <span id="countdown">${REDIRECT_DELAY_SECONDS}</span>\u00a0seconds\u2026</p>
 		<script>
 		(function(){
 			var secs = ${REDIRECT_DELAY_SECONDS};
···
 		</script>`
 		: "";
 	const headExtra = returnTo
-		? `<meta http-equiv="refresh" content="${REDIRECT_DELAY_SECONDS};url=${escapeHtml(returnTo)}" />`
+		? `<meta http-equiv="refresh" content="${REDIRECT_DELAY_SECONDS};url=${escapedReturnTo}" />`
 		: "";
 
 	return page(
 		`
-		<h1 class="vocs_H1 vocs_Heading">Subscribed ✓</h1>
+		<h1 class="vocs_H1 vocs_Heading">${escapeHtml(heading)}</h1>
 		<p class="vocs_Paragraph">${msg}</p>
 		${redirectHtml}
 		<table class="vocs_Table" style="display:table;table-layout:fixed;width:100%;overflow:hidden;">
···
 						<div style="overflow-x:auto;white-space:nowrap;"><code class="vocs_Code"><a href="https://pds.ls/${escapedPublicationUri}">${escapedPublicationUri}</a></code></div>
 					</td>
 				</tr>
-				<tr class="vocs_TableRow">
+				${
+					recordUri
+						? `<tr class="vocs_TableRow">
 					<td class="vocs_TableCell">Record</td>
 					<td class="vocs_TableCell" style="overflow:hidden;">
-						<div style="overflow-x:auto;white-space:nowrap;"><code class="vocs_Code"><a href="https://pds.ls/${escapedRecordUri}">${escapedRecordUri}</a></code></div>
+						<div style="overflow-x:auto;white-space:nowrap;"><code class="vocs_Code"><a href="https://pds.ls/${escapeHtml(recordUri)}">${escapeHtml(recordUri)}</a></code></div>
 					</td>
-				</tr>
+				</tr>`
+						: ""
+				}
 			</tbody>
 		</table>
 	`,

packages/cli/src/components/sequoia-subscribe.js

···
 	flex-shrink: 0;
 }
 
-.sequoia-subscribe-button--success {
-	background: #16a34a;
-}
-
-.sequoia-subscribe-button--success:hover:not(:disabled) {
-	background: color-mix(in srgb, #16a34a 85%, black);
-}
-
 .sequoia-loading-spinner {
 	display: inline-block;
 	width: 1rem;
···
 
 const BLUESKY_ICON = `<svg class="sequoia-bsky-logo" viewBox="0 0 600 530" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"/>
-</svg>`;
-
-const CHECK_ICON = `<svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
 </svg>`;
 
 // ============================================================================
···
 		wrapper.part = "container";
 
 		this.wrapper = wrapper;
+		this.subscribed = false;
 		this.state = { type: "idle" };
 		this.abortController = null;
 		this.render();
···
 	}
 
 	connectedCallback() {
-		// Pre-check publication availability so hide="auto" can take effect
-		if (!this.publicationUri) {
-			this.checkPublication();
-		}
+		this.checkPublication();
 	}
 
 	disconnectedCallback() {
···
 	}
 
 	attributeChangedCallback() {
-		// Reset to idle if attributes change after an error or success
-		if (
-			this.state.type === "error" ||
-			this.state.type === "subscribed" ||
-			this.state.type === "no-publication"
-		) {
+		if (this.state.type === "error" || this.state.type === "no-publication") {
 			this.state = { type: "idle" };
 		}
 		this.render();
···
 		this.abortController = new AbortController();
 
 		try {
-			await fetchPublicationUri();
+			const uri = this.publicationUri ?? (await fetchPublicationUri());
+			this.checkSubscription(uri);
 		} catch {
 			this.state = { type: "no-publication" };
 			this.render();
 		}
 	}
 
+	async checkSubscription(publicationUri) {
+		try {
+			const res = await fetch(
+				`${this.callbackUri}?publicationUri=${encodeURIComponent(publicationUri)}`,
+				{
+					headers: { Accept: "application/json" },
+					credentials: "include",
+				},
+			);
+			if (!res.ok) return;
+			const data = await res.json();
+			if (data.subscribed) {
+				this.subscribed = true;
+				this.render();
+			}
+		} catch {
+			// Ignore errors — show default subscribe button
+		}
+	}
+
 	async handleClick() {
-		if (this.state.type === "loading" || this.state.type === "subscribed") {
+		if (this.state.type === "loading") {
+			return;
+		}
+
+		// Unsubscribe: redirect to full-page unsubscribe flow
+		if (this.subscribed) {
+			const publicationUri =
+				this.publicationUri ?? (await fetchPublicationUri());
+			window.location.href = `${this.callbackUri}?publicationUri=${encodeURIComponent(publicationUri)}&action=unsubscribe`;
 			return;
 		}
 
···
 			const publicationUri =
 				this.publicationUri ?? (await fetchPublicationUri());
 
-			// POST to the callbackUri (e.g. https://sequoia.pub/subscribe).
-			// If the server reports the user isn't authenticated it returns a
-			// subscribeUrl for the full-page OAuth + subscription flow.
 			const response = await fetch(this.callbackUri, {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
···
 			}
 
 			const { recordUri } = data;
-			this.state = { type: "subscribed", recordUri, publicationUri };
+			this.subscribed = true;
+			this.state = { type: "idle" };
 			this.render();
 
 			this.dispatchEvent(
···
 				}),
 			);
 		} catch (error) {
-			// Don't overwrite state if we already navigated away
 			if (this.state.type !== "loading") return;
 
 			const message =
···
 		}
 
 		const isLoading = type === "loading";
-		const isSubscribed = type === "subscribed";
 
 		const icon = isLoading
 			? `<span class="sequoia-loading-spinner"></span>`
-			: isSubscribed
-				? CHECK_ICON
-				: BLUESKY_ICON;
+			: BLUESKY_ICON;
 
-		const label = isSubscribed ? "Subscribed" : this.label;
-		const buttonClass = [
-			"sequoia-subscribe-button",
-			isSubscribed ? "sequoia-subscribe-button--success" : "",
-		]
-			.filter(Boolean)
-			.join(" ");
+		const label = this.subscribed ? "Unsubscribe on Bluesky" : this.label;
 
 		const errorHtml =
 			type === "error"
···
 
 		this.wrapper.innerHTML = `
 			<button
-				class="${buttonClass}"
+				class="sequoia-subscribe-button"
 				type="button"
 				part="button"
-				${isLoading || isSubscribed ? "disabled" : ""}
-				aria-label="${isSubscribed ? "Subscribed" : this.label}"
+				${isLoading ? "disabled" : ""}
+				aria-label="${label}"
 			>
 				${icon}
 				${label}
···
 			${errorHtml}
 		`;
 
-		if (type !== "subscribed") {
-			const btn = this.wrapper.querySelector("button");
-			btn?.addEventListener("click", () => this.handleClick());
-		}
+		const btn = this.wrapper.querySelector("button");
+		btn?.addEventListener("click", () => this.handleClick());
 	}
 }