feat(frontend): links editor

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

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import type { RawApiError } from "$api/error";
+	import IconButton from "$components/IconButton.svelte";
+	import { t } from "$lib/i18n";
+	import FormStatusMarker from "./FormStatusMarker.svelte";
+
+	type Props = {
+		currentLinks: string[];
+		save(links: string[]): Promise<void>;
+		form: { ok: boolean; error: RawApiError | null } | null;
+	};
+	let { currentLinks, save, form }: Props = $props();
+
+	let links = $state(currentLinks);
+	let newEntry = $state("");
+
+	const moveValue = (index: number, up: boolean) => {
+		if (up && index == 0) return;
+		if (!up && index == links.length - 1) return;
+
+		const newIndex = up ? index - 1 : index + 1;
+		const temp = links[index];
+		links[index] = links[newIndex];
+		links[newIndex] = temp;
+		links = [...links];
+	};
+
+	const removeValue = (index: number) => {
+		links.splice(index, 1);
+		links = [...links];
+	};
+
+	const addEntry = (event: Event) => {
+		event.preventDefault();
+		if (!newEntry) return;
+
+		links = [...links, newEntry];
+		newEntry = "";
+	};
+</script>
+
+<h4>
+	{$t("editor.links-header")}
+	<button type="button" class="btn btn-primary" onclick={() => save(links)}>
+		{$t("save-changes")}
+	</button>
+</h4>
+
+<FormStatusMarker {form} />
+
+{#each links as _, index}
+	<div class="input-group m-1">
+		<IconButton
+			icon="chevron-up"
+			color="secondary"
+			tooltip={$t("editor.move-entry-up")}
+			onclick={() => moveValue(index, true)}
+		/>
+		<IconButton
+			icon="chevron-down"
+			color="secondary"
+			tooltip={$t("editor.move-entry-down")}
+			onclick={() => moveValue(index, false)}
+		/>
+		<input type="text" class="form-control" bind:value={links[index]} autocomplete="off" />
+		<IconButton
+			color="danger"
+			icon="trash3"
+			tooltip={$t("editor.remove-entry")}
+			onclick={() => removeValue(index)}
+		/>
+	</div>
+{/each}
+
+<form class="input-group m-1" onsubmit={addEntry}>
+	<input
+		type="text"
+		class="form-control"
+		bind:value={newEntry}
+		placeholder={$t("editor.new-entry")}
+		autocomplete="off"
+	/>
+	<IconButton type="submit" color="success" icon="plus" tooltip={$t("editor.add-entry")} />
+</form>

Foxnouns.Frontend/src/lib/components/profile/ProfileLink.svelte

@@ -9,7 +9,7 @@
 		if (raw.startsWith("https://")) out = raw.substring("https://".length);
 		else if (raw.startsWith("http://")) out = raw.substring("http://".length);
 
-		if (raw.endsWith("/")) out = raw.substring(0, raw.length - 1);
+		if (out.endsWith("/")) out = out.substring(0, out.length - 1);
 
 		return out;
 	};

Foxnouns.Frontend/src/lib/i18n/locales/en.json

@@ -202,7 +202,8 @@
 		"flag-search-no-flags": "No flags matched your search query.",
 		"flag-search-no-account-flags": "You haven't uploaded any flags yet.",
 		"flag-search-hint": "Can't find the flag you're looking for? Try using the search bar above.",
-		"flag-manage-your-flags": "Manage your flags"
+		"flag-manage-your-flags": "Manage your flags",
+		"links-header": "Links"
 	},
 	"cancel": "Cancel"
 }