Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at icy/tmrrpn
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102<script lang="ts"> import { page } from "$app/state"; import Eye from "$icon/eye"; import EyeOff from "$icon/eye-off"; import { getAuth } from "$lib/auth.svelte"; import { loginWithReturn } from "$lib/auth/guards"; import { createSubscription, deleteSubscription, getSubscriptionRkey } from "$lib/api/graph"; import { createBobbinClient } from "$lib/api/client"; import Button from "$lib/components/ui/Button.svelte";
import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte"; import { resolve } from "$app/paths";
interface Props { repoDid: string; }
let { repoDid }: Props = $props();
const auth = getAuth(); const signedIn = $derived(Boolean(auth.currentDid)); const loginHref = $derived( resolve(loginWithReturn(page.url.pathname + page.url.search) as "/login"), );
let subscribed = $state(false); let loading = $state(true); let toggling = $state(false); let subRkey = $state<string | null>(null); let error = $state<string | null>(null);
$effect(() => { const agent = auth.agent; const did = auth.currentDid; if (!agent || !did || !repoDid) { subscribed = false; subRkey = null; loading = false; return; } let cancelled = false; loading = true; error = null; const bobbinUrl = (page.data as { publicConfig?: { bobbinUrl?: string } })?.publicConfig?.bobbinUrl; if (!bobbinUrl) { loading = false; return; } const ctx = createBobbinClient({ serviceUrl: bobbinUrl }); getSubscriptionRkey(ctx, did, repoDid).then((rkey) => { if (cancelled) return; subRkey = rkey; subscribed = !!rkey; loading = false; }).catch(() => { if (!cancelled) { loading = false; error = "Could not load subscription state"; } }); return () => { cancelled = true; }; });
const toggle = async () => { const agent = auth.agent; if (!agent || loading || toggling || !repoDid) return; error = null; toggling = true; try { if (subscribed && subRkey) { await deleteSubscription(agent, subRkey); subscribed = false; subRkey = null; } else { subRkey = await createSubscription(agent, repoDid); subscribed = true; } } catch { error = "Failed to update subscription"; } finally { toggling = false; } };</script>
{#if signedIn} <ButtonGroup> {#if loading} <Button variant="default" size="small" disabled loading aria-label="Loading subscription state" /> {:else} <Button variant="default" size="small" icon={subscribed ? EyeOff : Eye} onclick={toggle} loading={toggling} disabled={toggling} aria-label={subscribed ? "Unsubscribe from notifications" : "Subscribe to notifications"} > {subscribed ? "Watching" : "Watch"} </Button> {/if} </ButtonGroup> {#if error} <span class="typography-paragraph-mini text-foreground-danger">{error}</span> {/if}{:else} <Button variant="default" size="small" icon={Eye} href={loginHref}> Watch </Button>{/if}