From 89a78dcdcf9f89729789811c52815520b04870d4 Mon Sep 17 00:00:00 2001
From: Georg Krause <mail@georg-krause.net>
Date: Mon, 13 Nov 2023 10:43:18 +0100
Subject: [PATCH] feat: add new sidebar template

---
 .gitlab-ci.yml                       |   4 +-
 front/package.json                   |   1 +
 front/src/App.vue                    |  22 +-
 front/src/components/Sidebar.vue     | 718 ++++++---------------------
 front/src/main.ts                    |   4 +
 front/src/style/_global-vars.scss    |   3 +
 front/src/style/_main.scss           |   4 +-
 front/src/style/globals/_layout.scss |   7 -
 front/src/style/globals/_ui.scss     |   7 +
 front/vite.config.ts                 |  25 +-
 front/yarn.lock                      | 509 ++++++++++++++++++-
 11 files changed, 705 insertions(+), 599 deletions(-)
 create mode 100644 front/src/style/_global-vars.scss
 create mode 100644 front/src/style/globals/_ui.scss

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index dd06473ce..d9a38f573 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -312,7 +312,9 @@ test_integration:
     - if: $RUN_CYPRESS
   interruptible: true
 
-  image: cypress/base:18.12.1
+  image:
+    name: cypress/included:12.14.0
+    entrypoint: [""]
   cache:
     - *front_cache
     - key:
diff --git a/front/package.json b/front/package.json
index f159c6238..714fa7855 100644
--- a/front/package.json
+++ b/front/package.json
@@ -100,6 +100,7 @@
     "utility-types": "3.10.0",
     "vite": "4.3.5",
     "vite-plugin-pwa": "0.14.4",
+    "vite-plugin-vue-devtools": "1.0.0-rc.5",
     "vitest": "0.25.8",
     "vue-tsc": "1.6.5",
     "workbox-core": "6.5.4",
diff --git a/front/src/App.vue b/front/src/App.vue
index 37b9f48a7..3fe84eae7 100644
--- a/front/src/App.vue
+++ b/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>
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index a3cd9ca78..8655de8b9 100644
--- a/front/src/components/Sidebar.vue
+++ b/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'
-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)
-})
+const searchQuery = ref('')
 
+// 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']">
-    <header class="ui basic segment header-wrapper">
-      <router-link
-        :title="'Funkwhale'"
-        :to="{name: logoUrl}"
-      >
-        <i class="logo bordered inverted vibrant big icon">
-          <logo class="logo" />
-          <span class="visually-hidden">{{ $t('components.Sidebar.link.home') }}</span>
-        </i>
-      </router-link>
-      <nav class="top ui compact right aligned inverted text menu">
-        <div class="right menu">
-          <div
-            v-if="$store.state.auth.availablePermissions['settings'] || $store.state.auth.availablePermissions['moderation']"
-            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'}"
+  <aside>
+    <div class="sticky-content">
+      <nav class="quick-actions">
+        <RouterLink to="/">
+          <img src="../assets/logo/logo.svg" alt="Logo" class="logo" />
+        </RouterLink>
+
+        <FwButton icon="bi-wrench" color="secondary" />
+        <FwButton icon="bi-upload" color="secondary" />
+        <FwButton icon="bi-inbox" color="secondary" />
+
+        <a
+          @click.prevent
+          href=""
+          class="avatar"
         >
-          <i class="upload icon" />
-          <span class="visually-hidden">{{ labels.addContent }}</span>
-        </router-link>
-        <template v-if="width > 768">
-          <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
+            v-if="$store.state.auth.authenticated && $store.state.auth.profile?.avatar?.urls.medium_square_crop"
+            alt=""
+            :src="$store.getters['instance/absoluteUrl']($store.state.auth.profile?.avatar.urls.medium_square_crop)"
           >
-            <img
-              v-if="$store.state.auth.authenticated && $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>
-          </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"
+          <ActorAvatar
+            v-else-if="$store.state.auth.authenticated"
+            :actor="{preferred_username: $store.state.auth.username, full_username: $store.state.auth.username,}"
           />
-          <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"
-            class="left chevron back inside icon"
-            @click.prevent.exact="showUserModal = !showUserModal"
+            v-else
+            class="cog icon"
           />
