refactor: refactor section wrapper into separate component

src/components/generic/ASection.vue

+<template>
+  <section>
+    <header class="tw-relative tw-w-fit tw-flex tw-items-center tw-gap-6 tw-mt-12 tw-mb-4">
+      <SectionTitle>{{ title }}</SectionTitle>
+      <slot name="header" />
+    </header>
+
+    <slot />
+  </section>
+</template>
+
+<script lang="ts" setup>
+import SectionTitle from '@/components/generic/SectionTitle.vue'
+
+defineOptions({ compatConfig: { MODE: 3 } })
+defineProps<{
+  title: string
+}>()
+</script>

src/components/shows/Schedules.vue

 <template>
-  <section>
-    <header class="tw-flex tw-items-center tw-gap-6 tw-mt-12 tw-mb-4">
-      <SectionTitle>{{ t('showSchedules.title') }}</SectionTitle>
-
+  <ASection :title="t('showSchedules.title')">
+    <template #header>
       <button
         v-if="collapseSchedules"
         type="button"
@@ -13,7 +11,7 @@
       >
         {{ t(isCollapsed ? 'showSchedules.showAll' : 'showSchedules.hide') }}
       </button>
-    </header>
+    </template>
 
     <Collapse
       id="schedule-collapsable"
@@ -86,7 +84,7 @@
         </table>
       </div>
     </Collapse>
-  </section>
+  </ASection>
 </template>
 
 <script lang="ts" setup>
@@ -98,9 +96,9 @@ import { useRRule } from '@/mixins/rrules'
 import { usePretty } from '@/mixins/prettyDate'
 import { lowercaseFirst, uppercaseFirst, useSelectedShow } from '@/utilities'
 import { useI18n } from '@/i18n'
-import SectionTitle from '@/components/generic/SectionTitle.vue'
-import Collapse from '@/components/generic/Collapse.vue'
 import { Schedule } from '@/types'
+import Collapse from '@/components/generic/Collapse.vue'
+import ASection from '@/components/generic/ASection.vue'
 
 defineOptions({
   compatConfig: { MODE: 3 },

src/components/shows/TimeSlotList.vue

 <template>
-  <section>
-    <header class="tw-flex tw-items-center tw-gap-6 tw-mt-12 tw-mb-4">
-      <SectionTitle>{{ t('showTimeslots.title') }}</SectionTitle>
+  <ASection :title="t('showTimeslots.title')">
+    <template #header>
       <Popover class="tw-relative">
         <!-- TODO: this span is on purpose because headless ui seems to interfere with vue compat -->
         <PopoverButton as="span">
@@ -18,7 +17,7 @@
           <TimeSlotFilter v-model="page" class="tw-flex-col" @paginate="paginationData = $event" />
         </PopoverPanel>
       </Popover>
-    </header>
+    </template>
 
     <div class="aura-table-wrapper">
       <table ref="tableEl" class="aura-table">
@@ -61,7 +60,7 @@
         />
       </div>
     </div>
-  </section>
+  </ASection>
 </template>
 
 <script lang="ts" setup>
@@ -74,7 +73,7 @@ import TimeSlotRow from '@/components/shows/TimeSlotRow.vue'
 import { PaginationData } from '@/types'
 import Pagination from '@/components/generic/Pagination.vue'
 import PaginationRange from '@/components/generic/PaginationRange.vue'
-import SectionTitle from '@/components/generic/SectionTitle.vue'
+import ASection from '@/components/generic/ASection.vue'
 
 defineOptions({
   compatConfig: { MODE: 3 },