bd sync: 2026-01-12 16:57:37

resources/js/guest/components/Header.tsx

@@ -27,6 +27,7 @@ import { SettingsSheet } from './settings-sheet';
 import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
 import { DEFAULT_EVENT_BRANDING, useOptionalEventBranding } from '../context/EventBrandingContext';
 import { useOptionalNotificationCenter, type NotificationCenterValue } from '../context/NotificationCenterContext';
+import { useGuestTaskProgress, TASK_BADGE_TARGET } from '../hooks/useGuestTaskProgress';
 import { usePushSubscription } from '../hooks/usePushSubscription';
 import { getContrastingTextColor, relativeLuminance } from '../lib/color';
 import { isTaskModeEnabled } from '../lib/engagement';
@@ -150,6 +151,7 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
   const { event, status } = useEventData();
   const notificationCenter = useOptionalNotificationCenter();
   const [notificationsOpen, setNotificationsOpen] = React.useState(false);
+  const taskProgress = useGuestTaskProgress(eventToken);
   const tasksEnabled = isTaskModeEnabled(event);
   const panelRef = React.useRef<HTMLDivElement | null>(null);
   const notificationButtonRef = React.useRef<HTMLButtonElement | null>(null);
@@ -256,6 +258,7 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
             onToggle={() => setNotificationsOpen((prev) => !prev)}
             panelRef={panelRef}
             buttonRef={notificationButtonRef}
+            taskProgress={tasksEnabled && taskProgress?.hydrated ? taskProgress : undefined}
             t={t}
           />
         )}
@@ -282,14 +285,18 @@ type NotificationButtonProps = {
   onToggle: () => void;
   panelRef: React.RefObject<HTMLDivElement | null>;
   buttonRef: React.RefObject<HTMLButtonElement | null>;
+  taskProgress?: ReturnType<typeof useGuestTaskProgress>;
   t: TranslateFn;
 };
 
 type PushState = ReturnType<typeof usePushSubscription>;
 
