From fbde9efd51c342cbfea810b75779e35ea83b3c5d Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 3 Sep 2026 14:14:17 +0200
Subject: [PATCH] web/strings: improve string creation page

Signed-off-by: eti <eti@eti.tf>
---
 .../components/auth/AccountSelector.svelte    | 10 ++-
 .../profile/StringCardContent.svelte          | 26 +++---
 .../lib/components/strings/StringForm.svelte  | 87 ++++++++++---------
 web/src/lib/components/ui/Card.svelte         |  4 +-
 web/src/lib/components/ui/Dropdown.svelte     |  6 +-
 web/src/lib/components/ui/Field.svelte        |  6 +-
 web/src/routes/strings/new/+page.svelte       | 12 +--
 7 files changed, 84 insertions(+), 67 deletions(-)

diff --git a/web/src/lib/components/auth/AccountSelector.svelte b/web/src/lib/components/auth/AccountSelector.svelte
index 8f05a879f..7c820c1a8 100644
--- a/web/src/lib/components/auth/AccountSelector.svelte
+++ b/web/src/lib/components/auth/AccountSelector.svelte
@@ -4,7 +4,7 @@
 	export const accountSelector = tv({
 		slots: {
 			chevron: "size-3 shrink-0",
-			header: "border-b-0 px-2 py-1.5"
+			header: "font-medium px-2 py-1.5"
 		}
 	});
 </script>
@@ -12,7 +12,7 @@
 <script lang="ts">
 	import ChevronDown from "$icon/chevron-down";
 	import type { AuthAccount } from "$lib/auth.svelte";
-	import Dropdown from "$lib/components/ui/Dropdown.svelte";
+	import Dropdown, { type DropdownVariants } from "$lib/components/ui/Dropdown.svelte";
 	import DropdownItem from "$lib/components/ui/DropdownItem.svelte";
 	import User from "$lib/components/ui/User.svelte";
 
@@ -23,6 +23,7 @@
 		disabled?: boolean;
 		group?: string;
 		class?: string;
+		align?: DropdownVariants["align"];
 	}
 
 	let {
@@ -31,7 +32,8 @@
 		label = "Post as",
 		disabled = false,
 		group,
-		class: className
+		class: className,
+		align
 	}: Props = $props();
 
 	const selected = $derived(accounts.find((account) => account.did === value));
@@ -43,9 +45,11 @@
 	<Dropdown
 		{group}
 		{disabled}
+		{align}
 		label={`${label} ${selected.handle}`}
 		class={className}
 		variant="button"
+		title="Select an account"
 	>
 		{#snippet trigger()}
 			<User did={selected.did} handle={selected.handle} class="min-w-0" />
diff --git a/web/src/lib/components/profile/StringCardContent.svelte b/web/src/lib/components/profile/StringCardContent.svelte
index f1e7f068d..918dc829f 100644
--- a/web/src/lib/components/profile/StringCardContent.svelte
+++ b/web/src/lib/components/profile/StringCardContent.svelte
@@ -7,27 +7,27 @@
 	let { entry }: { entry: StringCardData } = $props();
 </script>
 
-<div class="flex min-h-24 flex-col gap-1">
-	<div class="flex items-center justify-between font-medium text-foreground-default">
-		<div class="mr-2 flex min-w-0 flex-1 items-center">
+<div class="flex min-h-24 flex-col justify-between gap-1">
+	<div class="flex flex-1 flex-col gap-2">
+		<div
+			class="flex min-w-0 items-center justify-between pr-2 font-medium text-foreground-default"
+		>
 			<a
 				href={resolve(`/${entry.ownerHandle}/strings/${entry.rkey}` as "/")}
-				class="min-w-0 truncate font-bold text-foreground-default no-underline hover:underline"
+				class="min-w-0 truncate no-underline hover:underline"
 			>
 				{entry.filename}
 			</a>
 		</div>
-	</div>
 
-	{#if entry.description}
-		<p class="line-clamp-2 typography-paragraph-small text-foreground-muted">
-			{entry.description}
-		</p>
-	{/if}
+		{#if entry.description}
+			<p class="line-clamp-2 typography-paragraph-small text-foreground-muted">
+				{entry.description}
+			</p>
+		{/if}
+	</div>
 
-	<div
-		class="mt-auto flex flex-wrap items-center gap-1 pt-2 typography-monospace-small text-foreground-subtle"
-	>
+	<div class="flex flex-wrap items-center gap-1 typography-monospace-small text-foreground-muted">
 		<span class="shrink-0">{entry.lines} line{entry.lines === 1 ? "" : "s"}</span>
 		<Separator variant="dot" />
 		<span>{compactRelativeTime(entry.createdAt)}</span>
diff --git a/web/src/lib/components/strings/StringForm.svelte b/web/src/lib/components/strings/StringForm.svelte
index a4b309139..10b1223bf 100644
--- a/web/src/lib/components/strings/StringForm.svelte
+++ b/web/src/lib/components/strings/StringForm.svelte
@@ -16,6 +16,7 @@
 	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";
@@ -74,49 +75,57 @@
 	});
 </script>
 
-<Card padding="none">
-	<form onsubmit={publish.run}>
-		<div class="flex flex-col gap-2 p-4">
+<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">
-				<Input
-					id="filename"
-					name="filename"
-					placeholder="Filename"
+				<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
-					bind:value={filename}
+					rows={20}
+					spellcheck={false}
+					resizeable
+					bind:value={content}
 					disabled={publish.loading}
-					class="md:max-w-64"
 				/>
-				<Input
-					id="description"
-					name="description"
-					placeholder="Description ..."
-					maxlength={280}
-					bind:value={description}
-					disabled={publish.loading}
-					class="flex-1"
-				/>
-			</div>
-
-			<Textarea
-				id="content"
-				name="content"
-				placeholder="Paste your string here!"
-				required
-				rows={20}
-				spellcheck={false}
-				resizeable
-				bind:value={content}
-				disabled={publish.loading}
-				class="typography-monospace-small"
-			/>
+			</Field>
 		</div>
 
-		<div class="flex items-center justify-between px-4 py-3">
-			<div class="typography-paragraph-small text-foreground-subtle">
-				<span>{lineCount} line{lineCount !== 1 ? "s" : ""}</span>
+		<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>{byteCount} byte{byteCount !== 1 ? "s" : ""}</span>
+				<span class="typography-monospace-small"
+					>{byteCount} byte{byteCount !== 1 ? "s" : ""}</span
+				>
 			</div>
 
 			<div class="flex items-center gap-2">
@@ -134,6 +143,7 @@
 				{#if mode === "create"}
 					<AccountSelector
 						{accounts}
+						align="right"
 						bind:value={() => acting.did, (did) => (picked = did)}
 						label="Publish as"
 						disabled={publish.loading}
@@ -145,6 +155,7 @@
 					variant="primary"
 					icon={publish.loading ? Spinner : ArrowUp}
 					disabled={publish.loading}
+					insetShadow={true}
 				>
 					Publish
 				</Button>
@@ -152,9 +163,7 @@
 		</div>
 
 		{#if publish.error}
-			<div class="px-4 pb-4">
-				<ErrorAlert label={publish.error} />
-			</div>
+			<ErrorAlert label={publish.error} />
 		{/if}
 	</form>
 </Card>
diff --git a/web/src/lib/components/ui/Card.svelte b/web/src/lib/components/ui/Card.svelte
index 1b585c78e..f83a031b9 100644
--- a/web/src/lib/components/ui/Card.svelte
+++ b/web/src/lib/components/ui/Card.svelte
@@ -21,8 +21,8 @@
 				false: ""
 			},
 			padding: {
-				regular: "px-6 py-4",
-				small: "p-4",
+				regular: "p-4",
+				small: "p-2",
 				none: ""
 			}
 		},
diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte
index a33219c38..4b2cd668d 100644
--- a/web/src/lib/components/ui/Dropdown.svelte
+++ b/web/src/lib/components/ui/Dropdown.svelte
@@ -39,6 +39,7 @@
 		trigger: Snippet;
 		children: Snippet;
 		xOffset?: number;
+		title?: string;
 	}
 
 	// opening one dropdown in a group closes its siblings.
