feat(ui): [WIP] Artist page

front/src/components/library/Artists.vue

@@ -22,6 +22,8 @@ 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 Toggle from '~/components/ui/Toggle.vue'
+import Alert from '~/components/ui/Alert.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -128,12 +130,10 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       <h2>
         {{ t('components.library.Artists.header.browse') }}
       </h2>
-      <form
+      <Layout form flex
         :class="['ui', {'loading': isLoading}, 'form']"
         @submit.prevent="search"
       >
-        <div class="fields">
-          <div class="field">
         <Input search
           id="artist-search"
           v-model="query"
@@ -143,15 +143,13 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           :placeholder="labels.searchPlaceholder"
         >
         </Input>
-          </div>
+        <Input
-          <div class="field">
+          v-model="tags"
-            <label for="tags-search">{{ t('components.library.Artists.label.tags') }}</label>
+          :label="t('components.library.Artists.label.tags')"
-            <tags-selector v-model="tags" />
+        />
-          </div>
-          <div class="field">
-            <label for="artist-ordering">{{ t('components.library.Artists.ordering.label') }}</label>
         <select
           id="artist-ordering"
+          :label="t('components.library.Artists.ordering.label')"
           v-model="ordering"
           class="ui dropdown"
         >
@@ -163,10 +161,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
             {{ sharedLabels.filters[option[1]] }}
           </option>
         </select>
-          </div>
-          <div class="field">
-            <label for="artist-ordering-direction">{{ t('components.library.Artists.ordering.direction.label') }}</label>
         <select
+          :label="t('components.library.Artists.ordering.direction.label')"
           id="artist-ordering-direction"
           v-model="orderingDirection"
           class="ui dropdown"
@@ -178,10 +174,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
             {{ t('components.library.Artists.ordering.direction.descending') }}
           </option>
         </select>
-          </div>
-          <div class="field">
-            <label for="artist-results">{{ t('components.library.Artists.pagination.results') }}</label>
         <select
+          :label="t('components.library.Artists.pagination.results')"
           id="artist-results"
           v-model="paginateBy"
           class="ui dropdown"
@@ -194,29 +188,15 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
             {{ opt }}
           </option>
         </select>
-          </div>
+        <Toggle
-          <div class="field">
+          :label="t('components.library.Artists.label.excludeCompilation')"
-            <span id="excludeHeader">{{ t('components.library.Artists.label.excludeCompilation') }}</span>
-            <div
-              id="excludeCompilation"
-              class="ui toggle checkbox"
-            >
-              <Input
           id="exclude-compilation"
           v-model="excludeCompilation"
           true-value="true"
           false-value="null"
           type="checkbox"
         />
-              <label
+      </Layout>
-                for="exclude-compilation"
-                class="visually-hidden"
-              >{{ t('components.library.Artists.label.excludeCompilation') }}</label>
-            </div>
-          </div>
-        </div>
-      </form>
-      <div class="ui hidden divider" />
       <div
         v-if="result && result.results.length > 0"
         style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
@@ -227,21 +207,19 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         >
           <div class="ui loader" />
         </div>
-        <artist-card
+        <ArtistCard
           v-for="artist in result.results"
           :key="artist.id"
           :artist="artist"
         />
       </div>
-      <div
+      <Layout stack
         v-else-if="!isLoading"
-        class="ui placeholder segment sixteen wide column"
-        style="text-align: center; display: flex; align-items: center"
       >
-        <div class="ui icon header">
+        <Alert yellow>
           <i class="compact disc icon" />
           {{ t('components.library.Artists.empty.noResults') }}
-        </div>
+        </Alert>
         <router-link
           v-if="store.state.auth.authenticated"
           :to="{name: 'content.index'}"
@@ -250,7 +228,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           <i class="upload icon" />
           {{ t('components.library.Artists.button.upload') }}
         </router-link>
-      </div>
+      </Layout>
       <div class="ui center aligned basic segment">
         <pagination
           v-if="result && result.count > paginateBy"