feat(ui): add new sidebar template

front/src/App.vue

@@ -87,6 +87,7 @@ store.dispatch('auth/fetchUser')
       'has-bottom-player': tracks.length > 0,
       'queue-focused': store.state.ui.queueFocused
     }"
+    id="fw-content"
   >
     <!-- here, we display custom stylesheets, if any -->
     <link
@@ -102,11 +103,6 @@ store.dispatch('auth/fetchUser')
       @show:set-instance-modal="showSetInstanceModal = !showSetInstanceModal"
       @show:shortcuts-modal="toggleShortcutsModal"
     />
-    <set-instance-modal v-model:show="showSetInstanceModal" />
-    <service-messages />
-    <transition name="queue">
-      <queue v-show="store.state.ui.queueFocused" />
-    </transition>
 
     <router-view v-slot="{ Component }">
       <template v-if="Component">
@@ -122,6 +118,13 @@ store.dispatch('auth/fetchUser')
       </template>
     </router-view>
 
+    <set-instance-modal v-model:show="showSetInstanceModal" />
+    <service-messages />
+
+    <transition name="queue">
+      <queue v-show="store.state.ui.queueFocused" />
+    </transition>
+
     <audio-player />
     <playlist-modal v-if="store.state.auth.authenticated" />
     <channel-upload-modal v-if="store.state.auth.authenticated" />
@@ -130,3 +133,12 @@ store.dispatch('auth/fetchUser')
     <shortcuts-modal v-model:show="showShortcutsModal" />
   </div>
 </template>
+
+<style scoped lang="scss">
+#fw-content {
+  display: grid;
+  min-height: 100vh;
+  grid-template-columns: $desktop-sidebar-width 1fr;
+  background: var(--fw-beige-100);
+}
+</style>

front/src/components/Sidebar.vue

@@ -1,591 +1,167 @@
 <script setup lang="ts">
-import type { RouteRecordName } from 'vue-router'
+import { ref, onMounted } from 'vue'
 
