fix: improve UI consistency and enhance proposal management features

Starefossen · Starefossen · commit e01b630ef61a · 2026-04-01T23:36:34.000+02:00
diff --git a/src/app/(admin)/admin/proposals/[id]/page.tsx b/src/app/(admin)/admin/proposals/[id]/page.tsx
@@ -56,9 +56,9 @@ export default async function ProposalDetailPage({
     return (
       <div className="flex h-full min-h-screen flex-col lg:flex-row">
         <div className="min-w-0 flex-1">
-          <div className="mx-auto max-w-4xl p-4 lg:p-0">
-            <div className="mb-8">
-              <div className="mb-4 flex items-center justify-between">
+          <div className="mx-auto max-w-4xl p-4">
+            <div className="mb-5">
+              <div className="mb-3 flex items-center justify-between">
                 <BackLink fallbackUrl="/admin/proposals">
                   Back to Proposals
                 </BackLink>
@@ -86,7 +86,7 @@ export default async function ProposalDetailPage({
         </div>
 
         <div className="w-full lg:w-96 lg:shrink-0">
-          <div className="space-y-4 p-4 lg:p-4">
+          <div className="space-y-4 p-4">
             <ProposalPublishedContent
               proposalId={proposal._id}
               currentVideoUrl={getProposalVideoUrl(proposal)}
@@ -100,13 +100,13 @@ export default async function ProposalDetailPage({
               status={proposal.status}
               conferenceStartDate={conference.startDate}
             />
+            <ProposalReviewPanel
+              proposalId={proposal._id}
+              initialReviews={proposal.reviews || []}
+              currentUser={session?.speaker}
+              domain={domain}
+            />
           </div>
-          <ProposalReviewPanel
-            proposalId={proposal._id}
-            initialReviews={proposal.reviews || []}
-            currentUser={session?.speaker}
-            domain={domain}
-          />
         </div>
       </div>
     )
diff --git a/src/components/admin/AdminActionBar.tsx b/src/components/admin/AdminActionBar.tsx
@@ -153,15 +153,14 @@ export function AdminActionBar({
 
   return (
     <div className="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800">
-      <div className="flex flex-wrap items-center justify-between gap-4">
+      <div className="flex items-center justify-between gap-4">
         <div className="flex min-w-0 flex-wrap items-center gap-4">
           <div className="flex shrink-0 items-center gap-2">
             <span className="text-sm font-medium text-gray-600 dark:text-gray-400">
               Status:
             </span>
             <span
-              className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
-                proposal.status === 'accepted'
+              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 === 'waitlisted'
                     ? 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200'
@@ -170,7 +169,7 @@ export function AdminActionBar({
                       : 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() +
                 proposal.status.slice(1)}
@@ -252,31 +251,25 @@ export function AdminActionBar({
           )}
         </div>
 
-        <div className="flex shrink-0 items-center gap-2">
+        <div className="flex shrink-0 items-center gap-1.5">
           <AdminButton
             size="xs"
             onClick={handleEditProposal}
-            title="Edit proposal"
+            title="Edit proposal (⌘E)"
           >
             <PencilIcon className="h-3 w-3" />
-            <span>Edit</span>
-            <kbd className="ml-1 hidden rounded border border-indigo-400 bg-indigo-500 px-1.5 py-0.5 text-xs font-semibold text-white sm:inline dark:border-indigo-600 dark:bg-indigo-700">
-              ⌘E
-            </kbd>
+            Edit
           </AdminButton>
 
           {speakers.length > 0 && (
             <AdminButton
               color="purple"
               size="xs"
               onClick={handlePreviewSpeaker}
-              title="Preview speaker profile"
+              title="Preview speaker profile (⌘P)"
             >
               <EyeIcon className="h-3 w-3" />
-              <span>Preview</span>
-              <kbd className="ml-1 hidden rounded border border-purple-400 bg-purple-500 px-1.5 py-0.5 text-xs font-semibold text-white sm:inline dark:border-purple-600 dark:bg-purple-700">
-                ⌘P
-              </kbd>
+              Preview
             </AdminButton>
           )}
 
@@ -285,13 +278,10 @@ export function AdminActionBar({
               color="blue"
               size="xs"
               onClick={handleEmailSpeakers}
-              title={`Email ${speakers.length === 1 ? speakers.filter((s) => s.email)[0]?.name : `${speakers.filter((s) => s.email).length} speakers`}`}
+              title={`Email speaker (⌘M)`}
             >
               <EnvelopeIcon className="h-3 w-3" />
-              <span>Email</span>
-              <kbd className="ml-1 hidden rounded border border-blue-400 bg-blue-500 px-1.5 py-0.5 text-xs font-semibold text-white sm:inline dark:border-blue-600 dark:bg-blue-700">
-                ⌘M
-              </kbd>
+              Email
             </AdminButton>
           )}
 
diff --git a/src/components/admin/AdminButton.tsx b/src/components/admin/AdminButton.tsx
@@ -39,7 +39,7 @@ const variantStyles: Record<Exclude<AdminButtonVariant, 'primary'>, string> = {
 }
 
 const sizeStyles: Record<AdminButtonSize, string> = {
-  xs: 'px-3 py-1.5 text-xs',
+  xs: 'px-2 py-1 text-xs',
   sm: 'px-3 py-2 text-sm',
   md: 'px-4 py-2 text-sm',
 }
@@ -54,7 +54,7 @@ export function AdminButton({
   return (
     <button
       className={clsx(
-        'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         variant === 'primary' ? colorStyles[color] : variantStyles[variant],
         sizeStyles[size],
         className,
diff --git a/src/components/admin/ProposalDetail.tsx b/src/components/admin/ProposalDetail.tsx
@@ -73,9 +73,9 @@ function SpeakerCard({ speaker, requiresTravelFunding }: SpeakerCardProps) {
   const shouldShowExpand = bioText.length > 150
 
   return (
-    <div className="rounded-lg bg-gray-50 p-6 dark:bg-gray-800">
-      <div className="mb-4 flex items-center justify-between">
-        <h2 className="text-lg font-medium text-gray-900 dark:text-white">
+    <div className="rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
+      <div className="mb-3 flex items-center justify-between">
+        <h2 className="text-sm font-semibold text-gray-900 dark:text-white">
           {speaker.name}
         </h2>
         {requiresTravelFunding && (
@@ -174,21 +174,21 @@ export function ProposalDetail({ proposal }: ProposalDetailProps) {
 
   return (
     <div>
-      <div className="border-b border-gray-200 py-5 dark:border-gray-700">
+      <div className="border-b border-gray-200 pb-4 dark:border-gray-700">
         <div className="flex items-center justify-between">
           <div className="min-w-0 flex-1">
-            <h1 className="text-2xl font-bold text-gray-900 sm:text-3xl dark:text-white">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
               {proposal.title}
             </h1>
           </div>
         </div>
       </div>
 
-      <div className="py-5">
-        <div className="grid grid-cols-1 gap-8 xl:grid-cols-3">
-          <div className="space-y-8 lg:col-span-2">
+      <div className="pt-4">
+        <div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
+          <div className="space-y-6 lg:col-span-2">
             <div>
-              <h2 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
+              <h2 className="mb-3 text-lg font-medium text-gray-900 dark:text-white">
                 Description
               </h2>
               <div className="text-gray-600 dark:text-gray-300">
@@ -205,7 +205,7 @@ export function ProposalDetail({ proposal }: ProposalDetailProps) {
 
             {proposal.outline && (
               <div>
-                <h2 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
+                <h2 className="mb-3 text-lg font-medium text-gray-900 dark:text-white">
                   Outline
                 </h2>
                 <div className="prose prose-sm dark:prose-invert max-w-none text-gray-600 dark:text-gray-300">
@@ -216,7 +216,7 @@ export function ProposalDetail({ proposal }: ProposalDetailProps) {
 
             {topics && topics.length > 0 && (
               <div>
-                <h2 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
+                <h2 className="mb-3 text-lg font-medium text-gray-900 dark:text-white">
                   Topics
                 </h2>
                 <div className="flex flex-wrap gap-2">
@@ -239,7 +239,7 @@ export function ProposalDetail({ proposal }: ProposalDetailProps) {
                   speaker?.submittedTalks && speaker.submittedTalks.length > 0,
               ) && (
                 <div>
-                  <h2 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
+                  <h2 className="mb-3 text-lg font-medium text-gray-900 dark:text-white">
                     Other Submissions
                   </h2>
                   <div className="space-y-3">
@@ -317,7 +317,7 @@ export function ProposalDetail({ proposal }: ProposalDetailProps) {
                   speaker.previousAcceptedTalks.length > 0,
               ) && (
                 <div>
-                  <h2 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
+                  <h2 className="mb-3 text-lg font-medium text-gray-900 dark:text-white">
                     Previous Accepted Talks
                   </h2>
                   <div className="space-y-3">
@@ -405,7 +405,7 @@ export function ProposalDetail({ proposal }: ProposalDetailProps) {
               )}
           </div>
 
-          <div className="space-y-6">
+          <div className="space-y-4">
             {speakers.length > 0 ? (
               speakers.map((speaker, index) => (
                 <SpeakerCard
@@ -415,7 +415,7 @@ export function ProposalDetail({ proposal }: ProposalDetailProps) {
                 />
               ))
             ) : (
-              <div className="rounded-lg bg-gray-50 p-6 dark:bg-gray-800">
+              <div className="rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
                 <p className="text-sm text-gray-500 italic dark:text-gray-400">
                   Speaker information not available
                 </p>
diff --git a/src/components/admin/ProposalManagementModal.tsx b/src/components/admin/ProposalManagementModal.tsx
@@ -20,6 +20,10 @@ import { Topic } from '@/lib/topic/types'
 import { extractSpeakerIds } from '@/lib/proposal/utils'
 import { validateProposalForAdmin } from '@/lib/proposal/validation'
 import { SpeakerMultiSelect } from '@/components/admin/SpeakerMultiSelect'
+import { ProposalCoSpeaker } from '@/components/cfp/ProposalCoSpeaker'
+import { CoSpeakerInvitationMinimal } from '@/lib/cospeaker/types'
+import { Speaker } from '@/lib/speaker/types'
+import { extractSpeakersFromProposal } from '@/lib/proposal/utils'
 import { api } from '@/lib/trpc/client'
 import { useQueryClient } from '@tanstack/react-query'
 import { ProposalDetailsForm } from '@/components/proposal/ProposalDetailsForm'
@@ -105,6 +109,19 @@ export function ProposalManagementModal({
     Record<string, string>
   >({})
 
+  const getInitialCoSpeakers = (): Speaker[] => {
+    if (!editingProposal) return []
+    const allSpeakers = extractSpeakersFromProposal(editingProposal)
+    return allSpeakers.slice(1)
+  }
+
+  const [coSpeakers, setCoSpeakers] = useState<Speaker[]>(
+    getInitialCoSpeakers(),
+  )
+  const [invitations, setInvitations] = useState<CoSpeakerInvitationMinimal[]>(
+    editingProposal?.coSpeakerInvitations || [],
+  )
+
   // Validate that topics are properly expanded - this will throw a helpful error
   // if the parent page forgot to pass `topics: true` to getConferenceForCurrentDomain
   useEffect(() => {
@@ -186,32 +203,37 @@ export function ProposalManagementModal({
       setProposalData(
         editingProposal
           ? {
-              title: editingProposal.title || '',
-              description: editingProposal.description || [],
-              language: editingProposal.language || Language.norwegian,
-              format:
-                editingProposal.format ||
-                conference.formats?.[0] ||
-                Format.lightning_10,
-              level: editingProposal.level || Level.beginner,
-              audiences: editingProposal.audiences || [],
-              topics: validTopics,
-              outline: editingProposal.outline || '',
-              tos: true,
-            }
+            title: editingProposal.title || '',
+            description: editingProposal.description || [],
+            language: editingProposal.language || Language.norwegian,
+            format:
+              editingProposal.format ||
+              conference.formats?.[0] ||
+              Format.lightning_10,
+            level: editingProposal.level || Level.beginner,
+            audiences: editingProposal.audiences || [],
+            topics: validTopics,
+            outline: editingProposal.outline || '',
+            tos: true,
+          }
           : {
-              title: '',
-              description: [],
-              language: Language.norwegian,
-              format: conference.formats?.[0] || Format.lightning_10,
-              level: Level.beginner,
-              audiences: [],
-              topics: [],
-              outline: '',
-              tos: false,
-            },
+            title: '',
+            description: [],
+            language: Language.norwegian,
+            format: conference.formats?.[0] || Format.lightning_10,
+            level: Level.beginner,
+            audiences: [],
+            topics: [],
+            outline: '',
+            tos: false,
+          },
       )
       setSelectedSpeakerIds(extractSpeakerIds(editingProposal?.speakers) || [])
+      const allSpeakers = editingProposal
+        ? extractSpeakersFromProposal(editingProposal)
+        : []
+      setCoSpeakers(allSpeakers.slice(1))
+      setInvitations(editingProposal?.coSpeakerInvitations || [])
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- conference.formats and editingProposal are stable, isOpen triggers reset
   }, [isOpen])
@@ -379,6 +401,32 @@ export function ProposalManagementModal({
             />
           </div>
 
+          {editingProposal && (
+            <div className="mb-6">
+              <ProposalCoSpeaker
+                selectedSpeakers={coSpeakers}
+                onSpeakersChange={(speakers) => {
+                  setCoSpeakers(speakers)
+                  const primaryId = selectedSpeakerIds[0]
+                  const allIds = [
+                    primaryId,
+                    ...speakers.map((s) => s._id),
+                  ].filter(Boolean)
+                  setSelectedSpeakerIds(allIds)
+                }}
+                format={proposalData.format}
+                proposalId={editingProposal._id}
+                pendingInvitations={invitations}
+                onInvitationSent={(inv) =>
+                  setInvitations((prev) => [...prev, inv])
+                }
+                onInvitationCanceled={(id) =>
+                  setInvitations((prev) => prev.filter((inv) => inv._id !== id))
+                }
+              />
+            </div>
+          )}
+
           {/* Proposal Details Section */}
           <ProposalDetailsForm
             proposal={proposalData}
diff --git a/src/components/admin/ProposalReviewPanel.tsx b/src/components/admin/ProposalReviewPanel.tsx
diff --git a/src/server/routers/proposal.ts b/src/server/routers/proposal.ts
