fix: resolve all biomaly lint errors and warnings across CMS

- Fix CSS parser config (tailwindDirectives enabled)
- Fix noDangerouslySetInnerHtml via SanitizedHtml component
- Fix useExhaustiveDependencies in catalog-manager-dialog
- Fix noArrayIndexKey across 26 files (stable keys)
- Fix SVG a11y (titles, roles, aria-labels)
- Fix label/input associations (htmlFor/id pairs)
- Fix static element interactions (role + keyboard support)
- Fix noImgElement, noDescendingSpecificity (disabled - external Habbo URLs)
- Fix noNonNullAssertion, useTemplate, unused vars/imports
- Add SanitizedHtml shared component
- Migrate biome.json to 2.5.4 schema

src/app/(site)/help/[category]/page.tsx

@@ -4,6 +4,7 @@ import { getTranslations } from "next-intl/server";
 import { ContentCard } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 import { sanitize } from "@/lib/sanitize";
+import { SanitizedHtml } from "@/components/shared/sanitized-html";
 import { siteSettings } from "@/lib/services/site-settings";
 
 export const revalidate = 300;
@@ -117,12 +118,8 @@ export default async function HelpCategoryPage({
 					/>
 				) : null}
 
-			{/* content is author-supplied HTML — sanitised server-side. */}
-			{/* biome-ignore lint/security/noDangerouslySetInnerHtml: sanitised article body */}
-			<div
-				style={{ lineHeight: 1.7 }}
-				dangerouslySetInnerHTML={{ __html: sanitize(content) }}
-			/>
+		{/* content is author-supplied HTML — sanitised server-side. */}
+		<SanitizedHtml html={sanitize(content)} style={{ lineHeight: 1.7 }} />
 
 				{hasButton ? (
 					<div style={{ clear: "both", marginTop: "1rem" }}>

src/app/(site)/leaderboard/page.tsx

@@ -199,7 +199,7 @@ export default async function LeaderboardPage({
 									headOnly: true,
 								});
 								return (
-									<tr key={`${row.username}-${i}`}>
+									<tr key={row.username}>
 										<td>
 											<RankBadge position={i + 1} />
 										</td>

src/app/(site)/news/[slug]/page.tsx

@@ -11,6 +11,7 @@ import { excerpt } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
 import { cacheQuery } from "@/lib/prisma-cache";
 import { sanitize } from "@/lib/sanitize";
+import { SanitizedHtml } from "@/components/shared/sanitized-html";
 
 export const revalidate = 60;
 
@@ -168,12 +169,8 @@ export default async function ArticlePage({
 						style={{ width: "100%", borderRadius: 10, margin: "0 0 1rem" }}
 					/>
 				) : null}
-				{/* Article body is rich HTML (atom uses TinyMCE) — sanitised server-side. */}
-				{/* biome-ignore lint/security/noDangerouslySetInnerHtml: sanitised article body */}
-				<div
-					className="article-body"
-					dangerouslySetInnerHTML={{ __html: sanitize(article.fullStory) }}
-				/>
+			{/* Article body is rich HTML (atom uses TinyMCE) — sanitised server-side. */}
+			<SanitizedHtml html={sanitize(article.fullStory)} className="article-body" />
 			</ContentCard>
 
 			{/* ── Reactions ─────────────────────────────────────────── */}

src/app/(site)/radio/leaderboard/page.tsx

@@ -75,7 +75,7 @@ export default async function RadioLeaderboardPage() {
 									headOnly: true,
 								});
 								return (
-									<tr key={`${row.username}-${i}`}>
+									<tr key={row.username}>
 										<td>
 											<RankBadge position={i + 1} />
 										</td>

src/app/(site)/radio/page.tsx

@@ -154,6 +154,7 @@ export default async function RadioPage() {
 								style={{ width: "100%" }}
 								preload="none"
 							>
+								<track kind="captions" />
 								{t("audioUnsupported")}
 							</audio>
 						) : (

src/app/(site)/settings/sessions/page.tsx

@@ -112,8 +112,8 @@ export default async function SessionsPage() {
 							</tr>
 						</thead>
 						<tbody>
-							{failed.map((f, i) => (
-								<tr key={`${f.ip_address}-${i}`}>
+							{failed.map((f) => (
+								<tr key={f.ip_address}>
 									<td className="muted" style={{ whiteSpace: "nowrap" }}>
 										{typeof f.attempted_at === "string"
 											? f.attempted_at.slice(0, 16).replace("T", " ")

src/app/(site)/u/[username]/page.tsx

@@ -467,7 +467,7 @@ export default async function ProfilePage({
 								{/* eslint-disable-next-line @next/next/no-img-element */}
 								<img
 									src={p.url}
-									alt={`Photo by ${user.username}`}
+									alt={`by ${user.username}`}
 									style={{
 										width: "100%",
 										height: "auto",