fix(front): consistent widget display without duplicate results

front/src/components/album/Widget.vue

@@ -3,8 +3,6 @@ import type { Album } from '~/types'
 
 import { reactive, ref, watch } from 'vue'
 import { useStore } from '~/store'
-import { useI18n } from 'vue-i18n'
-
 
 import axios from 'axios'
 
@@ -17,8 +15,6 @@ import Loader from '~/components/ui/Loader.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 
 
-const { t } = useI18n()
-
 interface Props {
   filters: Record<string, string | boolean>
   showCount?: boolean
@@ -56,7 +52,7 @@ const fetchData = async (url = 'albums/') => {
     const response = await axios.get(url, { params })
     nextPage.value = response.data.next
     count.value = response.data.count
-    albums.push(...response.data.results)
+    albums.splice(0, albums.length, ...response.data.results)
   } catch (error) {
     useErrorHandler(error as Error)
   }

front/src/components/audio/ChannelsWidget.vue

@@ -59,7 +59,7 @@ const fetchData = async (url = 'channels/') => {
 }
 
 onMounted(() => {
-  setTimeout(fetchData, 1000)
+  fetchData()
 })
 
 watch([() => props.filters, page],
@@ -71,16 +71,17 @@ watch([() => props.filters, page],
 <template>
   <Section
     align-left
+    small-items
     :h2="title"
   >
     <Loader v-if="isLoading" style="grid-column: 1 / -1;" />
     <template
       v-if="!isLoading && channels.length === 0"
-      style="grid-column: 1 / -1;"
     >
       <empty-state
         :refresh="true"
         @refresh="fetchData('channels/')"
+        style="grid-column: 1 / -1;"
       />
     </template>
     <channel-card
@@ -92,6 +93,7 @@ watch([() => props.filters, page],
       v-if="channels && count > limit"
       v-model:page="page"
       :pages="Math.ceil((count || 0) / limit)"
+      style="grid-column: 1 / -1;"
     />
   </Section>
 </template>

front/src/components/library/Home.vue

@@ -70,12 +70,10 @@ fetchData()
   <playlist-widget
     :url="'playlists/'"
     :filters="{scope: scope, playable: true, ordering: '-modification_date'}"
-  >
-    <template #title>
-      {{ t('components.library.Home.header.playlists') }}
-    </template>
-  </playlist-widget>
-
+    :title="t('components.library.Home.header.playlists')"
+    :limit="12"
+  />
+  <Spacer />
   <channels-widget
     v-if="scope === 'all'"
     :show-modification-date="true"
@@ -83,24 +81,24 @@ fetchData()
     :limit="8"
     :title="t('components.library.Home.header.newChannels')"
   />
-
+  <Spacer />
   <track-widget
     :title="t('components.library.Home.header.recentlyListened')"
     :url="'history/listenings/'"
     :filters="{ scope, ordering: '-creation_date', ...qualityFilters }"
     :websocket-handlers="['Listen']"
   />
-
+  <Spacer />
   <track-widget
     :title="t('components.library.Home.header.recentlyFavorited')"
     :url="'favorites/tracks/'"
     :filters="{scope: scope, ordering: '-creation_date'}"
   />
-
-  <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}">
-    <template #title>
-      {{ t('components.library.Home.header.recentlyAdded') }}
-    </template>
-  </album-widget>
+  <Spacer />
+  <album-widget
+    :filters="{scope: scope, playable: true, ordering: '-creation_date', ...qualityFilters}"
+    :limit="12"
+    :title="t('components.library.Home.header.recentlyAdded')"
+  />
   </Layout>
 </template>

front/src/components/playlists/Widget.vue

@@ -51,7 +51,7 @@ const fetchData = async (url = props.url) => {
     const response = await axios.get(url, { params })
     nextPage.value = response.data.next
     count.value = response.data.count
-    objects.push(...response.data.results)
+    objects.splice(0, objects.length, ...response.data.results)
   } catch (error) {
     useErrorHandler(error as Error)
   }
@@ -59,7 +59,7 @@ const fetchData = async (url = props.url) => {
   isLoading.value = false
 }
 
-setTimeout(fetchData, 1000)
+fetchData()
 
 watch(
   [() => store.state.moderation.lastUpdate, page],
@@ -71,9 +71,10 @@ watch(
 <template>
   <Section
     align-left
+    small-items
     :h2="title"
   >
-    <Loader v-if="isLoading"/>
+    <Loader v-if="isLoading" style="grid-column: 1 / -1;" />
     <Alert
       v-if="!isLoading && objects.length === 0"
       style="grid-column: 1 / -1;"
@@ -102,8 +103,8 @@ watch(
     />
   </Section>
   <Pagination
-    v-if="objects && count > props.filters.limit"
+    v-if="objects && count > (props.filters.limit as number)"
     v-model:page="page"
-    :pages="Math.ceil((count || 0) / props.filters.limit)"
+    :pages="Math.ceil((count || 0) / (props.filters.limit as number))"
   />
 </template>