feat(achievements): dashboard card, library badge, 100 % hint and profile stats

src/pages/PublicProfilePage.jsx

@@ -1,7 +1,7 @@
 import {useEffect, useState} from 'react';
 import {Link, useParams} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
-import {CircleCheck, Clock, Gamepad2, Library, Star, UserRoundX} from 'lucide-react';
+import {CircleCheck, Clock, Gamepad2, Library, Percent, Star, Trophy, UserRoundX} from 'lucide-react';
 
 import {Card} from '@/components/ui/card';
 import {Skeleton} from '@/components/ui/skeleton';
@@ -90,6 +90,12 @@ export default function PublicProfilePage() {
         [Clock, formatPlaytime(library.totalPlaytimeMinutes), t('PROFILE.PLAYTIME')],
         [CircleCheck, finishedCount.toLocaleString(i18n.language), t('PROFILE.FINISHED')],
     ];
+    if (library.averageCompletion != null) {
+        stats.push(
+            [Trophy, (library.perfectGames ?? 0).toLocaleString(i18n.language), t('PROFILE.PERFECT_GAMES')],
+            [Percent, `${library.averageCompletion.toLocaleString(i18n.language)} %`, t('PROFILE.AVERAGE_COMPLETION')],
+        );
+    }
     const memberSince = profile.memberSince
         ? new Date(`${profile.memberSince}T12:00:00`).toLocaleDateString(i18n.language, {year: 'numeric', month: 'long'})
         : null;
@@ -105,7 +111,7 @@ export default function PublicProfilePage() {
                         <p className="mt-2 text-sm text-muted-foreground">{t('PROFILE.MEMBER_SINCE', {date: memberSince})}</p>
                     )}
                 </div>
-                <div className="relative grid grid-cols-3 gap-3">
+                <div className={`relative grid gap-3 ${stats.length > 3 ? 'grid-cols-2 sm:grid-cols-5' : 'grid-cols-3'}`}>
                     {stats.map(([Icon, value, label]) => (
                         <div key={label} className="rounded-lg bg-muted/50 p-3 text-center">
                             <Icon className="mx-auto mb-1 size-4 text-primary"/>