chore(front): cleaning up

front/src/components/album/Card.vue

@@ -10,6 +10,7 @@ import PlayButton from '~/components/audio/PlayButton.vue'
 import Card from '~/components/ui/Card.vue'
 import Link from '~/components/ui/Link.vue'
 import Spacer from '~/components/ui/Spacer.vue'
+import Layout from '~/components/ui/Layout.vue'
 
 import { type Album } from '~/types'
 

front/src/components/audio/ChannelForm.vue

@@ -15,21 +15,20 @@ import Alert from '~/components/ui/Alert.vue'
 import Input from '~/components/ui/Input.vue'
 import Pills from '~/components/ui/Pills.vue'
 
-interface Events {
-  (e: 'category', contentCategory: ContentCategory): void
-  (e: 'submittable', value: boolean): void
-  (e: 'loading', value: boolean): void
-  (e: 'errored', errors: string[]): void
-  (e: 'created', channel: Channel): void
-  (e: 'updated', channel: Channel): void
-}
 
 interface Props {
   object?: Channel | null
   step?: number
 }
 
-const emit = defineEmits<Events>()
+const emit = defineEmits<{
+  category: [contentCategory: ContentCategory]
+  submittable: [value: boolean]
+  loading: [value: boolean]
+  errored: [errors: string[]]
+  created: [channel: Channel]
+  updated: [channel: Channel]
+}>()
 const props = withDefaults(defineProps<Props>(), {
   object: null,
   step: 1

front/src/components/auth/Settings.vue

@@ -314,7 +314,7 @@ fetchOwnedApps()
       </Alert>
       <div
         v-for="f in orderedSettingsFields"
-        :key="f.id"
+        :key="f.id + sharedLabels.fields[f.id].help"
         class="field"
       >
         <Textarea

front/src/components/channels/UploadForm.vue

@@ -126,8 +126,6 @@ const selectedChannel = computed(() =>
           : availableChannels.value.find(({ artist }) => artist.id === channelDropdownId.value) || null
 )
 
-
-
 const emptyChannelCreateRequest:components['schemas']['ChannelCreateRequest'] = {
   name: store.state.auth.fullUsername,
   username: store.state.auth.username,
@@ -138,7 +136,7 @@ const emptyChannelCreateRequest:components['schemas']['ChannelCreateRequest'] =
 
 const createEmptyChannel = async () => {
   try {
-    const response = await axios.post(
+    await axios.post(
       'channels/',
       (emptyChannelCreateRequest satisfies operations['create_channel_2']['requestBody']['content']['application/json'])
     )
@@ -154,6 +152,7 @@ const fetchChannels = async () => {
       'channels/',
       { params: { scope: 'me' } }
     )
+
     availableChannels.value = response.data.results.filter(channel =>
       props.filter === undefined
         ? true
@@ -477,6 +476,7 @@ defineExpose({
         </li>
       </ul>
     </Alert>
+
     <!-- Select Album and License -->
 
     <div :class="['ui', 'required', 'field']">

front/src/components/library/Podcasts.vue

@@ -15,9 +15,16 @@ import { useModal } from '~/ui/composables/useModal.ts'
 import axios from 'axios'
 
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
-import Modal from '~/components/ui/Modal.vue'
 import Card from '~/components/ui/Card.vue'
 import ArtistCard from '~/components/artist/Card.vue'
+
+import useSharedLabels from '~/composables/locale/useSharedLabels'
+import useOrdering from '~/composables/navigation/useOrdering'
+import useErrorHandler from '~/composables/useErrorHandler'
+import usePage from '~/composables/navigation/usePage'
+import useLogger from '~/composables/useLogger'
+import { useTags } from '~/ui/composables/useTags.ts'
+
 import Pagination from '~/components/ui/Pagination.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Header from '~/components/ui/Header.vue'
@@ -27,12 +34,7 @@ import Alert from '~/components/ui/Alert.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Pills from '~/components/ui/Pills.vue'
 import Loader from '~/components/ui/Loader.vue'
-
-import useSharedLabels from '~/composables/locale/useSharedLabels'
-import useOrdering from '~/composables/navigation/useOrdering'
-import useErrorHandler from '~/composables/useErrorHandler'
-import usePage from '~/composables/navigation/usePage'
-import useLogger from '~/composables/useLogger'
+import Modal from '~/components/ui/Modal.vue'
 
 interface Props extends OrderingProps {
   scope?: 'me' | 'all'
@@ -50,7 +52,9 @@ const page = usePage()
 
 const tags = useRouteQuery<string[]>('tag', [])
 
-const tagList = computed(() => ({
+const tagList = useTags(tags)
+
+computed(() => ({
   currents: [].map(tag => ({ type: 'custom' as const, label: tag })),
   others: tags.value.map(tag => ({ type: 'custom' as const, label: tag }))
 }))

front/src/ui/modals/Upload.vue

@@ -57,14 +57,6 @@ const destinationSelected = (destination: UploadDestination) =>
 // Load the library for the chosen privacy level
 const privacyLevel = ref<PrivacyLevel>('me')
 
-// Lade User
-const url = '`federation/actors/${object.full_username}/libraries/`'
-
-// Step 2
-const filesSelected = (e: InputEvent) => {
-  state.value = { ...state.value, files: [] }
-}
-
 const modalTitle = computed(() =>
   ({ selectDestination: 'Upload', uploadFiles: 'Select files for upload', uploadsInProgress: 'Uploading...' }
     [state.value.page])
@@ -140,8 +132,6 @@ const channelUpload = ref()
       v-if="state.page === 'uploadFiles'"
       stack
     >
-      <!--  -->
-
       <ChannelUpload
         v-if="state.uploadDestination?.type === 'channel'"
         ref="channelUpload"
@@ -149,9 +139,6 @@ const channelUpload = ref()
         :channel="state.uploadDestination?.channel || null"
       />
 
-      <!--  -->
-
-      <!-- Privacy Slider -->
       <LibraryUpload
         v-if="state.uploadDestination?.type === 'library'"
         v-model="privacyLevel"