From 16d437be62983d9db39ff76e00bcb3a4cdcd569b Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Sun, 1 May 2022 18:46:27 +0200
Subject: [PATCH] Migrate Translations mixin to useSharedLabels composable

---
 front/src/components/audio/track/Modal.vue    |   2 +-
 front/src/components/auth/ApplicationForm.vue |   7 +-
 front/src/components/auth/Authorize.vue       |   8 +-
 front/src/components/auth/Settings.vue        |   7 +-
 front/src/components/common/ContentForm.vue   |  12 +-
 front/src/components/common/UserModal.vue     |   2 +-
 front/src/components/favorites/List.vue       |   8 +-
 front/src/components/library/Albums.vue       |   8 +-
 front/src/components/library/Artists.vue      |   8 +-
 front/src/components/library/EditForm.vue     |   9 +-
 front/src/components/library/FsBrowser.vue    |  57 +++----
 front/src/components/library/Podcasts.vue     |   8 +-
 front/src/components/library/Radios.vue       |   8 +-
 front/src/components/library/TagsSelector.vue |   8 +-
 front/src/components/manage/ChannelsTable.vue |   8 +-
 .../components/manage/library/AlbumsTable.vue |   8 +-
 .../manage/library/ArtistsTable.vue           |   8 +-
 .../manage/library/EditsCardList.vue          |   8 +-
 .../manage/library/LibrariesTable.vue         |   8 +-
 .../components/manage/library/TagsTable.vue   |   7 +-
 .../components/manage/library/TracksTable.vue |   8 +-
 .../manage/library/UploadsTable.vue           |   7 +-
 .../manage/moderation/AccountsTable.vue       |   8 +-
 .../manage/moderation/DomainsTable.vue        |   8 +-
 .../manage/moderation/ReportCard.vue          |   4 +-
 .../manage/users/InvitationsTable.vue         |   8 +-
 .../components/manage/users/UsersTable.vue    |   8 +-
 front/src/components/mixins/Translations.vue  | 148 ------------------
 .../moderation/ReportCategoryDropdown.vue     | 104 ++++++------
 front/src/components/playlists/Form.vue       |   7 +-
 front/src/composables/useSharedLabels.ts      | 144 +++++++++++++++++
 front/src/main.ts                             |   4 +-
 front/src/types.ts                            |  11 ++
 .../src/views/admin/library/LibraryDetail.vue |  10 +-
 .../src/views/admin/library/UploadDetail.vue  |   8 +-
 .../views/admin/moderation/ReportsList.vue    |  12 +-
 .../views/admin/moderation/RequestsList.vue   |   8 +-
 front/src/views/content/libraries/Card.vue    |   6 +-
 .../views/content/libraries/FilesTable.vue    |   7 +-
 front/src/views/content/libraries/Form.vue    |   7 +-
 front/src/views/playlists/List.vue            |   8 +-
 41 files changed, 421 insertions(+), 313 deletions(-)
 delete mode 100644 front/src/components/mixins/Translations.vue
 create mode 100644 front/src/composables/useSharedLabels.ts

diff --git a/front/src/components/audio/track/Modal.vue b/front/src/components/audio/track/Modal.vue
index 56228500b..cb18978d1 100644
--- a/front/src/components/audio/track/Modal.vue
+++ b/front/src/components/audio/track/Modal.vue
@@ -228,7 +228,7 @@
 import Modal from '~/components/semantic/Modal.vue'
 import ReportMixin from '~/components/mixins/Report.vue'
 import PlayOptionsMixin from '~/components/mixins/PlayOptions.vue'
