feat(events): refactor event and participant list entries to use schema validation

src/app/events/[eventID]/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-import { usePathname } from 'next/navigation';
 import Logo from '@/components/misc/logo';
 import { ThemePicker } from '@/components/misc/theme-picker';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
@@ -11,13 +10,12 @@ import { useGetApiUserMe } from '@/generated/api/user/user';
 import { RedirectButton } from '@/components/buttons/redirect-button';
 import { useSession } from 'next-auth/react';
 import ParticipantListEntry from '@/components/custom-ui/participant-list-entry';
+import { useParams } from 'next/navigation';
 
 export default function ShowEvent() {
   const session = useSession();
-  const pathname = usePathname();
 
-  // Extract eventId from URL like /events/[eventId]
+  const { eventId } = useParams<{ eventId: string }>();
-  const eventId = pathname.split('/').pop() || '';
 
   // Fetch event data
   const { data: eventData, isLoading, error } = useGetApiEventEventID(eventId);
@@ -145,11 +143,7 @@ export default function ShowEvent() {
                   </Label>{' '}
                   <div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2  sm:overflow-y-auto sm:mb-0'>
                     {event.participants?.map((user) => (
-                      <ParticipantListEntry
+                      <ParticipantListEntry key={user.user.id} {...user} />
-                        key={user.user.id}
-                        participant={user.user.name}
-                        imageSrc={user.user.image}
-                      ></ParticipantListEntry>
                     ))}
                   </div>
                 </div>

src/app/events/page.tsx

@@ -35,11 +35,9 @@ export default function Events() {
             events.map((event) => (
               <EventListEntry
                 key={event.id}
-                title={event.title}
+                {...event}
-                id={event.id}
+                created_at={new Date(event.created_at)}
-                start_time={event.start_time}
+                updated_at={new Date(event.updated_at)}
-                end_time={event.end_time}
-                location={event.location}
               />
             ))
           ) : (

src/components/custom-ui/event-list-entry.tsx

@@ -2,14 +2,10 @@ import { Card } from '@/components/ui/card';
 import Logo from '@/components/misc/logo';
 import { Label } from '@/components/ui/label';
 import Link from 'next/link';
+import zod from 'zod/v4';
+import { EventSchema } from '@/app/api/event/validation';
 
-type EventListEntryProps = {
+type EventListEntryProps = zod.output<typeof EventSchema>;
-  title: string;
-  id: string;
-  start_time: string;
-  end_time: string;
-  location: string | null | undefined;
-};
 
 export default function EventListEntry({
   title,

src/components/custom-ui/participant-list-entry.tsx

@@ -3,26 +3,24 @@ import Image from 'next/image';
 import { user_default_dark } from '@/assets/usericon/default/defaultusericon-export';
 import { user_default_light } from '@/assets/usericon/default/defaultusericon-export';
 import { useTheme } from 'next-themes';
+import zod from 'zod/v4';
+import { ParticipantSchema } from '@/app/api/event/[eventID]/participant/validation';
 
-type ParticipantListEntryProps = {
+type ParticipantListEntryProps = zod.output<typeof ParticipantSchema>;
-  participant: string;
-  imageSrc?: string | null;
-};
 
 export default function ParticipantListEntry({
-  participant,
+  user,
-  imageSrc,
 }: ParticipantListEntryProps) {
   const { resolvedTheme } = useTheme();
   const defaultImage =
     resolvedTheme === 'dark' ? user_default_dark : user_default_light;
 
-  const finalImageSrc = imageSrc ?? defaultImage;
+  const finalImageSrc = user.image ?? defaultImage;
 
   return (
     <div className='flex items-center gap-2 py-1 ml-5'>
       <Image src={finalImageSrc} alt='Avatar' width={30} height={30} />
-      <span>{participant}</span>
+      <span>{user.name}</span>
     </div>
   );
 }

src/components/forms/event-form.tsx

@@ -19,10 +19,10 @@ import ParticipantListEntry from '../custom-ui/participant-list-entry';
 
 import { useSearchParams } from 'next/navigation';
 
-interface User {
+import zod from 'zod/v4';
-  id: string;
+import { PublicUserSchema } from '@/app/api/user/validation';
-  name: string;
+
-}
+type User = zod.output<typeof PublicUserSchema>;
 
 interface EventFormProps {
   type: 'create' | 'edit';
@@ -85,12 +85,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
       }
       setLocation(event.location || '');
       setDescription(event.description || '');
-      setSelectedParticipants(
+      setSelectedParticipants(event.participants?.map((u) => u.user) || []);
-        event.participants?.map((u) => ({
-          id: u.user.id,
-          name: u.user.name,
-        })) || [],
-      );
     } else if (props.type === 'create' && startFromUrl && endFromUrl) {
       // If creating a new event with URL params, set title and dates
       setTitle('');
@@ -305,7 +300,11 @@ const EventForm: React.FC<EventFormProps> = (props) => {
             />
             <div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2  sm:overflow-y-auto sm:mb-0'>
               {selectedParticipants.map((user) => (
-                <ParticipantListEntry key={user.id} participant={user.name} />
+                <ParticipantListEntry
+                  key={user.id}
+                  user={user}
+                  status='PENDING'
+                />
               ))}
             </div>
           </div>

src/components/misc/user-search.tsx

@@ -19,11 +19,10 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { useGetApiSearchUser } from '@/generated/api/search/search';
+import zod from 'zod/v4';
+import { PublicUserSchema } from '@/app/api/user/validation';
 
-interface User {
+type User = zod.output<typeof PublicUserSchema>;
-  id: string;
-  name: string;
-}
 
 export function UserSearchInput({
   addUserAction,