soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Implemented a shared mobile shell and navigation aligned to the new architecture, plus refactored the dashboard and

Browse Source 
tab flows.

  - Added a dynamic MobileShell with sticky header (notification bell with badge, quick QR when an event is
    active, event switcher for multi-event users) and stabilized bottom tabs (home, tasks, uploads, profile)
    driven by useMobileNav (resources/js/admin/mobile/components/MobileShell.tsx, components/BottomNav.tsx, hooks/
    useMobileNav.ts).
  - Centralized event handling now supports 0/1/many-event states without auto-selecting in multi-tenant mode and
    exposes helper flags/activeSlug for consumers (resources/js/admin/context/EventContext.tsx).
  - Rebuilt the mobile dashboard into explicit states: onboarding/no-event, single-event focus, and multi-event picker
    with featured/secondary actions, KPI strip, and alerts (resources/js/admin/mobile/DashboardPage.tsx).
  - Introduced tab entry points that respect event context and prompt selection when needed (resources/js/admin/
    mobile/TasksTabPage.tsx, UploadsTabPage.tsx). Refreshed tasks/uploads detail screens to use the new shell and sync
    event selection (resources/js/admin/mobile/EventTasksPage.tsx, EventPhotosPage.tsx).
  - Updated mobile routes and existing screens to the new tab keys and header/footer behavior (resources/js/admin/
    router.tsx, mobile/* pages, i18n nav/header strings).
This commit is contained in:
Codex Agent
2025-12-10 16:13:44 +01:00
parent 9930b272ca
commit 73e550ee87
19 changed files with 840 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
resources/js/admin/mobile/components/BottomNav.tsx
View File

@@ -2,21 +2,19 @@ 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 { Home, CheckSquare, Bell, User } from 'lucide-react';
import { Home, CheckSquare, Image as ImageIcon, User } from 'lucide-react';
import { useTheme } from '@tamagui/core';
import { useTranslation } from 'react-i18next';
import { useAlertsBadge } from '../hooks/useAlertsBadge';
export type NavKey = 'events' | 'tasks' | 'alerts' | 'profile';
export type NavKey = 'home' | 'tasks' | 'uploads' | 'profile';
export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
const { t } = useTranslation('mobile');
const theme = useTheme();
const { count: alertCount } = useAlertsBadge();
const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string }>; label: string }> = [
{ key: 'events', icon: Home, label: t('nav.events', 'Events') },
{ key: 'home', icon: Home, label: t('nav.home', 'Home') },
{ key: 'tasks', icon: CheckSquare, label: t('nav.tasks', 'Tasks') },
{ key: 'alerts', icon: Bell, label: t('nav.alerts', 'Alerts') },
{ key: 'uploads', icon: ImageIcon, label: t('nav.uploads', 'Uploads') },
{ key: 'profile', icon: User, label: t('nav.profile', 'Profile') },
];
@@ -50,24 +48,6 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
<Text fontSize="$xs" color={activeState ? '$primary' : '#6b7280'}>
{item.label}
</Text>
{item.key === 'alerts' && alertCount > 0 ? (
<XStack
position="absolute"
top={-6}
right={-12}
minWidth={18}
height={18}
paddingHorizontal={6}
borderRadius={999}
backgroundColor="#ef4444"
alignItems="center"
justifyContent="center"
>
<Text fontSize={10} color="white" fontWeight="700">
{alertCount > 9 ? '9+' : alertCount}
</Text>
</XStack>
) : null}
</YStack>
</Pressable>
);