From 68932bec820a6d6d1da4e3b8a1550effcbeb61ea Mon Sep 17 00:00:00 2001
From: RisingOrange <jakub.fidler@protonmail.com>
Date: Fri, 20 Feb 2026 20:42:36 +0100
Subject: [PATCH 1/2] refactor: extract collagen signup logic from join.md into
 CollagenSignup component

Moves the collagen campaign logic (URL param detection, state management,
conditional banners, newsletter pre-fill) out of join.md into a dedicated
CollagenSignup.svelte component. Exports userHasUid, subscribeEmail, and
newsletterEmail as bound props so join.md can share state with the bottom
newsletter signup and conditional note.
---
 src/lib/components/CollagenSignup.svelte | 61 ++++++++++++++++++++++
 src/posts/join.md                        | 65 ++----------------------
 2 files changed, 64 insertions(+), 62 deletions(-)
 create mode 100644 src/lib/components/CollagenSignup.svelte

diff --git a/src/lib/components/CollagenSignup.svelte b/src/lib/components/CollagenSignup.svelte
new file mode 100644
index 00000000..9ba54902
--- /dev/null
+++ b/src/lib/components/CollagenSignup.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import { page } from '$app/stores'
+	import NewsletterSignup from '$lib/components/NewsletterSignup.svelte'
+	import Banner from '$lib/components/Banner.svelte'
+	import Link from '$lib/components/Link.svelte'
+	import { detectAndStoreCollagenUid } from '$lib/collagen'
+
+	const campaign = 'sayno'
+
+	export let userHasUid = false
+	export let subscribeEmail = ''
+	export let newsletterEmail = ''
+	let subscribeClicked = false
+	let hideSharing = false
+
+	onMount(async () => {
+		userHasUid = detectAndStoreCollagenUid(campaign, $page.url.searchParams)
+		hideSharing = $page.url.searchParams.has('x002')
+		subscribeEmail = $page.url.searchParams.get('subscribe-email') || ''
+		if (userHasUid && subscribeEmail) {
+			newsletterEmail = subscribeEmail
+		}
+	})
+
+	function handleNewsletterClick(e: MouseEvent) {
+		const target = e.target as HTMLElement
+		if ((target as HTMLInputElement).type === 'submit' || target.closest('button[type="submit"]')) {
+			subscribeClicked = true
+		}
+	}
+</script>
+
+{#if userHasUid && subscribeEmail}
+	<Banner id="join-subscribed">
+		{#if !subscribeClicked}
+			<strong>Welcome collage member!</strong> Click Subscribe to join the newsletter.
+		{:else}
+			<strong>Thanks.</strong> Scroll down if you feel active already!
+		{/if}
+	</Banner>
+
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div on:click={handleNewsletterClick}>
+		<NewsletterSignup bind:email={newsletterEmail} />
+	</div>
+
+	{#if !hideSharing}
+		<p>
+			<strong>Help us grow:</strong>
+			<Link href="/{campaign}/share">Share the {campaign} campaign with your networks</Link>
+		</p>
+	{/if}
+{:else if userHasUid && !subscribeEmail}
+	<Banner id="join-error">
+		<strong>Sorry!</strong> We couldn't complete your subscription automatically. Please enter your email
+		below to subscribe.
+	</Banner>
+	<NewsletterSignup />
+{/if}
diff --git a/src/posts/join.md b/src/posts/join.md
index cee7f2a3..bf36df25 100644
--- a/src/posts/join.md
+++ b/src/posts/join.md
@@ -4,75 +4,16 @@ description: Sign up to join the PauseAI movement
 ---
 
 <script>
-    import { onMount, tick } from 'svelte'
-    import { page } from '$app/stores'
     import TallyEmbed from '$lib/components/TallyEmbed.svelte'
     import NewsletterSignup from '$lib/components/NewsletterSignup.svelte'
-    import Banner from '$lib/components/Banner.svelte'
-    import { detectAndStoreCollagenUid } from '$lib/collagen'
-
-    const campaign = 'sayno' // Campaign name for collagen tracking
+    import CollagenSignup from '$lib/components/CollagenSignup.svelte'
 
+    let newsletterEmail = ''
     let userHasUid = false
     let subscribeEmail = ''
-    let newsletterEmail = ''
-    let subscribeClicked = false
-    let hideSharing = false
-
-    onMount(async () => {
-        // Check for collagen UID in URL params - this sets the cookie and triggers auto-subscribe
-        userHasUid = detectAndStoreCollagenUid(campaign, $page.url.searchParams)
-
-        // Check if x002 experiment parameter is present (control = hide sharing)
-        hideSharing = $page.url.searchParams.has('x002')
-
-        // Get the email parameter if provided (should be present when userHasUid is true)
-        subscribeEmail = $page.url.searchParams.get('subscribe-email') || ''
-
-        // If user came from collagen email with uid, pre-fill the form
-        if (userHasUid && subscribeEmail) {
-            // Pre-fill the newsletter form
-            newsletterEmail = subscribeEmail
-        }
-    })
-
-    // Track when subscribe is clicked
-    function handleNewsletterClick(e) {
-        // Check if the clicked element is the submit button or inside the form
-        if (e.target.type === 'submit' || e.target.closest('button[type="submit"]')) {
-            subscribeClicked = true
-        }
-    }
 </script>
 
-{#if userHasUid && subscribeEmail}
-<Banner id="join-subscribed">
-{#if !subscribeClicked}
-<strong>Welcome collage member!</strong> Click Subscribe to join the newsletter.
-{:else}
-<strong>Thanks.</strong> Scroll down if you feel active already!
-{/if}
-</Banner>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-
-<div on:click={handleNewsletterClick}>
-<NewsletterSignup bind:email={newsletterEmail} />
-</div>
-
-{#if !hideSharing}
-
-<p><strong>Help us grow:</strong> <a href="/{campaign}/share">Share the {campaign} campaign with your networks</a></p>
-{/if}
-
-{:else if userHasUid && !subscribeEmail}
-<Banner id="join-error">
-<strong>Sorry!</strong> We couldn't complete your subscription automatically. Please enter your email below to subscribe.
-</Banner>
-<NewsletterSignup />
-{/if}
+<CollagenSignup bind:newsletterEmail bind:userHasUid bind:subscribeEmail />
 
 This is our nuclear moment.
 Rapid AI advancement represents one of history's most consequential and dangerous technological shifts.

From 9a93b9ad3ac8a466fc15ad9d3b114e0461458d09 Mon Sep 17 00:00:00 2001
From: RisingOrange <jakub.fidler@protonmail.com>
Date: Fri, 20 Feb 2026 20:42:56 +0100
Subject: [PATCH 2/2] refactor: use submit event instead of click for
 newsletter submit tracking

on:submit is more semantically correct than detecting click events on the
submit button. submit events bubble and cover all submission paths regardless
of browser-specific synthetic click behaviour.
---
 src/lib/components/CollagenSignup.svelte | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/CollagenSignup.svelte b/src/lib/components/CollagenSignup.svelte
index 9ba54902..d4f7eb3e 100644
--- a/src/lib/components/CollagenSignup.svelte
+++ b/src/lib/components/CollagenSignup.svelte
@@ -11,7 +11,7 @@
 	export let userHasUid = false
 	export let subscribeEmail = ''
 	export let newsletterEmail = ''
-	let subscribeClicked = false
+	let submitted = false
 	let hideSharing = false
 
 	onMount(async () => {
@@ -22,27 +22,18 @@
 			newsletterEmail = subscribeEmail
 		}
 	})
-
-	function handleNewsletterClick(e: MouseEvent) {
-		const target = e.target as HTMLElement
-		if ((target as HTMLInputElement).type === 'submit' || target.closest('button[type="submit"]')) {
-			subscribeClicked = true
-		}
-	}
 </script>
 
 {#if userHasUid && subscribeEmail}
 	<Banner id="join-subscribed">
-		{#if !subscribeClicked}
+		{#if !submitted}
 			<strong>Welcome collage member!</strong> Click Subscribe to join the newsletter.
 		{:else}
 			<strong>Thanks.</strong> Scroll down if you feel active already!
 		{/if}
 	</Banner>
 
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div on:click={handleNewsletterClick}>
+	<div on:submit={() => (submitted = true)}>
 		<NewsletterSignup bind:email={newsletterEmail} />
 	</div>