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/admin/housekeeping/client.tsx

@@ -103,10 +103,9 @@ export function ManageSection(props: SharedProps) {
 			if (s) params.set("search", s);
 			if (g) params.set("group", g);
 			const qs = params.toString();
-			router.replace(
-				"/admin/housekeeping?tab=manage" + (qs ? "&" + qs : ""),
-				{ scroll: false },
-			);
+			router.replace(`/admin/housekeeping?tab=manage${qs ? `&${qs}` : ""}`, {
+				scroll: false,
+			});
 		},
 		[router],
 	);
@@ -199,7 +198,9 @@ export function ManageSection(props: SharedProps) {
 
 	const handleSort = useCallback(
 		(key: string) => {
-			setSortDir((prev) => (sortKey === key && prev === "asc" ? "desc" : "asc"));
+			setSortDir((prev) =>
+				sortKey === key && prev === "asc" ? "desc" : "asc",
+			);
 			setSortKey(key);
 			setPage(1);
 		},
@@ -254,11 +255,13 @@ export function ManageSection(props: SharedProps) {
 				}
 				confirmLabel={t("confirm")}
 				cancelLabel={t("cancel")}
-				onConfirm={() =>
-					confirmDel === "__bulk__"
-						? handleBulkDelete()
-						: handleDelete(confirmDel!)
-				}
+				onConfirm={async () => {
+					if (confirmDel === "__bulk__") {
+						await handleBulkDelete();
+					} else if (confirmDel !== null) {
+						await handleDelete(confirmDel);
+					}
+				}}
 			/>
 
 			<div className="admin-filter-bar">
@@ -295,9 +298,7 @@ export function ManageSection(props: SharedProps) {
 			</div>
 
 			<section>
-				<h2 className="admin-section-title">
-					{t("addPermission")}
-				</h2>
+				<h2 className="admin-section-title">{t("addPermission")}</h2>
 				<form
 					ref={formRef}
 					onSubmit={(e) => {
@@ -420,14 +421,14 @@ export function ManageSection(props: SharedProps) {
 										{sortIcon("description")}
 									</th>
 									<th
-										className={"w-[120px] " + thClass}
+										className={`w-[120px] ${thClass}`}
 										onClick={() => handleSort("groupName")}
 									>
 										{t("colGroup")}
 										{sortIcon("groupName")}
 									</th>
 									<th
-										className={"w-[100px] " + thClass}
+										className={`w-[100px] ${thClass}`}
 										onClick={() => handleSort("minRank")}
 									>
 										{t("colMinRank")}
@@ -524,7 +525,9 @@ export function ManageSection(props: SharedProps) {
 														}
 													>
 														{p.dependsOn}
-														{!props.permSet.has(p.dependsOn) ? " " + t("missing") : ""}
+														{!props.permSet.has(p.dependsOn)
+															? ` ${t("missing")}`
+															: ""}
 													</span>
 												) : (
 													<span className="opacity-50">\u2014</span>
@@ -708,11 +711,7 @@ export function TestSection({ permissions }: { permissions: HKPerm[] }) {
 					placeholder={t("rank")}
 					className="w-[150px]"
 				/>
-				<button
-					type="button"
-					onClick={handleTest}
-					className="btn btn-primary"
-				>
+				<button type="button" onClick={handleTest} className="btn btn-primary">
 					{t("test")}
 				</button>
 			</div>
@@ -900,10 +899,11 @@ export function AuditSection({ initialLogs }: AuditSectionProps) {
 	const locale = useLocale();
 	const router = useRouter();
 	const dateFmt = useMemo(
-		() => new Intl.DateTimeFormat(locale, {
-			dateStyle: "short",
-			timeStyle: "short",
-		}),
+		() =>
+			new Intl.DateTimeFormat(locale, {
+				dateStyle: "short",
+				timeStyle: "short",
+			}),
 		[locale],
 	);
 

src/app/admin/housekeeping/page.tsx

@@ -16,10 +16,30 @@ import {
 export const dynamic = "force-dynamic";
 
 const GROUPS = [
-	"Core", "Users", "Rooms", "Bans", "News", "Logs", "Settings",
-	"Wordfilter", "Catalog", "Shop", "Events", "Tickets", "Moderation",
-	"Polls", "Analytics", "DevOps", "Prefixes", "Banners", "Radio",
-	"RCON", "Assets", "Export", "Notifications", "CMS Pages",
+	"Core",
+	"Users",
+	"Rooms",
+	"Bans",
+	"News",
+	"Logs",
+	"Settings",
+	"Wordfilter",
+	"Catalog",
+	"Shop",
+	"Events",
+	"Tickets",
+	"Moderation",
+	"Polls",
+	"Analytics",
+	"DevOps",
+	"Prefixes",
+	"Banners",
+	"Radio",
+	"RCON",
+	"Assets",
+	"Export",
+	"Notifications",
+	"CMS Pages",
 ];
 
 export default async function AdminHousekeeping({
@@ -89,43 +109,43 @@ export default async function AdminHousekeeping({
 			<div className="admin-tabs mb-4">
 				<Link
 					href="/admin/housekeeping?tab=overview"
-					className={"admin-tab " + (tab === "overview" ? "active" : "")}
+					className={`admin-tab ${tab === "overview" ? "active" : ""}`}
 				>
 					{t("tabOverview")}
 				</Link>
 				<Link
 					href="/admin/housekeeping?tab=manage"
-					className={"admin-tab " + (tab === "manage" ? "active" : "")}
+					className={`admin-tab ${tab === "manage" ? "active" : ""}`}
 				>
 					{t("tabManage")}
 				</Link>
 				<Link
 					href="/admin/housekeeping?tab=import"
-					className={"admin-tab " + (tab === "import" ? "active" : "")}
+					className={`admin-tab ${tab === "import" ? "active" : ""}`}
 				>
 					{t("tabImport")}
 				</Link>
 				<Link
 					href="/admin/housekeeping?tab=ranks"
-					className={"admin-tab " + (tab === "ranks" ? "active" : "")}
+					className={`admin-tab ${tab === "ranks" ? "active" : ""}`}
 				>
 					{t("tabRanks")}
 				</Link>
 				<Link
 					href="/admin/housekeeping?tab=presets"
-					className={"admin-tab " + (tab === "presets" ? "active" : "")}
+					className={`admin-tab ${tab === "presets" ? "active" : ""}`}
 				>
 					{t("tabPresets")}
 				</Link>
 				<Link
 					href="/admin/housekeeping?tab=test"
-					className={"admin-tab " + (tab === "test" ? "active" : "")}
+					className={`admin-tab ${tab === "test" ? "active" : ""}`}
 				>
 					{t("tabTest")}
 				</Link>
 				<Link
 					href="/admin/housekeeping?tab=audit"
-					className={"admin-tab " + (tab === "audit" ? "active" : "")}
+					className={`admin-tab ${tab === "audit" ? "active" : ""}`}
 				>
 					{t("tabAudit")}
 				</Link>