feat(library): backlog status, rating, notes and priority in the UI

Detail page gets an edit card. The library gets status badges, status filter
chips and a debounced name search, both kept in the URL.

src/components/GameStatusBadge.jsx

@@ -0,0 +1,30 @@
+import {useTranslation} from 'react-i18next';
+import {Ban, CircleCheck, Gamepad2, Inbox, Trophy} from 'lucide-react';
+
+import {Badge} from '@/components/ui/badge';
+import {cn} from '@/lib/utils';
+
+export const STATUS_META = {
+    BACKLOG: {icon: Inbox, text: 'text-muted-foreground', badge: 'bg-secondary text-secondary-foreground'},
+    PLAYING: {icon: Gamepad2, text: 'text-primary', badge: 'bg-primary/15 text-primary'},
+    FINISHED: {icon: CircleCheck, text: 'text-emerald-600 dark:text-emerald-400', badge: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'},
+    COMPLETED: {icon: Trophy, text: 'text-amber-600 dark:text-amber-400', badge: 'bg-amber-500/15 text-amber-600 dark:text-amber-400'},
+    DROPPED: {icon: Ban, text: 'text-rose-600 dark:text-rose-400', badge: 'bg-rose-500/15 text-rose-600 dark:text-rose-400'},
+};
+
+/**
+ * @param compact shows only the icon below the sm breakpoint
+ */
+export default function GameStatusBadge({status, compact = false, className}) {
+    const {t} = useTranslation();
+    const meta = STATUS_META[status];
+    if (!meta) return null;
+    const Icon = meta.icon;
+    const label = t(`BACKLOG.STATUS.${status}`);
+    return (
+        <Badge className={cn(meta.badge, className)} title={label}>
+            <Icon/>
+            <span className={compact ? 'hidden sm:inline' : undefined}>{label}</span>
+        </Badge>
+    );
+}