Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170<script lang="ts"> import { untrack } from "svelte"; import type { Did } from "@atcute/lexicons/syntax"; import { now as tidNow } from "@atcute/tid"; import Button from "$lib/components/ui/Button.svelte"; import Card from "$lib/components/ui/Card.svelte"; import Input from "$lib/components/ui/Input.svelte"; import Spinner from "$lib/components/ui/Spinner.svelte"; import Textarea from "$lib/components/ui/Textarea.svelte"; import ErrorAlert from "$lib/components/ui/Error.svelte"; import Separator from "$lib/components/ui/Separator.svelte"; import ArrowUp from "$icon/arrow-up"; import X from "$icon/x"; import { getAuth } from "$lib/auth.svelte"; import AccountSelector from "$lib/components/auth/AccountSelector.svelte"; import { putString } from "$lib/api/strings"; import type { StringRecord } from "$lib/api/records"; import { createAction } from "$lib/action.svelte"; import Field from "$lib/components/ui/Field.svelte";
interface Props { mode?: "create" | "edit"; rkey?: string; createdAt?: string; filename?: string; description?: string; content?: string; onsaved: (rkey: string, handle: string) => void; oncancel?: () => void; }
let { mode = "create", rkey, createdAt, filename: initialFilename = "", description: initialDescription = "", content: initialContent = "", onsaved, oncancel }: Props = $props();
const auth = getAuth(); const accounts = $derived(auth?.accounts ?? []);
let picked = $state<string | null>(null); const acting = $derived( accounts.find((account) => account.did === picked) ?? { did: auth?.currentDid ?? "", handle: auth?.currentUser?.handle ?? "" } );
let filename = $state(untrack(() => initialFilename)); let description = $state(untrack(() => initialDescription)); let content = $state(untrack(() => initialContent));
const lineCount = $derived(content === "" ? 0 : content.split("\n").length); const byteCount = $derived(new TextEncoder().encode(content).length);
const publish = createAction(async (event: SubmitEvent) => { event.preventDefault(); if (!auth?.currentDid) return; const agent = await auth.agentFor(acting.did as Did); const targetRkey = rkey ?? tidNow(); const record: StringRecord = { $type: "sh.tangled.string", filename, description, contents: content, createdAt: createdAt ?? new Date().toISOString() }; await putString(agent, targetRkey, record); onsaved(targetRkey, acting.handle); });</script>
<Card> <form onsubmit={publish.run} class="flex flex-col gap-4"> <div class="flex flex-col gap-2"> <div class="flex flex-col gap-2 md:flex-row"> <Field label="Filename" required={true}> <Input id="filename" name="filename" placeholder="main.rs" required bind:value={filename} disabled={publish.loading} class="md:max-w-64" /> </Field> <Field label="Description" class="flex-1"> <Input id="description" name="description" placeholder="What this string is for" maxlength={280} bind:value={description} disabled={publish.loading} /> </Field> </div>
<Field label="Content" required={true}> <Textarea id="content" name="content" placeholder="Paste or write your content here" required rows={20} spellcheck={false} resizeable bind:value={content} disabled={publish.loading} /> </Field> </div>
<div class="flex items-center justify-between"> <div class="px-2 text-foreground-muted"> <span class="typography-monospace-small" >{lineCount} line{lineCount !== 1 ? "s" : ""}</span > <Separator variant="dot" class="px-1" /> <span class="typography-monospace-small" >{byteCount} byte{byteCount !== 1 ? "s" : ""}</span > </div>
<div class="flex items-center gap-2"> {#if mode === "edit"} <Button type="button" variant="default" icon={X} disabled={publish.loading} onclick={oncancel} > Cancel </Button> {/if} {#if mode === "create"} <AccountSelector {accounts} align="right" bind:value={() => acting.did, (did) => (picked = did)} label="Publish as" disabled={publish.loading} group="string-form" /> {/if} <Button type="submit" variant="primary" icon={publish.loading ? Spinner : ArrowUp} disabled={publish.loading} insetShadow={true} > Publish </Button> </div> </div>
{#if publish.error} <ErrorAlert label={publish.error} /> {/if} </form></Card>