feat(frontend): replace placeholder avatar with identicons

i don't actually know what the license on the kitten image is, and while
it's very unlikely, i don't want to get into legal trouble. it was only
ever supposed to be a temporary image, too.

identicons aren't the prettiest but at least they have a clear license
:3

Foxnouns.Frontend/src/lib/components/Avatar.svelte

@@ -1,16 +1,22 @@
 <script lang="ts">
-	import { DEFAULT_AVATAR } from "$lib";
+	import { minidenticon } from "minidenticons";
 
-	type Props = { url: string | null; alt: string; lazyLoad?: boolean; size?: number };
-	let { url, alt, lazyLoad, size }: Props = $props();
+	type Props = { url: string | null; alt: string; lazyLoad?: boolean; size?: number; name: string };
+	let { url, alt, lazyLoad, size, name }: Props = $props();
 
 	let width = $derived(size || 200);
+
+	let identicon: string | null = $derived.by(() => {
+		if (url) return null;
+		return "data:image/svg+xml;utf8," + encodeURIComponent(minidenticon(name, 50, 80));
+	});
 </script>
 
 <img
 	class="rounded-circle img-fluid"
 	style="height: {width}px; width: {width}px"
-	src={url || DEFAULT_AVATAR}
+	class:identicon={!url}
+	src={url || identicon}
 	{alt}
 	{width}
 	loading={lazyLoad ? "lazy" : "eager"}
@@ -20,4 +26,12 @@
 	img {
 		object-fit: cover;
 	}
+
+	.identicon {
+		@media (prefers-color-scheme: dark) {
+			background-color: var(--bs-secondary-border-subtle);
+		}
+
+		background-color: var(--bs-light-border-subtle);
+	}
 </style>

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

@@ -7,12 +7,13 @@
 	import ShortNoscriptWarning from "./ShortNoscriptWarning.svelte";
 
 	type Props = {
+		name: string;
 		current: string | null;
 		alt: string;
 		update: (avatar: string) => Promise<void>;
 		updated: boolean;
 	};
-	let { current, alt, update: onclick, updated }: Props = $props();
+	let { name, current, alt, update: onclick, updated }: Props = $props();
 
 	const MAX_AVATAR_BYTES = 1_000_000;
 
@@ -40,7 +41,7 @@
 </script>
 
 <p class="text-center">
-	<Avatar url={avatarExists ? avatar : current} {alt} />
+	<Avatar {name} url={avatarExists ? avatar : current} {alt} />
 </p>
 
 <InputGroup class="mb-2">

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

@@ -22,6 +22,7 @@
 	<div class="row">
 		<div class="col-md-4 text-center">
 			<Avatar
+				name={"name" in profile ? profile.name : profile.username}
 				url={profile.avatar_url}
 				alt={$t("avatar-tooltip", { name })}
 				lazyLoad={lazyLoadAvatar}

Foxnouns.Frontend/src/lib/components/profile/user/MemberCard.svelte

@@ -36,6 +36,7 @@
 <div>
 	<a href="/@{username}/{member.name}">
 		<Avatar
+			name={member.name}
 			url={member.avatar_url}
 			lazyLoad
 			alt={$t("avatar-tooltip", { name: member.display_name })}

Foxnouns.Frontend/src/routes/settings/+page.svelte

@@ -55,6 +55,7 @@
 	<div class="col-md-3 text-center">
 		<h5>{$t("settings.avatar")}</h5>
 		<Avatar
+			name={data.user.username}
 			url={data.user.avatar_url}
 			alt={$t("avatar-tooltip", { name: "@" + data.user.username })}
 		/>

Foxnouns.Frontend/src/routes/settings/members/+page.svelte

@@ -30,6 +30,7 @@
 	{#each data.members as member (member.id)}
 		<ListGroupItem tag="a" href="/settings/members/{member.id}" data-sveltekit-preload-data="tap">
 			<Avatar
+				name={member.name}
 				url={member.avatar_url}
 				alt={$t("avatar-tooltip", { name: member.display_name })}
 				size={20}

Foxnouns.Frontend/src/routes/settings/members/[id]/+page.svelte

@@ -74,6 +74,7 @@
 	<div class="col-md">
 		<h4>{$t("settings.avatar")}</h4>
 		<AvatarEditor
+			name={data.member.name}
 			current={data.member.avatar_url}
 			alt={$t("avatar-tooltip", { name: data.member.name })}
 			update={updateAvatar}

Foxnouns.Frontend/src/routes/settings/profile/+page.svelte

@@ -91,6 +91,7 @@
 	<div class="col-md">
 		<h4>{$t("settings.avatar")}</h4>
 		<AvatarEditor
+			name={data.user.username}
 			current={data.user.avatar_url}
 			alt={$t("avatar-tooltip", { name: "@" + data.user.username })}
 			update={updateAvatar}