alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { untrack } from "svelte";
3 import { resolve } from "$app/paths";
4 import { getAuth } from "$lib/auth.svelte";
5 import { createBobbinClient } from "$lib/api/client";
6 import RepoCard from "$lib/components/repo/RepoCard.svelte";
7 import Card from "$lib/components/ui/Card.svelte";
8 import Section from "$lib/components/ui/Section.svelte";
9 import Pagination from "$lib/components/ui/Pagination.svelte";
10 import Error from "$lib/components/ui/Error.svelte";
11 import { createCursorPager, pageCount } from "../pagination.svelte";
12 import { PROFILE_PAGE_LIMIT, fetchStarredPage } from "../pages";
13 import type { StarData } from "../types";
14
15 interface Props {
16 initial: StarData[];
17 cursor?: string;
18 total: number;
19 did: string;
20 }
21
22 let { initial, cursor: initialCursor, total, did }: Props = $props();
23
24 const auth = getAuth();
25
26 const pager = createCursorPager(
27 { items: untrack(() => initial), cursor: untrack(() => initialCursor) },
28 (cursor) => {
29 const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl });
30 return fetchStarredPage(ctx, {
31 did,
32 viewerDid: auth.currentDid ?? undefined,
33 cursor
34 });
35 }
36 );
37 const stars = $derived(pager.items);
38 const pages = $derived(pageCount(total, PROFILE_PAGE_LIMIT));
39</script>
40
41<Section title="Starred" empty={stars.length === 0} emptyMessage="No stars yet.">
42 {#each stars as star (star.uri)}
43 {#if star.kind === "repo"}
44 <RepoCard repo={star.repo} />
45 {:else}
46 <Card shadow={false} class="flex items-center gap-2">
47 <a
48 href={resolve(`/${star.ownerHandle}/strings/${star.rkey}` as "/")}
49 class="truncate font-bold text-foreground-default no-underline hover:underline"
50 >
51 {star.ownerHandle}/{star.rkey}
52 </a>
53 </Card>
54 {/if}
55 {/each}
56 {#snippet footer()}
57 {#if pages > 1}
58 <div class="mt-4 flex justify-center">
59 <Pagination
60 page={pager.state.page}
61 total={pages}
62 labels
63 disabled={pager.state.kind === "loading"}
64 onchange={pager.select}
65 class="gap-5"
66 />
67 </div>
68 {/if}
69 {#if pager.state.kind === "failed"}
70 <Error label="couldn't load that page. try again." class="mt-2" />
71 {/if}
72 {/snippet}
73</Section>