fix(style): [WIP] pagination in artist page

front/src/components/library/Artists.vue

@@ -13,10 +13,9 @@ import { sortedUniq } from 'lodash-es'
 import { useStore } from '~/store'
 
 import axios from 'axios'
-import $ from 'jquery'
 
 import TagsSelector from '~/components/library/TagsSelector.vue'
-import Pagination from '~/components/vui/Pagination.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 import Link from '~/components/ui/Link.vue'
 import Card from '~/components/ui/Card.vue'
 import Layout from '~/components/ui/Layout.vue'
@@ -197,7 +196,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           type="checkbox"
         />
       </Layout>
-      <div
+      <Layout grid
         v-if="result && result.results.length > 0"
         style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
       >
@@ -212,7 +211,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           :key="artist.id"
           :artist="artist"
         />
-      </div>
+      </Layout>
       <Layout stack
         v-else-if="!isLoading"
       >
@@ -220,22 +219,25 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           <i class="compact disc icon" />
           {{ t('components.library.Artists.empty.noResults') }}
         </Alert>
-        <router-link
+        <Card
           v-if="store.state.auth.authenticated"
+          :title="t('components.library.Artists.button.upload')"
+          solid
+          small
+          primary
           :to="{name: 'content.index'}"
-          class="ui success button labeled icon"
         >
-          <i class="upload icon" />
+          <template #image>
-          {{ t('components.library.Artists.button.upload') }}
+            <i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
-        </router-link>
+          </template>
+        </Card>
       </Layout>
-      <div class="ui center aligned basic segment">
+      <Spacer grow />
-        <pagination
+        <Pagination
-          v-if="result && result.count > paginateBy"
           v-model:current="page"
           :paginate-by="paginateBy"
-          :total="result.count"
+          :page="page"
+          :pages="result?.results.count"
         />
-      </div>
     </Layout>
 </template>