Compare revisions

Kasper Seweryn · Kasper Seweryn · Kasper Seweryn · Kasper Seweryn · Kasper Seweryn · Kasper Seweryn
--- a/TRANSLATORS.rst
+++ b/TRANSLATORS.rst
@@ -28,7 +28,7 @@ Submitting a new language

 1. Pull the latest version of ``develop``
 2. Create a new branch, e.g ``git checkout -b translations-new-fr-ca``
-3. Add your new language code and name in ``front/src/locales.js``. Use the native language name, as it is what appears in the UI selector.
+3. Add your new language code and name in ``front/src/locales.json``. Use the native language name, as it is what appears in the UI selector.
 4. Create the ``po`` file from template:

 .. code-block:: shell

--- a/front/.eslintrc.js
+++ b/front/.eslintrc.js
@@ -5,7 +5,9 @@ module.exports = {
  },
  extends: [
    'plugin:vue/recommended',
-    'standard'
+    '@vue/typescript/recommended',
+    '@vue/standard'
+
  ],
  globals: {
    Atomics: 'readonly',
@@ -13,13 +15,19 @@ module.exports = {
  },
  parserOptions: {
    ecmaVersion: 2020,
-    sourceType: 'module',
+    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
-    "vue/no-v-html": "off", // TODO: tackle this properly
-    "vue/no-use-v-if-with-v-for": "off"
+    'vue/no-v-html': 'off', // TODO: tackle this properly
+    'vue/no-use-v-if-with-v-for': 'off',
+
+    '@typescript-eslint/ban-ts-comment': 'off',
+    'no-undef': 'off',
+    // TODO (wvffle): Enable typescript rules later
+    '@typescript-eslint/no-this-alias': 'off',
+    '@typescript-eslint/no-empty-function': 'off'
  }
 }
--- a/front/index.html
+++ b/front/index.html
@@ -8,7 +8,6 @@
  <meta name="generator" content="Funkwhale">
  <link rel="icon" href="/favicon.png">
  <title>Funkwhale</title>
-  <script type="module" src="/src/main.js"></script>
  <style>
    #fake-app {
      width: 100vw;
@@ -60,7 +59,7 @@
  </style>
 </head>

-<body class="theme-light" id="body">
+<body id="body">
  <div id="fake-app">
    <div id="fake-sidebar">
      <div id="orange-square"></div>
@@ -86,9 +85,8 @@
      </div>
    </div>
  </div>
-  <div id="app">
-  </div>
-  <!-- built files will be auto injected -->
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
 </body>

 </html>
--- a/front/locales/app.pot
+++ b/front/locales/app.pot
--- a/front/package.json
+++ b/front/package.json
@@ -10,7 +10,7 @@
    "build:deployment": "vite build --base /front/",
    "serve": "vite preview",
    "test:unit": "jest",
-    "lint": "eslint --ext .js,.vue src",
+    "lint": "eslint --ext .ts,.js,.vue src",
    "fix-fomantic-css": "scripts/fix-fomantic-css.sh",
    "i18n-compile": "scripts/i18n-compile.sh",
    "i18n-extract": "scripts/i18n-extract.sh",
@@ -26,7 +26,7 @@
    "fomantic-ui-css": "2.8.8",
    "howler": "2.2.3",
    "js-logger": "1.6.1",
-    "lodash": "4.17.21",
+    "lodash-es": "4.17.21",
    "moment": "2.29.2",
    "qs": "6.10.3",
    "register-service-worker": "1.7.2",
@@ -49,6 +49,11 @@
    "@babel/core": "7.17.9",
    "@babel/plugin-transform-runtime": "7.17.0",
    "@babel/preset-env": "7.16.11",
+    "@types/jquery": "3.5.14",
+    "@types/lodash-es": "4.17.6",
+    "@typescript-eslint/eslint-plugin": "5.19.0",
+    "@vue/eslint-config-standard": "6.1.0",
+    "@vue/eslint-config-typescript": "10.0.0",
    "@vue/test-utils": "1.3.0",
    "autoprefixer": "10.4.4",
    "babel-core": "7.0.0-bridge.0",
