tangled.org
Monorepo for Tangled
tangled.org
web/routes: refactor string form to use putString
Signed-off-by: oppiliappan <me@oppi.li>
author
oppiliappan
committer
Tangled
date
(Jul 24, 2026, 9:09 PM +0300)
commit
7e1f71c7
7e1f71c72a133a689ea8528bac34a6c91defa9d2
parent
91f1297b
91f1297b9d8576590d2b0a61b69f295d6285c2ce
change-id
vxykmlrk
vxykmlrksvmptlxsktumswyorpywqusq
+27
-38
+24
-12
web/src/lib/components/strings/StringForm.svelte
+24
-12
web/src/lib/components/strings/StringForm.svelte
···
1
-
<script module lang="ts">
2
-
export interface StringFormData {
3
-
filename: string;
4
-
description: string;
5
-
content: string;
6
-
}
7
-
</script>
8
-
9
1
<script lang="ts">
10
2
import { untrack } from "svelte";
3
+
import { now as tidNow } from "@atcute/tid";
11
4
import Button from "$lib/components/ui/Button.svelte";
12
5
import Spinner from "$lib/components/ui/Spinner.svelte";
13
6
import ErrorAlert from "$lib/components/ui/Error.svelte";
14
7
import ArrowUp from "$icon/arrow-up";
15
8
import X from "$icon/x";
9
+
import { getAuth } from "$lib/auth.svelte";
10
+
import { putString } from "$lib/api/strings";
11
+
import type { StringRecord } from "$lib/api/records";
16
12
17
13
interface Props {
18
14
mode?: "create" | "edit";
15
+
rkey?: string;
16
+
createdAt?: string;
19
17
filename?: string;
20
18
description?: string;
21
19
content?: string;
22
-
onsubmit: (data: StringFormData) => Promise<void>;
20
+
onsaved: (rkey: string) => void;
23
21
oncancel?: () => void;
24
22
}
25
23
26
24
let {
27
25
mode = "create",
26
+
rkey,
27
+
createdAt,
28
28
filename: initialFilename = "",
29
29
description: initialDescription = "",
30
30
content: initialContent = "",
31
-
onsubmit,
31
+
onsaved,
32
32
oncancel
33
33
}: Props = $props();
34
34
35
-
// seed once; the props can't change while the form is open.
35
+
const auth = getAuth();
36
+
36
37
let filename = $state(untrack(() => initialFilename));
37
38
let description = $state(untrack(() => initialDescription));
38
39
let content = $state(untrack(() => initialContent));
···
44
45
45
46
const handleSubmit = async (e: SubmitEvent) => {
46
47
e.preventDefault();
48
+
const agent = auth.agent;
49
+
if (!agent || isPublishing) return;
47
50
isPublishing = true;
48
51
error = null;
49
52
try {
50
-
await onsubmit({ filename, description, content });
53
+
const targetRkey = rkey ?? tidNow();
54
+
const record: StringRecord = {
55
+
$type: "sh.tangled.string",
56
+
filename,
57
+
description,
58
+
contents: content,
59
+
createdAt: createdAt ?? new Date().toISOString()
60
+
};
61
+
await putString(agent, targetRkey, record);
62
+
onsaved(targetRkey);
51
63
} catch (err) {
52
64
error = err instanceof Error ? err.message : "Failed to publish string";
53
65
} finally {
+3
-26
web/src/routes/strings/new/+page.svelte
+3
-26
web/src/routes/strings/new/+page.svelte
···
1
1
<script lang="ts">
2
2
import { goto } from "$app/navigation";
3
-
import { ok } from "@atcute/client";
4
-
import { mainSchema as createRecordSchema } from "@atcute/atproto/types/repo/createRecord";
5
-
import type { Nsid } from "@atcute/lexicons/syntax";
6
3
import { getAuth } from "$lib/auth.svelte";
7
-
import { createClient } from "$lib/auth/agent";
8
-
import { rkeyFromUri } from "$lib/api/uri";
9
-
import StringForm, { type StringFormData } from "$lib/components/strings/StringForm.svelte";
4
+
import StringForm from "$lib/components/strings/StringForm.svelte";
10
5
11
6
const auth = getAuth();
12
7
const user = $derived(auth.currentUser);
13
8
14
-
const handleSubmit = async ({ filename, description, content }: StringFormData) => {
15
-
if (!auth.agent) return;
16
-
const rpc = createClient(auth.agent);
17
-
const result = await ok(
18
-
rpc.call(createRecordSchema, {
19
-
input: {
20
-
repo: auth.agent.sub,
21
-
collection: "sh.tangled.string" as Nsid,
22
-
record: {
23
-
$type: "sh.tangled.string",
24
-
filename,
25
-
description,
26
-
contents: content,
27
-
createdAt: new Date().toISOString()
28
-
}
29
-
}
30
-
})
31
-
);
32
-
const rkey = rkeyFromUri(result.uri);
9
+
const handleSaved = async (rkey: string) => {
33
10
await goto(`/strings/${user?.handle}/${rkey}`);
34
11
};
35
12
</script>
···
45
22
</div>
46
23
47
24
<div class="mt-4">
48
-
<StringForm mode="create" onsubmit={handleSubmit} />
25
+
<StringForm mode="create" onsaved={handleSaved} />
49
26
</div>
50
27
</div>