fix(portal): review display, hover overlay, and drag ghost for complex field types

- Extract formatFieldValue helper for shared use between review step
  and confirmation page — one source of truth for TAG_PICKER,
  AVAILABILITY_PICKER, and SECTION_PRIORITY display, so the raw-ID
  and [object Object] leaks from two parallel stringifiers can't
  regress on either side.
- TAG_PICKER: lookup via field.available_tags (server-inlined).
- AVAILABILITY_PICKER: lookup via usePublicFormTimeSlots, strip
  seconds. "Laden…" while the cache warms.
- SECTION_PRIORITY: defensive shape-guard prevents [object Object]
  leaks, sorted priority-prefixed rendering ("1. Bar, 2. Hospitality").
- Subtle primary-tinted hover (4% primary, primary border) replacing
  the near-black Vuetify default overlay on unranked section cards.
- Explicit ghost-class / drag-class / chosen-class on vuedraggable
  with solid drag-clone + elevation shadow and a 30%-opacity silhouette
  at the origin, so mid-drag text no longer overlaps.
- 17 new formatFieldValue unit assertions + 2 new FieldSectionPriority
  assertions locking in the draggable classes and the disabled-card
  toggle at max.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/portal/src/components/public-form/FieldSectionPriority.vue

@@ -187,7 +187,10 @@ function sectionNameFor(id: string): string {
         v-model="ranked"
         item-key="section_id"
         handle=".section-priority-handle"
-        :animation="180"
+        ghost-class="section-priority-ghost"
+        chosen-class="section-priority-chosen"
+        drag-class="section-priority-drag"
+        :animation="150"
         :delay="100"
         :delay-on-touch-only="true"
         class="section-priority-ranked mb-4"
@@ -318,12 +321,13 @@ function sectionNameFor(id: string): string {
    assistive tech, which Vuetify's :disabled would do. */
 .section-priority-unranked-card {
   cursor: pointer;
-  transition: background-color 120ms;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
 }
 
-.section-priority-unranked-card:hover,
-.section-priority-unranked-card:focus-visible {
-  background-color: rgb(var(--v-theme-surface-variant));
+.section-priority-unranked-card:hover:not(.section-priority-unranked-disabled),
+.section-priority-unranked-card:focus-visible:not(.section-priority-unranked-disabled) {
+  background-color: rgb(var(--v-theme-primary) / 0.04);
+  border-color: rgb(var(--v-theme-primary));
 }
 
 .section-priority-unranked-disabled {
@@ -331,13 +335,29 @@ function sectionNameFor(id: string): string {
   opacity: 0.6;
 }
 
-.section-priority-unranked-disabled:hover,
-.section-priority-unranked-disabled:focus-visible {
-  background-color: inherit;
-}
-
 .section-priority-rank {
   min-inline-size: 1.5rem;
   text-align: center;
 }
+
+/* vuedraggable drag states — SortableJS applies these classes. The
+   defaults leave the drag-clone semi-transparent while the ghost
+   stays solid at the origin, which produces text overlap mid-drag. */
+.section-priority-ghost {
+  opacity: 0.3;
+  background: rgb(var(--v-theme-surface-bright));
+}
+
+.section-priority-drag {
+  /* !important overrides SortableJS's inline opacity: 0.8 default so
+     the drag-clone reads as solid + elevated. */
+  opacity: 1 !important;
+  background: rgb(var(--v-theme-surface));
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
+  cursor: grabbing;
+}
+
+.section-priority-chosen {
+  cursor: grabbing;
+}
 </style>

apps/portal/src/components/public-form/FormConfirmation.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import IdentityMatchBanner from './IdentityMatchBanner.vue'
+import { usePublicFormSections } from '@/composables/api/usePublicFormSections'
+import { usePublicFormTimeSlots } from '@/composables/api/usePublicFormTimeSlots'
+import { formatFieldValue } from '@/composables/formatFieldValue'
 import type { FormStep } from '@/composables/useFormSteps'
+import { usePublicFormToken } from '@/composables/publicFormInjection'
 import { FormFieldType } from '@/types/formBuilder'
 import type { FormValues, PublicFormField, PublicFormSubmissionIdentityMatch } from '@/types/formBuilder'
 
@@ -12,13 +16,20 @@ const props = defineProps<{
   identityMatch?: PublicFormSubmissionIdentityMatch | null
 }>()
 
-function displayValue(field: PublicFormField): string {
-  const v = props.values[field.slug]
-  if (v === null || v === undefined || v === '') return '—'
-  if (Array.isArray(v)) return v.length > 0 ? v.map(String).join(', ') : '—'
-  if (typeof v === 'boolean') return v ? 'Ja' : 'Nee'
+// TanStack Query calls — these hit the same cache the field components
+// populated during the form render (5-minute staleTime), so there's no
+// extra network round-trip on the confirmation page.
+const token = usePublicFormToken()
+const timeSlotsQuery = usePublicFormTimeSlots(token)
+const sectionsQuery = usePublicFormSections(token)
 
-  return String(v)
+function displayValue(field: PublicFormField): string {
+  return formatFieldValue(
+    field,
+    props.values[field.slug],
+    timeSlotsQuery.data.value,
+    sectionsQuery.data.value,
+  )
 }
 
 function isAnswerable(field: PublicFormField): boolean {

apps/portal/src/composables/formatFieldValue.ts

@@ -0,0 +1,137 @@
+import { FormFieldType } from '@/types/formBuilder'
+import type {
+  PublicFormField,
+  PublicFormSectionOption,
+  PublicFormTimeSlot,
+  SectionPriorityValue,
+} from '@/types/formBuilder'
+
+const EMPTY = '—'
+const LOADING = 'Laden…'
+const UNKNOWN_TAG = '(onbekende tag)'
+const UNKNOWN_TIME_SLOT = '(onbekend tijdslot)'
+const UNKNOWN_SECTION = '(onbekende sectie)'
+
+// Single source of truth for how a submitted value is rendered on the
+// review step and the post-submit confirmation page. Shared so the
+// stringified-id / [object Object] bugs fixed in S3a PR 2.2 can't
+// regress via a naive caller.
+//
+// `timeSlots` / `sections` are intentionally accepted as raw arrays (or
+// undefined when the underlying TanStack Query is still fetching).
+// Callers pass the cached `.data.value` from usePublicFormTimeSlots /
+// usePublicFormSections; this keeps the formatter side-effect-free and
+// trivial to unit-test.
+export function formatFieldValue(
+  field: PublicFormField,
+  value: unknown,
+  timeSlots: readonly PublicFormTimeSlot[] | undefined,
+  sections: readonly PublicFormSectionOption[] | undefined,
+): string {
+  if (isEmptyValue(value)) return EMPTY
+
+  switch (field.field_type) {
+    case FormFieldType.TAG_PICKER:
+      return formatTagPicker(field, value)
+    case FormFieldType.AVAILABILITY_PICKER:
+      return formatAvailabilityPicker(value, timeSlots)
+    case FormFieldType.SECTION_PRIORITY:
+      return formatSectionPriority(value, sections)
+    case FormFieldType.BOOLEAN:
+      return value ? 'Ja' : 'Nee'
+    default:
+      return formatScalarOrList(value)
+  }
+}
+
+function isEmptyValue(value: unknown): boolean {
+  if (value === null || value === undefined || value === '') return true
+  if (Array.isArray(value) && value.length === 0) return true
+
+  return false
+}
+
+function formatTagPicker(field: PublicFormField, value: unknown): string {
+  if (!Array.isArray(value)) return EMPTY
+
+  const byId = new Map<string, string>()
+  for (const tag of field.available_tags ?? []) byId.set(tag.id, tag.name)
+
+  const parts = value
+    .map(v => (typeof v === 'string' ? v : String(v)))
+    .map(id => byId.get(id) ?? UNKNOWN_TAG)
+
+  return parts.length > 0 ? parts.join(', ') : EMPTY
+}
+
+function formatAvailabilityPicker(
+  value: unknown,
+  timeSlots: readonly PublicFormTimeSlot[] | undefined,
+): string {
+  if (!Array.isArray(value)) return EMPTY
+  if (timeSlots === undefined) return LOADING
+
+  const byId = new Map<string, PublicFormTimeSlot>()
+  for (const slot of timeSlots) byId.set(slot.id, slot)
+
+  const parts = value
+    .map(v => (typeof v === 'string' ? v : String(v)))
+    .map(id => {
+      const slot = byId.get(id)
+      if (!slot) return UNKNOWN_TIME_SLOT
+
+      return `${slot.name} (${stripSeconds(slot.start_time)}–${stripSeconds(slot.end_time)})`
+    })
+
+  return parts.length > 0 ? parts.join(', ') : EMPTY
+}
+
+function formatSectionPriority(
+  value: unknown,
+  sections: readonly PublicFormSectionOption[] | undefined,
+): string {
+  // Defensive shape-guard: if the value isn't {section_id, priority}[],
+  // fall back to EMPTY rather than leaking `[object Object]`.
+  if (!Array.isArray(value)) return EMPTY
+
+  const entries: SectionPriorityValue[] = []
+  for (const entry of value) {
+    if (!entry || typeof entry !== 'object') return EMPTY
+    const obj = entry as Record<string, unknown>
+    if (typeof obj.section_id !== 'string' || typeof obj.priority !== 'number') {
+      return EMPTY
+    }
+    entries.push({ section_id: obj.section_id, priority: obj.priority })
+  }
+  if (entries.length === 0) return EMPTY
+  if (sections === undefined) return LOADING
+
+  const byId = new Map<string, PublicFormSectionOption>()
+  for (const section of sections) byId.set(section.id, section)
+
+  // Input may be out of order; the review/confirmation copy is "1. Foo,
+  // 2. Bar" so sort by priority ascending before rendering.
+  const sorted = [...entries].sort((a, b) => a.priority - b.priority)
+
+  return sorted
+    .map(({ section_id, priority }) => {
+      const name = byId.get(section_id)?.name ?? UNKNOWN_SECTION
+
+      return `${priority}. ${name}`
+    })
+    .join(', ')
+}
+
+function formatScalarOrList(value: unknown): string {
+  if (Array.isArray(value)) {
+    return value.length > 0 ? value.map(v => String(v)).join(', ') : EMPTY
+  }
+
+  return String(value)
+}
+
+function stripSeconds(t: string): string {
+  const parts = t.split(':')
+
+  return parts.length >= 2 ? `${parts[0]}:${parts[1]}` : t
+}

apps/portal/src/pages/register/[public_token].vue

@@ -6,8 +6,11 @@ import FormErrorState from '@/components/public-form/FormErrorState.vue'
 import FormStepper from '@/components/public-form/FormStepper.vue'
 import SubmitterDetails from '@/components/public-form/SubmitterDetails.vue'
 import { extractErrorBody, useFetchPublicFormSchema } from '@/composables/api/usePublicForm'
+import { usePublicFormSections } from '@/composables/api/usePublicFormSections'
+import { usePublicFormTimeSlots } from '@/composables/api/usePublicFormTimeSlots'
 import { useFormDraft } from '@/composables/useFormDraft'
 import { isStepValid, useFormSteps } from '@/composables/useFormSteps'
+import { formatFieldValue } from '@/composables/formatFieldValue'
 import { providePublicFormToken } from '@/composables/publicFormInjection'
 import { FormFieldType } from '@/types/formBuilder'
 import type { FormErrorCode, PublicFormField } from '@/types/formBuilder'
@@ -37,6 +40,14 @@ providePublicFormToken(token)
 
 const schemaQuery = useFetchPublicFormSchema(tokenRef)
 
+// Sibling endpoints — fetched at page level so the review step and
+// FormConfirmation can human-label AVAILABILITY_PICKER /
+// SECTION_PRIORITY values via formatFieldValue. Shares the same
+// 5-minute TanStack Query cache used by the field components, so
+// this is a free hit when those fields are rendered on screen.
+const timeSlotsQuery = usePublicFormTimeSlots(token)
+const sectionsQuery = usePublicFormSections(token)
+
 const draft = useFormDraft(tokenRef, {
   locale: 'nl',
 })
@@ -212,12 +223,12 @@ function answerableForReview(field: PublicFormField): boolean {
 }
 
 function formatReviewValue(field: PublicFormField): string {
-  const v = draft.values.value[field.slug]
-  if (v === null || v === undefined || v === '') return '—'
-  if (Array.isArray(v)) return v.length > 0 ? v.map(String).join(', ') : '—'
-  if (typeof v === 'boolean') return v ? 'Ja' : 'Nee'
-
-  return String(v)
+  return formatFieldValue(
+    field,
+    draft.values.value[field.slug],
+    timeSlotsQuery.data.value,
+    sectionsQuery.data.value,
+  )
 }
 </script>