Add waitlisted proposal status for backup speakers (#341)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Starefossen <968267+Starefossen@users.noreply.github.com>
Co-authored-by: Hans Kristian Flaatten <hans@flaatten.org>
Co-authored-by: Hans Kristian Flaatten <hans.kristian.flaatten@nav.no>

Author: Copilot

__tests__/lib/proposal/state-machine.test.ts

@@ -44,6 +44,11 @@ describe('actionStateMachine', () => {
       expect(result).toEqual({ status: Status.accepted, isValidAction: true })
     })
 
+    it('allows organizer to waitlist', () => {
+      const result = actionStateMachine(Status.submitted, Action.waitlist, true)
+      expect(result).toEqual({ status: Status.waitlisted, isValidAction: true })
+    })
+
     it('allows organizer to reject', () => {
       const result = actionStateMachine(Status.submitted, Action.reject, true)
       expect(result).toEqual({ status: Status.rejected, isValidAction: true })
@@ -54,6 +59,15 @@ describe('actionStateMachine', () => {
       expect(result.isValidAction).toBe(false)
     })
 
+    it('prevents non-organizer from waitlisting', () => {
+      const result = actionStateMachine(
+        Status.submitted,
+        Action.waitlist,
+        false,
+      )
+      expect(result.isValidAction).toBe(false)
+    })
+
     it('prevents non-organizer from rejecting', () => {
       const result = actionStateMachine(Status.submitted, Action.reject, false)
       expect(result.isValidAction).toBe(false)
@@ -110,6 +124,37 @@ describe('actionStateMachine', () => {
     })
   })
 
+  describe('waitlisted status', () => {
+    it('allows organizer to accept', () => {
+      const result = actionStateMachine(Status.waitlisted, Action.accept, true)
+      expect(result).toEqual({ status: Status.accepted, isValidAction: true })
+    })
+
+    it('allows organizer to reject', () => {
+      const result = actionStateMachine(Status.waitlisted, Action.reject, true)
+      expect(result).toEqual({ status: Status.rejected, isValidAction: true })
+    })
+
+    it('allows speaker to withdraw', () => {
+      const result = actionStateMachine(
+        Status.waitlisted,
+        Action.withdraw,
+        false,
+      )
+      expect(result).toEqual({ status: Status.withdrawn, isValidAction: true })
+    })
+
+    it('prevents non-organizer from accepting', () => {
+      const result = actionStateMachine(Status.waitlisted, Action.accept, false)
+      expect(result.isValidAction).toBe(false)
+    })
+
+    it('prevents non-organizer from rejecting', () => {
+      const result = actionStateMachine(Status.waitlisted, Action.reject, false)
+      expect(result.isValidAction).toBe(false)
+    })
+  })
+
   describe('full lifecycle: draft → submitted → accepted → confirmed', () => {
     it('transitions through the complete happy path', () => {
       let { status } = actionStateMachine(Status.draft, Action.submit, false)
@@ -119,5 +164,14 @@ describe('actionStateMachine', () => {
       ;({ status } = actionStateMachine(status, Action.confirm, false))
       expect(status).toBe(Status.confirmed)
     })
+
+    it('transitions through waitlist path: draft → submitted → waitlisted → accepted', () => {
+      let { status } = actionStateMachine(Status.draft, Action.submit, false)
+      expect(status).toBe(Status.submitted)
+      ;({ status } = actionStateMachine(status, Action.waitlist, true))
+      expect(status).toBe(Status.waitlisted)
+      ;({ status } = actionStateMachine(status, Action.accept, true))
+      expect(status).toBe(Status.accepted)
+    })
   })
 })

src/components/admin/AdminActionBar.tsx

@@ -5,6 +5,7 @@ import {
   CheckIcon,
   XMarkIcon,
   BellIcon,
+  ClockIcon,
   StarIcon,
   UserPlusIcon,
   MapPinIcon,
@@ -94,10 +95,14 @@ export function AdminActionBar({
     setShowEditModal(false)
   }
 
-  const canApprove = proposal.status === 'submitted'
+  const canApprove =
+    proposal.status === 'submitted' || proposal.status === 'waitlisted'
+  const canWaitlist = proposal.status === 'submitted'
   const canRemind = proposal.status === 'accepted'
   const canReject =
-    proposal.status === 'submitted' || proposal.status === 'accepted'
+    proposal.status === 'submitted' ||
+    proposal.status === 'accepted' ||
+    proposal.status === 'waitlisted'
 
   // Keyboard shortcuts
   useEffect(() => {
@@ -158,11 +163,13 @@ export function AdminActionBar({
               className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
                 proposal.status === 'accepted'
                   ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                  : proposal.status === 'rejected'
-                    ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
-                    : proposal.status === 'submitted'
-                      ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
-                      : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
+                  : proposal.status === 'waitlisted'
+                    ? 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200'
+                    : proposal.status === 'rejected'
+                      ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+                      : proposal.status === 'submitted'
+                        ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
+                        : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
               }`}
             >
               {proposal.status.charAt(0).toUpperCase() +
@@ -298,6 +305,16 @@ export function AdminActionBar({
               Approve
             </AdminButton>
           )}
+          {canWaitlist && (
+            <AdminButton
+              color="orange"
+              size="xs"
+              onClick={() => handleAction(Action.waitlist)}
+            >
+              <ClockIcon className="h-3 w-3" />
+              Waitlist
+            </AdminButton>
+          )}
           {canRemind && (
             <AdminButton
               color="yellow"

src/components/admin/AdminButton.tsx

@@ -5,6 +5,7 @@ type AdminButtonColor =
   | 'indigo'
   | 'blue'
   | 'green'
+  | 'orange'
   | 'red'
   | 'purple'
   | 'yellow'
@@ -22,6 +23,8 @@ const colorStyles: Record<AdminButtonColor, string> = {
   blue: 'bg-blue-600 text-white shadow-sm hover:bg-blue-700 focus-visible:outline-blue-600',
   green:
     'bg-green-600 text-white shadow-sm hover:bg-green-700 focus-visible:outline-green-600',
+  orange:
+    'bg-orange-600 text-white shadow-sm hover:bg-orange-700 focus-visible:outline-orange-600',
   red: 'bg-red-600 text-white shadow-sm hover:bg-red-700 focus-visible:outline-red-600',
   purple:
     'bg-purple-600 text-white shadow-sm hover:bg-purple-700 focus-visible:outline-purple-600',

src/components/admin/ProposalActionModal.stories.tsx

@@ -98,6 +98,18 @@ export const RemindAction: Story = {
   },
 }
 
+export const WaitlistAction: Story = {
+  args: {
+    open: true,
+    close: fn(),
+    proposal: mockProposal,
+    action: Action.waitlist,
+    adminUI: true,
+    onAction: fn(),
+    domain: 'cloudnativedays.no',
+  },
+}
+
 export const DeleteAction: Story = {
   args: {
     open: true,

src/components/admin/ProposalActionModal.tsx

@@ -11,6 +11,7 @@ import {
   HeartIcon,
   XMarkIcon,
   BellIcon,
+  ClockIcon,
 } from '@heroicons/react/20/solid'
 import { Speaker } from '@/lib/speaker/types'
 import { TrashIcon } from '@heroicons/react/24/solid'
@@ -37,6 +38,12 @@ function colorForAction(action: Action): [string, string, string] {
         'text-green-600 dark:text-green-400',
         'bg-green-600 hover:bg-green-500 dark:bg-green-700 dark:hover:bg-green-600',
       ]
+    case Action.waitlist:
+      return [
+        'bg-orange-100 dark:bg-orange-900/30',
+        'text-orange-600 dark:text-orange-400',
+        'bg-orange-600 hover:bg-orange-500 dark:bg-orange-700 dark:hover:bg-orange-600',
+      ]
     case Action.remind:
       return [
         'bg-yellow-100 dark:bg-yellow-900/30',
@@ -69,6 +76,8 @@ function iconForAction(
     case Action.accept:
     case Action.confirm:
       return HeartIcon
+    case Action.waitlist:
+      return ClockIcon
     case Action.remind:
       return BellIcon
     case Action.reject:
@@ -174,6 +183,7 @@ export function ProposalActionModal({
           )}
           {(action === Action.accept ||
             action === Action.remind ||
+            action === Action.waitlist ||
             action === Action.reject) &&
             notify &&
             createLocalhostWarning(domain, 'speakers') && (

src/components/admin/ProposalCard.stories.tsx

@@ -167,6 +167,17 @@ export const Confirmed: Story = {
   },
 }
 
+export const Waitlisted: Story = {
+  args: {
+    proposal: createMockProposal({
+      status: Status.waitlisted,
+      title: 'Cloud Native CI/CD Pipelines',
+      format: Format.presentation_25,
+    }),
+    href: '/admin/proposals/proposal-8',
+  },
+}
+
 export const Rejected: Story = {
   args: {
     proposal: createMockProposal({
@@ -253,14 +264,22 @@ export const AllStatuses: Story = {
       <ProposalCard
         proposal={createMockProposal({
           _id: 'p5',
+          status: Status.waitlisted,
+          title: 'Waitlisted Proposal',
+        })}
+        href="#"
+      />
+      <ProposalCard
+        proposal={createMockProposal({
+          _id: 'p6',
           status: Status.rejected,
           title: 'Rejected Proposal',
         })}
         href="#"
       />
       <ProposalCard
         proposal={createMockProposal({
-          _id: 'p6',
+          _id: 'p7',
           status: Status.withdrawn,
           title: 'Withdrawn Proposal',
         })}

src/components/admin/ProposalsList.stories.tsx

@@ -195,17 +195,24 @@ export const AllStatuses: Story = {
       ),
       createMockProposal(
         'p5',
+        'Waitlisted Proposal',
+        Status.waitlisted,
+        Format.presentation_25,
+        'Speaker 5',
+      ),
+      createMockProposal(
+        'p6',
         'Rejected Proposal',
         Status.rejected,
         Format.lightning_10,
-        'Speaker 5',
+        'Speaker 6',
       ),
       createMockProposal(
-        'p6',
+        'p7',
         'Withdrawn Proposal',
         Status.withdrawn,
         Format.workshop_120,
-        'Speaker 6',
+        'Speaker 7',
       ),
     ],
   },

src/components/admin/hooks/useProposalSearch.ts

@@ -10,14 +10,15 @@ const STATUS_PRIORITY: Record<Status, number> = {
   [Status.accepted]: 0,
   [Status.confirmed]: 1,
   [Status.submitted]: 2,
-  [Status.draft]: 3,
-  [Status.rejected]: 4,
-  [Status.withdrawn]: 5,
-  [Status.deleted]: 6,
+  [Status.waitlisted]: 3,
+  [Status.draft]: 4,
+  [Status.rejected]: 5,
+  [Status.withdrawn]: 6,
+  [Status.deleted]: 7,
 } as const
 
 // Default priority for unknown status values (lowest priority)
-const DEFAULT_STATUS_PRIORITY = 7
+const DEFAULT_STATUS_PRIORITY = 8
 
 export function useProposalSearch() {
   const [isSearching, setIsSearching] = useState(false)

src/components/cfp/CompactProposalList.stories.tsx

@@ -83,6 +83,12 @@ const mixedStatusProposals: ProposalExisting[] = [
   ),
   createMockProposal(
     'talk-4',
+    'Cloud Native CI/CD Pipelines',
+    Status.waitlisted,
+    Format.presentation_25,
+  ),
+  createMockProposal(
+    'talk-5',
     'Service Mesh Deep Dive',
     Status.rejected,
     Format.presentation_45,

src/components/cfp/CompactProposalList.tsx

@@ -57,8 +57,10 @@ function getProposalStatusConfig(
       return hasApprovedTalk
         ? { color: 'gray', icon: MinusCircleIcon, label: 'Not selected' }
         : { color: 'red', icon: XCircleIcon, label: 'Rejected' }
+    case 'waitlisted':
+      return { color: 'orange', icon: ClockIcon, label: 'Waitlisted' }
     case 'withdrawn':
-      return { color: 'orange', icon: XCircleIcon, label: 'Withdrawn' }
+      return { color: 'purple', icon: XCircleIcon, label: 'Withdrawn' }
     case 'draft':
       return { color: 'gray', icon: DocumentTextIcon, label: 'Draft' }
     default:
@@ -85,11 +87,12 @@ export function CompactProposalList({
     const statusOrder: Record<Status, number> = {
       confirmed: 1,
       accepted: 2,
-      submitted: 3,
-      draft: 4,
-      rejected: 5,
-      withdrawn: 6,
-      deleted: 7,
+      waitlisted: 3,
+      submitted: 4,
+      draft: 5,
+      rejected: 6,
+      withdrawn: 7,
+      deleted: 8,
     }
     return statusOrder[a.status] - statusOrder[b.status]
   })