Implement the functionality to update an existing collection. This includes both frontend UI changes and backend API updates to support editing a collection's details. For now, focus on the name and cards fields. Validation logic should be added to ensure updated data is correct and meaningful, but collection names will not be required to be unique for the MVP.

Requirements:

Frontend:

1. UI Update Form:

   • Create a modal or dedicated page where users can edit a collection.
   • Include input fields for:
     • name: A text input field for the collection name.
     • cards: A multi-select or autocomplete dropdown to manage associated cards.

2. Form Validation:

   • Ensure the name field is not empty and does not exceed a reasonable character limit (e.g., 50 characters).
   • Validate the cards field to ensure valid card data is submitted.

3. Submit Changes:

   • Add a button to submit the updated data.
   • Show a loading state and handle success/error notifications.

Backend:

1. Update API Endpoint:

   • Create or update the tRPC handler for updating collections.
   • Accept and validate name and cards fields from the request.

2. Validation Logic:

   • Ensure the name field is a valid string and not empty.
   • Ensure the cards field contains valid card IDs (if applicable).

3. Database Update:

   • Use Prisma to update the collection record:

     const updatedCollection = await prisma.collection.update({
       where: { id: collectionId },
       data: {
         name: newName,
         cards: { set: newCardIds },
       },
     });

   • Note: Prisma automatically handles updating the updatedAt field when configured in the schema.

4. Error Handling:

   • Handle cases where the collection ID is invalid or the user does not have permission to edit the collection.

Testing:

• Write unit tests for the backend API to ensure updates are processed correctly.
• Add frontend tests for form validation and submission workflows.
• Perform manual testing to confirm end-to-end functionality.

Acceptance Criteria:

• Users can open an update form, make changes to a collection’s name and cards, and submit them.
• Updated data is reflected in the database and frontend.
• Proper error messages are displayed for invalid input or server errors.
• The updatedAt field is updated automatically whenever a collection is modified.