front/src/composables/audio/player.ts

@@ -43,7 +43,7 @@ export const isPlaying = ref(false)
 // Use Player
 export const usePlayer = createGlobalState(() => {
   const { currentSound } = useTracks()
-  const { playNext } = useQueue()
+  const { playNext, playPrevious } = useQueue()
 
   const pauseReason = ref(PauseReason.UserInput)
 
@@ -228,6 +228,52 @@ export const usePlayer = createGlobalState(() => {
   watch(currentIndex, stopErrorTimeout)
   whenever(errored, startErrorTimeout)
 
+  // Mobile controls and lockscreen cover art
+  const updateMediaSession = () => {
+    if ('mediaSession' in navigator && currentTrack.value) {
+      navigator.mediaSession.metadata = new MediaMetadata({
+        title: currentTrack.value.title,
+        artist: currentTrack.value.artistCredit?.map(ac => ac.credit).join(', ') || 'Unknown Artist',
+        album: currentTrack.value.albumTitle || 'Unknown Album',
+        artwork: [
+          { src: currentTrack.value.coverUrl, sizes: '1200x1200', type: 'image/jpeg' }
+        ]
+      })
+
+      navigator.mediaSession.setActionHandler('play', () => {
+        isPlaying.value = true
+      })
+
+      navigator.mediaSession.setActionHandler('pause', () => {
+        isPlaying.value = false
+      })
+
+      navigator.mediaSession.setActionHandler('previoustrack', () => {
+        playPrevious()
+      })
+
+      navigator.mediaSession.setActionHandler('nexttrack', () => {
+        playNext()
+      })
+
+      navigator.mediaSession.setActionHandler('seekbackward', (details) => {
+        seekBy(details.seekOffset || -10)
+      })
+
+      navigator.mediaSession.setActionHandler('seekforward', (details) => {
+        seekBy(details.seekOffset || 10)
+      })
+    }
+  }
+
+  watch(currentTrack, () => {
+    updateMediaSession()
+  })
+
+  watch(isPlaying, () => {
+    navigator.mediaSession.playbackState = isPlaying.value ? 'playing' : 'paused'
+  })
+
   return {
     initializeFirstTrack,
     isPlaying,

front/src/composables/audio/queue.ts

@@ -111,6 +111,9 @@ export const useQueue = createGlobalState(() => {
       const { uploads } = await axios.get(`tracks/${track.id}/`)
         .then(response => response.data as Track, () => ({ uploads: [] as Upload[] }))
 
+      // TODO: Either make `track` a writable ref or implement the client/cache model
+      // See Issue: https://dev.funkwhale.audio/funkwhale/funkwhale/-/issues/2437
+      // @ts-expect-error `track` is read-only
       track.uploads = uploads
     }
 
@@ -123,11 +126,11 @@ export const useQueue = createGlobalState(() => {
       artistId: (track.artist_credit && track.artist_credit[0] && track.artist_credit[0].artist.id) ?? -1,
       albumId: track.album?.id ?? -1,
       coverUrl: (
-        (track.cover?.urls)
-        || (track.album?.cover?.urls)
-        || ((track.artist_credit && track.artist_credit[0] && track.artist_credit[0].artist && track.artist_credit[0].artist.cover?.urls))
-        || {}
-      )?.original ?? new URL('../../assets/audio/default-cover.png', import.meta.url).href,
+        track.cover?.urls.original
+        || track.album?.cover?.urls.original
+        || track.artist_credit?.[0]?.artist.cover?.urls.original
+        || new URL('../../assets/audio/default-cover.png', import.meta.url).href
+      ).toString(),
       sources: track.uploads.map(upload => ({
         uuid: upload.uuid,
         duration: upload.duration,

front/src/composables/audio/tracks.ts

@@ -27,6 +27,14 @@ const soundCache = new LRUCache<number, Sound>({
   dispose: (sound) => sound.dispose()
 })
 
+// used to make soundCache reactive
+const soundCacheVersion = ref(0)
+function setSoundCache(trackId: number, sound: Sound) {
+  soundCache.set(trackId, sound)
+  soundCacheVersion.value++  // bump to trigger reactivity
+}
+
+
 const currentTrack = ref<QueueTrack>()
 
 export const fetchTrackSources = async (id: number): Promise<QueueTrackSource[]> => {
@@ -139,7 +147,7 @@ export const useTracks = createGlobalState(() => {
       }
 
       // Add track to the sound cache and remove from the promise cache
-      soundCache.set(track.id, sound)
+      setSoundCache(track.id, sound)
       soundPromises.delete(track.id)
 
       return sound
@@ -224,7 +232,12 @@ export const useTracks = createGlobalState(() => {
     })
   })
 
-  const currentSound = computed(() => soundCache.get(currentTrack.value?.id ?? -1))
+  const currentSound = computed(() => {
+    soundCacheVersion.value //trigger reactivity
+    const trackId = currentTrack.value?.id ?? -1
+    const sound = soundCache.get(trackId)
+    return sound
+  })
 
   const clearCache = () => {
     return soundCache.clear()

front/src/composables/audio/usePlayOptions.ts

 import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
+import type { components } from '~/generated/types'
 import type { ContentFilter } from '~/store/moderation'
 
-import { useCurrentElement } from '@vueuse/core'
 import { computed, markRaw, ref } from 'vue'
 import { i18n } from '~/init/locale'
 import { useStore } from '~/store'
@@ -9,19 +9,18 @@ import { useStore } from '~/store'
 import { usePlayer } from '~/composables/audio/player'
 import { useQueue } from '~/composables/audio/queue'
 
-import jQuery from 'jquery'
 import axios from 'axios'
 
 export interface PlayOptionsProps {
   isPlayable?: boolean
   tracks?: Track[]
   track?: Track | null
-  artist?: Artist | null
+  artist?: Artist | components["schemas"]["SimpleChannelArtist"] | components['schemas']['ArtistWithAlbums'] | null
   album?: Album | null
   playlist?: Playlist | null
   library?: Library | null
   channel?: Channel | null
-  account?: Actor | null
+  account?: Actor | components['schemas']['APIActor'] | null
 }
 
 export default (props: PlayOptionsProps) => {
@@ -37,8 +36,12 @@ export default (props: PlayOptionsProps) => {
     if (props.track) {
       return props.track.uploads?.length > 0
     } else if (props.artist) {
+      // TODO: Find out how to get tracks, album from Artist
+
+      /*
       return props.artist.tracks_count > 0
         || props.artist?.albums?.some((album) => album.is_playable === true)
+      */
     } else if (props.tracks) {
       return props.tracks?.some((track) => (track.uploads?.length ?? 0) > 0)
     }
@@ -126,7 +129,7 @@ export default (props: PlayOptionsProps) => {
         tracks.push(response.data as Track)
       }
     } else if (props.playlist) {
-      const response = await axios.get(`playlists/${props.playlist.id}/tracks/`)
+      const response = await axios.get(`playlists/${props.playlist.uuid}/tracks/`)
       const playlistTracks = (response.data.results as Array<{ track: Track }>).map(({ track }) => track as Track)
 
       const artistIds = store.getters['moderation/artistFilters']().map((filter: ContentFilter) => filter.target.id)
@@ -150,18 +153,15 @@ export default (props: PlayOptionsProps) => {
     return tracks.filter(track => track.uploads?.length).map(markRaw)
   }
 
-  const el = useCurrentElement()
-  const enqueue = async () => {
-    jQuery(el.value).find('.ui.dropdown').dropdown('hide')
+  // const el = useCurrentElement()
 
+  const enqueue = async () => {
     const tracks = await getPlayableTracks()
     await addToQueue(...tracks)
     addMessage(tracks)
   }
 
   const enqueueNext = async (next = false) => {
-    jQuery(el.value).find('.ui.dropdown').dropdown('hide')
-
     const tracks = await getPlayableTracks()
 
     const wasEmpty = queue.value.length === 0
@@ -177,9 +177,6 @@ export default (props: PlayOptionsProps) => {
 
   const replacePlay = async (index?: number) => {
     await clear()
-
-    jQuery(el.value).find('.ui.dropdown').dropdown('hide')
-
     const tracksToPlay = await getPlayableTracks()
     await addToQueue(...tracksToPlay)
 
@@ -203,6 +200,29 @@ export default (props: PlayOptionsProps) => {
     return replacePlay(index)
   }
 
+  const requestPlaylistUploadsAccess = async (playlist: Playlist) => {
+    const libraryUrl = playlist.library;
+  if (!libraryUrl) {
+    throw new Error("Playlist library URL is missing.");
+  }
+  const libResponse = await axios.get(libraryUrl);
+  const id = libResponse.data?.id || libResponse.data?.results?.id;
+  if (!id) {
+    throw new Error("Library id not found in response.");
+  }
+  const fetchResponse = await axios.post('federation/fetches',
+    { object: id }
+  );
+
+  const response = await axios.post(
+    'federation/follows/library',
+    { target: fetchResponse.data.object.uuid }
+  );
+
+  return response;
+};
+
+
   return {
     playable,
     filterableArtist,
@@ -211,6 +231,7 @@ export default (props: PlayOptionsProps) => {
     enqueueNext,
     replacePlay,
     activateTrack,
-    isLoading
+    isLoading,
+    requestPlaylistUploadsAccess
   }
 }

front/src/composables/color.ts

+import type { KeysOfUnion } from 'type-fest'
+import type { HTMLAttributes } from 'vue'
+
+export type DefaultProps =
+  | { default?: true }
+export type Default = KeysOfUnion<DefaultProps>
+
+export type ColorProps =
+  | { primary?: true }
+  | { secondary?: true }
+  | { destructive?: true }
+export type Color = KeysOfUnion<ColorProps>
+
+export type PastelProps =
+  | { red?: true }
+  | { blue?: true }
+  | { purple?: true }
+  | { green?: true }
+  | { yellow?: true }
+export type Pastel = KeysOfUnion<PastelProps>
+
+export type VariantProps =
+  | { solid?: true }
+  | { outline?: true }
+  | { ghost?: true }
+export type Variant = KeysOfUnion<VariantProps>
+
+export type InteractiveProps =
+  | { interactive?: true }
+export type Interactive = KeysOfUnion<DefaultProps>
+
+export type RaisedProps =
+  | { raised?: true }
+export type Raised = KeysOfUnion<RaisedProps>
+
+/* Props to Classes */
+
+export type Props =
+  (DefaultProps | ColorProps | PastelProps) & VariantProps & InteractiveProps & RaisedProps
+
+export type Key =
+  KeysOfUnion<Props>
+
+// You can only have one color
+const conflicts: Set<Key>[] = [
+  new Set(['default', 'primary', 'secondary', 'destructive', 'red', 'blue', 'purple', 'green', 'yellow']),
+  new Set(['solid', 'outline', 'ghost'])
+]
+
+const classes = {
+  default: 'default',
+  primary: 'primary',
+  secondary: 'secondary',
+  destructive: 'destructive',
+  red: 'red',
+  blue: 'blue',
+  purple: 'purple',
+  green: 'green',
+  yellow: 'yellow',
+  outline: 'outline',
+  ghost: 'ghost',
+  solid: 'solid',
+  raised: 'raised',
+  interactive: 'interactive'
+} satisfies Record<Key, string>
+
+const getPrecedence = (searchKey:Key | string) =>
+  Object.entries(classes).findIndex(([key, _]) => key === searchKey)
+
+/**
+ * @param props A superset of `{ Key? : true }`
+ * @returns the number of actually applied classes (if there are no defaults)
+ */
+export const isNoColors = (props: Partial<Props>) =>
+  !color(props)().class
+
+const merge = (classes: string[]) => (attributes: HTMLAttributes = {}) =>
+  classes.length === 0
+    ? attributes
+    : ({
+        ...attributes,
+        class: classes.join(' ') + ('class' in attributes ? attributes.class + ' ' : '')
+      })
+
+/**
+ * Add color classes to your component.
+ * Color classes are defined in `colors.scss`. Make sure to implement the correct style there!
+ *
+ * (1) Add a subset of `& (DefaultProps | ColorProps | PastelProps) & VariantProps & InteractiveProps & RaisedProps` to your `Props` type
+ * (2) Call `v-bind="color(props)"` on your component template
+ * (3) Now your component accepts color props such as `secondary outline raised`.
+ *
+ * Composable with `width`, `color`, `alignment`, etc.
+ *
+ * @param props Your component's props (or ...rest props if you have destructured them already)
+ * @param defaults These props are applied immediately and can be overridden by the user
+ * @returns a function from the resulting attributes the corresponding `class` object
+ */
+export const color = (props: Partial<Props>, defaults?: Key[]) =>
+  merge(
+    Object.entries(props)
+      .sort(([a, _], [b, __]) => getPrecedence(a) - getPrecedence(b))
+      .reduce(
+        (acc, [key, value]) =>
+          value && key in classes
+            ? acc.filter(accKey => !conflicts.find(set => set.has(accKey) && set.has(key as Key)))
+              .concat([key as Key])
+            : acc
+        ,
+        defaults || []
+      )
+  )
+
+type ColorSelector =
+  `${Color | Pastel | Default}${'' | ` ${Variant}${'' | ' interactive'}${'' | ' raised'}`}`
+
+// Convenience function for applying default colors. Prefer using `color`
+export const setColors = (color: ColorSelector) =>
+  ({ class: color })

front/src/composables/locale/useSharedLabels.ts

-import type { PrivacyLevel, ImportStatus } from '~/types'
+import type { ImportStatus } from '~/types'
+import type { components } from '~/generated/types'
 import type { ScopeId } from '~/composables/auth/useScopes'
 
 import { i18n } from '~/init/locale'
 
 const { t } = i18n.global
 
+// TODO: Remove this unnecessary abstraction (unless it has a purpose)
+
 export default () => ({
   fields: {
     privacy_level: {
@@ -13,13 +16,15 @@ export default () => ({
       choices: {
         me: t('composables.locale.useSharedLabels.fields.privacyLevel.choices.private'),
         instance: t('composables.locale.useSharedLabels.fields.privacyLevel.choices.instance'),
+        followers: t('composables.locale.useSharedLabels.fields.privacyLevel.choices.followers'),
         everyone: t('composables.locale.useSharedLabels.fields.privacyLevel.choices.public')
-      } as Record<PrivacyLevel, string>,
+      } satisfies Record<components['schemas']['PrivacyLevelEnum'], string>,
       shortChoices: {
         me: t('composables.locale.useSharedLabels.fields.privacyLevel.shortChoices.private'),
         instance: t('composables.locale.useSharedLabels.fields.privacyLevel.shortChoices.instance'),
+        followers: t('composables.locale.useSharedLabels.fields.privacyLevel.choices.followers'),
         everyone: t('composables.locale.useSharedLabels.fields.privacyLevel.shortChoices.public')
-      } as Record<PrivacyLevel, string>
+      } satisfies Record<components['schemas']['PrivacyLevelEnum'], string>
     },
     import_status: {
       label: t('composables.locale.useSharedLabels.fields.importStatus.label'),

front/src/composables/moderation/useEditConfigs.ts

@@ -16,7 +16,7 @@ export interface EditableConfigField extends ConfigField {
   id: EditObjectType
 }
 
-export type EditObject = (Partial<Artist> | Partial<Album> | Partial<Track>) & { attributed_to: Actor }
+export type EditObject = (Partial<Artist> | Partial<Album> | Partial<Track>) & { attributed_to?: Actor }
 export type EditObjectType = 'artist' | 'album' | 'track'
 type Configs = Record<EditObjectType, { fields: (EditableConfigField|ConfigField)[] }>
 
@@ -79,6 +79,7 @@ export default (): Configs => {
         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'),

front/src/composables/moderation/useReport.ts

 import type { Track, Artist, Album, Playlist, Library, Channel, Actor, ArtistCredit } from '~/types'
+import type { components } from '~/generated/types'
 
 import { i18n } from '~/init/locale'
 
@@ -8,11 +9,11 @@ const { t } = i18n.global
 
 interface Objects {
   track?: Track | null
-  album?: Album | null
-  artist?: Artist | null
+  album?: Album | components['schemas']['TrackAlbum'] | null
+  artist?: Artist | components['schemas']['ArtistWithAlbums'] | components["schemas"]["SimpleChannelArtist"] | null
   artistCredit?: ArtistCredit[] | null
   playlist?: Playlist | null
-  account?: Actor | null
+  account?: Actor | components['schemas']['APIActor'] | null
   library?: Library | null
   channel?: Channel | null
 }
@@ -111,7 +112,7 @@ const getReportableObjects = ({ track, album, artist, artistCredit, playlist, ac
       label: t('composables.moderation.useReport.playlist.label'),
       target: {
         type: 'playlist',
-        id: playlist.id,
+        uuid: playlist.uuid,
         label: playlist.name,
         _obj: playlist,
         typeLabel: t('composables.moderation.useReport.playlist.typeLabel')

front/src/composables/navigation/useOrdering.ts

@@ -6,9 +6,17 @@ import { useRoute } from 'vue-router'
 import { watch, readonly } from 'vue'
 
 export interface OrderingProps {
+  /** Custom name for storing ordering preferences */
   orderingConfigName?: RouteRecordName
 }
 
+/**
+ * Synchronizes ordering state between URL query parameters and localStorage,
+ * with automatic persistence across page reloads.
+ *
+ * @param props - Configuration options
+ * @returns Ordering state and update handlers
+ */
 export default <T extends string = string>(props: OrderingProps) => {
   const route = useRoute()
 
@@ -24,6 +32,8 @@ export default <T extends string = string>(props: OrderingProps) => {
     paginateBy: route.meta.paginateBy ?? 50
   }))
 
+  // TODO: I would like to replace the prefix `pref` with something that feels more solid.
+  // The implicit renaming here somewhat obscures the author's intention...
   const {
     orderingDirection: prefOrderingDirection,
     paginateBy: prefPaginateBy,
@@ -32,7 +42,15 @@ export default <T extends string = string>(props: OrderingProps) => {
     replaceRef: false
   })
 
-  const normalizeDirection = (direction: string) => direction === '+' ? '' : '-'
+  /**
+   * Normalizes ordering direction for URL query parameters.
+   * @param direction - '+' or some other string
+   * @returns Empty string for ascending, '-' for descending
+   */
+  const normalizeDirection = (direction: string) =>
+    direction === '+'
+      ? ''
+      : '-'
 
   const queryOrdering = useRouteQuery(
     'ordering',
@@ -60,7 +78,12 @@ export default <T extends string = string>(props: OrderingProps) => {
     prefOrdering.value = ordering.replace(/^[+-]/, '')
   }, { immediate: true })
 
-  // NOTE: We're using `flush: 'post'` to make sure that the `onOrderingUpdate` callback is called after all updates are done
+/**
+   * Registers a callback to execute when ordering preferences change.
+   * @param fn - Callback function to execute on updates
+   * @returns Watcher cleanup function
+   * NOTE: We're using `flush: 'post'` to make sure that the `onOrderingUpdate` callback is called after all updates are done
+   */
   const onOrderingUpdate = (fn: () => void) => watch(preferences, fn, {
     flush: 'post'
   })

front/src/composables/navigation/usePage.ts

@@ -2,12 +2,18 @@ import { useRouteQuery } from '@vueuse/router'
 import { syncRef } from '@vueuse/core'
 import { ref } from 'vue'
 
+/**
+ * Syncs ref `page` with the homonymous route query parameter
+ * @returns {Ref<number>} The page number
+ */
 export default () => {
   const pageQuery = useRouteQuery<string>('page', '1')
-  const page = ref()
+  const page = ref<number>()
   syncRef(pageQuery, page, {
     transform: {
       ltr: (left) => +left,
+      // TODO: Why toString?
+      // @ts-expect-error string vs. number
       rtl: (right) => right.toString()
     }
   })

front/src/composables/navigation/useSmartSearch.ts

@@ -5,11 +5,32 @@ import { refWithControl } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
+/**
+ * Configuration options for the smart search composable.
+ */
 export interface SmartSearchProps {
+  /** Initial query string to populate the search */
   defaultQuery?: string
+  /** Whether to sync search state with the browser URL */
   updateUrl?: boolean
 }
 
+/**
+ * Enables structured search queries like "status:pending category:music" while maintaining
+ * bidirectional sync between raw query strings and parsed tokens. Supports URL synchronization
+ * and programmatic search manipulation.
+ *
+ * @param props - Configuration options for the search behavior
+ * @returns Object containing search methods and reactive query state
+ *
+ * @example
+ * ```ts
+ * const search = useSmartSearch({ updateUrl: true })
+ * search.addSearchToken('status', 'pending')
+ * search.addSearchToken('category', 'music')
+ * // Generates query: "status:pending category:music"
+ * ```
+ */
 export default (props: SmartSearchProps) => {
   const query = refWithControl(props.defaultQuery ?? '')
   const tokens = ref([] as Token[])
@@ -19,6 +40,13 @@ export default (props: SmartSearchProps) => {
   }, { immediate: true })
 
   const updateHandlers = new Set<() => void>()
+
+  /**
+   * Calls a function whenever search tokens have changed.
+   *
+   * @param fn - Callback function
+   * @returns Cleanup function to unregister the callback
+   */
   const onSearch = (fn: () => void) => {
     updateHandlers.add(fn)
     return () => updateHandlers.delete(fn)
@@ -40,6 +68,13 @@ export default (props: SmartSearchProps) => {
     // this.fetchData()
   }, { deep: true })
 
+  /**
+   * Retrieves the value of a specific search token by its field key.
+   *
+   * @param key - The field name to search for (e.g., 'status', 'category')
+   * @param fallback - Default value to return if the token is not found
+   * @returns The token's value if found, otherwise the fallback value
+   */
   const getTokenValue = (key: string, fallback: string) => {
     const matching = tokens.value.find(token => {
       return token.field === key
@@ -48,6 +83,16 @@ export default (props: SmartSearchProps) => {
     return matching?.value ?? fallback
   }
 
+  /**
+   * Adds or updates a search token with the specified field and value.
+   *
+   * If the value is empty, removes all tokens with the given field.
+   * If tokens with the field already exist, updates their values.
+   * If no tokens with the field exist, creates a new token.
+   *
+   * @param key - The field name for the search token
+   * @param value - The value for the search token (empty string removes the token)
+   */
   const addSearchToken = (key: string, value: string) => {
     if (value === '') {
       tokens.value = tokens.value.filter(token => {

front/src/composables/onKeyboardShortcut.ts

@@ -20,7 +20,7 @@ useEventListener(window, 'keydown', (event) => {
   if (!event.key) return
 
   const target = event.target as HTMLElement
-  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return
+  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) return
 
   current.add(event.key.toLowerCase())
 

front/src/composables/screen.ts

+import {
+  type MaybeRefOrGetter,
+  createGlobalState,
+  toValue,
+  useWindowSize
+} from '@vueuse/core'
+import { computed } from 'vue'
+
+const MOBILE_WIDTH = 640
+
+export const useScreenSize = createGlobalState(() =>
+  useWindowSize({ includeScrollbar: false })
+)
+export const isMobileView = (
+  width: MaybeRefOrGetter<number> = useScreenSize().width
+) =>
+  computed(() => (toValue(width) ?? Number.POSITIVE_INFINITY) <= MOBILE_WIDTH)

front/src/composables/useWebSocketHandler.ts

-import type { Notification } from '~/types'
+import type { Notification, Track } from '~/types'
 
 import store from '~/store'
 import { tryOnScopeDispose } from '@vueuse/core'
@@ -50,7 +50,8 @@ function useWebSocketHandler (eventName: 'mutation.created', handler: (event: Pe
 function useWebSocketHandler (eventName: 'mutation.updated', handler: (event: PendingReviewEdits) => void): stopFn
 function useWebSocketHandler (eventName: 'import.status_updated', handler: (event: ImportStatusWS) => void): stopFn
 function useWebSocketHandler (eventName: 'user_request.created', handler: (event: PendingReviewRequests) => void): stopFn
-function useWebSocketHandler (eventName: 'Listen', handler: (event: ListenWS) => void): stopFn
+function useWebSocketHandler (eventName: 'Listen', handler: (event: unknown) => void): stopFn
+function useWebSocketHandler (eventName: 'playlist.track_updated', handler: (event: {track: Track}) => void): stopFn
 
 function useWebSocketHandler (eventName: string, handler: (event: any) => void): stopFn {
   const id = `${+new Date() + Math.random()}`

front/src/composables/width.ts

+import type { Entries, KeysOfUnion } from 'type-fest'
+import type { HTMLAttributes } from 'vue'
+
+export type WidthProps =
+  | { minContent?: true }
+  | { iconWidth?: true }
+  | { tiny?: true }
+  | { buttonWidth?: true }
+  | { small?: true }
+  | { medium?: true }
+  | { larger?: true }
+  | { auto?: true }
+  | { full?: true }
+  | { grow?: true }
+  | { width?: string }
+  | { square?: true }
+  | { squareSmall?: true }
+  | { lowHeight?: true }
+  | { normalHeight?: true }
+  | { circular? : true }
+export type Key = KeysOfUnion<WidthProps>
+
+const widths = {
+  minContent: 'width: min-content; flex-grow: 0;',
+  iconWidth: 'width: 40px;',
+  tiny: 'width: 124px; --grid-column: span 2;',
+  buttonWidth: 'width: 136px; --grid-column: span 2; flex-grow: 0; min-width: min-content;',
+  small: 'width: 202px; --grid-column: span 3;',
+  medium: 'width: 280px; --grid-column: span 4;',
+  larger: 'width: 358px; --grid-column: span 5;',
+  auto: 'width: auto;',
+  full: 'width: auto; --grid-column: 1 / -1; place-self: stretch;',
+  grow: 'flex-grow: 1;',
+  circular: 'border-radius: 100%;',
+  width: (w: string) => `width: ${w}; flex-grow:0;`
+} as const
+
+const sizes = {
+  squareSmall: 'height: 40px; width: 40px; padding: 4px; justify-content: center;',
+  square: 'height: 48px; width: 48px; justify-content: center;',
+  lowHeight: 'height: 40px;',
+  normalHeight: 'height: 48px;'
+} as const
+
+const styles = {
+  ...widths, ...sizes
+} as const satisfies Record<Key, string | ((w: string) => string)>
+
+// The `lint:tsc` script more errors here than the language server is happy.
+// TODO: Fix this Issue: https://dev.funkwhale.audio/funkwhale/funkwhale/-/issues/2437
+const getStyle = (props: Partial<WidthProps>) => (key: Key):string =>
+  key in props
+    ? typeof styles[key] === 'function'
+      // @ts-expect-error Typescript is hard. Make the typescript compiler understand `key in props`
+      ? styles[key](props[key])
+      : styles[key] as string
+    : ''
+
+// All keys are exclusive
+const conflicts: Set<Key>[] = [
+  new Set(Object.keys(widths) as Key[]),
+  new Set(Object.keys(sizes) as Key[])
+]
+
+const merge = (rules: string[]) => (attributes: HTMLAttributes = {}) =>
+  rules.length === 0
+    ? attributes
+    : ({
+        ...attributes,
+        style: rules.join(' ') + ('style' in attributes ? ' ' + attributes.style : '')
+      })
+
+/**
+ * Add a width style to your component.
+ * Widths are designed to work both in a page-grid context and in a flex or normal context.
+ *
+ * (1) Add `& WidthProps` to your `Props` type
+ * (2) Call `v-bind="width(props)"` on your component template
+ * (3) Now your component accepts width props such as `small`, `medium`, `stretch`.
+ *
+ * @param props Your component's props (or ...rest props if you have destructured them already)
+ * @param defaults These props are applied immediately and can be overridden by the user
+ * @param attributes Optional: To compose width, color, alignment, etc.
+ * @returns the corresponding `{ style }` object
+ */
+export const width = <TProps extends Partial<WidthProps>>(
+  props: TProps,
+  defaults: Key[] = []
+) => merge(
+    (Object.entries(props) as Entries<TProps>).reduce(
+      (acc, [key, value]) =>
+        value && key in styles
+          ? acc.filter(accKey => !conflicts.find(set => set.has(accKey) && set.has(key)))
+            .concat([key])
+          : acc
+      ,
+      defaults
+    ).map(getStyle(props))
+  )

front/src/generated/schema.yml

+../../../api/funkwhale_api/common/schema.yml
\ No newline at end of file

front/src/init/axios.ts

@@ -5,7 +5,6 @@ import { parseAPIErrors } from '~/utils'
 import { i18n } from './locale'
 
 import createAuthRefreshInterceptor from 'axios-auth-refresh'
-import moment from 'moment'
 import axios from 'axios'
 
 import useLogger from '~/composables/useLogger'
@@ -61,23 +60,31 @@ export const install: InitModule = ({ store, router }) => {
         break
 
       case 429: {
-        let message
+        let message = ''
+
+        // TODO: Find out if the following fields are still relevant
         const rateLimitStatus: RateLimitStatus = {
           limit: error.response?.headers['x-ratelimit-limit'],
-          scope: error.response?.headers['x-ratelimit-scope'],
+          // scope: error.response?.headers['x-ratelimit-scope'],
           remaining: error.response?.headers['x-ratelimit-remaining'],
           duration: error.response?.headers['x-ratelimit-duration'],
-          availableSeconds: parseInt(error.response?.headers['retry-after'] ?? '60'),
+          // availableSeconds: parseInt(error.response?.headers['retry-after'] ?? '60'),
           reset: error.response?.headers['x-ratelimit-reset'],
-          resetSeconds: error.response?.headers['x-ratelimit-resetseconds']
+          // resetSeconds: error.response?.headers['x-ratelimit-resetseconds']
+          // The following fields were missing:
+          id: '',
+          rate: '',
+          description: '',
+          available: 0,
+          available_seconds: 0,
+          reset_seconds: 0
         }
 
-        if (rateLimitStatus.availableSeconds) {
-          const tryAgain = moment().add(rateLimitStatus.availableSeconds, 's').toNow(true)
-          message = t('init.axios.rateLimitDelay', { delay: tryAgain })
-        } else {
         message = t('init.axios.rateLimitLater')
-        }
+        // if (rateLimitStatus.availableSeconds) {
+        //   const tryAgain = moment().add(rateLimitStatus.availableSeconds, 's').toNow(true)
+        //   message = t('init.axios.rateLimitDelay', { delay: tryAgain })
+        // }
 
         error.backendErrors.push(message)
         error.isHandled = true

front/src/init/directives.ts

 import type { InitModule } from '~/types'
 
-import { setupDropdown } from '~/utils/fomantic'
-
 export const install: InitModule = ({ app, store }) => {
   app.directive('title', function (el, binding) {
     store.commit('ui/pageTitle', binding.value)
   })
-
-  app.directive('dropdown', (element) => setupDropdown(element))
 }

front/src/init/instance.ts

-import type { NodeInfo } from '~/store/instance'
+import type { components } from '~/generated/types'
 import type { InitModule } from '~/types'
 
 import { whenever } from '@vueuse/core'
@@ -15,7 +15,7 @@ export const install: InitModule = async ({ store, router }) => {
   const fetchNodeInfo = async () => {
     try {
       const [{ data }] = await Promise.all([
-        axios.get<NodeInfo>('instance/nodeinfo/2.1/'),
+        axios.get<components['schemas']['NodeInfo21']>('instance/nodeinfo/2.1/'),
         store.dispatch('instance/fetchSettings')
       ])