refactor(front): Radio detail, radio cards and radio page

front/src/components/library/Radios.vue

@@ -113,11 +113,9 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
 </script>
 
 <template>
-  <Layout main stack>
+  <Layout main stack gap-64>
     <Header :h1="t('components.library.Radios.header.browse')" />
     <Section alignLeft :h2="t('components.library.Radios.header.instance')">
-    </Section>
-        <Layout flex>
         <radio-card
           v-if="isAuthenticated"
           :type="'actor-content'"
@@ -144,9 +142,16 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           v-if="store.state.auth.authenticated && scope === 'me'"
           :type="'less-listened_library'"
         />
-      </Layout>
+    </Section>
-      <Spacer />
+    <Section
-      <Section alignLeft :h2="t('components.library.Radios.header.user')" :action="{ text:t('components.library.Radios.button.create'), to:'/library/radios/build' }" />
+      alignLeft
+      no-items
+      solid
+      primary
+      icon="bi-plus"
+      :h2="t('components.library.Radios.header.user')"
+      :action="{ text:t('components.library.Radios.button.create'), to:'/library/radios/build' }"
+    />
     <Layout flex form
       :class="['ui', {'loading': isLoading}, 'form']"
       @submit.prevent="search"
@@ -231,9 +236,8 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         {{ t('components.library.Radios.button.add') }}
       </Button>
     </Alert>
-      <div
+    <Layout flex
       v-if="result && result.results.length > 0"
-        class="ui cards"
     >
       <Pagination
         v-if="result && result.count > paginateBy"
@@ -251,6 +255,6 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         v-model:page="page"
         :pages="Math.ceil(result.count / paginateBy)"
       />
-      </div>
+    </Layout>
   </Layout>
 </template>

front/src/components/radios/Card.vue

@@ -39,6 +39,7 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
   <Card
     v-if="radio.id"
     small
+    blue
     :title="radio.name"
     :to="{name: 'library.radios.detail', params: {id: radio.id}}"
   >
@@ -82,19 +83,20 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
   <Card
     v-else
     small
+    solid
+    blue
+    icon="bi-boombox-fill"
     :title="radio.name"
   >
-    <template #topright>
-    </template>
 
-    <template #default>
+    <template #default style="background-color: red;">
       <user-link
         v-if="radio.user"
         discrete
         :user="radio.user"
         :avatar="false"
       />
-      <Spacer />
+      <Spacer v-if="radio.user" />
       <div
         class="description"
         :class="{expanded: isDescriptionExpanded}"

front/src/views/radios/Detail.vue

@@ -10,7 +10,13 @@ import axios from 'axios'
 
 import TrackTable from '~/components/audio/track/Table.vue'
 import RadioButton from '~/components/radios/Button.vue'
-import Pagination from '~/components/vui/Pagination.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Header from '~/components/ui/Header.vue'
+import Section from '~/components/ui/Section.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Button from '~/components/ui/Button.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -66,47 +72,36 @@ const deleteRadio = async () => {
 </script>
 
 <template>
-  <main>
+  <Layout stack main>
-    <div
+    <Loader
       v-if="isLoading"
       v-title="labels.title"
-      class="ui vertical segment"
+    />
-    >
+    <Header
-      <div :class="['ui', 'centered', 'active', 'inline', 'loader']" />
-    </div>
-    <section
       v-if="!isLoading && radio"
       v-title="radio.name"
-      class="ui head vertical center aligned stripe segment"
+      :h1="radio.name"
-    >
-      <div class="segment-content">
-        <h2 class="ui center aligned icon header">
-          <i class="circular inverted feed primary icon" />
-          <div class="content">
-            {{ radio.name }}
-            <div class="sub header">
-              {{ t('views.radios.Detail.header.radio', {tracks: totalTracks}) }}<username :username="radio.user.username" />
-            </div>
-          </div>
-        </h2>
-        <div class="ui hidden divider" />
-        <radio-button
-          type="custom"
-          :custom-radio-id="radio.id"
     />
-        <template v-if="store.state.auth.username === radio.user.username">
+    <h2 class="sub header">
-          <router-link
+      {{ t('views.radios.Detail.header.radio', {tracks: totalTracks}) }}<username :username="radio?.user.username" />
-            class="ui icon labeled button"
+    </h2>
-            :to="{name: 'library.radios.edit', params: {id: radio.id}}"
+    <Layout flex>
+      <radio-button
+        :custom-radio-id="radio?.id"
+      />
+      <template v-if="store.state.auth.username === radio?.user.username">
+        <Button
+          icon="bi-pencil"
+          secondary
+          :to="{name: 'library.radios.edit', params: {id: radio?.id}}"
         >
-            <i class="pencil icon" />
           {{ t('views.radios.Detail.button.edit') }}
-          </router-link>
+        </Button>
         <dangerous-button
           class="ui labeled danger icon button"
           :action="deleteRadio"
         >
-            <i class="trash icon" /> {{ t('views.radios.Detail.button.delete') }}
+          <i class="bi bi-trash" /> {{ t('views.radios.Detail.button.delete') }}
           <template #modal-header>
             <p>
               {{ t('views.radios.Detail.modal.delete.header', {radio: radio.name}) }}
@@ -124,41 +119,36 @@ const deleteRadio = async () => {
           </template>
         </dangerous-button>
       </template>
-      </div>
+    </Layout>
-    </section>
+    <Section
-    <section
       v-if="totalTracks > 0"
-      class="ui vertical stripe segment"
+      :h2="t('views.radios.Detail.header.tracks')"
     >
-      <h2>
-        {{ t('views.radios.Detail.header.tracks') }}
-      </h2>
       <track-table :tracks="tracks" />
-      <div class="ui center aligned basic segment">
+        <Pagination
-        <pagination
           v-if="totalTracks > 25"
           v-model:current="page"
           :paginate-by="25"
           :total="totalTracks"
         />
-      </div>
+    </Section>
-    </section>
+    <Alert
-    <div
+      blue
       v-else-if="!isLoading && totalTracks === 0"
-      class="ui placeholder segment"
     >
-      <div class="ui icon header">
+      <Layout stack style="text-align: center;">
-        <i class="rss icon" />
+        <i class="bi bi-broadcast-pin" style="font-size: 5em;" />
         {{ t('views.radios.Detail.empty.noTracks') }}
-      </div>
+        <Button
-      <router-link
           v-if="store.state.auth.username === radio?.user.username"
-        class="ui success icon labeled button"
+          primary
+          icon="bi-pencil"
+          style="align-self: center;"
           :to="{name: 'library.radios.edit', params: { id: radio?.id }}"
         >
-        <i class="pencil icon" />
           {{ t('views.radios.Detail.button.edit') }}
-      </router-link>
+        </Button>
-    </div>
+      </Layout>
-  </main>
+    </Alert>
+  </Layout>
 </template>