Migrate billing from Paddle to Lemon Squeezy
This commit is contained in:
Codex Agent
@@ -6,6 +6,7 @@ import { Button } from '@tamagui/button';
|
||||
import { Camera, Sparkles, Image as ImageIcon, Trophy, Star } from 'lucide-react';
|
||||
import AppShell from '../components/AppShell';
|
||||
import PhotoFrameTile from '../components/PhotoFrameTile';
|
||||
import TaskHeroCard, { type TaskHero, type TaskHeroPhoto } from '../components/TaskHeroCard';
|
||||
import { useEventData } from '../context/EventDataContext';
|
||||
import { buildEventPath } from '../lib/routes';
|
||||
import { useStaggeredReveal } from '../lib/useStaggeredReveal';
|
||||
@@ -14,8 +15,13 @@ import { fetchGallery } from '../services/photosApi';
|
||||
import { useUploadQueue } from '../services/uploadApi';
|
||||
import { useTranslation } from '@/guest/i18n/useTranslation';
|
||||
import { useAppearance } from '@/hooks/use-appearance';
|
||||
import { useLocale } from '@/guest/i18n/LocaleContext';
|
||||
import { fetchTasks, type TaskItem } from '../services/tasksApi';
|
||||
import { useGuestTaskProgress } from '@/guest/hooks/useGuestTaskProgress';
|
||||
import { fetchEmotions } from '../services/emotionsApi';
|
||||
import { getBentoSurfaceTokens } from '../lib/bento';
|
||||
|
||||
type ActionRingProps = {
|
||||
type ActionTileProps = {
|
||||
label: string;
|
||||
icon: React.ReactNode;
|
||||
onPress: () => void;
|
||||
@@ -26,36 +32,47 @@ type GalleryPreview = {
|
||||
imageUrl: string;
|
||||
};
|
||||
|
||||
function ActionRing({
|
||||
type TaskPhoto = TaskHeroPhoto & {
|
||||
taskId?: number | null;
|
||||
};
|
||||
|
||||
function ActionTile({
|
||||
label,
|
||||
icon,
|
||||
onPress,
|
||||
isDark,
|
||||
}: ActionRingProps & { isDark: boolean }) {
|
||||
}: ActionTileProps & { isDark: boolean }) {
|
||||
const surface = getBentoSurfaceTokens(isDark);
|
||||
|
||||
return (
|
||||
<Button unstyled onPress={onPress}>
|
||||
<YStack alignItems="center" gap="$2">
|
||||
<YStack
|
||||
width={74}
|
||||
height={74}
|
||||
borderRadius={37}
|
||||
backgroundColor="$surface"
|
||||
borderWidth={2}
|
||||
borderColor="$primary"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
style={{
|
||||
backgroundImage: isDark
|
||||
? 'radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05))'
|
||||
: 'radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--guest-primary, #FF5A5F) 20%, white), rgba(255, 255, 255, 0.7))',
|
||||
boxShadow: isDark
|
||||
? '0 10px 24px rgba(255, 79, 216, 0.2)'
|
||||
: '0 10px 24px rgba(15, 23, 42, 0.12)',
|
||||
}}
|
||||
<Button unstyled onPress={onPress} pressStyle={{ y: 2, opacity: 0.96 }}>
|
||||
<YStack
|
||||
flex={1}
|
||||
minHeight={86}
|
||||
padding="$2.5"
|
||||
borderRadius="$bento"
|
||||
borderWidth={1}
|
||||
borderBottomWidth={3}
|
||||
borderColor={surface.borderColor}
|
||||
borderBottomColor={surface.borderBottomColor}
|
||||
backgroundColor={surface.backgroundColor}
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
gap="$1.5"
|
||||
style={{
|
||||
boxShadow: surface.shadow,
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
<Text
|
||||
fontSize={11}
|
||||
fontWeight="$7"
|
||||
textTransform="none"
|
||||
letterSpacing={0.2}
|
||||
color="$color"
|
||||
opacity={0.8}
|
||||
textAlign="center"
|
||||
>
|
||||
{icon}
|
||||
</YStack>
|
||||
<Text fontSize="$2" fontWeight="$6" color="$color" opacity={0.9}>
|
||||
{label}
|
||||
</Text>
|
||||
</YStack>
|
||||
@@ -75,8 +92,7 @@ function QuickStats({
|
||||
isDark: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const cardBorder = isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.12)';
|
||||
const cardShadow = isDark ? '0 16px 30px rgba(2, 6, 23, 0.35)' : '0 14px 24px rgba(15, 23, 42, 0.12)';
|
||||
const surface = getBentoSurfaceTokens(isDark);
|
||||
return (
|
||||
<XStack
|
||||
gap="$3"
|
||||
@@ -88,38 +104,42 @@ function QuickStats({
|
||||
<YStack
|
||||
flex={1}
|
||||
padding="$3"
|
||||
borderRadius="$card"
|
||||
backgroundColor="$surface"
|
||||
borderRadius="$bento"
|
||||
backgroundColor={surface.backgroundColor}
|
||||
borderWidth={1}
|
||||
borderColor={cardBorder}
|
||||
borderBottomWidth={3}
|
||||
borderColor={surface.borderColor}
|
||||
borderBottomColor={surface.borderBottomColor}
|
||||
gap="$1"
|
||||
style={{
|
||||
boxShadow: cardShadow,
|
||||
boxShadow: surface.shadow,
|
||||
}}
|
||||
>
|
||||
<Text fontSize="$4" fontWeight="$8">
|
||||
{stats.onlineGuests}
|
||||
</Text>
|
||||
<Text fontSize="$2" color="$color" opacity={0.7}>
|
||||
<Text fontSize="$1" color="$color" opacity={0.7} textTransform="uppercase" letterSpacing={1.2}>
|
||||
{t('home.stats.online', 'Guests online')}
|
||||
</Text>
|
||||
</YStack>
|
||||
<YStack
|
||||
flex={1}
|
||||
padding="$3"
|
||||
borderRadius="$card"
|
||||
backgroundColor="$surface"
|
||||
borderRadius="$bento"
|
||||
backgroundColor={surface.backgroundColor}
|
||||
borderWidth={1}
|
||||
borderColor={cardBorder}
|
||||
borderBottomWidth={3}
|
||||
borderColor={surface.borderColor}
|
||||
borderBottomColor={surface.borderBottomColor}
|
||||
gap="$1"
|
||||
style={{
|
||||
boxShadow: cardShadow,
|
||||
boxShadow: surface.shadow,
|
||||
}}
|
||||
>
|
||||
<Text fontSize="$4" fontWeight="$8">
|
||||
{queueCount}
|
||||
</Text>
|
||||
<Text fontSize="$2" color="$color" opacity={0.7}>
|
||||
<Text fontSize="$1" color="$color" opacity={0.7} textTransform="uppercase" letterSpacing={1.2}>
|
||||
{t('homeV2.stats.uploadsQueued', 'Uploads queued')}
|
||||
</Text>
|
||||
</YStack>
|
||||
@@ -150,95 +170,344 @@ export default function HomeScreen() {
|
||||
const revealStage = useStaggeredReveal({ steps: 4, intervalMs: 140, delayMs: 120 });
|
||||
const { stats } = usePollStats(token ?? null);
|
||||
const { items } = useUploadQueue();
|
||||
const [preview, setPreview] = React.useState<GalleryPreview[]>([]);
|
||||
const [previewLoading, setPreviewLoading] = React.useState(false);
|
||||
const { t } = useTranslation();
|
||||
const { locale } = useLocale();
|
||||
const { isCompleted } = useGuestTaskProgress(token ?? undefined);
|
||||
const [galleryPhotos, setGalleryPhotos] = React.useState<TaskPhoto[]>([]);
|
||||
const [galleryLoading, setGalleryLoading] = React.useState(false);
|
||||
const [galleryError, setGalleryError] = React.useState<string | null>(null);
|
||||
const [tasks, setTasks] = React.useState<TaskHero[]>([]);
|
||||
const [currentTask, setCurrentTask] = React.useState<TaskHero | null>(null);
|
||||
const [taskLoading, setTaskLoading] = React.useState(false);
|
||||
const [taskError, setTaskError] = React.useState<string | null>(null);
|
||||
const [hasSwiped, setHasSwiped] = React.useState(false);
|
||||
const [emotionMap, setEmotionMap] = React.useState<Record<string, string>>({});
|
||||
const { resolved } = useAppearance();
|
||||
const isDark = resolved === 'dark';
|
||||
const cardBorder = isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.12)';
|
||||
const mutedButton = isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(15, 23, 42, 0.06)';
|
||||
const mutedButtonBorder = isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(15, 23, 42, 0.12)';
|
||||
const cardShadow = isDark ? '0 18px 40px rgba(2, 6, 23, 0.4)' : '0 16px 32px rgba(15, 23, 42, 0.12)';
|
||||
const bentoSurface = getBentoSurfaceTokens(isDark);
|
||||
const mutedButton = isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(255, 255, 255, 0.75)';
|
||||
const mutedButtonBorder = isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(15, 23, 42, 0.08)';
|
||||
const cardShadow = bentoSurface.shadow;
|
||||
|
||||
const goTo = (path: string) => () => navigate(buildEventPath(token, path));
|
||||
|
||||
const recentTaskIdsRef = React.useRef<number[]>([]);
|
||||
|
||||
const rings = [
|
||||
tasksEnabled
|
||||
? {
|
||||
label: t('home.actions.items.tasks.label', 'Draw a task card'),
|
||||
icon: <Sparkles size={20} color={isDark ? '#F8FAFF' : '#0F172A'} />,
|
||||
icon: <Sparkles size={18} color={isDark ? '#F8FAFF' : '#0F172A'} />,
|
||||
path: '/tasks',
|
||||
}
|
||||
: {
|
||||
label: t('home.actions.items.upload.label', 'Upload photo'),
|
||||
icon: <Camera size={20} color={isDark ? '#F8FAFF' : '#0F172A'} />,
|
||||
icon: <Camera size={18} color={isDark ? '#F8FAFF' : '#0F172A'} />,
|
||||
path: '/upload',
|
||||
},
|
||||
{
|
||||
label: t('homeV2.rings.newUploads', 'New uploads'),
|
||||
icon: <ImageIcon size={20} color={isDark ? '#F8FAFF' : '#0F172A'} />,
|
||||
icon: <ImageIcon size={18} color={isDark ? '#F8FAFF' : '#0F172A'} />,
|
||||
path: '/gallery',
|
||||
},
|
||||
{
|
||||
label: t('homeV2.rings.topMoments', 'Top moments'),
|
||||
icon: <Star size={20} color={isDark ? '#F8FAFF' : '#0F172A'} />,
|
||||
icon: <Star size={18} color={isDark ? '#F8FAFF' : '#0F172A'} />,
|
||||
path: '/gallery',
|
||||
},
|
||||
{
|
||||
label: t('navigation.achievements', 'Achievements'),
|
||||
icon: <Trophy size={20} color={isDark ? '#F8FAFF' : '#0F172A'} />,
|
||||
icon: <Trophy size={18} color={isDark ? '#F8FAFF' : '#0F172A'} />,
|
||||
path: '/achievements',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const mapTaskItem = React.useCallback((task: TaskItem): TaskHero | null => {
|
||||
const record = task as Record<string, unknown>;
|
||||
const id = Number(record.id ?? record.task_id ?? 0);
|
||||
const title =
|
||||
typeof record.title === 'string'
|
||||
? record.title
|
||||
: typeof record.name === 'string'
|
||||
? record.name
|
||||
: '';
|
||||
if (!id || !title) return null;
|
||||
|
||||
const description =
|
||||
typeof record.description === 'string'
|
||||
? record.description
|
||||
: typeof record.prompt === 'string'
|
||||
? record.prompt
|
||||
: null;
|
||||
const instructions =
|
||||
typeof record.instructions === 'string'
|
||||
? record.instructions
|
||||
: typeof record.instruction === 'string'
|
||||
? record.instruction
|
||||
: null;
|
||||
const durationValue = record.duration ?? record.time_limit ?? record.minutes ?? null;
|
||||
const duration = typeof durationValue === 'number' ? durationValue : Number(durationValue);
|
||||
const emotionValue = record.emotion;
|
||||
const slugValue = typeof record.emotion_slug === 'string' ? (record.emotion_slug as string) : undefined;
|
||||
const nameValue = typeof record.emotion_name === 'string'
|
||||
? (record.emotion_name as string)
|
||||
: typeof record.emotion_title === 'string'
|
||||
? (record.emotion_title as string)
|
||||
: slugValue
|
||||
? emotionMap[slugValue]
|
||||
: undefined;
|
||||
const emotion =
|
||||
typeof emotionValue === 'object' && emotionValue
|
||||
? {
|
||||
slug: typeof (emotionValue as Record<string, unknown>).slug === 'string'
|
||||
? (emotionValue as Record<string, unknown>).slug as string
|
||||
: undefined,
|
||||
name: typeof (emotionValue as Record<string, unknown>).name === 'string'
|
||||
? (emotionValue as Record<string, unknown>).name as string
|
||||
: undefined,
|
||||
emoji: typeof (emotionValue as Record<string, unknown>).emoji === 'string'
|
||||
? (emotionValue as Record<string, unknown>).emoji as string
|
||||
: undefined,
|
||||
}
|
||||
: {
|
||||
slug: slugValue,
|
||||
name: nameValue,
|
||||
};
|
||||
|
||||
return {
|
||||
id,
|
||||
title,
|
||||
description,
|
||||
instructions,
|
||||
duration: Number.isFinite(duration) ? duration : null,
|
||||
emotion,
|
||||
};
|
||||
}, [emotionMap]);
|
||||
|
||||
const selectRandomTask = React.useCallback(
|
||||
(list: TaskHero[]) => {
|
||||
if (!list.length) {
|
||||
setCurrentTask(null);
|
||||
return;
|
||||
}
|
||||
const avoidIds = recentTaskIdsRef.current;
|
||||
const available = list.filter((task) => !isCompleted(task.id));
|
||||
const base = available.length ? available : list;
|
||||
let candidates = base.filter((task) => !avoidIds.includes(task.id));
|
||||
if (!candidates.length) {
|
||||
candidates = base;
|
||||
}
|
||||
const chosen = candidates[Math.floor(Math.random() * candidates.length)];
|
||||
setCurrentTask(chosen);
|
||||
recentTaskIdsRef.current = [...avoidIds.filter((id) => id !== chosen.id), chosen.id].slice(-3);
|
||||
},
|
||||
[isCompleted]
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!token) {
|
||||
setPreview([]);
|
||||
setGalleryPhotos([]);
|
||||
setGalleryError(null);
|
||||
return;
|
||||
}
|
||||
|
||||
let active = true;
|
||||
setPreviewLoading(true);
|
||||
setGalleryLoading(true);
|
||||
setGalleryError(null);
|
||||
|
||||
fetchGallery(token, { limit: 3 })
|
||||
fetchGallery(token, { limit: 72, locale })
|
||||
.then((response) => {
|
||||
if (!active) return;
|
||||
const photos = Array.isArray(response.data) ? response.data : [];
|
||||
const mapped = photos
|
||||
.map((photo) => {
|
||||
const record = photo as Record<string, unknown>;
|
||||
const id = Number(record.id ?? 0);
|
||||
const imageUrl = normalizeImageUrl(
|
||||
(record.thumbnail_url as string | null | undefined)
|
||||
?? (record.thumbnail_path as string | null | undefined)
|
||||
?? (record.file_path as string | null | undefined)
|
||||
?? (record.full_url as string | null | undefined)
|
||||
?? (record.url as string | null | undefined)
|
||||
?? (record.image_url as string | null | undefined)
|
||||
);
|
||||
return { id, imageUrl };
|
||||
})
|
||||
.filter((item) => item.id && item.imageUrl);
|
||||
setPreview(mapped);
|
||||
const mapped = photos.map((photo) => {
|
||||
const record = photo as Record<string, unknown>;
|
||||
const id = Number(record.id ?? 0);
|
||||
const imageUrl = normalizeImageUrl(
|
||||
(record.thumbnail_url as string | null | undefined)
|
||||
?? (record.thumbnail_path as string | null | undefined)
|
||||
?? (record.file_path as string | null | undefined)
|
||||
?? (record.full_url as string | null | undefined)
|
||||
?? (record.url as string | null | undefined)
|
||||
?? (record.image_url as string | null | undefined)
|
||||
);
|
||||
const taskId = Number(record.task_id ?? record.taskId ?? 0);
|
||||
const likesCount =
|
||||
typeof record.likes_count === 'number'
|
||||
? record.likes_count
|
||||
: typeof record.likesCount === 'number'
|
||||
? record.likesCount
|
||||
: undefined;
|
||||
return {
|
||||
id,
|
||||
imageUrl,
|
||||
taskId: Number.isFinite(taskId) && taskId > 0 ? taskId : null,
|
||||
likesCount,
|
||||
};
|
||||
});
|
||||
setGalleryPhotos(mapped.filter((item) => item.id && item.imageUrl));
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Failed to load gallery preview', error);
|
||||
if (active) {
|
||||
setPreview([]);
|
||||
setGalleryPhotos([]);
|
||||
setGalleryError(t('gallery.error', 'Gallery could not be loaded.'));
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (active) {
|
||||
setPreviewLoading(false);
|
||||
setGalleryLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [token]);
|
||||
}, [locale, t, token]);
|
||||
|
||||
const reloadTasks = React.useCallback(() => {
|
||||
if (!token || !tasksEnabled) {
|
||||
setTasks([]);
|
||||
setCurrentTask(null);
|
||||
setTaskError(null);
|
||||
setTaskLoading(false);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
setTaskLoading(true);
|
||||
setTaskError(null);
|
||||
|
||||
return Promise.all([
|
||||
fetchTasks(token, { locale }),
|
||||
fetchEmotions(token, locale),
|
||||
])
|
||||
.then(([taskList, emotionList]) => {
|
||||
const nextMap: Record<string, string> = {};
|
||||
for (const emotion of emotionList) {
|
||||
const record = emotion as Record<string, unknown>;
|
||||
const slug = typeof record.slug === 'string' ? record.slug : '';
|
||||
const title = typeof record.title === 'string' ? record.title : typeof record.name === 'string' ? record.name : '';
|
||||
if (slug) {
|
||||
nextMap[slug] = title || slug;
|
||||
}
|
||||
}
|
||||
setEmotionMap(nextMap);
|
||||
const mapped = taskList.map(mapTaskItem).filter(Boolean) as TaskHero[];
|
||||
setTasks(mapped);
|
||||
if (!currentTask || !mapped.some((task) => task.id === currentTask.id)) {
|
||||
selectRandomTask(mapped);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Failed to load tasks', error);
|
||||
setTasks([]);
|
||||
setCurrentTask(null);
|
||||
setTaskError(t('tasks.error', 'Tasks could not be loaded.'));
|
||||
})
|
||||
.finally(() => {
|
||||
setTaskLoading(false);
|
||||
});
|
||||
}, [currentTask, locale, mapTaskItem, selectRandomTask, t, tasksEnabled, token]);
|
||||
|
||||
React.useEffect(() => {
|
||||
let active = true;
|
||||
if (!token || !tasksEnabled) {
|
||||
setTasks([]);
|
||||
setCurrentTask(null);
|
||||
setTaskError(null);
|
||||
setTaskLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setTaskLoading(true);
|
||||
setTaskError(null);
|
||||
|
||||
Promise.all([
|
||||
fetchTasks(token, { locale }),
|
||||
fetchEmotions(token, locale),
|
||||
])
|
||||
.then(([taskList, emotionList]) => {
|
||||
if (!active) return;
|
||||
const nextMap: Record<string, string> = {};
|
||||
for (const emotion of emotionList) {
|
||||
const record = emotion as Record<string, unknown>;
|
||||
const slug = typeof record.slug === 'string' ? record.slug : '';
|
||||
const title = typeof record.title === 'string' ? record.title : typeof record.name === 'string' ? record.name : '';
|
||||
if (slug) {
|
||||
nextMap[slug] = title || slug;
|
||||
}
|
||||
}
|
||||
setEmotionMap(nextMap);
|
||||
const mapped = taskList.map(mapTaskItem).filter(Boolean) as TaskHero[];
|
||||
setTasks(mapped);
|
||||
if (!currentTask || !mapped.some((task) => task.id === currentTask.id)) {
|
||||
selectRandomTask(mapped);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Failed to load tasks', error);
|
||||
if (active) {
|
||||
setTasks([]);
|
||||
setCurrentTask(null);
|
||||
setTaskError(t('tasks.error', 'Tasks could not be loaded.'));
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (active) {
|
||||
setTaskLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [currentTask, locale, mapTaskItem, selectRandomTask, t, tasksEnabled, token]);
|
||||
|
||||
const queueCount = items.filter((item) => item.status !== 'done').length;
|
||||
const preview = React.useMemo<GalleryPreview[]>(
|
||||
() =>
|
||||
galleryPhotos.slice(0, 4).map((photo) => ({
|
||||
id: photo.id,
|
||||
imageUrl: photo.imageUrl,
|
||||
})),
|
||||
[galleryPhotos]
|
||||
);
|
||||
const taskPhotos = React.useMemo<TaskHeroPhoto[]>(() => {
|
||||
if (!currentTask) return [];
|
||||
const matches = galleryPhotos.filter((photo) => photo.taskId === currentTask.id);
|
||||
if (matches.length >= 6) {
|
||||
return matches.slice(0, 6).map((photo) => ({
|
||||
id: photo.id,
|
||||
imageUrl: photo.imageUrl,
|
||||
likesCount: photo.likesCount,
|
||||
}));
|
||||
}
|
||||
const fallback = galleryPhotos.filter((photo) => photo.taskId !== currentTask.id);
|
||||
const combined = [...matches, ...fallback].slice(0, 6);
|
||||
return combined.map((photo) => ({
|
||||
id: photo.id,
|
||||
imageUrl: photo.imageUrl,
|
||||
likesCount: photo.likesCount,
|
||||
}));
|
||||
}, [currentTask, galleryPhotos]);
|
||||
const openTaskPhoto = React.useCallback(
|
||||
(photoId: number) => {
|
||||
if (!currentTask) return;
|
||||
navigate(buildEventPath(token, `/gallery?photoId=${photoId}&task=${currentTask.id}`));
|
||||
},
|
||||
[currentTask, navigate, token]
|
||||
);
|
||||
const handleStartTask = React.useCallback(() => {
|
||||
if (!currentTask) return;
|
||||
navigate(buildEventPath(token, `/upload?taskId=${currentTask.id}`));
|
||||
}, [currentTask, navigate, token]);
|
||||
const handleViewSimilar = React.useCallback(() => {
|
||||
if (!currentTask) return;
|
||||
navigate(buildEventPath(token, `/gallery?task=${currentTask.id}`));
|
||||
}, [currentTask, navigate, token]);
|
||||
const handleShuffle = React.useCallback(() => {
|
||||
selectRandomTask(tasks);
|
||||
setHasSwiped(true);
|
||||
}, [selectRandomTask, tasks]);
|
||||
|
||||
return (
|
||||
<AppShell>
|
||||
@@ -250,10 +519,10 @@ export default function HomeScreen() {
|
||||
opacity={revealStage >= 1 ? 1 : 0}
|
||||
y={revealStage >= 1 ? 0 : 12}
|
||||
>
|
||||
<XStack gap="$2" justifyContent="space-between">
|
||||
<XStack gap="$2" flexWrap="nowrap">
|
||||
{rings.map((ring) => (
|
||||
<YStack key={ring.label} flex={1} alignItems="center">
|
||||
<ActionRing label={ring.label} icon={ring.icon} onPress={goTo(ring.path)} isDark={isDark} />
|
||||
<YStack key={ring.label} flex={1} minWidth={0}>
|
||||
<ActionTile label={ring.label} icon={ring.icon} onPress={goTo(ring.path)} isDark={isDark} />
|
||||
</YStack>
|
||||
))}
|
||||
</XStack>
|
||||
@@ -261,55 +530,34 @@ export default function HomeScreen() {
|
||||
|
||||
{tasksEnabled ? (
|
||||
<YStack
|
||||
padding="$4"
|
||||
borderRadius="$card"
|
||||
backgroundColor="$surface"
|
||||
borderWidth={1}
|
||||
borderColor={cardBorder}
|
||||
gap="$3"
|
||||
y={revealStage >= 2 ? 0 : 16}
|
||||
style={{
|
||||
backgroundImage: isDark
|
||||
? 'linear-gradient(135deg, rgba(255, 79, 216, 0.25), rgba(79, 209, 255, 0.12))'
|
||||
: 'linear-gradient(135deg, color-mix(in oklab, var(--guest-primary, #FF5A5F) 18%, white), color-mix(in oklab, var(--guest-secondary, #F43F5E) 10%, white))',
|
||||
boxShadow: cardShadow,
|
||||
}}
|
||||
>
|
||||
<XStack alignItems="center" gap="$2">
|
||||
<Sparkles size={18} color="#FF4FD8" />
|
||||
<Text fontSize="$3" fontWeight="$7">
|
||||
{t('homeV2.promptQuest.label', 'Prompt quest')}
|
||||
</Text>
|
||||
</XStack>
|
||||
<Text fontSize="$7" fontFamily="$display" fontWeight="$8">
|
||||
{t('homeV2.promptQuest.title', 'Capture the happiest laugh')}
|
||||
</Text>
|
||||
<Text fontSize="$3" color="$color" opacity={0.75}>
|
||||
{t('homeV2.promptQuest.subtitle', 'Earn points and keep the gallery lively.')}
|
||||
</Text>
|
||||
<XStack gap="$2" flexWrap="wrap">
|
||||
<Button size="$4" backgroundColor="$primary" borderRadius="$pill" onPress={goTo('/upload')}>
|
||||
{t('homeV2.promptQuest.ctaStart', 'Start prompt')}
|
||||
</Button>
|
||||
<Button
|
||||
size="$4"
|
||||
backgroundColor={mutedButton}
|
||||
borderRadius="$pill"
|
||||
borderWidth={1}
|
||||
borderColor={mutedButtonBorder}
|
||||
onPress={goTo('/tasks')}
|
||||
>
|
||||
{t('homeV2.promptQuest.ctaBrowse', 'Browse tasks')}
|
||||
</Button>
|
||||
</XStack>
|
||||
<TaskHeroCard
|
||||
task={currentTask}
|
||||
loading={taskLoading}
|
||||
error={taskError}
|
||||
hasSwiped={hasSwiped}
|
||||
onSwiped={() => setHasSwiped(true)}
|
||||
onStart={handleStartTask}
|
||||
onShuffle={handleShuffle}
|
||||
onViewSimilar={handleViewSimilar}
|
||||
onRetry={reloadTasks}
|
||||
onOpenPhoto={openTaskPhoto}
|
||||
isCompleted={isCompleted(currentTask?.id)}
|
||||
photos={taskPhotos}
|
||||
photosLoading={galleryLoading}
|
||||
photosError={galleryError}
|
||||
/>
|
||||
</YStack>
|
||||
) : (
|
||||
<YStack
|
||||
padding="$4"
|
||||
borderRadius="$card"
|
||||
backgroundColor="$surface"
|
||||
borderRadius="$bento"
|
||||
backgroundColor={bentoSurface.backgroundColor}
|
||||
borderWidth={1}
|
||||
borderColor={cardBorder}
|
||||
borderBottomWidth={3}
|
||||
borderColor={bentoSurface.borderColor}
|
||||
borderBottomColor={bentoSurface.borderBottomColor}
|
||||
gap="$3"
|
||||
y={revealStage >= 2 ? 0 : 16}
|
||||
style={{
|
||||
@@ -346,10 +594,12 @@ export default function HomeScreen() {
|
||||
|
||||
<YStack
|
||||
padding="$4"
|
||||
borderRadius="$card"
|
||||
backgroundColor="$surface"
|
||||
borderRadius="$bentoLg"
|
||||
backgroundColor={bentoSurface.backgroundColor}
|
||||
borderWidth={1}
|
||||
borderColor={cardBorder}
|
||||
borderBottomWidth={3}
|
||||
borderColor={bentoSurface.borderColor}
|
||||
borderBottomColor={bentoSurface.borderBottomColor}
|
||||
gap="$3"
|
||||
animation="slow"
|
||||
animateOnly={['transform', 'opacity']}
|
||||
@@ -360,7 +610,7 @@ export default function HomeScreen() {
|
||||
}}
|
||||
>
|
||||
<XStack alignItems="center" justifyContent="space-between">
|
||||
<Text fontSize="$4" fontWeight="$7">
|
||||
<Text fontSize="$5" fontWeight="$8" fontFamily="$display">
|
||||
{t('homeV2.galleryPreview.title', 'Gallery preview')}
|
||||
</Text>
|
||||
<Button
|
||||
@@ -382,17 +632,17 @@ export default function HomeScreen() {
|
||||
paddingBottom: 6,
|
||||
}}
|
||||
>
|
||||
{(previewLoading || preview.length === 0 ? [1, 2, 3, 4] : preview).map((tile, index) => {
|
||||
{(galleryLoading || preview.length === 0 ? [1, 2, 3, 4] : preview).map((tile) => {
|
||||
if (typeof tile === 'number') {
|
||||
return (
|
||||
<YStack key={tile} flexShrink={0} width={140}>
|
||||
<PhotoFrameTile height={110} shimmer shimmerDelayMs={tile * 140} />
|
||||
<PhotoFrameTile height={110} borderRadius="$bento" shimmer shimmerDelayMs={tile * 140} />
|
||||
</YStack>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<YStack key={tile.id} flexShrink={0} width={140}>
|
||||
<PhotoFrameTile height={110}>
|
||||
<PhotoFrameTile height={110} borderRadius="$bento">
|
||||
<YStack
|
||||
flex={1}
|
||||
width="100%"
|
||||
|
||||
@@ -458,6 +458,19 @@ export default function UploadScreen() {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{cameraState === 'ready' && !previewUrl ? (
|
||||
<Button
|
||||
size="$4"
|
||||
circular
|
||||
position="absolute"
|
||||
bottom="$4"
|
||||
backgroundColor="$primary"
|
||||
onPress={handleCapture}
|
||||
aria-label={t('upload.captureButton', 'Capture')}
|
||||
>
|
||||
<Camera size={20} color="#FFFFFF" />
|
||||
</Button>
|
||||
) : null}
|
||||
{(cameraState === 'ready' || cameraState === 'starting' || cameraState === 'preview') ? (
|
||||
<Button
|
||||
size="$3"
|
||||
|
||||
Reference in New Issue
Block a user