From 3bf391f6d7c13e6202e620e33acc252dcca73b51 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Thu, 8 Oct 2026 11:21:51 +0100
Subject: [PATCH] web: blur avatars of labeled accounts

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/lib/components/ui/Avatar.stories.svelte | 17 +++++++++++++++++
 web/src/lib/components/ui/Avatar.svelte         | 13 ++++++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/ui/Avatar.stories.svelte b/web/src/lib/components/ui/Avatar.stories.svelte
index 30f876b30..3ad1ab452 100644
--- a/web/src/lib/components/ui/Avatar.stories.svelte
+++ b/web/src/lib/components/ui/Avatar.stories.svelte
@@ -26,6 +26,23 @@
 <Story name="With image" args={{ src: "https://avatars.githubusercontent.com/u/1" }} />
 <Story name="Broken image" args={{ src: "https://example.invalid/broken.png" }} />
 
+<Story
+	name="Flagged"
+	args={{
+		src: "https://avatars.githubusercontent.com/u/1",
+		size: "large",
+		moderation: { level: "warn", target: "did:plc:flagged" }
+	}}
+/>
+<Story
+	name="Hidden"
+	args={{
+		src: "https://avatars.githubusercontent.com/u/1",
+		size: "large",
+		moderation: { level: "hide", target: "did:plc:hidden" }
+	}}
+/>
+
 <Story name="Sizes" asChild>
 	<div class="flex items-end gap-sm">
 		{#each scale as size (size)}
diff --git a/web/src/lib/components/ui/Avatar.svelte b/web/src/lib/components/ui/Avatar.svelte
index bc3bb8c26..c42163874 100644
--- a/web/src/lib/components/ui/Avatar.svelte
+++ b/web/src/lib/components/ui/Avatar.svelte
@@ -35,6 +35,7 @@
 <script lang="ts">
 	import UserRound from "$icon/user-round";
 	import { avatarUrl } from "$lib/avatar";
+	import type { Moderation } from "$lib/api/moderationLabels";
 
 	interface Props {
 		did?: string;
@@ -42,13 +43,16 @@
 		handle?: string;
 		size?: AvatarSize;
 		class?: string;
+		moderation?: Moderation;
 	}
 
-	let { did, src, handle, size = "regular", class: className = "" }: Props = $props();
+	let { did, src, handle, size = "regular", class: className = "", moderation }: Props = $props();
 
 	const px = $derived(sizePx[size]);
 	const source = $derived(
-		src ?? (did ? avatarUrl(did, px === undefined ? undefined : px * 2) : undefined)
+		moderation?.level === "hide"
+			? undefined
+			: (src ?? (did ? avatarUrl(did, px === undefined ? undefined : px * 2) : undefined))
 	);
 
 	// hidden with a style, not state, a page full of 404s would write state mid-render
@@ -73,7 +77,10 @@
 		<img
 			src={source}
 			alt=""
-			class="absolute inset-0 size-full object-cover"
+			class={[
+				"absolute inset-0 size-full object-cover",
+				moderation?.level === "warn" && "scale-125 blur-md"
+			]}
 			onerror={hide}
 			onload={show}
 		/>
-- 
2.54.0