From c6fe07ec87edc809f636d4ec7554f075219d7d37 Mon Sep 17 00:00:00 2001
From: Bretton <36870434+BrettM86@users.noreply.github.com>
Date: Thu, 16 Jul 2026 03:10:40 -0700
Subject: [PATCH] fix(community): keep optimistic subscribe state local to list
 items
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CommunityItem and CommunityItemBig mutated the community prop's viewer
state on subscribe/unsubscribe — a prop they don't own (lists pass it
unbound), warning on every toggle. Track the optimistic state locally
instead; server state wins on the next load.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../feature/community/CommunityItem.svelte    | 43 +++++++++++--------
 .../feature/community/CommunityItemBig.svelte | 43 +++++++++++--------
 2 files changed, 48 insertions(+), 38 deletions(-)

diff --git a/src/lib/feature/community/CommunityItem.svelte b/src/lib/feature/community/CommunityItem.svelte
index 40c43636..5c60bfa5 100644
--- a/src/lib/feature/community/CommunityItem.svelte
+++ b/src/lib/feature/community/CommunityItem.svelte
@@ -27,6 +27,29 @@
     showCounts = true,
     children,
   }: Props = $props()
+
+  // Optimistic subscribe state lives locally instead of mutating the
+  // `community` prop, which this component does not own (the list passes it
+  // unbound). Server state wins again on the next load.
+  let subscribedOverride = $state<boolean | undefined>(undefined)
+  let subscribed = $derived(
+    subscribedOverride ?? community.viewer?.subscribed === true,
+  )
+
+  async function toggleSubscribe(): Promise<void> {
+    const wasSubscribed = subscribed
+    try {
+      if (wasSubscribed) {
+        await coves().unsubscribe({ community: community.did })
+      } else {
+        await coves().subscribe({ community: community.did })
+      }
+      subscribedOverride = !wasSubscribed
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err)
+      toast({ content: errorMsg, type: 'error' })
+    }
+  }
 </script>
 
 {#snippet communityInfo()}
@@ -61,27 +84,9 @@
       <Icon src={InformationCircle} size="16" mini />
     </Button>
     {#if profile.current?.jwt}
-      {@const subscribed = community.viewer?.subscribed === true}
       <Button
         disabled={!profile.current?.jwt}
-        onclick={async () => {
-          const wasSubscribed = community.viewer?.subscribed === true
-          try {
-            if (wasSubscribed) {
-              await coves().unsubscribe({ community: community.did })
-            } else {
-              await coves().subscribe({ community: community.did })
-            }
-            if (community.viewer) {
-              community.viewer.subscribed = !wasSubscribed
-            } else {
-              community.viewer = { subscribed: !wasSubscribed }
-            }
-          } catch (err) {
-            const errorMsg = err instanceof Error ? err.message : String(err)
-            toast({ content: errorMsg, type: 'error' })
-          }
-        }}
+        onclick={toggleSubscribe}
         size="custom"
         title={subscribed
           ? $t('cards.community.subscribed')
diff --git a/src/lib/feature/community/CommunityItemBig.svelte b/src/lib/feature/community/CommunityItemBig.svelte
index 6788151c..e2121442 100644
--- a/src/lib/feature/community/CommunityItemBig.svelte
+++ b/src/lib/feature/community/CommunityItemBig.svelte
@@ -32,6 +32,29 @@
 
   let banner = $derived(getBanner(community))
   let bannerError = $state(false)
+
+  // Optimistic subscribe state lives locally instead of mutating the
+  // `community` prop, which this component does not own (the list passes it
+  // unbound). Server state wins again on the next load.
+  let subscribedOverride = $state<boolean | undefined>(undefined)
+  let subscribed = $derived(
+    subscribedOverride ?? community.viewer?.subscribed === true,
+  )
+
+  async function toggleSubscribe(): Promise<void> {
+    const wasSubscribed = subscribed
+    try {
+      if (wasSubscribed) {
+        await coves().unsubscribe({ community: community.did })
+      } else {
+        await coves().subscribe({ community: community.did })
+      }
+      subscribedOverride = !wasSubscribed
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err)
+      toast({ content: errorMsg, type: 'error' })
+    }
+  }
 </script>
 
 {#snippet communityInfo()}
@@ -104,27 +127,9 @@
       <Icon src={InformationCircle} size="16" mini />
     </Button>
     {#if profile.current?.jwt}
-      {@const subscribed = community.viewer?.subscribed === true}
       <Button
         disabled={!profile.current?.jwt}
-        onclick={async () => {
-          const wasSubscribed = community.viewer?.subscribed === true
-          try {
-            if (wasSubscribed) {
-              await coves().unsubscribe({ community: community.did })
-            } else {
-              await coves().subscribe({ community: community.did })
-            }
-            if (community.viewer) {
-              community.viewer.subscribed = !wasSubscribed
-            } else {
-              community.viewer = { subscribed: !wasSubscribed }
-            }
-          } catch (err) {
-            const errorMsg = err instanceof Error ? err.message : String(err)
-            toast({ content: errorMsg, type: 'error' })
-          }
-        }}
+        onclick={toggleSubscribe}
         title={subscribed
           ? $t('cards.community.subscribed')
           : $t('cards.community.subscribe')}
-- 
2.51.2