| @@ -23,6 +23,11 @@ |
| 23 | let followed = $state<PersonRecommendation[]>([]); | 23 | let followed = $state<PersonRecommendation[]>([]); |
| 24 | let discover = $state<PersonRecommendation[]>([]); | 24 | let discover = $state<PersonRecommendation[]>([]); |
| 25 | let digest = $state<Digest | null>(null); | 25 | let digest = $state<Digest | null>(null); |
| | 26 | + let locallyRead = $state<Set<number>>(new Set()); |
| | 27 | + |
| | 28 | + const unreadArticles = $derived( |
| | 29 | + data.articles.filter((a) => !locallyRead.has(a.id)), |
| | 30 | + ); |
| 26 | | 31 | |
| 27 | $effect(() => { | 32 | $effect(() => { |
| 28 | if (data.subscription_count > 0) { | 33 | if (data.subscription_count > 0) { |
| @@ -67,6 +72,7 @@ |
| 67 | if (!confirm("Mark these articles as read?")) return; | 72 | if (!confirm("Mark these articles as read?")) return; |
| 68 | await endpoints.markDigestRead(digest.article_ids); | 73 | await endpoints.markDigestRead(digest.article_ids); |
| 69 | digest = { ...digest, consumed: true }; | 74 | digest = { ...digest, consumed: true }; |
| | 75 | + locallyRead = new Set(digest.article_ids); |
| 70 | } | 76 | } |
| 71 | | 77 | |
| 72 | const trending: TrendingItem[] = $derived([ | 78 | const trending: TrendingItem[] = $derived([ |
| @@ -116,7 +122,7 @@ |
| 116 | > | 122 | > |
| 117 | </div> | 123 | </div> |
| 118 | </div> | 124 | </div> |
| 119 | -{:else if data.articles.length > 0} | 125 | + :else if unreadArticles.length > 0 |
| 120 | <!-- Recommended articles --> | 126 | <!-- Recommended articles --> |
| 121 | {#if articleRecs && articleRecs.length > 0} | 127 | {#if articleRecs && articleRecs.length > 0} |
| 122 | <section class="mb-10"> | 128 | <section class="mb-10"> |
| @@ -211,7 +217,7 @@ |
| 211 | > | 217 | > |
| 212 | </div> | 218 | </div> |
| 213 | <div class="space-y-3"> | 219 | <div class="space-y-3"> |
| 214 | - {#each data.articles as a (a.id)} | 220 | + {#each unreadArticles as a (a.id)} |
| 215 | <ArticleCard article={a} /> | 221 | <ArticleCard article={a} /> |
| 216 | {/each} | 222 | {/each} |
| 217 | </div> | 223 | </div> |