@@ -85,7 +86,8 @@
 		class: className,
 		trigger,
 		children,
-		xOffset
+		xOffset,
+		title
 	}: DropdownProps = $props();
 
 	let open = $state(false);
@@ -182,7 +184,7 @@
 	});
 </script>
 
-<div class={classes.root({ class: className })}>
+<div class={classes.root({ class: className })} {title}>
 	<Button
 		bind:ref={triggerElement}
 		variant={variant === "button" ? buttonVariant : "ghost"}
diff --git a/web/src/lib/components/ui/Field.svelte b/web/src/lib/components/ui/Field.svelte
index 8074382b3..e92a36461 100644
--- a/web/src/lib/components/ui/Field.svelte
+++ b/web/src/lib/components/ui/Field.svelte
@@ -4,7 +4,7 @@
 	export const field = tv({
 		slots: {
 			root: "flex flex-col gap-1.5",
-			label: "typography-paragraph-small font-medium text-foreground-default",
+			label: "text-foreground-default",
 			subtitle: "typography-paragraph-small text-foreground-muted"
 		},
 		variants: {
@@ -14,7 +14,7 @@
 			}
 		},
 		defaultVariants: {
-			labelCase: "upper"
+			labelCase: "normal"
 		}
 	});
 
@@ -40,7 +40,7 @@
 		subtitle,
 		for: forId,
 		required = false,
-		labelCase = "upper",
+		labelCase,
 		class: className,
 		children,
 		...rest
diff --git a/web/src/routes/strings/new/+page.svelte b/web/src/routes/strings/new/+page.svelte
index 848a37433..fb555fcb0 100644
--- a/web/src/routes/strings/new/+page.svelte
+++ b/web/src/routes/strings/new/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import LineSquiggle from "$icon/line-squiggle";
 	import { goto } from "$app/navigation";
 	import type { ResolvedPathname } from "$app/types";
 	import StringForm from "$lib/components/strings/StringForm.svelte";
@@ -13,11 +14,12 @@
 </svelte:head>
 
 <div class="mx-auto w-full max-w-5xl px-4 py-12">
-	<div class="p-2">
-		<h1 class="typography-heading-4 font-bold text-foreground-default">Create a new string</h1>
-		<p class="typography-paragraph-small text-foreground-subtle">
-			Store and share code snippets with ease.
-		</p>
+	<div class="flex flex-col gap-2 p-2">
+		<h1 class="typography-heading-4 text-foreground-default inline-flex gap-2 items-center">
+			<LineSquiggle />
+			Create a new string
+		</h1>
+		<p class="text-foreground-muted">Store and share code snippets with ease.</p>
 	</div>
 
 	<div class="mt-4">
-- 
2.51.2