feat: highlight station fallback show in show overview

refs #128

src/components/shows/ShowListGridItem.vue

@@ -22,19 +22,32 @@
       <div class="tw-text-gray-600 tw-mt-3 dark:tw-text-neutral-400">
         <SafeHTML sanitize-preset="inline-noninteractive" :html="show.shortDescription" />
       </div>
+      <div v-if="radioSettings?.program.fallback.showId === show.id" class="tw-mt-2">
+        <APill
+          class="tw-text-yellow-900 tw-text-sm"
+          :title="t('show.flags.stationFallback.description')"
+        >
+          {{ t('show.flags.stationFallback.label') }}
+        </APill>
+      </div>
     </div>
   </router-link>
 </template>
 
 <script lang="ts" setup>
+import { useI18n } from '@/i18n'
 import { Show } from '@/types'
 import { useImage } from '@/stores/images'
+import { useCurrentRadioSettings } from '@/stores/radio-settings'
+import APill from '@/components/generic/APill.vue'
 import Image from '@/components/generic/Image.vue'
 import SafeHTML from '@/components/generic/SafeHTML'
 
 const props = defineProps<{
   show: Show
 }>()
+const { t } = useI18n()
+const radioSettings = useCurrentRadioSettings()
 const showImage = useImage(() => props.show.imageId)
 const showLogo = useImage(() => props.show.logoId)
 </script>

src/components/shows/ShowListTableRow.vue

@@ -14,6 +14,14 @@
       >
         <SafeHTML :html="show.name" class="tw-block tw-font-semibold group-hover:tw-underline" />
         <SafeHTML :html="show.shortDescription" class="tw-text-sm" />
+        <div v-if="radioSettings?.program.fallback.showId === show.id" class="tw-mt-1">
+          <APill
+            class="tw-text-yellow-600 tw-text-sm tw-bg-stripes tw-bg-stripes-fallback"
+            :title="t('show.flags.stationFallback.description')"
+          >
+            {{ t('show.flags.stationFallback.label') }}
+          </APill>
+        </div>
       </router-link>
     </td>
     <td>
@@ -33,17 +41,19 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { Show } from '@/types'
-import SafeHTML from '@/components/generic/SafeHTML'
 import { parseISO } from 'date-fns'
-import ATime from '@/components/generic/ATime.vue'
+import { computed } from 'vue'
 import { useI18n } from '@/i18n'
-import { useImage } from '@/stores/images'
-import Image from '@/components/generic/Image.vue'
+import { useRelationList } from '@/form'
+import { Show } from '@/types'
 import { useRelativeDistanceToNow } from '@/util'
 import { useCategoryStore, useShowStore } from '@/stores'
-import { useRelationList } from '@/form'
+import { useImage } from '@/stores/images'
+import { useCurrentRadioSettings } from '@/stores/radio-settings'
+import APill from '@/components/generic/APill.vue'
+import ATime from '@/components/generic/ATime.vue'
+import Image from '@/components/generic/Image.vue'
+import SafeHTML from '@/components/generic/SafeHTML'
 
 const props = defineProps<{
   show: Show
@@ -52,6 +62,7 @@ const props = defineProps<{
 const { t } = useI18n()
 const showStore = useShowStore()
 const categoryStore = useCategoryStore()
+const radioSettings = useCurrentRadioSettings()
 
 const showLogo = useImage(() => props.show.logoId)
 const updatedAt = computed(() => (props.show.updatedAt ? parseISO(props.show.updatedAt) : null))

src/i18n/de.js

@@ -99,6 +99,13 @@ export default {
       updatedAt: 'Letzte Aktualisierung',
       updatedBy: 'Aktualisiert von',
     },
+    flags: {
+      stationFallback: {
+        label: 'Ausweichprogramm',
+        description:
+          'Das Programm dieser Sendereihe wird gespielt, wenn kein anderes Programm in einem Zeitraum zugewiesen ist.',
+      },
+    },
     slugDetail: {
       title: 'URL-Kürzel',
       editRemark:

src/i18n/en.js

@@ -98,6 +98,13 @@ export default {
       updatedAt: 'Last modification',
       updatedBy: 'Modified by',
     },
+    flags: {
+      stationFallback: {
+        label: 'Fallback program',
+        description:
+          'The program of this show is played if no other program is scheduled for the timeframe.',
+      },
+    },
     slugDetail: {
       title: 'Slug',
       editRemark: