feat(dashboard): show admin hints and add the hints admin page

src/components/HintCard.jsx

@@ -0,0 +1,39 @@
+import {useId} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Megaphone, X} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import {cn} from '@/lib/utils';
+import {hintText} from '../utils/hints.js';
+
+export default function HintCard({hint, hideForever, onHideForeverChange, onClose, onAccept, className}) {
+    const {t, i18n} = useTranslation();
+    const checkboxId = useId();
+
+    return (
+        <Card role="status" className={cn('gap-3 p-4 shadow-lg', className)}>
+            <div className="flex items-start gap-3">
+                <Megaphone className="mt-0.5 size-5 shrink-0 text-primary"/>
+                <p className="flex-1 whitespace-pre-line break-words text-sm">{hintText(hint, i18n.language)}</p>
+                {hint.kind === 'DISMISS' && (
+                    <Button type="button" variant="ghost" size="icon" className="-mr-2 -mt-2 size-8"
+                            aria-label={t('HINT.CLOSE')} onClick={onClose}>
+                        <X/>
+                    </Button>
+                )}
+            </div>
+            <div className="flex items-center justify-end gap-2">
+                {hint.kind === 'DISMISS' ? (
+                    <label htmlFor={checkboxId} className="flex items-center gap-2 text-xs text-muted-foreground">
+                        <input id={checkboxId} type="checkbox" className="accent-primary" checked={hideForever}
+                               onChange={(event) => onHideForeverChange(event.target.checked)}/>
+                        {t('HINT.DO_NOT_SHOW_AGAIN')}
+                    </label>
+                ) : (
+                    <Button type="button" size="sm" onClick={onAccept}>{t('HINT.OK')}</Button>
+                )}
+            </div>
+        </Card>
+    );
+}