373 lines
12 KiB
TypeScript
373 lines
12 KiB
TypeScript
import React, { Suspense } from 'react';
|
|
import { useLocation, useNavigate } from 'react-router-dom';
|
|
import { ChevronLeft, Bell, QrCode } 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 { useTranslation } from 'react-i18next';
|
|
import { useEventContext } from '../../context/EventContext';
|
|
import { BottomNav, NavKey } from './BottomNav';
|
|
import { useMobileNav } from '../hooks/useMobileNav';
|
|
import { adminPath } from '../../constants';
|
|
import { MobileCard, CTAButton } from './Primitives';
|
|
import { useNotificationsBadge } from '../hooks/useNotificationsBadge';
|
|
import { useOnlineStatus } from '../hooks/useOnlineStatus';
|
|
import { resolveEventDisplayName } from '../../lib/events';
|
|
import { TenantEvent, getEvents } from '../../api';
|
|
import { withAlpha } from './colors';
|
|
import { setTabHistory } from '../lib/tabHistory';
|
|
import { loadPhotoQueue } from '../lib/photoModerationQueue';
|
|
import { countQueuedPhotoActions } from '../lib/queueStatus';
|
|
import { useAdminTheme } from '../theme';
|
|
|
|
type MobileShellProps = {
|
|
title?: string;
|
|
subtitle?: string;
|
|
children: React.ReactNode;
|
|
activeTab: NavKey;
|
|
onBack?: () => void;
|
|
headerActions?: React.ReactNode;
|
|
};
|
|
|
|
export function MobileShell({ title, subtitle, children, activeTab, onBack, headerActions }: MobileShellProps) {
|
|
const { events, activeEvent, selectEvent } = useEventContext();
|
|
const { go } = useMobileNav(activeEvent?.slug, activeTab);
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const { t } = useTranslation('mobile');
|
|
const { count: notificationCount } = useNotificationsBadge();
|
|
const online = useOnlineStatus();
|
|
const {
|
|
background,
|
|
surface,
|
|
border,
|
|
text,
|
|
muted,
|
|
warningBg,
|
|
warningText,
|
|
primary,
|
|
danger,
|
|
shadow,
|
|
glassSurfaceStrong,
|
|
glassBorder,
|
|
glassShadow,
|
|
appBackground,
|
|
} = useAdminTheme();
|
|
const backgroundColor = background;
|
|
const surfaceColor = surface;
|
|
const borderColor = border;
|
|
const textColor = text;
|
|
const mutedText = muted;
|
|
const headerSurface = glassSurfaceStrong ?? withAlpha(surfaceColor, 0.94);
|
|
const headerBorder = glassBorder ?? borderColor;
|
|
const actionSurface = glassSurfaceStrong ?? surfaceColor;
|
|
const actionBorder = glassBorder ?? borderColor;
|
|
const actionShadow = glassShadow ?? shadow;
|
|
const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]);
|
|
const [loadingEvents, setLoadingEvents] = React.useState(false);
|
|
const [attemptedFetch, setAttemptedFetch] = React.useState(false);
|
|
const [queuedPhotoCount, setQueuedPhotoCount] = React.useState(0);
|
|
const [isCompactHeader, setIsCompactHeader] = React.useState(false);
|
|
|
|
const effectiveEvents = events.length ? events : fallbackEvents;
|
|
const effectiveActive = activeEvent ?? (effectiveEvents.length === 1 ? effectiveEvents[0] : null);
|
|
|
|
React.useEffect(() => {
|
|
if (events.length || loadingEvents || attemptedFetch) {
|
|
return;
|
|
}
|
|
setAttemptedFetch(true);
|
|
setLoadingEvents(true);
|
|
getEvents({ force: true })
|
|
.then((list) => {
|
|
setFallbackEvents(list ?? []);
|
|
if (!activeEvent && list?.length === 1) {
|
|
selectEvent(list[0]?.slug ?? null);
|
|
}
|
|
})
|
|
.catch(() => setFallbackEvents([]))
|
|
.finally(() => setLoadingEvents(false));
|
|
}, [events.length, loadingEvents, attemptedFetch, activeEvent, selectEvent]);
|
|
|
|
React.useEffect(() => {
|
|
const path = `${location.pathname}${location.search}${location.hash}`;
|
|
|
|
// Blacklist transient paths from being saved in tab history
|
|
const isBlacklisted =
|
|
location.pathname.includes('/billing/shop') ||
|
|
location.pathname.includes('/welcome');
|
|
|
|
if (!isBlacklisted) {
|
|
setTabHistory(activeTab, path);
|
|
}
|
|
}, [activeTab, location.hash, location.pathname, location.search]);
|
|
|
|
const refreshQueuedActions = React.useCallback(() => {
|
|
const queue = loadPhotoQueue();
|
|
setQueuedPhotoCount(countQueuedPhotoActions(queue, effectiveActive?.slug ?? null));
|
|
}, [effectiveActive?.slug]);
|
|
|
|
React.useEffect(() => {
|
|
refreshQueuedActions();
|
|
}, [refreshQueuedActions, location.pathname]);
|
|
|
|
React.useEffect(() => {
|
|
const handleFocus = () => refreshQueuedActions();
|
|
window.addEventListener('focus', handleFocus);
|
|
return () => {
|
|
window.removeEventListener('focus', handleFocus);
|
|
};
|
|
}, [refreshQueuedActions]);
|
|
|
|
React.useEffect(() => {
|
|
if (typeof window === 'undefined' || !window.matchMedia) {
|
|
return;
|
|
}
|
|
const query = window.matchMedia('(max-width: 520px)');
|
|
const handleChange = (event: MediaQueryListEvent) => {
|
|
setIsCompactHeader(event.matches);
|
|
};
|
|
setIsCompactHeader(query.matches);
|
|
query.addEventListener?.('change', handleChange);
|
|
return () => {
|
|
query.removeEventListener?.('change', handleChange);
|
|
};
|
|
}, []);
|
|
|
|
const pageTitle = title ?? t('header.appName', 'Event Admin');
|
|
const eventContext = !isCompactHeader && effectiveActive ? resolveEventDisplayName(effectiveActive) : null;
|
|
const subtitleText = subtitle ?? eventContext ?? '';
|
|
const showQr = Boolean(effectiveActive?.slug);
|
|
const headerBackButton = onBack ? (
|
|
<HeaderActionButton onPress={onBack} ariaLabel={t('actions.back', 'Back')}>
|
|
<XStack alignItems="center" space="$1.5">
|
|
<ChevronLeft size={28} color={primary} strokeWidth={2.5} />
|
|
</XStack>
|
|
</HeaderActionButton>
|
|
) : (
|
|
<XStack width={28} />
|
|
);
|
|
const headerTitle = (
|
|
<XStack alignItems="center" space="$1" flex={1} minWidth={0} justifyContent="flex-end">
|
|
<YStack alignItems="flex-end" maxWidth="100%">
|
|
<Text fontSize="$lg" fontWeight="800" fontFamily="$display" color={textColor} textAlign="right" numberOfLines={1}>
|
|
{pageTitle}
|
|
</Text>
|
|
{subtitleText ? (
|
|
<Text fontSize="$xs" color={mutedText} textAlign="right" numberOfLines={1} fontFamily="$body">
|
|
{subtitleText}
|
|
</Text>
|
|
) : null}
|
|
</YStack>
|
|
</XStack>
|
|
);
|
|
const headerActionsRow = (
|
|
<XStack alignItems="center" space="$2">
|
|
<HeaderActionButton
|
|
onPress={() => navigate(adminPath('/mobile/notifications'))}
|
|
ariaLabel={t('mobile.notifications', 'Notifications')}
|
|
>
|
|
<XStack
|
|
width={34}
|
|
height={34}
|
|
borderRadius={12}
|
|
backgroundColor={actionSurface}
|
|
borderWidth={1}
|
|
borderColor={actionBorder}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
position="relative"
|
|
style={{
|
|
boxShadow: `0 10px 18px ${actionShadow}`,
|
|
backdropFilter: 'blur(12px)',
|
|
WebkitBackdropFilter: 'blur(12px)',
|
|
}}
|
|
>
|
|
<Bell size={16} color={textColor} />
|
|
{notificationCount > 0 ? (
|
|
<YStack
|
|
position="absolute"
|
|
top={-4}
|
|
right={-4}
|
|
minWidth={18}
|
|
height={18}
|
|
paddingHorizontal={6}
|
|
borderRadius={999}
|
|
backgroundColor={danger}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<Text fontSize={10} color="white" fontWeight="700">
|
|
{notificationCount > 9 ? '9+' : notificationCount}
|
|
</Text>
|
|
</YStack>
|
|
) : null}
|
|
</XStack>
|
|
</HeaderActionButton>
|
|
{showQr ? (
|
|
<HeaderActionButton
|
|
onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive?.slug}/qr`))}
|
|
ariaLabel={t('header.quickQr', 'Quick QR')}
|
|
>
|
|
<XStack
|
|
width={34}
|
|
height={34}
|
|
borderRadius={12}
|
|
backgroundColor={primary}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
style={{ boxShadow: `0 10px 18px ${withAlpha(primary, 0.32)}` }}
|
|
>
|
|
<QrCode size={16} color="white" />
|
|
</XStack>
|
|
</HeaderActionButton>
|
|
) : null}
|
|
{headerActions ?? null}
|
|
</XStack>
|
|
);
|
|
|
|
return (
|
|
<YStack
|
|
backgroundColor={backgroundColor}
|
|
minHeight="100vh"
|
|
alignItems="center"
|
|
style={{ background: appBackground }}
|
|
>
|
|
<YStack
|
|
backgroundColor={headerSurface}
|
|
borderBottomWidth={1}
|
|
borderColor={headerBorder}
|
|
paddingHorizontal="$4"
|
|
paddingTop="$4"
|
|
paddingBottom="$3"
|
|
shadowColor={actionShadow}
|
|
shadowOpacity={0.08}
|
|
shadowRadius={14}
|
|
shadowOffset={{ width: 0, height: 8 }}
|
|
width="100%"
|
|
maxWidth={800}
|
|
position="sticky"
|
|
top={0}
|
|
zIndex={60}
|
|
style={{
|
|
paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
|
|
backdropFilter: 'blur(12px)',
|
|
WebkitBackdropFilter: 'blur(12px)',
|
|
}}
|
|
>
|
|
{isCompactHeader ? (
|
|
<YStack space="$2">
|
|
<XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$3">
|
|
{headerBackButton}
|
|
<XStack flex={1} minWidth={0} justifyContent="flex-end">
|
|
{headerTitle}
|
|
</XStack>
|
|
</XStack>
|
|
<XStack alignItems="center" justifyContent="flex-end">
|
|
{headerActionsRow}
|
|
</XStack>
|
|
</YStack>
|
|
) : (
|
|
<XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$3">
|
|
{headerBackButton}
|
|
<XStack alignItems="center" space="$2.5" flex={1} justifyContent="flex-end" minWidth={0}>
|
|
{headerTitle}
|
|
{headerActionsRow}
|
|
</XStack>
|
|
</XStack>
|
|
)}
|
|
</YStack>
|
|
|
|
<YStack
|
|
flex={1}
|
|
padding="$4"
|
|
paddingBottom="$10"
|
|
space="$3"
|
|
width="100%"
|
|
maxWidth={800}
|
|
style={{ paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 96px)' }}
|
|
>
|
|
{!online ? (
|
|
<XStack
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
borderRadius={12}
|
|
backgroundColor={warningBg}
|
|
paddingVertical="$2"
|
|
paddingHorizontal="$3"
|
|
>
|
|
<Text fontSize="$xs" fontWeight="700" color={warningText}>
|
|
{t('status.offline', 'Offline mode: changes will sync when you are back online.')}
|
|
</Text>
|
|
</XStack>
|
|
) : null}
|
|
{queuedPhotoCount > 0 ? (
|
|
<MobileCard space="$2">
|
|
<Text fontSize="$sm" fontWeight="700" color={textColor}>
|
|
{t('status.queueTitle', 'Photo actions pending')}
|
|
</Text>
|
|
<Text fontSize="$xs" color={mutedText}>
|
|
{online
|
|
? t('status.queueBodyOnline', '{{count}} actions ready to sync.', { count: queuedPhotoCount })
|
|
: t('status.queueBodyOffline', '{{count}} actions saved offline.', { count: queuedPhotoCount })}
|
|
</Text>
|
|
{effectiveActive?.slug ? (
|
|
<CTAButton
|
|
label={t('status.queueAction', 'Open moderation')}
|
|
tone="ghost"
|
|
fullWidth={false}
|
|
onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive.slug}/control-room`))}
|
|
/>
|
|
) : null}
|
|
</MobileCard>
|
|
) : null}
|
|
{children}
|
|
</YStack>
|
|
|
|
<BottomNav active={activeTab} onNavigate={go} />
|
|
|
|
</YStack>
|
|
);
|
|
}
|
|
|
|
export function HeaderActionButton({
|
|
onPress,
|
|
children,
|
|
ariaLabel,
|
|
}: {
|
|
onPress: () => void;
|
|
children: React.ReactNode;
|
|
ariaLabel?: string;
|
|
}) {
|
|
const [pressed, setPressed] = React.useState(false);
|
|
return (
|
|
<Pressable
|
|
onPress={onPress}
|
|
onPressIn={() => setPressed(true)}
|
|
onPressOut={() => setPressed(false)}
|
|
onPointerLeave={() => setPressed(false)}
|
|
aria-label={ariaLabel}
|
|
style={{
|
|
transform: pressed ? 'scale(0.96)' : 'scale(1)',
|
|
opacity: pressed ? 0.86 : 1,
|
|
transition: 'transform 120ms ease, opacity 120ms ease',
|
|
}}
|
|
>
|
|
{children}
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
export function renderEventLocation(event?: TenantEvent | null): string {
|
|
if (!event) return 'Location';
|
|
const settings = (event.settings ?? {}) as Record<string, unknown>;
|
|
const candidate =
|
|
(settings.location as string | undefined) ??
|
|
(settings.address as string | undefined) ??
|
|
(settings.city as string | undefined);
|
|
if (candidate && candidate.trim()) {
|
|
return candidate;
|
|
}
|
|
return 'Location';
|
|
}
|