zzstoatzz.io
show inbox state (accepted/blocked) below demo
fetches state via xyz.fake.inbox.getState and displays each user's
accepted and blocked lists. helps visitors understand persisted state.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+9
src/lib/client.js
+9
src/lib/client.js
···
78
78
])
79
79
);
80
80
}
81
+
82
+
const stateRes = await fetch(`${PDS_URL}/xrpc/xyz.fake.inbox.getState`, {
83
+
headers: { Authorization: `Bearer ${this.accessToken}` }
84
+
});
85
+
if (stateRes.ok) {
86
+
const data = await stateRes.json();
87
+
this.accepted = new Set(data.accepted);
88
+
this.blocked = new Set(data.blocked);
89
+
}
81
90
}
82
91
83
92
async getServiceAuth(audienceDid, lxm) {
+56
src/routes/+page.svelte
+56
src/routes/+page.svelte
···
9
9
refresh,
10
10
tick,
11
11
getPds,
12
+
getPdsByDid,
12
13
initNetwork,
14
+
network,
13
15
ready
14
16
} from '$lib/stores.js';
15
17
···
115
117
log(`added 'spam' to ${senderHandle}`, 'magenta');
116
118
}
117
119
}
120
+
121
+
function getShortName(did) {
122
+
const p = getPdsByDid(did);
123
+
return p ? p.name : did.slice(8, 16) + '...';
124
+
}
125
+
126
+
function formatSet(set) {
127
+
if (!set || set.size === 0) return 'none';
128
+
return [...set].map(getShortName).join(', ');
129
+
}
118
130
</script>
119
131
120
132
<h1>
···
198
210
{/if}
199
211
</div>
200
212
213
+
{#if $ready}
214
+
{#key $tick}
215
+
<div class="state-summary">
216
+
<h3>current state</h3>
217
+
<div class="state-grid">
218
+
{#each Object.values(network) as pds}
219
+
<span class="name">{pds.name}</span>
220
+
<span class="accepted">accepted: {formatSet(pds.accepted)}</span>
221
+
<span class="blocked">blocked: {formatSet(pds.blocked)}</span>
222
+
{/each}
223
+
</div>
224
+
</div>
225
+
{/key}
226
+
{/if}
227
+
201
228
<footer>
202
229
<p>
203
230
demonstrating
···
411
438
padding: 1rem;
412
439
color: #444;
413
440
font-size: 12px;
441
+
}
442
+
443
+
.state-summary {
444
+
max-width: 1000px;
445
+
margin: 1.5rem auto 0;
446
+
padding: 1rem;
447
+
background: #0a0a0a;
448
+
border: 1px solid #1a1a1a;
449
+
}
450
+
.state-summary h3 {
451
+
font-size: 10px;
452
+
color: #444;
453
+
margin-bottom: 0.75rem;
454
+
text-transform: lowercase;
455
+
}
456
+
.state-grid {
457
+
display: grid;
458
+
grid-template-columns: 70px 1fr 1fr;
459
+
gap: 0.5rem 1rem;
460
+
font-size: 11px;
461
+
}
462
+
.state-grid .name {
463
+
color: #888;
464
+
}
465
+
.state-grid .accepted {
466
+
color: #2a9d5c;
467
+
}
468
+
.state-grid .blocked {
469
+
color: #a44;
414
470
}
415
471
</style>