@@ -66,6 +71,8 @@
    "jest-cli": "27.5.1",
    "moxios": "0.4.0",
    "sinon": "13.0.2",
+    "typescript": "4.6.3",
+    "unplugin-vue2-script-setup": "0.10.2",
    "vite": "2.8.6",
    "vite-plugin-vue2": "1.9.3",
    "vue-jest": "3.0.7",
@@ -133,7 +140,7 @@
      "^.+\\.js$": "babel-jest"
    },
    "moduleNameMapper": {
-      "^@/(.*)$": "<rootDir>/src/$1"
+      "^~/(.*)$": "<rootDir>/src/$1"
    },
    "testEnvironment": "jsdom"
  }

--- a/front/scripts/i18n-compile.sh
+++ b/front/scripts/i18n-compile.sh
@@ -3,7 +3,7 @@
 cd "$(dirname $0)/.." # change into base directory
 source scripts/utils.sh

-locales=$(tail -n +2 src/locales.js | sed -e 's/export default //' | jq '.locales[].code' | grep -v 'en_US' | xargs echo)
+locales=$(jq -r '.[].code' src/locales.json | grep -v 'en_US')
 mkdir -p src/translations

 for locale in $locales; do

--- a/front/scripts/i18n-extract.sh
+++ b/front/scripts/i18n-extract.sh
@@ -3,7 +3,7 @@
 cd "$(dirname $0)/.." # change into base directory
 source scripts/utils.sh

-locales=$(tail -n +2 src/locales.js | sed -e 's/export default //' | jq '.locales[].code' | xargs echo)
+locales=$(jq -r '.[].code' src/locales.json)
 locales_dir="locales"
 sources=$(find src -name '*.vue' -o -name '*.html' 2> /dev/null)
 js_sources=$(find src -name '*.vue' -o -name '*.js')

--- a/front/scripts/i18n-populate-contextualized-strings.sh
+++ b/front/scripts/i18n-populate-contextualized-strings.sh
-#!/usr/bin/env -S bash -eux
-
-# Typical use:
-# cp -r locales old_locales
-# ./scripts/i18n-extract.sh
-# ./scripts/i18n-populate-contextualized-strings.sh old_locales locales
-# Then review/commit the changes
-
-cd "$(dirname $0)/.." # change into base directory
-
-old_locales_dir=$1
-new_locales_dir=$2
-
-locales=$(tail -n +2 src/locales.js | sed -e 's/export default //' | jq '.locales[].code' | xargs echo)
-
-# Generate .po files for each available language.
-echo $locales
-for lang in $locales; do
-    echo "Fixing contexts for $lang…"
-    old_po_file=$old_locales_dir/$lang/LC_MESSAGES/app.po
-    new_po_file=$new_locales_dir/$lang/LC_MESSAGES/app.po
-    python3 ./scripts/contextualize.py $old_po_file $new_po_file --no-dry-run
-done;
--- a/front/src/App.vue
+++ b/front/src/App.vue
--- a/front/src/EmbedFrame.vue
+++ b/front/src/EmbedFrame.vue
@@ -246,9 +246,9 @@

 <script>
 import axios from 'axios'
