4ce409e918
patterns, skeleton loading, photo selection/bulk actions with shared‑element transitions, notification detail sheet,
offline banner, maskable manifest icons, and route prefetching.
Key changes
- Navigation/shell: press feedback on all header actions, glassy sticky header and tab bar, safer bottom spacing
(resources/js/admin/mobile/components/MobileShell.tsx, resources/js/admin/mobile/components/BottomNav.tsx).
- Forms + lists: shared mobile form controls, list‑style rows in settings/profile, consistent inputs across core
flows (resources/js/admin/mobile/components/FormControls.tsx, resources/js/admin/mobile/SettingsPage.tsx,
resources/js/admin/mobile/ProfilePage.tsx, resources/js/admin/mobile/EventFormPage.tsx, resources/js/admin/mobile/
EventMembersPage.tsx, resources/js/admin/mobile/EventTasksPage.tsx, resources/js/admin/mobile/
EventGuestNotificationsPage.tsx, resources/js/admin/mobile/NotificationsPage.tsx, resources/js/admin/mobile/
EventPhotosPage.tsx, resources/js/admin/mobile/EventsPage.tsx).
- Media workflows: shared‑element photo transitions, selection mode + bulk actions bar (resources/js/admin/mobile/
EventPhotosPage.tsx).
- Loading UX: shimmering skeletons (resources/css/app.css, resources/js/admin/mobile/components/Primitives.tsx).
- PWA polish + perf: maskable icons, offline banner hook, and route prefetch (public/manifest.json, resources/js/
admin/mobile/hooks/useOnlineStatus.tsx, resources/js/admin/mobile/prefetch.ts, resources/js/admin/main.tsx).
77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Pressable } from '@tamagui/react-native-web-lite';
|
|
import { ChevronLeft } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useTheme } from '@tamagui/core';
|
|
import { withAlpha } from './colors';
|
|
|
|
type MobileScaffoldProps = {
|
|
title: string;
|
|
onBack?: () => void;
|
|
rightSlot?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
};
|
|
|
|
export function MobileScaffold({ title, onBack, rightSlot, children, footer }: MobileScaffoldProps) {
|
|
const { t } = useTranslation('mobile');
|
|
const theme = useTheme();
|
|
const background = String(theme.background?.val ?? '#f7f8fb');
|
|
const surface = String(theme.surface?.val ?? '#ffffff');
|
|
const border = String(theme.borderColor?.val ?? '#e5e7eb');
|
|
const textColor = String(theme.color?.val ?? '#111827');
|
|
const headerSurface = withAlpha(surface, 0.94);
|
|
|
|
return (
|
|
<YStack backgroundColor={background} minHeight="100vh">
|
|
<XStack
|
|
alignItems="center"
|
|
justifyContent="space-between"
|
|
paddingHorizontal="$4"
|
|
paddingTop="$4"
|
|
paddingBottom="$3"
|
|
backgroundColor={headerSurface}
|
|
borderBottomWidth={1}
|
|
borderColor={border}
|
|
position="sticky"
|
|
top={0}
|
|
zIndex={60}
|
|
style={{
|
|
paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
|
|
backdropFilter: 'blur(12px)',
|
|
WebkitBackdropFilter: 'blur(12px)',
|
|
}}
|
|
>
|
|
<XStack alignItems="center" space="$2">
|
|
{onBack ? (
|
|
<Pressable onPress={onBack}>
|
|
<XStack alignItems="center" space="$1.5">
|
|
<ChevronLeft size={18} color={String(theme.primary?.val ?? '#007AFF')} />
|
|
<Text fontSize="$sm" color={String(theme.primary?.val ?? '#007AFF')} fontWeight="600">
|
|
{t('actions.back', 'Back')}
|
|
</Text>
|
|
</XStack>
|
|
</Pressable>
|
|
) : (
|
|
<Text />
|
|
)}
|
|
</XStack>
|
|
<Text fontSize="$lg" fontWeight="800" color={textColor}>
|
|
{title}
|
|
</Text>
|
|
<XStack minWidth={40} justifyContent="flex-end">
|
|
{rightSlot ?? null}
|
|
</XStack>
|
|
</XStack>
|
|
|
|
<YStack flex={1} padding="$4" space="$3" paddingBottom={footer ? '$14' : '$5'}>
|
|
{children}
|
|
</YStack>
|
|
|
|
{footer ? <YStack>{footer}</YStack> : null}
|
|
</YStack>
|
|
);
|
|
}
|