diff --git a/app/Http/Controllers/Api/EventPublicController.php b/app/Http/Controllers/Api/EventPublicController.php
index cce1de30..ee70ebee 100644
--- a/app/Http/Controllers/Api/EventPublicController.php
+++ b/app/Http/Controllers/Api/EventPublicController.php
@@ -1055,6 +1055,7 @@ class EventPublicController extends BaseController
* heading_font: ?string,
* body_font: ?string,
* font_size: string,
+ * welcome_message: ?string,
* logo_url: ?string,
* logo_mode: string,
* logo_value: ?string,
@@ -1118,6 +1119,7 @@ class EventPublicController extends BaseController
$bodyFont = $this->firstStringFromSources($sources, ['typography.body', 'body_font', 'font_family']);
$fontSize = $this->firstStringFromSources($sources, ['typography.size', 'font_size']) ?? $defaults['size'];
$fontSize = in_array($fontSize, ['s', 'm', 'l'], true) ? $fontSize : $defaults['size'];
+ $welcomeMessage = $this->firstStringFromSources($sources, ['welcome_message', 'welcomeMessage']);
$logoMode = $this->firstStringFromSources($sources, ['logo.mode', 'logo_mode']);
if (! in_array($logoMode, ['emoticon', 'upload'], true)) {
@@ -1179,6 +1181,7 @@ class EventPublicController extends BaseController
'heading_font' => $headingFont,
'body_font' => $bodyFont,
'font_size' => $fontSize,
+ 'welcome_message' => $welcomeMessage,
'logo_url' => $logoMode === 'upload' ? $logoValue : null,
'logo_mode' => $logoMode,
'logo_value' => $logoValue,
@@ -2639,6 +2642,15 @@ class EventPublicController extends BaseController
->distinct('guest_name')
->count('guest_name');
+ $guestCount = DB::table('photos')
+ ->where('event_id', $eventId)
+ ->distinct('guest_name')
+ ->count('guest_name');
+
+ $likesCount = (int) DB::table('photos')
+ ->where('event_id', $eventId)
+ ->sum('likes_count');
+
// Tasks solved as number of photos linked to a task (proxy metric).
$tasksSolved = $engagementMode === 'photo_only'
? 0
@@ -2649,6 +2661,8 @@ class EventPublicController extends BaseController
$payload = [
'online_guests' => $onlineGuests,
'tasks_solved' => $tasksSolved,
+ 'guest_count' => $guestCount,
+ 'likes_count' => $likesCount,
'latest_photo_at' => $latestPhotoAt,
'engagement_mode' => $engagementMode,
];
diff --git a/resources/js/admin/i18n/locales/de/management.json b/resources/js/admin/i18n/locales/de/management.json
index 6be5a9e1..724883fe 100644
--- a/resources/js/admin/i18n/locales/de/management.json
+++ b/resources/js/admin/i18n/locales/de/management.json
@@ -792,6 +792,17 @@
"fontSizeSmall": "S",
"fontSizeMedium": "M",
"fontSizeLarge": "L",
+ "welcomeMessage": {
+ "title": "Willkommensnachricht",
+ "label": "Nachricht",
+ "placeholder": "Willkommen bei {eventName}!",
+ "hint": "Nutze {eventName} oder {name} als Platzhalter."
+ },
+ "welcomeMessageFallback": "Willkommen bei {eventName}.",
+ "welcomeGuestFallback": "Gast",
+ "previewWelcome": "Willkommen!",
+ "previewGuests": "Gäste",
+ "previewLikes": "Likes",
"logo": "Logo",
"logoAlt": "Logo",
"logoModeUpload": "Upload",
diff --git a/resources/js/admin/i18n/locales/en/management.json b/resources/js/admin/i18n/locales/en/management.json
index e12820e9..9789b50b 100644
--- a/resources/js/admin/i18n/locales/en/management.json
+++ b/resources/js/admin/i18n/locales/en/management.json
@@ -788,6 +788,17 @@
"fontSizeSmall": "S",
"fontSizeMedium": "M",
"fontSizeLarge": "L",
+ "welcomeMessage": {
+ "title": "Welcome message",
+ "label": "Message",
+ "placeholder": "Welcome to {eventName}!",
+ "hint": "Use {eventName} or {name} as placeholders."
+ },
+ "welcomeMessageFallback": "Welcome to {eventName}.",
+ "welcomeGuestFallback": "Guest",
+ "previewWelcome": "Welcome!",
+ "previewGuests": "Guests",
+ "previewLikes": "Likes",
"logo": "Logo",
"logoAlt": "Logo",
"logoModeUpload": "Upload",
diff --git a/resources/js/admin/lib/brandingForm.ts b/resources/js/admin/lib/brandingForm.ts
index b8b36a79..1d8d0e9c 100644
--- a/resources/js/admin/lib/brandingForm.ts
+++ b/resources/js/admin/lib/brandingForm.ts
@@ -17,6 +17,7 @@ export type BrandingFormValues = {
buttonPrimary: string;
buttonSecondary: string;
linkColor: string;
+ welcomeMessage: string;
};
export type BrandingFormDefaults = Pick<
@@ -33,6 +34,7 @@ export type BrandingFormDefaults = Pick<
| 'buttonPrimary'
| 'buttonSecondary'
| 'linkColor'
+ | 'welcomeMessage'
| 'fontSize'
| 'logoMode'
| 'logoPosition'
@@ -125,6 +127,11 @@ export function extractBrandingForm(settings: unknown, defaults: BrandingFormDef
const buttonPrimary = readHexColor(buttons.primary, readHexColor(branding.button_primary_color, primary));
const buttonSecondary = readHexColor(buttons.secondary, readHexColor(branding.button_secondary_color, accent));
const linkColor = readHexColor(buttons.link_color ?? buttons.linkColor, readHexColor(branding.link_color, accent));
+ const welcomeMessage = typeof branding.welcome_message === 'string'
+ ? branding.welcome_message
+ : typeof branding.welcomeMessage === 'string'
+ ? branding.welcomeMessage
+ : defaults.welcomeMessage;
return {
primary,
@@ -145,5 +152,6 @@ export function extractBrandingForm(settings: unknown, defaults: BrandingFormDef
buttonPrimary,
buttonSecondary,
linkColor,
+ welcomeMessage,
};
}
diff --git a/resources/js/admin/mobile/BrandingPage.tsx b/resources/js/admin/mobile/BrandingPage.tsx
index 849e85d3..d27c248a 100644
--- a/resources/js/admin/mobile/BrandingPage.tsx
+++ b/resources/js/admin/mobile/BrandingPage.tsx
@@ -2,14 +2,14 @@ import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Theme } from '@tamagui/core';
-import { Image as ImageIcon, RefreshCcw, UploadCloud, Trash2, ChevronDown, Save, Droplets, Lock } from 'lucide-react';
+import { Image as ImageIcon, RefreshCcw, UploadCloud, Trash2, ChevronDown, Save, Droplets, Lock, X } from 'lucide-react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite';
import { Slider } from 'tamagui';
import { MobileShell, HeaderActionButton } from './components/MobileShell';
import { MobileCard, CTAButton, SkeletonCard } from './components/Primitives';
-import { MobileColorInput, MobileField, MobileFileInput, MobileInput, MobileSelect } from './components/FormControls';
+import { MobileColorInput, MobileField, MobileFileInput, MobileInput, MobileSelect, MobileTextArea } from './components/FormControls';
import { TenantEvent, getEvent, updateEvent, getTenantFonts, getTenantSettings, TenantFont, WatermarkSettings, trackOnboarding } from '../api';
import { isAuthError } from '../auth/tokens';
import { ApiError, getApiErrorMessage } from '../lib/apiError';
@@ -37,6 +37,7 @@ const BRANDING_FORM_DEFAULTS = {
buttonPrimary: DEFAULT_EVENT_BRANDING.buttons?.primary ?? DEFAULT_EVENT_BRANDING.primaryColor,
buttonSecondary: DEFAULT_EVENT_BRANDING.buttons?.secondary ?? DEFAULT_EVENT_BRANDING.secondaryColor,
linkColor: DEFAULT_EVENT_BRANDING.buttons?.linkColor ?? DEFAULT_EVENT_BRANDING.secondaryColor,
+ welcomeMessage: '',
fontSize: DEFAULT_EVENT_BRANDING.typography?.sizePreset ?? 'm',
logoMode: DEFAULT_EVENT_BRANDING.logo?.mode ?? 'emoticon',
logoPosition: DEFAULT_EVENT_BRANDING.logo?.position ?? 'left',
@@ -76,6 +77,9 @@ const resolveBrandingDefaults = (tenantBranding: BrandingFormValues | null) => {
const bodyFont = tenantBranding.bodyFont.trim()
? tenantBranding.bodyFont
: BRANDING_FORM_DEFAULTS.bodyFont;
+ const welcomeMessage = tenantBranding.welcomeMessage?.trim()
+ ? tenantBranding.welcomeMessage
+ : BRANDING_FORM_DEFAULTS.welcomeMessage;
return {
...BRANDING_FORM_DEFAULTS,
@@ -90,6 +94,7 @@ const resolveBrandingDefaults = (tenantBranding: BrandingFormValues | null) => {
buttonPrimary: primary,
buttonSecondary: accent,
linkColor: accent,
+ welcomeMessage,
};
};
@@ -241,6 +246,12 @@ export default function MobileBrandingPage() {
const previewLogoUrl = previewForm.logoMode === 'upload' ? previewForm.logoDataUrl : '';
const previewLogoValue = previewForm.logoMode === 'emoticon' ? previewForm.logoValue : '';
const previewInitials = getInitials(previewTitle);
+ const previewWelcomeTemplate = previewForm.welcomeMessage.trim()
+ ? previewForm.welcomeMessage.trim()
+ : t('events.branding.welcomeMessageFallback', 'Willkommen bei {eventName}.');
+ const previewWelcomeMessage = previewWelcomeTemplate
+ .replace('{eventName}', previewTitle)
+ .replace('{name}', t('events.branding.welcomeGuestFallback', 'Gast'));
const previewThemeName = previewForm.mode === 'dark' ? 'guestNight' : 'guestLight';
const previewIsDark = previewThemeName === 'guestNight';
const previewVariables = {
@@ -346,6 +357,7 @@ export default function MobileBrandingPage() {
secondary: form.buttonSecondary,
link_color: form.linkColor,
},
+ welcome_message: form.welcomeMessage.trim() ? form.welcomeMessage.trim() : null,
logo_data_url: form.logoMode === 'upload' && logoIsDataUrl ? logoUploadValue : null,
logo_url: form.logoMode === 'upload' ? (normalizedLogoPath || null) : null,
logo_mode: form.logoMode,
@@ -705,6 +717,48 @@ export default function MobileBrandingPage() {
+
+
+
+
+
+
+
+ {t('events.branding.previewWelcome', 'Willkommen!')}
+
+
+ {previewWelcomeMessage}
+
+
- {t('events.branding.previewStat', 'Online Guests')}
+ {t('events.branding.previewGuests', 'Guests')}
148
-
- {t('events.branding.previewCta', 'Fotos hochladen')}
-
+
+ {t('events.branding.previewLikes', 'Likes')}
+
+
+ 392
+
+
+
+
+
+
+
+
+
+
+
+
@@ -909,6 +975,23 @@ export default function MobileBrandingPage() {
+
+
+ {t('events.branding.welcomeMessage.title', 'Welcome message')}
+
+
+ setForm((prev) => ({ ...prev, welcomeMessage: event.target.value }))}
+ disabled={brandingDisabled}
+ />
+
+
+ {t('events.branding.welcomeMessage.hint', 'Use {eventName} or {name} as placeholders.')}
+
+
+
{t('events.branding.logo', 'Logo')}
diff --git a/resources/js/admin/mobile/ProfileAccountPage.tsx b/resources/js/admin/mobile/ProfileAccountPage.tsx
index 52212f2a..c4f99b01 100644
--- a/resources/js/admin/mobile/ProfileAccountPage.tsx
+++ b/resources/js/admin/mobile/ProfileAccountPage.tsx
@@ -54,6 +54,7 @@ const TENANT_BRANDING_DEFAULTS = {
buttonPrimary: DEFAULT_EVENT_BRANDING.buttons?.primary ?? DEFAULT_EVENT_BRANDING.primaryColor,
buttonSecondary: DEFAULT_EVENT_BRANDING.buttons?.secondary ?? DEFAULT_EVENT_BRANDING.secondaryColor,
linkColor: DEFAULT_EVENT_BRANDING.buttons?.linkColor ?? DEFAULT_EVENT_BRANDING.secondaryColor,
+ welcomeMessage: '',
fontSize: DEFAULT_EVENT_BRANDING.typography?.sizePreset ?? 'm',
logoMode: DEFAULT_EVENT_BRANDING.logo?.mode ?? 'emoticon',
logoPosition: DEFAULT_EVENT_BRANDING.logo?.position ?? 'left',
@@ -263,6 +264,7 @@ export default function MobileProfileAccountPage() {
body_font: brandingForm.bodyFont,
font_size: brandingForm.fontSize,
mode: brandingForm.mode,
+ welcome_message: brandingForm.welcomeMessage.trim() ? brandingForm.welcomeMessage.trim() : null,
typography: {
...(typeof existingBranding.typography === 'object' ? (existingBranding.typography as Record) : {}),
heading: brandingForm.headingFont,
diff --git a/resources/js/guest-v2/__tests__/HomeScreen.test.tsx b/resources/js/guest-v2/__tests__/HomeScreen.test.tsx
index 0c8cf53d..e8d31d13 100644
--- a/resources/js/guest-v2/__tests__/HomeScreen.test.tsx
+++ b/resources/js/guest-v2/__tests__/HomeScreen.test.tsx
@@ -1,12 +1,16 @@
import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
-import { EventDataProvider } from '../context/EventDataContext';
+const useEventDataMock = vi.fn();
vi.mock('react-router-dom', () => ({
useNavigate: () => vi.fn(),
}));
+vi.mock('../context/EventDataContext', () => ({
+ useEventData: () => useEventDataMock(),
+}));
+
vi.mock('@tamagui/stacks', () => ({
YStack: ({ children }: { children: React.ReactNode }) => {children}
,
XStack: ({ children }: { children: React.ReactNode }) => {children}
,
@@ -29,15 +33,38 @@ vi.mock('lucide-react', () => ({
Sparkles: () => sparkles,
Image: () => image,
Star: () => star,
+ Timer: () => timer,
+ RefreshCw: () => refresh,
Trophy: () => trophy,
+ X: () => x,
}));
vi.mock('../components/AppShell', () => ({
default: ({ children }: { children: React.ReactNode }) => {children}
,
}));
-vi.mock('../services/uploadApi', () => ({
- useUploadQueue: () => ({ items: [], loading: false, refresh: vi.fn() }),
+vi.mock('../components/TaskHeroCard', () => ({
+ default: ({ task }: { task: { title?: string } | null }) => (
+
+ {task?.title}
+ Let's go!
+
+ ),
+}));
+
+vi.mock('../components/PhotoFrameTile', () => ({
+ default: ({ children }: { children: React.ReactNode }) => {children}
,
+}));
+
+vi.mock('@/guest/context/EventBrandingContext', () => ({
+ useEventBranding: () => ({
+ branding: { welcomeMessage: '' },
+ isCustom: false,
+ }),
+ useOptionalEventBranding: () => ({
+ branding: { welcomeMessage: '' },
+ isCustom: false,
+ }),
}));
vi.mock('../services/tasksApi', () => ({
@@ -61,14 +88,26 @@ vi.mock('../services/photosApi', () => ({
fetchGallery: vi.fn().mockResolvedValue({ data: [] }),
}));
+const translate = (key: string, fallback?: string) => fallback ?? key;
+
vi.mock('@/guest/i18n/useTranslation', () => ({
- useTranslation: () => ({ t: (key: string, fallback?: string) => fallback ?? key, locale: 'de' }),
+ useTranslation: () => ({ t: translate, locale: 'de' }),
}));
vi.mock('@/guest/i18n/LocaleContext', () => ({
useLocale: () => ({ locale: 'de' }),
}));
+vi.mock('../hooks/usePollStats', () => ({
+ usePollStats: () => ({
+ stats: { onlineGuests: 0, tasksSolved: 0, guestCount: 0, likesCount: 0, latestPhotoAt: null },
+ }),
+}));
+
+vi.mock('../lib/useStaggeredReveal', () => ({
+ useStaggeredReveal: () => 5,
+}));
+
vi.mock('@/hooks/use-appearance', () => ({
useAppearance: () => ({ resolved: 'light' }),
}));
@@ -81,22 +120,26 @@ import HomeScreen from '../screens/HomeScreen';
describe('HomeScreen', () => {
it('shows task hero content when tasks are enabled', async () => {
- render(
-
-
-
- );
+ useEventDataMock.mockReturnValue({
+ tasksEnabled: true,
+ token: 'demo',
+ event: { name: 'Demo Event' },
+ });
+
+ render();
expect(await screen.findByText('Capture the dancefloor')).toBeInTheDocument();
expect(screen.getByText("Let's go!")).toBeInTheDocument();
});
it('shows capture-ready content when tasks are disabled', () => {
- render(
-
-
-
- );
+ useEventDataMock.mockReturnValue({
+ tasksEnabled: false,
+ token: 'demo',
+ event: { name: 'Demo Event' },
+ });
+
+ render();
expect(screen.getByText('Capture ready')).toBeInTheDocument();
expect(screen.getByText('Upload / Take photo')).toBeInTheDocument();
diff --git a/resources/js/guest-v2/__tests__/ScreensCopy.test.tsx b/resources/js/guest-v2/__tests__/ScreensCopy.test.tsx
index fafa4ef4..baa8d115 100644
--- a/resources/js/guest-v2/__tests__/ScreensCopy.test.tsx
+++ b/resources/js/guest-v2/__tests__/ScreensCopy.test.tsx
@@ -104,7 +104,15 @@ vi.mock('../services/emotionsApi', () => ({
}));
vi.mock('../hooks/usePollStats', () => ({
- usePollStats: () => ({ stats: { onlineGuests: 0, tasksSolved: 0, latestPhotoAt: null } }),
+ usePollStats: () => ({
+ stats: {
+ onlineGuests: 0,
+ tasksSolved: 0,
+ guestCount: 0,
+ likesCount: 0,
+ latestPhotoAt: null,
+ },
+ }),
}));
vi.mock('../services/qrApi', () => ({
@@ -148,7 +156,7 @@ describe('Guest v2 screens copy', () => {
);
- expect(screen.getByText('Prompt quest')).toBeInTheDocument();
+ expect(screen.getByText('Mission hub')).toBeInTheDocument();
});
it('renders share hub header', () => {
diff --git a/resources/js/guest-v2/__tests__/ShareScreen.test.tsx b/resources/js/guest-v2/__tests__/ShareScreen.test.tsx
index 0a1f78aa..92a03de8 100644
--- a/resources/js/guest-v2/__tests__/ShareScreen.test.tsx
+++ b/resources/js/guest-v2/__tests__/ShareScreen.test.tsx
@@ -31,7 +31,15 @@ vi.mock('../context/EventDataContext', () => ({
}));
vi.mock('../hooks/usePollStats', () => ({
- usePollStats: () => ({ stats: { onlineGuests: 12, tasksSolved: 0, latestPhotoAt: null } }),
+ usePollStats: () => ({
+ stats: {
+ onlineGuests: 12,
+ tasksSolved: 0,
+ guestCount: 40,
+ likesCount: 120,
+ latestPhotoAt: null,
+ },
+ }),
}));
vi.mock('../services/qrApi', () => ({
diff --git a/resources/js/guest-v2/__tests__/eventBranding.test.ts b/resources/js/guest-v2/__tests__/eventBranding.test.ts
index 6288d40e..c92066cf 100644
--- a/resources/js/guest-v2/__tests__/eventBranding.test.ts
+++ b/resources/js/guest-v2/__tests__/eventBranding.test.ts
@@ -11,6 +11,7 @@ describe('mapEventBranding', () => {
heading_font: 'Event Heading',
button_radius: 16,
button_primary_color: '#abcdef',
+ welcome_message: 'Willkommen beim Event!',
palette: {
surface: '#111111',
},
@@ -27,5 +28,6 @@ describe('mapEventBranding', () => {
expect(result?.typography?.sizePreset).toBe('l');
expect(result?.buttons?.radius).toBe(16);
expect(result?.buttons?.primary).toBe('#abcdef');
+ expect(result?.welcomeMessage).toBe('Willkommen beim Event!');
});
});
diff --git a/resources/js/guest-v2/__tests__/statsApi.test.ts b/resources/js/guest-v2/__tests__/statsApi.test.ts
index 3bc266d2..cb8f5d33 100644
--- a/resources/js/guest-v2/__tests__/statsApi.test.ts
+++ b/resources/js/guest-v2/__tests__/statsApi.test.ts
@@ -17,7 +17,13 @@ describe('fetchEventStats', () => {
it('returns cached stats on 304', async () => {
fetchMock.mockResolvedValueOnce(
- new Response(JSON.stringify({ online_guests: 4, tasks_solved: 1, latest_photo_at: '2024-01-01T00:00:00Z' }), {
+ new Response(JSON.stringify({
+ online_guests: 4,
+ tasks_solved: 1,
+ guest_count: 12,
+ likes_count: 48,
+ latest_photo_at: '2024-01-01T00:00:00Z',
+ }), {
status: 200,
headers: { ETag: '"demo"' },
})
@@ -25,6 +31,8 @@ describe('fetchEventStats', () => {
const first = await fetchEventStats('demo');
expect(first.onlineGuests).toBe(4);
+ expect(first.guestCount).toBe(12);
+ expect(first.likesCount).toBe(48);
fetchMock.mockResolvedValueOnce(new Response(null, { status: 304, headers: { ETag: '"demo"' } }));
const second = await fetchEventStats('demo');
diff --git a/resources/js/guest-v2/components/AppShell.tsx b/resources/js/guest-v2/components/AppShell.tsx
index 006df782..5ac483cd 100644
--- a/resources/js/guest-v2/components/AppShell.tsx
+++ b/resources/js/guest-v2/components/AppShell.tsx
@@ -1,11 +1,10 @@
import React from 'react';
import { YStack } from '@tamagui/stacks';
import { Button } from '@tamagui/button';
-import { Sparkles, Share2, Compass, Image, Camera, Settings, Home } from 'lucide-react';
+import { Sparkles, Share2, Image, Camera, Settings, Home, Menu } from 'lucide-react';
import { useLocation, useNavigate } from 'react-router-dom';
import TopBar from './TopBar';
import FloatingActionButton from './FloatingActionButton';
-import FabActionRing from './FabActionRing';
import CompassHub, { type CompassAction } from './CompassHub';
import AmbientBackground from './AmbientBackground';
import NotificationSheet from './NotificationSheet';
@@ -22,7 +21,6 @@ type AppShellProps = {
};
export default function AppShell({ children }: AppShellProps) {
- const [fabOpen, setFabOpen] = React.useState(false);
const [compassOpen, setCompassOpen] = React.useState(false);
const [notificationsOpen, setNotificationsOpen] = React.useState(false);
const [settingsOpen, setSettingsOpen] = React.useState(false);
@@ -37,7 +35,6 @@ export default function AppShell({ children }: AppShellProps) {
const showFab = !/\/photo\/\d+/.test(location.pathname);
const goTo = (path: string) => () => {
- setFabOpen(false);
setCompassOpen(false);
setNotificationsOpen(false);
setSettingsOpen(false);
@@ -49,10 +46,9 @@ export default function AppShell({ children }: AppShellProps) {
};
const openCompass = () => {
- setFabOpen(false);
setNotificationsOpen(false);
setSettingsOpen(false);
- setCompassOpen(true);
+ setCompassOpen((prev) => !prev);
};
const compassQuadrants: [CompassAction, CompassAction, CompassAction, CompassAction] = [
@@ -89,13 +85,6 @@ export default function AppShell({ children }: AppShellProps) {
},
];
- const fabActions = compassQuadrants.map((action) => ({
- key: action.key,
- label: action.label,
- icon: action.icon,
- onPress: action.onPress,
- }));
-
return (
@@ -117,13 +106,11 @@ export default function AppShell({ children }: AppShellProps) {
onProfilePress={() => {
setNotificationsOpen(false);
setCompassOpen(false);
- setFabOpen(false);
setSettingsOpen(true);
}}
onNotificationsPress={() => {
setSettingsOpen(false);
setCompassOpen(false);
- setFabOpen(false);
setNotificationsOpen(true);
}}
notificationCount={notificationCenter?.unreadCount ?? 0}
@@ -135,7 +122,7 @@ export default function AppShell({ children }: AppShellProps) {
gap="$4"
position="relative"
zIndex={1}
- style={{ paddingTop: '88px', paddingBottom: '112px' }}
+ style={{ paddingTop: '88px', paddingBottom: '142px' }}
>
{children}
@@ -157,36 +144,27 @@ export default function AppShell({ children }: AppShellProps) {
{
- setCompassOpen(false);
- setNotificationsOpen(false);
- setSettingsOpen(false);
- setFabOpen((prev) => !prev);
- }}
- onLongPress={openCompass}
+ onPress={goTo('/upload')}
/>
) : null}
-
{
+ if (!onLongPress) {
+ return;
+ }
longPressTriggered.current = true;
- onLongPress?.();
+ onLongPress();
}}
position="fixed"
bottom={20}
@@ -49,7 +52,7 @@ export default function FloatingActionButton({ onPress, onLongPress }: FloatingA
: '0 18px 32px rgba(15, 23, 42, 0.2), 0 0 0 8px rgba(255, 255, 255, 0.7)',
}}
>
-
+
);
}
diff --git a/resources/js/guest-v2/components/StandaloneShell.tsx b/resources/js/guest-v2/components/StandaloneShell.tsx
index 98886766..93fb9ff9 100644
--- a/resources/js/guest-v2/components/StandaloneShell.tsx
+++ b/resources/js/guest-v2/components/StandaloneShell.tsx
@@ -10,7 +10,14 @@ type StandaloneShellProps = {
export default function StandaloneShell({ children, compact = false }: StandaloneShellProps) {
return (
-
+
{children}
diff --git a/resources/js/guest-v2/components/TaskHeroCard.tsx b/resources/js/guest-v2/components/TaskHeroCard.tsx
index 5a792dc4..6ac2ead7 100644
--- a/resources/js/guest-v2/components/TaskHeroCard.tsx
+++ b/resources/js/guest-v2/components/TaskHeroCard.tsx
@@ -119,7 +119,7 @@ export default function TaskHeroCard({
style={{ boxShadow: bentoSurface.shadow }}
>
- {t('tasks.loading', 'Loading tasks...')}
+ {t('common.actions.loading', 'Loading...')}
);
diff --git a/resources/js/guest-v2/hooks/usePollStats.ts b/resources/js/guest-v2/hooks/usePollStats.ts
index efacd79b..00207f22 100644
--- a/resources/js/guest-v2/hooks/usePollStats.ts
+++ b/resources/js/guest-v2/hooks/usePollStats.ts
@@ -2,7 +2,13 @@ import React from 'react';
import { fetchEventStats } from '../services/statsApi';
import type { EventStats } from '../services/eventApi';
-const defaultStats: EventStats = { onlineGuests: 0, tasksSolved: 0, latestPhotoAt: null };
+const defaultStats: EventStats = {
+ onlineGuests: 0,
+ tasksSolved: 0,
+ guestCount: 0,
+ likesCount: 0,
+ latestPhotoAt: null,
+};
export function usePollStats(eventToken: string | null, intervalMs = 10000) {
const [stats, setStats] = React.useState(defaultStats);
diff --git a/resources/js/guest-v2/lib/eventBranding.ts b/resources/js/guest-v2/lib/eventBranding.ts
index 5f71cd53..23bbec07 100644
--- a/resources/js/guest-v2/lib/eventBranding.ts
+++ b/resources/js/guest-v2/lib/eventBranding.ts
@@ -37,6 +37,7 @@ export function mapEventBranding(raw?: EventBrandingPayload | null): EventBrandi
const buttonPrimary = buttons.primary ?? raw.button_primary_color ?? primary ?? '';
const buttonSecondary = buttons.secondary ?? raw.button_secondary_color ?? secondary ?? '';
const linkColor = buttons.link_color ?? raw.link_color ?? secondary ?? '';
+ const welcomeMessage = raw.welcome_message ?? null;
return {
primaryColor: primary ?? '',
@@ -70,5 +71,6 @@ export function mapEventBranding(raw?: EventBrandingPayload | null): EventBrandi
},
mode: (raw.mode as 'light' | 'dark' | 'auto' | undefined) ?? 'auto',
useDefaultBranding: raw.use_default_branding ?? undefined,
+ welcomeMessage,
};
}
diff --git a/resources/js/guest-v2/screens/HomeScreen.tsx b/resources/js/guest-v2/screens/HomeScreen.tsx
index 092130e2..cc10459f 100644
--- a/resources/js/guest-v2/screens/HomeScreen.tsx
+++ b/resources/js/guest-v2/screens/HomeScreen.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
import { XStack, YStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Button } from '@tamagui/button';
-import { Camera, Sparkles, Image as ImageIcon, Trophy, Star } from 'lucide-react';
+import { Camera, Image as ImageIcon, Trophy, Star, X } from 'lucide-react';
import AppShell from '../components/AppShell';
import PhotoFrameTile from '../components/PhotoFrameTile';
import TaskHeroCard, { type TaskHero, type TaskHeroPhoto } from '../components/TaskHeroCard';
@@ -12,7 +12,6 @@ import { buildEventPath } from '../lib/routes';
import { useStaggeredReveal } from '../lib/useStaggeredReveal';
import { usePollStats } from '../hooks/usePollStats';
import { fetchGallery } from '../services/photosApi';
-import { useUploadQueue } from '../services/uploadApi';
import { useTranslation } from '@/guest/i18n/useTranslation';
import { useGuestThemeVariant } from '../lib/guestTheme';
import { useLocale } from '@/guest/i18n/LocaleContext';
@@ -20,6 +19,8 @@ import { fetchTasks, type TaskItem } from '../services/tasksApi';
import { useGuestTaskProgress } from '@/guest/hooks/useGuestTaskProgress';
import { fetchEmotions } from '../services/emotionsApi';
import { getBentoSurfaceTokens } from '../lib/bento';
+import { useEventBranding } from '@/guest/context/EventBrandingContext';
+import { useOptionalGuestIdentity } from '../context/GuestIdentityContext';
type ActionTileProps = {
label: string;
@@ -83,12 +84,10 @@ function ActionTile({
function QuickStats({
reveal,
stats,
- queueCount,
isDark,
}: {
reveal: number;
- stats: { onlineGuests: number; tasksSolved: number };
- queueCount: number;
+ stats: { guestCount: number; likesCount: number };
isDark: boolean;
}) {
const { t } = useTranslation();
@@ -116,10 +115,10 @@ function QuickStats({
}}
>
- {stats.onlineGuests}
+ {stats.guestCount}
- {t('home.stats.online', 'Guests online')}
+ {t('homeV2.stats.guestCount', 'Guests')}
- {queueCount}
+ {stats.likesCount}
- {t('homeV2.stats.uploadsQueued', 'Uploads queued')}
+ {t('homeV2.stats.likesCount', 'Likes')}
@@ -165,14 +164,15 @@ function normalizeImageUrl(src?: string | null) {
}
export default function HomeScreen() {
- const { tasksEnabled, token } = useEventData();
+ const { tasksEnabled, token, event } = useEventData();
const navigate = useNavigate();
- const revealStage = useStaggeredReveal({ steps: 4, intervalMs: 140, delayMs: 120 });
+ const revealStage = useStaggeredReveal({ steps: 5, intervalMs: 140, delayMs: 120 });
const { stats } = usePollStats(token ?? null);
- const { items } = useUploadQueue();
const { t } = useTranslation();
const { locale } = useLocale();
const { isCompleted } = useGuestTaskProgress(token ?? undefined);
+ const { branding } = useEventBranding();
+ const identity = useOptionalGuestIdentity();
const [galleryPhotos, setGalleryPhotos] = React.useState([]);
const [galleryLoading, setGalleryLoading] = React.useState(false);
const [galleryError, setGalleryError] = React.useState(null);
@@ -181,29 +181,51 @@ export default function HomeScreen() {
const [taskLoading, setTaskLoading] = React.useState(false);
const [taskError, setTaskError] = React.useState(null);
const [hasSwiped, setHasSwiped] = React.useState(false);
- const [emotionMap, setEmotionMap] = React.useState>({});
const { isDark } = useGuestThemeVariant();
const bentoSurface = getBentoSurfaceTokens(isDark);
const mutedButton = isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(255, 255, 255, 0.75)';
const mutedButtonBorder = isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(15, 23, 42, 0.08)';
const cardShadow = bentoSurface.shadow;
+ const welcomeStorageKey = token ? `guestWelcomeDismissed_${token}` : 'guestWelcomeDismissed';
+ const [welcomeVisible, setWelcomeVisible] = React.useState(true);
+ const eventName = event?.name ?? t('galleryPage.hero.eventFallback', 'Event');
+ const guestName = identity?.name?.trim() ? identity.name.trim() : t('home.fallbackGuestName', 'Gast');
+ const welcomeTemplate = branding?.welcomeMessage?.trim()
+ ? branding.welcomeMessage.trim()
+ : t('homeV2.welcome.message', 'Welcome to {eventName}.');
+ const welcomeMessage = welcomeTemplate
+ .replace('{eventName}', eventName)
+ .replace('{name}', guestName);
+ const dismissWelcome = React.useCallback(() => {
+ setWelcomeVisible(false);
+ if (typeof window === 'undefined') return;
+ try {
+ window.sessionStorage.setItem(welcomeStorageKey, '1');
+ } catch {
+ // ignore storage errors
+ }
+ }, [welcomeStorageKey]);
const goTo = (path: string) => () => navigate(buildEventPath(token, path));
const recentTaskIdsRef = React.useRef([]);
+ React.useEffect(() => {
+ if (typeof window === 'undefined') return;
+ try {
+ const stored = window.sessionStorage.getItem(welcomeStorageKey);
+ setWelcomeVisible(stored !== '1');
+ } catch {
+ setWelcomeVisible(true);
+ }
+ }, [welcomeStorageKey]);
+
const rings = [
- tasksEnabled
- ? {
- label: t('home.actions.items.tasks.label', 'Draw a task card'),
- icon: ,
- path: '/tasks',
- }
- : {
- label: t('home.actions.items.upload.label', 'Upload photo'),
- icon: ,
- path: '/upload',
- },
+ {
+ label: t('home.actions.items.upload.label', 'Upload photo'),
+ icon: ,
+ path: '/upload',
+ },
{
label: t('homeV2.rings.newUploads', 'New uploads'),
icon: ,
@@ -218,10 +240,10 @@ export default function HomeScreen() {
label: t('navigation.achievements', 'Achievements'),
icon: ,
path: '/achievements',
- },
+ },
];
- const mapTaskItem = React.useCallback((task: TaskItem): TaskHero | null => {
+ const mapTaskItem = React.useCallback((task: TaskItem, emotionMap: Record): TaskHero | null => {
const record = task as Record;
const id = Number(record.id ?? record.task_id ?? 0);
const title =
@@ -281,7 +303,7 @@ export default function HomeScreen() {
duration: Number.isFinite(duration) ? duration : null,
emotion,
};
- }, [emotionMap]);
+ }, []);
const selectRandomTask = React.useCallback(
(list: TaskHero[]) => {
@@ -389,12 +411,8 @@ export default function HomeScreen() {
nextMap[slug] = title || slug;
}
}
- setEmotionMap(nextMap);
- const mapped = taskList.map(mapTaskItem).filter(Boolean) as TaskHero[];
+ const mapped = taskList.map((task) => mapTaskItem(task, nextMap)).filter(Boolean) as TaskHero[];
setTasks(mapped);
- if (!currentTask || !mapped.some((task) => task.id === currentTask.id)) {
- selectRandomTask(mapped);
- }
})
.catch((error) => {
console.error('Failed to load tasks', error);
@@ -405,7 +423,7 @@ export default function HomeScreen() {
.finally(() => {
setTaskLoading(false);
});
- }, [currentTask, locale, mapTaskItem, selectRandomTask, t, tasksEnabled, token]);
+ }, [locale, mapTaskItem, t, tasksEnabled, token]);
React.useEffect(() => {
let active = true;
@@ -435,12 +453,8 @@ export default function HomeScreen() {
nextMap[slug] = title || slug;
}
}
- setEmotionMap(nextMap);
- const mapped = taskList.map(mapTaskItem).filter(Boolean) as TaskHero[];
+ const mapped = taskList.map((task) => mapTaskItem(task, nextMap)).filter(Boolean) as TaskHero[];
setTasks(mapped);
- if (!currentTask || !mapped.some((task) => task.id === currentTask.id)) {
- selectRandomTask(mapped);
- }
})
.catch((error) => {
console.error('Failed to load tasks', error);
@@ -459,9 +473,19 @@ export default function HomeScreen() {
return () => {
active = false;
};
- }, [currentTask, locale, mapTaskItem, selectRandomTask, t, tasksEnabled, token]);
+ }, [locale, mapTaskItem, t, tasksEnabled, token]);
+
+ React.useEffect(() => {
+ if (!tasksEnabled || tasks.length === 0) {
+ setCurrentTask(null);
+ return;
+ }
+ if (currentTask && tasks.some((task) => task.id === currentTask.id) && !isCompleted(currentTask.id)) {
+ return;
+ }
+ selectRandomTask(tasks);
+ }, [currentTask, isCompleted, selectRandomTask, tasks, tasksEnabled]);
- const queueCount = items.filter((item) => item.status !== 'done').length;
const preview = React.useMemo(
() =>
galleryPhotos.slice(0, 4).map((photo) => ({
@@ -510,25 +534,66 @@ export default function HomeScreen() {
return (
-
- = 1 ? 1 : 0}
- y={revealStage >= 1 ? 0 : 12}
- >
-
- {rings.map((ring) => (
-
-
-
- ))}
-
-
+
+ {welcomeVisible && welcomeMessage.trim() ? (
+ = 1 ? 1 : 0}
+ y={revealStage >= 1 ? 0 : 12}
+ >
+
+
+
+ {t('homeV2.welcome.label', 'Welcome')}
+
+
+ {welcomeMessage}
+
+
+
+ ) : null}
{tasksEnabled ? (
= 2 ? 1 : 0}
y={revealStage >= 2 ? 0 : 16}
>
= 2 ? 1 : 0}
y={revealStage >= 2 ? 0 : 16}
style={{
backgroundImage: isDark
@@ -586,8 +654,7 @@ export default function HomeScreen() {
@@ -658,6 +725,23 @@ export default function HomeScreen() {
})}
+
+ = 5 ? 1 : 0}
+ y={revealStage >= 5 ? 0 : 12}
+ >
+
+ {rings.map((ring) => (
+
+
+
+ ))}
+
+
+
);
diff --git a/resources/js/guest-v2/screens/TasksScreen.tsx b/resources/js/guest-v2/screens/TasksScreen.tsx
index 3beafad6..074cc294 100644
--- a/resources/js/guest-v2/screens/TasksScreen.tsx
+++ b/resources/js/guest-v2/screens/TasksScreen.tsx
@@ -2,8 +2,9 @@ import React from 'react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Button } from '@tamagui/button';
-import { Sparkles, Trophy, Play } from 'lucide-react';
+import { Trophy, Play } from 'lucide-react';
import AppShell from '../components/AppShell';
+import TaskHeroCard, { type TaskHero } from '../components/TaskHeroCard';
import { useEventData } from '../context/EventDataContext';
import { useTranslation } from '@/guest/i18n/useTranslation';
import { useLocale } from '@/guest/i18n/LocaleContext';
@@ -12,13 +13,11 @@ import { fetchEmotions } from '../services/emotionsApi';
import { useGuestThemeVariant } from '../lib/guestTheme';
import { useNavigate } from 'react-router-dom';
import { useGuestTaskProgress } from '@/guest/hooks/useGuestTaskProgress';
+import { getBentoSurfaceTokens } from '../lib/bento';
+import { buildEventPath } from '../lib/routes';
-type TaskItem = {
- id: number;
- title: string;
+type TaskItem = TaskHero & {
points?: number;
- description?: string | null;
- emotion?: string | null;
};
export default function TasksScreen() {
@@ -26,84 +25,159 @@ export default function TasksScreen() {
const { t } = useTranslation();
const { locale } = useLocale();
const navigate = useNavigate();
- const { completedCount } = useGuestTaskProgress(token ?? undefined);
+ const { completedCount, isCompleted } = useGuestTaskProgress(token ?? undefined);
const { isDark } = useGuestThemeVariant();
- const cardBorder = isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.12)';
- const cardShadow = isDark ? '0 16px 32px rgba(2, 6, 23, 0.35)' : '0 14px 24px rgba(15, 23, 42, 0.12)';
+ const bentoSurface = getBentoSurfaceTokens(isDark);
+ const cardBorder = bentoSurface.borderColor;
+ const cardShadow = bentoSurface.shadow;
const mutedButton = isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(15, 23, 42, 0.06)';
const mutedButtonBorder = isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(15, 23, 42, 0.12)';
const [tasks, setTasks] = React.useState([]);
const [highlight, setHighlight] = React.useState(null);
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState(null);
- const [emotions, setEmotions] = React.useState>({});
+ const [hasSwiped, setHasSwiped] = React.useState(false);
const progressTotal = tasks.length || 1;
const progressPercent = Math.min(100, Math.round((completedCount / progressTotal) * 100));
+ const mapTaskItem = React.useCallback((task: unknown, emotionMap: Record) => {
+ const record = task as Record;
+ const id = Number(record.id ?? record.task_id ?? 0);
+ const title =
+ typeof record.title === 'string'
+ ? record.title
+ : typeof record.name === 'string'
+ ? record.name
+ : '';
+ if (!id || !title) return null;
+
+ const description =
+ typeof record.description === 'string'
+ ? record.description
+ : typeof record.prompt === 'string'
+ ? record.prompt
+ : null;
+ const instructions =
+ typeof record.instructions === 'string'
+ ? record.instructions
+ : typeof record.instruction === 'string'
+ ? record.instruction
+ : null;
+ const durationValue = record.duration ?? record.time_limit ?? record.minutes ?? null;
+ const duration = typeof durationValue === 'number' ? durationValue : Number(durationValue);
+ const emotionSlug = typeof record.emotion_slug === 'string' ? record.emotion_slug : null;
+ const emotionMeta = emotionSlug ? emotionMap[emotionSlug] : undefined;
+
+ return {
+ id,
+ title,
+ description,
+ instructions,
+ duration: Number.isFinite(duration) ? duration : null,
+ emotion: emotionSlug
+ ? {
+ slug: emotionSlug,
+ name: emotionMeta?.name ?? emotionSlug,
+ emoji: emotionMeta?.emoji,
+ }
+ : undefined,
+ points: typeof record.points === 'number' ? record.points : undefined,
+ } satisfies TaskItem;
+ }, []);
+
+ const loadTasks = React.useCallback(async () => {
+ if (!token) {
+ setTasks([]);
+ setHighlight(null);
+ setError(null);
+ setLoading(false);
+ return;
+ }
+
+ setLoading(true);
+ setError(null);
+
+ try {
+ const [taskList, emotionList] = await Promise.all([
+ fetchTasks(token, { locale, perPage: 12 }),
+ fetchEmotions(token, locale),
+ ]);
+
+ const emotionMap: Record = {};
+ for (const emotion of emotionList) {
+ const record = emotion as Record;
+ const slug = typeof record.slug === 'string' ? record.slug : '';
+ const title = typeof record.title === 'string' ? record.title : typeof record.name === 'string' ? record.name : '';
+ const emoji = typeof record.emoji === 'string' ? record.emoji : undefined;
+ if (slug) {
+ emotionMap[slug] = { name: title || slug, emoji };
+ }
+ }
+
+ const mapped = taskList.map((task) => mapTaskItem(task, emotionMap)).filter(Boolean) as TaskItem[];
+ setTasks(mapped);
+ setHighlight((prev) => {
+ if (!mapped.length) return null;
+ if (prev && mapped.some((task) => task.id === prev.id)) {
+ return prev;
+ }
+ return mapped[0] ?? null;
+ });
+ } catch (err) {
+ console.error('Failed to load tasks', err);
+ setError(t('pendingUploads.error', 'Loading failed. Please try again.'));
+ } finally {
+ setLoading(false);
+ }
+ }, [locale, mapTaskItem, t, token]);
+
React.useEffect(() => {
if (!token) {
setTasks([]);
setHighlight(null);
+ setError(null);
+ setLoading(false);
return;
}
- let active = true;
- setLoading(true);
- setError(null);
+ loadTasks();
+ }, [loadTasks, token]);
- Promise.all([
- fetchTasks(token, { locale, perPage: 12 }),
- fetchEmotions(token, locale),
- ])
- .then(([taskList, emotionList]) => {
- if (!active) return;
+ React.useEffect(() => {
+ if (!tasks.length) {
+ setHighlight(null);
+ return;
+ }
+ if (highlight && tasks.some((task) => task.id === highlight.id)) return;
+ setHighlight(tasks[0] ?? null);
+ }, [highlight, tasks]);
- const emotionMap: Record = {};
- for (const emotion of emotionList) {
- const record = emotion as Record;
- const slug = typeof record.slug === 'string' ? record.slug : '';
- const title = typeof record.title === 'string' ? record.title : typeof record.name === 'string' ? record.name : '';
- if (slug) {
- emotionMap[slug] = title || slug;
- }
- }
- setEmotions(emotionMap);
+ const handleStartTask = React.useCallback(() => {
+ if (!highlight) return;
+ navigate(buildEventPath(token, `/upload?taskId=${highlight.id}`));
+ }, [highlight, navigate, token]);
- const mapped = taskList
- .map((task) => {
- const record = task as Record;
- const id = Number(record.id ?? 0);
- const title = typeof record.title === 'string' ? record.title : typeof record.name === 'string' ? record.name : '';
- if (!id || !title) return null;
- return {
- id,
- title,
- points: typeof record.points === 'number' ? record.points : undefined,
- description: typeof record.description === 'string' ? record.description : null,
- emotion: typeof record.emotion_slug === 'string' ? record.emotion_slug : null,
- } satisfies TaskItem;
- })
- .filter(Boolean) as TaskItem[];
+ const handleShuffle = React.useCallback(() => {
+ if (!tasks.length) return;
+ const candidates = tasks.filter((task) => task.id !== highlight?.id);
+ const nextList = candidates.length ? candidates : tasks;
+ const next = nextList[Math.floor(Math.random() * nextList.length)];
+ setHighlight(next);
+ setHasSwiped(true);
+ }, [highlight?.id, tasks]);
- setTasks(mapped);
- setHighlight(mapped[0] ?? null);
- })
- .catch((err) => {
- console.error('Failed to load tasks', err);
- if (active) {
- setError(t('tasks.error', 'Tasks could not be loaded.'));
- }
- })
- .finally(() => {
- if (active) {
- setLoading(false);
- }
- });
+ const handleViewSimilar = React.useCallback(() => {
+ if (!highlight) return;
+ navigate(buildEventPath(token, `/gallery?task=${highlight.id}`));
+ }, [highlight, navigate, token]);
- return () => {
- active = false;
- };
- }, [token, locale, t]);
+ const handleOpenPhoto = React.useCallback(
+ (photoId: number) => {
+ if (!highlight) return;
+ navigate(buildEventPath(token, `/gallery?photoId=${photoId}&task=${highlight.id}`));
+ },
+ [highlight, navigate, token]
+ );
if (!tasksEnabled) {
return (
@@ -111,11 +185,14 @@ export default function TasksScreen() {
{t('tasks.disabled.title', 'Tasks are disabled')}
@@ -134,68 +211,78 @@ export default function TasksScreen() {
-
-
-
- Prompt quest
-
-
+
+ {t('tasks.page.eyebrow', 'Mission hub')}
+
- {highlight?.title ?? t('tasks.loading', 'Loading tasks...')}
+ {t('tasks.page.title', 'Your next task')}
- {highlight?.description ?? t('tasks.subtitle', 'Complete this quest to unlock new prompts.')}
+ {t('tasks.page.subtitle', 'Pick a mood or stay spontaneous.')}
-
-
-
- {t('tasks.page.progressLabel', 'Quest progress')}
-
-
- {highlight ? `${progressPercent}%` : '--'}
-
-
-
-
-
-
- {t('tasks.page.progressValue', { count: completedCount, total: tasks.length }, '{count}/{total} tasks completed')}
+
+
+ setHasSwiped(true)}
+ onStart={handleStartTask}
+ onShuffle={handleShuffle}
+ onViewSimilar={handleViewSimilar}
+ onRetry={loadTasks}
+ onOpenPhoto={handleOpenPhoto}
+ isCompleted={Boolean(highlight && isCompleted(highlight.id))}
+ photos={[]}
+ photosLoading={false}
+ />
+
+
+
+
+ {t('tasks.page.progressLabel', 'Quest progress')}
+
+ {highlight ? `${progressPercent}%` : '--'}
+
+
+
+
-
+
+ {t('tasks.page.progressValue', { count: completedCount, total: tasks.length }, '{count}/{total} tasks completed')}
+
{error ? (
-
+
{error}
@@ -205,13 +292,32 @@ export default function TasksScreen() {
{tasks.length === 0 && loading ? (
- {t('tasks.loading', 'Loading tasks...')}
+ {t('common.actions.loading', 'Loading...')}
+
+
+ ) : null}
+ {tasks.length === 0 && !loading && !error ? (
+
+
+ {t('tasks.page.noTasksAlert', 'No tasks available for this event yet.')}
) : null}
@@ -219,10 +325,12 @@ export default function TasksScreen() {
{task.title}
- {task.emotion ? (
+ {task.emotion?.name ? (
- {emotions[task.emotion] ?? task.emotion}
+ {task.emotion.name}
) : null}
-
-
-
- +{task.points ?? 0}
-
-
+ {typeof task.points === 'number' ? (
+
+
+
+ +{task.points}
+
+
+ ) : null}