refactor(front): Albums in channels

front/src/components/audio/album/Card.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { Album } from '~/types'
 
+import AlbumCard from '~/components/album/Card.vue'
+
 interface Props {
   album: Album
 }
@@ -10,6 +12,5 @@ defineProps<Props>()
 </script>
 
 <template>
-  front/src/components/audio/album/Card.vue
+  <AlbumCard :album="album" />
-  <fw-album-card :album="album" />
 </template>

front/src/components/channels/AlbumForm.vue

@@ -5,6 +5,10 @@ import { computed, watch, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 
+import Layout from '~/components/ui/Layout.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Input from '~/components/ui/Input.vue'
+
 interface Events {
   (e: 'submittable', value: boolean): void
   (e: 'loading', value: boolean): void
@@ -52,14 +56,13 @@ defineExpose({
 </script>
 
 <template>
-  <form
+  <Layout form
     :class="['ui', {loading: isLoading}, 'form']"
     @submit.stop.prevent
   >
-    <div
+    <Alert
       v-if="errors.length > 0"
-      role="alert"
+      red
-      class="ui negative message"
     >
       <h4 class="header">
         {{ t('components.channels.AlbumForm.header.error') }}
@@ -72,15 +75,15 @@ defineExpose({
           {{ error }}
         </li>
       </ul>
-    </div>
+    </Alert>
     <div class="ui required field">
       <label for="album-title">
         {{ t('components.channels.AlbumForm.label.albumTitle') }}
       </label>
-      <input
+      <Input
         v-model="title"
         type="text"
-      >
+      />
     </div>
-  </form>
+  </Layout>
 </template>

front/src/components/channels/AlbumModal.vue

@@ -53,10 +53,10 @@ defineExpose({
       />
     </div>
     <template #actions>
-      <Spacer h grow />
       <Button
         :is-loading="isLoading"
         :disabled="!submittable"
+        primary
         @click.stop.prevent="albumForm.submit()"
       >
         {{ t('components.channels.AlbumModal.button.create') }}

front/src/composables/moderation/useEditConfigs.ts

@@ -1,4 +1,4 @@
-import type { Album, Content, Track, Actor } from '~/types'
+import type { Album, Track, Actor } from '~/types'
 
 import { i18n } from '~/init/locale'
 
@@ -20,21 +20,10 @@ export type EditObject = (Partial<Album> | Partial<Track>) & { attributed_to: Ac
 export type EditObjectType = 'album' | 'track'
 type Configs = Record<EditObjectType, { fields: (EditableConfigField|ConfigField)[] }>
 
-const getContentValueRepr = (val: Content) => val.text
-
 // TODO: Get params from typescript type somehow?
 export default (): Configs => {
   const { t } = i18n.global
 
-  const description: ConfigField = {
-    id: 'description',
-    type: 'content',
-    required: true,
-    label: t('composables.moderation.useEditConfigs.description.label'),
-    getValue: (obj) => obj.description ?? { text: '', content_type: 'text/markdown' },
-    getValueRepr: getContentValueRepr
-  }
-
   const cover: ConfigField = {
     id: 'cover',
     type: 'attachment',
@@ -66,9 +55,9 @@ export default (): Configs => {
           label: t('composables.moderation.useEditConfigs.album.title'),
           getValue: (album) => (album as Album).title
         },
-        description,
         {
           id: 'release_date',
+          // TODO: Change type to date and offer date select input in form
           type: 'text',
           required: false,
           label: t('composables.moderation.useEditConfigs.album.releaseDate'),
@@ -87,7 +76,6 @@ export default (): Configs => {
           label: t('composables.moderation.useEditConfigs.track.title'),
           getValue: (track) => (track as Track).title
         },
-        description,
         cover,
         {
           id: 'position',

front/src/views/channels/DetailOverview.vue

@@ -192,7 +192,7 @@ const albumModal = ref()
           class="actions"
         >
           <a @click.stop.prevent="albumModal.show = true">
-            <i class="plus icon" />
+            <i class="bi bi-plus" />
             {{ t('views.channels.DetailOverview.link.addAlbum') }}
           </a>
         </div>