Merge branch 'renovate/front-all-dependencies' into 'develop'

chore(front): update all dependencies NOCHANGELOG

See merge request funkwhale/funkwhale!2916

.gitlab-ci.yml

@@ -95,7 +95,7 @@ review_front:
     - if: $CI_PIPELINE_SOURCE == "merge_request_event"
       when: manual
 
-  image: $CI_REGISTRY/funkwhale/ci/node-python:18
+  image: $CI_REGISTRY/funkwhale/ci/node-python:22
   variables:
     BASE_URL: /-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/front-review/
     VUE_APP_ROUTER_BASE_URL: /-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/front-review/
@@ -202,7 +202,7 @@ lint_front:
     - if: $CI_COMMIT_BRANCH =~ /(stable|develop)/
     - changes: [front/**/*]
 
-  image: $CI_REGISTRY/funkwhale/ci/node-python:18
+  image: $CI_REGISTRY/funkwhale/ci/node-python:22
   cache:
     - *yarn_cache
     - *node_cache
@@ -290,7 +290,7 @@ test_front:
     - if: $CI_COMMIT_BRANCH =~ /(stable|develop)/
     - changes: [front/**/*]
 
-  image: $CI_REGISTRY/funkwhale/ci/node-python:18
+  image: $CI_REGISTRY/funkwhale/ci/node-python:22
   cache:
     - *yarn_cache
     - *node_cache
@@ -417,7 +417,7 @@ build_front:
     - if: $CI_COMMIT_BRANCH =~ /(stable|develop)/
     - changes: [front/**/*]
 
-  image: $CI_REGISTRY/funkwhale/ci/node-python:18
+  image: $CI_REGISTRY/funkwhale/ci/node-python:22
   variables:
     <<: *keep_git_files_permissions
     NODE_OPTIONS: --max-old-space-size=4096

front/Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=$BUILDPLATFORM node:18-alpine AS builder
+FROM --platform=$BUILDPLATFORM node:22-alpine AS builder
 
 RUN apk add --no-cache jq bash coreutils python3 build-base
 
@@ -13,7 +13,7 @@ COPY src /app/src
 COPY index.html pwa-manifest.json tsconfig.json vite.config.ts /app/
 RUN yarn build:deployment
 
-FROM nginx:1.23.4-alpine AS production
+FROM nginx:1.28.0-alpine AS production
 
 COPY --from=builder /app/dist /usr/share/nginx/html
 COPY docker/funkwhale.conf.template /etc/nginx/templates/default.conf.template

front/package.json

@@ -29,45 +29,45 @@
     "@sentry/vue": "7.47.0",
     "@tauri-apps/api": "2.0.0-beta.1",
     "@types/jsmediatags": "3.9.6",
-    "@vue/runtime-core": "3.3.11",
+    "@vue/runtime-core": "3.5.14",
-    "@vueuse/components": "10.6.1",
+    "@vueuse/components": "10.11.1",
-    "@vueuse/core": "10.6.1",
+    "@vueuse/core": "10.11.1",
-    "@vueuse/integrations": "10.6.1",
+    "@vueuse/integrations": "10.11.1",
-    "@vueuse/math": "10.6.1",
+    "@vueuse/math": "10.11.1",
-    "@vueuse/router": "10.6.1",
+    "@vueuse/router": "10.11.1",
-    "axios": "1.7.2",
+    "axios": "1.9.0",
     "axios-auth-refresh": "3.3.6",
     "butterchurn": "3.0.0-beta.4",
     "butterchurn-presets": "3.0.0-beta.4",
-    "diff": "5.1.0",
+    "diff": "5.2.0",
-    "dompurify": "3.2.4",
+    "dompurify": "3.2.5",
-    "focus-trap": "7.2.0",
+    "focus-trap": "7.6.4",
-    "idb-keyval": "6.2.1",
+    "idb-keyval": "6.2.2",
     "jquery": "3.7.1",
     "jsmediatags": "3.9.7",
     "lodash-es": "4.17.21",
