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

Improve active states for admin tabs and filters

Browse Source
This commit is contained in:
Codex Agent
2026-02-04 08:44:50 +01:00
parent ba8890839b
commit 197e9c988b
7 changed files with 178 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1383,39 +1383,31 @@ export default function MobileEventControlRoomPage() {
orientation="horizontal"
flexDirection="row"
alignItems="center"
padding="$1"
gap="$1.5"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor={surfaceMuted}
gap="$2"
>
{MODERATION_FILTERS.map((option) => {
const count = moderationCounts[option.value] ?? 0;
const active = option.value === moderationFilter;
return (
<ToggleGroup.Item
key={option.value}
value={option.value}
borderRadius="$pill"
paddingVertical="$1.5"
borderRadius="$4"
borderWidth={1}
borderColor={border}
paddingVertical="$2"
paddingHorizontal="$3"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress', borderColor: '$borderColorPress' }}
>
<XStack alignItems="center" gap="$1.5">
<Text fontSize="$xs" fontWeight="600">
<XStack alignItems="center" gap="$2">
<Text fontSize="$xs" fontWeight={active ? '700' : '600'} color={active ? text : muted}>
{t(option.labelKey, option.fallback)}
</Text>
<XStack
paddingHorizontal="$1.5"
paddingVertical="$0.5"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor="$backgroundStrong"
>
<Text fontSize={10} fontWeight="700">
{count}
</Text>
</XStack>
<Text fontSize={10} fontWeight="700" color={active ? text : muted}>
{count}
</Text>
</XStack>
</ToggleGroup.Item>
);
@@ -1563,39 +1555,31 @@ export default function MobileEventControlRoomPage() {
orientation="horizontal"
flexDirection="row"
alignItems="center"
padding="$1"
gap="$1.5"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor={surfaceMuted}
gap="$2"
>
{LIVE_STATUS_OPTIONS.map((option) => {
const count = liveCounts[option.value] ?? 0;
const active = option.value === liveStatusFilter;
return (
<ToggleGroup.Item
key={option.value}
value={option.value}
borderRadius="$pill"
paddingVertical="$1.5"
borderRadius="$4"
borderWidth={1}
borderColor={border}
paddingVertical="$2"
paddingHorizontal="$3"
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress', borderColor: '$borderColorPress' }}
>
<XStack alignItems="center" gap="$1.5">
<Text fontSize="$xs" fontWeight="600">
<XStack alignItems="center" gap="$2">
<Text fontSize="$xs" fontWeight={active ? '700' : '600'} color={active ? text : muted}>
{t(option.labelKey, option.fallback)}
</Text>
<XStack
paddingHorizontal="$1.5"
paddingVertical="$0.5"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor="$backgroundStrong"
>
<Text fontSize={10} fontWeight="700">
{count}
</Text>
</XStack>
<Text fontSize={10} fontWeight="700" color={active ? text : muted}>
{count}
</Text>
</XStack>
</ToggleGroup.Item>
);