even more frontend stuff

Foxnouns.Frontend/src/lib/components/editor/AvatarEditor.svelte

@@ -4,14 +4,15 @@
 	import { Icon, InputGroup } from "@sveltestrap/sveltestrap";
 	import { encode } from "base64-arraybuffer";
 	import prettyBytes from "pretty-bytes";
+	import ShortNoscriptWarning from "./ShortNoscriptWarning.svelte";
 
 	type Props = {
 		current: string | null;
 		alt: string;
-		onclick: (avatar: string) => Promise<void>;
+		update: (avatar: string) => Promise<void>;
 		updated: boolean;
 	};
-	let { current, alt, onclick, updated }: Props = $props();
+	let { current, alt, update: onclick, updated }: Props = $props();
 
 	const MAX_AVATAR_BYTES = 1_000_000;
 
@@ -59,6 +60,8 @@
 	</button>
 </InputGroup>
 
+<ShortNoscriptWarning />
+
 {#if updated}
 	<p class="text-success-emphasis">
 		<Icon name="check-circle-fill" />

Foxnouns.Frontend/src/lib/components/editor/BioEditor.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { t } from "$lib/i18n";
+	import { renderMarkdown } from "$lib/markdown";
+
+	type Props = { value: string; maxLength: number };
+	let { value = $bindable(), maxLength }: Props = $props();
+</script>
+
+<textarea name="bio" class="form-control" style="height: 200px;" bind:value></textarea>
+<button disabled={value.length > maxLength} type="submit" class="btn btn-primary mt-2 my-1">
+	{$t("save-changes")}
+</button>
+
+<p class="text-muted mt-1">
+	{$t("edit-profile.bio-length-hint", {
+		length: value.length,
+		maxLength,
+	})}
+</p>
+
+{#if value !== ""}
+	<div class="card">
+		<div class="card-header">{$t("edit-profile.preview")}</div>
+		<div class="card-body">{@html renderMarkdown(value)}</div>
+	</div>
+{/if}

Foxnouns.Frontend/src/lib/components/editor/NoscriptWarning.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { t } from "$lib/i18n";
+</script>
+
+<noscript>
+	<div class="alert alert-secondary">
+		<h4>{$t("error.noscript-title")}</h4>
+		<p>
+			{$t("error.noscript-info")}
+		</p>
+	</div>
+</noscript>

Foxnouns.Frontend/src/lib/components/editor/ShortNoscriptWarning.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { t } from "$lib/i18n";
+	import { Icon } from "@sveltestrap/sveltestrap";
+</script>
+
+<noscript>
+	<p class="text-danger-emphasis">
+		<Icon name="exclamation-circle-fill" aria-hidden />
+		{$t("error.noscript-short")}
+	</p>
+</noscript>

Foxnouns.Frontend/src/lib/components/editor/SidEditor.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { PUBLIC_SHORT_URL } from "$env/static/public";
+	import { t } from "$lib/i18n";
+	import { ButtonGroup, Button, Icon } from "@sveltestrap/sveltestrap";
+	import ShortNoscriptWarning from "./ShortNoscriptWarning.svelte";
+
+	type Props = { sid: string; rerollSid: () => Promise<void>; canRerollSid: boolean };
+	let { sid, rerollSid, canRerollSid }: Props = $props();
+
+	const copySid = async () => {
+		const url = `${PUBLIC_SHORT_URL}/${sid}`;
+		await navigator.clipboard.writeText(url);
+	};
+</script>
+
+{$t("edit-profile.sid-current")} <code>{sid}</code>
+<ButtonGroup class="mb-1">
+	<Button color="secondary" onclick={() => rerollSid()} disabled={!canRerollSid}>
+		{$t("edit-profile.sid-reroll")}
+	</Button>
+	<Button color="secondary" onclick={() => copySid()}>
+		<Icon name="link-45deg" aria-hidden />
+		<span class="visually-hidden">{$t("edit-profile.sid-copy")}</span>
+	</Button>
+</ButtonGroup>
+<ShortNoscriptWarning />
+<p class="text-muted">
+	<Icon name="info-circle-fill" aria-hidden />
+	{$t("edit-profile.sid-hint")}
+</p>