feat(inbox): add expandable details to digest notes

Digest notes only showed counts. Now a digest note opens to list its
games and items, grouped by kind. The list loads once, from
GET /api/inbox/{id}/details. Achievements show 5 per game first.

src/pages/InboxPage.jsx

@@ -1,15 +1,16 @@
 import {useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import {Link} from 'react-router-dom';
-import {Loader2} from 'lucide-react';
+import {ChevronDown, Loader2} from 'lucide-react';
 
 import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
 import {cn} from '@/lib/utils';
 import PageContainer from '../components/PageContainer.jsx';
 import {formatDate} from '../utils/format.js';
-import {digestParts, fetchInbox, markInboxRead} from '../utils/inbox.js';
+import {digestParts, fetchInbox, fetchInboxDetails, groupDetails, markInboxRead} from '../utils/inbox.js';
 
 const PSN_KINDS = ['PSN_EXPIRING', 'PSN_EXPIRED'];
+const ACHIEVEMENTS_SHOWN = 5;
 
 /**
  * The newest notes about the people the user follows and about the PlayStation link. Opening the page marks them read.
@@ -18,6 +19,10 @@ export default function InboxPage() {
     const {t, i18n} = useTranslation();
     const [notes, setNotes] = useState([]);
     const [status, setStatus] = useState('loading');
+    const [open, setOpen] = useState(null);
+    // note id -> {status: 'loading' | 'error' | 'ready', results}
+    const [details, setDetails] = useState({});
+    const [showAll, setShowAll] = useState({});
 
     useEffect(() => {
         (async () => {
@@ -42,6 +47,59 @@ export default function InboxPage() {
         return t('INBOX.DIGEST', {name, parts});
     };
 
+    const toggle = async (id) => {
+        if (open === id) {
+            setOpen(null);
+            return;
+        }
+        setOpen(id);
+        if (details[id]) return;
+        setDetails((current) => ({...current, [id]: {status: 'loading', results: []}}));
+        const {ok, status, data} = await fetchInboxDetails(id);
+        setDetails((current) => ({...current, [id]: ok || status === 404 ? {status: 'ready', results: data?.results ?? []} : {status: 'error', results: []}}));
+    };
+
+    const gameLines = (group, {gameName, items}, noteId) => {
+        if (group.kind === 'STATUS') {
+            return items.map((item, i) => (
+                <li key={`${gameName}-${i}`}>
+                    {gameName}: {t(`BACKLOG.STATUS.${item.fromStatus}`)} → {t(`BACKLOG.STATUS.${item.toStatus}`)}
+                </li>
+            ));
+        }
+        if (group.kind !== 'ACHIEVEMENT') return <li key={gameName}>{gameName}</li>;
+        const key = `${noteId}:${gameName}`;
+        const shown = showAll[key] ? items : items.slice(0, ACHIEVEMENTS_SHOWN);
+        return (
+            <li key={gameName}>
+                {gameName}
+                <ul className="ml-4 list-disc">
+                    {shown.map((item, i) => <li key={i}>{item.itemName}</li>)}
+                </ul>
+                {!showAll[key] && items.length > ACHIEVEMENTS_SHOWN && (
+                    <button type="button" className="ml-4 underline"
+                            onClick={() => setShowAll((current) => ({...current, [key]: true}))}>
+                        {t('INBOX.SHOW_ALL', {count: items.length})}
+                    </button>
+                )}
+            </li>
+        );
+    };
+
+    const detailBlock = (noteId) => {
+        const entry = details[noteId];
+        if (!entry || entry.status === 'loading') return <Loader2 className="size-4 animate-spin text-muted-foreground"/>;
+        if (entry.status === 'error') return <p className="text-xs text-destructive">{t('INBOX.DETAILS_ERROR')}</p>;
+        const groups = groupDetails(entry.results);
+        if (groups.length === 0) return <p className="text-xs text-muted-foreground">{t('INBOX.DETAILS_GONE')}</p>;
+        return groups.map((group) => (
+            <div key={group.kind} className="space-y-1">
+                <h3 className="text-xs font-semibold uppercase text-muted-foreground">{t(`INBOX.DETAIL_${group.kind}`)}</h3>
+                <ul className="space-y-0.5 text-sm">{group.games.map((gameGroup) => gameLines(group, gameGroup, noteId))}</ul>
+            </div>
+        ));
+    };
+
     return (
         <PageContainer className="space-y-4 px-4 py-6 md:px-8">
             <Card>
@@ -60,11 +118,19 @@ export default function InboxPage() {
                                         {formatDate(note.createdAt, i18n.language, {dateStyle: 'medium'})}
                                     </p>
                                     <p className={cn('break-words text-sm', !note.read && 'font-semibold')}>
-                                        {text(note)}
+                                        {note.kind === 'DIGEST' && note.details ? (
+                                            <button type="button" aria-expanded={open === note.id}
+                                                    className="inline-flex cursor-pointer items-center gap-1 break-words text-left hover:underline"
+                                                    onClick={() => toggle(note.id)}>
+                                                {text(note)}
+                                                <ChevronDown className={cn('size-4 shrink-0 transition-transform', open === note.id && 'rotate-180')}/>
+                                            </button>
+                                        ) : text(note)}
                                         {PSN_KINDS.includes(note.kind) && (
                                             <> <Link to="/settings" className="underline">{t('INBOX.OPEN_SETTINGS')}</Link></>
                                         )}
                                     </p>
+                                    {open === note.id && <div className="space-y-2 pt-1">{detailBlock(note.id)}</div>}
                                 </li>
                             ))}
                         </ul>