Add prerequisites field for workshops in schema, types, forms, and display

Co-authored-by: Starefossen <968267+Starefossen@users.noreply.github.com>

Author: Copilot

sanity/schemaTypes/talk.ts

@@ -212,6 +212,23 @@ export default defineType({
             return true
           }),
     }),
+    defineField({
+      name: 'prerequisites',
+      title: 'Prerequisites',
+      type: 'text',
+      description:
+        'Prerequisites for workshop participants (e.g., "Bring a computer with Docker installed")',
+      hidden: ({ document }) => {
+        const format = document?.format as string | undefined
+        const prerequisites = document?.prerequisites as string | undefined
+        const isWorkshop =
+          format === 'workshop_120' || format === 'workshop_240'
+        return !(
+          isWorkshop ||
+          (prerequisites !== undefined && prerequisites !== null)
+        )
+      },
+    }),
     defineField({
       name: 'audienceFeedback',
       title: 'Audience Feedback',

src/components/cfp/ProposalForm.tsx

@@ -169,6 +169,7 @@ export function ProposalForm({
       audiences: proposal.audiences,
       tos: proposal.tos,
       capacity: proposal.capacity,
+      prerequisites: proposal.prerequisites,
       topics: topicRefs,
       speakers: allSpeakers.map((id) => ({
         _type: 'reference' as const,

src/components/program/TalkCard.tsx

@@ -10,7 +10,7 @@ import {
   XMarkIcon,
 } from '@heroicons/react/24/outline'
 import { TrackTalk } from '@/lib/conference/types'
-import { Status } from '@/lib/proposal/types'
+import { isWorkshopFormat, Status } from '@/lib/proposal/types'
 import { SpeakerAvatars } from '@/components/SpeakerAvatars'
 import { ClickableSpeakerNames } from '@/components/ClickableSpeakerNames'
 import { BookmarkButton } from '@/components/BookmarkButton'
@@ -436,6 +436,21 @@ export function TalkCard({
             </div>
           )}
 
+        {!compact &&
+          isConfirmed &&
+          talkData.format &&
+          isWorkshopFormat(talkData.format) &&
+          talkData.prerequisites && (
+            <div className="rounded-md border border-blue-200 bg-blue-50 p-4 dark:border-blue-800/50 dark:bg-blue-900/20">
+              <h4 className="text-sm font-semibold text-blue-900 dark:text-blue-200">
+                Prerequisites
+              </h4>
+              <p className="mt-1 whitespace-pre-wrap text-sm text-blue-800 dark:text-blue-300">
+                {talkData.prerequisites}
+              </p>
+            </div>
+          )}
+
         {!compact && !isConfirmed && !isWithdrawnOrRejected && (
           <div className="flex-1">
             <div className="text-sm text-gray-400 italic dark:text-gray-500">

src/components/proposal/ProposalDetailsForm.tsx

@@ -6,6 +6,7 @@ import {
   audiences as audiencesMap,
   Format,
   formats,
+  isWorkshopFormat,
   Language,
   languages,
   Level,
@@ -57,6 +58,9 @@ export function ProposalDetailsForm({
   )
   const [outline, setOutline] = useState(proposal?.outline ?? '')
   const [tos, setTos] = useState(proposal?.tos ?? false)
+  const [prerequisites, setPrerequisites] = useState(
+    proposal?.prerequisites ?? '',
+  )
 
   // Push local state changes to parent
   useEffect(() => {
@@ -70,6 +74,7 @@ export function ProposalDetailsForm({
       topics,
       outline,
       tos,
+      prerequisites,
     })
   }, [
     title,
@@ -81,6 +86,7 @@ export function ProposalDetailsForm({
     topics,
     outline,
     tos,
+    prerequisites,
     setProposal,
   ])
 
@@ -202,6 +208,17 @@ export function ProposalDetailsForm({
               {outline || 'No outline provided'}
             </p>
           </div>
+
+          {isWorkshopFormat(format) && (
+            <div>
+              <label className="block text-sm font-medium text-gray-900 dark:text-white">
+                Prerequisites
+              </label>
+              <p className="mt-2 whitespace-pre-wrap text-gray-900 dark:text-white">
+                {prerequisites || 'No prerequisites specified'}
+              </p>
+            </div>
+          )}
         </div>
       ) : (
         <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
@@ -315,6 +332,23 @@ export function ProposalDetailsForm({
             </HelpText>
           </div>
 
+          {isWorkshopFormat(format) && (
+            <div className="col-span-full">
+              <Textarea
+                name="prerequisites"
+                label="Prerequisites"
+                rows={3}
+                value={prerequisites}
+                setValue={setPrerequisites}
+              />
+              <HelpText>
+                List any prerequisites participants should meet before attending
+                your workshop (e.g., &quot;Bring a computer with Docker
+                installed&quot;, &quot;Basic knowledge of Kubernetes&quot;).
+              </HelpText>
+            </div>
+          )}
+
           <div className="col-span-full">
             <Checkbox
               name="tos"

src/lib/proposal/types.ts

@@ -84,6 +84,7 @@ interface Proposal {
   tos: boolean
   video?: string
   capacity?: number
+  prerequisites?: string
   audienceFeedback?: AudienceFeedback
   attachments?: Attachment[]
 }

src/server/schemas/proposal.ts

@@ -51,6 +51,7 @@ const ProposalInputBaseSchema = z.object({
   }),
   video: z.string().nullable().optional().transform(nullToUndefined),
   capacity: z.number().nullable().optional().transform(nullToUndefined),
+  prerequisites: z.string().nullable().optional().transform(nullToUndefined),
   speakers: z
     .array(ReferenceSchema)
     .nullable()