chore(front): modernize channel components

front/src/components/audio/ChannelEntries.vue

@@ -9,6 +9,8 @@ import axios from 'axios'
 import PodcastTable from '~/components/audio/podcast/Table.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
 
+import Loader from'~/components/ui/Loader.vue'
+
 interface Events {
   (e: 'fetched', data: BackendResponse<Track[]>): void
 }
@@ -63,12 +65,7 @@ watch(page, fetchData, { immediate: true })
 <template>
   <div>
     <slot />
-    <div class="ui hidden divider" />
+    <Loader v-if="isLoading" />
-    <div
-      v-if="isLoading"
-      class="ui inverted active dimmer"
-    >
-      <div class="ui loader" />
     </div>
     <podcast-table
       v-if="isPodcast"
@@ -109,5 +106,4 @@ watch(page, fetchData, { immediate: true })
         </p>
       </empty-state>
     </template>
-  </div>
 </template>

front/src/components/audio/podcast/Table.vue

@@ -3,7 +3,7 @@ import type { Track } from '~/types'
 
 import PodcastRow from '~/components/audio/podcast/Row.vue'
 import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
-import Pagination from '~/components/vui/Pagination.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 
 interface Props {
   tracks: Track[]
@@ -61,11 +61,9 @@ const { page } = defineModels<{ page: number, }>()
         v-if="paginateResults"
         class="ui center aligned basic segment desktop-and-up"
       >
-        <pagination
+        <Pagination
-          v-bind="$attrs"
+          v-model:page="page"
-          v-model:current="page"
+          :pages="Math.ceil((total || 0)/paginateBy)"
-          :total="total"
-          :paginate-by="paginateBy"
         />
       </div>
     </div>
@@ -90,12 +88,10 @@ const { page } = defineModels<{ page: number, }>()
         v-if="paginateResults"
         class="ui center aligned basic segment tablet-and-below"
       >
-        <pagination
+        <Pagination
           v-if="paginateResults"
-          v-bind="$attrs"
+          v-model:page="page"
-          v-model:current="page"
+          :pages="Math.ceil((total || 0)/paginateBy)"
-          :total="total"
-          :compact="true"
         />
       </div>
     </div>

front/src/views/channels/DetailOverview.vue

@@ -13,6 +13,11 @@ import ChannelEntries from '~/components/audio/ChannelEntries.vue'
 import ChannelSeries from '~/components/audio/ChannelSeries.vue'
 import AlbumModal from '~/components/channels/AlbumModal.vue'
 
+import Loader from '~/components/ui/Loader.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Button from '~/components/ui/Button.vue'
+
 import useWebSocketHandler from '~/composables/useWebSocketHandler'
 
 interface Props {
@@ -94,14 +99,16 @@ const albumModal = ref()
 
 <template>
   <section>
-    <div
+    <Alert yellow
       v-if="pendingUploads.length > 0"
-      class="ui info message"
     >
       <template v-if="isSuccessfull">
-        <i
+        <Button
-          role="button"
+          icon="bi-x"
-          class="close icon"
+          round
+          ghost
+          square-small
+          style="float: right;"
           @click="pendingUploads.length = 0"
         />
         <h3 class="ui header">
@@ -115,24 +122,23 @@ const albumModal = ref()
         <h3 class="ui header">
           {{ t('views.channels.DetailOverview.header.uploadsFailure') }}
         </h3>
-        <div class="ui hidden divider" />
+        <Button
-        <router-link
           v-if="skippedUploads.length > 0"
-          class="ui basic button"
+          secondary
           :to="{name: 'content.libraries.files', query: {q: 'status:skipped'}}"
         >
           {{ t('views.channels.DetailOverview.link.skippedUploads') }}
-        </router-link>
+        </Button>
-        <router-link
+        <Button
           v-if="erroredUploads.length > 0"
-          class="ui basic button"
+          secondary
           :to="{name: 'content.libraries.files', query: {q: 'status:errored'}}"
         >
           {{ t('views.channels.DetailOverview.link.erroredUploads') }}
-        </router-link>
+        </Button>
       </template>
       <template v-else>
-        <div class="ui inline right floated active loader" />
+        <Loader />
         <h3 class="ui header">
           {{ t('views.channels.DetailOverview.header.uploadsProcessing') }}
         </h3>
@@ -143,15 +149,7 @@ const albumModal = ref()
           {{ t('views.channels.DetailOverview.meta.progress', {finished: processedUploads.length, total: pendingUploads.length}) }}
         </p>
       </template>
-    </div>
+    </Alert>
-    <div v-if="store.getters['ui/layoutVersion'] === 'small'">
-      <rendered-description
-        :content="object.artist?.description"
-        :update-url="`channels/${object.uuid}/`"
-        :can-update="false"
-      />
-      <div class="ui hidden divider" />
-    </div>
     <channel-entries
       :key="String(episodesKey) + 'entries'"
       :is-podcast="isPodcast"
@@ -172,7 +170,7 @@ const albumModal = ref()
         </span>
       </h2>
     </channel-entries>
-    <div class="ui hidden divider" />
+    <Spacer />
     <channel-series
       :key="String(seriesKey) + 'series'"
       :filters="seriesFilters"