feat(points): equipped looks on dashboard and public profile

Avatar borders frame the avatar on the dashboard, badges show next to the
heading, banner frames wrap the hero image, and equipped accents set the
color on both pages.

src/components/PointsBadge.jsx

@@ -0,0 +1,16 @@
+import {useTranslation} from 'react-i18next';
+
+import {cn} from '@/lib/utils';
+import {equippedBadge} from '../utils/rewards.js';
+
+/** The badge worn from the points shop as a small pill; nothing when none is worn. */
+export default function PointsBadge({equipped, className}) {
+    const {t} = useTranslation();
+    const badge = equippedBadge(equipped);
+    if (!badge) return null;
+    return (
+        <span className={cn('inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium', badge.className, className)}>
+            <badge.Icon className="size-3.5"/>{t(`POINTS.ITEMS.${badge.code}`)}
+        </span>
+    );
+}