-function NotificationButton({ center, eventToken, open, onToggle, panelRef, buttonRef, t }: NotificationButtonProps) {
-  const badgeCount = center.unreadCount;
-  const [activeTab, setActiveTab] = React.useState<'unread' | 'all' | 'uploads'>(center.unreadCount > 0 ? 'unread' : 'all');
+function NotificationButton({ center, eventToken, open, onToggle, panelRef, buttonRef, taskProgress, t }: NotificationButtonProps) {
+  const badgeCount = center.unreadCount + center.pendingCount + center.queueCount;
+  const progressRatio = taskProgress
+    ? Math.min(1, taskProgress.completedCount / TASK_BADGE_TARGET)
+    : 0;
+  const [activeTab, setActiveTab] = React.useState<'unread' | 'all' | 'status'>(center.unreadCount > 0 ? 'unread' : 'all');
   const [scopeFilter, setScopeFilter] = React.useState<'all' | 'tips' | 'general'>('all');
   const pushState = usePushSubscription(eventToken);
 
@@ -314,7 +321,7 @@ function NotificationButton({ center, eventToken, open, onToggle, panelRef, butt
       case 'unread':
         base = unreadNotifications;
         break;
-      case 'uploads':
+      case 'status':
         base = uploadNotifications;
         break;
       default:
@@ -324,7 +331,7 @@ function NotificationButton({ center, eventToken, open, onToggle, panelRef, butt
   }, [activeTab, center.notifications, unreadNotifications, uploadNotifications]);
 
   const scopedNotifications = React.useMemo(() => {
-    if (activeTab === 'uploads' || scopeFilter === 'all') {
+    if (scopeFilter === 'all') {
       return filteredNotifications;
     }
     return filteredNotifications.filter((item) => {
@@ -358,10 +365,10 @@ function NotificationButton({ center, eventToken, open, onToggle, panelRef, butt
         >
           <div className="flex items-start justify-between gap-3">
             <div>
-              <p className="text-sm font-semibold text-slate-900">{t('header.notifications.title', 'Updates')}</p>
+              <p className="text-sm font-semibold text-slate-900">{t('header.notifications.title', 'Benachrichtigungen')}</p>
               <p className="text-xs text-slate-500">
                 {center.unreadCount > 0
-                  ? t('header.notifications.unread', { defaultValue: '{count} neu', count: center.unreadCount })
+                  ? t('header.notifications.unread', { defaultValue: '{{count}} neu', count: center.unreadCount })
                   : t('header.notifications.allRead', 'Alles gelesen')}
               </p>
             </div>
@@ -377,43 +384,67 @@ function NotificationButton({ center, eventToken, open, onToggle, panelRef, butt
           </div>
           <NotificationTabs
             tabs={[
-              { key: 'unread', label: t('header.notifications.tabUnread', 'Nachrichten'), badge: unreadNotifications.length },
-              { key: 'uploads', label: t('header.notifications.tabUploads', 'Uploads'), badge: uploadNotifications.length },
-              { key: 'all', label: t('header.notifications.tabAll', 'Alle Updates'), badge: center.notifications.length },
+              { key: 'unread', label: t('header.notifications.tabUnread', 'Neu'), badge: unreadNotifications.length },
+              { key: 'status', label: t('header.notifications.tabStatus', 'Uploads/Status'), badge: uploadNotifications.length },
+              { key: 'all', label: t('header.notifications.tabAll', 'Alle'), badge: center.notifications.length },
             ]}
             activeTab={activeTab}
             onTabChange={(next) => setActiveTab(next as typeof activeTab)}
           />
-          {activeTab !== 'uploads' && (
-            <div className="mt-3">
-              <div className="flex gap-2 overflow-x-auto text-xs whitespace-nowrap pb-1">
-                {(
-                  [
-                    { key: 'all', label: t('header.notifications.scope.all', 'Alle') },
-                    { key: 'tips', label: t('header.notifications.scope.tips', 'Tipps & Achievements') },
-                    { key: 'general', label: t('header.notifications.scope.general', 'Allgemein') },
-                  ] as const
-                ).map((option) => (
-                  <button
-                    key={option.key}
-                    type="button"
-                    onClick={() => {
-                      setScopeFilter(option.key);
-                      center.setFilters({ scope: option.key });
-                    }}
-                    className={`rounded-full border px-3 py-1 font-semibold transition ${
-                      scopeFilter === option.key
-                        ? 'border-pink-200 bg-pink-50 text-pink-700'
-                        : 'border-slate-200 bg-white text-slate-600 hover:border-pink-200 hover:text-pink-700'
-                    }`}
-                  >
-                    {option.label}
-                  </button>
-                ))}
-              </div>
+          <div className="mt-3">
+            <div className="flex gap-2 overflow-x-auto text-xs whitespace-nowrap pb-1">
+              {(
+                [
+                  { key: 'all', label: t('header.notifications.scope.all', 'Alle') },
+                  { key: 'tips', label: t('header.notifications.scope.tips', 'Tipps & Achievements') },
+                  { key: 'general', label: t('header.notifications.scope.general', 'Allgemein') },
+                ] as const
+              ).map((option) => (
+                <button
+                  key={option.key}
+                  type="button"
+                  onClick={() => {
+                    setScopeFilter(option.key);
+                    center.setFilters({ scope: option.key });
+                  }}
+                  className={`rounded-full border px-3 py-1 font-semibold transition ${
+                    scopeFilter === option.key
+                      ? 'border-pink-200 bg-pink-50 text-pink-700'
+                      : 'border-slate-200 bg-white text-slate-600 hover:border-pink-200 hover:text-pink-700'
+                  }`}
+                >
+                  {option.label}
+                </button>
+              ))}
             </div>
-          )}
-          {activeTab === 'uploads' && (center.pendingCount > 0 || center.queueCount > 0) && (
+          </div>
+          <div className="mt-3 max-h-80 space-y-2 overflow-y-auto pr-1">
+            {center.loading ? (
+              <NotificationSkeleton />
+            ) : scopedNotifications.length === 0 ? (
+              <NotificationEmptyState
+                t={t}
+                message={
+                  activeTab === 'unread'
+                    ? t('header.notifications.emptyUnread', 'Du bist auf dem neuesten Stand!')
+                    : activeTab === 'status'
+                      ? t('header.notifications.emptyStatus', 'Keine Upload-Hinweise oder Wartungen aktiv.')
+                      : undefined
+                }
+              />
+            ) : (
+              scopedNotifications.map((item) => (
+                <NotificationListItem
+                  key={item.id}
+                  item={item}
+                  onMarkRead={() => center.markAsRead(item.id)}
+                  onDismiss={() => center.dismiss(item.id)}
+                  t={t}
+                />
+              ))
+            )}
+          </div>
+          {activeTab === 'status' && (
             <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">
@@ -447,32 +478,30 @@ function NotificationButton({ center, eventToken, open, onToggle, panelRef, butt
               )}
             </div>
           )}
-          <div className="mt-3 max-h-80 space-y-2 overflow-y-auto pr-1">
-            {center.loading ? (
-              <NotificationSkeleton />
-            ) : scopedNotifications.length === 0 ? (
-              <NotificationEmptyState
-                t={t}
-                message={
-                  activeTab === 'unread'
-                    ? t('header.notifications.emptyUnread', 'Du bist auf dem neuesten Stand!')
-                    : activeTab === 'uploads'
-                      ? t('header.notifications.emptyStatus', 'Keine Upload-Hinweise oder Wartungen aktiv.')
-                      : undefined
-                }
-              />
-            ) : (
-              scopedNotifications.map((item) => (
-                <NotificationListItem
-                  key={item.id}
-                  item={item}
-                  onMarkRead={() => center.markAsRead(item.id)}
-                  onDismiss={() => center.dismiss(item.id)}
-                  t={t}
+          {taskProgress && (
+            <div className="mt-3 rounded-2xl border border-slate-200 bg-slate-50/90 p-3">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-xs uppercase tracking-[0.3em] text-slate-400">{t('header.notifications.badgeLabel', 'Badge-Fortschritt')}</p>
+                  <p className="text-lg font-semibold text-slate-900">
+                    {taskProgress.completedCount}/{TASK_BADGE_TARGET}
+                  </p>
+                </div>
+                <Link
+                  to={`/e/${encodeURIComponent(eventToken)}/tasks`}
+                  className="rounded-full border border-slate-200 px-3 py-1 text-xs font-semibold text-pink-600 transition hover:border-pink-300"
+                >
+                  {t('header.notifications.tasksCta', 'Weiter')}
+                </Link>
+              </div>
+              <div className="mt-3 h-1.5 w-full rounded-full bg-slate-100">
+                <div
+                  className="h-full rounded-full bg-pink-500"
+                  style={{ width: `${progressRatio * 100}%` }}
                 />
-              ))
-            )}
-          </div>
+              </div>
+            </div>
+          )}
           <NotificationStatusBar
             lastFetchedAt={center.lastFetchedAt}
             isOffline={center.isOffline}