-import { useVModel } from '@vueuse/core/index'
+import { useVModel } from '@vueuse/core'
 
 export default {
   components: {
diff --git a/front/src/components/auth/ApplicationForm.vue b/front/src/components/auth/ApplicationForm.vue
index 059aa3f53..1269c8cdc 100644
--- a/front/src/components/auth/ApplicationForm.vue
+++ b/front/src/components/auth/ApplicationForm.vue
@@ -121,14 +121,17 @@
 <script>
 import { uniq } from 'lodash-es'
 import axios from 'axios'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
+import useSharedLabels from '../../composables/useSharedLabels'
 
 export default {
-  mixins: [TranslationsMixin],
   props: {
     app: { type: Object, required: false, default: () => { return null } },
     defaults: { type: Object, required: false, default: () => { return {} } }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     const defaults = this.defaults || {}
     const app = this.app || {}
diff --git a/front/src/components/auth/Authorize.vue b/front/src/components/auth/Authorize.vue
index 0d6ba2f72..682ab8b32 100644
--- a/front/src/components/auth/Authorize.vue
+++ b/front/src/components/auth/Authorize.vue
@@ -142,13 +142,11 @@
 </template>
 
 <script>
-import TranslationsMixin from '~/components/mixins/Translations.vue'
-
 import axios from 'axios'
 
 import { checkRedirectToLogin } from '~/utils'
+import useSharedLabels from '../../composables/useSharedLabels'
 export default {
-  mixins: [TranslationsMixin],
   props: {
     clientId: { type: String, required: true },
     redirectUri: { type: String, required: true },
@@ -157,6 +155,10 @@ export default {
     nonce: { type: String, required: true },
     state: { type: String, required: true }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       application: null,
diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index 3196b5bc4..7b07eb5ce 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -717,9 +717,9 @@ import $ from 'jquery'
 import axios from 'axios'
 import PasswordInput from '~/components/forms/PasswordInput.vue'
 import SubsonicTokenForm from '~/components/auth/SubsonicTokenForm.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import AttachmentInput from '~/components/common/AttachmentInput.vue'
 import useLogger from '~/composables/useLogger'
+import useSharedLabels from '../../composables/useSharedLabels'
 
 const logger = useLogger()
 
@@ -729,7 +729,10 @@ export default {
     SubsonicTokenForm,
     AttachmentInput
   },
-  mixins: [TranslationsMixin],
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     const d = {
       // We need to initialize the component with any
diff --git a/front/src/components/common/ContentForm.vue b/front/src/components/common/ContentForm.vue
index 7b6c777f0..d02d95e0a 100644
--- a/front/src/components/common/ContentForm.vue
+++ b/front/src/components/common/ContentForm.vue
@@ -77,7 +77,7 @@ import axios from 'axios'
 
 export default {
   props: {
-    value: { type: String, default: '' },
+    modelValue: { type: String, default: '' },
     fieldId: { type: String, default: 'change-content' },
     placeholder: { type: String, default: null },
     autofocus: { type: Boolean, default: false },
@@ -90,7 +90,7 @@ export default {
     return {
       isPreviewing: false,
       preview: null,
-      newValue: this.value,
+      newValue: this.modelValue,
       isLoadingPreview: false
     }
   },
@@ -101,15 +101,15 @@ export default {
       }
     },
     remainingChars () {
-      return this.charLimit - (this.value || '').length
+      return this.charLimit - (this.modelValue || '').length
     }
   },
   watch: {
     newValue (v) {
       this.preview = null
-      this.$emit('input', v)
+      this.$emit('update:modelValue', v)
     },
-    value: {
+    modelValue: {
       async handler (v) {
         this.preview = null
         this.newValue = v
@@ -120,7 +120,7 @@ export default {
       immediate: true
     },
     async isPreviewing (v) {
-      if (v && !!this.value && this.preview === null && !this.isLoadingPreview) {
+      if (v && !!this.modelValue && this.preview === null && !this.isLoadingPreview) {
         await this.loadPreview()
       }
       if (!v) {
diff --git a/front/src/components/common/UserModal.vue b/front/src/components/common/UserModal.vue
index 9299dd418..fe02c511c 100644
--- a/front/src/components/common/UserModal.vue
+++ b/front/src/components/common/UserModal.vue
@@ -207,7 +207,7 @@ import Modal from '~/components/semantic/Modal.vue'
 import { mapGetters } from 'vuex'
 import useThemeList from '~/composables/useThemeList'
 import useTheme from '~/composables/useTheme'
-import { useVModel } from '@vueuse/core/index'
+import { useVModel } from '@vueuse/core'
 
 export default {
   components: {
diff --git a/front/src/components/favorites/List.vue b/front/src/components/favorites/List.vue
index 47afd9008..0fa36027e 100644
--- a/front/src/components/favorites/List.vue
+++ b/front/src/components/favorites/List.vue
@@ -139,10 +139,10 @@ import RadioButton from '~/components/radios/Button.vue'
 import Pagination from '~/components/Pagination.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import PaginationMixin from '~/components/mixins/Pagination.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import { checkRedirectToLogin } from '~/utils'
 import TrackTable from '~/components/audio/track/Table.vue'
 import useLogger from '~/composables/useLogger'
+import useSharedLabels from '../../composables/useSharedLabels'
 
 const logger = useLogger()
 
@@ -154,7 +154,11 @@ export default {
     Pagination,
     TrackTable
   },
-  mixins: [OrderingMixin, PaginationMixin, TranslationsMixin],
+  mixins: [OrderingMixin, PaginationMixin],
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       results: null,
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index 0985ca0ea..98b6e104c 100644
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@@ -153,11 +153,11 @@ import $ from 'jquery'
 
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import PaginationMixin from '~/components/mixins/Pagination.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import AlbumCard from '~/components/audio/album/Card.vue'
 import Pagination from '~/components/Pagination.vue'
 import TagsSelector from '~/components/library/TagsSelector.vue'
 import useLogger from '~/composables/useLogger'
+import useSharedLabels from '../../composables/useSharedLabels'
 
 const logger = useLogger()
 
@@ -169,12 +169,16 @@ export default {
     Pagination,
     TagsSelector
   },
-  mixins: [OrderingMixin, PaginationMixin, TranslationsMixin],
+  mixins: [OrderingMixin, PaginationMixin],
   props: {
     defaultQuery: { type: String, required: false, default: '' },
     defaultTags: { type: Array, required: false, default: () => { return [] } },
     scope: { type: String, required: false, default: 'all' }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       isLoading: true,
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index ae346bf23..7c0631de5 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -169,11 +169,11 @@ import $ from 'jquery'
 
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import PaginationMixin from '~/components/mixins/Pagination.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import ArtistCard from '~/components/audio/artist/Card.vue'
 import Pagination from '~/components/Pagination.vue'
 import TagsSelector from '~/components/library/TagsSelector.vue'
 import useLogger from '~/composables/useLogger'
+import useSharedLabels from '../../composables/useSharedLabels'
 
 const logger = useLogger()
 
@@ -185,12 +185,16 @@ export default {
     Pagination,
     TagsSelector
   },
-  mixins: [OrderingMixin, PaginationMixin, TranslationsMixin],
+  mixins: [OrderingMixin, PaginationMixin],
   props: {
     defaultQuery: { type: String, required: false, default: '' },
     defaultTags: { type: Array, required: false, default: () => { return [] } },
     scope: { type: String, required: false, default: 'all' }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       isLoading: true,
diff --git a/front/src/components/library/EditForm.vue b/front/src/components/library/EditForm.vue
index 547fdb582..48e3103b9 100644
--- a/front/src/components/library/EditForm.vue
+++ b/front/src/components/library/EditForm.vue
@@ -340,11 +340,10 @@ export default {
 
   methods: {
     setValues () {
-      const self = this
-      this.config.fields.forEach(f => {
-        self.$set(self.values, f.id, clone(f.getValue(self.object)))
-        self.$set(self.initialValues, f.id, clone(self.values[f.id]))
-      })
+      for (const { id, getValue } of this.config.fields) {
+        this.values[id] = clone(getValue(this.object))
+        this.initialValues[id] = clone(this.values[id])
+      }
     },
     submit () {
       const self = this
diff --git a/front/src/components/library/FsBrowser.vue b/front/src/components/library/FsBrowser.vue
index d97b01e5d..eb4c9334f 100644
--- a/front/src/components/library/FsBrowser.vue
+++ b/front/src/components/library/FsBrowser.vue
@@ -1,14 +1,40 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { FileSystem, FSEntry } from '~/types'
+
+interface Props {
+  data: FileSystem
+  loading: boolean
+  modelValue: string[]
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue', 'import'])
+
+const value = useVModel(props, 'modelValue', emit)
+const handleClick = (entry: FSEntry) => {
+  if (!entry.dir) return
+
+  if (entry.name === '..') {
+    value.value.pop()
+    return
+  }
+
+  value.value.push(entry.name)
+}
+</script>
+
 <template>
-  <div :class="['ui', {loading}, 'segment']">
+  <div :class="['ui', { loading }, 'segment']">
     <div class="ui fluid action input">
       <input
         class="ui disabled"
         disabled
-        :value="data.root + '/' + value.join('/')"
+        :value="props.data.root + '/' + value.join('/')"
       >
       <button
         class="ui button"
-        @click.prevent="$emit('import')"
+        @click.prevent="emit('import')"
       >
         <translate translate-context="Content/Library/Button/Verb">
           Import
@@ -20,7 +46,7 @@
         v-if="value.length > 0"
         class="item"
         href=""
-        @click.prevent="handleClick({name: '..', dir: true})"
+        @click.prevent="handleClick({ name: '..', dir: true })"
       >
         <i class="folder icon" />
         <div class="content">
@@ -49,26 +75,3 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    data: { type: Object, required: true },
-    loading: { type: Boolean, required: true },
-    value: { type: Array, required: true }
-  },
-  methods: {
-    handleClick (element) {
-      if (!element.dir) {
-        return
-      }
-      if (element.name === '..') {
-        const newValue = [...this.value]
-        newValue.pop()
-        this.$emit('input', newValue)
-      } else {
-        this.$emit('input', [...this.value, element.name])
-      }
-    }
-  }
-}
-</script>
diff --git a/front/src/components/library/Podcasts.vue b/front/src/components/library/Podcasts.vue
index 002394c4d..54121fb23 100644
--- a/front/src/components/library/Podcasts.vue
+++ b/front/src/components/library/Podcasts.vue
@@ -201,13 +201,13 @@ import $ from 'jquery'
 
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import PaginationMixin from '~/components/mixins/Pagination.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import ArtistCard from '~/components/audio/artist/Card.vue'
 import Pagination from '~/components/Pagination.vue'
 import TagsSelector from '~/components/library/TagsSelector.vue'
 import Modal from '~/components/semantic/Modal.vue'
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
 import useLogger from '~/composables/useLogger'
+import useSharedLabels from '../../composables/useSharedLabels'
 
 const logger = useLogger()
 
@@ -221,12 +221,16 @@ export default {
     RemoteSearchForm,
     Modal
   },
-  mixins: [OrderingMixin, PaginationMixin, TranslationsMixin],
+  mixins: [OrderingMixin, PaginationMixin],
   props: {
     defaultQuery: { type: String, required: false, default: '' },
     defaultTags: { type: Array, required: false, default: () => { return [] } },
     scope: { type: String, required: false, default: 'all' }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       isLoading: true,
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index df80b6650..2593a5ceb 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -179,10 +179,10 @@ import $ from 'jquery'
 
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import PaginationMixin from '~/components/mixins/Pagination.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import RadioCard from '~/components/radios/Card.vue'
 import Pagination from '~/components/Pagination.vue'
 import useLogger from '~/composables/useLogger'
+import useSharedLabels from '../../composables/useSharedLabels'
 
 const logger = useLogger()
 
@@ -193,11 +193,15 @@ export default {
     RadioCard,
     Pagination
   },
-  mixins: [OrderingMixin, PaginationMixin, TranslationsMixin],
+  mixins: [OrderingMixin, PaginationMixin],
   props: {
     defaultQuery: { type: String, required: false, default: '' },
     scope: { type: String, required: false, default: 'all' }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       isLoading: true,
diff --git a/front/src/components/library/TagsSelector.vue b/front/src/components/library/TagsSelector.vue
index 10e148541..3015a16f5 100644
--- a/front/src/components/library/TagsSelector.vue
+++ b/front/src/components/library/TagsSelector.vue
@@ -22,9 +22,9 @@ import $ from 'jquery'
 
 import { isEqual } from 'lodash-es'
 export default {
-  props: { value: { type: Array, required: true } },
+  props: { modelValue: { type: Array, required: true } },
   watch: {
-    value: {
+    modelValue: {
       handler (v) {
         const current = $(this.$refs.dropdown).dropdown('get value').split(',').sort()
         if (!isEqual([...v].sort(), current)) {
@@ -44,7 +44,7 @@ export default {
       const self = this
       const handleUpdate = () => {
         const value = $(self.$refs.dropdown).dropdown('get value').split(',')
-        self.$emit('input', value)
+        self.$emit('update:modelValue', value)
         return value
       }
       const settings = {
@@ -95,7 +95,7 @@ export default {
         onChange: handleUpdate
       }
       $(this.$refs.dropdown).dropdown(settings)
-      $(this.$refs.dropdown).dropdown('set exactly', this.value)
+      $(this.$refs.dropdown).dropdown('set exactly', this.modelValue)
     }
   }
 }
diff --git a/front/src/components/manage/ChannelsTable.vue b/front/src/components/manage/ChannelsTable.vue
index 7dc663fd0..524f294b7 100644
--- a/front/src/components/manage/ChannelsTable.vue
+++ b/front/src/components/manage/ChannelsTable.vue
@@ -206,18 +206,22 @@ import { normalizeQuery, parseTokens } from '~/search'
 import Pagination from '~/components/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
+import useSharedLabels from '../../composables/useSharedLabels'
 
 export default {
   components: {
     Pagination,
     ActionTable
   },
-  mixins: [OrderingMixin, TranslationsMixin, SmartSearchMixin],
+  mixins: [OrderingMixin, SmartSearchMixin],
   props: {
     filters: { type: Object, required: false, default: () => { return {} } }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       time,
diff --git a/front/src/components/manage/library/AlbumsTable.vue b/front/src/components/manage/library/AlbumsTable.vue
index 23ecf23a5..914d0414b 100644
--- a/front/src/components/manage/library/AlbumsTable.vue
+++ b/front/src/components/manage/library/AlbumsTable.vue
@@ -191,18 +191,22 @@ import { normalizeQuery, parseTokens } from '~/search'
 import Pagination from '~/components/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
   components: {
     Pagination,
     ActionTable
   },
-  mixins: [OrderingMixin, TranslationsMixin, SmartSearchMixin],
+  mixins: [OrderingMixin, SmartSearchMixin],
   props: {
     filters: { type: Object, required: false, default: () => { return {} } }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       time,
diff --git a/front/src/components/manage/library/ArtistsTable.vue b/front/src/components/manage/library/ArtistsTable.vue
index 3d6a8e295..fdbe729b2 100644
--- a/front/src/components/manage/library/ArtistsTable.vue
+++ b/front/src/components/manage/library/ArtistsTable.vue
@@ -190,18 +190,22 @@ import { normalizeQuery, parseTokens } from '~/search'
 import Pagination from '~/components/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
   components: {
     Pagination,
     ActionTable
   },
-  mixins: [OrderingMixin, TranslationsMixin, SmartSearchMixin],
+  mixins: [OrderingMixin, SmartSearchMixin],
   props: {
     filters: { type: Object, required: false, default: () => { return {} } }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       time,
diff --git a/front/src/components/manage/library/EditsCardList.vue b/front/src/components/manage/library/EditsCardList.vue
index 28aba1190..b3abcb979 100644
--- a/front/src/components/manage/library/EditsCardList.vue
+++ b/front/src/components/manage/library/EditsCardList.vue
@@ -135,22 +135,26 @@ import { uniq, merge } from 'lodash-es'
 import time from '~/utils/time'
 import Pagination from '~/components/Pagination.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import EditCard from '~/components/library/EditCard.vue'
 import { normalizeQuery, parseTokens } from '~/search'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
 
 import edits from '~/edits'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
   components: {
     Pagination,
     EditCard
   },
-  mixins: [OrderingMixin, TranslationsMixin, SmartSearchMixin],
+  mixins: [OrderingMixin, SmartSearchMixin],
   props: {
     filters: { type: Object, required: false, default: () => { return {} } }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       time,
diff --git a/front/src/components/manage/library/LibrariesTable.vue b/front/src/components/manage/library/LibrariesTable.vue
index 838de0d2c..55c1cf241 100644
--- a/front/src/components/manage/library/LibrariesTable.vue
+++ b/front/src/components/manage/library/LibrariesTable.vue
@@ -221,18 +221,22 @@ import { normalizeQuery, parseTokens } from '~/search'
 import Pagination from '~/components/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
   components: {
     Pagination,
     ActionTable
   },
-  mixins: [OrderingMixin, TranslationsMixin, SmartSearchMixin],
+  mixins: [OrderingMixin, SmartSearchMixin],
   props: {
     filters: { type: Object, required: false, default: () => { return {} } }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       time,
diff --git a/front/src/components/manage/library/TagsTable.vue b/front/src/components/manage/library/TagsTable.vue
index ce4b9824b..e2f3ed821 100644
--- a/front/src/components/manage/library/TagsTable.vue
+++ b/front/src/components/manage/library/TagsTable.vue
@@ -152,10 +152,10 @@ import { normalizeQuery, parseTokens } from '~/search'
 import Pagination from '~/components/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
 import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
 import { truncate } from '~/utils/filters'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
   components: {
@@ -163,12 +163,13 @@ export default {
     ActionTable,
     ImportStatusModal
   },
-  mixins: [OrderingMixin, TranslationsMixin, SmartSearchMixin],
+  mixins: [OrderingMixin, SmartSearchMixin],
   props: {
     filters: { type: Object, required: false, default: () => { return {} } }
   },
   setup () {
-    return { truncate }
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels, truncate }
   },
   data () {
     return {
diff --git a/front/src/components/manage/library/TracksTable.vue b/front/src/components/manage/library/TracksTable.vue
index d6f6fb174..880417d94 100644
--- a/front/src/components/manage/library/TracksTable.vue
+++ b/front/src/components/manage/library/TracksTable.vue
@@ -204,18 +204,22 @@ import { normalizeQuery, parseTokens } from '~/search'
 import Pagination from '~/components/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
   components: {
     Pagination,
     ActionTable
   },
-  mixins: [OrderingMixin, TranslationsMixin, SmartSearchMixin],
+  mixins: [OrderingMixin, SmartSearchMixin],
   props: {
     filters: { type: Object, required: false, default: () => { return {} } }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       time,
diff --git a/front/src/components/manage/library/UploadsTable.vue b/front/src/components/manage/library/UploadsTable.vue
index b5a6e44c3..1f5fc7d54 100644
--- a/front/src/components/manage/library/UploadsTable.vue
+++ b/front/src/components/manage/library/UploadsTable.vue
@@ -313,10 +313,10 @@ import { normalizeQuery, parseTokens } from '~/search'
 import Pagination from '~/components/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
 import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
 import { humanSize, truncate } from '~/utils/filters'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
   components: {
@@ -324,12 +324,13 @@ export default {
     ActionTable,
     ImportStatusModal
   },
-  mixins: [OrderingMixin, TranslationsMixin, SmartSearchMixin],
+  mixins: [OrderingMixin, SmartSearchMixin],
   props: {
     filters: { type: Object, required: false, default: function () { return {} } }
   },
   setup () {
-    return { humanSize, truncate }
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels, humanSize, truncate }
   },
   data () {
     return {
diff --git a/front/src/components/manage/moderation/AccountsTable.vue b/front/src/components/manage/moderation/AccountsTable.vue
index 5992ccaf8..30f9f4dbc 100644
--- a/front/src/components/manage/moderation/AccountsTable.vue
+++ b/front/src/components/manage/moderation/AccountsTable.vue
@@ -177,18 +177,22 @@ import { normalizeQuery, parseTokens } from '~/search'
 import Pagination from '~/components/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
   components: {
     Pagination,
     ActionTable
   },
-  mixins: [OrderingMixin, TranslationsMixin, SmartSearchMixin],
+  mixins: [OrderingMixin, SmartSearchMixin],
   props: {
     filters: { type: Object, required: false, default: function () { return {} } }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       time,
diff --git a/front/src/components/manage/moderation/DomainsTable.vue b/front/src/components/manage/moderation/DomainsTable.vue
index 46c793949..9669d56ef 100644
--- a/front/src/components/manage/moderation/DomainsTable.vue
+++ b/front/src/components/manage/moderation/DomainsTable.vue
@@ -187,18 +187,22 @@ import time from '~/utils/time'
 import Pagination from '~/components/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
   components: {
     Pagination,
     ActionTable
   },
-  mixins: [OrderingMixin, TranslationsMixin],
+  mixins: [OrderingMixin],
   props: {
     filters: { type: Object, required: false, default: function () { return {} } },
     allowListEnabled: { type: Boolean, default: false }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       time,
diff --git a/front/src/components/manage/moderation/ReportCard.vue b/front/src/components/manage/moderation/ReportCard.vue
index a01dc88ae..15391a8ab 100644
--- a/front/src/components/manage/moderation/ReportCard.vue
+++ b/front/src/components/manage/moderation/ReportCard.vue
@@ -47,8 +47,8 @@
                   </td>
                   <td>
                     <report-category-dropdown
-                      :value="obj.type"
-                      @input="update({type: $event})"
+                      :model-value="obj.type"
+                      @update:modelValue="update({type: $event})"
                     >
                       &#32;
                       <action-feedback :is-loading="updating.type" />
diff --git a/front/src/components/manage/users/InvitationsTable.vue b/front/src/components/manage/users/InvitationsTable.vue
index cdb7e4992..1bbc877ca 100644
--- a/front/src/components/manage/users/InvitationsTable.vue
+++ b/front/src/components/manage/users/InvitationsTable.vue
@@ -161,17 +161,21 @@ import { merge } from 'lodash-es'
 import Pagination from '~/components/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
   components: {
     Pagination,
     ActionTable
   },
-  mixins: [OrderingMixin, TranslationsMixin],
+  mixins: [OrderingMixin],
   props: {
     filters: { type: Object, required: false, default: function () { return {} } }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       moment,
diff --git a/front/src/components/manage/users/UsersTable.vue b/front/src/components/manage/users/UsersTable.vue
index fac5bde43..ac5db61ea 100644
--- a/front/src/components/manage/users/UsersTable.vue
+++ b/front/src/components/manage/users/UsersTable.vue
@@ -204,17 +204,21 @@ import time from '~/utils/time'
 import Pagination from '~/components/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
   components: {
     Pagination,
     ActionTable
   },
-  mixins: [OrderingMixin, TranslationsMixin],
+  mixins: [OrderingMixin],
   props: {
     filters: { type: Object, required: false, default: function () { return {} } }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       time,
diff --git a/front/src/components/mixins/Translations.vue b/front/src/components/mixins/Translations.vue
deleted file mode 100644
index 4380ae6ee..000000000
--- a/front/src/components/mixins/Translations.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<script>
-export default {
-  computed: {
-    sharedLabels () {
-      return {
-        fields: {
-          privacy_level: {
-            label: this.$pgettext('Content/Settings/Dropdown.Label/Noun', 'Activity visibility'),
-            help: this.$pgettext('Content/Settings/Dropdown.Help text', 'Determine the visibility level of your activity'),
-            choices: {
-              me: this.$pgettext('Content/Settings/Dropdown', 'Nobody except me'),
-              instance: this.$pgettext('Content/Settings/Dropdown', 'Everyone on this instance'),
-              everyone: this.$pgettext('Content/Settings/Dropdown', 'Everyone, across all instances')
-            },
-            shortChoices: {
-              me: this.$pgettext('Content/Settings/Dropdown/Short', 'Private'),
-              instance: this.$pgettext('Content/Settings/Dropdown/Short', 'Instance'),
-              everyone: this.$pgettext('Content/Settings/Dropdown/Short', 'Everyone')
-            }
-          },
-          import_status: {
-            detailTitle: this.$pgettext('Content/Library/Link.Title', 'Click to display more information about the import process for this upload'),
-            choices: {
-              skipped: {
-                label: this.$pgettext('Content/Library/*', 'Skipped'),
-                help: this.$pgettext('Content/Library/Help text', 'This track is already present in one of your libraries')
-              },
-              draft: {
-                label: this.$pgettext('Content/Library/*/Short', 'Draft'),
-                help: this.$pgettext('Content/Library/Help text', 'This track has been uploaded, but hasn\'t been scheduled for processing yet')
-              },
-              pending: {
-                label: this.$pgettext('Content/Library/*/Short', 'Pending'),
-                help: this.$pgettext('Content/Library/Help text', 'This track has been uploaded, but hasn\'t been processed by the server yet')
-              },
-              errored: {
-                label: this.$pgettext('Content/Library/Table/Short', 'Errored'),
-                help: this.$pgettext('Content/Library/Help text', 'This track could not be processed, please make sure it is tagged correctly')
-              },
-              finished: {
-                label: this.$pgettext('Content/Library/*', 'Finished'),
-                help: this.$pgettext('Content/Library/Help text', 'Imported')
-              }
-            }
-          },
-          report_type: {
-            label: this.$pgettext('*/*/*', 'Category'),
-            choices: {
-              takedown_request: this.$pgettext('Content/Moderation/Dropdown', 'Takedown request'),
-              invalid_metadata: this.$pgettext('Popup/Import/Error.Label', 'Invalid metadata'),
-              illegal_content: this.$pgettext('Content/Moderation/Dropdown', 'Illegal content'),
-              offensive_content: this.$pgettext('Content/Moderation/Dropdown', 'Offensive content'),
-              other: this.$pgettext('Content/Moderation/Dropdown', 'Other')
-            }
-          },
-          summary: {
-            label: this.$pgettext('Content/Account/*', 'Bio')
-          },
-          content_category: {
-            label: this.$pgettext('Content/*/Dropdown.Label/Noun', 'Content category'),
-            choices: {
-              podcast: this.$pgettext('Content/*/Dropdown', 'Podcast'),
-              music: this.$pgettext('*/*/*', 'Music'),
-              other: this.$pgettext('*/*/*', 'Other')
-            }
-          }
-        },
-        filters: {
-          creation_date: this.$pgettext('Content/*/*/Noun', 'Creation date'),
-          release_date: this.$pgettext('Content/*/*/Noun', 'Release date'),
-          accessed_date: this.$pgettext('Content/*/*/Noun', 'Accessed date'),
-          first_seen: this.$pgettext('Content/Moderation/Dropdown/Noun', 'First seen date'),
-          last_seen: this.$pgettext('Content/Moderation/Dropdown/Noun', 'Last seen date'),
-          modification_date: this.$pgettext('Content/Playlist/Dropdown/Noun', 'Modification date'),
-          expiration_date: this.$pgettext('Content/Admin/Table.Label/Noun', 'Expiration date'),
-          track_title: this.$pgettext('Content/*/Dropdown/Noun', 'Track name'),
-          album_title: this.$pgettext('Content/*/Dropdown/Noun', 'Album name'),
-          artist_name: this.$pgettext('Content/*/Dropdown/Noun', 'Artist name'),
-          name: this.$pgettext('*/*/*/Noun', 'Name'),
-          length: this.$pgettext('*/*/*/Noun', 'Duration'),
-          items_count: this.$pgettext('*/*/*/Noun', 'Items'),
-          size: this.$pgettext('Content/*/*/Noun', 'Size'),
-          bitrate: this.$pgettext('Content/Track/*/Noun', 'Bitrate'),
-          duration: this.$pgettext('Content/*/*', 'Duration'),
-          date_joined: this.$pgettext('Content/Admin/Table.Label/Noun', 'Sign-up date'),
-          last_activity: this.$pgettext('Content/Profile/Table.Label/Short, Noun (Value is a date)', 'Last activity'),
-          username: this.$pgettext('Content/*/*', 'Username'),
-          domain: this.$pgettext('Content/Moderation/*/Noun', 'Domain'),
-          users: this.$pgettext('*/*/*/Noun', 'Users'),
-          received_messages: this.$pgettext('Content/Moderation/*/Noun', 'Received messages'),
-          uploads: this.$pgettext('*/*/*', 'Uploads'),
-          followers: this.$pgettext('Content/Federation/*/Noun', 'Followers')
-        },
-        scopes: {
-          profile: {
-            label: this.$pgettext('Content/OAuth Scopes/Label', 'Profile'),
-            description: this.$pgettext('Content/OAuth Scopes/Paragraph', 'Access to e-mail, username, and profile information')
-          },
-          libraries: {
-            label: this.$pgettext('Content/OAuth Scopes/Label', 'Libraries and uploads'),
-            description: this.$pgettext('Content/OAuth Scopes/Paragraph', 'Access to audio files, libraries, artists, albums and tracks')
-          },
-          favorites: {
-            label: this.$pgettext('Sidebar/Favorites/List item.Link/Noun', 'Favorites'),
-            description: this.$pgettext('Content/OAuth Scopes/Paragraph', 'Access to favorites')
-          },
-          listenings: {
-            label: this.$pgettext('*/*/*/Noun', 'Listenings'),
-            description: this.$pgettext('Content/OAuth Scopes/Paragraph', 'Access to listening history')
-          },
-          follows: {
-            label: this.$pgettext('Content/OAuth Scopes/Label', 'Follows'),
-            description: this.$pgettext('Content/OAuth Scopes/Paragraph', 'Access to follows')
-          },
-          playlists: {
-            label: this.$pgettext('*/*/*', 'Playlists'),
-            description: this.$pgettext('Content/OAuth Scopes/Paragraph', 'Access to playlists')
-          },
-          radios: {
-            label: this.$pgettext('*/*/*', 'Radios'),
-            description: this.$pgettext('Content/OAuth Scopes/Paragraph', 'Access to radios')
-          },
-          filters: {
-            label: this.$pgettext('Content/Settings/Title/Noun', 'Content filters'),
-            description: this.$pgettext('Content/OAuth Scopes/Paragraph', 'Access to content filters')
-          },
-          notifications: {
-            label: this.$pgettext('*/Notifications/*', 'Notifications'),
-            description: this.$pgettext('Content/OAuth Scopes/Paragraph', 'Access to notifications')
-          },
-          edits: {
-            label: this.$pgettext('*/Admin/*/Noun', 'Edits'),
-            description: this.$pgettext('Content/OAuth Scopes/Paragraph', 'Access to edits')
-          },
-          security: {
-            label: this.$pgettext('*/Admin/*/Noun', 'Security'),
-            description: this.$pgettext('Content/OAuth Scopes/Paragraph', 'Access to security settings such as password and authorization')
-          },
-          reports: {
-            label: this.$pgettext('*/Moderation/*/Noun', 'Reports'),
-            description: this.$pgettext('Content/OAuth Scopes/Paragraph', 'Access to moderation reports')
-          }
-        }
-      }
-    }
-  }
-}
-</script>
diff --git a/front/src/components/moderation/ReportCategoryDropdown.vue b/front/src/components/moderation/ReportCategoryDropdown.vue
index 0b5ef81af..3c9c30621 100644
--- a/front/src/components/moderation/ReportCategoryDropdown.vue
+++ b/front/src/components/moderation/ReportCategoryDropdown.vue
@@ -1,11 +1,65 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import useSharedLabels from '~/composables/useSharedLabels'
+import { useVModel } from '@vueuse/core'
+
+interface Props {
+  modelValue: string
+  all?: boolean
+  label?: boolean
+  empty?: boolean
+  required?: boolean
+  restrictTo?: string[] // TODO (wvffle): Make sure its string list
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  all: false,
+  label: false,
+  empty: false,
+  required: false,
+  restrictTo: () => []
+})
+
+const emit = defineEmits(['update:modelValue'])
+const value = useVModel(props, 'modelValue', emit)
+
+const { $pgettext } = useGettext()
+const sharedLabels = useSharedLabels()
+const sharedChoices = sharedLabels.fields.report_type.choices
+
+const allCategories = computed(() => {
+  const res = []
+  if (props.all) {
+    res.push({ value: '', label: $pgettext('Content/*/Dropdown', 'All') })
+  }
+
+  const choices = props.restrictTo.length === 0
+    ? Object.keys(sharedChoices)
+    : props.restrictTo
+
+  for (const value of choices.sort()) {
+    res.push({
+      value,
+      label: value in sharedChoices
+        // NOTE: M$ simply locked the conversation instead of fixing type inferring
+        //       https://github.com/microsoft/TypeScript/issues/35859
+        ? sharedChoices[value as keyof typeof sharedChoices]
+        : value
+    })
+  }
+
+  return res
+})
+</script>
+
 <template>
   <div>
     <label v-if="label"><translate translate-context="*/*/*">Category</translate></label>
     <select
+      v-model="value"
       class="ui dropdown"
-      :value="value"
       :required="required || null"
-      @change="$emit('input', $event.target.value)"
     >
       <option
         v-if="empty"
@@ -13,8 +67,8 @@
         value=""
       />
       <option
-        v-for="(option, key) in allCategories"
-        :key="key"
+        v-for="option in allCategories"
+        :key="option.label"
         :value="option.value"
       >
         {{ option.label }}
@@ -23,45 +77,3 @@
     <slot />
   </div>
 </template>
-
-<script>
-import TranslationsMixin from '~/components/mixins/Translations.vue'
-export default {
-  mixins: [TranslationsMixin],
-  props: {
-    value: { type: String, default: null },
-    all: { type: Boolean, default: null },
-    label: { type: Boolean },
-    empty: { type: Boolean },
-    required: { type: Boolean },
-    restrictTo: { type: Array, default: () => { return [] } }
-  },
-  computed: {
-    allCategories () {
-      const c = []
-      if (this.all) {
-        c.push(
-          {
-            value: '',
-            label: this.$pgettext('Content/*/Dropdown', 'All')
-          }
-        )
-      }
-      let choices
-      if (this.restrictTo.length > 0) {
-        choices = this.restrictTo
-      } else {
-        choices = Object.keys(this.sharedLabels.fields.report_type.choices)
-      }
-      return c.concat(
-        choices.sort().map((v) => {
-          return {
-            value: v,
-            label: this.sharedLabels.fields.report_type.choices[v] || v
-          }
-        })
-      )
-    }
-  }
-}
-</script>
diff --git a/front/src/components/playlists/Form.vue b/front/src/components/playlists/Form.vue
index d11e31f9c..cde454b9d 100644
--- a/front/src/components/playlists/Form.vue
+++ b/front/src/components/playlists/Form.vue
@@ -100,18 +100,21 @@
 <script>
 import $ from 'jquery'
 import axios from 'axios'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 
 import useLogger from '~/composables/useLogger'
+import useSharedLabels from '~/composables/useSharedLabels'
 
 const logger = useLogger()
 
 export default {
-  mixins: [TranslationsMixin],
   props: {
     title: { type: Boolean, default: true },
     playlist: { type: Object, default: null }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     const d = {
       errors: [],
diff --git a/front/src/composables/useSharedLabels.ts b/front/src/composables/useSharedLabels.ts
new file mode 100644
index 000000000..f4841933a
--- /dev/null
+++ b/front/src/composables/useSharedLabels.ts
@@ -0,0 +1,144 @@
+import { gettext } from '~/init/locale'
+
+const { $pgettext } = gettext
+
+export default () => ({
+  fields: {
+    privacy_level: {
+      label: $pgettext('Content/Settings/Dropdown.Label/Noun', 'Activity visibility'),
+      help: $pgettext('Content/Settings/Dropdown.Help text', 'Determine the visibility level of your activity'),
+      choices: {
+        me: $pgettext('Content/Settings/Dropdown', 'Nobody except me'),
+        instance: $pgettext('Content/Settings/Dropdown', 'Everyone on this instance'),
+        everyone: $pgettext('Content/Settings/Dropdown', 'Everyone, across all instances')
+      },
+      shortChoices: {
+        me: $pgettext('Content/Settings/Dropdown/Short', 'Private'),
+        instance: $pgettext('Content/Settings/Dropdown/Short', 'Instance'),
+        everyone: $pgettext('Content/Settings/Dropdown/Short', 'Everyone')
+      }
+    },
+    import_status: {
+      detailTitle: $pgettext('Content/Library/Link.Title', 'Click to display more information about the import process for this upload'),
+      choices: {
+        skipped: {
+          label: $pgettext('Content/Library/*', 'Skipped'),
+          help: $pgettext('Content/Library/Help text', 'This track is already present in one of your libraries')
+        },
+        draft: {
+          label: $pgettext('Content/Library/*/Short', 'Draft'),
+          help: $pgettext('Content/Library/Help text', 'This track has been uploaded, but hasn\'t been scheduled for processing yet')
+        },
+        pending: {
+          label: $pgettext('Content/Library/*/Short', 'Pending'),
+          help: $pgettext('Content/Library/Help text', 'This track has been uploaded, but hasn\'t been processed by the server yet')
+        },
+        errored: {
+          label: $pgettext('Content/Library/Table/Short', 'Errored'),
+          help: $pgettext('Content/Library/Help text', 'This track could not be processed, please make sure it is tagged correctly')
+        },
+        finished: {
+          label: $pgettext('Content/Library/*', 'Finished'),
+          help: $pgettext('Content/Library/Help text', 'Imported')
+        }
+      }
+    },
+    report_type: {
+      label: $pgettext('*/*/*', 'Category'),
+      choices: {
+        takedown_request: $pgettext('Content/Moderation/Dropdown', 'Takedown request'),
+        invalid_metadata: $pgettext('Popup/Import/Error.Label', 'Invalid metadata'),
+        illegal_content: $pgettext('Content/Moderation/Dropdown', 'Illegal content'),
+        offensive_content: $pgettext('Content/Moderation/Dropdown', 'Offensive content'),
+        other: $pgettext('Content/Moderation/Dropdown', 'Other')
+      }
+    },
+    summary: {
+      label: $pgettext('Content/Account/*', 'Bio')
+    },
+    content_category: {
+      label: $pgettext('Content/*/Dropdown.Label/Noun', 'Content category'),
+      choices: {
+        podcast: $pgettext('Content/*/Dropdown', 'Podcast'),
+        music: $pgettext('*/*/*', 'Music'),
+        other: $pgettext('*/*/*', 'Other')
+      }
+    }
+  },
+  filters: {
+    creation_date: $pgettext('Content/*/*/Noun', 'Creation date'),
+    release_date: $pgettext('Content/*/*/Noun', 'Release date'),
+    accessed_date: $pgettext('Content/*/*/Noun', 'Accessed date'),
+    first_seen: $pgettext('Content/Moderation/Dropdown/Noun', 'First seen date'),
+    last_seen: $pgettext('Content/Moderation/Dropdown/Noun', 'Last seen date'),
+    modification_date: $pgettext('Content/Playlist/Dropdown/Noun', 'Modification date'),
+    expiration_date: $pgettext('Content/Admin/Table.Label/Noun', 'Expiration date'),
+    track_title: $pgettext('Content/*/Dropdown/Noun', 'Track name'),
+    album_title: $pgettext('Content/*/Dropdown/Noun', 'Album name'),
+    artist_name: $pgettext('Content/*/Dropdown/Noun', 'Artist name'),
+    name: $pgettext('*/*/*/Noun', 'Name'),
+    length: $pgettext('*/*/*/Noun', 'Duration'),
+    items_count: $pgettext('*/*/*/Noun', 'Items'),
+    size: $pgettext('Content/*/*/Noun', 'Size'),
+    bitrate: $pgettext('Content/Track/*/Noun', 'Bitrate'),
+    duration: $pgettext('Content/*/*', 'Duration'),
+    date_joined: $pgettext('Content/Admin/Table.Label/Noun', 'Sign-up date'),
+    last_activity: $pgettext('Content/Profile/Table.Label/Short, Noun (Value is a date)', 'Last activity'),
+    username: $pgettext('Content/*/*', 'Username'),
+    domain: $pgettext('Content/Moderation/*/Noun', 'Domain'),
+    users: $pgettext('*/*/*/Noun', 'Users'),
+    received_messages: $pgettext('Content/Moderation/*/Noun', 'Received messages'),
+    uploads: $pgettext('*/*/*', 'Uploads'),
+    followers: $pgettext('Content/Federation/*/Noun', 'Followers')
+  },
+  scopes: {
+    profile: {
+      label: $pgettext('Content/OAuth Scopes/Label', 'Profile'),
+      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to e-mail, username, and profile information')
+    },
+    libraries: {
+      label: $pgettext('Content/OAuth Scopes/Label', 'Libraries and uploads'),
+      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to audio files, libraries, artists, albums and tracks')
+    },
+    favorites: {
+      label: $pgettext('Sidebar/Favorites/List item.Link/Noun', 'Favorites'),
+      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to favorites')
+    },
+    listenings: {
+      label: $pgettext('*/*/*/Noun', 'Listenings'),
+      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to listening history')
+    },
+    follows: {
+      label: $pgettext('Content/OAuth Scopes/Label', 'Follows'),
+      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to follows')
+    },
+    playlists: {
+      label: $pgettext('*/*/*', 'Playlists'),
+      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to playlists')
+    },
+    radios: {
+      label: $pgettext('*/*/*', 'Radios'),
+      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to radios')
+    },
+    filters: {
+      label: $pgettext('Content/Settings/Title/Noun', 'Content filters'),
+      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to content filters')
+    },
+    notifications: {
+      label: $pgettext('*/Notifications/*', 'Notifications'),
+      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to notifications')
+    },
+    edits: {
+      label: $pgettext('*/Admin/*/Noun', 'Edits'),
+      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to edits')
+    },
+    security: {
+      label: $pgettext('*/Admin/*/Noun', 'Security'),
+      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to security settings such as password and authorization')
+    },
+    reports: {
+      label: $pgettext('*/Moderation/*/Noun', 'Reports'),
+      description: $pgettext('Content/OAuth Scopes/Paragraph', 'Access to moderation reports')
+    }
+  }
+})
diff --git a/front/src/main.ts b/front/src/main.ts
index 48ca59769..698d9f860 100644
--- a/front/src/main.ts
+++ b/front/src/main.ts
@@ -6,7 +6,8 @@ import useTheme from '~/composables/useTheme'
 useTheme()
 
 configureCompat({
-  RENDER_FUNCTION: false
+  RENDER_FUNCTION: false,
+  // COMPONENT_V_MODEL: false
 })
 
 const logger = useLogger()
@@ -53,3 +54,4 @@ Promise.all(modules).finally(() => {
 // TODO (wvffle): Use emits options: https://v3-migration.vuejs.org/breaking-changes/emits-option.html
 // TODO (wvffle): Migrate to new v-model: https://v3-migration.vuejs.org/breaking-changes/v-model.html
 // TODO (wvffle): Migrate to <script setup>
+// TODO (wvffle): Replace `from '(../)+` with `from '~/`
diff --git a/front/src/types.ts b/front/src/types.ts
index d5e2a4259..394c40520 100644
--- a/front/src/types.ts
+++ b/front/src/types.ts
@@ -71,6 +71,17 @@ export interface ListenWSEvent {
 
 export type WebSocketEvent = PendingReviewEditsWSEvent | PendingReviewReportsWSEvent | PendingReviewRequestsWSEvent | ListenWSEvent
 
+// FS Browser
+export interface FSEntry {
+  dir: boolean
+  name: string
+}
+
+export interface FileSystem {
+  root: boolean
+  content: FSEntry[]
+}
+
 // Yet uncategorized stuff
 export interface Actor {
   preferred_username: string
diff --git a/front/src/views/admin/library/LibraryDetail.vue b/front/src/views/admin/library/LibraryDetail.vue
index e86732ac0..9ac786b03 100644
--- a/front/src/views/admin/library/LibraryDetail.vue
+++ b/front/src/views/admin/library/LibraryDetail.vue
@@ -364,19 +364,17 @@
 
 <script>
 import axios from 'axios'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
-import useLogger from '~/composables/useLogger'
 import { humanSize, truncate } from '~/utils/filters'
+import useLogger from '~/composables/useLogger'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 const logger = useLogger()
 
 export default {
-  mixins: [
-    TranslationsMixin
-  ],
   props: { id: { type: String, required: true } },
   setup () {
-    return { humanSize, truncate }
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels, humanSize, truncate }
   },
   data () {
     return {
diff --git a/front/src/views/admin/library/UploadDetail.vue b/front/src/views/admin/library/UploadDetail.vue
index 84832bd24..0330983ed 100644
--- a/front/src/views/admin/library/UploadDetail.vue
+++ b/front/src/views/admin/library/UploadDetail.vue
@@ -383,21 +383,19 @@
 
 <script>
 import axios from 'axios'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
 import time from '~/utils/time'
 import { humanSize, truncate } from '~/utils/filters'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
   components: {
     ImportStatusModal
   },
-  mixins: [
-    TranslationsMixin
-  ],
   props: { id: { type: Number, required: true } },
   setup () {
-    return { humanSize, time, truncate }
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels, humanSize, time, truncate }
   },
   data () {
     return {
diff --git a/front/src/views/admin/moderation/ReportsList.vue b/front/src/views/admin/moderation/ReportsList.vue
index 23c702510..2a8da41c6 100644
--- a/front/src/views/admin/moderation/ReportsList.vue
+++ b/front/src/views/admin/moderation/ReportsList.vue
@@ -51,8 +51,8 @@
             class="field"
             :all="true"
             :label="true"
-            :value="getTokenValue('category', '')"
-            @input="addSearchToken('category', $event)"
+            :model-value="getTokenValue('category', '')"
+            @update:modelValue="addSearchToken('category', $event)"
           />
           <div class="field">
             <label for="reports-ordering"><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
@@ -131,11 +131,11 @@ import { merge } from 'lodash-es'
 import time from '~/utils/time'
 import Pagination from '~/components/Pagination.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import ReportCard from '~/components/manage/moderation/ReportCard.vue'
 import ReportCategoryDropdown from '~/components/moderation/ReportCategoryDropdown.vue'
 import { normalizeQuery, parseTokens } from '~/search'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
   components: {
@@ -143,10 +143,14 @@ export default {
     ReportCard,
     ReportCategoryDropdown
   },
-  mixins: [OrderingMixin, TranslationsMixin, SmartSearchMixin],
+  mixins: [OrderingMixin, SmartSearchMixin],
   props: {
     mode: { type: String, default: 'card' }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       time,
diff --git a/front/src/views/admin/moderation/RequestsList.vue b/front/src/views/admin/moderation/RequestsList.vue
index 3c3de69c8..c3ccc5a3f 100644
--- a/front/src/views/admin/moderation/RequestsList.vue
+++ b/front/src/views/admin/moderation/RequestsList.vue
@@ -129,17 +129,21 @@ import { merge } from 'lodash-es'
 import time from '~/utils/time'
 import Pagination from '~/components/Pagination.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import UserRequestCard from '~/components/manage/moderation/UserRequestCard.vue'
 import { normalizeQuery, parseTokens } from '~/search'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
   components: {
     Pagination,
     UserRequestCard
   },
-  mixins: [OrderingMixin, TranslationsMixin, SmartSearchMixin],
+  mixins: [OrderingMixin, SmartSearchMixin],
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       time,
diff --git a/front/src/views/content/libraries/Card.vue b/front/src/views/content/libraries/Card.vue
index 3d0db82f5..21f12bc2e 100644
--- a/front/src/views/content/libraries/Card.vue
+++ b/front/src/views/content/libraries/Card.vue
@@ -77,14 +77,14 @@
 </template>
 
 <script>
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import { humanSize } from '~/utils/filters'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
-  mixins: [TranslationsMixin],
   props: { library: { type: Object, required: true } },
   setup () {
-    return { humanSize }
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels, humanSize }
   },
   computed: {
     size_label () {
diff --git a/front/src/views/content/libraries/FilesTable.vue b/front/src/views/content/libraries/FilesTable.vue
index c726f42bf..a5c894d1d 100644
--- a/front/src/views/content/libraries/FilesTable.vue
+++ b/front/src/views/content/libraries/FilesTable.vue
@@ -273,10 +273,10 @@ import { normalizeQuery, parseTokens } from '~/search'
 import Pagination from '~/components/Pagination.vue'
 import ActionTable from '~/components/common/ActionTable.vue'
 import OrderingMixin from '~/components/mixins/Ordering.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import SmartSearchMixin from '~/components/mixins/SmartSearch.vue'
 import ImportStatusModal from '~/components/library/ImportStatusModal.vue'
 import { humanSize, truncate } from '~/utils/filters'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
   components: {
@@ -284,7 +284,7 @@ export default {
     ActionTable,
     ImportStatusModal
   },
-  mixins: [OrderingMixin, TranslationsMixin, SmartSearchMixin],
+  mixins: [OrderingMixin, SmartSearchMixin],
   props: {
     filters: { type: Object, required: false, default: function () { return {} } },
     needsRefresh: { type: Boolean, required: false, default: false },
@@ -297,7 +297,8 @@ export default {
     }
   },
   setup () {
-    return { humanSize, time, truncate }
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels, humanSize, time, truncate }
   },
   data () {
     return {
diff --git a/front/src/views/content/libraries/Form.vue b/front/src/views/content/libraries/Form.vue
index a816cc77e..15821ba9d 100644
--- a/front/src/views/content/libraries/Form.vue
+++ b/front/src/views/content/libraries/Form.vue
@@ -121,11 +121,14 @@
 
 <script>
 import axios from 'axios'
-import MixinsTranslation from '~/components/mixins/Translations.vue'
+import useSharedLabels from '../../../composables/useSharedLabels'
 
 export default {
-  mixins: [MixinsTranslation],
   props: { library: { type: Object, default: null } },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     const d = {
       isLoading: false,
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index 07dfeb85b..4b60e9dcb 100644
--- a/front/src/views/playlists/List.vue
+++ b/front/src/views/playlists/List.vue
@@ -142,9 +142,9 @@ import $ from 'jquery'
 
 import OrderingMixin from '~/components/mixins/Ordering.vue'
 import PaginationMixin from '~/components/mixins/Pagination.vue'
-import TranslationsMixin from '~/components/mixins/Translations.vue'
 import PlaylistCardList from '~/components/playlists/CardList.vue'
 import Pagination from '~/components/Pagination.vue'
+import useSharedLabels from '../../composables/useSharedLabels'
 
 const FETCH_URL = 'playlists/'
 
@@ -153,11 +153,15 @@ export default {
     PlaylistCardList,
     Pagination
   },
-  mixins: [OrderingMixin, PaginationMixin, TranslationsMixin],
+  mixins: [OrderingMixin, PaginationMixin],
   props: {
     defaultQuery: { type: String, required: false, default: '' },
     scope: { type: String, required: false, default: 'all' }
   },
+  setup () {
+    const sharedLabels = useSharedLabels()
+    return { sharedLabels }
+  },
   data () {
     return {
       isLoading: true,