-          <div class="header">
-            <h3 class="title">
-              {{ labels.theme }}
-            </h3>
-          </div>
-          <div class="content">
-            <fieldset
-              v-for="th in themes"
-              :key="th.key"
-            >
-              <input
-                :id="th.key"
-                v-model="theme"
-                type="radio"
-                name="theme"
-                :value="th.key"
-              >
-              <label :for="th.key">{{ th.name }}</label>
-            </fieldset>
-          </div>
-        </semantic-modal>
-        <div class="item collapse-button-wrapper">
-          <button
-            :class="['ui', 'basic', 'big', {'vibrant': !isCollapsed}, 'inverted icon', 'collapse', 'button']"
-            @click="isCollapsed = !isCollapsed"
-          >
-            <i class="sidebar icon" />
-          </button>
-        </div>
+        </a>
+      </nav>
+
+      <div class="search">
+        <FwInput
+          v-model="searchQuery"
+          icon="bi-search"
+          :placeholder="$t('components.audio.SearchBar.placeholder.search')"
+        />
+      </div>
+
+      <h3>Explore</h3>
+      <nav class="button-list">
+        <FwButton color="secondary" icon="bi-compass">All Funkwhale</FwButton>
+        <FwButton color="secondary" icon="bi-music-note-beamed">Music</FwButton>
+        <FwButton color="secondary" icon="bi-mic">Podcasts</FwButton>
+      </nav>
+
+      <h3>Library</h3>
+      <div class="pill-list">
+        <FwPill>Music</FwPill>
+        <FwPill outline>Podcasts</FwPill>
+        <FwPill outline>Sharing</FwPill>
+      </div>
+      <nav class="button-list">
+        <FwButton color="secondary" icon="bi-collection">Collections</FwButton>
+        <FwButton color="secondary" icon="bi-person">Artists</FwButton>
+        <FwButton color="secondary" icon="bi-disc">Albums</FwButton>
+        <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>
-[type="radio"] {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-[type="radio"] + label::after {
-  content: "";
-  font-size: 1.4em;
-}
-[type="radio"]:checked + label::after {
-  margin-left: 10px;
-  content: "\2713"; /* Checkmark */
-  font-size: 1.4em;
-}
-[type="radio"]:checked + label {
-  font-weight: bold;
-}
-fieldset {
-  border: none;
-}
-.back {
-  font-size: 1.25em !important;
-  position: absolute;
-  top: 0.5rem;
-  left: 0.5rem;
-  width: 2.25rem !important;
-  height: 2.25rem !important;
-  padding: 0.625rem 0 0 0;
+<style scoped lang="scss">
+aside {
+  background: var(--fw-beige-300);
+  height: 100%;
+
+  > .sticky-content {
+    position: sticky;
+    height: 100%;
+    max-height: 100vh;
+    overflow: auto;
+    top: 0;
+
+    > .quick-actions {
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      font-size: 1.3rem;
+
+
+      > :first-child {
+        margin-right: auto;
+
+      }
+
+      .avatar,
+      .logo {
+        height: 30px;
+      }
+
+      .avatar {
+        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>
diff --git a/front/src/main.ts b/front/src/main.ts
index 597b47079..331c1300e 100644
--- a/front/src/main.ts
+++ b/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 = {
diff --git a/front/src/style/_global-vars.scss b/front/src/style/_global-vars.scss
new file mode 100644
index 000000000..a5ab91538
--- /dev/null
+++ b/front/src/style/_global-vars.scss
@@ -0,0 +1,3 @@
+$desktop-sidebar-width: 275px;
+$widedesktop-sidebar-width: 275px;
+$bottom-player-height: 4rem;
diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss
index 797948cba..413959511 100644
--- a/front/src/style/_main.scss
+++ b/front/src/style/_main.scss
@@ -1,9 +1,7 @@
 @use "./_vars" as *;
 
 // not in vars because not meant to be overridden
-$desktop-sidebar-width: 275px;
-$widedesktop-sidebar-width: 275px;
-$bottom-player-height: 4rem;
+@use "./global-vars" as *;
 
 @import "@funkwhale/ui/style.css";
 
diff --git a/front/src/style/globals/_layout.scss b/front/src/style/globals/_layout.scss
index a6759410f..7b20bda36 100644
--- a/front/src/style/globals/_layout.scss
+++ b/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;
   }
 }
diff --git a/front/src/style/globals/_ui.scss b/front/src/style/globals/_ui.scss
new file mode 100644
index 000000000..68c5af880
--- /dev/null
+++ b/front/src/style/globals/_ui.scss
@@ -0,0 +1,7 @@
+.w-full {
+  width: 100%;
+}
+
+.block {
+  display: block;
+}
diff --git a/front/vite.config.ts b/front/vite.config.ts
index f46eb8807..72d02c58f 100644
--- a/front/vite.config.ts
+++ b/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: {
-    alias: {
-      '#': resolve(__dirname, './src/worker'),
-      '?': resolve(__dirname, './test'),
-      '~': resolve(__dirname, './src')
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+          @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/
diff --git a/front/yarn.lock b/front/yarn.lock
index 7e3128f84..0d552f818 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -15,7 +15,7 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@antfu/utils@^0.7.5":
+"@antfu/utils@^0.7.5", "@antfu/utils@^0.7.6":
   version "0.7.6"
   resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.7.6.tgz#30a046419b9e1ecd276e53d41ab68fb6c558c04d"
   integrity sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==
@@ -68,6 +68,27 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
+"@babel/core@^7.22.17":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.3.tgz#5ec09c8803b91f51cc887dedc2654a35852849c9"
+  integrity sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.22.13"
+    "@babel/generator" "^7.23.3"
+    "@babel/helper-compilation-targets" "^7.22.15"
+    "@babel/helper-module-transforms" "^7.23.3"
+    "@babel/helpers" "^7.23.2"
+    "@babel/parser" "^7.23.3"
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.3"
+    "@babel/types" "^7.23.3"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
 "@babel/generator@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.22.15.tgz#1564189c7ec94cb8f77b5e8a90c4d200d21b2339"
@@ -78,6 +99,16 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.3.tgz#86e6e83d95903fbe7613f448613b8b319f330a8e"
+  integrity sha512-keeZWAV4LU3tW0qRi19HRpabC/ilM0HRBBzf9/k8FFiG4KVpiv0FIy4hHfLfFQZNhziCTPTmd59zoyv6DNISzg==
+  dependencies:
+    "@babel/types" "^7.23.3"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
@@ -103,7 +134,7 @@
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
-"@babel/helper-create-class-features-plugin@^7.22.11", "@babel/helper-create-class-features-plugin@^7.22.5":
+"@babel/helper-create-class-features-plugin@^7.22.11", "@babel/helper-create-class-features-plugin@^7.22.15", "@babel/helper-create-class-features-plugin@^7.22.5":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.15.tgz#97a61b385e57fe458496fad19f8e63b63c867de4"
   integrity sha512-jKkwA59IXcvSaiK2UN45kKwSC9o+KuoXsBDvHvU/7BecYIp8GQ2UwrVvFgJASUT+hBnwJx6MhvMCuMzwZZ7jlg==
@@ -151,6 +182,14 @@
     "@babel/template" "^7.22.5"
     "@babel/types" "^7.22.5"
 
+"@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
+
 "@babel/helper-hoist-variables@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
@@ -183,6 +222,17 @@
     "@babel/helper-split-export-declaration" "^7.22.6"
     "@babel/helper-validator-identifier" "^7.22.20"
 
+"@babel/helper-module-transforms@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1"
+  integrity sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-simple-access" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/helper-validator-identifier" "^7.22.20"
+
 "@babel/helper-optimise-call-expression@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz#f21531a9ccbff644fdd156b4077c16ff0c3f609e"
@@ -204,7 +254,7 @@
     "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-wrap-function" "^7.22.20"
 
-"@babel/helper-replace-supers@^7.22.5", "@babel/helper-replace-supers@^7.22.9":
+"@babel/helper-replace-supers@^7.22.20", "@babel/helper-replace-supers@^7.22.5", "@babel/helper-replace-supers@^7.22.9":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz#e37d367123ca98fe455a9887734ed2e16eb7a793"
   integrity sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==
@@ -267,6 +317,15 @@
     "@babel/traverse" "^7.22.15"
     "@babel/types" "^7.22.15"
 
+"@babel/helpers@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.2.tgz#2832549a6e37d484286e15ba36a5330483cac767"
+  integrity sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.2"
+    "@babel/types" "^7.23.0"
+
 "@babel/highlight@^7.22.13":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54"
@@ -276,6 +335,11 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
+"@babel/parser@^7.18.11", "@babel/parser@^7.23.0", "@babel/parser@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.3.tgz#0ce0be31a4ca4f1884b5786057cadcb6c3be58f9"
+  integrity sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw==
+
 "@babel/parser@^7.20.15", "@babel/parser@^7.21.3", "@babel/parser@^7.22.10", "@babel/parser@^7.22.14", "@babel/parser@^7.22.15", "@babel/parser@^7.22.16", "@babel/parser@^7.22.7":
   version "7.22.16"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.16.tgz#180aead7f247305cce6551bea2720934e2fa2c95"
@@ -297,6 +361,17 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
     "@babel/plugin-transform-optional-chaining" "^7.22.15"
 
+"@babel/plugin-proposal-decorators@^7.22.15":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.23.3.tgz#c609ca70be908d187ee36ff49f1250c56cc98f15"
+  integrity sha512-u8SwzOcP0DYSsa++nHd/9exlHb0NAlHCb890qtZZbSwPX2bFv8LBEztxwN7Xg/dS8oAFFidhrI9PBcLBJSkGRQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.22.20"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/plugin-syntax-decorators" "^7.23.3"
+
 "@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
   version "7.21.0-placeholder-for-preset-env.2"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
@@ -323,6 +398,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-syntax-decorators@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.23.3.tgz#a1d351d6c25bfdcf2e16f99b039101bc0ffcb0ca"
+  integrity sha512-cf7Niq4/+/juY67E0PbgH0TDhLQ5J7zS8C/Q5FFx+DWyrRa9sUQdTXkjqKu8zGvuqr7vw1muKiukseihU+PJDA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-syntax-dynamic-import@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
@@ -365,6 +447,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-jsx@^7.22.5":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz#8f2e4f8a9b5f9aa16067e142c1ac9cd9f810f473"
+  integrity sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@@ -421,6 +510,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-syntax-typescript@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.23.3.tgz#24f460c85dbbc983cd2b9c4994178bcc01df958f"
+  integrity sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
@@ -786,6 +882,16 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
+"@babel/plugin-transform-typescript@^7.22.15":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.3.tgz#ce806e6cb485d468c48c4f717696719678ab0138"
+  integrity sha512-ogV0yWnq38CFwH20l2Afz0dfKuZBx9o/Y2Rmh5vuSS0YD1hswgEgTfyTzuSrT2q9btmHRSqYoSfwFUVaC1M1Jw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-create-class-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-typescript" "^7.23.3"
+
 "@babel/plugin-transform-unicode-escapes@^7.22.10":
   version "7.22.10"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.10.tgz#c723f380f40a2b2f57a62df24c9005834c8616d9"
@@ -933,6 +1039,22 @@
     "@babel/parser" "^7.22.15"
     "@babel/types" "^7.22.15"
 
+"@babel/traverse@^7.18.11", "@babel/traverse@^7.22.5", "@babel/traverse@^7.23.2", "@babel/traverse@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.3.tgz#26ee5f252e725aa7aca3474aa5b324eaf7908b5b"
+  integrity sha512-+K0yF1/9yR0oHdE0StHuEj3uTPzwwbrLGfNOndVJVV2TqA5+j3oljJUb4nmB954FLGjNem976+B+eDuLIjesiQ==
+  dependencies:
+    "@babel/code-frame" "^7.22.13"
+    "@babel/generator" "^7.23.3"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/parser" "^7.23.3"
+    "@babel/types" "^7.23.3"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/traverse@^7.22.15", "@babel/traverse@^7.22.20":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.20.tgz#db572d9cb5c79e02d83e5618b82f6991c07584c9"
@@ -958,6 +1080,15 @@
     "@babel/helper-validator-identifier" "^7.22.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.23.0", "@babel/types@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.3.tgz#d5ea892c07f2ec371ac704420f4dcdb07b5f9598"
+  integrity sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1517,6 +1648,15 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
+"@rollup/pluginutils@^5.0.5":
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.5.tgz#bbb4c175e19ebfeeb8c132c2eea0ecb89941a66c"
+  integrity sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
 "@sentry-internal/tracing@7.47.0":
   version "7.47.0"
   resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.47.0.tgz#45e92eb4c8d049d93bd4fab961eaa38a4fb680f3"
@@ -2154,6 +2294,17 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
+"@vite-plugin-vue-devtools/core@1.0.0-rc.5":
+  version "1.0.0-rc.5"
+  resolved "https://registry.yarnpkg.com/@vite-plugin-vue-devtools/core/-/core-1.0.0-rc.5.tgz#0c7e09fbb09d07e4a64ae80c6c344760cc2ad90c"
+  integrity sha512-S3zPV6QVRYz07D1ZEMShwbl8MTT/wvT27dPZicnnI2zXH7kCrOgm1aRw09j+1/35Z682Liqw+gzfnDDY+tIG2w==
+  dependencies:
+    "@babel/parser" "^7.22.16"
+    birpc "^0.2.14"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.3"
+    vite-hot-client "^0.2.2"
+
 "@vitejs/plugin-vue@4.2.3":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz#ee0b6dfcc62fe65364e6395bf38fa2ba10bb44b6"
@@ -2486,6 +2637,26 @@
     "@vue-macros/short-vmodel" "1.2.15"
     "@vue/language-core" "1.8.8"
 
+"@vue/babel-helper-vue-transform-on@^1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.1.5.tgz#a976486b21e108e545524fe41ffe3fc9bbc28c7f"
+  integrity sha512-SgUymFpMoAyWeYWLAY+MkCK3QEROsiUnfaw5zxOVD/M64KQs8D/4oK6Q5omVA2hnvEOE0SCkH2TZxs/jnnUj7w==
+
+"@vue/babel-plugin-jsx@^1.1.1":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.5.tgz#5088bae7dbb83531d94df3742ff650c12fd54973"
+  integrity sha512-nKs1/Bg9U1n3qSWnsHhCVQtAzI6aQXqua8j/bZrau8ywT1ilXQbK4FwEJGmU8fV7tcpuFvWmmN7TMmV1OBma1g==
+  dependencies:
+    "@babel/helper-module-imports" "^7.22.5"
+    "@babel/plugin-syntax-jsx" "^7.22.5"
+    "@babel/template" "^7.22.5"
+    "@babel/traverse" "^7.22.5"
+    "@babel/types" "^7.22.5"
+    "@vue/babel-helper-vue-transform-on" "^1.1.5"
+    camelcase "^6.3.0"
+    html-tags "^3.3.1"
+    svg-tags "^1.0.0"
+
 "@vue/compiler-core@3.3.2":
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.3.2.tgz#39567bd15c7f97add97bfc4d44e814df36eb797b"
@@ -2506,6 +2677,16 @@
     estree-walker "^2.0.2"
     source-map-js "^1.0.2"
 
+"@vue/compiler-core@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.3.8.tgz#301bb60d0245265a88ed5b30e200fbf223acb313"
+  integrity sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==
+  dependencies:
+    "@babel/parser" "^7.23.0"
+    "@vue/shared" "3.3.8"
+    estree-walker "^2.0.2"
+    source-map-js "^1.0.2"
+
 "@vue/compiler-dom@3.3.2":
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.2.tgz#2012ef4879375a4ca4ee68012a9256398b848af2"
@@ -2522,6 +2703,14 @@
     "@vue/compiler-core" "3.3.4"
     "@vue/shared" "3.3.4"
 
+"@vue/compiler-dom@^3.2.47":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.8.tgz#09d832514b9b8d9415a3816b065d69dbefcc7e9b"
+  integrity sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==
+  dependencies:
+    "@vue/compiler-core" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 "@vue/compiler-sfc@3.3.2":
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.2.tgz#d6467acba8446655bcee7e751441232e5ddebcbf"
@@ -2706,6 +2895,11 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780"
   integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
 
+"@vue/shared@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.8.tgz#f044942142e1d3a395f24132e6203a784838542d"
+  integrity sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==
+
 "@vue/test-utils@2.2.7":
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.2.7.tgz#0d93d635031a4cca2de70b825aef3fe20a41e702"
@@ -2763,6 +2957,16 @@
   dependencies:
     vue-demi ">=0.14.5"
 
+"@webfansplz/vuedoc-parser@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@webfansplz/vuedoc-parser/-/vuedoc-parser-0.0.4.tgz#cfefa70becbdc9c8c9e196a15510fffa40d82a56"
+  integrity sha512-OnJxUtZOvKHonA9wmW1F0E+UkjP4RZdNRZyUWF1Nrh0TAm4uzX4a99EgHH33Rc2dJgkhMdtaZ9P+ekVJ42Y0kg==
+  dependencies:
+    "@babel/parser" "^7.18.11"
+    "@babel/traverse" "^7.18.11"
+    resolve "^1.22.1"
+    vue-template-compiler "^2.6.14"
+
 abab@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
@@ -3120,11 +3324,21 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+big-integer@^1.6.44:
+  version "1.6.51"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
+  integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
+birpc@^0.2.14:
+  version "0.2.14"
+  resolved "https://registry.yarnpkg.com/birpc/-/birpc-0.2.14.tgz#4a5498771e6ff24cf8ae5f47faf90e76ca2fce03"
+  integrity sha512-37FHE8rqsYM5JEKCnXFyHpBCzvgHEExwVVTq+nUmloInU7l8ezD1TpOhKpS8oe1DTYFqEK27rFZVKG43oTqXRA==
+
 blob-util@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
@@ -3140,6 +3354,13 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
+bplist-parser@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/bplist-parser/-/bplist-parser-0.2.0.tgz#43a9d183e5bf9d545200ceac3e712f79ebbe8d0e"
+  integrity sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==
+  dependencies:
+    big-integer "^1.6.44"
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -3202,6 +3423,13 @@ builtins@^5.0.1:
   dependencies:
     semver "^7.0.0"
 
+bundle-name@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bundle-name/-/bundle-name-3.0.0.tgz#ba59bcc9ac785fb67ccdbf104a2bf60c099f0e1a"
+  integrity sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==
+  dependencies:
+    run-applescript "^5.0.0"
+
 butterchurn-presets@3.0.0-beta.4:
   version "3.0.0-beta.4"
   resolved "https://registry.yarnpkg.com/butterchurn-presets/-/butterchurn-presets-3.0.0-beta.4.tgz#393d3f7863d546bdef2c52aec90da76bdbcacd3b"
@@ -3255,6 +3483,11 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camelcase@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
+  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+
 caniuse-lite@^1.0.30001517:
   version "1.0.30001538"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001538.tgz#9dbc6b9af1ff06b5eb12350c2012b3af56744f3f"
@@ -3448,6 +3681,11 @@ convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
 cookie@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
@@ -3476,7 +3714,7 @@ cosmiconfig@^7.0.1:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.2:
+cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -3639,6 +3877,24 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
 
+default-browser-id@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-3.0.0.tgz#bee7bbbef1f4e75d31f98f4d3f1556a14cea790c"
+  integrity sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==
+  dependencies:
+    bplist-parser "^0.2.0"
+    untildify "^4.0.0"
+
+default-browser@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/default-browser/-/default-browser-4.0.0.tgz#53c9894f8810bf86696de117a6ce9085a3cbc7da"
+  integrity sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==
+  dependencies:
+    bundle-name "^3.0.0"
+    default-browser-id "^3.0.0"
+    execa "^7.1.1"
+    titleize "^3.0.0"
+
 define-data-property@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.0.tgz#0db13540704e1d8d479a0656cf781267531b9451"
@@ -3653,6 +3909,11 @@ define-lazy-prop@^2.0.0:
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
   integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
 
+define-lazy-prop@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz#dbb19adfb746d7fc6d734a06b72f4a00d021255f"
+  integrity sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==
+
 define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
@@ -3802,6 +4063,11 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+error-stack-parser-es@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/error-stack-parser-es/-/error-stack-parser-es-0.1.1.tgz#9c1d2bbfbba8b51670062e7fbf43c6bcfb6eb4da"
+  integrity sha512-g/9rfnvnagiNf+DRMHEVGuGuIBlCIMDFoTA616HaP2l9PlCjGjVhD98PNbVSJvmK4TttqT5mV5tInMhoFgi+aA==
+
 error-stack-parser@^2.0.6:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz#229cb01cdbfa84440bfa91876285b94680188286"
@@ -4290,6 +4556,51 @@ execa@4.1.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
+execa@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
+execa@^7.1.1:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-7.2.0.tgz#657e75ba984f42a70f38928cedc87d6f2d4fe4e9"
+  integrity sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.1"
+    human-signals "^4.3.0"
+    is-stream "^3.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^5.1.0"
+    onetime "^6.0.0"
+    signal-exit "^3.0.7"
+    strip-final-newline "^3.0.0"
+
+execa@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-8.0.1.tgz#51f6a5943b580f963c3ca9c6321796db8cc39b8c"
+  integrity sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^8.0.1"
+    human-signals "^5.0.0"
+    is-stream "^3.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^5.1.0"
+    onetime "^6.0.0"
+    signal-exit "^4.1.0"
+    strip-final-newline "^3.0.0"
+
 executable@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c"
@@ -4477,6 +4788,15 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+fs-extra@^11.1.1:
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.1.1.tgz#da69f7c39f3b002378b0954bb6ae7efdc0876e2d"
+  integrity sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs-extra@^9.0.1, fs-extra@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
@@ -4554,6 +4874,16 @@ get-stream@^5.0.0, get-stream@^5.1.0:
   dependencies:
     pump "^3.0.0"
 
+get-stream@^6.0.0, get-stream@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
+get-stream@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-8.0.1.tgz#def9dfd71742cd7754a7761ed43749a27d02eca2"
+  integrity sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==
+
 get-symbol-description@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
@@ -4754,6 +5084,11 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html-tags@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
+  integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
+
 htmlparser2@^8.0.1:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.2.tgz#f002151705b383e62433b5cf466f5b716edaec21"
@@ -4795,6 +5130,21 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
+human-signals@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-4.3.1.tgz#ab7f811e851fca97ffbd2c1fe9a958964de321b2"
+  integrity sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==
+
+human-signals@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28"
+  integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==
+
 iconv-lite@0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
@@ -4944,6 +5294,11 @@ is-docker@^2.0.0, is-docker@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
 
+is-docker@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-3.0.0.tgz#90093aa3106277d8a77a5910dbae71747e15a200"
+  integrity sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==
+
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -4961,6 +5316,13 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-inside-container@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-inside-container/-/is-inside-container-1.0.0.tgz#e81fba699662eb31dbdaf26766a61d4814717ea4"
+  integrity sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==
+  dependencies:
+    is-docker "^3.0.0"
+
 is-installed-globally@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.4.0.tgz#9a0fd407949c30f86eb6959ef1b7994ed0b7b520"
@@ -5038,6 +5400,11 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
   integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
 
+is-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-3.0.0.tgz#e6bfd7aa6bef69f4f472ce9bb681e3e57b4319ac"
+  integrity sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==
+
 is-string@^1.0.5, is-string@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
@@ -5327,6 +5694,11 @@ keyv@^4.5.3:
   dependencies:
     json-buffer "3.0.1"
 
+kolorist@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.8.0.tgz#edddbbbc7894bc13302cdf740af6374d4a04743c"
+  integrity sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==
+
 lazy-ass@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
@@ -5488,6 +5860,13 @@ magic-string@^0.30.0, magic-string@^0.30.2:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
+magic-string@^0.30.3:
+  version "0.30.5"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.5.tgz#1994d980bd1c8835dc6e78db7cbd4ae4f24746f9"
+  integrity sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
 make-dir@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-4.0.0.tgz#c3c2307a771277cd9638305f915c29ae741b614e"
@@ -5530,6 +5909,11 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+mimic-fn@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
+  integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
+
 minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -5632,13 +6016,20 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
-npm-run-path@^4.0.0:
+npm-run-path@^4.0.0, npm-run-path@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
   integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
   dependencies:
     path-key "^3.0.0"
 
+npm-run-path@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.1.0.tgz#bc62f7f3f6952d9894bd08944ba011a6ee7b7e00"
+  integrity sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==
+  dependencies:
+    path-key "^4.0.0"
+
 nth-check@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
@@ -5706,13 +6097,20 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0:
   dependencies:
     wrappy "1"
 
-onetime@^5.1.0:
+onetime@^5.1.0, onetime@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
   integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
   dependencies:
     mimic-fn "^2.1.0"
 
+onetime@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-6.0.0.tgz#7c24c18ed1fd2e9bca4bd26806a33613c77d34b4"
+  integrity sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==
+  dependencies:
+    mimic-fn "^4.0.0"
+
 open@^8.4.0:
   version "8.4.2"
   resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
@@ -5722,6 +6120,16 @@ open@^8.4.0:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
+open@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-9.1.0.tgz#684934359c90ad25742f5a26151970ff8c6c80b6"
+  integrity sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==
+  dependencies:
+    default-browser "^4.0.0"
+    define-lazy-prop "^3.0.0"
+    is-inside-container "^1.0.0"
+    is-wsl "^2.2.0"
+
 optionator@^0.9.1:
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
@@ -5811,6 +6219,11 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
+path-key@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-4.0.0.tgz#295588dc3aee64154f877adb9d780b81c554bf18"
+  integrity sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
+
 path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
@@ -6121,6 +6534,13 @@ rollup@^3.21.0, rollup@^3.27.1, rollup@^3.29.1, rollup@^3.7.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
+run-applescript@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/run-applescript/-/run-applescript-5.0.0.tgz#e11e1c932e055d5c6b40d98374e0268d9b11899c"
+  integrity sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==
+  dependencies:
+    execa "^5.0.0"
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
@@ -6241,11 +6661,16 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
-signal-exit@^3.0.2:
+signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
+signal-exit@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
 sinon@15.0.2:
   version "15.0.2"
   resolved "https://registry.yarnpkg.com/sinon/-/sinon-15.0.2.tgz#f3e3aacb990bbaa8a7bb976e86118c5dc0154e66"
@@ -6503,6 +6928,11 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
+strip-final-newline@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
+  integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
+
 strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
@@ -6541,6 +6971,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svg-tags@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
+  integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -6620,6 +7055,11 @@ tinyspy@^1.0.2:
   resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-1.1.1.tgz#0cb91d5157892af38cb2d217f5c7e8507a5bf092"
   integrity sha512-UVq5AXt/gQlti7oxoIg5oi/9r0WpF7DGEVwXgqWSMmyN16+e3tl5lIvTaOpJ3TAtu5xFzWccFRM4R5NaWHF+4g==
 
+titleize@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/titleize/-/titleize-3.0.0.tgz#71c12eb7fdd2558aa8a44b0be83b8a76694acd53"
+  integrity sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==
+
 tmp@~0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
@@ -6985,6 +7425,25 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vite-hot-client@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/vite-hot-client/-/vite-hot-client-0.2.2.tgz#8b2f862b7b9f79a97d30cee9e907f984cc72aef0"
+  integrity sha512-iLBQWEJqcEvK1tx2glmQH1tq91zyN9eYC6Sfk+7aRM2he31W/UE4X5yOL4lP/cVQPPparg0ggjHcoNx4x/NNxQ==
+
+vite-plugin-inspect@^0.7.38:
+  version "0.7.42"
+  resolved "https://registry.yarnpkg.com/vite-plugin-inspect/-/vite-plugin-inspect-0.7.42.tgz#e055ad2ff82f3eca2f101fcfb29b5fabfe1e7366"
+  integrity sha512-JCyX86wr3siQc+p9Kd0t8VkFHAJag0RaQVIpdFGSv5FEaePEVB6+V/RGtz2dQkkGSXQzRWrPs4cU3dRKg32bXw==
+  dependencies:
+    "@antfu/utils" "^0.7.6"
+    "@rollup/pluginutils" "^5.0.5"
+    debug "^4.3.4"
+    error-stack-parser-es "^0.1.1"
+    fs-extra "^11.1.1"
+    open "^9.1.0"
+    picocolors "^1.0.0"
+    sirv "^2.0.3"
+
 vite-plugin-pwa@0.14.4:
   version "0.14.4"
   resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.14.4.tgz#d83fae9e85ab4a082e11ab475b3ec124bfe49084"
@@ -6998,6 +7457,34 @@ vite-plugin-pwa@0.14.4:
     workbox-build "^6.5.4"
     workbox-window "^6.5.4"
 
+vite-plugin-vue-devtools@1.0.0-rc.5:
+  version "1.0.0-rc.5"
+  resolved "https://registry.yarnpkg.com/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-1.0.0-rc.5.tgz#6adbbcf62d264cb66743eb7636da99a5cdcfa0b5"
+  integrity sha512-tAckFvkhSVJvqRKglP3bYi5FVGajNs/OJbSCMGxzog6wNin5Fb2RPPt1rsJDXwUJ4hcTY73QqlVO0UjYd1+39w==
+  dependencies:
+    "@vite-plugin-vue-devtools/core" "1.0.0-rc.5"
+    "@webfansplz/vuedoc-parser" "^0.0.4"
+    birpc "^0.2.14"
+    execa "^8.0.1"
+    sirv "^2.0.3"
+    vite-plugin-inspect "^0.7.38"
+    vite-plugin-vue-inspector "^3.7.1"
+
+vite-plugin-vue-inspector@^3.7.1:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/vite-plugin-vue-inspector/-/vite-plugin-vue-inspector-3.7.2.tgz#3406eb648c3063bd9505437b35c1d8253e937f89"
+  integrity sha512-PSe/t2RoVzB64Ofuec7W/Z0FuKHzmU7esLrMOGwX+BNyXt8dAMtYbz4wL/TqoH1zVPDdjQecQpM5+K9VnBYpAg==
+  dependencies:
+    "@babel/core" "^7.22.17"
+    "@babel/plugin-proposal-decorators" "^7.22.15"
+    "@babel/plugin-syntax-import-attributes" "^7.22.5"
+    "@babel/plugin-syntax-import-meta" "^7.10.4"
+    "@babel/plugin-transform-typescript" "^7.22.15"
+    "@vue/babel-plugin-jsx" "^1.1.1"
+    "@vue/compiler-dom" "^3.2.47"
+    kolorist "^1.7.0"
+    magic-string "^0.30.0"
+
 vite@4.3.5:
   version "4.3.5"
   resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.5.tgz#3871fe0f4b582ea7f49a85386ac80e84826367d9"
@@ -7095,6 +7582,14 @@ vue-router@4.2.2:
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
+vue-template-compiler@^2.6.14:
+  version "2.7.15"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.15.tgz#ec88ba8ceafe0f17a528b89c57e01e02da92b0de"
+  integrity sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.2.0"
+
 vue-template-compiler@^2.7.14:
   version "2.7.14"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1"