-    "lru-cache": "10.2.0",
+    "lru-cache": "10.4.3",
-    "magic-regexp": "0.8.0",
+    "magic-regexp": "0.10.0",
-    "moment": "2.29.4",
+    "moment": "2.30.1",
-    "music-metadata-browser": "2.5.10",
+    "music-metadata-browser": "2.5.11",
-    "nanoid": "5.0.4",
+    "nanoid": "5.1.5",
-    "pinia": "2.1.7",
+    "pinia": "2.3.1",
     "showdown": "2.1.0",
     "stacktrace-js": "2.0.2",
-    "standardized-audio-context": "25.3.60",
+    "standardized-audio-context": "25.3.77",
     "text-clipper": "2.2.0",
     "transliteration": "2.3.5",
-    "type-fest": "4.30.1",
+    "type-fest": "4.41.0",
     "universal-cookie": "4.0.4",
-    "vite-plugin-pwa": "0.14.4",
+    "vite-plugin-pwa": "0.21.2",
-    "vue": "3.5.13",
+    "vue": "3.5.14",
-    "vue-dompurify-html": "5.2.0",
+    "vue-dompurify-html": "5.3.0",
     "vue-gettext": "2.1.12",
-    "vue-i18n": "9.9.1",
+    "vue-i18n": "9.14.4",
-    "vue-router": "4.2.5",
+    "vue-router": "4.5.1",
-    "vue-upload-component": "3.1.8",
+    "vue-upload-component": "3.1.17",
     "vue-virtual-scroller": "2.0.0-beta.8",
-    "vue3-gettext": "2.3.4",
+    "vue3-gettext": "2.4.0",
     "vue3-lazyload": "0.3.8",
     "vuedraggable": "4.1.0",
     "vuex": "4.1.0",
