feat: post label alerts

app/com/components/items/Post.tsx

@@ -38,6 +38,7 @@ import DefaultAvatar from '../../assets/default-user-avatar.svg?url';
 import Embed from '../embeds/Embed';
 import ContentWarning from '../moderation/ContentWarning';
 import LabelsOnMe from '../moderation/LabelsOnMe';
+import ModerationAlerts from '../moderation/ModerationAlerts';
 
 import PostOverflowAction from './posts/PostOverflowAction';
 import ReplyAction from './posts/ReplyAction';
@@ -241,7 +242,7 @@ const Post = (props: PostProps) => {
 							uid={uid}
 							report={{ type: 'post', uri: post.uri, cid: post.cid.value }}
 							labels={post.labels.value}
-							class="mb-2 mt-1"
+							class="mb-1 mt-1"
 						/>
 					)}
 
@@ -366,48 +367,52 @@ const PostContent = ({ post, postPermalink, causes }: PostContentProps) => {
 	const ui = createMemo(() => getModerationUI(causes(), ContextContentList));
 
 	return (
-		<ContentWarning
-			ui={ui()}
-			ignoreMute
-			containerClass="mt-2"
-			innerClass="mt-3"
-			children={(() => {
-				let content: HTMLDivElement | undefined;
-
-				return (
-					<>
-						<div ref={content} class="line-clamp-[12] whitespace-pre-wrap break-words text-sm">
-							<RichTextRenderer
-								item={post}
-								get={(item) => {
-									const record = item.record.value;
-									return { t: record.text, f: record.facets };
-								}}
-							/>
-						</div>
+		<>
+			<ModerationAlerts ui={ui()} class="mt-1" />
+
+			<ContentWarning
+				ui={ui()}
+				ignoreMute
+				containerClass="mt-2"
+				innerClass="mt-3"
+				children={(() => {
+					let content: HTMLDivElement | undefined;
+
+					return (
+						<>
+							<div ref={content} class="line-clamp-[12] whitespace-pre-wrap break-words text-sm">
+								<RichTextRenderer
+									item={post}
+									get={(item) => {
+										const record = item.record.value;
+										return { t: record.text, f: record.facets };
+									}}
+								/>
+							</div>
 
-						<Link
-							ref={(node) => {
-								node.style.display = post.$truncated !== false ? 'block' : 'none';
-
-								createEffect(() => {
-									const delta = content!.scrollHeight - content!.clientHeight;
-									const next = delta > 10 && !!post.record.value.text;
-
-									post.$truncated = next;
-									node.style.display = next ? 'block' : 'none';
-								});
-							}}
-							to={postPermalink}
-							class="text-sm text-accent hover:underline"
-						>
-							Show more
-						</Link>
-
-						{embed.value && <Embed post={post} causes={causes()} />}
-					</>
-				);
-			})()}
-		/>
+							<Link
+								ref={(node) => {
+									node.style.display = post.$truncated !== false ? 'block' : 'none';
+
+									createEffect(() => {
+										const delta = content!.scrollHeight - content!.clientHeight;
+										const next = delta > 10 && !!post.record.value.text;
+
+										post.$truncated = next;
+										node.style.display = next ? 'block' : 'none';
+									});
+								}}
+								to={postPermalink}
+								class="text-sm text-accent hover:underline"
+							>
+								Show more
+							</Link>
+
+							{embed.value && <Embed post={post} causes={causes()} />}
+						</>
+					);
+				})()}
+			/>
+		</>
 	);
 };

app/com/components/moderation/ModerationAlerts.tsx

@@ -0,0 +1,69 @@
+import { type JSX, lazy } from 'solid-js';
+
+import {
+	type LabelModerationCause,
+	type ModerationCause,
+	type ModerationUI,
+	CauseLabel,
+	SeverityAlert,
+	getLocalizedLabel,
+} from '~/api/moderation';
+
+import { openModal } from '~/com/globals/modals';
+
+import InfoOutlinedIcon from '../../icons/outline-info';
+import ReportProblemOutlinedIcon from '../../icons/outline-report-problem';
+
+const LabelDetailsDialog = lazy(() => import('../dialogs/LabelDetailsDialog'));
+
+export interface ModerationAlertsProps {
+	ui: ModerationUI;
+	class?: string;
+}
+
+const ModerationAlerts = (props: ModerationAlertsProps) => {
+	return (() => {
+		const ui = props.ui;
+		const causes = ui.a.concat(ui.i).filter(isLabelCause);
+
+		if (causes.length === 0) {
+			return;
+		}
+
+		return (
+			<div class={props.class}>
+				<div class="flex flex-wrap gap-2">
+					{
+						/* @once */ causes.map((cause) => {
+							return (
+								<button
+									onClick={() => {
+										openModal(() => <LabelDetailsDialog cause={cause} />);
+									}}
+									class="flex items-center gap-2 rounded-md bg-secondary/30 px-2 text-de leading-6 text-primary/85 hover:bg-secondary/40 hover:text-primary"
+								>
+									{(() => {
+										const Icon = cause.d.s === SeverityAlert ? ReportProblemOutlinedIcon : InfoOutlinedIcon;
+										return <Icon />;
+									})()}
+									<span>
+										{(() => {
+											const localized = getLocalizedLabel(cause.d);
+											return localized.n;
+										})()}
+									</span>
+								</button>
+							);
+						})
+					}
+				</div>
+			</div>
+		);
+	}) as unknown as JSX.Element;
+};
+
+export default ModerationAlerts;
+
+const isLabelCause = (c: ModerationCause): c is LabelModerationCause => {
+	return c.t === CauseLabel;
+};

app/com/components/views/PermalinkPost.tsx

@@ -37,6 +37,7 @@ import ReplyAction from '../items/posts/ReplyAction';
 
 import PostTranslation, { needTranslation } from './posts/PostTranslation';
 import LabelsOnMe from '../moderation/LabelsOnMe';
+import ModerationAlerts from '../moderation/ModerationAlerts';
 
 export interface PermalinkPostProps {
 	/** Expected to be static */
@@ -101,6 +102,8 @@ const PermalinkPost = (props: PermalinkPostProps) => {
 				/>
 			)}
 
+			<ModerationAlerts ui={ui()} class="mb-2" />
+
 			<ContentWarning ui={ui()} ignoreMute containerClass="mb-3" outerClass="mb-3" innerClass="mt-2">
 				<div class="overflow-hidden whitespace-pre-wrap break-words text-base empty:hidden">
 					<RichTextRenderer