Add waitlisted proposal status handling and related components

Author: Starefossen

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/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/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:

src/docs/design-system/examples/EmailTemplates.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { ProposalAcceptTemplate } from '@/components/email/ProposalAcceptTemplate'
 import { ProposalRejectTemplate } from '@/components/email/ProposalRejectTemplate'
+import { ProposalWaitlistTemplate } from '@/components/email/ProposalWaitlistTemplate'
 import { ContractSigningTemplate } from '@/components/email/ContractSigningTemplate'
 import { ContractSignedTemplate } from '@/components/email/ContractSignedTemplate'
 import { ContractReminderTemplate } from '@/components/email/ContractReminderTemplate'
@@ -186,6 +187,37 @@ export const EmailTemplates: Story = {
           </EmailPreviewFrame>
         </section>
 
+        {/* Live Waitlist Email */}
+        <section className="mb-16">
+          <h2 className="font-space-grotesk mb-6 text-2xl font-semibold text-brand-slate-gray dark:text-white">
+            Proposal Waitlisted Email
+          </h2>
+          <p className="font-inter mb-6 text-gray-600 dark:text-gray-400">
+            Sent when a speaker&apos;s proposal is placed on the waitlist as a
+            backup.
+          </p>
+          <EmailPreviewFrame
+            from="Cloud Native Days Norway <hello@cloudnativedays.no>"
+            to="charlie.davis@example.com"
+            subject="Your proposal has been waitlisted"
+            time="Just now"
+          >
+            <ProposalWaitlistTemplate
+              speakerName="Charlie Davis"
+              proposalTitle="Cloud Native CI/CD Pipelines"
+              eventName="Cloud Native Days Norway 2026"
+              eventLocation="Oslo, Norway"
+              eventDate="June 15-16, 2026"
+              eventUrl="https://cloudnativedays.no"
+              comment="Your proposal scored highly and we'd love to include it if a slot opens up. We'll notify you as soon as possible!"
+              socialLinks={[
+                'https://twitter.com/cloudnativeno',
+                'https://linkedin.com/company/cloudnativeno',
+              ]}
+            />
+          </EmailPreviewFrame>
+        </section>
+
         {/* Contract Signing Email */}
         <section className="mb-16">
           <h2 className="font-space-grotesk mb-6 text-2xl font-semibold text-brand-slate-gray dark:text-white">