Embed quick actions header
Some checks failed
linter / quality (push) Has been cancelled
tests / ci (push) Has been cancelled
tests / ui (push) Has been cancelled

This commit is contained in:
Codex Agent
2026-01-22 16:31:46 +01:00
parent 8aa2efdd9a
commit 64c9d7357a

View File

@@ -237,10 +237,6 @@ export default function MobileDashboardPage() {
<AlertsSection event={activeEvent} stats={stats} t={t} /> <AlertsSection event={activeEvent} stats={stats} t={t} />
{/* 4. UNIFIED COMMAND GRID */} {/* 4. UNIFIED COMMAND GRID */}
<SectionHeader
title={t('dashboard:quickActions.title', 'Quick actions')}
subtitle={t('dashboard:quickActions.description', 'Jump straight to the most important actions.')}
/>
<UnifiedToolGrid <UnifiedToolGrid
event={activeEvent} event={activeEvent}
navigate={navigate} navigate={navigate}
@@ -532,52 +528,60 @@ function UnifiedToolGrid({ event, navigate, permissions, isMember, isCompleted }
].filter((section) => section.items.length > 0); ].filter((section) => section.items.length > 0);
return ( return (
<YStack space="$3"> <DashboardCard padding="$0">
{sections.map((section) => ( <YStack padding="$3.5" space="$2">
<DashboardCard key={section.title} padding="$0"> <SectionHeader
<YStack padding="$3.5" paddingBottom="$2.5" space="$1"> title={t('dashboard:quickActions.title', 'Quick actions')}
subtitle={t('dashboard:quickActions.description', 'Jump straight to the most important actions.')}
showSeparator={false}
compact
/>
</YStack>
<Separator backgroundColor={theme.border} opacity={0.6} />
<YStack padding="$3.5" space="$3">
{sections.map((section) => (
<YStack key={section.title} space="$2">
<Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}> <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
{section.title} {section.title}
</Text> </Text>
</YStack> <YGroup {...({ borderRadius: "$4", borderWidth: 1, borderColor: theme.border, overflow: "hidden" } as any)}>
<Separator backgroundColor={theme.border} opacity={0.6} /> {section.items.map((item) => {
<YGroup {...({ borderRadius: "$4", borderWidth: 1, borderColor: theme.border, overflow: "hidden" } as any)}> const iconColor = item.color || theme.textStrong;
{section.items.map((item) => { return (
const iconColor = item.color || theme.textStrong; <YGroup.Item key={item.label}>
return ( <ListItem
<YGroup.Item key={item.label}> hoverTheme
<ListItem pressTheme
hoverTheme paddingVertical="$2"
pressTheme paddingHorizontal="$3"
paddingVertical="$2" onPress={() => navigate(adminPath(item.path))}
paddingHorizontal="$3" title={
onPress={() => navigate(adminPath(item.path))} <XStack alignItems="center" space="$2.5">
title={ <XStack
<XStack alignItems="center" space="$2.5"> width={32}
<XStack height={32}
width={32} borderRadius={10}
height={32} backgroundColor={withAlpha(iconColor, 0.12)}
borderRadius={10} alignItems="center"
backgroundColor={withAlpha(iconColor, 0.12)} justifyContent="center"
alignItems="center" >
justifyContent="center" <item.icon size={18} color={iconColor} />
> </XStack>
<item.icon size={18} color={iconColor} /> <Text fontSize="$sm" fontWeight="700" color={theme.textStrong}>
{item.label}
</Text>
</XStack> </XStack>
<Text fontSize="$sm" fontWeight="700" color={theme.textStrong}> }
{item.label} iconAfter={<ChevronRight size={16} color={theme.muted} />}
</Text> />
</XStack> </YGroup.Item>
} );
iconAfter={<ChevronRight size={16} color={theme.muted} />} })}
/> </YGroup>
</YGroup.Item> </YStack>
); ))}
})} </YStack>
</YGroup> </DashboardCard>
</DashboardCard>
))}
</YStack>
); );
} }