feat(stats): status donut, meters and fixed chart colors

Pie and donut charts use one fixed color-blind safe palette in every
skin and accent. The overview and the profile status tile show a status
donut with the total in the middle. Habits and achievements get meter
bars, top games get share bars, the pile of shame bar uses the palette.

src/components/PileOfShameCard.jsx

@@ -4,12 +4,12 @@ import {Dices, Inbox, Shuffle} from 'lucide-react';
 
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
+import {cn} from '@/lib/utils';
 import GameCover from './GameCover.jsx';
 import PileTrend from './stats/PileTrend.jsx';
 import {StatCount} from './stats/StatDrill.jsx';
-import {STATUS_META} from './GameStatusBadge.jsx';
 import {backlogShare} from '../utils/backlog.js';
-import {GAME_STATUSES} from '../utils/limits.js';
+import {sliceColors, statusSlices} from '../utils/statCharts.js';
 import {formatPlaytime} from '../utils/games.js';
 import {libraryLink} from '../utils/statGames.js';
 
@@ -20,6 +20,8 @@ export default function PileOfShameCard({summary, trend, syncing, onShuffle, shu
     const {t, i18n} = useTranslation();
     const backlog = summary.byStatus?.BACKLOG ?? 0;
     const suggestion = summary.suggestion;
+    const slices = statusSlices(summary.byStatus);
+    const colors = sliceColors(slices);
 
     if (syncing && summary.total === 0) {
         return (
@@ -64,22 +66,20 @@ export default function PileOfShameCard({summary, trend, syncing, onShuffle, shu
             {summary.total > 0 && (
                 <div className="space-y-2">
                     <div className="flex h-2.5 overflow-hidden rounded-full bg-muted">
-                        {GAME_STATUSES.map((s) => (
-                            <div
-                                key={s}
-                                className={STATUS_META[s].bar}
-                                style={{width: `${(summary.byStatus[s] / summary.total) * 100}%`}}
-                            />
+                        {slices.map((s, i) => s.value > 0 && (
+                            <div key={s.name} className="border-card [&:not(:last-child)]:border-r-2"
+                                 style={{width: `${(s.value / summary.total) * 100}%`, background: colors[i]}}/>
                         ))}
                     </div>
                     <ul className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
-                        {GAME_STATUSES.map((s) => (
+                        {slices.map(({name: s, value}, i) => (
                             <li key={s} className="flex items-center gap-1.5">
-                                <span className={`size-2 rounded-full ${STATUS_META[s].bar}`}/>
+                                <span className={cn('size-2 rounded-full', !colors[i] && 'bg-muted')}
+                                      style={colors[i] ? {background: colors[i]} : undefined}/>
                                 {t(`BACKLOG.STATUS.${s}`)}
-                                <StatCount to={libraryLink(s)} count={summary.byStatus[s]}
-                                           label={`${t(`BACKLOG.STATUS.${s}`)}: ${summary.byStatus[s]}`}>
-                                    <span className="tabular-nums text-foreground">{summary.byStatus[s]}</span>
+                                <StatCount to={libraryLink(s)} count={value}
+                                           label={`${t(`BACKLOG.STATUS.${s}`)}: ${value}`}>
+                                    <span className="tabular-nums text-foreground">{value}</span>
                                 </StatCount>
                             </li>
                         ))}