feat(ui): WIP Artist Page

front/src/components/artist/Card.vue

@@ -5,6 +5,7 @@ import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
 
 import TagsList from '~/components/tags/List.vue'
+import Card from '~/components/ui/Card.vue'
 
 import type { Artist } from '~/types'
 
@@ -43,7 +44,7 @@ const imageUrl = computed(() => cover.value?.urls.original
 <template>
   <span style="position:absolute; font-size:.7em">/front/src/components/artist/Card.vue</span>
 
-  <fw-card
+  <Card
     :title="artist.name"
     :image="imageUrl"
     :tags="artist.tags"
@@ -75,7 +76,7 @@ const imageUrl = computed(() => cover.value?.urls.original
       Go to artist
     </router-link>
 
-  </fw-card>
+  </Card>
 </template>
 
 <style scoped>

front/src/components/library/Artists.vue

@@ -17,7 +17,11 @@ import $ from 'jquery'
 
 import TagsSelector from '~/components/library/TagsSelector.vue'
 import Pagination from '~/components/vui/Pagination.vue'
+import Link from '~/components/ui/Link.vue'
+import Card from '~/components/ui/Card.vue'
+import Layout from '~/components/ui/Layout.vue'
 import Button from '~/components/ui/Button.vue'
+import Input from '~/components/ui/Input.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -108,7 +112,7 @@ onOrderingUpdate(() => {
   fetchData()
 })
 
-onMounted(() => $('.ui.dropdown').dropdown())
+// onMounted(() => $('.ui.dropdown').dropdown())
 
 const { t } = useI18n()
 const labels = computed(() => ({
@@ -120,10 +124,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
 </script>
 
 <template>
-  <main v-title="labels.title">
-    <section class="ui vertical stripe segment">
-    /front/src/components/library/Artists.vue
-      <h2 class="ui header">
+    <Layout stack main v-title="labels.title">
+      <h2>
         {{ t('components.library.Artists.header.browse') }}
       </h2>
       <form
@@ -136,19 +138,25 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
               {{ t('components.library.Artists.label.search') }}
             </label>
             <div class="ui action input">
-              <input
+              <Input
                 id="artist-search"
                 v-model="query"
                 type="text"
                 name="search"
+                autofocus
                 :placeholder="labels.searchPlaceholder"
               >
-              <Button
-                type="submit"
-                icon="bi-search"
-                :aria-label="t('components.library.Artists.button.search')"
-              >
-              </Button>
+                <template #input-right>
+                  <Button
+                    type="submit"
+                    auto
+                    primary
+                    icon="bi-search"
+                    :aria-label="t('components.library.Artists.button.search')"
+                  >
+                  </Button>
+                </template>
+              </Input>
             </div>
           </div>
           <div class="field">
@@ -208,13 +216,13 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
               id="excludeCompilation"
               class="ui toggle checkbox"
             >
-              <input
+              <Input
                 id="exclude-compilation"
                 v-model="excludeCompilation"
                 true-value="true"
                 false-value="null"
                 type="checkbox"
-              >
+              />
               <label
                 for="exclude-compilation"
                 class="visually-hidden"
@@ -266,6 +274,5 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           :total="result.count"
         />
       </div>
-    </section>
-  </main>
+    </Layout>
 </template>