Restore photobooth uploader files after sync

resources/js/guest/components/Header.tsx

@@ -27,7 +27,6 @@ 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';
@@ -151,7 +150,6 @@ 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);
@@ -258,7 +256,6 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
             onToggle={() => setNotificationsOpen((prev) => !prev)}
             panelRef={panelRef}
             buttonRef={notificationButtonRef}
-            taskProgress={tasksEnabled && taskProgress?.hydrated ? taskProgress : undefined}
             t={t}
           />
         )}
@@ -285,18 +282,14 @@ 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, 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');
+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');
   const [scopeFilter, setScopeFilter] = React.useState<'all' | 'tips' | 'general'>('all');
   const pushState = usePushSubscription(eventToken);
 
@@ -321,7 +314,7 @@ function NotificationButton({ center, eventToken, open, onToggle, panelRef, butt
       case 'unread':
         base = unreadNotifications;
         break;
-      case 'status':
+      case 'uploads':
         base = uploadNotifications;
         break;
       default:
@@ -331,7 +324,7 @@ function NotificationButton({ center, eventToken, open, onToggle, panelRef, butt
   }, [activeTab, center.notifications, unreadNotifications, uploadNotifications]);
 
   const scopedNotifications = React.useMemo(() => {
-    if (scopeFilter === 'all') {
+    if (activeTab === 'uploads' || scopeFilter === 'all') {
       return filteredNotifications;
     }
     return filteredNotifications.filter((item) => {
@@ -365,10 +358,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', 'Benachrichtigungen')}</p>
+              <p className="text-sm font-semibold text-slate-900">{t('header.notifications.title', 'Updates')}</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>
@@ -384,67 +377,43 @@ function NotificationButton({ center, eventToken, open, onToggle, panelRef, butt
           </div>
           <NotificationTabs
             tabs={[
-              { 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 },
+              { 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 },
             ]}
             activeTab={activeTab}
             onTabChange={(next) => setActiveTab(next as typeof activeTab)}
           />
-          <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>
-              ))}
+          {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>
-          </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' && (
+          )}
+          {activeTab === 'uploads' && (center.pendingCount > 0 || center.queueCount > 0) && (
             <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">
@@ -478,30 +447,32 @@ function NotificationButton({ center, eventToken, open, onToggle, panelRef, butt
               )}
             </div>
           )}
-          {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 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}
                 />
-              </div>
-            </div>
-          )}
+              ))
+            )}
+          </div>
           <NotificationStatusBar
             lastFetchedAt={center.lastFetchedAt}
             isOffline={center.isOffline}