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

Update admin PWA events, branding, and packages
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-01-19 11:35:38 +01:00
parent 926bc7d070
commit fbff2afa3e
43 changed files with 6846 additions and 6323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
resources/js/admin/mobile/EventsPage.tsx
View File

@@ -41,7 +41,7 @@ export default function MobileEventsPage() {
setEvents(await getEvents());
} catch (err) {
if (!isAuthError(err)) {
setError(getApiErrorMessage(err, t('events.errors.loadFailed', 'Event konnte nicht geladen werden.')));
setError(getApiErrorMessage(err, t('events.errors.loadFailed')));
}
} finally {
setLoading(false);
@@ -52,10 +52,13 @@ export default function MobileEventsPage() {
return (
<MobileShell
activeTab="home"
title={t('events.list.dashboardTitle', 'All Events Dashboard')}
title={t('events.list.title')}
onBack={back}
headerActions={
<HeaderActionButton onPress={() => searchRef.current?.focus()} ariaLabel={t('events.list.search', 'Search events')}>
<HeaderActionButton
onPress={() => searchRef.current?.focus()}
ariaLabel={t('events.detail.pickEvent')}
>
<Search size={18} color={text} />
</HeaderActionButton>
}
@@ -100,7 +103,7 @@ export default function MobileEventsPage() {
backgroundColor={surfaceMuted}
>
<Text fontSize="$xs" fontWeight="800" color={text}>
{t('events.list.filters.title', 'Filters & Search')}
{t('events.list.overview.title')}
</Text>
</XStack>
<MobileInput
@@ -108,11 +111,11 @@ export default function MobileEventsPage() {
type="search"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder={t('events.list.search', 'Search events')}
placeholder={t('events.detail.pickEvent')}
compact
/>
<Text fontSize="$xs" color={muted}>
{t('events.list.filters.hint', 'Filter your events by status or search by name.')}
{t('events.list.subtitle')}
</Text>
</YStack>
</Card>
@@ -137,13 +140,16 @@ export default function MobileEventsPage() {
>
<YStack space="$2" alignItems="center">
<Text fontSize="$md" fontWeight="700">
{t('events.list.empty.title', 'Noch kein Event angelegt')}
{t('events.list.title')}
</Text>
<Text fontSize="$sm" color={muted} textAlign="center">
{t('events.list.empty.description', 'Starte jetzt mit deinem ersten Event.')}
{t('events.list.overview.empty')}
</Text>
{!isMember ? (
<CTAButton label={t('events.actions.create', 'Create New Event')} onPress={() => navigate(adminPath('/events/new'))} />
<CTAButton
label={t('events.list.actions.create')}
onPress={() => navigate(adminPath('/events/new'))}
/>
) : null}
</YStack>
</Card>
@@ -160,7 +166,7 @@ export default function MobileEventsPage() {
{!isMember ? (
<FloatingActionButton
label={t('events.actions.create', 'Create New Event')}
label={t('events.list.actions.create')}
icon={Plus}
onPress={() => navigate(adminPath('/mobile/events/new'))}
/>
@@ -204,10 +210,10 @@ function EventsList({
}, [filteredByStatus, query]);
const filters: Array<{ key: EventStatusKey; label: string; count: number }> = [
{ key: 'all', label: t('events.list.filters.all', 'All'), count: statusCounts.all },
{ key: 'upcoming', label: t('events.list.filters.upcoming', 'Upcoming'), count: statusCounts.upcoming },
{ key: 'draft', label: t('events.list.filters.draft', 'Draft'), count: statusCounts.draft },
{ key: 'past', label: t('events.list.filters.past', 'Past'), count: statusCounts.past },
{ key: 'all', label: t('events.list.filters.all'), count: statusCounts.all },
{ key: 'upcoming', label: t('events.list.filters.upcoming'), count: statusCounts.upcoming },
{ key: 'draft', label: t('events.list.filters.draft'), count: statusCounts.draft },
{ key: 'past', label: t('events.list.filters.past'), count: statusCounts.past },
];
return (
@@ -234,7 +240,7 @@ function EventsList({
backgroundColor={surfaceMuted}
>
<Text fontSize="$xs" fontWeight="800" color={text}>
{t('events.list.filters.status', 'Status')}
{t('events.workspace.fields.status')}
</Text>
</XStack>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
@@ -286,13 +292,13 @@ function EventsList({
>
<YStack space="$2" alignItems="center">
<Text fontSize="$sm" fontWeight="700" color={text}>
{t('events.list.empty.filtered', 'No events match this filter.')}
{t('events.list.empty.filtered')}
</Text>
<Text fontSize="$xs" color={muted} textAlign="center">
{t('events.list.empty.filteredHint', 'Try a different status or clear your search.')}
{t('events.list.empty.filteredHint')}
</Text>
<CTAButton
label={t('events.list.filters.all', 'All')}
label={t('events.list.filters.all')}
tone="ghost"
fullWidth={false}
onPress={() => onStatusChange('all')}
@@ -304,10 +310,10 @@ function EventsList({
const statusKey = resolveEventStatusKey(event);
const statusLabel =
statusKey === 'draft'
? t('events.list.filters.draft', 'Draft')
? t('events.list.filters.draft')
: statusKey === 'past'
? t('events.list.filters.past', 'Past')
: t('events.list.filters.upcoming', 'Upcoming');
? t('events.list.filters.past')
: t('events.list.filters.upcoming');
const statusTone = statusKey === 'draft' ? 'warning' : statusKey === 'past' ? 'muted' : 'success';
return (
<EventRow
@@ -359,7 +365,8 @@ function EventRow({
onOpen: (slug: string) => void;
onEdit?: (slug: string) => void;
}) {
const { t } = useTranslation('management');
const { t, i18n } = useTranslation('management');
const locale = i18n.language;
const stats = buildEventListStats(event);
return (
<Card
@@ -377,18 +384,18 @@ function EventRow({
<XStack justifyContent="space-between" alignItems="flex-start" space="$2">
<YStack space="$1">
<Text fontSize="$md" fontWeight="800" color={text}>
{renderName(event.name)}
{renderName(event.name, t)}
</Text>
<XStack alignItems="center" space="$2">
<CalendarDays size={14} color={subtle} />
<Text fontSize="$sm" color={muted}>
{formatDate(event.event_date)}
{formatDate(event.event_date, t, locale)}
</Text>
</XStack>
<XStack alignItems="center" space="$2">
<MapPin size={14} color={subtle} />
<Text fontSize="$sm" color={muted}>
{resolveLocation(event)}
{resolveLocation(event, t)}
</Text>
</XStack>
<PillBadge tone={statusTone}>{statusLabel}</PillBadge>
@@ -405,19 +412,19 @@ function EventRow({
<XStack alignItems="center" space="$2" flexWrap="wrap">
<EventStatChip
icon={Camera}
label={t('events.list.stats.photos', 'Photos')}
label={t('events.list.stats.photos')}
value={stats.photos}
muted={subtle}
/>
<EventStatChip
icon={Users}
label={t('events.list.stats.guests', 'Guests')}
label={t('events.list.stats.guests')}
value={stats.guests}
muted={subtle}
/>
<EventStatChip
icon={Sparkles}
label={t('events.list.stats.tasks', 'Tasks')}
label={t('events.list.stats.tasks')}
value={stats.tasks}
muted={subtle}
/>
@@ -429,7 +436,7 @@ function EventRow({
<XStack alignItems="center" justifyContent="flex-start" space="$2">
<Plus size={16} color={primary} />
<Text fontSize="$sm" color={primary} fontWeight="700">
{t('events.list.actions.open', 'Open event')}
{t('events.list.actions.open')}
</Text>
</XStack>
</Pressable>
@@ -459,15 +466,15 @@ function EventStatChip({
);
}
function renderName(name: TenantEvent['name']): string {
function renderName(name: TenantEvent['name'], t: (key: string) => string): string {
if (typeof name === 'string') return name;
if (name && typeof name === 'object') {
return name.de ?? name.en ?? Object.values(name)[0] ?? 'Unbenanntes Event';
return name.de ?? name.en ?? Object.values(name)[0] ?? t('events.placeholders.untitled');
}
return 'Unbenanntes Event';
return t('events.placeholders.untitled');
}
function resolveLocation(event: TenantEvent): string {
function resolveLocation(event: TenantEvent, t: (key: string) => string): string {
const settings = (event.settings ?? {}) as Record<string, unknown>;
const candidate =
(settings.location as string | undefined) ??
@@ -476,14 +483,15 @@ function resolveLocation(event: TenantEvent): string {
if (candidate && candidate.trim()) {
return candidate;
}
return 'Location';
return t('events.detail.locationPlaceholder');
}
function formatDate(iso: string | null): string {
if (!iso) return 'Date tbd';
function formatDate(iso: string | null, t: (key: string) => string, locale?: string): string {
const fallback = t('events.detail.dateTbd');
if (!iso) return fallback;
const date = new Date(iso);
if (Number.isNaN(date.getTime())) {
return 'Date tbd';
return fallback;
}
return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
return date.toLocaleDateString(locale || undefined, { month: 'short', day: 'numeric', year: 'numeric' });
}