@@ -76,59 +76,59 @@
   },
   "devDependencies": {
     "@faker-js/faker": "8.4.1",
-    "@iconify/vue": "4.1.1",
+    "@iconify/vue": "4.3.0",
     "@intlify/eslint-plugin-vue-i18n": "2.0.0",
     "@intlify/unplugin-vue-i18n": "2.0.0",
     "@tauri-apps/cli": "^2.0.2",
-    "@types/diff": "5.0.9",
+    "@types/diff": "5.2.3",
-    "@types/dompurify": "3.0.5",
+    "@types/dompurify": "3.2.0",
-    "@types/jquery": "3.5.29",
+    "@types/jquery": "3.5.32",
     "@types/lodash-es": "4.17.12",
     "@types/moxios": "0.4.17",
-    "@types/qs": "6.9.10",
+    "@types/qs": "6.9.18",
     "@types/semantic-ui": "2.2.9",
     "@types/showdown": "2.0.6",
     "@types/vue-virtual-scroller": "npm:@earltp/vue-virtual-scroller",
     "@typescript-eslint/eslint-plugin": "7.1.0",
-    "@vitejs/plugin-vue": "5.1.4",
+    "@vitejs/plugin-vue": "5.2.4",
     "@vitest/coverage-v8": "1.3.1",
-    "@vue-macros/common": "1.15.1",
+    "@vue-macros/common": "1.16.1",
-    "@vue-macros/volar": "0.17.2",
+    "@vue-macros/volar": "0.30.15",
-    "@vue/compiler-sfc": "3.3.11",
+    "@vue/compiler-sfc": "3.5.14",
     "@vue/eslint-config-standard": "8.0.1",
     "@vue/eslint-config-typescript": "12.0.0",
-    "@vue/test-utils": "2.4.1",
+    "@vue/test-utils": "2.4.6",
-    "@vue/tsconfig": "0.6.0",
+    "@vue/tsconfig": "0.7.0",
-    "cypress": "13.6.4",
+    "cypress": "13.17.0",
     "eslint": "8.57.0",
     "eslint-config-standard": "17.1.0",
     "eslint-plugin-html": "8.1.2",
-    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-import": "2.31.0",
     "eslint-plugin-n": "16.6.2",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-promise": "6.6.0",
-    "eslint-plugin-vue": "9.22.0",
+    "eslint-plugin-vue": "9.33.0",
-    "jsdom": "24.0.0",
+    "jsdom": "24.1.3",
     "jsonc-eslint-parser": "2.4.0",
-    "msw": "2.2.1",
+    "msw": "2.8.2",
-    "msw-auto-mock": "0.18.0",
+    "msw-auto-mock": "0.31.0",
-    "openapi-typescript": "7.6.0",
+    "openapi-typescript": "7.8.0",
     "patch-package": "8.0.0",
-    "rollup-plugin-visualizer": "5.9.0",
+    "rollup-plugin-visualizer": "5.14.0",
-    "sass": "1.68.0",
+    "sass": "1.88.0",
-    "sinon": "15.0.2",
+    "sinon": "15.2.0",
-    "standardized-audio-context-mock": "9.6.32",
+    "standardized-audio-context-mock": "9.7.21",
-    "typescript": "5.3.3",
+    "typescript": "5.2.2",
     "unocss": "0.58.0",
-    "unplugin-vue-macros": "2.6.2",
+    "unplugin-vue-macros": "2.14.5",
-    "utility-types": "3.10.0",
+    "utility-types": "3.11.0",
-    "vite": "5.2.12",
+    "vite": "5.4.19",
-    "vite-plugin-node-polyfills": "0.17.0",
+    "vite-plugin-node-polyfills": "0.23.0",
-    "vite-plugin-pwa": "0.14.4",
+    "vite-plugin-pwa": "0.21.2",
     "vite-plugin-vue-devtools": "^7.5.2",
-    "vitepress": "1.5.0",
+    "vitepress": "1.6.3",
     "vitest": "1.3.1",
-    "vue-tsc": "1.8.27",
+    "vue-tsc": "2.2.10",
     "workbox-core": "6.5.4",
     "workbox-precaching": "6.5.4",
     "workbox-routing": "6.5.4",

front/src/api/player.ts

@@ -38,9 +38,9 @@ export interface Sound {
   onSoundEnd: EventHookOn<Sound>
 }
 
-export const soundImplementations = reactive(new Set<Constructor<Sound>>())
+export const soundImplementations: Set<Constructor<Sound>> = reactive(new Set<Constructor<Sound>>())
 
-export const registerSoundImplementation = <T extends Constructor<Sound>>(implementation: T) => {
+export const registerSoundImplementation = <T extends Sound>(implementation: Constructor<T>): Constructor<T> => {
   soundImplementations.add(implementation)
   return implementation
 }
@@ -49,8 +49,8 @@ export const registerSoundImplementation = <T extends Constructor<Sound>>(implem
 @registerSoundImplementation
 export class HTMLSound implements Sound {
   #audio = new Audio()
-  #soundLoopEventHook = createEventHook<HTMLSound>()
+  #soundLoopEventHook = createEventHook<Sound>()
-  #soundEndEventHook = createEventHook<HTMLSound>()
+  #soundEndEventHook = createEventHook<Sound>()
   #ignoreError = false
   #scope = effectScope()
 
@@ -59,8 +59,8 @@ export class HTMLSound implements Sound {
   readonly isDisposed = ref(false)
 
   audioNode = createAudioSource(this.#audio)
-  onSoundLoop: EventHookOn<HTMLSound>
+  onSoundLoop: EventHookOn<Sound>
-  onSoundEnd: EventHookOn<HTMLSound>
+  onSoundEnd: EventHookOn<Sound>
 
   constructor (sources: SoundSource[]) {
     this.onSoundLoop = this.#soundLoopEventHook.on

front/src/components/Queue.vue

@@ -90,6 +90,7 @@ watchEffect(async () => {
 const list = ref()
 const el = useCurrentElement()
 const scrollToCurrent = (behavior: ScrollBehavior = 'smooth') => {
+  if (!(el.value instanceof HTMLElement)) return
   const item = el.value?.querySelector('.queue-item.active')
   item?.scrollIntoView({
     behavior,

front/src/components/common/UserLink.vue

@@ -28,7 +28,7 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${userColor.valu
 
 <template>
   <Link
-    :to="user"
+    :to="{name: 'profile.overview', params: {username: user.full_username}}"
     :title="user.full_username"
     class="username"
     :solid="!discrete"

front/src/components/library/FileUpload.vue

@@ -589,7 +589,7 @@ const isServerDisclosureOpen = ref(false)
         v-model="fsPath"
         :loading="isLoadingFs"
         :data="fsStatus"
-        @import="importFs"
+        @use="importFs"
       />
       <template v-if="fsStatus && fsStatus.import">
         <h3 class="ui header">

front/src/components/playlist/Card.vue

@@ -74,5 +74,5 @@ if (import.meta.env.PROD) {
 </template>
 
 <style lang="scss">
-@import './style.scss'
+@use './style.scss'
 </style>

front/src/components/podcast/Card.vue

@@ -27,5 +27,5 @@ const timeAgo = useTimeAgo(new Date(podcast.artist?.modification_date ?? new Dat
 </template>
 
 <style lang="scss">
-@import './style.scss'
+@use './style.scss'
 </style>

front/src/components/radio/Card.vue

@@ -41,5 +41,5 @@ const { radio, small, ...cardProps } = defineProps<{
 </template>
 
 <style lang="scss">
-@import './style.scss'
+@use './style.scss'
 </style>

front/src/components/ui/Activity.vue

@@ -69,5 +69,5 @@ const profileParams = computed(() => {
 </template>
 
 <style lang="scss">
-@import './activity.scss'
+@use './activity.scss'
 </style>

front/src/components/ui/Alert.vue

@@ -32,5 +32,5 @@ const props = defineProps<Props>()
 </template>
 
 <style lang="scss">
-@import './alert.scss'
+@use './alert.scss'
 </style>

front/src/components/ui/Header.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ComponentProps } from 'vue-component-type-helpers'
+import { computed } from 'vue'
 
 import Layout from '~/components/ui/Layout.vue'
 import Spacer from '~/components/ui/Spacer.vue'
@@ -15,7 +16,7 @@ const props = defineProps<{
   alignLeft?: boolean
   action?: { text: string } & (ComponentProps<typeof Link> | ComponentProps<typeof Button>)
   icon?: string
-  noGap?: false
+  noGap?: boolean
 } & {
   [H in `h${ '1' | '2' | '3' | '4' | '5' | '6' }`]? : string
 } & {
@@ -23,6 +24,13 @@ const props = defineProps<{
 } & {
   [Operation in 'expand' | 'collapse']?: () => void
 }>()
+
+const noGap = computed(() => {
+  const noGapValue = (props as { noGap?: boolean }).noGap
+  return noGapValue === true
+})
+
+const gap8 = computed(() => !noGap.value)
 </script>
 
 <template>
@@ -36,8 +44,8 @@ const props = defineProps<{
     </div>
     <Layout
       stack
-      :gap-8="!(props.noGap as boolean)"
+      :gap-8="gap8"
-      :no-gap="props.noGap"
+      :no-gap="noGap"
       style="flex-grow: 1;"
     >
       <Layout

front/src/components/ui/Input.vue

@@ -156,7 +156,7 @@ const model = defineModel<string|number>({ required: true })
 </template>
 
 <style lang="scss">
-@import './input.scss';
+@use './input.scss';
 
 input[type=number]::-webkit-inner-spin-button {
     opacity: 1;

front/src/components/ui/Link.vue

@@ -14,7 +14,7 @@ const props = defineProps<{
   thinFont?: true
 
   icon?: string;
-  round?: true;
+  round?: boolean;
 
   autofocus? : boolean
   forceUnderline? : true

front/src/components/ui/Loader.vue

@@ -21,5 +21,5 @@ const { container = true } = defineProps<{ container?: boolean }>()
 </template>
 
 <style lang="scss">
-@import './loader.scss'
+@use './loader.scss'
 </style>

front/src/components/ui/Modal.vue

@@ -148,5 +148,5 @@ onKeyboardShortcut('escape', () => { isOpen.value = false })
 </template>
 
 <style lang="scss">
-@import './modal.scss'
+@use './modal.scss'
 </style>

front/src/components/ui/Pagination.vue

@@ -179,5 +179,5 @@ watch(page, (_) => {
 </template>
 
 <style lang="scss">
-@import './pagination.scss'
+@use './pagination.scss'
 </style>

front/src/components/ui/Popover.vue

@@ -159,5 +159,5 @@ watch(isOpen, (isOpen) => {
 </template>
 
 <style lang="scss">
-@import './popover.scss'
+@use './popover.scss'
 </style>

front/src/components/ui/Tabs.vue

@@ -63,5 +63,5 @@ watch(tabs, () => {
 </template>
 
 <style lang="scss">
-@import './tabs.scss'
+@use './tabs.scss'
 </style>

front/src/components/ui/Textarea.vue

@@ -362,5 +362,5 @@ onMounted(() => {
 </template>
 
 <style lang="scss">
-@import './textarea.scss';
+@use './textarea.scss';
 </style>

front/src/components/ui/Toc.vue

@@ -55,5 +55,5 @@ watchEffect(() => {
 </template>
 
 <style lang="scss">
-@import './toc.scss'
+@use './toc.scss'
 </style>

front/src/components/ui/button/Options.vue

@@ -21,5 +21,5 @@ defineProps<{
 </template>
 
 <style lang="scss">
-@import './options.scss'
+@use './options.scss'
 </style>

front/src/components/ui/button/Play.vue

@@ -15,5 +15,5 @@ const play = defineEmits(['play'])
 </template>
 
 <style lang="scss">
-@import './play.scss';
+@use './play.scss';
 </style>

front/src/components/vui/list/VirtualList.vue

@@ -61,11 +61,11 @@ const onTouchmove = (event: TouchEvent) => {
   }
 }
 
-document.addEventListener('touchcancel', (event: TouchEvent) => {
+document.addEventListener('touchcancel', (_event: TouchEvent) => {
   cleanup()
 })
 
-const reorder = (event: MouseEvent | TouchEvent) => {
+const reorder = (_event: MouseEvent | TouchEvent) => {
   if (draggedItem.value) {
     const from = draggedItem.value.index
     let to = hoveredIndex.value
@@ -155,6 +155,7 @@ const { resume, pause } = useRafFn(() => {
   const now = +new Date()
   const direction = scrollDirection.value
 
+  if (!(el.value instanceof HTMLElement)) return
   if (direction && el.value?.children[0] && !isTouch.value) {
     el.value.children[0].scrollTop += 200 / (now - lastDate) * (direction === 'up' ? -1 : 1)
   }

front/src/style/_main.scss

@@ -3,60 +3,60 @@ $desktop-sidebar-width: 275px;
 $widedesktop-sidebar-width: 275px;
 $bottom-player-height: 4rem;
 
-@import "./vendor/_media.scss";
+@use "./vendor/_media.scss";
 
-@import "./globals/_app.scss";
+@use "./globals/_app.scss";
-@import "./globals/_channels.scss";
+@use "./globals/_channels.scss";
-@import "./globals/_layout.scss";
+@use "./globals/_layout.scss";
-@import "./globals/_utils.scss";
+@use "./globals/_utils.scss";
 
-@import "./components/_action_table.scss";
+@use "./components/_action_table.scss";
-@import "./components/_album_card.scss";
+@use "./components/_album_card.scss";
-@import "./components/_attachment_input.scss";
+@use "./components/_attachment_input.scss";
-@import "./components/_avatar.scss";
+@use "./components/_avatar.scss";
-@import "./components/_builder.scss";
+@use "./components/_builder.scss";
-@import "./components/_button.scss";
+@use "./components/_button.scss";
-@import "./components/_card.scss";
+@use "./components/_card.scss";
-@import "./components/_content_form.scss";
+@use "./components/_content_form.scss";
-@import "./components/_copy_input.scss";
+@use "./components/_copy_input.scss";
-@import "./components/_empty_state.scss";
+@use "./components/_empty_state.scss";
-@import "./components/_favorite.scss";
+@use "./components/_favorite.scss";
-@import "./components/_form.scss";
+@use "./components/_form.scss";
-@import "./components/_file_upload.scss";
+@use "./components/_file_upload.scss";
-@import "./components/_fs_browser.scss";
+@use "./components/_fs_browser.scss";
-@import "./components/_fs_logs.scss";
+@use "./components/_fs_logs.scss";
-@import "./components/_header.scss";
+@use "./components/_header.scss";
-@import "./components/_label.scss";
+@use "./components/_label.scss";
-@import "./components/_modal.scss";
+@use "./components/_modal.scss";
-@import "./components/_pagination.scss";
+@use "./components/_pagination.scss";
-@import "./components/_placeholder.scss";
+@use "./components/_placeholder.scss";
-@import "./components/_play_button.scss";
+@use "./components/_play_button.scss";
-@import "./components/_play_indicator.scss";
+@use "./components/_play_indicator.scss";
-@import "./components/_player.scss";
+@use "./components/_player.scss";
-@import "./components/_playlist_editor.scss";
+@use "./components/_playlist_editor.scss";
-@import "./components/_queue.scss";
+@use "./components/_queue.scss";
-@import "./components/_settings_group.scss";
+@use "./components/_settings_group.scss";
-@import "./components/_search.scss";
+@use "./components/_search.scss";
-@import "./components/_sidebar.scss";
+@use "./components/_sidebar.scss";
-@import "./components/_table.scss";
+@use "./components/_table.scss";
-@import "./components/_tags_list.scss";
+@use "./components/_tags_list.scss";
-@import "./components/_tooltip.scss";
+@use "./components/_tooltip.scss";
-@import "./components/_track_widget.scss";
+@use "./components/_track_widget.scss";
-@import "./components/_track_table.scss";
+@use "./components/_track_table.scss";
-@import "./components/_user_link.scss";
+@use "./components/_user_link.scss";
-@import "./components/user_modal.scss";
+@use "./components/user_modal.scss";
-@import "./components/_volume_control.scss";
+@use "./components/_volume_control.scss";
-@import "./components/_loaders.scss";
+@use "./components/_loaders.scss";
 
-@import "./pages/_about.scss";
+@use "./pages/_about.scss";
-@import "./pages/_admin_account_detail.scss";
+@use "./pages/_admin_account_detail.scss";
-@import "./pages/_admin_domain_detail.scss";
+@use "./pages/_admin_domain_detail.scss";
-@import "./pages/_admin_library.scss";
+@use "./pages/_admin_library.scss";
-@import "./pages/_artists.scss";
+@use "./pages/_artists.scss";
-@import "./pages/_home.scss";
+@use "./pages/_home.scss";
-@import "./pages/_library.scss";
+@use "./pages/_library.scss";
-@import "./pages/_notifications.scss";
+@use "./pages/_notifications.scss";
-@import "./pages/_profile.scss";
+@use "./pages/_profile.scss";
 
-@import "./themes/light/_main.scss";
+@use "./themes/light/_main.scss";
-@import "./themes/dark/_main.scss";
+@use "./themes/dark/_main.scss";

front/src/style/base/generic.scss

@@ -1,7 +1,9 @@
+@use "../inc/theme";
+
 // Links
 %link,
 .funkwhale.link {
-  @include light-theme {
+  @include theme.light-theme {
     --fw-link-color: var(--fw-blue-400);
     --fw-link-hover-color: var(--fw-blue-500);
 
@@ -11,7 +13,7 @@
     }
   }
 
-  @include dark-theme {
+  @include theme.dark-theme {
     --fw-link-color: var(--fw-gray-300);
     --fw-link-hover-color: var(--fw-gray-400);
 
@@ -53,11 +55,11 @@
   border: none;
   border-bottom: 1px solid var(--fw-border-color);
 
-  @include light-theme {
+  @include theme.light-theme {
     --fw-border-color: var(--fw-gray-200);
   }
 
-  @include dark-theme {
+  @include theme.dark-theme {
     --fw-border-color: var(--fw-gray-800);
   }
 

front/src/style/base/index.scss

@@ -1 +1 @@
-@import "generic"
+@use "generic"

front/src/style/font.scss

@@ -1,4 +1,4 @@
-@import url("~/style/bootstrap-icons/font/bootstrap-icons.css");
+@use url("~/style/bootstrap-icons/font/bootstrap-icons.css");
 
 @font-face {
   font-family: Lato;

front/src/style/funkwhale.scss

@@ -1,11 +1,11 @@
 @charset "utf-8";
-@import "base/index";
+@use "base/index";
-@import "inc/theme.scss";
+@use "inc/theme.scss";
-@import "font";
+@use "font";
-@import "colors";
+@use "colors";
 
 html, body {
-  font-family: $font-main;
+  font-family: theme.$font-main;
   font-size: 16px;
   margin: 0;
 }

front/src/style/inc/theme.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+@use "sass:selector";
 $font-main: "Lato", sans-serif;
 
 @mixin theme($isDark) {
@@ -12,16 +14,16 @@ $font-main: "Lato", sans-serif;
 
   // If we call `@include dark-theme {}` at the root of the file
   @if & == null {
-    $root-selectors: append($root-selectors, $root-element);
+    $root-selectors: list.append($root-selectors, $root-element);
   } @else {
     // For every selector in selector list
     @each $selector in & {
       // If it is `html`, we add a root rule
       @if #{$selector} == ":root" or #{$selector} == "html" {
-        $root-selectors: append($root-selectors, $root-element, comma);
+        $root-selectors: list.append($root-selectors, $root-element, comma);
         // If it's any other rule, we append it to the root rule
       } @else {
-        $root-selectors: append($root-selectors, "#{selector-nest($root-element, $selector)}", comma);
+        $root-selectors: list.append($root-selectors, "#{selector.nest($root-element, $selector)}", comma);
       }
     }
 

front/src/style/themes/dark/_main.scss

@@ -3,5 +3,5 @@
 
 .theme-dark {
   $fwVars: meta.module-variables("vars");
-  @import "../../_css_vars.scss";
+  @use "../../_css_vars.scss";
 }

front/src/style/themes/dark/_vars.scss

@@ -30,4 +30,4 @@ $secondary-menu-active-item-color: $text-color;
 $segment-background: $light-background-color;
 $table-background: $input-background;
 
-@import "../../_vars";
+@use "../../_vars";

front/src/style/themes/light/_main.scss

@@ -4,6 +4,6 @@
 $fwVars: meta.module-variables("vars");
 .theme-light {
   & {
-    @import "../../_css_vars.scss";
+    @use "../../_css_vars.scss";
   }
 }

front/src/ui/modals/Language.vue

@@ -29,7 +29,7 @@ const isOpen = useModal('language').isOpen
         ghost
         thin-font
         small
-        align-text="left"
+        align-text="start"
         :aria-pressed="key===locale || undefined"
         @click="setI18nLanguage(key)"
       >

front/src/ui/modals/Search.vue

@@ -208,7 +208,7 @@ const categories = computed(() => [
       object_uri: trimmedQuery.value
     }
   }
-] as const satisfies {
+] as const satisfies readonly {
   type: Category
   label: string
   post?: true

front/src/views/auth/ManageUploads.vue

@@ -301,7 +301,6 @@ const showUploadDetailModal = ref(false)
       >
         <Slider
           v-model="globalPrivacyLevel"
-          :disabled="selectedItems.length === 0 ? true : undefined"
           :options="options"
           :label="`Privacy level (${ selectedItems.length } items)`"
         />

front/src/views/auth/ProfileBase.vue

@@ -25,16 +25,11 @@ import Nav from '~/components/ui/Nav.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Modal from '~/components/ui/Modal.vue'
 
-interface Events {
-  (e: 'updated', value: components['schemas']['FullActor']): void
-}
-
 interface Props {
   username: string
   domain?: string | null
 }
 
-const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), {
   domain: null
 })

front/src/views/auth/ProfileOverview.vue

@@ -13,10 +13,6 @@ import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
 import Link from '~/components/ui/Link.vue'
 
-interface Events {
-  (e: 'updated', value: Actor): void
-}
-
 interface Props {
   object: Actor | null
 }
@@ -25,7 +21,6 @@ const store = useStore()
 const { t } = useI18n()
 const router = useRouter()
 
-const emit = defineEmits<Events>()
 defineProps<Props>()
 
 const step = ref(1)

front/src/views/channels/DetailEpisodes.vue

@@ -13,7 +13,7 @@ defineProps<Props>()
 <template>
   <section>
     <channel-entries
-      :default-cover="object.artist?.cover"
+      :default-cover="object.artist?.cover || null"
       :is-podcast="object.artist?.content_category === 'podcast'"
       :limit="25"
       :filters="{channel: object.uuid, ordering: 'creation_date'}"

front/src/views/playlists/Detail.vue

@@ -222,7 +222,7 @@ const shuffle = () => {}
       />
       <playlist-dropdown
         :playlist="playlist"
-        @import="fetchData"
+        @use="fetchData"
       />
     </Layout>
   </Header>

front/tsconfig.json

@@ -20,14 +20,12 @@
     }
   },
   "include": [
-    "**/*.md",
     "src/**/*.ts",
     "src/**/*.vue",
     "vite.config.ts",
     "test/**/*.ts",
     "src/docs/vite.config.ts",
-    "src/docs/**/*.ts",
+    "src/docs/**/*.ts"
-    "ui-docs/**/*.md"
   ],
   "vueCompilerOptions": {
     "vitePressExtensions": [".md"],

front/ui-docs/vite.config.ts

@@ -20,9 +20,9 @@ export default defineConfig({
       scss: {
         additionalData: `
           $docs: ${!!process.env.VP_DOCS};
-          @import "~/style/inc/theme.scss";
+          @use "~/style/inc/theme.scss";
-          @import "~/style/inc/docs.scss";
+          @use "~/style/inc/docs.scss";
-          @import "~/style/funkwhale.scss";
+          @use "~/style/funkwhale.scss";
         `
       }
     }

front/vite.config.ts

@@ -65,7 +65,8 @@ export default defineConfig(({ mode }) => ({
     port: +(process.env.VUE_PORT ?? 8080),
     watch: {
       usePolling: true
-    }
+    },
+    allowedHosts: ['.funkwhale.test']
   },
   resolve: {
     alias: [
@@ -80,8 +81,8 @@ export default defineConfig(({ mode }) => ({
         additionalData: `
           $docs: ${!!process.env.VP_DOCS};
           @use "~/style/_vars" as *;
-          @import "~/style/inc/theme";
+          @use "~/style/inc/theme";
-          @import "~/style/funkwhale";
+          @use "~/style/funkwhale";
         `
       }
     }