a simple pds frontend for listing accounts and generating invite codes
add pagniation to account list
+54
-1
+54
-1
src/routes/+page.svelte
+54
-1
src/routes/+page.svelte
···
9
9
let inviteError = "";
10
10
let copied = false;
11
11
12
+
const PAGE_SIZE = 10;
13
+
let page = 0;
14
+
$: pageCount = Math.ceil(data.accounts.length / PAGE_SIZE);
15
+
$: visible = data.accounts.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
16
+
12
17
async function generateInvite() {
13
18
inviteState = "loading";
14
19
inviteError = "";
···
56
61
<hr class="dashed" />
57
62
58
63
<ul class="accounts">
59
-
{#each data.accounts as account (account.did)}
64
+
{#each visible as account (account.did)}
60
65
<li class="account">
61
66
<img
62
67
class="avatar"
···
114
119
</li>
115
120
{/each}
116
121
</ul>
122
+
123
+
{#if pageCount > 1}
124
+
<div class="pagination">
125
+
<button onclick={() => page--} disabled={page === 0} class="page-btn">←</button>
126
+
<span class="page-info">{page + 1} / {pageCount}</span>
127
+
<button onclick={() => page++} disabled={page >= pageCount - 1} class="page-btn">→</button>
128
+
</div>
129
+
{/if}
117
130
118
131
<hr class="dashed" />
119
132
···
317
330
318
331
.moover-link {
319
332
margin-left: auto;
333
+
}
334
+
335
+
.pagination {
336
+
display: flex;
337
+
align-items: center;
338
+
justify-content: center;
339
+
gap: 1rem;
340
+
padding: 0.75rem 1.5rem;
341
+
border-top: 1px solid oklch(from var(--color-fg) l c h / 0.1);
342
+
}
343
+
344
+
.page-btn {
345
+
cursor: pointer;
346
+
background: transparent;
347
+
color: var(--color-fg);
348
+
border: 2px solid var(--color-fg);
349
+
width: 2rem;
350
+
height: 2rem;
351
+
font-size: 1rem;
352
+
display: flex;
353
+
align-items: center;
354
+
justify-content: center;
355
+
padding: 0;
356
+
}
357
+
358
+
.page-btn:hover:not(:disabled) {
359
+
background: var(--color-fg);
360
+
color: var(--color-surface);
361
+
}
362
+
363
+
.page-btn:disabled {
364
+
opacity: 0.3;
365
+
cursor: not-allowed;
366
+
}
367
+
368
+
.page-info {
369
+
font-size: 0.875rem;
370
+
color: oklch(from var(--color-fg) l c h / 0.6);
371
+
min-width: 4rem;
372
+
text-align: center;
320
373
}
321
374
</style>