soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added upload queue notifications

Browse Source
This commit is contained in:
Codex Agent
2025-12-21 12:37:20 +01:00
parent 1e6027f438
commit 6ee40745ca
13 changed files with 566 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
resources/js/guest/components/Header.tsx
View File

@@ -10,6 +10,7 @@ import {
Camera,
Bell,
ArrowUpRight,
Clock,
MessageSquare,
Sparkles,
LifeBuoy,
@@ -275,7 +276,7 @@ type NotificationButtonProps = {
type PushState = ReturnType<typeof usePushSubscription>;
function NotificationButton({ center, eventToken, open, onToggle, panelRef, buttonRef, taskProgress, t }: NotificationButtonProps) {
const badgeCount = center.unreadCount;
const badgeCount = center.unreadCount + center.pendingCount + center.queueCount;
const progressRatio = taskProgress
? Math.min(1, taskProgress.completedCount / TASK_BADGE_TARGET)
: 0;
@@ -428,24 +429,37 @@ function NotificationButton({ center, eventToken, open, onToggle, panelRef, butt
)}
</div>
{activeTab === 'status' && (
<div className="mt-3 flex items-center justify-between rounded-xl bg-slate-50/90 px-3 py-2 text-xs text-slate-600">
<div className="flex items-center gap-2">
<UploadCloud className="h-4 w-4 text-slate-400" aria-hidden />
<span>{t('header.notifications.queueLabel', 'Uploads in Warteschlange')}</span>
<span className="font-semibold text-slate-900">{center.queueCount}</span>
</div>
<Link
to={`/e/${encodeURIComponent(eventToken)}/queue`}
className="inline-flex items-center gap-1 font-semibold text-pink-600"
onClick={() => {
if (center.unreadCount > 0) {
void center.refresh();
}
}}
>
{t('header.notifications.queueCta', 'Verlauf')}
<ArrowUpRight className="h-4 w-4" aria-hidden />
</Link>
<div className="mt-3 space-y-2">
{center.pendingCount > 0 && (
<div className="flex items-center justify-between rounded-xl bg-amber-50/90 px-3 py-2 text-xs text-amber-900">
<div className="flex items-center gap-2">
<Clock className="h-4 w-4 text-amber-500" aria-hidden />
<span>{t('header.notifications.pendingLabel', 'Uploads in Prüfung')}</span>
<span className="font-semibold text-amber-900">{center.pendingCount}</span>
</div>
<Link
to={`/e/${encodeURIComponent(eventToken)}/queue`}
className="inline-flex items-center gap-1 font-semibold text-amber-700"
onClick={() => {
if (center.unreadCount > 0) {
void center.refresh();
}
}}
>
{t('header.notifications.pendingCta', 'Details')}
<ArrowUpRight className="h-4 w-4" aria-hidden />
</Link>
</div>
)}
{center.queueCount > 0 && (
<div className="flex items-center justify-between rounded-xl bg-slate-50/90 px-3 py-2 text-xs text-slate-600">
<div className="flex items-center gap-2">
<UploadCloud className="h-4 w-4 text-slate-400" aria-hidden />
<span>{t('header.notifications.queueLabel', 'Upload-Warteschlange (offline)')}</span>
<span className="font-semibold text-slate-900">{center.queueCount}</span>
</div>
</div>
)}
</div>
)}
{taskProgress && (

2
resources/js/guest/components/__tests__/HeaderNotificationToggle.test.tsx
View File

@@ -36,8 +36,10 @@ vi.mock('../../context/NotificationCenterContext', () => ({
unreadCount: 0,
queueItems: [],
queueCount: 0,
pendingCount: 0,
totalCount: 0,
loading: false,
pendingLoading: false,
refresh: vi.fn(),
setFilters: vi.fn(),
markAsRead: vi.fn(),