fix(front): make favorites work again

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

@@ -201,7 +201,7 @@ const hover = ref(false)
       class="meta right floated column"
     >
       <human-duration
-        v-if="showDuration && track.uploads[0] && track.uploads[0].duration"
+        v-if="showDuration && track.uploads && track.uploads.length > 0 && track.uploads[0].duration"
         :duration="track.uploads[0].duration"
       />
     </div>

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

@@ -274,5 +274,6 @@ const updatePage = (page: number) => {
 <style scoped>
   [table-header] > label {
     padding-left: 4px;
+    align-self: center !important;
   }
 </style>

front/src/components/favorites/List.vue

@@ -18,6 +18,7 @@ import Header from '~/components/ui/Header.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Link from '~/components/ui/Link.vue'
 import Alert from '~/components/ui/Alert.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 import Loader from '~/components/ui/Loader.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
@@ -62,15 +63,15 @@ const fetchFavorites = async () => {
   isLoading.value = true
 
   const params = {
-    favorites: 'true',
     page: page.value,
     page_size: paginateBy.value,
-    ordering: orderingString.value
+    ordering: orderingString.value,
+    scope: store.state.auth.fullUsername
   }
 
   const measureLoading = logger.time('Loading user favorites')
   try {
-    const response = await axios.get('tracks/', { params })
+    const response = await axios.get('favorites/tracks/', { params })
 
     results.length = 0
     results.push(...response.data.results)
@@ -90,8 +91,14 @@ const fetchFavorites = async () => {
   }
 }
 
-watch(page, fetchFavorites)
-fetchFavorites()
+onMounted(() => {
+  fetchFavorites()
+})
+
+watch([() => paginateBy, page],
+  () => fetchFavorites(),
+  { deep: true }
+)
 
 onOrderingUpdate(() => {
   page.value = 1
@@ -107,12 +114,8 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
 </script>
 
 <template>
-  <Layout
+  <Layout main stack no-gap align-left
     v-title="labels.title"
-    main
-    stack
-    no-gap
-    align-left
   >
     <Header :h1="labels.title">
       <template #action>
@@ -123,7 +126,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       </template>
     </Header>
 
-    <Loader v-if="isLoading" />
+    <Loader v-if="isLoading"/>
     <Layout
       v-if="store.state.favorites.count > 0"
       form
@@ -131,16 +134,8 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       :class="['ui', { 'loading': isLoading }, 'form']"
     >
       <Spacer :size="16" />
-      <Layout
-        flex
-        style="justify-content: flex-end;"
-      >
-        <Layout
-          stack
-          no-gap
-          label
-          for="favorites-ordering"
-        >
+      <Layout flex style="justify-content: flex-end;">
+        <Layout stack noGap label for="favorites-ordering">
           <span class="label">
             {{ t('components.favorites.List.ordering.label') }}
           </span>
@@ -158,12 +153,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             </option>
           </select>
         </Layout>
-        <Layout
-          stack
-          no-gap
-          label
-          for="favorites-ordering-direction"
-        >
+        <Layout stack noGap label for="favorites-ordering-direction">
           <span class="label">
             {{ t('components.favorites.List.ordering.direction.label') }}
           </span>
@@ -180,12 +170,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
             </option>
           </select>
         </Layout>
-        <Layout
-          stack
-          no-gap
-          label
-          for="favorites-results"
-        >
+        <Layout stack noGap label for="favorites-results">
           <span class="label">
             {{ t('components.favorites.List.pagination.results') }}
           </span>
@@ -204,6 +189,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
           </select>
         </Layout>
       </Layout>
+      <Pagination
+        v-if="results && count > paginateBy"
+        v-model:page="page"
+        :pages="Math.ceil((count || 0) / paginateBy)"
+        style="grid-column: 1 / -1;"
+      />
       <TrackTable
         v-if="results"
         :search="true"
@@ -212,18 +203,13 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         :tracks="results"
       />
     </Layout>
-    <Alert
-      v-else
-      blue
-      align-items="center"
+    <Alert blue align-items="center"
+      v-else-if="!isLoading"
     >
-      <i
-        class="bi bi-heartbreak-fill"
-        style="font-size: 100px;"
-      />
+      <i class="bi bi-heartbreak-fill" style="font-size: 100px;" />
       <Spacer />
       {{ t('components.favorites.List.empty.noFavorites') }}
-      <Spacer :size="32" />
+      <Spacer :size="32"/>
       <Link
         to="/library"
         solid