From 8afee801f8736c29e76bb49d0b185271c04dfe22 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Tue, 14 Apr 2026 22:47:20 +0200
Subject: [PATCH] feat: make shift dialog time-slot help collapsible

Made-with: Cursor
---
 .../components/sections/CreateShiftDialog.vue | 50 +++++++++++++------
 1 file changed, 36 insertions(+), 14 deletions(-)

diff --git a/apps/app/src/components/sections/CreateShiftDialog.vue b/apps/app/src/components/sections/CreateShiftDialog.vue
index 01c26cf3..df399d21 100644
--- a/apps/app/src/components/sections/CreateShiftDialog.vue
+++ b/apps/app/src/components/sections/CreateShiftDialog.vue
@@ -71,6 +71,14 @@ const form = ref({
 const errors = ref<Record<string, string>>({})
 const refVForm = ref<VForm>()
 
+/** Single accordion panel id for time-slot help; `undefined` = collapsed (saves vertical space). */
+const timeSlotHelpPanel = ref<string | undefined>(undefined)
+
+watch(modelValue, (open) => {
+  if (open)
+    timeSlotHelpPanel.value = undefined
+})
+
 // Populate form when editing
 watch(
   () => props.shift,
@@ -232,22 +240,36 @@ function onSubmit() {
         @submit.prevent="onSubmit"
       >
         <VCardText class="pt-5">
-          <VAlert
+          <VExpansionPanels
             v-if="showInfoTooltip && tooltipText"
-            type="info"
-            variant="tonal"
-            density="compact"
-            class="mb-6"
-            title="Tijdsloten in dit evenement"
+            v-model="timeSlotHelpPanel"
+            class="mb-6 border rounded-lg"
+            variant="accordion"
+            elevation="0"
           >
-            <p class="text-body-2 mb-0">
-              {{ tooltipText.main }}
-            </p>
-            <p class="text-caption text-medium-emphasis mb-0 mt-2">
-              <span class="font-weight-medium text-high-emphasis">Tip:</span>
-              {{ tooltipText.tip }}
-            </p>
-          </VAlert>
+            <VExpansionPanel value="time-slot-help">
+              <VExpansionPanelTitle class="py-3 min-h-0">
+                <div class="d-flex align-center text-start">
+                  <VIcon
+                    icon="tabler-info-circle"
+                    color="info"
+                    size="22"
+                    class="me-3 flex-shrink-0"
+                  />
+                  <span class="text-body-1 font-weight-medium">Tijdsloten in dit evenement</span>
+                </div>
+              </VExpansionPanelTitle>
+              <VExpansionPanelText class="text-body-2">
+                <p class="mb-0">
+                  {{ tooltipText.main }}
+                </p>
+                <p class="text-caption text-medium-emphasis mb-0 mt-3">
+                  <span class="font-weight-medium text-high-emphasis">Tip:</span>
+                  {{ tooltipText.tip }}
+                </p>
+              </VExpansionPanelText>
+            </VExpansionPanel>
+          </VExpansionPanels>
 
           <p class="text-overline text-medium-emphasis letter-spacing-normal mb-3">
             Tijd & rol