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

Adopt Tamagui defaults for tabs and filters
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details
tests / ui (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Codex Agent
2026-02-04 08:29:50 +01:00
parent 0535f63b40
commit eecb1a5b85
14 changed files with 650 additions and 622 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
resources/js/admin/mobile/EventControlRoomPage.tsx
View File

@@ -343,7 +343,6 @@ export default function MobileEventControlRoomPage() {
const liveResetRef = React.useRef(false);
const [fallbackAttempted, setFallbackAttempted] = React.useState(false);
const back = useBackNavigation(slug ? adminPath(`/mobile/events/${slug}`) : adminPath('/mobile/events'));
const activeFilterBg = primary;
const saveControlRoomSettings = React.useCallback(
async (nextSettings: ControlRoomSettings) => {
@@ -1376,60 +1375,52 @@ export default function MobileEventControlRoomPage() {
{t('mobilePhotos.filtersTitle', 'Filter')}
</Text>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
<XStack
<ToggleGroup
type="single"
value={moderationFilter}
onValueChange={(value: string) => value && setModerationFilter(value as ModerationFilter)}
disableDeactivation
orientation="horizontal"
flexDirection="row"
alignItems="center"
padding="$1"
borderRadius={999}
gap="$1.5"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor={surfaceMuted}
overflow="hidden"
>
<ToggleGroup
type="single"
value={moderationFilter}
onValueChange={(value: string) => value && setModerationFilter(value as ModerationFilter)}
>
<XStack gap="$1.5">
{MODERATION_FILTERS.map((option) => {
const active = option.value === moderationFilter;
const count = moderationCounts[option.value] ?? 0;
return (
<ToggleGroup.Item
key={option.value}
value={option.value}
unstyled
borderRadius={999}
{MODERATION_FILTERS.map((option) => {
const count = moderationCounts[option.value] ?? 0;
return (
<ToggleGroup.Item
key={option.value}
value={option.value}
borderRadius="$pill"
paddingVertical="$1.5"
paddingHorizontal="$3"
>
<XStack alignItems="center" gap="$1.5">
<Text fontSize="$xs" fontWeight="600">
{t(option.labelKey, option.fallback)}
</Text>
<XStack
paddingHorizontal="$1.5"
paddingVertical="$0.5"
borderRadius="$pill"
borderWidth={1}
borderColor="transparent"
backgroundColor={active ? activeFilterBg : 'transparent'}
paddingVertical="$1.5"
paddingHorizontal="$3"
pressStyle={{ opacity: 0.85 }}
borderColor={border}
backgroundColor="$backgroundStrong"
>
<XStack alignItems="center" gap="$1.5">
<Text fontSize="$xs" fontWeight="700" color={active ? '#fff' : muted}>
{t(option.labelKey, option.fallback)}
</Text>
<XStack
paddingHorizontal="$1.5"
paddingVertical="$0.5"
borderRadius={999}
borderWidth={1}
borderColor={active ? 'transparent' : border}
backgroundColor={active ? withAlpha('#ffffff', 0.2) : surface}
>
<Text fontSize={10} fontWeight="800" color={active ? '#fff' : muted}>
{count}
</Text>
</XStack>
</XStack>
</ToggleGroup.Item>
);
})}
</XStack>
</ToggleGroup>
</XStack>
<Text fontSize={10} fontWeight="700">
{count}
</Text>
</XStack>
</XStack>
</ToggleGroup.Item>
);
})}
</ToggleGroup>
</ScrollView>
</YStack>
</MobileCard>
@@ -1564,60 +1555,52 @@ export default function MobileEventControlRoomPage() {
{t('liveShowQueue.filterLabel', 'Live status')}
</Text>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
<XStack
<ToggleGroup
type="single"
value={liveStatusFilter}
onValueChange={(value: string) => value && setLiveStatusFilter(value as LiveShowQueueStatus)}
disableDeactivation
orientation="horizontal"
flexDirection="row"
alignItems="center"
padding="$1"
borderRadius={999}
gap="$1.5"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor={surfaceMuted}
overflow="hidden"
>
<ToggleGroup
type="single"
value={liveStatusFilter}
onValueChange={(value: string) => value && setLiveStatusFilter(value as LiveShowQueueStatus)}
>
<XStack gap="$1.5">
{LIVE_STATUS_OPTIONS.map((option) => {
const active = option.value === liveStatusFilter;
const count = liveCounts[option.value] ?? 0;
return (
<ToggleGroup.Item
key={option.value}
value={option.value}
unstyled
borderRadius={999}
{LIVE_STATUS_OPTIONS.map((option) => {
const count = liveCounts[option.value] ?? 0;
return (
<ToggleGroup.Item
key={option.value}
value={option.value}
borderRadius="$pill"
paddingVertical="$1.5"
paddingHorizontal="$3"
>
<XStack alignItems="center" gap="$1.5">
<Text fontSize="$xs" fontWeight="600">
{t(option.labelKey, option.fallback)}
</Text>
<XStack
paddingHorizontal="$1.5"
paddingVertical="$0.5"
borderRadius="$pill"
borderWidth={1}
borderColor="transparent"
backgroundColor={active ? activeFilterBg : 'transparent'}
paddingVertical="$1.5"
paddingHorizontal="$3"
pressStyle={{ opacity: 0.85 }}
borderColor={border}
backgroundColor="$backgroundStrong"
>
<XStack alignItems="center" gap="$1.5">
<Text fontSize="$xs" fontWeight="700" color={active ? '#fff' : muted}>
{t(option.labelKey, option.fallback)}
</Text>
<XStack
paddingHorizontal="$1.5"
paddingVertical="$0.5"
borderRadius={999}
borderWidth={1}
borderColor={active ? 'transparent' : border}
backgroundColor={active ? withAlpha('#ffffff', 0.2) : surface}
>
<Text fontSize={10} fontWeight="800" color={active ? '#fff' : muted}>
{count}
</Text>
</XStack>
</XStack>
</ToggleGroup.Item>
);
})}
</XStack>
</ToggleGroup>
</XStack>
<Text fontSize={10} fontWeight="700">
{count}
</Text>
</XStack>
</XStack>
</ToggleGroup.Item>
);
})}
</ToggleGroup>
</ScrollView>
</YStack>
</MobileCard>