-import { computed, ref, watch, watchEffect, onMounted } from 'vue'
+const searchQuery = ref('')
-import { setI18nLanguage, SUPPORTED_LOCALES } from '~/init/locale'
-import { useCurrentElement } from '@vueuse/core'
-import { setupDropdown } from '~/utils/fomantic'
-import { useRoute } from 'vue-router'
-import { useStore } from '~/store'
-import { useI18n } from 'vue-i18n'
-
-import SemanticModal from '~/components/semantic/Modal.vue'
-import UserModal from '~/components/common/UserModal.vue'
-import SearchBar from '~/components/audio/SearchBar.vue'
-import UserMenu from '~/components/common/UserMenu.vue'
-import Logo from '~/components/Logo.vue'
-
-import useThemeList from '~/composables/useThemeList'
-import useTheme from '~/composables/useTheme'
-
-interface Events {
-  (e: 'show:set-instance-modal'): void
-}
-
-interface Props {
-  width: number
-}
-
-const emit = defineEmits<Events>()
-defineProps<Props>()
-
-const store = useStore()
-const { theme } = useTheme()
-const themes = useThemeList()
-const { t, locale: i18nLocale } = useI18n()
-
-const route = useRoute()
-const isCollapsed = ref(true)
-watch(() => route.path, () => (isCollapsed.value = true))
-
-const additionalNotifications = computed(() => store.getters['ui/additionalNotifications'])
-const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index' : 'index')
-
-const labels = computed(() => ({
-  mainMenu: t('components.Sidebar.label.main'),
-  selectTrack: t('components.Sidebar.label.play'),
-  pendingFollows: t('components.Sidebar.label.follows'),
-  pendingReviewEdits: t('components.Sidebar.label.edits'),
-  pendingReviewReports: t('components.Sidebar.label.reports'),
-  language: t('components.Sidebar.label.language'),
-  theme: t('components.Sidebar.label.theme'),
-  addContent: t('components.Sidebar.label.add'),
-  administration: t('components.Sidebar.label.administration')
-}))
-
-type SidebarMenuTabs = 'explore' | 'myLibrary'
-const expanded = ref<SidebarMenuTabs>('explore')
-
-const ROUTE_MAPPINGS: Record<SidebarMenuTabs, RouteRecordName[]> = {
-  explore: [
-    'search',
-    'library.index',
-    'library.podcasts.browse',
-    'library.albums.browse',
-    'library.albums.detail',
-    'library.artists.browse',
-    'library.artists.detail',
-    'library.tracks.detail',
-    'library.playlists.browse',
-    'library.playlists.detail',
-    'library.radios.browse',
-    'library.radios.detail'
-  ],
-  myLibrary: [
-    'library.me',
-    'library.albums.me',
-    'library.artists.me',
-    'library.playlists.me',
-    'library.radios.me',
-    'favorites'
-  ]
-}
-
-watchEffect(() => {
-  if (ROUTE_MAPPINGS.explore.includes(route.name as RouteRecordName)) {
-    expanded.value = 'explore'
-    return
-  }
-
-  if (ROUTE_MAPPINGS.myLibrary.includes(route.name as RouteRecordName)) {
-    expanded.value = 'myLibrary'
-    return
-  }
-
-  expanded.value = store.state.auth.authenticated ? 'myLibrary' : 'explore'
-})
-
-const moderationNotifications = computed(() =>
-  store.state.ui.notifications.pendingReviewEdits
-    + store.state.ui.notifications.pendingReviewReports
-    + store.state.ui.notifications.pendingReviewRequests
-)
-
-const showLanguageModal = ref(false)
-const locale = ref(i18nLocale.value)
-watch(locale, (locale) => {
-  setI18nLanguage(locale)
-})
-
-const isProduction = import.meta.env.PROD
-const showUserModal = ref(false)
-const showThemeModal = ref(false)
-
-const el = useCurrentElement()
-watchEffect(() => {
-  if (store.state.auth.authenticated) {
-    setupDropdown('.admin-dropdown', el.value)
-  }
-
-  setupDropdown('.user-dropdown', el.value)
-})
 
+// Hide the fake app when the real one is loaded
 onMounted(() => {
-  document.getElementById('fake-sidebar')?.classList.add('loaded')
+  document.getElementById('fake-app')?.remove()
 })
 </script>
 
 <template>
