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) {
+63
src/routes/+page.svelte
+63
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
+
<div class="state-row">
220
+
<span class="name">{pds.name}</span>
221
+
<span class="accepted">accepted: {formatSet(pds.accepted)}</span>
222
+
<span class="blocked">blocked: {formatSet(pds.blocked)}</span>
223
+
</div>
224
+
{/each}
225
+
</div>
226
+
</div>
227
+
{/key}
228
+
{/if}
229
+
201
230
<footer>
202
231
<p>
203
232
demonstrating
···
411
440
padding: 1rem;
412
441
color: #444;
413
442
font-size: 12px;
443
+
}
444
+
445
+
.state-summary {
446
+
max-width: 1000px;
447
+
margin: 1.5rem auto 0;
448
+
padding: 1rem;
449
+
background: #0a0a0a;
450
+
border: 1px solid #1a1a1a;
451
+
}
452
+
.state-summary h3 {
453
+
font-size: 10px;
454
+
color: #444;
455
+
margin-bottom: 0.75rem;
456
+
text-transform: lowercase;
457
+
}
458
+
.state-grid {
459
+
display: flex;
460
+
flex-direction: column;
461
+
gap: 0.5rem;
462
+
}
463
+
.state-row {
464
+
display: flex;
465
+
gap: 1.5rem;
466
+
font-size: 11px;
467
+
}
468
+
.state-row .name {
469
+
color: #888;
470
+
min-width: 60px;
471
+
}
472
+
.state-row .accepted {
473
+
color: #2a9d5c;
474
+
}
475
+
.state-row .blocked {
476
+
color: #a44;
414
477
}
415
478
</style>