-import Logo from '@/components/Logo'
-import url from '@/utils/url'
-import time from '@/utils/time'
+import Logo from '~/components/Logo'
+import updateQueryString from './composables/updateQueryString'
+import time from '~/utils/time'

 function getURLParams () {
  let match
@@ -515,7 +515,7 @@ export default {
        // not support other codecs to be able to play it :)
        sources.push({
          type: 'audio/mpeg',
-          src: url.updateQueryString(
+          src: updateQueryString(
            self.fullUrl(sources[0].src),
            'to',
            'mp3'

--- a/front/src/components/About.vue
+++ b/front/src/components/About.vue
@@ -250,12 +250,12 @@

 <script>
 import { mapState } from 'vuex'
-import _ from 'lodash'
+import { get } from 'lodash-es'
 import showdown from 'showdown'
-import { humanSize } from '@/filters'
+import { humanSize } from '~/init/filters'

-import SignupForm from '@/components/auth/SignupForm.vue'
-import LogoText from '@/components/LogoText.vue'
+import SignupForm from '~/components/auth/SignupForm.vue'
+import LogoText from '~/components/LogoText.vue'

 export default {
  components: {
@@ -279,31 +279,31 @@ export default {
      }
    },
    podName () {
-      return _.get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
+      return get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
    },
    banner () {
-      return _.get(this.nodeinfo, 'metadata.banner')
+      return get(this.nodeinfo, 'metadata.banner')
    },
    shortDescription () {
-      return _.get(this.nodeinfo, 'metadata.shortDescription')
+      return get(this.nodeinfo, 'metadata.shortDescription')
    },
    longDescription () {
-      return _.get(this.nodeinfo, 'metadata.longDescription')
+      return get(this.nodeinfo, 'metadata.longDescription')
    },
    rules () {
-      return _.get(this.nodeinfo, 'metadata.rules')
+      return get(this.nodeinfo, 'metadata.rules')
    },
    terms () {
-      return _.get(this.nodeinfo, 'metadata.terms')
+      return get(this.nodeinfo, 'metadata.terms')
    },
    stats () {
      const data = {
-        users: _.get(this.nodeinfo, 'usage.users.activeMonth', null),
-        hours: _.get(this.nodeinfo, 'metadata.library.music.hours', null),
-        artists: _.get(this.nodeinfo, 'metadata.library.artists.total', null),
-        albums: _.get(this.nodeinfo, 'metadata.library.albums.total', null),
-        tracks: _.get(this.nodeinfo, 'metadata.library.tracks.total', null),
-        listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null)
+        users: get(this.nodeinfo, 'usage.users.activeMonth', null),
+        hours: get(this.nodeinfo, 'metadata.library.music.hours', null),
+        artists: get(this.nodeinfo, 'metadata.library.artists.total', null),
+        albums: get(this.nodeinfo, 'metadata.library.albums.total', null),
+        tracks: get(this.nodeinfo, 'metadata.library.tracks.total', null),
+        listenings: get(this.nodeinfo, 'metadata.usage.listenings.total', null)
      }
      if (data.users === null || data.artists === null) {
        return
@@ -311,28 +311,28 @@ export default {
      return data
    },
    contactEmail () {
-      return _.get(this.nodeinfo, 'metadata.contactEmail')
+      return get(this.nodeinfo, 'metadata.contactEmail')
    },
    anonymousCanListen () {
-      return _.get(this.nodeinfo, 'metadata.library.anonymousCanListen')
+      return get(this.nodeinfo, 'metadata.library.anonymousCanListen')
    },
    allowListEnabled () {
-      return _.get(this.nodeinfo, 'metadata.allowList.enabled')
+      return get(this.nodeinfo, 'metadata.allowList.enabled')
    },
    allowListDomains () {
-      return _.get(this.nodeinfo, 'metadata.allowList.domains')
+      return get(this.nodeinfo, 'metadata.allowList.domains')
    },
    version () {
-      return _.get(this.nodeinfo, 'software.version')
+      return get(this.nodeinfo, 'software.version')
    },
    openRegistrations () {
-      return _.get(this.nodeinfo, 'openRegistrations')
+      return get(this.nodeinfo, 'openRegistrations')
    },
    defaultUploadQuota () {
-      return humanSize(_.get(this.nodeinfo, 'metadata.defaultUploadQuota') * 1000 * 1000)
+      return humanSize(get(this.nodeinfo, 'metadata.defaultUploadQuota') * 1000 * 1000)
    },
    federationEnabled () {
-      return _.get(this.nodeinfo, 'metadata.library.federationEnabled')
+      return get(this.nodeinfo, 'metadata.library.federationEnabled')
    },
    headerStyle () {
      if (!this.banner) {

--- a/front/src/components/AboutPod.vue
+++ b/front/src/components/AboutPod.vue
@@ -434,7 +434,7 @@ We render some markdown to html here, the content is set by the admin so we shou

 <script>
 import { mapState } from 'vuex'
-import _ from 'lodash'
+import { get } from 'lodash-es'
 import showdown from 'showdown'

 export default {
@@ -455,31 +455,31 @@ export default {
      }
    },
    podName () {
-      return _.get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
+      return get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
    },
    banner () {
-      return _.get(this.nodeinfo, 'metadata.banner')
+      return get(this.nodeinfo, 'metadata.banner')
    },
    shortDescription () {
-      return _.get(this.nodeinfo, 'metadata.shortDescription')
+      return get(this.nodeinfo, 'metadata.shortDescription')
    },
    longDescription () {
-      return _.get(this.nodeinfo, 'metadata.longDescription')
+      return get(this.nodeinfo, 'metadata.longDescription')
    },
    rules () {
-      return _.get(this.nodeinfo, 'metadata.rules')
+      return get(this.nodeinfo, 'metadata.rules')
    },
    terms () {
-      return _.get(this.nodeinfo, 'metadata.terms')
+      return get(this.nodeinfo, 'metadata.terms')
    },
    stats () {
      const data = {
-        users: _.get(this.nodeinfo, 'usage.users.activeMonth', null),
-        hours: _.get(this.nodeinfo, 'metadata.library.music.hours', null),
-        artists: _.get(this.nodeinfo, 'metadata.library.artists.total', null),
-        albums: _.get(this.nodeinfo, 'metadata.library.albums.total', null),
-        tracks: _.get(this.nodeinfo, 'metadata.library.tracks.total', null),
-        listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null)
+        users: get(this.nodeinfo, 'usage.users.activeMonth', null),
+        hours: get(this.nodeinfo, 'metadata.library.music.hours', null),
+        artists: get(this.nodeinfo, 'metadata.library.artists.total', null),
+        albums: get(this.nodeinfo, 'metadata.library.albums.total', null),
+        tracks: get(this.nodeinfo, 'metadata.library.tracks.total', null),
+        listenings: get(this.nodeinfo, 'metadata.usage.listenings.total', null)
      }
      if (data.users === null || data.artists === null) {
        return
@@ -487,28 +487,28 @@ export default {
      return data
    },
    contactEmail () {
-      return _.get(this.nodeinfo, 'metadata.contactEmail')
+      return get(this.nodeinfo, 'metadata.contactEmail')
    },
    anonymousCanListen () {
-      return _.get(this.nodeinfo, 'metadata.library.anonymousCanListen')
+      return get(this.nodeinfo, 'metadata.library.anonymousCanListen')
    },
    allowListEnabled () {
-      return _.get(this.nodeinfo, 'metadata.allowList.enabled')
+      return get(this.nodeinfo, 'metadata.allowList.enabled')
    },
    allowListDomains () {
-      return _.get(this.nodeinfo, 'metadata.allowList.domains')
+      return get(this.nodeinfo, 'metadata.allowList.domains')
    },
    version () {
-      return _.get(this.nodeinfo, 'software.version')
+      return get(this.nodeinfo, 'software.version')
    },
    openRegistrations () {
-      return _.get(this.nodeinfo, 'openRegistrations')
+      return get(this.nodeinfo, 'openRegistrations')
    },
    defaultUploadQuota () {
-      return _.get(this.nodeinfo, 'metadata.defaultUploadQuota')
+      return get(this.nodeinfo, 'metadata.defaultUploadQuota')
    },
    federationEnabled () {
-      return _.get(this.nodeinfo, 'metadata.library.federationEnabled')
+      return get(this.nodeinfo, 'metadata.library.federationEnabled')
    },
    headerStyle () {
      if (!this.banner) {

--- a/front/src/components/Footer.vue
+++ b/front/src/components/Footer.vue
-<template>
-  <footer
-    id="footer"
-    role="contentinfo"
-    class="ui vertical footer segment"
-    aria-labelledby="footer-label"
-  >
-    <h1
-      id="footer-label"
-      class="visually-hidden"
-    >
-      <translate translate-context="*/*/*">
-        Application footer
-      </translate>
-    </h1>
-    <div class="ui container">
-      <div class="ui stackable equal height stackable grid">
-        <section class="four wide column">
-          <h4
-            v-if="podName"
-            class="ui header ellipsis"
-          >
-            <span
-              v-translate="{instanceName: podName}"
-              translate-context="Footer/About/Title"
-            >About %{instanceName}</span>
-          </h4>
-          <h4
-            v-else
-            class="ui header ellipsis"
-          >
-            <span
-              v-translate="{instanceUrl: instanceHostname}"
-              translate-context="Footer/About/Title"
-            >About %{instanceUrl}</span>
-          </h4>
-          <div class="ui list">
-            <router-link
-              v-if="$route.path != '/about'"
-              class="link item"
-              to="/about"
-            >
-              <translate translate-context="Footer/About/List item.Link">
-                About
-              </translate>
-            </router-link>
-            <router-link
-              v-else-if="$route.path == '/about' && $store.state.auth.authenticated"
-              class="link item"
-              to="/library"
-            >
-              <translate translate-context="Footer/*/List item.Link">
-                Go to Library
-              </translate>
-            </router-link>
-            <router-link
-              v-else
-              class="link item"
-              to="/"
-            >
-              <translate translate-context="Footer/*/List item.Link">
-                Home Page
-              </translate>
-            </router-link>
-            <a
-              v-if="version"
-              class="link item"
-              href="https://docs.funkwhale.audio/changelog.html"
-              target="_blank"
-            >
-              <translate
-                translate-context="Footer/*/List item"
-                :translate-params="{version: version}"
-              >Version %{version}</translate>
-            </a>
-            <a
-              role="button"
-              href=""
-              class="link item"
-              @click.prevent="$emit('show:set-instance-modal')"
-            >
-              <translate translate-context="Footer/*/List item.Link">Use another instance</translate>
-            </a>
-          </div>
-          <div class="ui form">
-            <div class="ui field">
-              <label for="language-select"><translate translate-context="Footer/Settings/Dropdown.Label/Short, Verb">Change language</translate></label>
-              <select
-                id="language-select"
-                class="ui dropdown"
-                :value="$language.current"
-                @change="$store.dispatch('ui/currentLanguage', $event.target.value)"
-              >
-                <option
-                  v-for="(language, key) in $language.available"
-                  :key="key"
-                  :value="key"
-                >
-                  {{ language }}
-                </option>
-              </select>
-            </div>
-          </div>
-        </section>
-        <section class="four wide column">
-          <h4
-            v-translate
-            class="ui header"
-            translate-context="Footer/*/Title"
-          >
-            Using Funkwhale
-          </h4>
-          <div class="ui list">
-            <a
-              href="https://docs.funkwhale.audio"
-              class="link item"
-              target="_blank"
-            ><translate translate-context="Footer/*/List item.Link/Short, Noun">Documentation</translate></a>
-            <a
-              href="https://funkwhale.audio/apps"
-              class="link item"
-              target="_blank"
-            ><translate translate-context="Footer/*/List item.Link">Mobile and desktop apps</translate></a>
-            <a
-              hrelf=""
-              class="link item"
-              @click.prevent="$emit('show:shortcuts-modal')"
-            ><translate translate-context="*/*/*/Noun">Keyboard shortcuts</translate></a>
-          </div>
-          <div class="ui form">
-            <div class="ui field">
-              <label for="theme-select"><translate translate-context="Footer/Settings/Dropdown.Label/Short, Verb">Change theme</translate></label>
-              <select
-                id="theme-select"
-                class="ui dropdown"
-                :value="$store.state.ui.theme"
-                @change="$store.dispatch('ui/theme', $event.target.value)"
-              >
-                <option
-                  v-for="theme in themes"
-                  :key="theme.key"
-                  :value="theme.key"
-                >
-                  {{ theme.name }}
-                </option>
-              </select>
-            </div>
-          </div>
-        </section>
-        <section class="four wide column">
-          <h4
-            v-translate
-            translate-context="Footer/*/Link"
-            class="ui header"
-          >
-            Getting help
-          </h4>
-          <div class="ui list">
-            <a
-              href="https://forum.funkwhale.audio/"
-              class="link item"
-              target="_blank"
-            ><translate translate-context="Footer/*/Listitem.Link">Support forum</translate></a>
-            <a
-              href="https://matrix.to/#/#funkwhale-troubleshooting:matrix.org"
-              class="link item"
-              target="_blank"
-            ><translate translate-context="Footer/*/List item.Link">Chat room</translate></a>
-            <a
-              href="https://dev.funkwhale.audio/funkwhale/funkwhale/issues"
-              class="link item"
-              target="_blank"
-            ><translate translate-context="Footer/*/List item.Link">Issue tracker</translate></a>
-          </div>
-        </section>
-        <section class="four wide column">
-          <h4
-            v-translate
-            class="ui header"
-            translate-context="Footer/*/Title/Short"
-          >
-            About Funkwhale
-          </h4>
-          <div class="ui list">
-            <a
-              href="https://funkwhale.audio"
-              class="link item"
-              target="_blank"
-            ><translate translate-context="Footer/*/List item.Link">Official website</translate></a>
-            <a
-              href="https://contribute.funkwhale.audio"
-              class="link item"
-              target="_blank"
-            ><translate translate-context="Footer/*/List item.Link">Contribute</translate></a>
-            <a
-              href="https://dev.funkwhale.audio/funkwhale/funkwhale"
-              class="link item"
-              target="_blank"
-            ><translate translate-context="Footer/*/List item.Link">Source code</translate></a>
-          </div>
-          <div class="ui hidden divider" />
-          <p>
-            <translate translate-context="Footer/*/List item.Link">
-              The Funkwhale logo was kindly designed and provided by Francis Gading.
-            </translate>
-          </p>
-        </section>
-      </div>
-    </div>
-  </footer>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import ThemesMixin from '@/components/mixins/Themes.vue'
-import _ from 'lodash'
-
-export default {
-  mixins: [ThemesMixin],
-  props: { version: { type: String, required: true } },
-  computed: {
-    ...mapState({
-      messages: state => state.ui.messages,
-      nodeinfo: state => state.instance.nodeinfo
-    }),
-    podName () {
-      return _.get(this.nodeinfo, 'metadata.nodeName')
-    },
-    instanceHostname () {
-      const url = this.$store.state.instance.instanceUrl
-      const parser = document.createElement('a')
-      parser.href = url
-      return parser.hostname
-    }
-  }
-}
-</script>
--- a/front/src/components/Home.vue
+++ b/front/src/components/Home.vue
@@ -325,14 +325,14 @@
 </template>

 <script>
-import _ from 'lodash'
+import { get } from 'lodash-es'
 import { mapState } from 'vuex'
 import showdown from 'showdown'
-import AlbumWidget from '@/components/audio/album/Widget.vue'
-import ChannelsWidget from '@/components/audio/ChannelsWidget.vue'
-import LoginForm from '@/components/auth/LoginForm.vue'
-import SignupForm from '@/components/auth/SignupForm.vue'
-import { humanSize } from '@/filters'
+import AlbumWidget from '~/components/audio/album/Widget.vue'
+import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
+import LoginForm from '~/components/auth/LoginForm.vue'
+import SignupForm from '~/components/auth/SignupForm.vue'
+import { humanSize } from '~/init/filters'

 export default {
  components: {
@@ -358,19 +358,19 @@ export default {
      }
    },
    podName () {
-      return _.get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
+      return get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
    },
    banner () {
-      return _.get(this.nodeinfo, 'metadata.banner')
+      return get(this.nodeinfo, 'metadata.banner')
    },
    shortDescription () {
-      return _.get(this.nodeinfo, 'metadata.shortDescription')
+      return get(this.nodeinfo, 'metadata.shortDescription')
    },
    longDescription () {
-      return _.get(this.nodeinfo, 'metadata.longDescription')
+      return get(this.nodeinfo, 'metadata.longDescription')
    },
    rules () {
-      return _.get(this.nodeinfo, 'metadata.rules')
+      return get(this.nodeinfo, 'metadata.rules')
    },
    renderedDescription () {
      if (!this.longDescription) {
@@ -381,8 +381,8 @@ export default {
    },
    stats () {
      const data = {
-        users: _.get(this.nodeinfo, 'usage.users.activeMonth', null),
-        hours: _.get(this.nodeinfo, 'metadata.library.music.hours', null)
+        users: get(this.nodeinfo, 'usage.users.activeMonth', null),
+        hours: get(this.nodeinfo, 'metadata.library.music.hours', null)
      }
      if (data.users === null || data.artists === null) {
        return
@@ -390,16 +390,16 @@ export default {
      return data
    },
    contactEmail () {
-      return _.get(this.nodeinfo, 'metadata.contactEmail')
+      return get(this.nodeinfo, 'metadata.contactEmail')
    },
    defaultUploadQuota () {
-      return _.get(this.nodeinfo, 'metadata.defaultUploadQuota')
+      return get(this.nodeinfo, 'metadata.defaultUploadQuota')
    },
    anonymousCanListen () {
-      return _.get(this.nodeinfo, 'metadata.library.anonymousCanListen')
+      return get(this.nodeinfo, 'metadata.library.anonymousCanListen')
    },
    openRegistrations () {
-      return _.get(this.nodeinfo, 'openRegistrations')
+      return get(this.nodeinfo, 'openRegistrations')
    },
    headerStyle () {
      if (!this.banner) {

--- a/front/src/components/Pagination.vue
+++ b/front/src/components/Pagination.vue
@@ -37,7 +37,7 @@
 </template>

 <script>
-import _ from 'lodash'
+import { range as lodashRange, sortBy, uniq } from 'lodash-es'

 export default {
  props: {
@@ -57,15 +57,15 @@ export default {
    pages: function () {
      const range = 2
      const current = this.current
-      const beginning = _.range(1, Math.min(this.maxPage, 1 + range))
-      const middle = _.range(
+      const beginning = lodashRange(1, Math.min(this.maxPage, 1 + range))
+      const middle = lodashRange(
        Math.max(1, current - range + 1),
        Math.min(this.maxPage, current + range)
      )
-      const end = _.range(this.maxPage, Math.max(1, this.maxPage - range))
+      const end = lodashRange(this.maxPage, Math.max(1, this.maxPage - range))
      let allowed = beginning.concat(middle, end)
-      allowed = _.uniq(allowed)
-      allowed = _.sortBy(allowed, [
+      allowed = uniq(allowed)
+      allowed = sortBy(allowed, [
        e => {
          return e
        }

--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -345,11 +345,11 @@
 import { mapState, mapGetters, mapActions } from 'vuex'
 import $ from 'jquery'
 import moment from 'moment'
-import lodash from 'lodash'
-import time from '@/utils/time.js'
+import { sum } from 'lodash-es'
+import time from '~/utils/time'
 import { createFocusTrap } from 'focus-trap'
-import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon.vue'
-import TrackPlaylistIcon from '@/components/playlists/TrackPlaylistIcon.vue'
+import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
+import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import draggable from 'vuedraggable'

 export default {
@@ -405,7 +405,7 @@ export default {
      }
    },
    timeLeft () {
-      const seconds = lodash.sum(
+      const seconds = sum(
        this.queue.tracks.slice(this.queue.currentIndex).map((t) => {
          return (t.uploads || []).map((u) => {
            return u.duration || 0

--- a/front/src/components/SetInstanceModal.vue
+++ b/front/src/components/SetInstanceModal.vue
@@ -105,9 +105,9 @@
 </template>

 <script>
-import Modal from '@/components/semantic/Modal.vue'
+import Modal from '~/components/semantic/Modal.vue'
 import axios from 'axios'
-import _ from 'lodash'
+import { uniq } from 'lodash-es'

 export default {
  components: {
@@ -135,7 +135,7 @@ export default {
      }
      const self = this
      instances.push(this.$store.getters['instance/defaultUrl'](), 'https://demo.funkwhale.audio/')
-      return _.uniq(instances.filter((e) => { return e !== self.$store.state.instance.instanceUrl }))
+      return uniq(instances.filter((e) => { return e !== self.$store.state.instance.instanceUrl }))
    },
    instanceHostname () {
      const url = this.$store.state.instance.instanceUrl

--- a/front/src/components/ShortcutsModal.vue
+++ b/front/src/components/ShortcutsModal.vue
@@ -60,7 +60,7 @@

 <script>

-import Modal from '@/components/semantic/Modal.vue'
+import Modal from '~/components/semantic/Modal.vue'

 export default {
  components: {

--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -208,17 +208,17 @@
          </div>
          <div class="content">
            <fieldset
-              v-for="theme in themes"
-              :key="theme.key"
+              v-for="t in themes"
+              :key="t.key"
            >
              <input
-                :id="theme.key"
-                v-model="themeSelection"
+                :id="t.key"
+                v-model="theme"
                type="radio"
                name="theme"
-                :value="theme.key"
+                :value="t.key"
              >
-              <label :for="theme.key">{{ theme.name }}</label>
+              <label :for="t.key">{{ t.name }}</label>
            </fieldset>
          </div>
        </modal>
@@ -472,14 +472,15 @@

 <script>
 import { mapState, mapActions, mapGetters } from 'vuex'
-import UserModal from '@/components/common/UserModal.vue'
-import Logo from '@/components/Logo.vue'
-import SearchBar from '@/components/audio/SearchBar.vue'
-import ThemesMixin from '@/components/mixins/Themes.vue'
-import UserMenu from '@/components/common/UserMenu.vue'
-import Modal from '@/components/semantic/Modal.vue'
+import UserModal from '~/components/common/UserModal.vue'
+import Logo from '~/components/Logo.vue'
+import SearchBar from '~/components/audio/SearchBar.vue'
+import UserMenu from '~/components/common/UserMenu.vue'
+import Modal from '~/components/semantic/Modal.vue'

 import $ from 'jquery'
+import useThemeList from '~/composables/useThemeList'
+import useTheme from '~/composables/useTheme'

 export default {
  name: 'Sidebar',
@@ -490,10 +491,15 @@ export default {
    UserModal,
    Modal
  },
-  mixins: [ThemesMixin],
  props: {
    width: { type: Number, required: true }
  },
+  setup () {
+    const theme = useTheme()
+    const themes = useThemeList()
+
+    return { theme, themes }
+  },
  data () {
    return {
      selectedTab: 'library',
@@ -504,8 +510,7 @@ export default {
      showUserModal: false,
      showLanguageModal: false,
      showThemeModal: false,
-      languageSelection: this.$language.current,
-      themeSelection: this.$store.state.ui.theme
+      languageSelection: this.$language.current
    }
  },
  destroy () {
@@ -645,10 +650,6 @@ export default {
    languageSelection: function (v) {
      this.$store.dispatch('ui/currentLanguage', v)
      this.$refs.languageModal.closeModal()
-    },
-    themeSelection: function (v) {
-      this.$store.dispatch('ui/theme', v)
-      this.$refs.themeModal.closeModal()
    }
  },
  mounted () {
@@ -691,11 +692,14 @@ export default {
          // works as expected
          const link = $($el).closest('a')
          const url = link.attr('href')
+          if (url) {
            if (url.startsWith('http')) {
              window.open(url, '_blank').focus()
            } else {
              self.$router.push(url)
            }
+          }
+
          $(self.$el).find(selector).dropdown('hide')
        }
      })

--- a/front/src/components/admin/SettingsGroup.vue
+++ b/front/src/components/admin/SettingsGroup.vue
@@ -157,8 +157,8 @@

 <script>
 import axios from 'axios'
-import lodash from 'lodash'
-import SignupFormBuilder from '@/components/admin/SignupFormBuilder.vue'
+import { cloneDeep } from 'lodash-es'
+import SignupFormBuilder from '~/components/admin/SignupFormBuilder.vue'

 export default {
  components: {
@@ -241,7 +241,7 @@ export default {
    },
    set (key, value) {
      // otherwise reactivity doesn't trigger :/
-      this.values = lodash.cloneDeep(this.values)
+      this.values = cloneDeep(this.values)
      this.$set(this.values, key, value)
    }
  }
No results found