Fix composables calling `useI18n` too early

front/src/composables/audio/usePlayOptions.ts

@@ -49,12 +49,12 @@ export default (props: PlayOptionsProps) => {
   const filterableArtist = computed(() => props.track?.artist ?? props.album?.artist ?? props.artist)
   const filterArtist = async () => store.dispatch('moderation/hide', { type: 'artist', target: filterableArtist.value })
 
-  const { t } = useI18n()
   const addMessage = (tracks: Track[]) => {
     if (!tracks.length) {
       return
     }
 
+    const { t } = useI18n()
     store.commit('ui/addMessage', {
       content: t('composables.audio.usePlayOptions.addToQueueMessage', tracks.length),
       date: new Date()

front/src/composables/moderation/useEditConfigs.ts

@@ -20,37 +20,39 @@ export type EditObject = (Partial<Artist> | Partial<Album> | Partial<Track>) & {
 export type EditObjectType = 'artist' | 'album' | 'track'
 type Configs = Record<EditObjectType, { fields: (EditableConfigField|ConfigField)[] }>
 
-const { t } = useI18n()
 const getContentValueRepr = (val: Content) => val.text
 
-const description: ConfigField = {
+// TODO: Get params from typescript type somehow?
+export default (): Configs => {
+  const { t } = useI18n()
+
+  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 = {
+  const cover: ConfigField = {
     id: 'cover',
     type: 'attachment',
     required: false,
     label: t('composables.moderation.useEditConfigs.cover.label'),
     getValue: (obj) => obj.cover?.uuid ?? null
-}
+  }
 
-const tags: ConfigField = {
+  const tags: ConfigField = {
     id: 'tags',
     type: 'tags',
     required: true,
     label: t('composables.moderation.useEditConfigs.tags.label'),
     getValue: (obj) => { return obj.tags },
     getValueRepr: (tags: string[]) => tags.slice().sort().join('\n')
-}
+  }
 
-// TODO: Get params from typescript type somehow?
+  return {
-export default (): Configs => ({
     artist: {
       fields: [
         {
@@ -122,4 +124,5 @@ export default (): Configs => ({
         tags
       ]
     }
-})
+  }
+}

front/src/composables/moderation/useReportConfigs.ts

@@ -22,35 +22,36 @@ export interface Entity {
 
 type Configs = Record<EntityObjectType, Entity>
 
-const { t } = useI18n()
+export default (): Configs => {
+  const { t } = useI18n()
 
-const tags: ModeratedField = {
+  const tags: ModeratedField = {
     id: 'tags',
     label: t('composables.moderation.useReportConfigs.tags.label'),
     getValueRepr: (tags: string[]) => tags.slice().sort().join('\n')
-}
+  }
 
-const name: ModeratedField = {
+  const name: ModeratedField = {
     id: 'name',
     label: t('composables.moderation.useReportConfigs.name.label')
-}
+  }
 
-const creationDate: ModeratedField = {
+  const creationDate: ModeratedField = {
     id: 'creation_date',
     label: t('composables.moderation.useReportConfigs.creationDate.label')
-}
+  }
 
-const musicBrainzId: ModeratedField = {
+  const musicBrainzId: ModeratedField = {
     id: 'mbid',
     label: t('composables.moderation.useReportConfigs.musicbrainzId.label')
-}
+  }
 
-const visibility: ModeratedField = {
+  const visibility: ModeratedField = {
     id: 'privacy_level',
     label: t('composables.moderation.useReportConfigs.visibility.label')
-}
+  }
 
-export default (): Configs => ({
+  return {
     artist: {
       label: t('composables.moderation.useReportConfigs.artist.label'),
       icon: 'users',
@@ -181,4 +182,5 @@ export default (): Configs => ({
         tags
       ]
     }
-})
+  }
+}