-  <aside :class="['ui', 'vertical', 'left', 'visible', 'wide', {'collapsed': isCollapsed}, 'sidebar', 'component-sidebar']">
+  <aside>
-    <header class="ui basic segment header-wrapper">
+    <div class="sticky-content">
-      <router-link
+      <nav class="quick-actions">
-        :title="'Funkwhale'"
+        <RouterLink to="/">
-        :to="{name: logoUrl}"
+          <img src="../assets/logo/logo.svg" alt="Logo" class="logo" />
-      >
+        </RouterLink>
-        <i class="logo bordered inverted vibrant big icon">
+
-          <logo class="logo" />
+        <FwButton icon="bi-wrench" color="secondary" />
-          <span class="visually-hidden">{{ $t('components.Sidebar.link.home') }}</span>
+        <FwButton icon="bi-upload" color="secondary" />
-        </i>
+        <FwButton icon="bi-inbox" color="secondary" />
-      </router-link>
+
-      <nav class="top ui compact right aligned inverted text menu">
+        <a
-        <div class="right menu">
+          @click.prevent
-          <div
+          href=""
-            v-if="$store.state.auth.availablePermissions['settings'] || $store.state.auth.availablePermissions['moderation']"
+          class="avatar"
-            class="item"
-            :title="labels.administration"
-          >
-            <div class="item ui inline admin-dropdown dropdown">
-              <i class="wrench icon" />
-              <div
-                v-if="moderationNotifications > 0"
-                :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']"
-              >
-                {{ moderationNotifications }}
-              </div>
-              <div class="menu">
-                <h3 class="header">
-                  {{ $t('components.Sidebar.header.administration') }}
-                </h3>
-                <div class="divider" />
-                <router-link
-                  v-if="$store.state.auth.availablePermissions['library']"
-                  class="item"
-                  :to="{name: 'manage.library.edits', query: {q: 'is_approved:null'}}"
-                >
-                  <div
-                    v-if="$store.state.ui.notifications.pendingReviewEdits > 0"
-                    :title="labels.pendingReviewEdits"
-                    :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
-                  >
-                    {{ $store.state.ui.notifications.pendingReviewEdits }}
-                  </div>
-                  {{ $t('components.Sidebar.link.library') }}
-                </router-link>
-                <router-link
-                  v-if="$store.state.auth.availablePermissions['moderation']"
-                  class="item"
-                  :to="{name: 'manage.moderation.reports.list', query: {q: 'resolved:no'}}"
-                >
-                  <div
-                    v-if="$store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests > 0"
-                    :title="labels.pendingReviewReports"
-                    :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
-                  >
-                    {{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}
-                  </div>
-                  {{ $t('components.Sidebar.link.moderation') }}
-                </router-link>
-                <router-link
-                  v-if="$store.state.auth.availablePermissions['settings']"
-                  class="item"
-                  :to="{name: 'manage.users.users.list'}"
-                >
-                  {{ $t('components.Sidebar.link.users') }}
-                </router-link>
-                <router-link
-                  v-if="$store.state.auth.availablePermissions['settings']"
-                  class="item"
-                  :to="{path: '/manage/settings'}"
-                >
-                  {{ $t('components.Sidebar.link.settings') }}
-                </router-link>
-              </div>
-            </div>
-          </div>
-        </div>
-        <router-link
-          v-if="$store.state.auth.authenticated"
-          class="item"
-          :to="{name: 'content.index'}"
         >
-          <i class="upload icon" />
+          <img
-          <span class="visually-hidden">{{ labels.addContent }}</span>
+            v-if="$store.state.auth.authenticated && $store.state.auth.profile?.avatar?.urls.medium_square_crop"
-        </router-link>
+            alt=""
-        <template v-if="width > 768">
+            :src="$store.getters['instance/absoluteUrl']($store.state.auth.profile?.avatar.urls.medium_square_crop)"
-          <div class="item">
-            <div class="ui user-dropdown dropdown">
-              <img
-                v-if="$store.state.auth.authenticated && $store.state.auth.profile?.avatar && $store.state.auth.profile?.avatar.urls.medium_square_crop"
-                class="ui avatar image"
-                alt=""
-                :src="$store.getters['instance/absoluteUrl']($store.state.auth.profile?.avatar.urls.medium_square_crop)"
-              >
-              <actor-avatar
-                v-else-if="$store.state.auth.authenticated"
-                :actor="{preferred_username: $store.state.auth.username, full_username: $store.state.auth.username,}"
-              />
-              <i
-                v-else
-                class="cog icon"
-              />
-              <div
-                v-if="$store.state.ui.notifications.inbox + additionalNotifications > 0"
-                :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']"
-              >
-                {{ $store.state.ui.notifications.inbox + additionalNotifications }}
-              </div>
-              <user-menu
-                v-bind="$attrs"
-                :width="width"
-              />
-            </div>
-          </div>
-        </template>
-        <template v-else>
-          <a
-            href=""
-            class="item"
-            @click.prevent.exact="showUserModal = !showUserModal"
           >
-            <img
+          <ActorAvatar
-              v-if="$store.state.auth.authenticated && $store.state.auth.profile?.avatar?.urls.medium_square_crop"
+            v-else-if="$store.state.auth.authenticated"
-              class="ui avatar image"
+            :actor="{preferred_username: $store.state.auth.username, full_username: $store.state.auth.username,}"
-              alt=""
-              :src="$store.getters['instance/absoluteUrl']($store.state.auth.profile?.avatar.urls.medium_square_crop)"
-            >
-            <actor-avatar
-              v-else-if="$store.state.auth.authenticated"
-              :actor="{preferred_username: $store.state.auth.username, full_username: $store.state.auth.username,}"
-            />
-            <i
-              v-else
-              class="cog icon"
-            />
-            <div
-              v-if="$store.state.ui.notifications.inbox + additionalNotifications > 0"
-              :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']"
-            >
-              {{ $store.state.ui.notifications.inbox + additionalNotifications }}
-            </div>
-          </a>
-        </template>
-        <user-modal
-          v-model:show="showUserModal"
-          @show-theme-modal-event="showThemeModal=true"
-          @show-language-modal-event="showLanguageModal=true"
-        />
-        <semantic-modal
-          ref="languageModal"
-          v-model:show="showLanguageModal"
-          :fullscreen="false"
-        >
-          <i
-            role="button"
-            class="left chevron back inside icon"
-            @click.prevent.exact="showUserModal = !showUserModal"
           />
-          <div class="header">
-            <h3 class="title">
-              {{ labels.language }}
-            </h3>
-          </div>
-          <div class="content">
-            <fieldset
-              v-for="(language, key) in SUPPORTED_LOCALES"
-              :key="key"
-            >
-              <input
-                :id="`${key}`"
-                v-model="locale"
-                type="radio"
-                name="language"
-                :value="key"
-              >
-              <label :for="`${key}`">{{ language }}</label>
-            </fieldset>
-          </div>
-        </semantic-modal>
-        <semantic-modal
-          ref="themeModal"
-          v-model:show="showThemeModal"
-          :fullscreen="false"
-        >
           <i
-            role="button"
+            v-else
-            class="left chevron back inside icon"
+            class="cog icon"
-            @click.prevent.exact="showUserModal = !showUserModal"
           />
-          <div class="header">
+        </a>
-            <h3 class="title">
+      </nav>
-              {{ labels.theme }}
+
-            </h3>
+      <div class="search">
-          </div>
+        <FwInput
-          <div class="content">
+          v-model="searchQuery"
-            <fieldset
+          icon="bi-search"
-              v-for="th in themes"
+          :placeholder="$t('components.audio.SearchBar.placeholder.search')"
-              :key="th.key"
+        />
-            >
+      </div>
-              <input
+
-                :id="th.key"
+      <h3>Explore</h3>
-                v-model="theme"
+      <nav class="button-list">
-                type="radio"
+        <FwButton color="secondary" icon="bi-compass">All Funkwhale</FwButton>
-                name="theme"
+        <FwButton color="secondary" icon="bi-music-note-beamed">Music</FwButton>
-                :value="th.key"
+        <FwButton color="secondary" icon="bi-mic">Podcasts</FwButton>
-              >
+      </nav>
-              <label :for="th.key">{{ th.name }}</label>
+
-            </fieldset>
+      <h3>Library</h3>
-          </div>
+      <div class="pill-list">
-        </semantic-modal>
+        <FwPill>Music</FwPill>
-        <div class="item collapse-button-wrapper">
+        <FwPill outline>Podcasts</FwPill>
-          <button
+        <FwPill outline>Sharing</FwPill>
-            :class="['ui', 'basic', 'big', {'vibrant': !isCollapsed}, 'inverted icon', 'collapse', 'button']"
+      </div>
-            @click="isCollapsed = !isCollapsed"
+      <nav class="button-list">
-          >
+        <FwButton color="secondary" icon="bi-collection">Collections</FwButton>
-            <i class="sidebar icon" />
+        <FwButton color="secondary" icon="bi-person">Artists</FwButton>
-          </button>
+        <FwButton color="secondary" icon="bi-disc">Albums</FwButton>
-        </div>
+        <FwButton color="secondary" icon="bi-music-note-list">Playlists</FwButton>
+        <FwButton color="secondary" icon="bi-question-diamond">Radios</FwButton>
+        <FwButton color="secondary" icon="bi-heart">Favorites</FwButton>
       </nav>
-    </header>
-    <div class="ui basic search-wrapper segment">
-      <search-bar @search="isCollapsed = false" />
     </div>
-    <div
-      v-if="!$store.state.auth.authenticated"
-      class="ui basic signup segment"
-    >
-      <router-link
-        class="ui fluid tiny primary button"
-        :to="{name: 'login'}"
-      >
-        {{ $t('components.Sidebar.link.login') }}
-      </router-link>
-      <div class="ui small hidden divider" />
-      <router-link
-        class="ui fluid tiny button"
-        :to="{path: '/signup'}"
-      >
-        {{ $t('components.Sidebar.link.createAccount') }}
-      </router-link>
-    </div>
-    <nav
-      class="secondary"
-      role="navigation"
-      aria-labelledby="navigation-label"
-    >
-      <h1
-        id="navigation-label"
-        class="visually-hidden"
-      >
-        {{ $t('components.Sidebar.header.main') }}
-      </h1>
-      <div class="ui small hidden divider" />
-      <section
-        :aria-label="labels.mainMenu"
-        class="ui bottom attached active tab"
-      >
-        <nav
-          class="ui vertical large fluid inverted menu"
-          role="navigation"
-          :aria-label="labels.mainMenu"
-        >
-          <div :class="[{ collapsed: expanded !== 'explore' }, 'collapsible item']">
-            <h2
-              class="header"
-              role="button"
-              tabindex="0"
-              @click="expanded = 'explore'"
-              @focus="expanded = 'explore'"
-            >
-              {{ $t('components.Sidebar.header.explore') }}
-              <i
-                v-if="expanded !== 'explore'"
-                class="angle right icon"
-              />
-            </h2>
-            <div class="menu">
-              <router-link
-                class="item"
-                :to="{name: 'search'}"
-              >
-                <i class="search icon" />
-                {{ $t('components.Sidebar.link.search') }}
-              </router-link>
-              <router-link
-                class="item"
-                :to="{name: 'library.index'}"
-                active-class="_active"
-              >
-                <i class="music icon" />
-                {{ $t('components.Sidebar.link.browse') }}
-              </router-link>
-              <router-link
-                class="item"
-                :to="{name: 'library.podcasts.browse'}"
-              >
-                <i class="podcast icon" />
-                {{ $t('components.Sidebar.link.podcasts') }}
-              </router-link>
-              <router-link
-                class="item"
-                :to="{name: 'library.albums.browse'}"
-              >
-                <i class="compact disc icon" />
-                {{ $t('components.Sidebar.link.albums') }}
-              </router-link>
-              <router-link
-                class="item"
-                :to="{name: 'library.artists.browse'}"
-              >
-                <i class="user icon" />
-                {{ $t('components.Sidebar.link.artists') }}
-              </router-link>
-              <router-link
-                class="item"
-                :to="{name: 'library.playlists.browse'}"
-              >
-                <i class="list icon" />
-                {{ $t('components.Sidebar.link.playlists') }}
-              </router-link>
-              <router-link
-                class="item"
-                :to="{name: 'library.radios.browse'}"
-              >
-                <i class="feed icon" />
-                {{ $t('components.Sidebar.link.radios') }}
-              </router-link>
-            </div>
-          </div>
-          <div
-            v-if="$store.state.auth.authenticated"
-            :class="[{ collapsed: expanded !== 'myLibrary' }, 'collapsible item']"
-          >
-            <h3
-              class="header"
-              role="button"
-              tabindex="0"
-              @click="expanded = 'myLibrary'"
-              @focus="expanded = 'myLibrary'"
-            >
-              {{ $t('components.Sidebar.header.library') }}
-              <i
-                v-if="expanded !== 'myLibrary'"
-                class="angle right icon"
-              />
-            </h3>
-            <div class="menu">
-              <router-link
-                class="item"
-                :to="{name: 'library.me'}"
-              >
-                <i class="music icon" />
-                {{ $t('components.Sidebar.link.browse') }}
-              </router-link>
-              <router-link
-                class="item"
-                :to="{name: 'library.albums.me'}"
-              >
-                <i class="compact disc icon" />
-                {{ $t('components.Sidebar.link.albums') }}
-              </router-link>
-              <router-link
-                class="item"
-                :to="{name: 'library.artists.me'}"
-              >
-                <i class="user icon" />
-                {{ $t('components.Sidebar.link.artists') }}
-              </router-link>
-              <router-link
-                class="item"
-                :to="{name: 'library.playlists.me'}"
-              >
-                <i class="list icon" />
-                {{ $t('components.Sidebar.link.playlists') }}
-              </router-link>
-              <router-link
-                class="item"
-                :to="{name: 'library.radios.me'}"
-              >
-                <i class="feed icon" />
-                {{ $t('components.Sidebar.link.radios') }}
-              </router-link>
-              <router-link
-                class="item"
-                :to="{name: 'favorites'}"
-              >
-                <i class="heart icon" />
-                {{ $t('components.Sidebar.link.favorites') }}
-              </router-link>
-            </div>
-          </div>
-          <router-link
-            v-if="$store.state.auth.authenticated"
-            class="header item"
-            :to="{name: 'subscriptions'}"
-          >
-            {{ $t('components.Sidebar.link.channels') }}
-          </router-link>
-          <div class="item">
-            <h3 class="header">
-              {{ $t('components.Sidebar.header.more') }}
-            </h3>
-            <div class="menu">
-              <router-link
-                class="item"
-                to="/about"
-                active-class="router-link-exact-active active"
-              >
-                <i class="info icon" />
-                {{ $t('components.Sidebar.link.about') }}
-              </router-link>
-            </div>
-          </div>
-          <div
-            v-if="!isProduction"
-            class="item"
-          >
-            <a
-              role="button"
-              href=""
-              class="link item"
-              @click.prevent="emit('show:set-instance-modal')"
-            >{{ $t('components.Sidebar.link.switchInstance') }}</a>
-          </div>
-        </nav>
-      </section>
-    </nav>
   </aside>
 </template>
 
-<style>
+<style scoped lang="scss">
-[type="radio"] {
+aside {
-  position: absolute;
+  background: var(--fw-beige-300);
-  opacity: 0;
+  height: 100%;
-  cursor: pointer;
+
-  height: 0;
+  > .sticky-content {
-  width: 0;
+    position: sticky;
-}
+    height: 100%;
-[type="radio"] + label::after {
+    max-height: 100vh;
-  content: "";
+    overflow: auto;
-  font-size: 1.4em;
+    top: 0;
-}
+
-[type="radio"]:checked + label::after {
+    > .quick-actions {
-  margin-left: 10px;
+      display: flex;
-  content: "\2713"; /* Checkmark */
+      align-items: center;
-  font-size: 1.4em;
+      padding: 12px;
-}
+      font-size: 1.3rem;
-[type="radio"]:checked + label {
+
-  font-weight: bold;
+
-}
+      > :first-child {
-fieldset {
+        margin-right: auto;
-  border: none;
+
-}
+      }
-.back {
+
-  font-size: 1.25em !important;
+      .avatar,
-  position: absolute;
+      .logo {
-  top: 0.5rem;
+        height: 30px;
-  left: 0.5rem;
+      }
-  width: 2.25rem !important;
+
-  height: 2.25rem !important;
+      .avatar {
-  padding: 0.625rem 0 0 0;
+        aspect-ratio: 1;
+        background: var(--fw-beige-100);
+        border-radius: 100%;
+
+        text-decoration: none !important;
+        color: var(--fw-gray-700);
+
+        > i {
+          width: 100%;
+          height: 100%;
+
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: 0 !important;
+        }
+      }
+    }
+
+    > .search {
+      padding: 0 16px 23px;
+    }
+
+    > h3 {
+      margin: 0;
+      padding: 0 32px 8px;
+      color: var(--fw-gray-700);
+      font-size: 14px;
+      line-height: 1.2;
+    }
+
+    > .pill-list {
+      padding: 0 16px 8px;
+      white-space: nowrap;
+    }
+
+    > nav.button-list {
+      padding: 0 16px 32px;
+
+      > button {
+        margin: 2px 0;
+
+        /* TODO: Fix in UI: When icon is applied, the text should be aligned left */
+        justify-content: start;
+
+        /* TODO: Fix in UI: Add `block` prop that spans 100% width */
+        width: 100%;
+
+        :deep(i) {
+          font-size: 1.4em;
+
+          /* TODO: Fix in UI: Add margin right to the icon, when content available */
+          margin-right: 1ch;
+        }
+      }
+    }
+
+  }
 }
 </style>

front/src/main.ts

@@ -3,6 +3,9 @@ import type { InitModule, InitModuleContext } from '~/types'
 import store, { key } from '~/store'
 import router from '~/router'
 
+import FunkwhaleUI from '@funkwhale/ui'
+import '@funkwhale/ui/style.css'
+
 import { createApp, defineAsyncComponent, h } from 'vue'
 
 import useLogger from '~/composables/useLogger'
@@ -37,6 +40,7 @@ const app = createApp({
 
 app.use(router)
 app.use(store, key)
+app.use(FunkwhaleUI)
 
 const modules: Record<string | 'axios', { install?: InitModule }> = import.meta.glob('./init/*.ts', { eager: true })
 const moduleContext: InitModuleContext = {

front/src/style/_global-vars.scss

@@ -0,0 +1,3 @@
+$desktop-sidebar-width: 275px;
+$widedesktop-sidebar-width: 275px;
+$bottom-player-height: 4rem;

front/src/style/_main.scss

@@ -1,9 +1,8 @@
 @use "./_vars" as *;
 
 // not in vars because not meant to be overridden
-$desktop-sidebar-width: 275px;
+// TODO (wvffle): Already imported globally in every file, needs to be redesigned
-$widedesktop-sidebar-width: 275px;
+@use "./global-vars" as *;
-$bottom-player-height: 4rem;
 
 @import "@funkwhale/ui/style.css";
 

front/src/style/globals/_layout.scss

@@ -74,13 +74,6 @@
   > .main.pusher,
   > .footer {
     position: relative;
-    @include media(">desktop") {
-      margin-left: $desktop-sidebar-width !important;
-    }
-
-    @include media(">widedesktop") {
-      margin-left: $widedesktop-sidebar-width !important;;
-    }
     transform: none !important;
   }
 }

front/vite.config.ts

@@ -8,6 +8,9 @@ import manifest from './pwa-manifest.json'
 import VueI18n from '@intlify/unplugin-vue-i18n/vite'
 import Vue from '@vitejs/plugin-vue'
 import VueMacros from 'unplugin-vue-macros/vite'
+import VueDevTools from 'vite-plugin-vue-devtools'
+
+import { fileURLToPath, URL } from "url"
 
 const port = +(process.env.VUE_PORT ?? 8080)
 
@@ -15,6 +18,9 @@ const port = +(process.env.VUE_PORT ?? 8080)
 export default defineConfig(({ mode }) => ({
   envPrefix: ['VUE_', 'FUNKWHALE_SENTRY_'],
   plugins: [
+    // https://github.com/webfansplz/vite-plugin-vue-devtools
+    VueDevTools(),
+
     // https://vue-macros.sxzz.moe/
     VueMacros({
       plugins: {
@@ -48,13 +54,22 @@ export default defineConfig(({ mode }) => ({
   server: {
     port
   },
-  resolve: {
+  css: {
-    alias: {
+    preprocessorOptions: {
-      '#': resolve(__dirname, './src/worker'),
+      scss: {
-      '?': resolve(__dirname, './test'),
+        additionalData: `
-      '~': resolve(__dirname, './src')
+          @use "./src/style/global-vars" as *;
+        `
+      }
     }
   },
+  resolve: {
+    alias: [
+      { find: '#', replacement: fileURLToPath(new URL('./src/worker', import.meta.url)) },
+      { find: '?', replacement: fileURLToPath(new URL('./test', import.meta.url)) },
+      { find: '~', replacement: fileURLToPath(new URL('./src', import.meta.url)) }
+    ]
+  },
   build: {
     sourcemap: true,
     // https://rollupjs.org/configuration-options/