Add player bug reports and profile identity features

components/Username.tsx

@@ -0,0 +1,77 @@
+"use client";
+import {
+  Bug,
+  ShieldCheck,
+  Star,
+  Crown,
+  Heart,
+  Flame,
+  Gem,
+  Trophy,
+  Sparkles,
+} from "lucide-react";
+import { useI18n } from "./I18nProvider";
+import { glowColor, type ProfileAppearance } from "@/shared/profile-appearance";
+export const badgeIcons = {
+  star: Star,
+  crown: Crown,
+  heart: Heart,
+  flame: Flame,
+  gem: Gem,
+  trophy: Trophy,
+  sparkles: Sparkles,
+};
+export function Username({
+  name,
+  glow,
+  appearance = {},
+}: {
+  name: string;
+  glow?: boolean;
+  appearance?: ProfileAppearance;
+}) {
+  const { t } = useI18n();
+  const color = glowColor(appearance.glow_color),
+    enabled = glow ?? appearance.name_glow;
+  const Icon =
+    badgeIcons[appearance.custom_prefix_icon as keyof typeof badgeIcons] ??
+    Star;
+  return (
+    <span className="username">
+      {appearance.role === "moderator" && (
+        <span
+          className="username-prefix username-moderator"
+          title={t("Moderator")}
+        >
+          <ShieldCheck size={13} aria-hidden="true" />
+          {t("Moderator")}
+        </span>
+      )}
+      {appearance.bug_finder && (
+        <span
+          className="username-prefix username-bug-finder"
+          title={t("Bug finder")}
+        >
+          <Bug size={13} aria-hidden="true" />
+          {t("Bug finder")}
+        </span>
+      )}
+      {appearance.custom_prefix && (
+        <span className="username-prefix username-custom-prefix">
+          <Icon size={13} aria-hidden="true" />
+          {appearance.custom_prefix}
+        </span>
+      )}
+      <span
+        className={enabled ? "username-glow" : undefined}
+        style={
+          enabled
+            ? { color, textShadow: `0 0 8px ${color}90, 0 0 18px ${color}60` }
+            : undefined
+        }
+      >
+        {name}
+      </span>
+    </span>
+  );
+}