[WIP] refactor(front): favorites page

front/src/components/audio/track/Row.vue

@@ -219,7 +219,3 @@ const hover = ref(false)
     </div>
   </div>
 </template>
-
-<style scoped>
-
-</style>

front/src/components/favorites/List.vue

@@ -13,11 +13,9 @@ import axios from 'axios'
 
 import TrackTable from '~/components/audio/track/Table.vue'
 import RadioButton from '~/components/radios/Button.vue'
-import Pagination from '~/components/ui/Pagination.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Section from '~/components/ui/Section.vue'
 import Spacer from '~/components/ui/Spacer.vue'
-import Button from '~/components/ui/Button.vue'
 import Link from '~/components/ui/Link.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Loader from '~/components/ui/Loader.vue'
@@ -113,24 +111,15 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
     v-title="labels.title"
   >
     <Spacer/>
-    <Section
-      no-items
-      v-if="results"
-      :h1="t('components.favorites.List.title', store.state.favorites.count)"
-    >
+    <Layout flex v-if="results">
+      <h1>{{ t('components.favorites.List.title', store.state.favorites.count) }}</h1>
+      <Spacer h grow />
       <RadioButton
         v-if="store.state.favorites.count > 0"
         type="favorites"
       />
-    </Section>
-    <section class="center">
-      <div :class="['ui', { 'active': isLoading }, 'inverted', 'dimmer']">
-        <div v-if="isLoading" class="ui text loader">
-          {{ t('components.favorites.List.loader.loading') }}
-        </div>
-        <Loader v-if="isLoading"/>
-      </div>
-    </section>
+    </Layout>
+    <Loader v-if="isLoading"/>
     <Layout
       v-if="store.state.favorites.count > 0"
       form
@@ -187,12 +176,6 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         :show-album="true"
         :tracks="results"
       />
-      <Spacer grow />
-      <Pagination
-        v-if="result && result.count > paginateBy"
-        :page="page"
-        :pages="Math.ceil((result?.results.length || 0)/paginateBy)"
-      />
     </Layout>
     <Alert blue style="text-align: center;"
       v-else