Tighten tasks tab controls
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 20:59:25 +01:00
parent 32644eb41e
commit c1dfbaa51e

View File

@@ -87,9 +87,6 @@ export default function MobileEventTasksPage() {
glassBorder,
glassShadow,
} = useAdminTheme();
const stickySurface = glassSurface ?? surface;
const stickyBorder = glassBorder ?? border;
const stickyShadow = glassShadow ?? shadow;
const isMember = user?.role === 'member';
const [assignedTasks, setAssignedTasks] = React.useState<TenantTask[]>([]);
const [library, setLibrary] = React.useState<TenantTask[]>([]);
@@ -818,11 +815,17 @@ export default function MobileEventTasksPage() {
<Text fontSize="$sm" fontWeight="700" color={text}>
{t('events.tasks.tabs.library', 'Task Library')}
</Text>
<Pressable onPress={() => setActiveTab('collections')}>
<Text fontSize={12} fontWeight="600" color={primary}>
<Button
size="$2"
backgroundColor={withAlpha(primary, 0.12)}
borderWidth={1}
borderColor={withAlpha(primary, 0.35)}
onPress={() => setActiveTab('collections')}
>
<Text fontSize="$xs" fontWeight="700" color={primary}>
{t('events.tasks.import', 'Import photo task pack')}
</Text>
</Pressable>
</Button>
</XStack>
{!canAddTasks ? (
<Text fontSize={12} fontWeight="600" color={dangerText}>
@@ -966,15 +969,21 @@ export default function MobileEventTasksPage() {
<Text fontSize="$sm" fontWeight="700" color={text}>
{t('events.tasks.tabs.emotions', 'Emotions')}
</Text>
<CTAButton
label={t('events.tasks.addEmotion', 'Add emotion')}
fullWidth={false}
<Button
size="$2"
backgroundColor={withAlpha(primary, 0.12)}
borderWidth={1}
borderColor={withAlpha(primary, 0.35)}
onPress={() => {
setEditingEmotion(null);
setEmotionForm({ name: '', color: border });
setShowEmotionSheet(true);
}}
/>
>
<Text fontSize="$xs" fontWeight="700" color={primary}>
{t('events.tasks.addEmotion', 'Add emotion')}
</Text>
</Button>
</XStack>
{emotions.length === 0 ? (
<Text fontSize={12} fontWeight="500" color={muted}>
@@ -1182,53 +1191,47 @@ export default function MobileEventTasksPage() {
<Tabs.Content value="assigned" paddingTop="$2">
<Card borderRadius={18} borderWidth={1} borderColor={border} backgroundColor={surface} padding="$3">
<YStack space="$2">
<YStack className="admin-sticky-toolbar">
<Card
borderRadius={16}
borderWidth={1}
borderColor={stickyBorder}
backgroundColor={stickySurface}
padding="$2.5"
shadowColor={stickyShadow}
shadowOpacity={0.12}
shadowRadius={12}
shadowOffset={{ width: 0, height: 8 }}
>
<XStack alignItems="center" space="$2">
<XStack flex={1}>
<MobileInput
type="search"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder={t('events.tasks.search', 'Search photo tasks')}
compact
/>
</XStack>
<Pressable onPress={() => setShowEmotionFilterSheet(true)}>
<XStack
alignItems="center"
space="$1.5"
paddingVertical="$2"
paddingHorizontal="$3"
borderRadius={14}
borderWidth={1}
borderColor={border}
backgroundColor={surface}
>
<Text fontSize={11} fontWeight="700" color={text}>
{t('events.tasks.emotionFilterShort', 'Emotion')}
</Text>
<Text fontSize={11} color={muted}>
{emotionFilter
? emotions.find((e) => String(e.id) === emotionFilter)?.name ?? t('events.tasks.customEmotion', 'Custom emotion')
: t('events.tasks.allEmotions', 'All')}
</Text>
<ChevronDown size={14} color={muted} />
</XStack>
</Pressable>
<Card
borderRadius={16}
borderWidth={1}
borderColor={border}
backgroundColor={surfaceMuted}
padding="$2.5"
>
<XStack alignItems="center" space="$2">
<XStack flex={1}>
<MobileInput
type="search"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder={t('events.tasks.search', 'Search photo tasks')}
compact
/>
</XStack>
</Card>
</YStack>
<Pressable onPress={() => setShowEmotionFilterSheet(true)}>
<XStack
alignItems="center"
space="$1.5"
paddingVertical="$2"
paddingHorizontal="$3"
borderRadius={14}
borderWidth={1}
borderColor={border}
backgroundColor={surface}
>
<Text fontSize={11} fontWeight="700" color={text}>
{t('events.tasks.emotionFilterShort', 'Emotion')}
</Text>
<Text fontSize={11} color={muted}>
{emotionFilter
? emotions.find((e) => String(e.id) === emotionFilter)?.name ?? t('events.tasks.customEmotion', 'Custom emotion')
: t('events.tasks.allEmotions', 'All')}
</Text>
<ChevronDown size={14} color={muted} />
</XStack>
</Pressable>
</XStack>
</Card>
{taskPanel}
</YStack>
</Card>