From ddc2e55a0a45a1d414078a72fc1870ef5fb95aca Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Fri, 24 Jul 2026 15:20:47 +0100
Subject: [PATCH] web/routes: refactor string form to use putString

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../lib/components/strings/StringForm.svelte  | 36 ++++++++++++-------
 web/src/routes/strings/new/+page.svelte       | 29 ++-------------
 2 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/web/src/lib/components/strings/StringForm.svelte b/web/src/lib/components/strings/StringForm.svelte
index 6888b308..3e237869 100644
--- a/web/src/lib/components/strings/StringForm.svelte
+++ b/web/src/lib/components/strings/StringForm.svelte
@@ -1,38 +1,39 @@
-<script module lang="ts">
-	export interface StringFormData {
-		filename: string;
-		description: string;
-		content: string;
-	}
-</script>
-
 <script lang="ts">
 	import { untrack } from "svelte";
+	import { now as tidNow } from "@atcute/tid";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import ArrowUp from "$icon/arrow-up";
 	import X from "$icon/x";
+	import { getAuth } from "$lib/auth.svelte";
+	import { putString } from "$lib/api/strings";
+	import type { StringRecord } from "$lib/api/records";
 
 	interface Props {
 		mode?: "create" | "edit";
+		rkey?: string;
+		createdAt?: string;
 		filename?: string;
 		description?: string;
 		content?: string;
-		onsubmit: (data: StringFormData) => Promise<void>;
+		onsaved: (rkey: string) => void;
 		oncancel?: () => void;
 	}
 
 	let {
 		mode = "create",
+		rkey,
+		createdAt,
 		filename: initialFilename = "",
 		description: initialDescription = "",
 		content: initialContent = "",
-		onsubmit,
+		onsaved,
 		oncancel
 	}: Props = $props();
 
-	// seed once; the props can't change while the form is open.
+	const auth = getAuth();
+
 	let filename = $state(untrack(() => initialFilename));
 	let description = $state(untrack(() => initialDescription));
 	let content = $state(untrack(() => initialContent));
@@ -44,10 +45,21 @@
 
 	const handleSubmit = async (e: SubmitEvent) => {
 		e.preventDefault();
+		const agent = auth.agent;
+		if (!agent || isPublishing) return;
 		isPublishing = true;
 		error = null;
 		try {
-			await onsubmit({ filename, description, content });
+			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);
 		} catch (err) {
 			error = err instanceof Error ? err.message : "Failed to publish string";
 		} finally {
diff --git a/web/src/routes/strings/new/+page.svelte b/web/src/routes/strings/new/+page.svelte
index 09fe05b4..85355a28 100644
--- a/web/src/routes/strings/new/+page.svelte
+++ b/web/src/routes/strings/new/+page.svelte
@@ -1,35 +1,12 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
-	import { ok } from "@atcute/client";
-	import { mainSchema as createRecordSchema } from "@atcute/atproto/types/repo/createRecord";
-	import type { Nsid } from "@atcute/lexicons/syntax";
 	import { getAuth } from "$lib/auth.svelte";
-	import { createClient } from "$lib/auth/agent";
-	import { rkeyFromUri } from "$lib/api/uri";
-	import StringForm, { type StringFormData } from "$lib/components/strings/StringForm.svelte";
+	import StringForm from "$lib/components/strings/StringForm.svelte";
 
 	const auth = getAuth();
 	const user = $derived(auth.currentUser);
 
-	const handleSubmit = async ({ filename, description, content }: StringFormData) => {
-		if (!auth.agent) return;
-		const rpc = createClient(auth.agent);
-		const result = await ok(
-			rpc.call(createRecordSchema, {
-				input: {
-					repo: auth.agent.sub,
-					collection: "sh.tangled.string" as Nsid,
-					record: {
-						$type: "sh.tangled.string",
-						filename,
-						description,
-						contents: content,
-						createdAt: new Date().toISOString()
-					}
-				}
-			})
-		);
-		const rkey = rkeyFromUri(result.uri);
+	const handleSaved = async (rkey: string) => {
 		await goto(`/strings/${user?.handle}/${rkey}`);
 	};
 </script>
@@ -45,6 +22,6 @@
 	</div>
 
 	<div class="mt-4">
-		<StringForm mode="create" onsubmit={handleSubmit} />
+		<StringForm mode="create" onsaved={handleSaved} />
 	</div>
 </div>
-- 
2.51.2