From fab2b7ae3b28b91546aa58826c54f1f811862507 Mon Sep 17 00:00:00 2001
From: BeardedBear <germain.poirrier@gmail.com>
Date: Thu, 8 Jan 2026 21:24:14 +0100
Subject: [PATCH 1/5] Tidy Vue templates and linting config

Add eslint-plugin-vue; wrap console.error calls with DEV checks. Fix
template formatting and attribute ordering (v-if/v-for/key placement,
self-closing tags), and adjust some prop/type defaults to satisfy lint
rules and prevent runtime issues.
---
 .github/copilot-instructions.md               |  2 +-
 eslint.config.js                              | 30 ++++++-
 src/App.vue                                   |  8 +-
 src/components/album/AlbumFoot.vue            |  4 +-
 src/components/album/AlbumGallery.vue         |  6 +-
 src/components/album/AlbumGroup.vue           |  2 +-
 src/components/album/AlbumHead.vue            | 12 +--
 src/components/album/AlbumIndex.vue           | 64 +++++++-------
 src/components/album/AlbumLink.vue            |  4 +-
 src/components/artist/ArtistHeader.vue        | 12 +--
 src/components/artist/ArtistInfo.vue          | 30 ++++---
 src/components/artist/ArtistLinks.vue         | 12 +--
 src/components/artist/ArtistList.vue          |  6 +-
 src/components/artist/ArtistNavigation.vue    | 68 +++++++--------
 src/components/artist/ArtistOptions.vue       | 10 +--
 src/components/artist/ArtistProfile.vue       |  2 +-
 src/components/artist/ArtistSidebar.vue       | 14 +--
 src/components/artist/ArtistTabs.vue          |  2 +-
 src/components/artist/BlockAlbums.vue         |  6 +-
 src/components/artist/BlockAlbumsLive.vue     |  6 +-
 src/components/artist/BlockEps.vue            |  6 +-
 src/components/artist/BlockSingles.vue        |  8 +-
 src/components/artist/RelatedArtists.vue      |  2 +-
 src/components/artist/SingleTrack.vue         | 10 ++-
 src/components/artist/TopTracks.vue           | 18 ++--
 src/components/config/ColorsTheme.vue         |  4 +-
 src/components/config/ConfigIndex.vue         |  8 +-
 src/components/dialog/AddAlbum.vue            |  8 +-
 src/components/dialog/AddCollection.vue       |  2 +-
 src/components/dialog/AddPlaylist.vue         |  2 +-
 src/components/dialog/AddSong.vue             | 11 +--
 src/components/dialog/AlbumVariants.vue       |  2 +-
 src/components/dialog/DialogWrap.vue          | 32 +++----
 src/components/dialog/EditPlaylist.vue        | 34 +++++---
 .../dialog/PlaylistOptionsDialog.vue          |  6 +-
 src/components/dialog/PreContentTrack.vue     |  8 +-
 src/components/dialog/SearchDialog.vue        |  2 +-
 src/components/frame/FrameIndex.vue           | 28 +++---
 src/components/minimized/MinimizedWindows.vue |  4 +-
 .../notification/NotificationIndex.vue        |  6 +-
 src/components/player/PlayerControls.vue      | 14 +--
 src/components/player/PlayerEpisode.vue       |  2 +-
 src/components/player/PlayerIndex.vue         |  8 +-
 src/components/player/PlayerMetas.vue         |  8 +-
 src/components/player/PlayerSlideUp.vue       | 17 ++--
 src/components/player/PlayerSong.vue          | 14 ++-
 src/components/player/SeekBar.vue             |  8 +-
 src/components/player/device/DeviceIndex.vue  | 10 ++-
 src/components/player/device/DeviceList.vue   | 29 ++++---
 src/components/player/device/DeviceType.vue   |  3 +-
 src/components/player/device/DeviceVolume.vue | 86 ++++++++++---------
 src/components/player/device/QueuedTracks.vue | 14 +--
 .../player/history/TrackHistory.vue           |  4 +-
 src/components/playlist/PlaylistActions.vue   | 16 ++--
 src/components/playlist/PlaylistHeader.vue    |  6 +-
 src/components/playlist/PlaylistTracks.vue    | 33 +++----
 src/components/podcast/PodcastCard.vue        |  4 +-
 src/components/podcast/PodcastEpisode.vue     | 22 ++---
 .../podcast/PodcastFollowButton.vue           |  4 +-
 src/components/releases/ReleaseIndex.vue      | 10 +--
 src/components/releases/ReleaseList.vue       | 12 +--
 src/components/releases/ReleaseSide.vue       | 12 +--
 src/components/search/SearchAlbums.vue        |  6 +-
 src/components/search/SearchArtists.vue       |  6 +-
 src/components/search/SearchInput.vue         |  8 +-
 src/components/search/SearchPodcasts.vue      | 12 ++-
 src/components/search/SearchSongs.vue         |  8 +-
 src/components/sidebar/MainMenu.vue           |  4 +-
 src/components/sidebar/PlaylistIcon.vue       | 10 +--
 src/components/sidebar/SidebarHead.vue        | 12 +--
 src/components/sidebar/SidebarIndex.vue       | 52 +++++------
 src/components/sidebar/SidebarStore.ts        |  7 +-
 src/components/sidebar/VisibilityIcon.vue     |  4 +-
 src/components/ui/AlbumCover.vue              |  8 +-
 src/components/ui/ButtonIndex.vue             | 13 +--
 src/components/ui/CustomSelect.vue            | 14 +--
 src/components/ui/LanguageSelect.vue          | 14 +--
 src/components/ui/LoadingDots.vue             |  2 +-
 src/components/ui/PageFit.vue                 |  4 +-
 src/components/ui/PageScroller.vue            |  6 +-
 src/components/ui/ShareContent.vue            | 14 +--
 src/components/ui/Tooltip.vue                 | 54 ++++++------
 src/views/LoginPage.vue                       |  2 +-
 src/views/album/AlbumPage.vue                 | 18 ++--
 src/views/artist/ArtistPage.vue               | 10 ++-
 src/views/home/HomePage.vue                   |  6 +-
 src/views/playlist/CollectionPage.vue         | 12 +--
 src/views/playlist/PlaylistPage.vue           | 18 ++--
 src/views/playlist/PlaylistStore.ts           |  3 +-
 src/views/podcasts/PodcastListPage.vue        | 18 ++--
 src/views/podcasts/PodcastPage.vue            | 14 +--
 src/views/podcasts/PodcastsStore.ts           | 21 ++---
 src/views/releases/ReleaseListPage.vue        | 16 ++--
 src/views/user/UserPage.vue                   | 14 +--
 94 files changed, 695 insertions(+), 552 deletions(-)

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 0659c7bb..9aa0aae9 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -39,7 +39,7 @@ async followPodcast(podcastId: string) {
     this.isFollowing = true;
     notification({ msg: "Success message", type: NotificationType.Success });
   } catch (error) {
-    console.error("Error description:", error);
+    if (import.meta.env.DEV) console.error("Error description:", error);
     notification({ msg: "Error message", type: NotificationType.Error });
   }
 }
diff --git a/eslint.config.js b/eslint.config.js
index 97fa7bbc..284cb6fe 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -3,6 +3,7 @@ import tseslint from "@typescript-eslint/eslint-plugin";
 import tsParser from "@typescript-eslint/parser";
 import perfectionist from "eslint-plugin-perfectionist";
 import eslintPluginPrettier from "eslint-plugin-prettier";
+import pluginVue from "eslint-plugin-vue";
 import globals from "globals";
 
 export default [
@@ -12,6 +13,8 @@ export default [
   },
   // Configuration de base ESLint
   eslint.configs.recommended,
+  // Configuration recommandée pour Vue 3
+  ...pluginVue.configs["flat/recommended"],
 
   // Configuration globale
   {
@@ -52,12 +55,26 @@ export default [
     },
   },
 
-  // Configuration pour les fichiers Vue - Ignorons les erreurs d'analyse pour l'instant
+  // Configuration pour les fichiers Vue (TypeScript)
   {
     files: ["**/*.vue"],
-    ignores: ["**/*.vue"],
+    languageOptions: {
+      parserOptions: {
+        ecmaVersion: "latest",
+        parser: tsParser,
+        sourceType: "module",
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tseslint,
+    },
     rules: {
-      // Désactiver temporairement l'analyse des fichiers Vue
+      "@typescript-eslint/no-unused-vars": "warn",
+      "vue/html-indent": "off",
+      "vue/html-self-closing": "off",
+      "vue/max-attributes-per-line": "off",
+      "vue/multi-word-component-names": "off",
+      "vue/singleline-html-element-content-newline": "off",
     },
   },
 
@@ -85,7 +102,12 @@ export default [
   {
     rules: {
       "linebreak-style": ["error", "unix"], // Force l'utilisation de LF (unix) au lieu de CRLF (windows)
-      "no-console": "warn",
+      "no-console": [
+        "warn",
+        {
+          allow: ["warn", "error"],
+        },
+      ],
       "no-debugger": "warn",
     },
   },
diff --git a/src/App.vue b/src/App.vue
index ca5a9366..34c96587 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,16 @@
 <template>
-  <template v-if="useRoute().name === 'Login'"><router-view></router-view></template>
+  <template v-if="useRoute().name === 'Login'">
+    <router-view />
+  </template>
   <template v-else>
     <DialogList />
     <div id="app-content">
       <Sidebar />
       <div class="main-content">
         <MobileHeader />
-        <router-view :key="useRoute().fullPath" v-slot="{ Component }"><component :is="Component" /></router-view>
+        <router-view :key="useRoute().fullPath" v-slot="{ Component }">
+          <component :is="Component" />
+        </router-view>
       </div>
     </div>
     <Player key="player" />
diff --git a/src/components/album/AlbumFoot.vue b/src/components/album/AlbumFoot.vue
index 884ffa84..a734a293 100644
--- a/src/components/album/AlbumFoot.vue
+++ b/src/components/album/AlbumFoot.vue
@@ -8,7 +8,9 @@
     >
       {{ album.label }}
     </ButtonIndex>
-    <div class="mentions">{{ album.copyrights[0].text }}</div>
+    <div class="mentions">
+      {{ album.copyrights[0].text }}
+    </div>
   </div>
 </template>
 
diff --git a/src/components/album/AlbumGallery.vue b/src/components/album/AlbumGallery.vue
index a0f2a45d..5ec027b5 100644
--- a/src/components/album/AlbumGallery.vue
+++ b/src/components/album/AlbumGallery.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <div class="heading sticky" v-if="!noTitle">
-      <i :class="`icon-${iconName}`"></i>
+    <div v-if="!noTitle" class="heading sticky">
+      <i :class="`icon-${iconName}`" />
       {{ title }}
     </div>
     <div class="albums">
-      <div :key="index" v-for="(album, index) in albumList">
+      <div v-for="(album, index) in albumList" :key="index">
         <Album :album="album" can-save with-artists />
       </div>
     </div>
diff --git a/src/components/album/AlbumGroup.vue b/src/components/album/AlbumGroup.vue
index a32a2e57..87bcb906 100644
--- a/src/components/album/AlbumGroup.vue
+++ b/src/components/album/AlbumGroup.vue
@@ -50,8 +50,8 @@ const displayAlbum = computed(() => {
 
 function openVariantsDialog(): void {
   dialogStore.open({
-    type: "albumVariants",
     albumGroup: props.group,
+    type: "albumVariants",
   });
 }
 </script>
diff --git a/src/components/album/AlbumHead.vue b/src/components/album/AlbumHead.vue
index 7722d40b..2d066ac0 100644
--- a/src/components/album/AlbumHead.vue
+++ b/src/components/album/AlbumHead.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="album-header">
     <div>
-      <div class="title">{{ album.name }}</div>
+      <div class="title">
+        {{ album.name }}
+      </div>
       <div class="infos">
         <ArtistList :artist-list="album.artists" />
         <span>&nbsp;·&nbsp;</span>
@@ -46,13 +48,13 @@ import { date, timecodeWithUnits } from "@/helpers/date";
 
 const props = defineProps<{ album: Album }>();
 
-function sumDuration(tracks: Track[] | TrackSimplified[]): number {
-  return tracks.map((t: Track | TrackSimplified) => t.duration_ms).reduce((acc, value) => acc + value, 0);
-}
-
 function openLink(url: string): void {
   window.open(url, "_blank");
 }
+
+function sumDuration(tracks: Track[] | TrackSimplified[]): number {
+  return tracks.map((t: Track | TrackSimplified) => t.duration_ms).reduce((acc, value) => acc + value, 0);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/album/AlbumIndex.vue b/src/components/album/AlbumIndex.vue
index 9c2b4b54..a1e255c7 100644
--- a/src/components/album/AlbumIndex.vue
+++ b/src/components/album/AlbumIndex.vue
@@ -1,26 +1,28 @@
 <template>
   <div ref="albumRef" :class="{ 'exact-search': exactSearch, 'actions-open': actionsOpen }" class="album">
-    <div class="current" v-if="isPlaying"><i class="icon-volume-2" /></div>
+    <div v-if="isPlaying" class="current">
+      <i class="icon-volume-2" />
+    </div>
     <div :class="{ 'is-playing': isPlaying }" class="cover">
-      <Cover :images="album.images" :size="coverSize ? coverSize : 'medium'" @click="handleCoverClick" class="img" />
+      <Cover :images="album.images" :size="coverSize ? coverSize : 'medium'" class="img" @click="handleCoverClick" />
       <ButtonIndex no-default-class class="play" type="button" @click.stop="handlePlayAlbum(album.uri)">
         <i class="icon-play" />
       </ButtonIndex>
       <ButtonIndex
+        v-if="canSave"
         no-default-class
         class="button-action add"
         type="button"
         @click.stop="dialogStore.open({ type: 'addalbum', albumId: album.id })"
-        v-if="canSave"
       >
         <i class="icon-plus" />
       </ButtonIndex>
       <ButtonIndex
+        v-if="canDelete"
         no-default-class
         class="button-action delete"
         type="button"
         @click.stop="deleteAlbum(album.id)"
-        v-if="canDelete"
       >
         <i class="icon-trash-2" />
       </ButtonIndex>
@@ -29,16 +31,20 @@
         class="album-group-stack-indicator"
         @click.stop="variantClick && variantClick()"
       >
-        <div class="album-group-stack-layer album-group-stack-layer-1"></div>
-        <div class="album-group-stack-layer album-group-stack-layer-2">{{ variantCount }}</div>
+        <div class="album-group-stack-layer album-group-stack-layer-1" />
+        <div class="album-group-stack-layer album-group-stack-layer-2">
+          {{ variantCount }}
+        </div>
       </div>
     </div>
     <div v-if="!withoutMetas">
-      <div class="name">{{ album.name }}</div>
+      <div class="name">
+        {{ album.name }}
+      </div>
       <div v-if="withArtists" class="artists">
         <ArtistList :artist-list="album.artists" feat />
       </div>
-      <div class="date" v-if="album.release_date && !withoutReleaseDate">
+      <div v-if="album.release_date && !withoutReleaseDate" class="date">
         {{ album.release_date.split("-").shift() }}
       </div>
     </div>
@@ -72,11 +78,11 @@ const props = defineProps<{
   canSave?: boolean;
   coverSize?: ImageSize | undefined;
   exactSearch?: boolean;
+  variantClick?: (() => void) | undefined;
+  variantCount?: number;
   withArtists?: boolean;
   withoutMetas?: boolean;
   withoutReleaseDate?: boolean;
-  variantCount?: number;
-  variantClick?: (() => void) | undefined;
 }>();
 
 const currentRouteId = useRoute().params.id;
@@ -113,24 +119,6 @@ function onDocumentClick(e: MouseEvent): void {
 onMounted(() => document.addEventListener("click", onDocumentClick));
 onBeforeUnmount(() => document.removeEventListener("click", onDocumentClick));
 
-/**
- * Handle album click to navigate and close dialog if open
- */
-function handleAlbumClick(): void {
-  if (dialogStore.show) {
-    dialogStore.close();
-  }
-  router.push(`/album/${props.album.id}`);
-}
-
-/**
- * Wrapper function to call the imported playAlbum helper function
- * This fixes the issue where albums were being added to the playlist twice
- */
-async function handlePlayAlbum(albumUri: string): Promise<void> {
-  await playAlbum(albumUri);
-}
-
 async function deleteAlbum(albumId: string): Promise<void> {
   try {
     const e = await instance().get<Paging<TrackSimplified>>(`albums/${albumId}/tracks`);
@@ -148,7 +136,7 @@ async function deleteAlbum(albumId: string): Promise<void> {
     }
     try {
       await instance().delete(`playlists/${currentRouteId}/tracks`, {
-        data: { tracks: tracks, snapshot_id: playlistStore.playlist.snapshot_id },
+        data: { snapshot_id: playlistStore.playlist.snapshot_id, tracks: tracks },
       });
       playlistStore.removeTracks(tracks);
       notification({ msg: "Album successfully removed from playlist", type: NotificationType.Success });
@@ -165,6 +153,24 @@ async function deleteAlbum(albumId: string): Promise<void> {
     });
   }
 }
+
+/**
+ * Handle album click to navigate and close dialog if open
+ */
+function handleAlbumClick(): void {
+  if (dialogStore.show) {
+    dialogStore.close();
+  }
+  router.push(`/album/${props.album.id}`);
+}
+
+/**
+ * Wrapper function to call the imported playAlbum helper function
+ * This fixes the issue where albums were being added to the playlist twice
+ */
+async function handlePlayAlbum(albumUri: string): Promise<void> {
+  await playAlbum(albumUri);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/album/AlbumLink.vue b/src/components/album/AlbumLink.vue
index 8eb5da52..7e974c41 100644
--- a/src/components/album/AlbumLink.vue
+++ b/src/components/album/AlbumLink.vue
@@ -1,12 +1,12 @@
 <template>
   <i
+    v-if="!noIcon"
     :class="{
       'icon-single': isSingle(album),
       'icon-compilation': isCompilation(album),
     }"
-    v-if="!noIcon"
   />
-  <span @click.prevent.stop="goAlbum(`/album/${album.id}`)" class="artist">{{ album.name }}</span>
+  <span class="artist" @click.prevent.stop="goAlbum(`/album/${album.id}`)">{{ album.name }}</span>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/components/artist/ArtistHeader.vue b/src/components/artist/ArtistHeader.vue
index 0652c7f1..58b8a68b 100644
--- a/src/components/artist/ArtistHeader.vue
+++ b/src/components/artist/ArtistHeader.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="header" ref="domHeader">
+  <div ref="domHeader" class="header">
     <div class="image-container">
-      <img :src="artistStore.artist.images[0].url" alt="" class="img" v-if="artistStore.artist.images.length" />
-      <img class="img" src="/img/default.png" v-else />
+      <img v-if="artistStore.artist.images.length" :src="artistStore.artist.images[0].url" alt="" class="img" />
+      <img v-else class="img" src="/img/default.png" />
     </div>
     <div class="inner">
       <div class="title">
-        <div class="name">{{ artistStore.artist.name }}</div>
+        <div class="name">
+          {{ artistStore.artist.name }}
+        </div>
       </div>
       <Options class="desktop-options" />
       <ButtonIndex class="mobile-options" icon-only @click="dialogStore.open({ type: 'artistOptions' })">
@@ -41,10 +43,10 @@ const infoAvailable = computed(() => {
 const tabs = computed<Tab[]>(() => [
   { icon: "icon-disc", id: "discography", label: "Discography" },
   {
+    disabled: !infoAvailable.value,
     icon: "icon-info",
     id: "info",
     label: "Info",
-    disabled: !infoAvailable.value,
     tooltip: !infoAvailable.value ? "No additional information available" : undefined,
   },
 ]);
diff --git a/src/components/artist/ArtistInfo.vue b/src/components/artist/ArtistInfo.vue
index 8f674e04..5c3c3d96 100644
--- a/src/components/artist/ArtistInfo.vue
+++ b/src/components/artist/ArtistInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="artist-info">
     <div class="main-content">
-      <div class="info-section" v-if="hasBiography">
+      <div v-if="hasBiography" class="info-section">
         <ArtistNavigation
           :sections="wikipediaSections"
           :languages="artistStore.wikidataArtist?.wikipediaLanguages ?? []"
@@ -11,18 +11,21 @@
           @language-change="onLanguageChange"
         />
 
+        <!-- eslint-disable vue/no-v-html -->
         <div
+          v-if="artistStore.wikipediaExtract"
           ref="wikipediaContentRef"
           class="wikipedia-content"
-          v-if="artistStore.wikipediaExtract"
-          v-html="artistStore.wikipediaExtract"
+          v-html="sanitizedWikipediaExtract"
         />
-        <div class="biography" v-else-if="artistStore.discogsArtist?.profile" v-html="formattedDiscogsProfile" />
+        <!-- eslint-enable vue/no-v-html -->
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-else-if="artistStore.discogsArtist?.profile" class="biography" v-html="formattedDiscogsProfile" />
       </div>
 
       <div
-        class="info-section"
         v-if="!artistStore.discogsArtist?.profile && !artistStore.wikidataArtist && !artistStore.wikipediaExtract"
+        class="info-section"
       >
         <p class="no-info">No additional information available for this artist.</p>
       </div>
@@ -33,6 +36,7 @@
 </template>
 
 <script lang="ts" setup>
+import DOMPurify from "dompurify";
 import { computed, nextTick, onMounted, ref, watch } from "vue";
 
 import ArtistNavigation from "@/components/artist/ArtistNavigation.vue";
@@ -50,19 +54,21 @@ const artistStore = useArtist();
 const wikipediaContentRef = ref<HTMLElement | null>(null);
 const wikipediaSections = ref<WikipediaSection[]>([]);
 
+const sanitizedWikipediaExtract = computed(() => {
+  if (!artistStore.wikipediaExtract) return "";
+  return DOMPurify.sanitize(artistStore.wikipediaExtract);
+});
+
 const formattedDiscogsProfile = computed(() => {
   if (!artistStore.discogsArtist?.profile) return "";
-  return parseDiscogsMarkup(artistStore.discogsArtist.profile);
+  const parsed = parseDiscogsMarkup(artistStore.discogsArtist.profile);
+  return DOMPurify.sanitize(parsed);
 });
 
 const hasBiography = computed(() => {
   return artistStore.wikipediaExtract || artistStore.discogsArtist?.profile;
 });
 
-function onLanguageChange(option: LanguageOption): void {
-  artistStore.switchWikipediaLanguage(option.url, option.code);
-}
-
 function extractSections(): void {
   // Wait a bit for the DOM to be fully updated after v-html changes
   setTimeout(() => {
@@ -87,6 +93,10 @@ function extractSections(): void {
   }, 100);
 }
 
+function onLanguageChange(option: LanguageOption): void {
+  artistStore.switchWikipediaLanguage(option.url, option.code);
+}
+
 function onSectionChange(): void {
   // The scroll is handled by the ArtistNavigation component
 }
diff --git a/src/components/artist/ArtistLinks.vue b/src/components/artist/ArtistLinks.vue
index c0524fc8..1ef09183 100644
--- a/src/components/artist/ArtistLinks.vue
+++ b/src/components/artist/ArtistLinks.vue
@@ -1,19 +1,19 @@
 <template>
   <div :class="{ floating }" class="links">
     <Tooltip text="Sputnik" placement="bottom">
-      <ButtonIndex @click.stop.prevent="frameStore.open(link.sputnik, 'Sputnik')" variant="nude">
+      <ButtonIndex variant="nude" @click.stop.prevent="frameStore.open(link.sputnik, 'Sputnik')">
         <i class="icon-sputnik" />
         <span class="link-name">Sputnik</span>
       </ButtonIndex>
     </Tooltip>
     <Tooltip text="Discogs" placement="bottom">
-      <ButtonIndex icon-only @click.stop.prevent="openLink(link.discogs)" variant="nude">
+      <ButtonIndex icon-only variant="nude" @click.stop.prevent="openLink(link.discogs)">
         <i class="icon-discogs" />
         <span class="link-name">Discogs</span>
       </ButtonIndex>
     </Tooltip>
     <Tooltip text="RateYourMusic" placement="bottom">
-      <ButtonIndex icon-only @click.stop.prevent="openLink(link.rym)" variant="nude">
+      <ButtonIndex icon-only variant="nude" @click.stop.prevent="openLink(link.rym)">
         <i class="icon-rym" />
         <span class="link-name">RateYourMusic</span>
       </ButtonIndex>
@@ -33,14 +33,14 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUpdated, ref } from "vue";
 
+import type { SocialLink } from "@/helpers/socialLinks";
+
 import { useFrame } from "@/components/frame/FrameStore";
 import ButtonIndex from "@/components/ui/ButtonIndex.vue";
 import Tooltip from "@/components/ui/Tooltip.vue";
 import { normalizeDiacritics } from "@/helpers/normalizeDiacritics";
-import { useArtist } from "@/views/artist/ArtistStore";
-
-import type { SocialLink } from "@/helpers/socialLinks";
 import { socialLinksFromDiscogs, socialLinksFromMusicBrainz, socialLinksFromWikidata } from "@/helpers/socialLinks";
+import { useArtist } from "@/views/artist/ArtistStore";
 
 const props = defineProps<{
   artistName: string;
diff --git a/src/components/artist/ArtistList.vue b/src/components/artist/ArtistList.vue
index c6dcaf06..d57352df 100644
--- a/src/components/artist/ArtistList.vue
+++ b/src/components/artist/ArtistList.vue
@@ -1,12 +1,12 @@
 <template>
-  <span :key="index" v-for="(artist, index) in artistList">
-    <span :class="{ feat }" @click.stop="goArtist(`/artist/${artist.uri.split(':').pop()}`)" class="artist">
+  <span v-for="(artist, index) in artistList" :key="index">
+    <span :class="{ feat }" class="artist" @click.stop="goArtist(`/artist/${artist.uri.split(':').pop()}`)">
       <span>{{ artist.name }}</span>
       <span class="options">
         <ArtistLinks :artist-name="artist.name" floating />
       </span>
     </span>
-    <span class="separator" v-if="artistList && artistList.length - 1 !== index">
+    <span v-if="artistList && artistList.length - 1 !== index" class="separator">
       /
       <span v-if="!feat">&nbsp;</span>
     </span>
diff --git a/src/components/artist/ArtistNavigation.vue b/src/components/artist/ArtistNavigation.vue
index f8dcf0ed..75ebefdb 100644
--- a/src/components/artist/ArtistNavigation.vue
+++ b/src/components/artist/ArtistNavigation.vue
@@ -2,9 +2,9 @@
   <div class="nav-container">
     <div ref="sentinelRef" class="sentinel" />
     <nav
+      v-if="hasSections || hasMultipleLanguages"
       class="wikipedia-nav"
       :class="{ stuck: isStuck }"
-      v-if="hasSections || hasMultipleLanguages"
       :style="{ top: headerHeight + 'px' }"
     >
       <CustomSelect
@@ -31,28 +31,28 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import CustomSelect, { type SelectOption } from "@/components/ui/CustomSelect.vue";
 import LanguageSelect, { type LanguageOption } from "@/components/ui/LanguageSelect.vue";
 
-interface WikipediaSection {
-  id: string;
-  title: string;
-}
-
 interface Props {
-  sections?: WikipediaSection[];
-  languages?: LanguageOption[];
   currentLanguage?: string;
   headerHeight?: number;
+  languages?: LanguageOption[];
+  sections?: WikipediaSection[];
+}
+
+interface WikipediaSection {
+  id: string;
+  title: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  sections: () => [],
-  languages: () => [],
   currentLanguage: "",
   headerHeight: 0,
+  languages: () => [],
+  sections: () => [],
 });
 
 const emit = defineEmits<{
-  sectionChange: [sectionId: string];
   languageChange: [option: LanguageOption];
+  sectionChange: [sectionId: string];
 }>();
 
 const sentinelRef = ref<HTMLElement | null>(null);
@@ -74,27 +74,8 @@ const languageOptions = computed(() => props.languages);
 // Observer to detect when nav is stuck
 let observer: IntersectionObserver | null = null;
 
-function setupIntersectionObserver(): void {
-  const scrollContainer = document.querySelector(".artist-page");
-  if (!scrollContainer || !sentinelRef.value) return;
-
-  // Disconnect existing observer if any
-  if (observer) {
-    observer.disconnect();
-  }
-
-  observer = new IntersectionObserver(
-    ([entry]) => {
-      isStuck.value = !entry.isIntersecting;
-    },
-    {
-      root: scrollContainer,
-      threshold: 0,
-      rootMargin: `-${props.headerHeight}px 0px 0px 0px`,
-    },
-  );
-
-  observer.observe(sentinelRef.value);
+function onLanguageChange(option: LanguageOption): void {
+  emit("languageChange", option);
 }
 
 function onSectionChange(option: SelectOption): void {
@@ -128,8 +109,27 @@ function scrollToSection(sectionId: string): void {
   }
 }
 
-function onLanguageChange(option: LanguageOption): void {
-  emit("languageChange", option);
+function setupIntersectionObserver(): void {
+  const scrollContainer = document.querySelector(".artist-page");
+  if (!scrollContainer || !sentinelRef.value) return;
+
+  // Disconnect existing observer if any
+  if (observer) {
+    observer.disconnect();
+  }
+
+  observer = new IntersectionObserver(
+    ([entry]) => {
+      isStuck.value = !entry.isIntersecting;
+    },
+    {
+      root: scrollContainer,
+      rootMargin: `-${props.headerHeight}px 0px 0px 0px`,
+      threshold: 0,
+    },
+  );
+
+  observer.observe(sentinelRef.value);
 }
 
 // Watch for headerHeight changes to recreate observer with correct rootMargin
diff --git a/src/components/artist/ArtistOptions.vue b/src/components/artist/ArtistOptions.vue
index 21d8a33e..3a324fc7 100644
--- a/src/components/artist/ArtistOptions.vue
+++ b/src/components/artist/ArtistOptions.vue
@@ -3,23 +3,23 @@
     <ArtistLinks :artist-name="artistStore.artist.name" />
     <ShareContent :beardify-url="$route.fullPath" :spotify-url="artistStore.artist.external_urls.spotify" />
     <ButtonIndex
+      v-if="artistStore.followStatus"
       :title="artistStore.artist.followers.total + ' followers'"
-      @click="switchFollow(artistStore.artist.id)"
       class="follow"
       variant="primary"
-      v-if="artistStore.followStatus"
+      @click="switchFollow(artistStore.artist.id)"
     >
       Followed
     </ButtonIndex>
-    <ButtonIndex @click="switchFollow(artistStore.artist.id)" class="follow" v-else>Follow</ButtonIndex>
+    <ButtonIndex v-else class="follow" @click="switchFollow(artistStore.artist.id)">Follow</ButtonIndex>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useArtist } from "@/views/artist/ArtistStore";
+import ArtistLinks from "@/components/artist/ArtistLinks.vue";
 import ButtonIndex from "@/components/ui/ButtonIndex.vue";
 import ShareContent from "@/components/ui/ShareContent.vue";
-import ArtistLinks from "@/components/artist/ArtistLinks.vue";
+import { useArtist } from "@/views/artist/ArtistStore";
 
 const artistStore = useArtist();
 
diff --git a/src/components/artist/ArtistProfile.vue b/src/components/artist/ArtistProfile.vue
index a2840384..60f1ece2 100644
--- a/src/components/artist/ArtistProfile.vue
+++ b/src/components/artist/ArtistProfile.vue
@@ -2,7 +2,7 @@
   <div class="profile-container">
     <div class="profile-wrapper" :class="{ visible: artistMetas }">
       <span v-if="artistTags && artistTags.length > 0" class="tag-list">
-        <span v-for="value in artistTags.slice(0, 5)" class="tag">
+        <span v-for="(value, index) in artistTags.slice(0, 5)" :key="index" class="tag">
           {{ typeof value === "string" ? value : value.name }}
         </span>
       </span>
diff --git a/src/components/artist/ArtistSidebar.vue b/src/components/artist/ArtistSidebar.vue
index fb7d60f4..6179dff2 100644
--- a/src/components/artist/ArtistSidebar.vue
+++ b/src/components/artist/ArtistSidebar.vue
@@ -1,18 +1,18 @@
 <template>
-  <aside class="sidebar" v-if="hasContent">
-    <div class="sidebar-section" v-if="details.length">
+  <aside v-if="hasContent" class="sidebar">
+    <div v-if="details.length" class="sidebar-section">
       <h3 class="sidebar-title">Details</h3>
       <div class="sidebar-list">
-        <div class="sidebar-item" v-for="item in details" :key="item.label">
+        <div v-for="item in details" :key="item.label" class="sidebar-item">
           <span class="sidebar-label">{{ item.label }}</span>
           <span class="sidebar-value">{{ item.value }}</span>
         </div>
       </div>
     </div>
 
-    <div class="sidebar-section" v-if="activeMembers.length || formerMembers.length">
+    <div v-if="activeMembers.length || formerMembers.length" class="sidebar-section">
       <h3 class="sidebar-title">Members</h3>
-      <div class="sidebar-members" v-if="activeMembers.length">
+      <div v-if="activeMembers.length" class="sidebar-members">
         <a
           v-for="member in activeMembers"
           :key="member.id"
@@ -56,7 +56,7 @@
       </template>
     </div>
 
-    <div class="sidebar-section" v-if="externalLinks.length">
+    <div v-if="externalLinks.length" class="sidebar-section">
       <h3 class="sidebar-title">External Links</h3>
       <div class="sidebar-links">
         <a
@@ -95,7 +95,7 @@ interface MemberItem {
   active: boolean;
   id: number;
   name: string;
-  thumbnail: string | null;
+  thumbnail: null | string;
   url: string;
 }
 
diff --git a/src/components/artist/ArtistTabs.vue b/src/components/artist/ArtistTabs.vue
index fd6330d2..486aa717 100644
--- a/src/components/artist/ArtistTabs.vue
+++ b/src/components/artist/ArtistTabs.vue
@@ -29,10 +29,10 @@
 
 <script lang="ts">
 export interface Tab {
+  disabled?: boolean;
   icon: string;
   id: string;
   label: string;
-  disabled?: boolean;
   tooltip?: string;
 }
 </script>
diff --git a/src/components/artist/BlockAlbums.vue b/src/components/artist/BlockAlbums.vue
index 198ff6e4..5860096e 100644
--- a/src/components/artist/BlockAlbums.vue
+++ b/src/components/artist/BlockAlbums.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="content-block" v-if="artistStore.albums.length">
+  <div v-if="artistStore.albums.length" class="content-block">
     <div :style="{ top: artistStore.headerHeight + 'px' }" class="heading sticky-heading">
-      <i class="icon-album"></i>
+      <i class="icon-album" />
       Albums
     </div>
     <div class="albums">
-      <div :key="index" v-for="(group, index) in albumGroups">
+      <div v-for="(group, index) in albumGroups" :key="index">
         <AlbumGroup :group="group" can-save clean-name />
       </div>
     </div>
diff --git a/src/components/artist/BlockAlbumsLive.vue b/src/components/artist/BlockAlbumsLive.vue
index a644f804..3081d430 100644
--- a/src/components/artist/BlockAlbumsLive.vue
+++ b/src/components/artist/BlockAlbumsLive.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="content-block" v-if="artistStore.albumsLive.length">
+  <div v-if="artistStore.albumsLive.length" class="content-block">
     <div :style="{ top: artistStore.headerHeight + 'px' }" class="heading sticky-heading">
-      <i class="icon-album"></i>
+      <i class="icon-album" />
       Live albums
     </div>
     <div class="albums">
-      <div :key="index" v-for="(group, index) in liveAlbumGroups">
+      <div v-for="(group, index) in liveAlbumGroups" :key="index">
         <AlbumGroup :group="group" can-save />
       </div>
     </div>
diff --git a/src/components/artist/BlockEps.vue b/src/components/artist/BlockEps.vue
index 0b492bcb..fceb6432 100644
--- a/src/components/artist/BlockEps.vue
+++ b/src/components/artist/BlockEps.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="content-block" v-if="artistStore.eps.length">
+  <div v-if="artistStore.eps.length" class="content-block">
     <div :style="{ top: artistStore.headerHeight + 'px' }" class="heading sticky-heading">
-      <i class="icon-ep"></i>
+      <i class="icon-ep" />
       EP's
     </div>
     <div class="eps">
-      <div :key="index" v-for="(group, index) in epGroups">
+      <div v-for="(group, index) in epGroups" :key="index">
         <AlbumGroup :group="group" can-save />
       </div>
     </div>
diff --git a/src/components/artist/BlockSingles.vue b/src/components/artist/BlockSingles.vue
index e1a17554..b24ffd88 100644
--- a/src/components/artist/BlockSingles.vue
+++ b/src/components/artist/BlockSingles.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="content-block" v-if="artistStore.singles.length">
+  <div v-if="artistStore.singles.length" class="content-block">
     <div :style="{ top: artistStore.headerHeight + 'px' }" class="heading sticky-heading">
-      <i class="icon-single"></i>
+      <i class="icon-single" />
       Singles
     </div>
     <div class="singles">
       <div
-        :key="index"
         v-for="(album, index) in artistStore.singles.sort(
           (a, b) => parseInt(b.release_date, 10) - parseInt(a.release_date, 10),
         )"
+        :key="index"
       >
         <SingleTrack :single="album" />
       </div>
@@ -18,8 +18,8 @@
 </template>
 
 <script lang="ts" setup>
-import { useArtist } from "@/views/artist/ArtistStore";
 import SingleTrack from "@/components/artist/SingleTrack.vue";
+import { useArtist } from "@/views/artist/ArtistStore";
 
 const artistStore = useArtist();
 </script>
diff --git a/src/components/artist/RelatedArtists.vue b/src/components/artist/RelatedArtists.vue
index 501d71aa..3093059a 100644
--- a/src/components/artist/RelatedArtists.vue
+++ b/src/components/artist/RelatedArtists.vue
@@ -3,10 +3,10 @@
     <div :style="{ top: artistStore.headerHeight + 'px' }" class="heading sticky-heading">Similar artists</div>
     <div class="list">
       <router-link
+        v-for="(artist, index) in artistStore.relatedArtists.artists"
         :key="index"
         :to="`/artist/${artist.id}`"
         class="item"
-        v-for="(artist, index) in artistStore.relatedArtists.artists"
       >
         <Cover :images="artist.images" class="image" size="small" />
         <div class="name">
diff --git a/src/components/artist/SingleTrack.vue b/src/components/artist/SingleTrack.vue
index fe0496f6..b8b6bbcf 100644
--- a/src/components/artist/SingleTrack.vue
+++ b/src/components/artist/SingleTrack.vue
@@ -1,17 +1,21 @@
 <template>
   <div
     :class="{ active: isCurrentTrack(single, playerStore.playerState?.track_window.current_track) }"
-    @click="playSingle(single.uri)"
     class="single"
+    @click="playSingle(single.uri)"
   >
     <div class="what">
       <Cover :images="single.images" :size="'small'" class="cover" />
       <div>
-        <div class="name">{{ single.name }}</div>
+        <div class="name">
+          {{ single.name }}
+        </div>
         <ArtistList :artist-list="single.artists" feat />
       </div>
     </div>
-    <div class="release-date">{{ date(single.release_date) }}</div>
+    <div class="release-date">
+      {{ date(single.release_date) }}
+    </div>
   </div>
 </template>
 
diff --git a/src/components/artist/TopTracks.vue b/src/components/artist/TopTracks.vue
index 1064ced3..f4ada310 100644
--- a/src/components/artist/TopTracks.vue
+++ b/src/components/artist/TopTracks.vue
@@ -2,20 +2,24 @@
   <div v-if="artistStore.topTracks.tracks?.length">
     <div :style="{ top: artistStore.headerHeight + 'px' }" class="heading sticky-heading">Top tracks</div>
     <div
-      :class="{ active: isCurrentTrack(trackItem, playerStore.playerState?.track_window.current_track) }"
+      v-for="(trackItem, index) in artistStore.topTracks.tracks"
       :key="index"
-      @click="playSongs(index, artistStore.topTracks.tracks)"
+      :class="{ active: isCurrentTrack(trackItem, playerStore.playerState?.track_window.current_track) }"
       class="item"
-      v-for="(trackItem, index) in artistStore.topTracks.tracks"
+      @click="playSongs(index, artistStore.topTracks.tracks)"
     >
       <div class="cover-wrap">
         <Cover :images="trackItem.album.images" class="cover" size="small" />
-        <div @click.prevent.stop="dialogStore.open({ type: 'addSong', track: trackItem })" class="hover">
-          <i class="add icon-plus"></i>
+        <div class="hover" @click.prevent.stop="dialogStore.open({ type: 'addSong', track: trackItem })">
+          <i class="add icon-plus" />
         </div>
       </div>
-      <div class="name">{{ trackItem.name }}</div>
-      <div class="duration">{{ timecode(trackItem.duration_ms) }}</div>
+      <div class="name">
+        {{ trackItem.name }}
+      </div>
+      <div class="duration">
+        {{ timecode(trackItem.duration_ms) }}
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/config/ColorsTheme.vue b/src/components/config/ColorsTheme.vue
index 37b9aa92..9a8e0494 100644
--- a/src/components/config/ColorsTheme.vue
+++ b/src/components/config/ColorsTheme.vue
@@ -2,6 +2,8 @@
   <div class="colors">
     <div class="schemes">
       <ButtonIndex
+        v-for="(c, index) in textColors"
+        :key="index"
         no-default-class
         :class="{
           current: configStore.schemeLabel === `${c.name}`,
@@ -11,9 +13,7 @@
           default: c.name === 'default',
         }"
         class="scheme-item"
-        :key="index"
         @click="c.fn()"
-        v-for="(c, index) in textColors"
       />
     </div>
 
diff --git a/src/components/config/ConfigIndex.vue b/src/components/config/ConfigIndex.vue
index 369da7e2..bbaeca1e 100644
--- a/src/components/config/ConfigIndex.vue
+++ b/src/components/config/ConfigIndex.vue
@@ -1,11 +1,13 @@
 <template>
-  <div :class="{ bye: configStore.bye }" class="config" ref="domConfig" v-if="configStore.show">
+  <div v-if="configStore.show" ref="domConfig" :class="{ bye: configStore.bye }" class="config">
     <div class="user">
       <div>{{ authStore.me?.display_name }}</div>
-      <div class="user-mail">{{ authStore.me?.email }}</div>
+      <div class="user-mail">
+        {{ authStore.me?.email }}
+      </div>
     </div>
 
-    <div class="section" v-if="env !== 'production'">
+    <div v-if="env !== 'production'" class="section">
       <div class="section-title">Debug</div>
       <ButtonIndex to="/login" variant="full">Login</ButtonIndex>
       <ButtonIndex variant="full" @click="authStore.refresh()">Refresh token</ButtonIndex>
diff --git a/src/components/dialog/AddAlbum.vue b/src/components/dialog/AddAlbum.vue
index 3900dca1..d1180ecc 100644
--- a/src/components/dialog/AddAlbum.vue
+++ b/src/components/dialog/AddAlbum.vue
@@ -2,12 +2,12 @@
   <Dialog title="Add an album to a collection" with-title>
     <div class="content">
       <div
-        :key="index"
-        @click="add(dialogStore.albumId ? dialogStore.albumId : '', playlist.id)"
-        class="collection"
         v-for="(playlist, index) in sidebarStore.collections.filter(
           (playlist) => playlist.collaborative || playlist.owner.id === authStore.me?.id,
         )"
+        :key="index"
+        class="collection"
+        @click="add(dialogStore.albumId ? dialogStore.albumId : '', playlist.id)"
       >
         <div class="album">
           <div>
@@ -60,7 +60,7 @@ async function add(albumId: string, playlistId: string): Promise<void> {
       });
     } catch (error: unknown) {
       notification({ msg: "Failed to add album", type: NotificationType.Error });
-      console.error("Add album error:", error);
+      if (import.meta.env.DEV) console.error("Add album error:", error);
     }
   }
 }
diff --git a/src/components/dialog/AddCollection.vue b/src/components/dialog/AddCollection.vue
index b20d46b1..bda9167a 100644
--- a/src/components/dialog/AddCollection.vue
+++ b/src/components/dialog/AddCollection.vue
@@ -1,7 +1,7 @@
 <template>
   <Dialog title="Create a collection" with-title>
     <div class="wrap">
-      <input class="input" placeholder="Collection's name" type="text" v-model="collectionName" />
+      <input v-model="collectionName" class="input" placeholder="Collection's name" type="text" />
       <ButtonIndex variant="primary" @click="create()">Create</ButtonIndex>
     </div>
   </Dialog>
diff --git a/src/components/dialog/AddPlaylist.vue b/src/components/dialog/AddPlaylist.vue
index 7db6aaf4..b8d0f8fc 100644
--- a/src/components/dialog/AddPlaylist.vue
+++ b/src/components/dialog/AddPlaylist.vue
@@ -1,7 +1,7 @@
 <template>
   <Dialog title="Create a playlist" with-title>
     <div class="wrap">
-      <input class="input" placeholder="Playlist's name" type="text" v-model="playlistName" />
+      <input v-model="playlistName" class="input" placeholder="Playlist's name" type="text" />
       <ButtonIndex variant="primary" @click="create()">Create</ButtonIndex>
     </div>
   </Dialog>
diff --git a/src/components/dialog/AddSong.vue b/src/components/dialog/AddSong.vue
index eba21c7c..67f9036f 100644
--- a/src/components/dialog/AddSong.vue
+++ b/src/components/dialog/AddSong.vue
@@ -1,14 +1,14 @@
 <template>
   <Dialog :title="`Add to a playlist`" pre-content with-title>
-    <template #pre-content v-if="dialogStore.track">
+    <template v-if="dialogStore.track" #pre-content>
       <PreContentTrack :track="dialogStore.track" />
     </template>
     <div class="content">
       <div
+        v-for="(playlist, index) in filteredPlaylists"
         :key="index"
-        @click="add(dialogStore.track?.uri ? dialogStore.track?.uri : '', playlist.id)"
         class="collection"
-        v-for="(playlist, index) in filteredPlaylists"
+        @click="add(dialogStore.track?.uri ? dialogStore.track?.uri : '', playlist.id)"
       >
         <div class="playlist">
           <div>
@@ -23,6 +23,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import { NotificationType } from "@/@types/Notification";
 import { instance } from "@/api";
 import { useDialog } from "@/components/dialog/DialogStore";
@@ -33,7 +35,6 @@ import { useSidebar } from "@/components/sidebar/SidebarStore";
 import VisibilityIcon from "@/components/sidebar/VisibilityIcon.vue";
 import { notification } from "@/helpers/notifications";
 import { trackAllreadyExist } from "@/helpers/playlist";
-import { computed } from "vue";
 
 const dialogStore = useDialog();
 const sidebarStore = useSidebar();
@@ -59,7 +60,7 @@ async function add(songUri: string, playlistId: string): Promise<void> {
           : "Failed to add track.",
         type: NotificationType.Error,
       });
-      console.error("Add track error:", error);
+      if (import.meta.env.DEV) console.error("Add track error:", error);
     }
   }
 }
diff --git a/src/components/dialog/AlbumVariants.vue b/src/components/dialog/AlbumVariants.vue
index 9d6ad445..98747c46 100644
--- a/src/components/dialog/AlbumVariants.vue
+++ b/src/components/dialog/AlbumVariants.vue
@@ -11,7 +11,7 @@
           :without-release-date="withoutReleaseDate"
         />
       </div>
-      <div :key="variant.id" v-for="variant in dialogStore.albumGroup!.variants" class="album-variants-item">
+      <div v-for="variant in dialogStore.albumGroup!.variants" :key="variant.id" class="album-variants-item">
         <Album
           :album="variant"
           :can-save="canSave"
diff --git a/src/components/dialog/DialogWrap.vue b/src/components/dialog/DialogWrap.vue
index 0114dbd9..9c3a78f5 100644
--- a/src/components/dialog/DialogWrap.vue
+++ b/src/components/dialog/DialogWrap.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="dialog" v-if="dialogStore.show">
+  <div v-if="dialogStore.show" class="dialog">
     <div
       v-show="!dialogStore.isMinimized"
       :class="{ 'is-closing': dialogStore.isClosing }"
-      @click="dialogStore.close()"
       class="bg"
-    ></div>
+      @click="dialogStore.close()"
+    />
     <div
       ref="wrapperRef"
       v-motion
@@ -14,11 +14,11 @@
       :class="{ 'is-closing': dialogStore.isClosing, big, minimized: dialogStore.isMinimized }"
       class="wrapper"
     >
-      <div class="pre-content" v-if="preContent">
+      <div v-if="preContent" class="pre-content">
         <slot name="pre-content" />
       </div>
       <div class="dialog-content">
-        <div class="head" v-if="withTitle">
+        <div v-if="withTitle" class="head">
           <div>{{ title }}</div>
           <div class="head-buttons">
             <ButtonIndex v-if="withMinimize" no-default-class class="minimize" @click="handleMinimize">
@@ -29,7 +29,9 @@
             </ButtonIndex>
           </div>
         </div>
-        <div :class="{ big }" class="content"><slot /></div>
+        <div :class="{ big }" class="content">
+          <slot />
+        </div>
       </div>
     </div>
   </div>
@@ -58,22 +60,22 @@ const handleMinimize = (): void => {
 
   const motion = useMotion(wrapperRef.value, {
     initial: {
-      scale: 1,
       opacity: 1,
+      scale: 1,
       x: 0,
       y: 0,
     },
   });
 
   motion.apply({
-    scale: 0.1,
     opacity: 0,
-    x: -window.innerWidth / 2 + 150,
-    y: window.innerHeight / 2 - 100,
+    scale: 0.1,
     transition: {
       duration: 400,
       ease: [0.4, 0, 0.2, 1],
     },
+    x: -window.innerWidth / 2 + 150,
+    y: window.innerHeight / 2 - 100,
   });
 
   setTimeout(() => {
@@ -87,15 +89,15 @@ watch(
     if (!isMinimized && wrapperRef.value) {
       const motion = useMotion(wrapperRef.value, {});
       motion.apply({
-        scale: 1,
         opacity: 1,
-        x: 0,
-        y: 0,
+        scale: 1,
         transition: {
-          type: "spring",
-          stiffness: 200,
           damping: 20,
+          stiffness: 200,
+          type: "spring",
         },
+        x: 0,
+        y: 0,
       });
     }
   },
diff --git a/src/components/dialog/EditPlaylist.vue b/src/components/dialog/EditPlaylist.vue
index 2b70a2b7..3059fe1b 100644
--- a/src/components/dialog/EditPlaylist.vue
+++ b/src/components/dialog/EditPlaylist.vue
@@ -1,25 +1,31 @@
 <template>
   <Dialog :title="`Edit a ${isCollection ? 'collection' : 'playlist'}`" with-title>
-    <div class="loading" v-if="values.name === ''"><Loading /></div>
-    <div class="wrap" v-else>
+    <div v-if="values.name === ''" class="loading">
+      <Loading />
+    </div>
+    <div v-else class="wrap">
       <div>
         <div class="section">
           <label for="name">Name</label>
-          <input class="input" id="name" type="text" v-if="isEditable" v-model="values.name" />
-          <div v-else>{{ values.name }}</div>
+          <input v-if="isEditable" id="name" v-model="values.name" class="input" type="text" />
+          <div v-else>
+            {{ values.name }}
+          </div>
         </div>
         <div class="section">
           <label for="description">Description</label>
           <textarea
-            class="textarea"
-            id="description"
-            placeholder="Add description"
             v-if="isEditable"
+            id="description"
             v-model="values.description"
-          ></textarea>
-          <div v-else>{{ values.description }}</div>
+            class="textarea"
+            placeholder="Add description"
+          />
+          <div v-else>
+            {{ values.description }}
+          </div>
         </div>
-        <div class="option-list section" v-if="isEditable">
+        <div v-if="isEditable" class="option-list section">
           <div class="option">
             <label for="public">Visibility</label>
             <div class="buttons">
@@ -63,14 +69,14 @@
       <div class="actions">
         <ButtonIndex @click="remove()">Delete {{ isCollection ? "collection" : "playlist" }}</ButtonIndex>
         <ButtonIndex
+          v-if="isEditable"
           variant="primary"
           @click="dialogStore.updatePlaylist(values, dialogStore.playlistId, isCollection)"
-          v-if="isEditable"
         >
           Confirm
         </ButtonIndex>
       </div>
-      <div class="bottom" v-if="isTouchDevice()">
+      <div v-if="isTouchDevice()" class="bottom">
         <p>Share content</p>
         <ShareContent :beardify-url="$route.fullPath" :spotify-url="playlistStore.playlist.external_urls.spotify" />
       </div>
@@ -94,6 +100,7 @@ import { isTouchDevice } from "@/helpers/isTouchDevice";
 import { notification } from "@/helpers/notifications";
 import { useAuth } from "@/views/auth/AuthStore";
 import { usePlaylist } from "@/views/playlist/PlaylistStore";
+
 import ShareContent from "../ui/ShareContent.vue";
 
 const dialogStore = useDialog();
@@ -135,8 +142,7 @@ function remove(): void {
       try {
         await sidebarStore.removePlaylist(playlistIdToDelete);
       } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error("Error while deleting playlist:", error);
+        if (import.meta.env.DEV) console.error("Error while deleting playlist:", error);
         notification({ msg: "Unable to delete playlist", type: NotificationType.Error });
       }
     }, 300); // Slightly longer than the closing animation (200ms)
diff --git a/src/components/dialog/PlaylistOptionsDialog.vue b/src/components/dialog/PlaylistOptionsDialog.vue
index a6012dc2..0d7bf7f0 100644
--- a/src/components/dialog/PlaylistOptionsDialog.vue
+++ b/src/components/dialog/PlaylistOptionsDialog.vue
@@ -3,12 +3,12 @@
     <div class="wrap">
       <PlaylistActions />
       <input
+        v-if="route.name === 'Collection'"
+        ref="searchElement"
+        v-model="playlistStore.filter"
         class="search"
         placeholder="Filter album/artist"
-        ref="searchElement"
         type="search"
-        v-if="route.name === 'Collection'"
-        v-model="playlistStore.filter"
       />
       <ShareContent :beardify-url="route.fullPath" :spotify-url="playlistStore.playlist.external_urls.spotify" />
     </div>
diff --git a/src/components/dialog/PreContentTrack.vue b/src/components/dialog/PreContentTrack.vue
index 1253d4f5..8289c4fd 100644
--- a/src/components/dialog/PreContentTrack.vue
+++ b/src/components/dialog/PreContentTrack.vue
@@ -3,8 +3,12 @@
     <div class="meta">
       <i class="icon-note note" />
       <div>
-        <div class="name">{{ track?.name }}</div>
-        <div class="artist">{{ track?.artists[0].name }}</div>
+        <div class="name">
+          {{ track?.name }}
+        </div>
+        <div class="artist">
+          {{ track?.artists[0].name }}
+        </div>
       </div>
     </div>
     <div class="options">
diff --git a/src/components/dialog/SearchDialog.vue b/src/components/dialog/SearchDialog.vue
index 8ae02b54..79c7e9ad 100644
--- a/src/components/dialog/SearchDialog.vue
+++ b/src/components/dialog/SearchDialog.vue
@@ -5,6 +5,6 @@
 </template>
 
 <script lang="ts" setup>
-import Search from "@/components/search/SearchIndex.vue";
 import Dialog from "@/components/dialog/DialogWrap.vue";
+import Search from "@/components/search/SearchIndex.vue";
 </script>
diff --git a/src/components/frame/FrameIndex.vue b/src/components/frame/FrameIndex.vue
index 73baf8ee..9181c238 100644
--- a/src/components/frame/FrameIndex.vue
+++ b/src/components/frame/FrameIndex.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="frame" v-if="frameStore.show">
+  <div v-if="frameStore.show" class="frame">
     <div
       v-show="!frameStore.isMinimized"
       :class="{ 'is-closing': frameStore.isClosing }"
-      @click="frameStore.close()"
       class="bg"
-    ></div>
+      @click="frameStore.close()"
+    />
     <div
       ref="wrapperRef"
       v-motion
@@ -23,7 +23,7 @@
           <ButtonIndex size="small" @click="frameStore.close()">Close</ButtonIndex>
         </div>
       </div>
-      <iframe :class="{ 'is-closing': frameStore.isClosing }" :src="frameStore.url" border="0"></iframe>
+      <iframe :class="{ 'is-closing': frameStore.isClosing }" :src="frameStore.url" border="0" />
     </div>
   </div>
 </template>
@@ -32,9 +32,9 @@
 import { useMotion } from "@vueuse/motion";
 import { ref, watch } from "vue";
 
+import { useFrame } from "@/components/frame/FrameStore";
 import ButtonIndex from "@/components/ui/ButtonIndex.vue";
 import LoadingDots from "@/components/ui/LoadingDots.vue";
-import { useFrame } from "@/components/frame/FrameStore";
 
 const frameStore = useFrame();
 const wrapperRef = ref<HTMLElement | null>(null);
@@ -44,22 +44,22 @@ const handleMinimize = (): void => {
 
   const motion = useMotion(wrapperRef.value, {
     initial: {
-      scale: 1,
       opacity: 1,
+      scale: 1,
       x: 0,
       y: 0,
     },
   });
 
   motion.apply({
-    scale: 0.1,
     opacity: 0,
-    x: -window.innerWidth / 2 + 150,
-    y: window.innerHeight / 2 - 100,
+    scale: 0.1,
     transition: {
       duration: 400,
       ease: [0.4, 0, 0.2, 1],
     },
+    x: -window.innerWidth / 2 + 150,
+    y: window.innerHeight / 2 - 100,
   });
 
   setTimeout(() => {
@@ -73,15 +73,15 @@ watch(
     if (!isMinimized && wrapperRef.value) {
       const motion = useMotion(wrapperRef.value, {});
       motion.apply({
-        scale: 1,
         opacity: 1,
-        x: 0,
-        y: 0,
+        scale: 1,
         transition: {
-          type: "spring",
-          stiffness: 200,
           damping: 20,
+          stiffness: 200,
+          type: "spring",
         },
+        x: 0,
+        y: 0,
       });
     }
   },
diff --git a/src/components/minimized/MinimizedWindows.vue b/src/components/minimized/MinimizedWindows.vue
index 0f848833..6d0b9532 100644
--- a/src/components/minimized/MinimizedWindows.vue
+++ b/src/components/minimized/MinimizedWindows.vue
@@ -12,7 +12,7 @@
         <i class="icon-message-square" />
         <span>{{ getDialogTitle() }}</span>
       </div>
-      <button class="close-btn" @click.stop="dialogStore.close()" aria-label="Close dialog">
+      <button class="close-btn" aria-label="Close dialog" @click.stop="dialogStore.close()">
         <i class="icon-x" />
       </button>
     </div>
@@ -29,7 +29,7 @@
         <i class="icon-external-link" />
         <span>{{ frameStore.siteName || "Frame" }}</span>
       </div>
-      <button class="close-btn" @click.stop="frameStore.close()" aria-label="Close frame">
+      <button class="close-btn" aria-label="Close frame" @click.stop="frameStore.close()">
         <i class="icon-x" />
       </button>
     </div>
diff --git a/src/components/notification/NotificationIndex.vue b/src/components/notification/NotificationIndex.vue
index f0a488bc..ccff0eea 100644
--- a/src/components/notification/NotificationIndex.vue
+++ b/src/components/notification/NotificationIndex.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="notification-list" v-if="notificationStore.notifications.length !== 0">
+  <div v-if="notificationStore.notifications.length !== 0" class="notification-list">
     <div
-      :class="{ error: notif.type === NotificationType.Error }"
+      v-for="(notif, index) in notificationStore.notifications"
       :key="index"
+      :class="{ error: notif.type === NotificationType.Error }"
       class="notification"
-      v-for="(notif, index) in notificationStore.notifications"
     >
       {{ notif.msg }}
     </div>
diff --git a/src/components/player/PlayerControls.vue b/src/components/player/PlayerControls.vue
index 4cf7adc9..a42815cf 100644
--- a/src/components/player/PlayerControls.vue
+++ b/src/components/player/PlayerControls.vue
@@ -2,48 +2,48 @@
   <div class="controls" :class="{ 'force-mobile': props.forceMobile }">
     <div class="btns">
       <ButtonIndex
+        v-if="playerStore.currentlyPlaying?.currently_playing_type !== 'episode'"
         no-default-class
         :class="{ active: playerStore.currentlyPlaying?.shuffle_state }"
         class="control-button shuffle"
         :size="props.forceMobile ? 'big' : 'default'"
         @click="playerStore.toggleShuffle()"
-        v-if="playerStore.currentlyPlaying?.currently_playing_type !== 'episode'"
       >
         <i class="icon-shuffle" />
       </ButtonIndex>
       <ButtonIndex
+        v-if="playerStore.currentlyPlaying?.currently_playing_type !== 'episode'"
         no-default-class
         :class="{ active: playerStore.currentlyPlaying?.repeat_state !== 'off' }"
         class="control-button repeat"
         @click="playerStore.toggleRepeat()"
-        v-if="playerStore.currentlyPlaying?.currently_playing_type !== 'episode'"
       >
         <i class="icon-repeat" />
       </ButtonIndex>
       <ButtonIndex
+        v-if="playerStore.playerState?.paused"
         no-default-class
         class="control-button play"
         :size="props.forceMobile ? 'big' : 'default'"
         @click="playerStore.play()"
-        v-if="playerStore.playerState?.paused"
       >
         <i class="icon-play" />
       </ButtonIndex>
       <ButtonIndex
+        v-else
         no-default-class
         class="control-button play"
-        @click="playerStore.pause()"
-        v-else
         :size="props.forceMobile ? 'big' : 'default'"
+        @click="playerStore.pause()"
       >
         <i class="icon-pause" />
       </ButtonIndex>
       <ButtonIndex
+        v-if="playerStore.currentlyPlaying?.currently_playing_type !== 'episode'"
         no-default-class
         class="control-button next"
-        @click="playerStore.next()"
-        v-if="playerStore.currentlyPlaying?.currently_playing_type !== 'episode'"
         :size="props.forceMobile ? 'big' : 'default'"
+        @click="playerStore.next()"
       >
         <i class="icon-skip-forward" />
       </ButtonIndex>
diff --git a/src/components/player/PlayerEpisode.vue b/src/components/player/PlayerEpisode.vue
index aa78d378..7df233c9 100644
--- a/src/components/player/PlayerEpisode.vue
+++ b/src/components/player/PlayerEpisode.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="surface" @click.capture="onSurfaceClick">
     <div class="meta">
-      <What :cover-url="playerStore.currentFromSDK?.album.images[1].url" v-if="playerStore.currentFromSDK" />
+      <What v-if="playerStore.currentFromSDK" :cover-url="playerStore.currentFromSDK?.album.images[1].url" />
       <Loader v-else />
       <Controls
         :duration="playerStore.currentFromSDK && playerStore.currentFromSDK.duration_ms"
diff --git a/src/components/player/PlayerIndex.vue b/src/components/player/PlayerIndex.vue
index 77cdd7a9..8a1fb675 100644
--- a/src/components/player/PlayerIndex.vue
+++ b/src/components/player/PlayerIndex.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="player">
-    <template v-if="playerStore.currentlyPlaying?.currently_playing_type === 'episode'"><PlayerEpisode /></template>
-    <template v-else><PlayerSong /></template>
+    <template v-if="playerStore.currentlyPlaying?.currently_playing_type === 'episode'">
+      <PlayerEpisode />
+    </template>
+    <template v-else>
+      <PlayerSong />
+    </template>
   </div>
 </template>
 
diff --git a/src/components/player/PlayerMetas.vue b/src/components/player/PlayerMetas.vue
index bb180f86..a633fdeb 100644
--- a/src/components/player/PlayerMetas.vue
+++ b/src/components/player/PlayerMetas.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="what" v-if="currentTrack">
+  <div v-if="currentTrack" class="what">
     <div class="cover-wrap">
-      <img :src="currentTrack.album.images[1].url || ''" class="cover" v-if="currentTrack.album.images.length" />
-      <div @click="dialogStore.open({ type: 'addSong', track: currentTrack })" class="hover">
-        <i class="add icon-plus"></i>
+      <img v-if="currentTrack.album.images.length" :src="currentTrack.album.images[1].url || ''" class="cover" />
+      <div class="hover" @click="dialogStore.open({ type: 'addSong', track: currentTrack })">
+        <i class="add icon-plus" />
       </div>
     </div>
     <div class="text-content">
diff --git a/src/components/player/PlayerSlideUp.vue b/src/components/player/PlayerSlideUp.vue
index 938dbdc6..8fad3b40 100644
--- a/src/components/player/PlayerSlideUp.vue
+++ b/src/components/player/PlayerSlideUp.vue
@@ -1,20 +1,22 @@
 <template>
   <transition name="slide-up">
     <div v-if="playerStore.panelOpened" class="player-slide-up" role="dialog" aria-modal="true">
-      <div class="backdrop" @click="playerStore.closePanel"></div>
+      <div class="backdrop" @click="playerStore.closePanel" />
       <div class="panel" tabindex="0" @keydown.esc="playerStore.closePanel">
         <div class="content">
           <div class="cover">
-            <img :src="currentTrack?.album?.images[0]?.url" alt="cover" v-if="currentTrack" />
+            <img v-if="currentTrack" :src="currentTrack?.album?.images[0]?.url" alt="cover" />
           </div>
           <div class="metas">
             <div class="meta-header">
               <div>
-                <h3 class="title">{{ currentTrack?.name }}</h3>
+                <h3 class="title">
+                  {{ currentTrack?.name }}
+                </h3>
                 <p class="artists">
                   <ArtistList :artist-list="currentTrack?.artists" :feat="false" />
                 </p>
-                <p class="album" v-if="currentTrack?.album?.name">
+                <p v-if="currentTrack?.album?.name" class="album">
                   <router-link
                     :to="`/album/${transformUriToid(currentTrack.album.uri)}`"
                     class="link"
@@ -25,12 +27,12 @@
                 </p>
               </div>
               <div class="device-inline">
-                <Device forceMobile />
+                <Device force-mobile />
               </div>
             </div>
 
             <div class="controls">
-              <PlayerControls forceMobile />
+              <PlayerControls force-mobile />
             </div>
           </div>
         </div>
@@ -43,13 +45,14 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import ArtistList from "@/components/artist/ArtistList.vue";
 import Device from "@/components/player/device/DeviceIndex.vue";
 import PlayerControls from "@/components/player/PlayerControls.vue";
 import { usePlayer } from "@/components/player/PlayerStore";
 import SeekBar from "@/components/player/SeekBar.vue";
 import { transformUriToid } from "@/helpers/helper";
-import { computed } from "vue";
 
 const playerStore = usePlayer();
 
diff --git a/src/components/player/PlayerSong.vue b/src/components/player/PlayerSong.vue
index 40fbe2c5..05c83e94 100644
--- a/src/components/player/PlayerSong.vue
+++ b/src/components/player/PlayerSong.vue
@@ -2,11 +2,17 @@
   <template v-if="usePlayer().playerState.track_window.current_track.id">
     <div class="surface" @click.capture="onSurfaceClick">
       <div class="meta">
-        <div class="area-metas"><What /></div>
-        <div class="area-controls"><Controls /></div>
-        <div class="area-device"><Device /></div>
+        <div class="area-metas">
+          <What />
+        </div>
+        <div class="area-controls">
+          <Controls />
+        </div>
+        <div class="area-device">
+          <Device />
+        </div>
       </div>
-      <SeekBar :clickDisable="isTouchDevice()" />
+      <SeekBar :click-disable="isTouchDevice()" />
     </div>
   </template>
   <Loader v-else />
diff --git a/src/components/player/SeekBar.vue b/src/components/player/SeekBar.vue
index 7df3c5bc..b2c0d73c 100644
--- a/src/components/player/SeekBar.vue
+++ b/src/components/player/SeekBar.vue
@@ -1,14 +1,16 @@
 <template>
   <div class="seek-bar" :class="{ 'click-disabled': props.clickDisable }">
-    <div class="progress-wrap" ref="progressWrap">
+    <div ref="progressWrap" class="progress-wrap">
       <div class="progress">
         <div
+          v-if="playerStore.playerState"
           :style="`width:${(currentTime / playerStore.playerState.duration) * 100}%`"
           class="bar"
-          v-if="playerStore.playerState"
         />
         <div :style="`width:${perc}%`" class="seek">
-          <div class="time">{{ time }}</div>
+          <div class="time">
+            {{ time }}
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/player/device/DeviceIndex.vue b/src/components/player/device/DeviceIndex.vue
index f8f4b59c..77f71c8f 100644
--- a/src/components/player/device/DeviceIndex.vue
+++ b/src/components/player/device/DeviceIndex.vue
@@ -1,17 +1,19 @@
 <template>
-  <div class="wrap" v-if="playerStore.devices.activeDevice.id">
+  <div v-if="playerStore.devices.activeDevice.id" class="wrap">
     <div class="device">
-      <DeviceVolume :forceMobile />
+      <DeviceVolume :force-mobile />
       <DevicesList />
     </div>
   </div>
-  <div class="options" v-else><Loader /></div>
+  <div v-else class="options">
+    <Loader />
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { usePlayer } from "@/components/player/PlayerStore";
 import DevicesList from "@/components/player/device/DeviceList.vue";
 import DeviceVolume from "@/components/player/device/DeviceVolume.vue";
+import { usePlayer } from "@/components/player/PlayerStore";
 import Loader from "@/components/ui/LoadingDots.vue";
 
 const props = defineProps<{ forceMobile?: boolean }>();
diff --git a/src/components/player/device/DeviceList.vue b/src/components/player/device/DeviceList.vue
index 468fbdfb..0da8784f 100644
--- a/src/components/player/device/DeviceList.vue
+++ b/src/components/player/device/DeviceList.vue
@@ -1,6 +1,6 @@
 <template>
   <QueuedTracks />
-  <div class="devices" ref="devicesRef">
+  <div ref="devicesRef" class="devices">
     <ButtonIndex
       variant="primary"
       align="left"
@@ -20,15 +20,18 @@
       </span>
     </ButtonIndex>
     <div :class="{ 'is-visible': showList }" class="available-device-list">
-      <LoadingDots size="x-small" v-if="!playerStore.devices.list.length" />
+      <LoadingDots v-if="!playerStore.devices.list.length" size="x-small" />
       <ButtonIndex
-        variant="full"
+        v-for="(device, _key) in deviceListFiltered"
+        v-else
         :key="_key"
+        variant="full"
         type="button"
         size="small"
         align="justify"
         :disabled="playerStore.isSettingDevice"
         :class="device.id === playerStore.devices.activeDevice.id ? 'device-active' : ''"
+        :aria-current="device.id === playerStore.devices.activeDevice.id"
         @click="
           () => {
             if (!playerStore.isSettingDevice && device.id !== playerStore.devices.activeDevice.id)
@@ -36,9 +39,6 @@
             showList = false;
           }
         "
-        v-else
-        v-for="(device, _key) in deviceListFiltered"
-        :aria-current="device.id === playerStore.devices.activeDevice.id"
       >
         <span :title="`Device ID: ${device.id}`" class="device-label">
           <DeviceTypeIcon :type="device.type" />
@@ -59,7 +59,7 @@
         />
       </ButtonIndex>
       <ButtonIndex variant="border" class="refresh" type="button" size="small" @click="playerStore.getDeviceList()">
-        <i class="icon-refresh"></i>
+        <i class="icon-refresh" />
         Refresh
       </ButtonIndex>
     </div>
@@ -67,18 +67,19 @@
 </template>
 
 <script lang="ts" setup>
-import type { Device } from "@/@types/Device";
 import { onClickOutside, useWindowSize } from "@vueuse/core";
 import { computed, ref } from "vue";
 
-import { usePlayer } from "@/components/player/PlayerStore";
+import type { Device } from "@/@types/Device";
+
 import DeviceTypeIcon from "@/components/player/device/DeviceType.vue";
 import QueuedTracks from "@/components/player/device/QueuedTracks.vue";
+import { usePlayer } from "@/components/player/PlayerStore";
 import ButtonIndex from "@/components/ui/ButtonIndex.vue";
 import LoadingDots from "@/components/ui/LoadingDots.vue";
 
 const playerStore = usePlayer();
-const deviceListFiltered = computed(() => playerStore.devices.list.sort((a, b) => a.name.localeCompare(b.name)));
+const deviceListFiltered = computed(() => [...playerStore.devices.list].sort((a, b) => a.name.localeCompare(b.name)));
 
 // Count device names so we can disambiguate identical names in the UI
 const nameCounts = computed(() => {
@@ -93,10 +94,6 @@ const nameCounts = computed(() => {
 const { width } = useWindowSize();
 const isMobile = computed(() => (width.value ?? 9999) <= 480);
 
-function truncate(str: string, max: number) {
-  return str.length > max ? `${str.slice(0, max - 1)}…` : str;
-}
-
 function formatName(device?: Device | null, shortenable = false): string {
   if (!device) return "";
   const count = nameCounts.value.get(device.name) || 0;
@@ -108,6 +105,10 @@ function formatName(device?: Device | null, shortenable = false): string {
   return name;
 }
 
+function truncate(str: string, max: number) {
+  return str.length > max ? `${str.slice(0, max - 1)}…` : str;
+}
+
 const showList = ref(false);
 const devicesRef = ref(null);
 
diff --git a/src/components/player/device/DeviceType.vue b/src/components/player/device/DeviceType.vue
index afc93def..e1126cce 100644
--- a/src/components/player/device/DeviceType.vue
+++ b/src/components/player/device/DeviceType.vue
@@ -9,9 +9,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { DeviceType } from "@/@types/Device";
 import { computed } from "vue";
 
+import type { DeviceType } from "@/@types/Device";
+
 const props = defineProps<{ type?: DeviceType | null }>();
 
 const normalizedType = computed(() => (props.type ?? "unknown").replace(/_/g, "-").toLowerCase());
diff --git a/src/components/player/device/DeviceVolume.vue b/src/components/player/device/DeviceVolume.vue
index 8bdfa2a4..a58433f4 100644
--- a/src/components/player/device/DeviceVolume.vue
+++ b/src/components/player/device/DeviceVolume.vue
@@ -1,9 +1,11 @@
 <template>
   <div :class="['volume-wrapper', { 'force-visible': forceMobile }]">
-    <div @click="onClick" @mousemove="onMove" @mouseleave="onLeave" class="volume" ref="refVolume">
+    <div ref="refVolume" class="volume" @click="onClick" @mousemove="onMove" @mouseleave="onLeave">
       <div :style="{ width: currentSliderPercent + '%' }" class="cursor" />
       <div :style="{ width: sliderPercent + '%' }" class="hover">
-        <div class="perc">{{ previewVolume + "%" }}</div>
+        <div class="perc">
+          {{ previewVolume + "%" }}
+        </div>
       </div>
     </div>
     <ButtonIndex v-if="!forceMobile" no-default-class type="button" variant="nude" @click="toggleMute">
@@ -13,13 +15,13 @@
 </template>
 
 <script lang="ts" setup>
+import { computed, onMounted, ref, watch } from "vue";
+
 import { NotificationType } from "@/@types/Notification";
+import { usePlayer } from "@/components/player/PlayerStore";
 import ButtonIndex from "@/components/ui/ButtonIndex.vue";
 import { notification } from "@/helpers/notifications";
 import { clamp, sliderPercentToVolume, volumeToSliderPercent } from "@/helpers/volume";
-import { computed, onMounted, ref, watch } from "vue";
-
-import { usePlayer } from "@/components/player/PlayerStore";
 
 defineProps<{ forceMobile?: boolean }>();
 
@@ -30,8 +32,8 @@ const currentSliderPercent = computed<number>(() =>
   volumeToSliderPercent(playerStore.devices.activeDevice.volume_percent ?? 0),
 );
 const playerStore = usePlayer();
-const previousVolume = ref<number | null>(null);
-const oldDeviceVolume = ref<number | null>(null);
+const previousVolume = ref<null | number>(null);
+const oldDeviceVolume = ref<null | number>(null);
 const currentDeviceVolume = computed(() => playerStore.devices.activeDevice.volume_percent ?? 0);
 const isMuted = computed(() => playerStore.devices.activeDevice.volume_percent === 0);
 
@@ -48,15 +50,7 @@ watch(
   },
 );
 
-function onMove(e: MouseEvent): void {
-  const el = refVolume.value;
-  if (!el) return;
-  const rect = el.getBoundingClientRect();
-  const pos = clamp(((e.clientX - rect.left) / rect.width) * 100);
-  sliderPercent.value = Math.round(pos);
-}
-
-function getPercentFromEvent(e: MouseEvent | undefined): number | null {
+function getPercentFromEvent(e: MouseEvent | undefined): null | number {
   const el = refVolume.value;
   if (!e || !el) return null;
   const rect = el.getBoundingClientRect();
@@ -64,11 +58,6 @@ function getPercentFromEvent(e: MouseEvent | undefined): number | null {
   return Math.round(pos);
 }
 
-function onLeave(): void {
-  // reset preview to current volume
-  sliderPercent.value = volumeToSliderPercent(currentDeviceVolume.value);
-}
-
 async function onClick(e?: MouseEvent): Promise<void> {
   const pos = getPercentFromEvent(e);
   if (pos !== null) {
@@ -77,6 +66,39 @@ async function onClick(e?: MouseEvent): Promise<void> {
   await setVolumeOptimistic(previewVolume.value);
 }
 
+function onLeave(): void {
+  // reset preview to current volume
+  sliderPercent.value = volumeToSliderPercent(currentDeviceVolume.value);
+}
+
+function onMove(e: MouseEvent): void {
+  const el = refVolume.value;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  const pos = clamp(((e.clientX - rect.left) / rect.width) * 100);
+  sliderPercent.value = Math.round(pos);
+}
+
+/**
+ * Set device volume with optimistic UI update and error revert.
+ */
+async function setVolumeOptimistic(volume: number): Promise<void> {
+  oldDeviceVolume.value = currentDeviceVolume.value ?? 0;
+  playerStore.devices.activeDevice.volume_percent = volume; // optimistic
+  try {
+    await playerStore.setVolume(volume);
+  } catch (err: any) {
+    if (import.meta.env.DEV) console.error("Failed to set volume:", err);
+    // revert UI on failure
+    if (oldDeviceVolume.value !== null) {
+      playerStore.devices.activeDevice.volume_percent = oldDeviceVolume.value;
+    }
+    notification({ msg: "Failed to set volume", type: NotificationType.Error });
+  } finally {
+    oldDeviceVolume.value = null;
+  }
+}
+
 async function toggleMute(): Promise<void> {
   const current = playerStore.devices.activeDevice.volume_percent ?? 0;
   try {
@@ -91,7 +113,7 @@ async function toggleMute(): Promise<void> {
       await setVolumeOptimistic(0);
     }
   } catch (err: any) {
-    console.error("Failed to toggle mute:", err);
+    if (import.meta.env.DEV) console.error("Failed to toggle mute:", err);
     // revert on failure
     if (oldDeviceVolume.value !== null) {
       playerStore.devices.activeDevice.volume_percent = oldDeviceVolume.value;
@@ -101,26 +123,6 @@ async function toggleMute(): Promise<void> {
     oldDeviceVolume.value = null;
   }
 }
-
-/**
- * Set device volume with optimistic UI update and error revert.
- */
-async function setVolumeOptimistic(volume: number): Promise<void> {
-  oldDeviceVolume.value = currentDeviceVolume.value ?? 0;
-  playerStore.devices.activeDevice.volume_percent = volume; // optimistic
-  try {
-    await playerStore.setVolume(volume);
-  } catch (err: any) {
-    console.error("Failed to set volume:", err);
-    // revert UI on failure
-    if (oldDeviceVolume.value !== null) {
-      playerStore.devices.activeDevice.volume_percent = oldDeviceVolume.value;
-    }
-    notification({ msg: "Failed to set volume", type: NotificationType.Error });
-  } finally {
-    oldDeviceVolume.value = null;
-  }
-}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/player/device/QueuedTracks.vue b/src/components/player/device/QueuedTracks.vue
index f96378da..6f6955c4 100644
--- a/src/components/player/device/QueuedTracks.vue
+++ b/src/components/player/device/QueuedTracks.vue
@@ -1,16 +1,18 @@
 <template>
   <div class="wrap">
-    <div class="content" ref="popup" v-if="playerStore.queueOpened">
-      <div class="head"><div class="heading">Queue</div></div>
+    <div v-if="playerStore.queueOpened" ref="popup" class="content">
+      <div class="head">
+        <div class="heading">Queue</div>
+      </div>
       <div class="body">
         <div class="queue-list">
           <div class="section-title">Now</div>
-          <TrackHistory :cover-url="currentTrack.album.images[1].url" :track="currentTrack" v-if="currentTrack" />
+          <TrackHistory v-if="currentTrack" :cover-url="currentTrack.album.images[1].url" :track="currentTrack" />
           <div class="section-title">Next</div>
-          <div :key="key" v-for="(track, key) in playerStore.queue">
+          <div v-for="(track, key) in playerStore.queue" :key="key">
             <TrackHistory :cover-url="track.album.images[2].url" :index="key" :track="track" />
           </div>
-          <div class="empty-queue" v-if="playerStore.queue.length === 0">
+          <div v-if="playerStore.queue.length === 0" class="empty-queue">
             <div class="empty-message">
               {{ isPlayingPodcast ? "Queue not available for podcast episodes" : "No tracks in queue" }}
             </div>
@@ -19,7 +21,7 @@
       </div>
     </div>
     <ButtonIndex icon-only size="small" @click="playerStore.openQueue()">
-      <i class="icon-queue"></i>
+      <i class="icon-queue" />
     </ButtonIndex>
   </div>
 </template>
diff --git a/src/components/player/history/TrackHistory.vue b/src/components/player/history/TrackHistory.vue
index fa66edeb..ba51da52 100644
--- a/src/components/player/history/TrackHistory.vue
+++ b/src/components/player/history/TrackHistory.vue
@@ -7,7 +7,9 @@
           <template v-if="index !== undefined">{{ index + 1 }}.</template>
           {{ track.name.length > 20 ? track.name.substring(0, 20) + "..." : track.name }}
         </div>
-        <div><ArtistList :artist-list="track.artists" feat /></div>
+        <div>
+          <ArtistList :artist-list="track.artists" feat />
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/playlist/PlaylistActions.vue b/src/components/playlist/PlaylistActions.vue
index 353a8444..3b2dc11f 100644
--- a/src/components/playlist/PlaylistActions.vue
+++ b/src/components/playlist/PlaylistActions.vue
@@ -2,37 +2,37 @@
   <div>
     <div v-if="!isPlaylistOwner(playlistStore.playlist.owner)">
       <ButtonIndex
+        v-if="!playlistStore.followed"
         icon-only
         variant="nude"
         title="Follow the playlist"
         @click="playlistStore.followPlaylist(playlistStore.playlist.id)"
-        v-if="!playlistStore.followed"
       >
-        <i class="icon-follow"></i>
+        <i class="icon-follow" />
       </ButtonIndex>
       <ButtonIndex
+        v-else
         icon-only
         variant="nude"
         class="followed"
         title="Unfollow the playlist"
         @click="sidebarStore.removePlaylist(playlistStore.playlist.id)"
-        v-else
       >
-        <i class="icon-followed"></i>
+        <i class="icon-followed" />
       </ButtonIndex>
     </div>
-    <ButtonIndex icon-only variant="nude" @click="edit(playlistStore.playlist.id)" v-else>
-      <i class="icon-more-vertical"></i>
+    <ButtonIndex v-else icon-only variant="nude" @click="edit(playlistStore.playlist.id)">
+      <i class="icon-more-vertical" />
     </ButtonIndex>
   </div>
 </template>
 
 <script lang="ts" setup>
-import ButtonIndex from "@/components/ui/ButtonIndex.vue";
 import { useDialog } from "@/components/dialog/DialogStore";
+import { useSidebar } from "@/components/sidebar/SidebarStore";
+import ButtonIndex from "@/components/ui/ButtonIndex.vue";
 import { isPlaylistOwner } from "@/helpers/playlist";
 import { usePlaylist } from "@/views/playlist/PlaylistStore";
-import { useSidebar } from "@/components/sidebar/SidebarStore";
 
 const dialogStore = useDialog();
 const playlistStore = usePlaylist();
diff --git a/src/components/playlist/PlaylistHeader.vue b/src/components/playlist/PlaylistHeader.vue
index 9f2a7bfe..71e34208 100644
--- a/src/components/playlist/PlaylistHeader.vue
+++ b/src/components/playlist/PlaylistHeader.vue
@@ -1,16 +1,16 @@
 <template>
   <div :class="{ 'not-fit': notFit }" class="playlist-header">
     <div class="playlist-header-left">
-      <Cover :images="playlistStore.playlist.images" class="cover" size="large" v-if="!noCover" />
+      <Cover v-if="!noCover" :images="playlistStore.playlist.images" class="cover" size="large" />
       <div>
         <div class="title">
           {{ playlistStore.playlist.name.replace("#Collection ", "") }}
         </div>
         <div class="metas">
           <router-link
+            v-if="playlistStore.playlist.owner.display_name !== 'Spotify'"
             :to="`/user/${playlistStore.playlist.owner.id}`"
             class="owner"
-            v-if="playlistStore.playlist.owner.display_name !== 'Spotify'"
           >
             {{ playlistStore.playlist.owner.display_name }}
           </router-link>
@@ -19,10 +19,10 @@
           <span v-if="!noDuration">&nbsp;·&nbsp;{{ timecodeWithUnits(sumDuration(playlistStore.tracks)) }}</span>
         </div>
         <div
-          class="description"
           v-if="
             playlistStore.playlist.description !== 'null' && playlistStore.playlist.description !== 'No description'
           "
+          class="description"
         >
           {{ playlistStore.playlist.description }}
         </div>
diff --git a/src/components/playlist/PlaylistTracks.vue b/src/components/playlist/PlaylistTracks.vue
index 0d29cf98..7e72a8c6 100644
--- a/src/components/playlist/PlaylistTracks.vue
+++ b/src/components/playlist/PlaylistTracks.vue
@@ -1,44 +1,43 @@
 <template>
-  <template :key="track.track.id" v-for="(track, index) in trackList">
+  <template v-for="(track, index) in trackList" :key="track.track.id">
     <div
       :class="{
         active: isCurrentTrack(track.track, currentTrack),
         deletable: playlist.owner.id === me?.id || playlist.collaborative,
       }"
+      class="track"
       @click="
         playSongs(
           index,
           trackList.map((e) => e.track),
         )
       "
-      class="track"
     >
       <div class="track-icon">
         <i class="track-icon-item music icon-note" />
-        <i
-          @click.prevent.stop="open({ type: 'addSong', track: track.track })"
-          class="track-icon-item save icon-plus"
-        ></i>
+        <i class="track-icon-item save icon-plus" @click.prevent.stop="open({ type: 'addSong', track: track.track })" />
       </div>
       <div>
-        <div class="track-name">{{ track.track.name }}</div>
+        <div class="track-name">
+          {{ track.track.name }}
+        </div>
         <ArtistList :artist-list="track.track.artists" feat />
       </div>
       <div class="album">
-        <div class="adder" v-if="isAlbum(track.track.album)">
+        <div v-if="isAlbum(track.track.album)" class="adder">
           <i class="adder-icon icon-album" />
           <i
-            @click.prevent.stop="open({ type: 'addalbum', albumId: track.track.album.id })"
             class="adder-button icon-plus"
+            @click.prevent.stop="open({ type: 'addalbum', albumId: track.track.album.id })"
           />
         </div>
         <i
+          v-else
           :class="{
             'icon-ep': isEP(track.track.album),
             'icon-single': isSingle(track.track.album),
             'icon-compilation': isCompilation(track.track.album),
           }"
-          v-else
         />
         <AlbumLink :album="track.track.album" no-icon />
       </div>
@@ -49,11 +48,15 @@
           alt=""
         />
       </div>
-      <div class="date">{{ date(track.added_at) }}</div>
-      <div class="duration">{{ timecode(track.track.duration_ms) }}</div>
+      <div class="date">
+        {{ date(track.added_at) }}
+      </div>
+      <div class="duration">
+        {{ timecode(track.track.duration_ms) }}
+      </div>
       <div v-if="playlist.owner.id === me?.id || playlist.collaborative">
         <ButtonIndex icon-only variant="nude" class="delete" @click.prevent.stop="deleteSong(track.track.uri)">
-          <i class="icon-trash-2"></i>
+          <i class="icon-trash-2" />
         </ButtonIndex>
       </div>
     </div>
@@ -81,8 +84,8 @@ import { useAuth } from "@/views/auth/AuthStore";
 import { usePlaylist } from "@/views/playlist/PlaylistStore";
 
 const props = defineProps<{
-  trackList: PlaylistTrack[];
   contributorsData?: Record<string, PublicUser>;
+  trackList: PlaylistTrack[];
 }>();
 
 const { open } = useDialog();
@@ -102,8 +105,8 @@ async function deleteSong(songId: string): Promise<void> {
   try {
     await instance().delete(`playlists/${playlist.id}/tracks`, {
       data: {
-        tracks: [{ uri: songId }],
         snapshot_id: playlist.snapshot_id,
+        tracks: [{ uri: songId }],
       },
     });
     removeSong(songId);
diff --git a/src/components/podcast/PodcastCard.vue b/src/components/podcast/PodcastCard.vue
index 72096c86..92932dcd 100644
--- a/src/components/podcast/PodcastCard.vue
+++ b/src/components/podcast/PodcastCard.vue
@@ -1,7 +1,9 @@
 <template>
   <router-link :to="`/podcasts/${id}`" class="podcast">
     <img :src="covers[1].url" class="cover" />
-    <div class="name" v-if="name">{{ name }}</div>
+    <div v-if="name" class="name">
+      {{ name }}
+    </div>
   </router-link>
 </template>
 
diff --git a/src/components/podcast/PodcastEpisode.vue b/src/components/podcast/PodcastEpisode.vue
index a47d3a99..bf0c4c5c 100644
--- a/src/components/podcast/PodcastEpisode.vue
+++ b/src/components/podcast/PodcastEpisode.vue
@@ -1,35 +1,37 @@
 <template>
   <div class="episode-wrap">
-    <div class="played" v-if="episode.resume_point?.fully_played">
-      <i class="icon icon-check"></i>
+    <div v-if="episode.resume_point?.fully_played" class="played">
+      <i class="icon icon-check" />
     </div>
     <div class="episode">
       <img :src="episode.images?.[1]?.url || episode.images?.[0]?.url" class="cover" />
       <div class="content">
-        <div class="name">{{ episode.name }}</div>
-        <div class="description" v-if="episode.description">
+        <div class="name">
+          {{ episode.name }}
+        </div>
+        <div v-if="episode.description" class="description">
           {{ `${episode.description.slice(0, 200)}...` }}
         </div>
       </div>
     </div>
     <div
-      class="progress"
       v-if="!episode.resume_point?.fully_played && (episode.resume_point?.resume_position_ms || 0) > 0"
+      class="progress"
     >
       <div
+        v-if="playerStore.currentFromSDK?.id === episode.id && playerStore.currentlyPlaying.is_playing"
         :style="{
           width: `${(playerStore.currentlyPlaying.progress_ms / episode.duration_ms) * 100}%`,
         }"
         class="bar"
-        v-if="playerStore.currentFromSDK?.id === episode.id && playerStore.currentlyPlaying.is_playing"
-      ></div>
+      />
       <div
+        v-else
         :style="{
           width: `${((episode.resume_point?.resume_position_ms || 0) / episode.duration_ms) * 100}%`,
         }"
         class="bar"
-        v-else
-      ></div>
+      />
     </div>
     <div class="infos">
       <div class="metas">
@@ -39,8 +41,8 @@
       </div>
       <div class="actions">
         <Loading
-          :size="'small'"
           v-if="playerStore.currentFromSDK?.id === episode.id && playerStore.currentlyPlaying.is_playing"
+          :size="'small'"
         />
         <div v-else>
           <ButtonIndex
diff --git a/src/components/podcast/PodcastFollowButton.vue b/src/components/podcast/PodcastFollowButton.vue
index e2475abc..b4036776 100644
--- a/src/components/podcast/PodcastFollowButton.vue
+++ b/src/components/podcast/PodcastFollowButton.vue
@@ -11,7 +11,7 @@
         'icon-follow': !podcastsStore.isFollowing,
         'icon-followed': podcastsStore.isFollowing,
       }"
-    ></i>
+    />
     <span v-if="!podcastsStore.isFollowing">Follow podcast</span>
     <span v-else>Unfollow</span>
   </ButtonIndex>
@@ -42,7 +42,7 @@ async function toggleFollow(): Promise<void> {
       await podcastsStore.followPodcast(props.podcastId);
     }
   } catch (error) {
-    console.error("Error toggling podcast follow status:", error);
+    if (import.meta.env.DEV) console.error("Error toggling podcast follow status:", error);
   } finally {
     loading.value = false;
   }
diff --git a/src/components/releases/ReleaseIndex.vue b/src/components/releases/ReleaseIndex.vue
index e4c61423..cdbdc437 100644
--- a/src/components/releases/ReleaseIndex.vue
+++ b/src/components/releases/ReleaseIndex.vue
@@ -1,25 +1,25 @@
 <template>
   <div class="release-wrap">
     <ButtonIndex no-default-class class="check" @click="releasesStore.toggleRelease(release.id)">
-      <i class="icon-check" v-if="releasesStore.checks?.find((r) => r.id === release.id)"></i>
-      <i class="icon-circle" v-else></i>
+      <i v-if="releasesStore.checks?.find((r) => r.id === release.id)" class="icon-check" />
+      <i v-else class="icon-circle" />
     </ButtonIndex>
     <div
       :class="{
         'is-playing': playerStore.currentlyPlaying.item?.artists[0].name.toLowerCase() === release.artist.toLowerCase(),
         checked: releasesStore.checks?.find((r) => r.id === release.id),
       }"
-      @click="search(release.artist, release.album)"
       class="release"
+      @click="search(release.artist, release.album)"
     >
       <div>{{ release.artist }}</div>
       <div>{{ release.album }}</div>
       <div class="tags">
         <span
-          :class="{ selected: releasesStore.activeSlug === slug }"
+          v-for="(slug, ii) in release.slug"
           :key="ii"
+          :class="{ selected: releasesStore.activeSlug === slug }"
           class="slug"
-          v-for="(slug, ii) in release.slug"
         >
           {{ slug }}
         </span>
diff --git a/src/components/releases/ReleaseList.vue b/src/components/releases/ReleaseList.vue
index 32a62c13..1425e92c 100644
--- a/src/components/releases/ReleaseList.vue
+++ b/src/components/releases/ReleaseList.vue
@@ -1,13 +1,15 @@
 <template>
   <div class="content">
-    <div :key="index" v-for="(month, index) in releasesStore.monthList">
-      <div class="month">{{ month }}</div>
-      <template :key="release.id" v-for="release in releasesStore.releases">
+    <div v-for="(month, index) in releasesStore.monthList" :key="index">
+      <div class="month">
+        {{ month }}
+      </div>
+      <template v-for="release in releasesStore.releases" :key="release.id">
         <template v-if="releasesStore.activeSlug && month === release.releaseDate">
-          <Release :release="release" v-if="release.slug.includes(releasesStore.activeSlug)" />
+          <Release v-if="release.slug.includes(releasesStore.activeSlug)" :release="release" />
         </template>
         <template v-else>
-          <Release :release="release" v-if="month === release.releaseDate" />
+          <Release v-if="month === release.releaseDate" :release="release" />
         </template>
       </template>
     </div>
diff --git a/src/components/releases/ReleaseSide.vue b/src/components/releases/ReleaseSide.vue
index 32403440..2263b33f 100644
--- a/src/components/releases/ReleaseSide.vue
+++ b/src/components/releases/ReleaseSide.vue
@@ -1,12 +1,14 @@
 <template>
-  <div :key="category.name" v-for="category in releasesStore.menu">
-    <div class="title">{{ category.name }}</div>
+  <div v-for="category in releasesStore.menu" :key="category.name">
+    <div class="title">
+      {{ category.name }}
+    </div>
     <div
-      :class="{ selected: releasesStore.activeSlug === slug }"
+      v-for="(slug, index) in category.slugs"
       :key="index"
-      @click="releasesStore.setActiveSlug(slug)"
+      :class="{ selected: releasesStore.activeSlug === slug }"
       class="slug"
-      v-for="(slug, index) in category.slugs"
+      @click="releasesStore.setActiveSlug(slug)"
     >
       {{ slug }}
     </div>
diff --git a/src/components/search/SearchAlbums.vue b/src/components/search/SearchAlbums.vue
index 43333486..074853c0 100644
--- a/src/components/search/SearchAlbums.vue
+++ b/src/components/search/SearchAlbums.vue
@@ -4,14 +4,14 @@
     <div class="album-list">
       <template v-if="searchStore.albums.length">
         <Album
+          v-for="(album, index) in searchStore.albums"
+          :key="index"
           :album="album"
           :exact-search="exactAlbumSearched ? album.name.toLowerCase().includes(exactAlbumSearched) : false"
-          :key="index"
-          @click="searchStore.reset()"
           class="album"
-          v-for="(album, index) in searchStore.albums"
           with-artists
           without-release-date
+          @click="searchStore.reset()"
         />
       </template>
       <template v-else>No album found</template>
diff --git a/src/components/search/SearchArtists.vue b/src/components/search/SearchArtists.vue
index a1b414ca..f8a64977 100644
--- a/src/components/search/SearchArtists.vue
+++ b/src/components/search/SearchArtists.vue
@@ -3,14 +3,14 @@
     <SearchTitle title="Artists" />
     <template v-if="searchStore.artists.length">
       <router-link
+        v-for="(artist, index) in searchStore.artists"
+        :key="index"
         :class="{
           'exact-search': exactArtistSearched === artist.name.toLowerCase(),
         }"
-        :key="index"
         :to="`/artist/${artist.id}`"
-        @click="searchStore.reset()"
         class="artist"
-        v-for="(artist, index) in searchStore.artists"
+        @click="searchStore.reset()"
       >
         <Cover :images="artist.images" class="avatar" size="small" />
         <div>{{ artist.name }}</div>
diff --git a/src/components/search/SearchInput.vue b/src/components/search/SearchInput.vue
index fc4301e6..28a42edc 100644
--- a/src/components/search/SearchInput.vue
+++ b/src/components/search/SearchInput.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="search">
     <input
-      @input="searchStore.updateQuery(query)"
+      ref="input"
+      v-model="query"
       class="input"
       placeholder="Recherche..."
-      ref="input"
       type="text"
-      v-model="query"
+      @input="searchStore.updateQuery(query)"
     />
-    <ButtonIndex no-default-class class="reset" @click="clearQuery()" v-if="query">
+    <ButtonIndex v-if="query" no-default-class class="reset" @click="clearQuery()">
       <i class="icon-x" />
     </ButtonIndex>
   </div>
diff --git a/src/components/search/SearchPodcasts.vue b/src/components/search/SearchPodcasts.vue
index f8462e7a..b7d569d4 100644
--- a/src/components/search/SearchPodcasts.vue
+++ b/src/components/search/SearchPodcasts.vue
@@ -3,16 +3,20 @@
     <SearchTitle title="Podcasts" />
     <template v-if="searchStore.podcasts.length">
       <router-link
+        v-for="(podcast, index) in searchStore.podcasts"
         :key="index"
         :to="`/podcasts/${podcast.id}`"
-        @click="searchStore.reset()"
         class="podcast"
-        v-for="(podcast, index) in searchStore.podcasts"
+        @click="searchStore.reset()"
       >
         <img :src="podcast.images?.[1]?.url || podcast.images?.[0]?.url" class="cover" />
         <div class="content">
-          <div class="name">{{ podcast.name }}</div>
-          <div class="publisher" v-if="podcast.publisher">{{ podcast.publisher }}</div>
+          <div class="name">
+            {{ podcast.name }}
+          </div>
+          <div v-if="podcast.publisher" class="publisher">
+            {{ podcast.publisher }}
+          </div>
         </div>
       </router-link>
     </template>
diff --git a/src/components/search/SearchSongs.vue b/src/components/search/SearchSongs.vue
index d217ae48..2d7a4136 100644
--- a/src/components/search/SearchSongs.vue
+++ b/src/components/search/SearchSongs.vue
@@ -3,19 +3,21 @@
     <SearchTitle title="Songs" />
     <template v-if="searchStore.albums.length">
       <div
+        v-for="(track, index) in searchStore.tracks"
         :key="index"
+        class="track"
         @click="
           () => {
             playSong(track.uri);
             searchStore.reset();
           }
         "
-        class="track"
-        v-for="(track, index) in searchStore.tracks"
       >
         <i class="track-icon icon-music" />
         <div>
-          <div class="track-name">{{ track.name }}</div>
+          <div class="track-name">
+            {{ track.name }}
+          </div>
           <div>
             <ArtistList :artist-list="track.artists" feat />
           </div>
diff --git a/src/components/sidebar/MainMenu.vue b/src/components/sidebar/MainMenu.vue
index 5ae5a999..e6670cf7 100644
--- a/src/components/sidebar/MainMenu.vue
+++ b/src/components/sidebar/MainMenu.vue
@@ -6,7 +6,7 @@
       class="link"
       no-default-class
     >
-      <i class="icon icon-podcast"></i>
+      <i class="icon icon-podcast" />
       Podcasts
     </ButtonIndex>
     <ButtonIndex
@@ -15,7 +15,7 @@
       class="link disabled"
       no-default-class
     >
-      <i class="icon icon-album"></i>
+      <i class="icon icon-album" />
       Releases
     </ButtonIndex>
   </div>
diff --git a/src/components/sidebar/PlaylistIcon.vue b/src/components/sidebar/PlaylistIcon.vue
index 0b761490..eb05e4e8 100644
--- a/src/components/sidebar/PlaylistIcon.vue
+++ b/src/components/sidebar/PlaylistIcon.vue
@@ -1,25 +1,25 @@
 <template>
   <i
-    class="type-icon icon-music"
     v-if="authStore.me?.id === playlist.owner.id && !playlist.name.includes('#Collection')"
+    class="type-icon icon-music"
   />
   <i
-    class="type-icon others icon-music"
     v-if="
       authStore.me?.id !== playlist.owner.id &&
       playlist.owner.display_name !== 'Spotify' &&
       !playlist.name.includes('#Collection')
     "
+    class="type-icon others icon-music"
   />
   <i
-    class="type-icon icon-folder"
     v-if="authStore.me?.id === playlist.owner.id && playlist.name.includes('#Collection')"
+    class="type-icon icon-folder"
   />
   <i
-    class="type-icon others icon-folder"
     v-if="authStore.me?.id !== playlist.owner.id && playlist.name.includes('#Collection')"
+    class="type-icon others icon-folder"
   />
-  <i class="type-icon icon-spotify" v-if="playlist.owner.display_name === 'Spotify'" />
+  <i v-if="playlist.owner.display_name === 'Spotify'" class="type-icon icon-spotify" />
 </template>
 
 <script lang="ts" setup>
diff --git a/src/components/sidebar/SidebarHead.vue b/src/components/sidebar/SidebarHead.vue
index 27c7fdb9..62fd5814 100644
--- a/src/components/sidebar/SidebarHead.vue
+++ b/src/components/sidebar/SidebarHead.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="topbar">
-    <router-link to="/"><img class="logo" src="/img/logo.svg" /></router-link>
+    <router-link to="/">
+      <img class="logo" src="/img/logo.svg" />
+    </router-link>
     <div class="navigation">
-      <ButtonIndex icon-only @click="router.go(-1)" variant="full">
+      <ButtonIndex icon-only variant="full" @click="router.go(-1)">
         <i class="icon-arrow-left" />
       </ButtonIndex>
-      <ButtonIndex icon-only @click="router.go(1)" variant="full">
+      <ButtonIndex icon-only variant="full" @click="router.go(1)">
         <i class="icon-arrow-right" />
       </ButtonIndex>
     </div>
@@ -14,9 +16,9 @@
     </ButtonIndex>
     <div>
       <div v-if="authStore.me !== null">
-        <div @click="configStore.open()" class="avatar">
+        <div class="avatar" @click="configStore.open()">
           <Cover :images="authStore.me?.images" class="avatar-image" size="large" />
-          <i class="icon icon-chevron-down"></i>
+          <i class="icon icon-chevron-down" />
         </div>
         <Config />
       </div>
diff --git a/src/components/sidebar/SidebarIndex.vue b/src/components/sidebar/SidebarIndex.vue
index 9bc85ecd..05aacce3 100644
--- a/src/components/sidebar/SidebarIndex.vue
+++ b/src/components/sidebar/SidebarIndex.vue
@@ -1,53 +1,53 @@
 <template>
   <div class="sidebar-backdrop" :class="{ 'is-visible': sidebarStore.isOpen }" @click="sidebarStore.close()" />
   <div
+    v-if="!sidebarStore.playlists.length && !sidebarStore.collections.length"
     class="sidebar loading"
     :class="{ 'is-open': sidebarStore.isOpen }"
-    v-if="!sidebarStore.playlists.length && !sidebarStore.collections.length"
   >
     <Loader />
   </div>
   <div
+    v-else
     :class="{ 'search-opened': collectionSearchOpened || playlistSearchOpened, 'is-open': sidebarStore.isOpen }"
     class="sidebar"
-    v-else
   >
     <Topbar />
     <Menu />
     <div class="sidebar-item">
-      <div class="heading title" v-if="!collectionSearchOpened">
+      <div v-if="!collectionSearchOpened" class="heading title">
         <div class="title-name">Collections</div>
         <div class="options">
           <ButtonIndex no-default-class class="icon" @click="sidebarStore.refreshPlaylists()">
-            <i class="icon-refresh"></i>
+            <i class="icon-refresh" />
           </ButtonIndex>
           <ButtonIndex no-default-class class="icon" @click="() => (collectionSearchOpened = true)">
-            <i class="icon-search"></i>
+            <i class="icon-search" />
           </ButtonIndex>
           <ButtonIndex no-default-class class="icon add" @click="dialogStore.open({ type: 'createCollection' })">
-            <i class="icon-plus"></i>
+            <i class="icon-plus" />
           </ButtonIndex>
         </div>
       </div>
-      <div class="heading title" v-else>
+      <div v-else class="heading title">
         <input
+          ref="collectionSearchInput"
+          v-model="collectionSearchQuery"
           class="search"
           placeholder="Search collection"
-          ref="collectionSearchInput"
           type="text"
-          v-model="collectionSearchQuery"
         />
       </div>
-      <div class="empty" v-if="!sidebarStore.collections.length">
+      <div v-if="!sidebarStore.collections.length" class="empty">
         Oh well, you don't have a collection ! To create one, you just have to create one with + button or rename a
         classic playlist but start with "#Collection". Magical, isn't it?
       </div>
-      <div :key="index" v-else v-for="(playlist, index) in filteredCollections">
+      <div v-for="(playlist, index) in filteredCollections" v-else :key="index">
         <router-link
+          v-if="playlist.id"
           :class="{ active: $route.params.id === playlist.id }"
           :to="`/collection/${playlist.id}`"
           class="playlist-item"
-          v-if="playlist.id"
         >
           <PlaylistIcon :playlist="playlist" />
           <div class="name">
@@ -64,44 +64,46 @@
               })
             "
           >
-            <i class="icon-more-vertical"></i>
+            <i class="icon-more-vertical" />
           </ButtonIndex>
         </router-link>
       </div>
     </div>
     <div class="sidebar-item">
-      <div class="heading title" v-if="!playlistSearchOpened">
+      <div v-if="!playlistSearchOpened" class="heading title">
         <div class="title-name">Playlists</div>
         <div class="options">
           <ButtonIndex no-default-class class="icon" @click="sidebarStore.refreshPlaylists()">
-            <i class="icon-refresh"></i>
+            <i class="icon-refresh" />
           </ButtonIndex>
           <ButtonIndex no-default-class class="icon" @click="() => (playlistSearchOpened = true)">
-            <i class="icon-search"></i>
+            <i class="icon-search" />
           </ButtonIndex>
           <ButtonIndex no-default-class class="icon add" @click="dialogStore.open({ type: 'createPlaylist' })">
-            <i class="icon-plus"></i>
+            <i class="icon-plus" />
           </ButtonIndex>
         </div>
       </div>
-      <div class="heading title" v-else>
+      <div v-else class="heading title">
         <input
+          ref="playlistSearchInput"
+          v-model="playlistSearchQuery"
           class="search"
           placeholder="Search playlist"
-          ref="playlistSearchInput"
           type="text"
-          v-model="playlistSearchQuery"
         />
       </div>
-      <div :key="index" v-for="(playlist, index) in filteredPlaylists">
+      <div v-for="(playlist, index) in filteredPlaylists" :key="index">
         <router-link
+          v-if="playlist.id && playlist.name !== ''"
           :class="{ active: $route.params.id === playlist.id }"
           :to="`/playlist/${playlist.id}`"
           class="playlist-item"
-          v-if="playlist.id && playlist.name !== ''"
         >
           <PlaylistIcon :playlist="playlist" />
-          <div class="name">{{ playlist.name }}</div>
+          <div class="name">
+            {{ playlist.name }}
+          </div>
           <VisibilityIcon :playlist="playlist" />
           <ButtonIndex
             no-default-class
@@ -113,7 +115,7 @@
               })
             "
           >
-            <i class="icon-more-vertical"></i>
+            <i class="icon-more-vertical" />
           </ButtonIndex>
         </router-link>
       </div>
@@ -161,8 +163,8 @@ const filteredCollections = computed(() => {
   return sidebarStore.collections
     .map((playlist) => ({
       ...playlist,
-      lowerName: playlist.name.toLowerCase(),
       displayName: playlist.name.replace("#Collection ", "").replace("#collection ", ""),
+      lowerName: playlist.name.toLowerCase(),
     }))
     .filter((playlist) => playlist.lowerName.includes(searchQuery));
 });
diff --git a/src/components/sidebar/SidebarStore.ts b/src/components/sidebar/SidebarStore.ts
index be8cbb56..ed9bd930 100644
--- a/src/components/sidebar/SidebarStore.ts
+++ b/src/components/sidebar/SidebarStore.ts
@@ -94,8 +94,8 @@ export const useSidebar = defineStore("sidebar", {
           msg: "Error while fetching playlists",
           type: NotificationType.Error,
         });
-        // eslint-disable-next-line no-console
-        console.error("Failed to fetch playlists:", error);
+
+        if (import.meta.env.DEV) console.error("Failed to fetch playlists:", error);
       }
     },
 
@@ -133,8 +133,7 @@ export const useSidebar = defineStore("sidebar", {
           type: NotificationType.Success,
         });
       } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error("Error while deleting/unfollowing playlist:", error);
+        if (import.meta.env.DEV) console.error("Error while deleting/unfollowing playlist:", error);
         notification({
           msg:
             playlistStore.playlist.owner.id === authStore.me?.id
diff --git a/src/components/sidebar/VisibilityIcon.vue b/src/components/sidebar/VisibilityIcon.vue
index f9a45279..e857f612 100644
--- a/src/components/sidebar/VisibilityIcon.vue
+++ b/src/components/sidebar/VisibilityIcon.vue
@@ -1,6 +1,6 @@
 <template>
-  <i class="visibility-icon icon-public" title="Public" v-if="playlist.public && !playlist.collaborative" />
-  <i class="visibility-icon icon-collaborative" title="Collaborative" v-if="playlist.collaborative" />
+  <i v-if="playlist.public && !playlist.collaborative" class="visibility-icon icon-public" title="Public" />
+  <i v-if="playlist.collaborative" class="visibility-icon icon-collaborative" title="Collaborative" />
 </template>
 
 <script lang="ts" setup>
diff --git a/src/components/ui/AlbumCover.vue b/src/components/ui/AlbumCover.vue
index 5fc060d2..13c04b5b 100644
--- a/src/components/ui/AlbumCover.vue
+++ b/src/components/ui/AlbumCover.vue
@@ -1,8 +1,8 @@
 <template>
-  <img :src="images[2].url" loading="lazy" v-if="size === 'small' && images.length >= 3" />
-  <img :src="images[1].url" loading="lazy" v-else-if="size === 'medium' && images.length >= 2" />
-  <img :src="images[0].url" loading="lazy" v-else-if="size === 'large' && images.length >= 1" />
-  <img src="/img/default.png" loading="lazy" v-else />
+  <img v-if="size === 'small' && images.length >= 3" :src="images[2].url" loading="lazy" />
+  <img v-else-if="size === 'medium' && images.length >= 2" :src="images[1].url" loading="lazy" />
+  <img v-else-if="size === 'large' && images.length >= 1" :src="images[0].url" loading="lazy" />
+  <img v-else src="/img/default.png" loading="lazy" />
 </template>
 
 <script lang="ts" setup>
diff --git a/src/components/ui/ButtonIndex.vue b/src/components/ui/ButtonIndex.vue
index ee5518cd..5cea7045 100644
--- a/src/components/ui/ButtonIndex.vue
+++ b/src/components/ui/ButtonIndex.vue
@@ -3,28 +3,31 @@ import { computed } from "vue";
 import { type RouteLocationRaw, RouterLink } from "vue-router";
 
 export interface ButtonProps {
-  align?: "left" | "center" | "right" | "justify";
-  as?: "button" | "a" | "router-link";
+  align?: "center" | "justify" | "left" | "right";
+  as?: "a" | "button" | "router-link";
   class?: string;
   disabled?: boolean;
   href?: string;
   iconOnly?: boolean;
   noDefaultClass?: boolean;
   size?: "big" | "default" | "small" | "x-small";
-  target?: "_blank" | "_self" | "_parent" | "_top";
+  target?: "_blank" | "_parent" | "_self" | "_top";
   to?: RouteLocationRaw;
-  type?: "button" | "submit" | "reset";
-  variant?: "default" | "primary" | "nude" | "full" | "border";
+  type?: "button" | "reset" | "submit";
+  variant?: "border" | "default" | "full" | "nude" | "primary";
 }
 
 const props = withDefaults(defineProps<ButtonProps>(), {
   align: "center",
   as: "button",
+  class: "",
   disabled: false,
+  href: "",
   iconOnly: false,
   noDefaultClass: false,
   size: "default",
   target: "_self",
+  to: undefined,
   type: "button",
   variant: "default",
 });
diff --git a/src/components/ui/CustomSelect.vue b/src/components/ui/CustomSelect.vue
index b3441172..3d8d548d 100644
--- a/src/components/ui/CustomSelect.vue
+++ b/src/components/ui/CustomSelect.vue
@@ -53,8 +53,8 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-  "update:modelValue": [value: string];
   change: [option: SelectOption];
+  "update:modelValue": [value: string];
 }>();
 
 const isOpen = ref(false);
@@ -66,9 +66,9 @@ const displayValue = computed(() => {
   return option?.label ?? props.placeholder;
 });
 
-function toggle(): void {
-  if (!props.disabled) {
-    isOpen.value = !isOpen.value;
+function handleClickOutside(event: MouseEvent): void {
+  if (selectRef.value && !selectRef.value.contains(event.target as Node)) {
+    isOpen.value = false;
   }
 }
 
@@ -78,9 +78,9 @@ function selectOption(option: SelectOption): void {
   isOpen.value = false;
 }
 
-function handleClickOutside(event: MouseEvent): void {
-  if (selectRef.value && !selectRef.value.contains(event.target as Node)) {
-    isOpen.value = false;
+function toggle(): void {
+  if (!props.disabled) {
+    isOpen.value = !isOpen.value;
   }
 }
 
diff --git a/src/components/ui/LanguageSelect.vue b/src/components/ui/LanguageSelect.vue
index f4a7ee15..c4e74b67 100644
--- a/src/components/ui/LanguageSelect.vue
+++ b/src/components/ui/LanguageSelect.vue
@@ -44,8 +44,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  "update:modelValue": [value: string];
   change: [option: LanguageOption];
+  "update:modelValue": [value: string];
 }>();
 
 const isOpen = ref(false);
@@ -56,8 +56,10 @@ const displayValue = computed(() => {
   return option?.name ?? props.modelValue;
 });
 
-function toggle(): void {
-  isOpen.value = !isOpen.value;
+function handleClickOutside(event: MouseEvent): void {
+  if (selectRef.value && !selectRef.value.contains(event.target as Node)) {
+    isOpen.value = false;
+  }
 }
 
 function selectOption(option: LanguageOption): void {
@@ -66,10 +68,8 @@ function selectOption(option: LanguageOption): void {
   isOpen.value = false;
 }
 
-function handleClickOutside(event: MouseEvent): void {
-  if (selectRef.value && !selectRef.value.contains(event.target as Node)) {
-    isOpen.value = false;
-  }
+function toggle(): void {
+  isOpen.value = !isOpen.value;
 }
 
 onMounted(() => {
diff --git a/src/components/ui/LoadingDots.vue b/src/components/ui/LoadingDots.vue
index c29ab2f4..05d51147 100644
--- a/src/components/ui/LoadingDots.vue
+++ b/src/components/ui/LoadingDots.vue
@@ -6,7 +6,7 @@
       xxsmall: size === 'xx-small',
     }"
     class="loader"
-  ></div>
+  />
 </template>
 
 <script lang="ts" setup>
diff --git a/src/components/ui/PageFit.vue b/src/components/ui/PageFit.vue
index 58063ec7..21bea5b7 100644
--- a/src/components/ui/PageFit.vue
+++ b/src/components/ui/PageFit.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="fit"><slot /></div>
+  <div class="fit">
+    <slot />
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/ui/PageScroller.vue b/src/components/ui/PageScroller.vue
index 183e513b..8f5e504f 100644
--- a/src/components/ui/PageScroller.vue
+++ b/src/components/ui/PageScroller.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="page" ref="page">
+  <div ref="page" class="page">
     <slot />
     <div class="nav">
       <ButtonIndex icon-only size="small" @click="scrollToTop()">
-        <i class="icon-arrow-up"></i>
+        <i class="icon-arrow-up" />
       </ButtonIndex>
       <ButtonIndex icon-only size="small" @click="scrollToBottom()">
-        <i class="icon-arrow-down"></i>
+        <i class="icon-arrow-down" />
       </ButtonIndex>
     </div>
   </div>
diff --git a/src/components/ui/ShareContent.vue b/src/components/ui/ShareContent.vue
index 91b5a200..561ed9ee 100644
--- a/src/components/ui/ShareContent.vue
+++ b/src/components/ui/ShareContent.vue
@@ -1,14 +1,16 @@
 <template>
   <div class="sharing">
-    <div class="title"><i class="share-icon icon-share"></i></div>
-    <span class="copied" v-if="clipboardSpotify.copied.value">Spotify URL copied</span>
-    <span class="copied" v-if="clipboardBeardify.copied.value">Beardify URL copied</span>
+    <div class="title">
+      <i class="share-icon icon-share" />
+    </div>
+    <span v-if="clipboardSpotify.copied.value" class="copied">Spotify URL copied</span>
+    <span v-if="clipboardBeardify.copied.value" class="copied">Beardify URL copied</span>
     <div class="content">
       <ButtonIndex no-default-class class="copy" @click="clipboardSpotify.copy()">
-        <i class="icon-spotify"></i>
+        <i class="icon-spotify" />
       </ButtonIndex>
-      <ButtonIndex no-default-class class="copy" @click="clipboardBeardify.copy()" v-if="beardifyUrl">
-        <i class="icon-beardify"></i>
+      <ButtonIndex v-if="beardifyUrl" no-default-class class="copy" @click="clipboardBeardify.copy()">
+        <i class="icon-beardify" />
       </ButtonIndex>
     </div>
   </div>
diff --git a/src/components/ui/Tooltip.vue b/src/components/ui/Tooltip.vue
index b66a2c67..89d5d248 100644
--- a/src/components/ui/Tooltip.vue
+++ b/src/components/ui/Tooltip.vue
@@ -24,8 +24,8 @@ import { nextTick, ref } from "vue";
 
 const props = withDefaults(
   defineProps<{
+    placement?: "bottom" | "top";
     text: string;
-    placement?: "top" | "bottom";
   }>(),
   { placement: "top" },
 );
@@ -33,18 +33,14 @@ const props = withDefaults(
 const MARGIN = 8;
 
 const visible = ref(false);
-const currentPlacement = ref<"top" | "bottom">(props.placement);
+const currentPlacement = ref<"bottom" | "top">(props.placement);
 const tooltipRef = ref<HTMLElement | null>(null);
 const wrapperRef = ref<HTMLElement | null>(null);
 const tooltipStyle = ref<Record<string, string>>({});
 
-const { width: viewportWidth, height: viewportHeight } = useWindowSize();
-const { x: wrapLeft, y: wrapTop, bottom: wrapBottom, width: wrapWidth } = useElementBounding(wrapperRef);
-const { width: tipWidth, height: tipHeight } = useElementBounding(tooltipRef);
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
+const { height: viewportHeight, width: viewportWidth } = useWindowSize();
+const { bottom: wrapBottom, width: wrapWidth, x: wrapLeft, y: wrapTop } = useElementBounding(wrapperRef);
+const { height: tipHeight, width: tipWidth } = useElementBounding(tooltipRef);
 
 function calculateHorizontalPosition(): number {
   const tipW = tipWidth.value || 0;
@@ -58,22 +54,38 @@ function calculateVerticalPosition(
   desiredTop: number,
   tipH: number,
   fallbackToBottom: boolean,
-): { top: number; placement: "top" | "bottom" } {
+): { placement: "bottom" | "top"; top: number } {
   const vpH = (viewportHeight.value ?? document.documentElement.clientHeight) || window.innerHeight;
 
   if (desiredTop < MARGIN && fallbackToBottom) {
     const spaceBelow = vpH - wrapBottom.value - MARGIN;
     if (spaceBelow >= tipH) {
-      return { top: wrapBottom.value, placement: "bottom" };
+      return { placement: "bottom", top: wrapBottom.value };
     }
   } else if (desiredTop + tipH > vpH - MARGIN && !fallbackToBottom) {
     const spaceAbove = wrapTop.value - MARGIN;
     if (spaceAbove >= tipH) {
-      return { top: wrapTop.value - tipH, placement: "top" };
+      return { placement: "top", top: wrapTop.value - tipH };
     }
   }
 
-  return { top: clamp(desiredTop, MARGIN, Math.max(vpH - tipH - MARGIN, MARGIN)), placement: props.placement };
+  return { placement: props.placement, top: clamp(desiredTop, MARGIN, Math.max(vpH - tipH - MARGIN, MARGIN)) };
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+function hide(): void {
+  visible.value = false;
+  tooltipStyle.value = {};
+  currentPlacement.value = props.placement;
+}
+
+function show(): void {
+  visible.value = true;
+  currentPlacement.value = props.placement;
+  nextTick(() => updatePosition());
 }
 
 function updatePosition(): void {
@@ -82,7 +94,7 @@ function updatePosition(): void {
   const tipH = tipHeight.value || 0;
   const horizontalPosition = calculateHorizontalPosition();
 
-  let verticalPosition: { top: number; placement: "top" | "bottom" };
+  let verticalPosition: { placement: "bottom" | "top"; top: number };
 
   if (props.placement === "top") {
     verticalPosition = calculateVerticalPosition(wrapTop.value - tipH, tipH, true);
@@ -93,24 +105,12 @@ function updatePosition(): void {
   currentPlacement.value = verticalPosition.placement;
 
   tooltipStyle.value = {
-    position: "fixed",
     left: `${horizontalPosition}px`,
+    position: "fixed",
     top: `${verticalPosition.top}px`,
   };
 }
 
-function show(): void {
-  visible.value = true;
-  currentPlacement.value = props.placement;
-  nextTick(() => updatePosition());
-}
-
-function hide(): void {
-  visible.value = false;
-  tooltipStyle.value = {};
-  currentPlacement.value = props.placement;
-}
-
 useEventListener(wrapperRef, ["focusin", "mouseenter"], show);
 useEventListener(wrapperRef, ["focusout", "mouseleave"], hide);
 
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index e9eb5890..2ae85960 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -28,7 +28,7 @@
           :href="`https://accounts.spotify.com/authorize?response_type=code&client_id=${api.clientId}&redirect_uri=${api.redirectUri}&scope=${api.scopes}&code_challenge_method=S256&code_challenge=${challenge}`"
           class="button button-primary"
         >
-          <i class="icon icon-spotify"></i>
+          <i class="icon icon-spotify" />
           Connect with Spotify (Premium)
         </a>
       </div>
diff --git a/src/views/album/AlbumPage.vue b/src/views/album/AlbumPage.vue
index 14456de8..afa66cb9 100644
--- a/src/views/album/AlbumPage.vue
+++ b/src/views/album/AlbumPage.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="loader" v-if="albumStore.album.name === ''"><Loader /></div>
-  <div class="album-page" ref="albumpage" v-else>
+  <div v-if="albumStore.album.name === ''" class="loader">
+    <Loader />
+  </div>
+  <div v-else ref="albumpage" class="album-page">
     <div class="fit">
       <Head :album="albumStore.album" />
       <div class="content">
@@ -9,21 +11,21 @@
         </div>
         <div class="content-tracks">
           <div
+            v-for="(track, index) in albumStore.album.tracks.items"
+            :key="index"
             :class="{
               active: isCurrentTrack(track, currentTrack),
               unavailable: !track.available_markets.length,
             }"
-            :key="index"
-            @click="playSongs(index, albumStore.album.tracks.items)"
             class="track"
-            v-for="(track, index) in albumStore.album.tracks.items"
+            @click="playSongs(index, albumStore.album.tracks.items)"
           >
             <ButtonIndex
               no-default-class
               class="add"
               @click.prevent.stop="dialogStore.open({ type: 'addSong', track: track })"
             >
-              <i class="icon-plus"></i>
+              <i class="icon-plus" />
             </ButtonIndex>
             <span class="track-number">{{ track.track_number }}.</span>
             <div>
@@ -35,7 +37,9 @@
                 />
               </div>
             </div>
-            <div class="duration">{{ timecode(track.duration_ms) }}</div>
+            <div class="duration">
+              {{ timecode(track.duration_ms) }}
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/views/artist/ArtistPage.vue b/src/views/artist/ArtistPage.vue
index 0173792c..e0429053 100644
--- a/src/views/artist/ArtistPage.vue
+++ b/src/views/artist/ArtistPage.vue
@@ -1,9 +1,11 @@
 <template>
-  <div class="loader" v-if="artistStore.artist.name === ''"><Loader /></div>
-  <div class="artist-page" v-else>
+  <div v-if="artistStore.artist.name === ''" class="loader">
+    <Loader />
+  </div>
+  <div v-else class="artist-page">
     <ArtistHeader />
     <Transition name="tab-fade" mode="out-in">
-      <div class="content" v-if="artistStore.activeTab === 'discography'" key="discography">
+      <div v-if="artistStore.activeTab === 'discography'" key="discography" class="content">
         <div class="list">
           <div
             v-if="
@@ -25,7 +27,7 @@
           <RelatedArtists class="top-item related-artists" />
         </div>
       </div>
-      <div class="content content--info" v-else-if="artistStore.activeTab === 'info'" key="info">
+      <div v-else-if="artistStore.activeTab === 'info'" key="info" class="content content--info">
         <ArtistInfo />
       </div>
     </Transition>
diff --git a/src/views/home/HomePage.vue b/src/views/home/HomePage.vue
index aad75163..eaf21fd2 100644
--- a/src/views/home/HomePage.vue
+++ b/src/views/home/HomePage.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="loader" v-if="!homeStore.recommendedAlbums.length">
+  <div v-if="!homeStore.recommendedAlbums.length" class="loader">
     <Loader />
   </div>
-  <div class="home" v-else>
+  <div v-else class="home">
     <div class="home-content">
       <PageFit>
         <div class="title">
           <div class="name">Recommended albums</div>
           <ButtonIndex @click="getData()">
-            <i class="icon-refresh"></i>
+            <i class="icon-refresh" />
             Refresh
           </ButtonIndex>
         </div>
diff --git a/src/views/playlist/CollectionPage.vue b/src/views/playlist/CollectionPage.vue
index 0611aadd..36f7ab86 100644
--- a/src/views/playlist/CollectionPage.vue
+++ b/src/views/playlist/CollectionPage.vue
@@ -1,22 +1,24 @@
 <template>
-  <div class="loader" v-if="playlistStore.playlist.name === ''"><Loader /></div>
+  <div v-if="playlistStore.playlist.name === ''" class="loader">
+    <Loader />
+  </div>
   <PageScroller v-else>
     <PageFit>
       <div class="collection">
         <Header no-cover no-duration />
         <div class="content">
           <SlickList
+            v-model:list="albumList"
             :press-delay="200"
-            @sort-end="syncNewPositions"
             axis="xy"
             class="album-list"
-            v-model:list="albumList"
+            @sort-end="syncNewPositions"
           >
             <SlickItem
+              v-for="(item, i) in albumListFiltered"
+              :key="item.id"
               :disabled="playlistStore.playlist.owner.id !== authStore.me?.id"
               :index="i"
-              :key="item.id"
-              v-for="(item, i) in albumListFiltered"
             >
               <Album :album="item" can-delete can-save with-artists />
             </SlickItem>
diff --git a/src/views/playlist/PlaylistPage.vue b/src/views/playlist/PlaylistPage.vue
index 603fcf70..d1596311 100644
--- a/src/views/playlist/PlaylistPage.vue
+++ b/src/views/playlist/PlaylistPage.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="loader" v-if="playlistStore.playlist.name === ''"><Loader /></div>
+  <div v-if="playlistStore.playlist.name === ''" class="loader">
+    <Loader />
+  </div>
   <PageScroller v-else>
     <div class="playlist">
       <Header not-fit />
@@ -9,12 +11,12 @@
         <AlbumGallery :album-list="albums" :icon-name="'album'" class="block" title="Albums" />
         <AlbumGallery :album-list="eps" :icon-name="'ep'" class="block" title="EP's" />
         <div class="heading sticky">
-          <i class="icon-single"></i>
+          <i class="icon-single" />
           Singles
         </div>
         <Tracks :track-list="singles" :contributors-data="contributorsData" />
       </template>
-      <Tracks :track-list="playlistStore.tracks" :contributors-data="contributorsData" v-else />
+      <Tracks v-else :track-list="playlistStore.tracks" :contributors-data="contributorsData" />
     </div>
   </PageScroller>
 </template>
@@ -25,10 +27,10 @@ import { computed, ref, watch } from "vue";
 import { PublicUser } from "@/@types/PublicUser";
 import { instance } from "@/api";
 import AlbumGallery from "@/components/album/AlbumGallery.vue";
-import Loader from "@/components/ui/LoadingDots.vue";
-import PageScroller from "@/components/ui/PageScroller.vue";
 import Header from "@/components/playlist/PlaylistHeader.vue";
 import Tracks from "@/components/playlist/PlaylistTracks.vue";
+import Loader from "@/components/ui/LoadingDots.vue";
+import PageScroller from "@/components/ui/PageScroller.vue";
 import { isAlbum, isEP, isSingle, useCheckLiveAlbum } from "@/helpers/useCleanAlbums";
 import { usePlaylist } from "@/views/playlist/PlaylistStore";
 
@@ -73,10 +75,10 @@ const fetchContributorsData = async (): Promise<void> => {
   const promises = uniqueContributorIds.value.map(async (userId) => {
     try {
       const response = await api.get<PublicUser>(`users/${userId}`);
-      return { userId, data: response.data };
+      return { data: response.data, userId };
     } catch (error) {
-      console.error(`Error fetching data for user ${userId}:`, error);
-      return { userId, data: null };
+      if (import.meta.env.DEV) console.error(`Error fetching data for user ${userId}:`, error);
+      return { data: null, userId };
     }
   });
 
diff --git a/src/views/playlist/PlaylistStore.ts b/src/views/playlist/PlaylistStore.ts
index e9f78025..e9448b6a 100644
--- a/src/views/playlist/PlaylistStore.ts
+++ b/src/views/playlist/PlaylistStore.ts
@@ -41,8 +41,7 @@ export const usePlaylist = defineStore("playlist", {
         this.tracks = this.tracks.concat(e.data.items.filter((item: PlaylistTrack) => item.track));
         if (e.data.next) await this.getTracks(e.data.next);
       } catch (error: unknown) {
-        // eslint-disable-next-line no-console
-        console.error("Error fetching playlist tracks:", error);
+        if (import.meta.env.DEV) console.error("Error fetching playlist tracks:", error);
         if (typeof error === "object" && error && "message" in error) {
           const msg = (error as { message?: string }).message; // retain minimal structural narrowing
           if (msg && msg.includes("404") && url.includes("https://api.spotify.com/v1/https://api.spotify.com/v1/")) {
diff --git a/src/views/podcasts/PodcastListPage.vue b/src/views/podcasts/PodcastListPage.vue
index 6ec27ca3..a176f8b3 100644
--- a/src/views/podcasts/PodcastListPage.vue
+++ b/src/views/podcasts/PodcastListPage.vue
@@ -1,17 +1,21 @@
 <template>
-  <div class="loader" v-if="!podcastsStore.list && !podcastsStore.myPodcasts.length">
+  <div v-if="!podcastsStore.list && !podcastsStore.myPodcasts.length" class="loader">
     <Loader />
   </div>
-  <div class="podcasts" v-else>
+  <div v-else class="podcasts">
     <PageFit>
-      <div class="title"><div class="name">Podcasts</div></div>
-      <div v-if="!podcastsStore.myPodcasts.length"><Loader /></div>
-      <div class="podcast-list" v-else>
+      <div class="title">
+        <div class="name">Podcasts</div>
+      </div>
+      <div v-if="!podcastsStore.myPodcasts.length">
+        <Loader />
+      </div>
+      <div v-else class="podcast-list">
         <PodcastCard
-          :covers="podcast?.show.images"
+          v-for="(podcast, index) in podcastsStore.myPodcasts"
           :id="podcast.show.id"
           :key="index"
-          v-for="(podcast, index) in podcastsStore.myPodcasts"
+          :covers="podcast?.show.images"
         />
       </div>
     </PageFit>
diff --git a/src/views/podcasts/PodcastPage.vue b/src/views/podcasts/PodcastPage.vue
index b167324b..26a54a25 100644
--- a/src/views/podcasts/PodcastPage.vue
+++ b/src/views/podcasts/PodcastPage.vue
@@ -1,13 +1,17 @@
 <template>
-  <div class="loader" v-if="!podcastsStore.podcast"><Loader /></div>
-  <div class="podcast" v-else>
+  <div v-if="!podcastsStore.podcast" class="loader">
+    <Loader />
+  </div>
+  <div v-else class="podcast">
     <PageFit>
       <div class="title">
-        <div class="name">{{ podcastsStore.podcast?.name }}</div>
-        <PodcastFollowButton :podcast-id="props.id" v-if="podcastsStore.podcast" />
+        <div class="name">
+          {{ podcastsStore.podcast?.name }}
+        </div>
+        <PodcastFollowButton v-if="podcastsStore.podcast" :podcast-id="props.id" />
       </div>
       <div>
-        <div :key="index" v-for="(episode, index) in podcastsStore.episodes">
+        <div v-for="(episode, index) in podcastsStore.episodes" :key="index">
           <PodcastEpisode :episode="episode" />
         </div>
       </div>
diff --git a/src/views/podcasts/PodcastsStore.ts b/src/views/podcasts/PodcastsStore.ts
index 8bb18e11..51930537 100644
--- a/src/views/podcasts/PodcastsStore.ts
+++ b/src/views/podcasts/PodcastsStore.ts
@@ -30,8 +30,7 @@ export const usePodcasts = defineStore("podcasts", {
           type: NotificationType.Success,
         });
       } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error("Error following podcast:", error);
+        if (import.meta.env.DEV) console.error("Error following podcast:", error);
         notification({
           msg: "Error adding podcast",
           type: NotificationType.Error,
@@ -44,8 +43,7 @@ export const usePodcasts = defineStore("podcasts", {
         const response = await instance().get<boolean[]>(`me/shows/contains?ids=${podcastId}`);
         this.isFollowing = response.data[0] || false;
       } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error("Error fetching podcast follow status:", error);
+        if (import.meta.env.DEV) console.error("Error fetching podcast follow status:", error);
         this.isFollowing = false;
       }
     },
@@ -58,8 +56,7 @@ export const usePodcasts = defineStore("podcasts", {
         this.myPodcasts = this.myPodcasts.concat(validPodcasts);
         if (e.data.next) await this.getMyPodcasts(e.data.next);
       } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error("Error fetching podcasts:", error);
+        if (import.meta.env.DEV) console.error("Error fetching podcasts:", error);
       }
     },
 
@@ -68,8 +65,7 @@ export const usePodcasts = defineStore("podcasts", {
         const { data } = await instance().get<Podcast>(`shows/${podcastId}`);
         this.podcast = data;
       } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error("Error fetching podcast:", error);
+        if (import.meta.env.DEV) console.error("Error fetching podcast:", error);
       }
     },
 
@@ -81,8 +77,7 @@ export const usePodcasts = defineStore("podcasts", {
         this.episodes = this.episodes.concat(validEpisodes);
         if (e.data.next) await this.getPodcastEpisodes(e.data.next);
       } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error("Error fetching podcast episodes:", error);
+        if (import.meta.env.DEV) console.error("Error fetching podcast episodes:", error);
       }
     },
 
@@ -95,8 +90,7 @@ export const usePodcasts = defineStore("podcasts", {
         const { data } = await instance().get<PodcastItem>(`shows?ids=${podcasts.join()}`);
         this.list = data;
       } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error("Error fetching podcast list:", error);
+        if (import.meta.env.DEV) console.error("Error fetching podcast list:", error);
       }
     },
 
@@ -111,8 +105,7 @@ export const usePodcasts = defineStore("podcasts", {
           type: NotificationType.Success,
         });
       } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error("Error unfollowing podcast:", error);
+        if (import.meta.env.DEV) console.error("Error unfollowing podcast:", error);
         notification({
           msg: "Error removing podcast",
           type: NotificationType.Error,
diff --git a/src/views/releases/ReleaseListPage.vue b/src/views/releases/ReleaseListPage.vue
index 496522d6..c4612068 100644
--- a/src/views/releases/ReleaseListPage.vue
+++ b/src/views/releases/ReleaseListPage.vue
@@ -1,17 +1,23 @@
 <template>
-  <div class="loader" v-if="!releasesStore.releases.length"><Loader /></div>
-  <div class="releases" v-else>
-    <div class="side"><ReleaseSide /></div>
-    <div class="list" ref="listDOM"><ReleaseList /></div>
+  <div v-if="!releasesStore.releases.length" class="loader">
+    <Loader />
+  </div>
+  <div v-else class="releases">
+    <div class="side">
+      <ReleaseSide />
+    </div>
+    <div ref="listDOM" class="list">
+      <ReleaseList />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, watch } from "vue";
 
-import Loader from "@/components/ui/LoadingDots.vue";
 import ReleaseList from "@/components/releases/ReleaseList.vue";
 import ReleaseSide from "@/components/releases/ReleaseSide.vue";
+import Loader from "@/components/ui/LoadingDots.vue";
 import { useAuth } from "@/views/auth/AuthStore";
 import { useReleases } from "@/views/releases/ReleasesStore";
 
diff --git a/src/views/user/UserPage.vue b/src/views/user/UserPage.vue
index ff889693..e158d5bd 100644
--- a/src/views/user/UserPage.vue
+++ b/src/views/user/UserPage.vue
@@ -1,13 +1,17 @@
 <template>
-  <div class="loader" v-if="!userStore.user"><LoadingDots /></div>
-  <div class="user-page" v-else>
+  <div v-if="!userStore.user" class="loader">
+    <LoadingDots />
+  </div>
+  <div v-else class="user-page">
     <div class="head">
       <img :src="userStore.user.images[0].url" alt="" class="avatar-bg" />
       <div class="inner">
         <div class="metas">
           <img :src="userStore.user.images[0].url" alt="" class="avatar" />
           <div>
-            <div class="name">{{ userStore.user?.display_name }}</div>
+            <div class="name">
+              {{ userStore.user?.display_name }}
+            </div>
             <div class="followers">{{ userStore.user?.followers.total }} followers</div>
           </div>
         </div>
@@ -20,10 +24,10 @@
         <div class="heading sticky title">Collections</div>
         <div class="gallery">
           <router-link
+            v-for="collection in userStore.collections"
             :key="collection.id"
             :to="`/collection/${collection.id}`"
             class="playlist"
-            v-for="collection in userStore.collections"
           >
             <Cover :images="collection.images" :size="'large'" class="playlist-cover" />
             <div>{{ collection.name.replaceAll("#Collection ", "") }}</div>
@@ -34,10 +38,10 @@
         <div class="heading sticky title">Playlists</div>
         <div class="gallery">
           <router-link
+            v-for="playlist in userStore.playlists"
             :key="playlist.id"
             :to="`/playlist/${playlist.id}`"
             class="playlist"
-            v-for="playlist in userStore.playlists"
           >
             <Cover :images="playlist.images" :size="'large'" class="playlist-cover" />
             <div>{{ playlist.name }}</div>

From 6abee1d7850699b12199c61aa9b4d6e0b2e44090 Mon Sep 17 00:00:00 2001
From: BeardedBear <germain.poirrier@gmail.com>
Date: Thu, 8 Jan 2026 22:25:17 +0100
Subject: [PATCH 2/5] docs: Remove CLAUDE and copilot instructions

---
 .github/copilot-instructions.md | 136 --------------------------------
 CLAUDE.md => AGENTS.md          |  23 ++++++
 2 files changed, 23 insertions(+), 136 deletions(-)
 delete mode 100644 .github/copilot-instructions.md
 rename CLAUDE.md => AGENTS.md (77%)

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
deleted file mode 100644
index 9aa0aae9..00000000
--- a/.github/copilot-instructions.md
+++ /dev/null
@@ -1,136 +0,0 @@
-# Copilot Instructions for Beardify
-
-Beardify is a Vue 3 + TypeScript Spotify web client. The core innovation is **"Collections"** - album playlists created by adding "#Collection" to playlist names, enabling functionality not available in the official Spotify client.
-
-## Essential Commands
-```bash
-npm run dev          # Start dev server (port 3000, auto-increments if busy)
-npm run lint         # Run ALL linting: TypeScript + ESLint + Prettier + Stylelint
-npm run fix          # Auto-fix all linting issues
-npm run build        # Production build (includes linting validation)
-```
-**Always run `npm run lint` before commits - no test framework exists, linting is primary QA.**
-
-## Tech Stack
-Vue 3 (Composition API + `<script setup>`) • TypeScript (strict) • Vite • Pinia (with persistence) • SCSS • Spotify Web API + Web Playback SDK
-
-## Architecture
-
-### Directory Structure
-```
-src/
-├── components/        # Feature-organized (album/, artist/, player/, etc.)
-│   └── */Store.ts    # Component-level Pinia stores
-├── views/            # Route-level components with corresponding Store.ts
-├── helpers/          # Utility functions (play.ts, playlist.ts, notifications.ts)
-├── @types/           # TypeScript types organized by feature
-└── assets/scss/      # Global SCSS with theming system
-```
-
-### State Management (Pinia)
-- **View-based stores**: `src/views/auth/AuthStore.ts`, `src/views/playlist/PlaylistStore.ts`
-- **Component-based stores**: `src/components/player/PlayerStore.ts`, `src/components/config/ConfigStore.ts`
-- **All stores use `pinia-plugin-persistedstate`** for automatic localStorage persistence
-- **Store action pattern**:
-```typescript
-async followPodcast(podcastId: string) {
-  try {
-    await instance().put(`me/shows?ids=${podcastId}`);
-    this.isFollowing = true;
-    notification({ msg: "Success message", type: NotificationType.Success });
-  } catch (error) {
-    if (import.meta.env.DEV) console.error("Error description:", error);
-    notification({ msg: "Error message", type: NotificationType.Error });
-  }
-}
-```
-
-### API Layer (`src/api.ts`)
-- **Use `instance()` for all Spotify API calls** - never use `ky` directly
-- **Automatic token refresh** and error handling built-in
-- **Method pattern**: `instance().get<ResponseType>(url)` with explicit typing
-- **All Spotify scopes already configured** in `api.scopes`
-
-Example:
-```typescript
-const { data } = await instance().get<Playlist>(`playlists/${id}`);
-await instance().put(`playlists/${id}/followers`); // No body for follow actions
-```
-
-### Collections Feature Logic (CRITICAL)
-The "#Collection" naming convention is **core business logic**:
-```typescript
-// Check if playlist is a collection
-function isACollection(playlist: SimplifiedPlaylist): boolean {
-  return playlist.name.toLowerCase().includes("#collection");
-}
-
-// Transform playlist to collection or vice versa
-const newName = isCollection ? `#Collection ${name}` : name;
-
-// Display name (strip the marker)
-const displayName = playlist.name.replace("#Collection ", "");
-```
-**Examples**: `src/components/sidebar/SidebarStore.ts:15`, `src/components/dialog/DialogStore.ts:37`
-
-## Code Conventions
-
-### TypeScript
-- **Explicit return types required** (ESLint warning enforced)
-- **No `any`** (warning enforced, prefer proper typing)
-- **Types in `src/@types/`** organized by feature (Album.ts, Playlist.ts, etc.)
-
-### Vue Components
-- **Always use `<script setup>` syntax**
-- **Scoped styles required** for all components
-- **Props pattern**: `defineProps<{ propName: Type }>()`
-- **Alphabetical import sorting** (enforced by ESLint perfectionist plugin)
-
-### Styling
-- **CSS Custom Properties** (existing design tokens):
-  - `--bg-color-*` (darker, dark, default, light, lighter)
-  - `--font-color-*` (dark, default, light)
-  - `--primary-color-*` (darker, dark, default, light, lighter)
-- **BEM methodology** for CSS class naming
-- **Stylelint**: Alphabetical property ordering enforced
-
-### Formatting
-- **Print width**: 120 characters
-- **Semicolons required**
-- **Unix line endings (LF)** - error level
-- **Arrow parens**: Always use parentheses
-
-## Spotify Integration
-
-### Authentication (OAuth 2.0 PKCE)
-- **Token refresh**: Every 30 minutes (handled in `AuthStore`)
-- **Persistent session**: With localStorage via Pinia plugin
-- **Environment variables**: `VITE_SPOTIFY_CLIENT_ID`, `VITE_REDIRECT_URI_DEV/PROD`
-- **Premium users only**: Web API limitation, handle gracefully
-
-### Web Playback SDK
-- **Error suppression**: Non-critical SDK errors intentionally suppressed in `main.ts:15-45`
-- **PlayLoad 404 errors**: Expected during playback transitions, completely silent
-- **Device polling**: Every 5 minutes for active device detection
-- **Widevine DRM**: Special handling for Brave browser compatibility
-
-### API Request Patterns
-- **Follow/Unfollow**: Use query params (`me/shows?ids=${id}`) **not request body**
-- **PUT for following**: `instance().put(url)` without body
-- **DELETE for unfollowing**: Query params in URL
-
-## Development Gotchas
-
-1. **No test framework exists** - linting is primary QA
-2. **User feedback required**: Always use `notification()` helper for user-facing actions
-3. **Console warnings allowed**: `console.error` for errors, `console.log` for debugging
-4. **URL cleaning**: Use `cleanUrl()` helper from `src/helpers/urls.ts` for Spotify API URLs
-5. **Premium-only features**: Gracefully degrade for non-premium limitations
-6. **Modern browsers required**: ES modules, CSS custom properties, Widevine DRM
-
-## Key Files to Reference
-- `src/api.ts` - API instance and configuration
-- `src/views/auth/AuthStore.ts` - OAuth flow and token management
-- `src/components/sidebar/SidebarStore.ts` - Collections feature implementation
-- `src/helpers/notifications.ts` - User notification pattern
-- `eslint.config.js` - Linting rules and conventions
diff --git a/CLAUDE.md b/AGENTS.md
similarity index 77%
rename from CLAUDE.md
rename to AGENTS.md
index 92963659..42d21f32 100644
--- a/CLAUDE.md
+++ b/AGENTS.md
@@ -28,6 +28,29 @@ npm run preview       # Preview production build
 
 **Always run `npm run lint` before committing changes.**
 
+## Commit message formatting (Conventional Commits)
+
+We follow the Conventional Commits specification. Use the header format:
+`<type>(<scope>): <short summary>`
+
+Rules:
+- Types: `feat`, `fix`, `docs`, `style`, `refactor`, `perf`, `test`, `chore`, `build`, `ci`, `revert`
+- Scope: optional but recommended (e.g. `player`, `auth`, `playlist`, `collection`, `api`, `styles`)
+- Summary: imperative mood, concise (<=50 chars), no trailing period
+- Body (optional): explain the "what" and "why" (not "how"); wrap lines at ~72 chars; leave one blank line between header and body
+- Footer: reference issues (e.g. `Closes #123`) or breaking changes using `BREAKING CHANGE: description`
+
+Examples:
+- `feat(collection): add #Collection marker when creating playlists`
+- `fix(api): handle 429 rate limits on playback requests`
+- `docs: update README with dev commands`
+- `chore(deps): bump pinia to 2.0.0`
+
+Best practices:
+- Run `npm run lint` before committing
+- Prefer "Squash and merge" for pull requests to keep history clean; use the PR title (following the spec) as the commit message when squashing
+- When introducing breaking changes, add `BREAKING CHANGE: ...` in the footer and describe the impact
+
 ## Architecture
 
 ### Directory Structure

From 61747772815f19948a9784a1d233b13c49d08732 Mon Sep 17 00:00:00 2001
From: BeardedBear <germain.poirrier@gmail.com>
Date: Thu, 8 Jan 2026 22:41:35 +0100
Subject: [PATCH 3/5] docs(agents): Rename and expand agent guidance

---
 AGENTS.md | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 42d21f32..7d1938b2 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,6 +1,6 @@
-# CLAUDE.md
+# AGENTS
 
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+This file consolidates guidance for AI agents working with this repository. Use the sections below for project information, agent-specific rules, and general guidelines to follow when making code changes.
 
 ## Project Overview
 
@@ -28,6 +28,20 @@ npm run preview       # Preview production build
 
 **Always run `npm run lint` before committing changes.**
 
+## General agent guidance
+
+These guidelines apply to all AI agents working on this repository:
+
+- Follow project conventions: Vue 3 Composition API, `<script setup>`, TypeScript strict mode, scoped styles, alphabetical import ordering, and Unix (LF) line endings.
+- Always run `npm run lint` and fix reported issues before committing.
+- Use the `instance()` helper from `src/api.ts` for all Spotify Web API calls (do not call `ky` directly).
+- Use `notification()` helper for user-facing messages and errors.
+- The `#Collection` naming convention is core business logic. Do not change Collection-related behavior without explicit approval from the maintainers.
+- Do not commit secrets, credentials, or environment variables into the repository.
+- Follow the commit message format in "Commit message formatting (Conventional Commits)" below.
+- Keep changes small and focused; prefer creating a pull request rather than pushing large, sweeping changes directly.
+- When unsure, open an issue or ask a maintainer for clarification.
+
 ## Commit message formatting (Conventional Commits)
 
 We follow the Conventional Commits specification. Use the header format:
@@ -117,13 +131,6 @@ Uses CSS custom properties with consistent naming:
 - Token refresh every 30 minutes
 - Persistent session with localStorage
 
-### Player Features
-
-- Spotify Web Playback SDK integration
-- Active device polling every 5 minutes
-- Widevine DRM support detection for Brave browser
-- Premium-only features (Spotify API limitation)
-
 ### Collections System
 
 The core feature: playlists with "#Collection" in the name are treated as album collections, providing functionality not available in the official Spotify client.

From 63e56bcea9db438a0cc9d371df718607a50e6a53 Mon Sep 17 00:00:00 2001
From: BeardedBear <germain.poirrier@gmail.com>
Date: Sun, 11 Jan 2026 16:43:58 +0100
Subject: [PATCH 4/5] chore(lint): Remove Prettier, add stylistic plugin

Use @stylistic ESLint plugin to enforce formatting instead of Prettier.
Remove .prettierrc.json and Prettier deps/scripts, and update
eslint.config.js, package.json, package-lock.json, and AGENTS.md.
---
 .prettierrc.json                              |  18 --
 AGENTS.md                                     |  19 +-
 eslint.config.js                              |  43 +++-
 package-lock.json                             | 210 +++++++-----------
 package.json                                  |   8 +-
 src/@types/Device.ts                          |  26 +--
 src/@types/Dialog.ts                          |  24 +-
 src/@types/Player.ts                          |  38 ++--
 src/App.vue                                   |   7 +-
 src/SpotifySdk.d.ts                           |   6 +-
 src/components/artist/ArtistList.vue          |   6 +-
 src/components/artist/ArtistSidebar.vue       |   8 +-
 src/components/minimized/MinimizedWindows.vue |  26 ++-
 src/components/player/PlayerEpisode.vue       |   4 +-
 src/components/player/PlayerSong.vue          |   4 +-
 src/components/sidebar/SidebarStore.ts        |   4 +-
 src/helpers/apiErrorHandling.ts               |  14 +-
 src/helpers/date.ts                           |   4 +-
 src/helpers/discogs.ts                        |  14 +-
 src/helpers/groupAlbumVariants.ts             |   4 +-
 src/main.ts                                   |  35 +--
 src/spotify.ts                                |  18 +-
 src/views/artist/ArtistStore.ts               |   4 +-
 src/views/auth/AuthStore.ts                   |   3 +-
 vite.config.ts                                |   2 +-
 25 files changed, 270 insertions(+), 279 deletions(-)
 delete mode 100644 .prettierrc.json

diff --git a/.prettierrc.json b/.prettierrc.json
deleted file mode 100644
index c5b51248..00000000
--- a/.prettierrc.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "overrides": [
-    {
-      "files": [
-        "*.json",
-        "*.yml"
-      ],
-      "options": {
-        "tabWidth": 2
-      }
-    }
-  ],
-  "printWidth": 120,
-  "semi": true,
-  "arrowParens": "always",
-  "htmlWhitespaceSensitivity": "ignore",
-  "endOfLine": "lf"
-}
diff --git a/AGENTS.md b/AGENTS.md
index 7d1938b2..c596b4fe 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -20,7 +20,7 @@ Beardify is a custom Spotify web client built with Vue 3 + TypeScript that enhan
 ```bash
 # Development
 npm run dev           # Start dev server (port 3000)
-npm run lint          # Run all linting (TypeScript + ESLint + Prettier + Stylelint)
+npm run lint          # Run all linting (TypeScript + ESLint + Stylelint)
 npm run fix           # Auto-fix all linting issues
 npm run build         # Build for production (includes linting)
 npm run preview       # Preview production build
@@ -106,14 +106,17 @@ Uses CSS custom properties with consistent naming:
 - **Perfectionist plugin**: Alphabetical ordering for imports/exports
 - **Vue files**: Currently ignored for parsing (TypeScript handled separately)
 
-### Prettier Configuration
+### Formatting (ESLint stylistic rules)
 
-- **Print width**: 120 characters
-- **Semicolons**: Required
-- **Arrow parens**: Always use parentheses
-- **End of line**: LF (Unix)
-- **HTML whitespace**: Ignore for Vue templates
-- **Tab width**: 2 spaces (JSON/YAML files)
+- **Enforced by**: ESLint (stylistic rules) — see `eslint.config.js`
+- **Print width**: 120 characters (`max-len`)
+- **Semicolons**: Required (`semi`)
+- **Arrow parens**: Always use parentheses (`arrow-parens`)
+- **End of line**: LF (Unix) (`linebreak-style`)
+- **HTML whitespace**: Ignored in Vue templates (template whitespace rules are deliberately permissive)
+- **Tab width**: 2 spaces (enforced via `indent`; JSON/YAML files maintain 2 spaces)
+
+**Note**: Prettier has been removed from the project; formatting is now enforced via ESLint stylistic rules. Use `npm run fix` to auto-fix JS/TS/Vue and SCSS style issues.
 
 ### Stylelint Configuration
 
diff --git a/eslint.config.js b/eslint.config.js
index 284cb6fe..b67e9fa7 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,8 +1,8 @@
 import eslint from "@eslint/js";
+import stylistic from "@stylistic/eslint-plugin";
 import tseslint from "@typescript-eslint/eslint-plugin";
 import tsParser from "@typescript-eslint/parser";
 import perfectionist from "eslint-plugin-perfectionist";
-import eslintPluginPrettier from "eslint-plugin-prettier";
 import pluginVue from "eslint-plugin-vue";
 import globals from "globals";
 
@@ -16,6 +16,18 @@ export default [
   // Configuration recommandée pour Vue 3
   ...pluginVue.configs["flat/recommended"],
 
+  // Configuration @stylistic (customize preset)
+  stylistic.configs.customize({
+    arrowParens: true,
+    braceStyle: "1tbs",
+    commaDangle: "always-multiline",
+    indent: 2,
+    jsx: false,
+    quoteProps: "as-needed",
+    quotes: "double",
+    semi: true,
+  }),
+
   // Configuration globale
   {
     languageOptions: {
@@ -78,13 +90,31 @@ export default [
     },
   },
 
-  // Configurer Prettier
+  // Stylistic overrides (additional rules beyond the preset)
   {
-    plugins: {
-      prettier: eslintPluginPrettier,
-    },
     rules: {
-      "prettier/prettier": ["error", {}, { usePrettierrc: true }],
+      "@stylistic/indent-binary-ops": ["error", 2],
+      "@stylistic/linebreak-style": ["error", "unix"],
+      "@stylistic/max-len": [
+        "error",
+        {
+          code: 120,
+          ignoreStrings: true,
+          ignoreTemplateLiterals: true,
+          ignoreUrls: true,
+        },
+      ],
+      "@stylistic/no-multiple-empty-lines": ["error", { max: 1, maxBOF: 0, maxEOF: 0 }],
+      "@stylistic/object-curly-newline": ["error", { consistent: true }],
+      "@stylistic/operator-linebreak": ["error", "before"],
+      "@stylistic/space-before-function-paren": [
+        "error",
+        {
+          anonymous: "always",
+          asyncArrow: "always",
+          named: "never",
+        },
+      ],
     },
   },
 
@@ -101,7 +131,6 @@ export default [
   // Règles globales
   {
     rules: {
-      "linebreak-style": ["error", "unix"], // Force l'utilisation de LF (unix) au lieu de CRLF (windows)
       "no-console": [
         "warn",
         {
diff --git a/package-lock.json b/package-lock.json
index 98bc0297..e1f9eceb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,24 +26,22 @@
       "devDependencies": {
         "@eslint/js": "^9.39.2",
         "@rushstack/eslint-patch": "^1.15.0",
+        "@stylistic/eslint-plugin": "^5.7.0",
         "@types/dompurify": "^3.2.0",
         "@types/node": "^25.0.3",
         "@typescript-eslint/eslint-plugin": "^8.51.0",
         "@typescript-eslint/parser": "^8.51.0",
         "@vitejs/plugin-vue": "^6.0.3",
         "@vue/compiler-sfc": "^3.5.26",
-        "@vue/eslint-config-prettier": "^10.2.0",
         "@vue/eslint-config-typescript": "^14.6.0",
         "@vueuse/core": "latest",
         "eslint": "^9.39.2",
         "eslint-plugin-perfectionist": "^5.2.0",
-        "eslint-plugin-prettier": "^5.5.4",
         "eslint-plugin-vue": "^10.6.2",
         "globals": "^17.0.0",
         "normalize.css": "^8.0.1",
         "postcss": "^8.5.6",
         "postcss-html": "^1.8.0",
-        "prettier": "^3.7.4",
         "sass": "^1.97.1",
         "stylelint": "^16.26.1",
         "stylelint-config-html": "^1.1.0",
@@ -1546,19 +1544,6 @@
         "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@pkgr/core": {
-      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.9.tgz",
-      "integrity": "sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/pkgr"
-      }
-    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.53",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
@@ -1881,6 +1866,85 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@stylistic/eslint-plugin": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-5.7.0.tgz",
+      "integrity": "sha512-PsSugIf9ip1H/mWKj4bi/BlEoerxXAda9ByRFsYuwsmr6af9NxJL0AaiNXs8Le7R21QR5KMiD/KdxZZ71LjAxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/types": "^8.52.0",
+        "eslint-visitor-keys": "^5.0.0",
+        "espree": "^11.0.0",
+        "estraverse": "^5.3.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=9.0.0"
+      }
+    },
+    "node_modules/@stylistic/eslint-plugin/node_modules/@typescript-eslint/types": {
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.52.0.tgz",
+      "integrity": "sha512-LWQV1V4q9V4cT4H5JCIx3481iIFxH1UkVk+ZkGGAV1ZGcjGI9IoFOfg3O6ywz8QqCDEp7Inlg6kovMofsNRaGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@stylistic/eslint-plugin/node_modules/eslint-visitor-keys": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.0.tgz",
+      "integrity": "sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@stylistic/eslint-plugin/node_modules/espree": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-11.0.0.tgz",
+      "integrity": "sha512-+gMeWRrIh/NsG+3NaLeWHuyeyk70p2tbvZIWBYcqQ4/7Xvars6GYTZNhF1sIeLcc6Wb11He5ffz3hsHyXFrw5A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@stylistic/eslint-plugin/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/@types/dompurify": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.2.0.tgz",
@@ -2297,21 +2361,6 @@
         "rfdc": "^1.4.1"
       }
     },
-    "node_modules/@vue/eslint-config-prettier": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-10.2.0.tgz",
-      "integrity": "sha512-GL3YBLwv/+b86yHcNNfPJxOTtVFJ4Mbc9UU3zR+KVoG7SwGTjPT+32fXamscNumElhcpXW3mT0DgzS9w32S7Bw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "eslint-config-prettier": "^10.0.1",
-        "eslint-plugin-prettier": "^5.2.2"
-      },
-      "peerDependencies": {
-        "eslint": ">= 8.21.0",
-        "prettier": ">= 3.0.0"
-      }
-    },
     "node_modules/@vue/eslint-config-typescript": {
       "version": "14.6.0",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-14.6.0.tgz",
@@ -3282,22 +3331,6 @@
         }
       }
     },
-    "node_modules/eslint-config-prettier": {
-      "version": "10.1.8",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
-      "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "eslint-config-prettier": "bin/cli.js"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint-config-prettier"
-      },
-      "peerDependencies": {
-        "eslint": ">=7.0.0"
-      }
-    },
     "node_modules/eslint-plugin-perfectionist": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-perfectionist/-/eslint-plugin-perfectionist-5.2.0.tgz",
@@ -3315,37 +3348,6 @@
         "eslint": ">=8.45.0"
       }
     },
-    "node_modules/eslint-plugin-prettier": {
-      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.5.4.tgz",
-      "integrity": "sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "prettier-linter-helpers": "^1.0.0",
-        "synckit": "^0.11.7"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint-plugin-prettier"
-      },
-      "peerDependencies": {
-        "@types/eslint": ">=8.0.0",
-        "eslint": ">=8.0.0",
-        "eslint-config-prettier": ">= 7.0.0 <10.0.0 || >=10.1.0",
-        "prettier": ">=3.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/eslint": {
-          "optional": true
-        },
-        "eslint-config-prettier": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/eslint-plugin-vue": {
       "version": "10.6.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-10.6.2.tgz",
@@ -3552,13 +3554,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/fast-diff": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
-      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/fast-glob": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -4919,35 +4914,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/prettier": {
-      "version": "3.7.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.7.4.tgz",
-      "integrity": "sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "prettier": "bin/prettier.cjs"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
-      }
-    },
-    "node_modules/prettier-linter-helpers": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.1.tgz",
-      "integrity": "sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fast-diff": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -5662,22 +5628,6 @@
       "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
       "dev": true
     },
-    "node_modules/synckit": {
-      "version": "0.11.11",
-      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.11.tgz",
-      "integrity": "sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@pkgr/core": "^0.2.9"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/synckit"
-      }
-    },
     "node_modules/table": {
       "version": "6.9.0",
       "resolved": "https://registry.npmjs.org/table/-/table-6.9.0.tgz",
diff --git a/package.json b/package.json
index afa7ca3c..e7a5b355 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,9 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "lint": "vue-tsc --noEmit && eslint src/**/*.{vue,ts} && prettier --c ./src/**/*.{ts,vue,json} && stylelint ./src/**/*.{vue,scss}",
+    "lint": "vue-tsc --noEmit && eslint src/**/*.{vue,ts} && stylelint ./src/**/*.{vue,scss}",
     "build": "npm run lint && vite build",
-    "fix": "prettier --write ./src/**/*.{ts,vue,json} && eslint src/**/*.{vue,ts} --fix && stylelint ./src/**/*.{vue,scss} --fix",
+    "fix": "eslint src/**/*.{vue,ts} --fix && stylelint ./src/**/*.{vue,scss} --fix",
     "preview": "npm run build && vite preview"
   },
   "dependencies": {
@@ -29,24 +29,22 @@
   "devDependencies": {
     "@eslint/js": "^9.39.2",
     "@rushstack/eslint-patch": "^1.15.0",
+    "@stylistic/eslint-plugin": "^5.7.0",
     "@types/dompurify": "^3.2.0",
     "@types/node": "^25.0.3",
     "@typescript-eslint/eslint-plugin": "^8.51.0",
     "@typescript-eslint/parser": "^8.51.0",
     "@vitejs/plugin-vue": "^6.0.3",
     "@vue/compiler-sfc": "^3.5.26",
-    "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vueuse/core": "latest",
     "eslint": "^9.39.2",
     "eslint-plugin-perfectionist": "^5.2.0",
-    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-vue": "^10.6.2",
     "globals": "^17.0.0",
     "normalize.css": "^8.0.1",
     "postcss": "^8.5.6",
     "postcss-html": "^1.8.0",
-    "prettier": "^3.7.4",
     "sass": "^1.97.1",
     "stylelint": "^16.26.1",
     "stylelint-config-html": "^1.1.0",
diff --git a/src/@types/Device.ts b/src/@types/Device.ts
index e75b0ba5..80efe185 100644
--- a/src/@types/Device.ts
+++ b/src/@types/Device.ts
@@ -12,16 +12,16 @@ export interface DevicesResponse {
   devices: Device[];
 }
 
-export type DeviceType =
-  | "audio_dongle"
-  | "automobile"
-  | "avr"
-  | "cast_audio"
-  | "cast_video"
-  | "computer"
-  | "game_console"
-  | "smartphone"
-  | "speaker"
-  | "stb"
-  | "tablet"
-  | "tv";
+export type DeviceType
+  = | "audio_dongle"
+    | "automobile"
+    | "avr"
+    | "cast_audio"
+    | "cast_video"
+    | "computer"
+    | "game_console"
+    | "smartphone"
+    | "speaker"
+    | "stb"
+    | "tablet"
+    | "tv";
diff --git a/src/@types/Dialog.ts b/src/@types/Dialog.ts
index d0f07085..46c953e5 100644
--- a/src/@types/Dialog.ts
+++ b/src/@types/Dialog.ts
@@ -13,18 +13,18 @@ export interface Dialog {
   type: DialogType;
 }
 
-export type DialogType =
-  | "addalbum"
-  | "addSong"
-  | "albumVariants"
-  | "artistOptions"
-  | "createCollection"
-  | "createPlaylist"
-  | "editPlaylist"
-  | "playlistOptions"
-  | "search"
-  | "widevine"
-  | null;
+export type DialogType
+  = | "addalbum"
+    | "addSong"
+    | "albumVariants"
+    | "artistOptions"
+    | "createCollection"
+    | "createPlaylist"
+    | "editPlaylist"
+    | "playlistOptions"
+    | "search"
+    | "widevine"
+    | null;
 
 export interface UpdatePlaylistValues {
   collaborative: boolean;
diff --git a/src/@types/Player.ts b/src/@types/Player.ts
index a1b49e87..697ef3a5 100644
--- a/src/@types/Player.ts
+++ b/src/@types/Player.ts
@@ -21,25 +21,25 @@ export interface Player {
   thisDeviceId: string;
 }
 
-export type PlayerError =
-  | "ALREADY_PAUSED"
-  | "ALREADY_PLAYING"
-  | "CONTEXT_DISALLOW"
-  | "DEVICE_NOT_CONTROLLABLE"
-  | "ENDLESS_CONTEXT"
-  | "NO_ACTIVE_DEVICE"
-  | "NO_NEXT_TRACK"
-  | "NO_PREV_TRACK"
-  | "NO_SPECIFIC_TRACK"
-  | "NOT_PAUSED"
-  | "NOT_PLAYING_CONTEXT"
-  | "NOT_PLAYING_LOCALLY"
-  | "NOT_PLAYING_TRACK"
-  | "PREMIUM_REQUIRED"
-  | "RATE_LIMITED"
-  | "REMOTE_CONTROL_DISALLOW"
-  | "UNKNOWN"
-  | "VOLUME_CONTROL_DISALLOW";
+export type PlayerError
+  = | "ALREADY_PAUSED"
+    | "ALREADY_PLAYING"
+    | "CONTEXT_DISALLOW"
+    | "DEVICE_NOT_CONTROLLABLE"
+    | "ENDLESS_CONTEXT"
+    | "NO_ACTIVE_DEVICE"
+    | "NO_NEXT_TRACK"
+    | "NO_PREV_TRACK"
+    | "NO_SPECIFIC_TRACK"
+    | "NOT_PAUSED"
+    | "NOT_PLAYING_CONTEXT"
+    | "NOT_PLAYING_LOCALLY"
+    | "NOT_PLAYING_TRACK"
+    | "PREMIUM_REQUIRED"
+    | "RATE_LIMITED"
+    | "REMOTE_CONTROL_DISALLOW"
+    | "UNKNOWN"
+    | "VOLUME_CONTROL_DISALLOW";
 
 const defaultAlbum: Spotify.Album = {
   images: [],
diff --git a/src/App.vue b/src/App.vue
index 34c96587..86e2254f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,6 +16,7 @@
     <Player key="player" />
     <PlayerSlideUp />
     <Notification />
+
     <Frame />
     <MinimizedWindows />
   </template>
@@ -48,7 +49,7 @@ if (!navigator.userAgent.includes("Macintosh")) {
   (async () => {
     const config = [
       {
-        audioCapabilities: [{ contentType: 'audio/mp4;codecs="mp4a.40.2"' }],
+        audioCapabilities: [{ contentType: "audio/mp4;codecs=\"mp4a.40.2\"" }],
         initDataTypes: ["cenc"],
       },
     ];
@@ -100,7 +101,9 @@ const handleVisibilityChange = async (): Promise<void> => {
           retries--;
           if (retries > 0) {
             // Wait a bit before retrying (exponential backoff)
-            await new Promise((resolve) => setTimeout(resolve, 2000 * (4 - retries)));
+            await new Promise((resolve) =>
+              setTimeout(resolve, 2000 * (4 - retries)),
+            );
           }
           // If all retries fail, the API error handler will eventually redirect to login
         }
diff --git a/src/SpotifySdk.d.ts b/src/SpotifySdk.d.ts
index f97a9e86..98753550 100644
--- a/src/SpotifySdk.d.ts
+++ b/src/SpotifySdk.d.ts
@@ -4,9 +4,9 @@ interface Window {
 }
 
 declare namespace Spotify {
-  type AddListenerFn = ((event: "not_ready" | "ready", cb: PlaybackInstanceListener) => void) &
-    ((event: "player_state_changed", cb: PlaybackStateListener) => void) &
-    ((event: ErrorTypes, cb: ErrorListener) => void);
+  type AddListenerFn = ((event: "not_ready" | "ready", cb: PlaybackInstanceListener) => void)
+    & ((event: "player_state_changed", cb: PlaybackStateListener) => void)
+    & ((event: ErrorTypes, cb: ErrorListener) => void);
 
   interface Album {
     images: Image[];
diff --git a/src/components/artist/ArtistList.vue b/src/components/artist/ArtistList.vue
index d57352df..6df8f3c9 100644
--- a/src/components/artist/ArtistList.vue
+++ b/src/components/artist/ArtistList.vue
@@ -25,9 +25,9 @@ const dialogStore = useDialog();
 defineProps<{
   artistList:
     | {
-        name: string;
-        uri: string;
-      }[]
+      name: string;
+      uri: string;
+    }[]
     | Artist[]
     | ArtistSimplified[]
     | undefined;
diff --git a/src/components/artist/ArtistSidebar.vue b/src/components/artist/ArtistSidebar.vue
index 6179dff2..a33f0f63 100644
--- a/src/components/artist/ArtistSidebar.vue
+++ b/src/components/artist/ArtistSidebar.vue
@@ -177,10 +177,10 @@ const formerMembers = computed<MemberItem[]>(() => {
 
 const hasContent = computed(
   () =>
-    details.value.length > 0 ||
-    externalLinks.value.length > 0 ||
-    activeMembers.value.length > 0 ||
-    formerMembers.value.length > 0,
+    details.value.length > 0
+    || externalLinks.value.length > 0
+    || activeMembers.value.length > 0
+    || formerMembers.value.length > 0,
 );
 </script>
 
diff --git a/src/components/minimized/MinimizedWindows.vue b/src/components/minimized/MinimizedWindows.vue
index 6d0b9532..b4a2a562 100644
--- a/src/components/minimized/MinimizedWindows.vue
+++ b/src/components/minimized/MinimizedWindows.vue
@@ -4,7 +4,12 @@
       v-if="dialogStore.show && dialogStore.isMinimized"
       v-motion
       :initial="{ scale: 0, opacity: 0, x: -50 }"
-      :enter="{ scale: 1, opacity: 1, x: 0, transition: { type: 'spring', stiffness: 260, damping: 20 } }"
+      :enter="{
+        scale: 1,
+        opacity: 1,
+        x: 0,
+        transition: { type: 'spring', stiffness: 260, damping: 20 },
+      }"
       :leave="{ scale: 0, opacity: 0, x: -50, transition: { duration: 200 } }"
       class="minimized-window"
     >
@@ -12,7 +17,11 @@
         <i class="icon-message-square" />
         <span>{{ getDialogTitle() }}</span>
       </div>
-      <button class="close-btn" aria-label="Close dialog" @click.stop="dialogStore.close()">
+      <button
+        class="close-btn"
+        aria-label="Close dialog"
+        @click.stop="dialogStore.close()"
+      >
         <i class="icon-x" />
       </button>
     </div>
@@ -21,7 +30,12 @@
       v-if="frameStore.show && frameStore.isMinimized"
       v-motion
       :initial="{ scale: 0, opacity: 0, x: -50 }"
-      :enter="{ scale: 1, opacity: 1, x: 0, transition: { type: 'spring', stiffness: 260, damping: 20 } }"
+      :enter="{
+        scale: 1,
+        opacity: 1,
+        x: 0,
+        transition: { type: 'spring', stiffness: 260, damping: 20 },
+      }"
       :leave="{ scale: 0, opacity: 0, x: -50, transition: { duration: 200 } }"
       class="minimized-window"
     >
@@ -29,7 +43,11 @@
         <i class="icon-external-link" />
         <span>{{ frameStore.siteName || "Frame" }}</span>
       </div>
-      <button class="close-btn" aria-label="Close frame" @click.stop="frameStore.close()">
+      <button
+        class="close-btn"
+        aria-label="Close frame"
+        @click.stop="frameStore.close()"
+      >
         <i class="icon-x" />
       </button>
     </div>
diff --git a/src/components/player/PlayerEpisode.vue b/src/components/player/PlayerEpisode.vue
index 7df233c9..0e2e0e55 100644
--- a/src/components/player/PlayerEpisode.vue
+++ b/src/components/player/PlayerEpisode.vue
@@ -30,8 +30,8 @@ function onSurfaceClick(event: MouseEvent): void {
   const target = (event?.target as HTMLElement) || null;
   if (!target) return;
 
-  const interactiveSelector =
-    "button, a, input, textarea, select, .controls, .btns, .control-button, .area-device, .time, .progress-wrap, .progress, .seek, .bar";
+  const interactiveSelector
+    = "button, a, input, textarea, select, .controls, .btns, .control-button, .area-device, .time, .progress-wrap, .progress, .seek, .bar";
   if (target.closest(interactiveSelector)) return;
 
   // Prevent the event from reaching target listeners (we are on capture phase)
diff --git a/src/components/player/PlayerSong.vue b/src/components/player/PlayerSong.vue
index 05c83e94..073be534 100644
--- a/src/components/player/PlayerSong.vue
+++ b/src/components/player/PlayerSong.vue
@@ -37,8 +37,8 @@ function onSurfaceClick(event: MouseEvent): void {
   if (!target) return;
 
   // Elements that should be allowed to handle the click themselves
-  const interactiveSelector =
-    "button, a, router-link, input, textarea, select, .controls, .btns, .control-button, .area-device, .time, .progress-wrap, .progress, .seek, .bar, .album";
+  const interactiveSelector
+    = "button, a, router-link, input, textarea, select, .controls, .btns, .control-button, .area-device, .time, .progress-wrap, .progress, .seek, .bar, .album";
   if (target.closest(interactiveSelector)) return;
 
   // We're in capture phase: prevent the click from reaching target handlers
diff --git a/src/components/sidebar/SidebarStore.ts b/src/components/sidebar/SidebarStore.ts
index ed9bd930..22dc2839 100644
--- a/src/components/sidebar/SidebarStore.ts
+++ b/src/components/sidebar/SidebarStore.ts
@@ -120,8 +120,8 @@ export const useSidebar = defineStore("sidebar", {
         this.collections = this.collections.filter((collection) => collection.id !== playlistId);
         playlistStore.followed = false;
         if (
-          router.currentRoute.value.params.id === playlistId ||
-          playlistStore.playlist.owner.id === authStore.me?.id
+          router.currentRoute.value.params.id === playlistId
+          || playlistStore.playlist.owner.id === authStore.me?.id
         ) {
           router.push("/");
         }
diff --git a/src/helpers/apiErrorHandling.ts b/src/helpers/apiErrorHandling.ts
index 9251ef8a..3a7db9a6 100644
--- a/src/helpers/apiErrorHandling.ts
+++ b/src/helpers/apiErrorHandling.ts
@@ -158,12 +158,12 @@ export async function handlePlaybackApiError(
  */
 export function isApiError(error: unknown): error is ApiError {
   return (
-    typeof error === "object" &&
-    error !== null &&
-    "response" in error &&
-    typeof error.response === "object" &&
-    error.response !== null &&
-    "status" in error.response &&
-    typeof error.response.status === "number"
+    typeof error === "object"
+    && error !== null
+    && "response" in error
+    && typeof error.response === "object"
+    && error.response !== null
+    && "status" in error.response
+    && typeof error.response.status === "number"
   );
 }
diff --git a/src/helpers/date.ts b/src/helpers/date.ts
index 1d445cfc..f6d70fbe 100644
--- a/src/helpers/date.ts
+++ b/src/helpers/date.ts
@@ -21,8 +21,8 @@ export function formatDate(date?: null | string): string {
     if (isNaN(d.getTime())) return date as string;
 
     // Use browser locale when available, fallback to en-US
-    const locale =
-      typeof navigator !== "undefined" && (navigator as unknown as { language?: string }).language
+    const locale
+      = typeof navigator !== "undefined" && (navigator as unknown as { language?: string }).language
         ? (navigator as unknown as { language?: string }).language
         : "en-US";
 
diff --git a/src/helpers/discogs.ts b/src/helpers/discogs.ts
index 39bdd979..c7ce44a5 100644
--- a/src/helpers/discogs.ts
+++ b/src/helpers/discogs.ts
@@ -14,7 +14,7 @@ const USER_AGENT = "Beardify/1.0.0 (https://github.com/BeardedBear/beardify)";
  * Discogs markup parsing configuration
  */
 const DISCOGS_BASE_URL = "https://www.discogs.com";
-const LINK_ATTRS = 'target="_blank" rel="noopener noreferrer" class="discogs-link"';
+const LINK_ATTRS = "target=\"_blank\" rel=\"noopener noreferrer\" class=\"discogs-link\"";
 
 /**
  * Discogs entity types configuration
@@ -106,11 +106,11 @@ export function parseDiscogsMarkup(text: string): string {
   // [url=http://...]text[/url] -> <a href="...">text</a>
   result = result.replace(
     /\[url=(.*?)\](.*?)\[\/url\]/gi,
-    '<a href="$1" target="_blank" rel="noopener noreferrer">$2</a>',
+    "<a href=\"$1\" target=\"_blank\" rel=\"noopener noreferrer\">$2</a>",
   );
 
   // [url]http://...[/url] -> <a href="...">...</a>
-  result = result.replace(/\[url\](.*?)\[\/url\]/gi, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
+  result = result.replace(/\[url\](.*?)\[\/url\]/gi, "<a href=\"$1\" target=\"_blank\" rel=\"noopener noreferrer\">$1</a>");
 
   // Convert newlines to <br> tags
   result = result.replace(/\n/g, "<br>");
@@ -134,10 +134,10 @@ export function processDiscogsReleases(releases: DiscogsRelease[]): Map<string,
       if (format.includes("ep")) {
         releaseMap.set(normalizedTitle, "EP");
       } else if (
-        format.includes("album") ||
-        format.includes("lp") ||
-        format.includes("vinyl") ||
-        format.includes("cd")
+        format.includes("album")
+        || format.includes("lp")
+        || format.includes("vinyl")
+        || format.includes("cd")
       ) {
         releaseMap.set(normalizedTitle, "Album");
       }
diff --git a/src/helpers/groupAlbumVariants.ts b/src/helpers/groupAlbumVariants.ts
index 7ce8dc34..dd304f1a 100644
--- a/src/helpers/groupAlbumVariants.ts
+++ b/src/helpers/groupAlbumVariants.ts
@@ -46,8 +46,8 @@ const VARIANT_KEYWORDS = [
  */
 const VARIANT_PATTERNS = [
   // Parenthetical variants: (B-Sides and Rarities), (B-Sides), (Rarities), (Bonus Tracks), etc. (MUST BE FIRST)
-  /\s*\((B[-\s]?Sides( and Rarities)?|Rarities|Bonus Tracks|Bonus Disc|Bonus CD|Bonus Edition|Bonus Material|Bonus Content|Bonus Songs|Bonus EP|Bonus Single|Bonus)\)/i,
-  // Parenthetical stereo/mono/surround/year-based mixes: (Stereo Mix), (Mono Mix), (Surround Mix), (2007 Stereo Mix), (2015 Mono Mix)
+  /\s*\((B[-\s]?Sides( and Rarities)?|Rarities|Bonus Tracks|Bonus Disc|Bonus CD|Bonus Edition|Bonus Material|Bonus Content|Bonus Songs|Bonus EP|Bonus Single|Bonus)\)/i, // eslint-disable-line @stylistic/max-len
+  // Parenthetical stereo/mono/surround/year-based mixes: (Stereo Mix), (Mono Mix), (2007 Stereo Mix), etc.
   /\s*\((\d{4}\s*)?(Stereo|Mono|Surround)\s+Mix\)/i,
   // Dash with anniversary and additional text: – 10th Anniversary Commentary (MUST BE EARLY)
   /\s*[-–—]\s*\d+th\s+anniversary.*$/i,
diff --git a/src/main.ts b/src/main.ts
index 5f4e3e73..476ecd5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -16,8 +16,10 @@ const handleSpotifySDKErrors = (): void => {
   window.addEventListener("error", (event) => {
     // Check if the error is related to the Spotify SDK
     if (
-      event.message &&
-      (event.message.includes("Spotify") || event.message.includes("playback") || event.message.includes("player"))
+      event.message
+      && (event.message.includes("Spotify")
+        || event.message.includes("playback")
+        || event.message.includes("player"))
     ) {
       // Silent error handling for non-critical SDK errors
       event.preventDefault(); // Prevent error propagation
@@ -27,18 +29,20 @@ const handleSpotifySDKErrors = (): void => {
   // Handle unhandled promise rejections (very common with the Spotify SDK)
   window.addEventListener("unhandledrejection", (event) => {
     if (
-      event.reason &&
-      event.reason.message &&
-      (event.reason.message.includes("PlayLoad") ||
-        event.reason.message.includes("Spotify") ||
-        event.reason.message.includes("404") ||
-        event.reason.message.includes("item_before_load"))
+      event.reason
+      && event.reason.message
+      && (event.reason.message.includes("PlayLoad")
+        || event.reason.message.includes("Spotify")
+        || event.reason.message.includes("404")
+        || event.reason.message.includes("item_before_load"))
     ) {
       // Common Spotify SDK errors during playback
       event.preventDefault(); // Prevent error display in console
 
       // Completely suppress PlayLoad 404 errors (very common and harmless)
-      if (event.reason.message.includes("PlayLoad event failed with status 404")) {
+      if (
+        event.reason.message.includes("PlayLoad event failed with status 404")
+      ) {
         // Silent handling - these errors are expected and harmless with the Spotify SDK
         // They typically occur during item transitions or when connection state changes
         return;
@@ -48,7 +52,9 @@ const handleSpotifySDKErrors = (): void => {
       if (event.reason.message.includes("PlayLoad event failed")) {
         const authStore = useAuth();
         // Check if the token hasn't been refreshed recently
-        const lastRefresh = sessionStorage.getItem("spotify_token_last_refresh");
+        const lastRefresh = sessionStorage.getItem(
+          "spotify_token_last_refresh",
+        );
         const now = Date.now();
 
         if (!lastRefresh || now - parseInt(lastRefresh) > 300000) {
@@ -88,10 +94,11 @@ handleSpotifySDKErrors();
 
 // Check if we're on the auth callback page
 // Handle both /auth and /auth/ (with or without trailing slash)
-const isAuthCallback =
-  window.location.pathname === RouteName.Auth ||
-  window.location.pathname === RouteName.Auth.replace(/\/$/, "") ||
-  window.location.pathname.startsWith("/auth");
+const isAuthCallback
+
+  = window.location.pathname === RouteName.Auth
+  || window.location.pathname === RouteName.Auth.replace(/\/$/, "")
+  || window.location.pathname.startsWith("/auth");
 
 if (isAuthCallback) {
   // If we're on the auth page, just mount the app without trying to refresh
diff --git a/src/spotify.ts b/src/spotify.ts
index 85e78cc9..0405b280 100644
--- a/src/spotify.ts
+++ b/src/spotify.ts
@@ -9,8 +9,8 @@ import { useAuth } from "@/views/auth/AuthStore";
 const handleSDKError = (error: Error): void => {
   // Intercept specific errors related to Cloud Playback
   if (
-    error.message &&
-    (error.message.includes("PlayLoad event failed with status 404") || error.message.includes("item_before_load"))
+    error.message
+    && (error.message.includes("PlayLoad event failed with status 404") || error.message.includes("item_before_load"))
   ) {
     // Don't notify the user for these specific error types
     // These are expected during normal operation of the Spotify SDK
@@ -50,8 +50,8 @@ const createPlayer = (): Spotify.Player => {
 
     // Use stored volume for device first, then API-reported volume, then last used volume as fallback
     const volumePercent = storedVolume ?? activeVolumePercent ?? lastVolume;
-    const initialVolume =
-      typeof volumePercent === "number" && !Number.isNaN(volumePercent)
+    const initialVolume
+      = typeof volumePercent === "number" && !Number.isNaN(volumePercent)
         ? Math.max(0, Math.min(1, volumePercent / 100))
         : undefined;
 
@@ -225,11 +225,11 @@ const createPlayer = (): Spotify.Player => {
     // Intercept uncaught SDK errors
     window.addEventListener("unhandledrejection", (event) => {
       if (
-        event.reason &&
-        event.reason.message &&
-        (event.reason.message.includes("Spotify") ||
-          event.reason.message.includes("PlayLoad") ||
-          event.reason.message.includes("item_before_load"))
+        event.reason
+        && event.reason.message
+        && (event.reason.message.includes("Spotify")
+          || event.reason.message.includes("PlayLoad")
+          || event.reason.message.includes("item_before_load"))
       ) {
         event.preventDefault(); // Prevent propagation of the unhandled error
         handleSDKError(event.reason);
diff --git a/src/views/artist/ArtistStore.ts b/src/views/artist/ArtistStore.ts
index 43bfb297..b55c7eb8 100644
--- a/src/views/artist/ArtistStore.ts
+++ b/src/views/artist/ArtistStore.ts
@@ -213,8 +213,8 @@ export const useArtist = defineStore("artist", {
         const languages = this.wikidataArtist?.wikipediaLanguages || [];
         if (languages.length > 0) {
           const browserLang = navigator.language.split("-")[0];
-          const selectedLang =
-            languages.find((l) => l.code === browserLang) || languages.find((l) => l.code === "en") || languages[0];
+          const selectedLang
+            = languages.find((l) => l.code === browserLang) || languages.find((l) => l.code === "en") || languages[0];
 
           if (selectedLang) {
             this.wikipediaLanguage = selectedLang.code;
diff --git a/src/views/auth/AuthStore.ts b/src/views/auth/AuthStore.ts
index 67bcc8c7..b8db0bb9 100644
--- a/src/views/auth/AuthStore.ts
+++ b/src/views/auth/AuthStore.ts
@@ -120,7 +120,8 @@ export const useAuth = defineStore("auth", {
         await this.getMe();
 
         // Only update stored refresh token if the provider returned one.
-        // Spotify may not return a refresh_token on refresh requests; avoid overwriting the existing token with undefined.
+        // Spotify may not return a refresh_token on refresh requests.
+        // Avoid overwriting the existing token with undefined.
         const currentRefresh = this.storage?.refreshToken || "";
         const newRefresh = data.refresh_token ?? currentRefresh;
 
diff --git a/vite.config.ts b/vite.config.ts
index 8c914599..4339104a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,8 +11,8 @@ export default defineConfig({
     viteStaticCopy({
       targets: [
         {
-          src: "node_modules/flag-icons/flags/4x3/*.svg",
           dest: "flags",
+          src: "node_modules/flag-icons/flags/4x3/*.svg",
         },
       ],
     }),

From ee96057a3645b78be255d76377bdd0955d4f660b Mon Sep 17 00:00:00 2001
From: BeardedBear <germain.poirrier@gmail.com>
Date: Sun, 11 Jan 2026 17:03:37 +0100
Subject: [PATCH 5/5] chore(deps): Bump dev dependencies

Update package.json and package-lock.json for multiple dev dependencies
(oxlint, @types/node, @typescript-eslint, eslint plugins, vite, sass,
vue-tsc). Apply minor whitespace and template fixes in App.vue and
main.ts.
---
 package-lock.json | 832 ++++++++++++++++++++++++----------------------
 package.json      |  16 +-
 src/App.vue       |   3 +-
 src/main.ts       |   5 +-
 4 files changed, 438 insertions(+), 418 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e1f9eceb..e650629f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -211,9 +211,9 @@
       }
     },
     "node_modules/@csstools/css-syntax-patches-for-csstree": {
-      "version": "1.0.22",
-      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.0.22.tgz",
-      "integrity": "sha512-qBcx6zYlhleiFfdtzkRgwNC7VVoAwfK76Vmsw5t+PbvtdknO9StgRk7ROvq9so1iqbdW4uLIDAsXRsTfUrIoOw==",
+      "version": "1.0.25",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.0.25.tgz",
+      "integrity": "sha512-g0Kw9W3vjx5BEBAF8c5Fm2NcB/Fs8jJXh85aXqwEXiL+tqtOut07TWgyaGzAAfTM+gKckrrncyeGEZPcaRgm2Q==",
       "dev": true,
       "funding": [
         {
@@ -768,6 +768,19 @@
         "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
       }
     },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/@eslint-community/regexpp": {
       "version": "4.12.2",
       "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
@@ -878,6 +891,37 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -1131,9 +1175,9 @@
       }
     },
     "node_modules/@oxlint/darwin-arm64": {
-      "version": "1.36.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/darwin-arm64/-/darwin-arm64-1.36.0.tgz",
-      "integrity": "sha512-MJkj82GH+nhvWKJhSIM6KlZ8tyGKdogSQXtNdpIyP02r/tTayFJQaAEWayG2Jhsn93kske+nimg5MYFhwO/rlg==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/darwin-arm64/-/darwin-arm64-1.38.0.tgz",
+      "integrity": "sha512-9rN3047QTyA4i73FKikDUBdczRcLtOsIwZ5TsEx5Q7jr5nBjolhYQOFQf9QdhBLdInxw1iX4+lgdMCf1g74zjg==",
       "cpu": [
         "arm64"
       ],
@@ -1144,9 +1188,9 @@
       ]
     },
     "node_modules/@oxlint/darwin-x64": {
-      "version": "1.36.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/darwin-x64/-/darwin-x64-1.36.0.tgz",
-      "integrity": "sha512-VvEhfkqj/99dCTqOcfkyFXOSbx4lIy5u2m2GHbK4WCMDySokOcMTNRHGw8fH/WgQ5cDrDMSTYIGQTmnBGi9tiQ==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/darwin-x64/-/darwin-x64-1.38.0.tgz",
+      "integrity": "sha512-Y1UHW4KOlg5NvyrSn/bVBQP8/LRuid7Pnu+BWGbAVVsFcK0b565YgMSO3Eu9nU3w8ke91dr7NFpUmS+bVkdkbw==",
       "cpu": [
         "x64"
       ],
@@ -1157,9 +1201,9 @@
       ]
     },
     "node_modules/@oxlint/linux-arm64-gnu": {
-      "version": "1.36.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/linux-arm64-gnu/-/linux-arm64-gnu-1.36.0.tgz",
-      "integrity": "sha512-EMx92X5q+hHc3olTuj/kgkx9+yP0p/AVs4yvHbUfzZhBekXNpUWxWvg4hIKmQWn+Ee2j4o80/0ACGO0hDYJ9mg==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/linux-arm64-gnu/-/linux-arm64-gnu-1.38.0.tgz",
+      "integrity": "sha512-ZiVxPZizlXSnAMdkEFWX/mAj7U3bNiku8p6I9UgLrXzgGSSAhFobx8CaFGwVoKyWOd+gQgZ/ogCrunvx2k0CFg==",
       "cpu": [
         "arm64"
       ],
@@ -1170,9 +1214,9 @@
       ]
     },
     "node_modules/@oxlint/linux-arm64-musl": {
-      "version": "1.36.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/linux-arm64-musl/-/linux-arm64-musl-1.36.0.tgz",
-      "integrity": "sha512-7YCxtrPIctVYLqWrWkk8pahdCxch6PtsaucfMLC7TOlDt4nODhnQd4yzEscKqJ8Gjrw1bF4g+Ngob1gB+Qr9Fw==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/linux-arm64-musl/-/linux-arm64-musl-1.38.0.tgz",
+      "integrity": "sha512-ELtlCIGZ72A65ATZZHFxHMFrkRtY+DYDCKiNKg6v7u5PdeOFey+OlqRXgXtXlxWjCL+g7nivwI2FPVsWqf05Qw==",
       "cpu": [
         "arm64"
       ],
@@ -1183,9 +1227,9 @@
       ]
     },
     "node_modules/@oxlint/linux-x64-gnu": {
-      "version": "1.36.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/linux-x64-gnu/-/linux-x64-gnu-1.36.0.tgz",
-      "integrity": "sha512-lnaJVlx5r3NWmoOMesfQXJSf78jHTn8Z+sdAf795Kgteo72+qGC1Uax2SToCJVN2J8PNG3oRV5bLriiCNR2i6Q==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/linux-x64-gnu/-/linux-x64-gnu-1.38.0.tgz",
+      "integrity": "sha512-E1OcDh30qyng1m0EIlsOuapYkqk5QB6o6IMBjvDKqIoo6IrjlVAasoJfS/CmSH998gXRL3BcAJa6Qg9IxPFZnQ==",
       "cpu": [
         "x64"
       ],
@@ -1196,9 +1240,9 @@
       ]
     },
     "node_modules/@oxlint/linux-x64-musl": {
-      "version": "1.36.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/linux-x64-musl/-/linux-x64-musl-1.36.0.tgz",
-      "integrity": "sha512-AhuEU2Qdl66lSfTGu/Htirq8r/8q2YnZoG3yEXLMQWnPMn7efy8spD/N1NA7kH0Hll+cdfwgQkQqC2G4MS2lPQ==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/linux-x64-musl/-/linux-x64-musl-1.38.0.tgz",
+      "integrity": "sha512-4AfpbM/4sQnr6S1dMijEPfsq4stQbN5vJ2jsahSy/QTcvIVbFkgY+RIhrA5UWlC6eb0rD5CdaPQoKGMJGeXpYw==",
       "cpu": [
         "x64"
       ],
@@ -1209,9 +1253,9 @@
       ]
     },
     "node_modules/@oxlint/win32-arm64": {
-      "version": "1.36.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/win32-arm64/-/win32-arm64-1.36.0.tgz",
-      "integrity": "sha512-GlWCBjUJY2QgvBFuNRkiRJu7K/djLmM0UQKfZV8IN+UXbP/JbjZHWKRdd4LXlQmzoz7M5Hd6p+ElCej8/90FCg==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/win32-arm64/-/win32-arm64-1.38.0.tgz",
+      "integrity": "sha512-OvUVYdI68OwXh3d1RjH9N/okCxb6PrOGtEtzXyqGA7Gk+IxyZcX0/QCTBwV8FNbSSzDePSSEHOKpoIB+VXdtvg==",
       "cpu": [
         "arm64"
       ],
@@ -1222,9 +1266,9 @@
       ]
     },
     "node_modules/@oxlint/win32-x64": {
-      "version": "1.36.0",
-      "resolved": "https://registry.npmjs.org/@oxlint/win32-x64/-/win32-x64-1.36.0.tgz",
-      "integrity": "sha512-J+Vc00Utcf8p77lZPruQgb0QnQXuKnFogN88kCnOqs2a83I+vTBB8ILr0+L9sTwVRvIDMSC0pLdeQH4svWGFZg==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/win32-x64/-/win32-x64-1.38.0.tgz",
+      "integrity": "sha512-7IuZMYiZiOcgg5zHvpJY6jRlEwh8EB/uq7GsoQJO9hANq96TIjyntGByhIjFSsL4asyZmhTEki+MO/u5Fb/WQA==",
       "cpu": [
         "x64"
       ],
@@ -1552,9 +1596,9 @@
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.54.0.tgz",
-      "integrity": "sha512-OywsdRHrFvCdvsewAInDKCNyR3laPA2mc9bRYJ6LBp5IyvF3fvXbbNR0bSzHlZVFtn6E0xw2oZlyjg4rKCVcng==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.55.1.tgz",
+      "integrity": "sha512-9R0DM/ykwfGIlNu6+2U09ga0WXeZ9MRC2Ter8jnz8415VbuIykVuc6bhdrbORFZANDmTDvq26mJrEVTl8TdnDg==",
       "cpu": [
         "arm"
       ],
@@ -1566,9 +1610,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.54.0.tgz",
-      "integrity": "sha512-Skx39Uv+u7H224Af+bDgNinitlmHyQX1K/atIA32JP3JQw6hVODX5tkbi2zof/E69M1qH2UoN3Xdxgs90mmNYw==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.55.1.tgz",
+      "integrity": "sha512-eFZCb1YUqhTysgW3sj/55du5cG57S7UTNtdMjCW7LwVcj3dTTcowCsC8p7uBdzKsZYa8J7IDE8lhMI+HX1vQvg==",
       "cpu": [
         "arm64"
       ],
@@ -1580,9 +1624,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.54.0.tgz",
-      "integrity": "sha512-k43D4qta/+6Fq+nCDhhv9yP2HdeKeP56QrUUTW7E6PhZP1US6NDqpJj4MY0jBHlJivVJD5P8NxrjuobZBJTCRw==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.55.1.tgz",
+      "integrity": "sha512-p3grE2PHcQm2e8PSGZdzIhCKbMCw/xi9XvMPErPhwO17vxtvCN5FEA2mSLgmKlCjHGMQTP6phuQTYWUnKewwGg==",
       "cpu": [
         "arm64"
       ],
@@ -1594,9 +1638,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.54.0.tgz",
-      "integrity": "sha512-cOo7biqwkpawslEfox5Vs8/qj83M/aZCSSNIWpVzfU2CYHa2G3P1UN5WF01RdTHSgCkri7XOlTdtk17BezlV3A==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.55.1.tgz",
+      "integrity": "sha512-rDUjG25C9qoTm+e02Esi+aqTKSBYwVTaoS1wxcN47/Luqef57Vgp96xNANwt5npq9GDxsH7kXxNkJVEsWEOEaQ==",
       "cpu": [
         "x64"
       ],
@@ -1608,9 +1652,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.54.0.tgz",
-      "integrity": "sha512-miSvuFkmvFbgJ1BevMa4CPCFt5MPGw094knM64W9I0giUIMMmRYcGW/JWZDriaw/k1kOBtsWh1z6nIFV1vPNtA==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.55.1.tgz",
+      "integrity": "sha512-+JiU7Jbp5cdxekIgdte0jfcu5oqw4GCKr6i3PJTlXTCU5H5Fvtkpbs4XJHRmWNXF+hKmn4v7ogI5OQPaupJgOg==",
       "cpu": [
         "arm64"
       ],
@@ -1622,9 +1666,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.54.0.tgz",
-      "integrity": "sha512-KGXIs55+b/ZfZsq9aR026tmr/+7tq6VG6MsnrvF4H8VhwflTIuYh+LFUlIsRdQSgrgmtM3fVATzEAj4hBQlaqQ==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.55.1.tgz",
+      "integrity": "sha512-V5xC1tOVWtLLmr3YUk2f6EJK4qksksOYiz/TCsFHu/R+woubcLWdC9nZQmwjOAbmExBIVKsm1/wKmEy4z4u4Bw==",
       "cpu": [
         "x64"
       ],
@@ -1636,9 +1680,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.54.0.tgz",
-      "integrity": "sha512-EHMUcDwhtdRGlXZsGSIuXSYwD5kOT9NVnx9sqzYiwAc91wfYOE1g1djOEDseZJKKqtHAHGwnGPQu3kytmfaXLQ==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.55.1.tgz",
+      "integrity": "sha512-Rn3n+FUk2J5VWx+ywrG/HGPTD9jXNbicRtTM11e/uorplArnXZYsVifnPPqNNP5BsO3roI4n8332ukpY/zN7rQ==",
       "cpu": [
         "arm"
       ],
@@ -1650,9 +1694,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.54.0.tgz",
-      "integrity": "sha512-+pBrqEjaakN2ySv5RVrj/qLytYhPKEUwk+e3SFU5jTLHIcAtqh2rLrd/OkbNuHJpsBgxsD8ccJt5ga/SeG0JmA==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.55.1.tgz",
+      "integrity": "sha512-grPNWydeKtc1aEdrJDWk4opD7nFtQbMmV7769hiAaYyUKCT1faPRm2av8CX1YJsZ4TLAZcg9gTR1KvEzoLjXkg==",
       "cpu": [
         "arm"
       ],
@@ -1664,9 +1708,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.54.0.tgz",
-      "integrity": "sha512-NSqc7rE9wuUaRBsBp5ckQ5CVz5aIRKCwsoa6WMF7G01sX3/qHUw/z4pv+D+ahL1EIKy6Enpcnz1RY8pf7bjwng==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.55.1.tgz",
+      "integrity": "sha512-a59mwd1k6x8tXKcUxSyISiquLwB5pX+fJW9TkWU46lCqD/GRDe9uDN31jrMmVP3feI3mhAdvcCClhV8V5MhJFQ==",
       "cpu": [
         "arm64"
       ],
@@ -1678,9 +1722,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.54.0.tgz",
-      "integrity": "sha512-gr5vDbg3Bakga5kbdpqx81m2n9IX8M6gIMlQQIXiLTNeQW6CucvuInJ91EuCJ/JYvc+rcLLsDFcfAD1K7fMofg==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.55.1.tgz",
+      "integrity": "sha512-puS1MEgWX5GsHSoiAsF0TYrpomdvkaXm0CofIMG5uVkP6IBV+ZO9xhC5YEN49nsgYo1DuuMquF9+7EDBVYu4uA==",
       "cpu": [
         "arm64"
       ],
@@ -1692,9 +1736,23 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.54.0.tgz",
-      "integrity": "sha512-gsrtB1NA3ZYj2vq0Rzkylo9ylCtW/PhpLEivlgWe0bpgtX5+9j9EZa0wtZiCjgu6zmSeZWyI/e2YRX1URozpIw==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.55.1.tgz",
+      "integrity": "sha512-r3Wv40in+lTsULSb6nnoudVbARdOwb2u5fpeoOAZjFLznp6tDU8kd+GTHmJoqZ9lt6/Sys33KdIHUaQihFcu7g==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.55.1.tgz",
+      "integrity": "sha512-MR8c0+UxAlB22Fq4R+aQSPBayvYa3+9DrwG/i1TKQXFYEaoW3B5b/rkSRIypcZDdWjWnpcvxbNaAJDcSbJU3Lw==",
       "cpu": [
         "loong64"
       ],
@@ -1706,9 +1764,23 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.54.0.tgz",
-      "integrity": "sha512-y3qNOfTBStmFNq+t4s7Tmc9hW2ENtPg8FeUD/VShI7rKxNW7O4fFeaYbMsd3tpFlIg1Q8IapFgy7Q9i2BqeBvA==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.55.1.tgz",
+      "integrity": "sha512-3KhoECe1BRlSYpMTeVrD4sh2Pw2xgt4jzNSZIIPLFEsnQn9gAnZagW9+VqDqAHgm1Xc77LzJOo2LdigS5qZ+gw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.55.1.tgz",
+      "integrity": "sha512-ziR1OuZx0vdYZZ30vueNZTg73alF59DicYrPViG0NEgDVN8/Jl87zkAPu4u6VjZST2llgEUjaiNl9JM6HH1Vdw==",
       "cpu": [
         "ppc64"
       ],
@@ -1720,9 +1792,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.54.0.tgz",
-      "integrity": "sha512-89sepv7h2lIVPsFma8iwmccN7Yjjtgz0Rj/Ou6fEqg3HDhpCa+Et+YSufy27i6b0Wav69Qv4WBNl3Rs6pwhebQ==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.55.1.tgz",
+      "integrity": "sha512-uW0Y12ih2XJRERZ4jAfKamTyIHVMPQnTZcQjme2HMVDAHY4amf5u414OqNYC+x+LzRdRcnIG1YodLrrtA8xsxw==",
       "cpu": [
         "riscv64"
       ],
@@ -1734,9 +1806,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.54.0.tgz",
-      "integrity": "sha512-ZcU77ieh0M2Q8Ur7D5X7KvK+UxbXeDHwiOt/CPSBTI1fBmeDMivW0dPkdqkT4rOgDjrDDBUed9x4EgraIKoR2A==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.55.1.tgz",
+      "integrity": "sha512-u9yZ0jUkOED1BFrqu3BwMQoixvGHGZ+JhJNkNKY/hyoEgOwlqKb62qu+7UjbPSHYjiVy8kKJHvXKv5coH4wDeg==",
       "cpu": [
         "riscv64"
       ],
@@ -1748,9 +1820,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.54.0.tgz",
-      "integrity": "sha512-2AdWy5RdDF5+4YfG/YesGDDtbyJlC9LHmL6rZw6FurBJ5n4vFGupsOBGfwMRjBYH7qRQowT8D/U4LoSvVwOhSQ==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.55.1.tgz",
+      "integrity": "sha512-/0PenBCmqM4ZUd0190j7J0UsQ/1nsi735iPRakO8iPciE7BQ495Y6msPzaOmvx0/pn+eJVVlZrNrSh4WSYLxNg==",
       "cpu": [
         "s390x"
       ],
@@ -1762,9 +1834,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.54.0.tgz",
-      "integrity": "sha512-WGt5J8Ij/rvyqpFexxk3ffKqqbLf9AqrTBbWDk7ApGUzaIs6V+s2s84kAxklFwmMF/vBNGrVdYgbblCOFFezMQ==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.55.1.tgz",
+      "integrity": "sha512-a8G4wiQxQG2BAvo+gU6XrReRRqj+pLS2NGXKm8io19goR+K8lw269eTrPkSdDTALwMmJp4th2Uh0D8J9bEV1vg==",
       "cpu": [
         "x64"
       ],
@@ -1776,9 +1848,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.54.0.tgz",
-      "integrity": "sha512-JzQmb38ATzHjxlPHuTH6tE7ojnMKM2kYNzt44LO/jJi8BpceEC8QuXYA908n8r3CNuG/B3BV8VR3Hi1rYtmPiw==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.55.1.tgz",
+      "integrity": "sha512-bD+zjpFrMpP/hqkfEcnjXWHMw5BIghGisOKPj+2NaNDuVT+8Ds4mPf3XcPHuat1tz89WRL+1wbcxKY3WSbiT7w==",
       "cpu": [
         "x64"
       ],
@@ -1789,10 +1861,24 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.55.1.tgz",
+      "integrity": "sha512-eLXw0dOiqE4QmvikfQ6yjgkg/xDM+MdU9YJuP4ySTibXU0oAvnEWXt7UDJmD4UkYialMfOGFPJnIHSe/kdzPxg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.54.0.tgz",
-      "integrity": "sha512-huT3fd0iC7jigGh7n3q/+lfPcXxBi+om/Rs3yiFxjvSxbSB6aohDFXbWvlspaqjeOh+hx7DDHS+5Es5qRkWkZg==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.55.1.tgz",
+      "integrity": "sha512-xzm44KgEP11te3S2HCSyYf5zIzWmx3n8HDCc7EE59+lTcswEWNpvMLfd9uJvVX8LCg9QWG67Xt75AuHn4vgsXw==",
       "cpu": [
         "arm64"
       ],
@@ -1804,9 +1890,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.54.0.tgz",
-      "integrity": "sha512-c2V0W1bsKIKfbLMBu/WGBz6Yci8nJ/ZJdheE0EwB73N3MvHYKiKGs3mVilX4Gs70eGeDaMqEob25Tw2Gb9Nqyw==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.55.1.tgz",
+      "integrity": "sha512-yR6Bl3tMC/gBok5cz/Qi0xYnVbIxGx5Fcf/ca0eB6/6JwOY+SRUcJfI0OpeTpPls7f194as62thCt/2BjxYN8g==",
       "cpu": [
         "arm64"
       ],
@@ -1818,9 +1904,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.54.0.tgz",
-      "integrity": "sha512-woEHgqQqDCkAzrDhvDipnSirm5vxUXtSKDYTVpZG3nUdW/VVB5VdCYA2iReSj/u3yCZzXID4kuKG7OynPnB3WQ==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.55.1.tgz",
+      "integrity": "sha512-3fZBidchE0eY0oFZBnekYCfg+5wAB0mbpCBuofh5mZuzIU/4jIVkbESmd2dOsFNS78b53CYv3OAtwqkZZmU5nA==",
       "cpu": [
         "ia32"
       ],
@@ -1832,9 +1918,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.54.0.tgz",
-      "integrity": "sha512-dzAc53LOuFvHwbCEOS0rPbXp6SIhAf2txMP5p6mGyOXXw5mWY8NGGbPMPrs4P1WItkfApDathBj/NzMLUZ9rtQ==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.55.1.tgz",
+      "integrity": "sha512-xGGY5pXj69IxKb4yv/POoocPy/qmEGhimy/FoTpTSVju3FYXUQQMFCaZZXJVidsmGxRioZAwpThl/4zX41gRKg==",
       "cpu": [
         "x64"
       ],
@@ -1846,9 +1932,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.54.0.tgz",
-      "integrity": "sha512-hYT5d3YNdSh3mbCU1gwQyPgQd3T2ne0A3KG8KSBdav5TiBg6eInVmV+TeR5uHufiIgSFg0XsOWGW5/RhNcSvPg==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.55.1.tgz",
+      "integrity": "sha512-SPEpaL6DX4rmcXtnhdrQYgzQ5W2uW3SCJch88lB2zImhJRhIIK44fkUrgIV/Q8yUNfw5oyZ5vkeQsZLhCb06lw==",
       "cpu": [
         "x64"
       ],
@@ -1887,64 +1973,6 @@
         "eslint": ">=9.0.0"
       }
     },
-    "node_modules/@stylistic/eslint-plugin/node_modules/@typescript-eslint/types": {
-      "version": "8.52.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.52.0.tgz",
-      "integrity": "sha512-LWQV1V4q9V4cT4H5JCIx3481iIFxH1UkVk+ZkGGAV1ZGcjGI9IoFOfg3O6ywz8QqCDEp7Inlg6kovMofsNRaGg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@stylistic/eslint-plugin/node_modules/eslint-visitor-keys": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.0.tgz",
-      "integrity": "sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=24"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/@stylistic/eslint-plugin/node_modules/espree": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-11.0.0.tgz",
-      "integrity": "sha512-+gMeWRrIh/NsG+3NaLeWHuyeyk70p2tbvZIWBYcqQ4/7Xvars6GYTZNhF1sIeLcc6Wb11He5ffz3hsHyXFrw5A==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "acorn": "^8.15.0",
-        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^5.0.0"
-      },
-      "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=24"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/@stylistic/eslint-plugin/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/@types/dompurify": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.2.0.tgz",
@@ -1971,9 +1999,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "25.0.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.3.tgz",
-      "integrity": "sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA==",
+      "version": "25.0.6",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.6.tgz",
+      "integrity": "sha512-NNu0sjyNxpoiW3YuVFfNz7mxSQ+S4X2G28uqg2s+CzoqoQjLPsWSbsFFyztIAqt2vb8kfEAsJNepMGPTxFDx3Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1994,20 +2022,20 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.51.0.tgz",
-      "integrity": "sha512-XtssGWJvypyM2ytBnSnKtHYOGT+4ZwTnBVl36TA4nRO2f4PRNGz5/1OszHzcZCvcBMh+qb7I06uoCmLTRdR9og==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.52.0.tgz",
+      "integrity": "sha512-okqtOgqu2qmZJ5iN4TWlgfF171dZmx2FzdOv2K/ixL2LZWDStL8+JgQerI2sa8eAEfoydG9+0V96m7V+P8yE1Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.51.0",
-        "@typescript-eslint/type-utils": "8.51.0",
-        "@typescript-eslint/utils": "8.51.0",
-        "@typescript-eslint/visitor-keys": "8.51.0",
-        "ignore": "^7.0.0",
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.52.0",
+        "@typescript-eslint/type-utils": "8.52.0",
+        "@typescript-eslint/utils": "8.52.0",
+        "@typescript-eslint/visitor-keys": "8.52.0",
+        "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
-        "ts-api-utils": "^2.2.0"
+        "ts-api-utils": "^2.4.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2017,23 +2045,23 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.51.0",
+        "@typescript-eslint/parser": "^8.52.0",
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.51.0.tgz",
-      "integrity": "sha512-3xP4XzzDNQOIqBMWogftkwxhg5oMKApqY0BAflmLZiFYHqyhSOxv/cd/zPQLTcCXr4AkaKb25joocY0BD1WC6A==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.52.0.tgz",
+      "integrity": "sha512-iIACsx8pxRnguSYhHiMn2PvhvfpopO9FXHyn1mG5txZIsAaB6F0KwbFnUQN3KCiG3Jcuad/Cao2FAs1Wp7vAyg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.51.0",
-        "@typescript-eslint/types": "8.51.0",
-        "@typescript-eslint/typescript-estree": "8.51.0",
-        "@typescript-eslint/visitor-keys": "8.51.0",
-        "debug": "^4.3.4"
+        "@typescript-eslint/scope-manager": "8.52.0",
+        "@typescript-eslint/types": "8.52.0",
+        "@typescript-eslint/typescript-estree": "8.52.0",
+        "@typescript-eslint/visitor-keys": "8.52.0",
+        "debug": "^4.4.3"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2048,15 +2076,15 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.51.0.tgz",
-      "integrity": "sha512-Luv/GafO07Z7HpiI7qeEW5NW8HUtZI/fo/kE0YbtQEFpJRUuR0ajcWfCE5bnMvL7QQFrmT/odMe8QZww8X2nfQ==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.52.0.tgz",
+      "integrity": "sha512-xD0MfdSdEmeFa3OmVqonHi+Cciab96ls1UhIF/qX/O/gPu5KXD0bY9lu33jj04fjzrXHcuvjBcBC+D3SNSadaw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.51.0",
-        "@typescript-eslint/types": "^8.51.0",
-        "debug": "^4.3.4"
+        "@typescript-eslint/tsconfig-utils": "^8.52.0",
+        "@typescript-eslint/types": "^8.52.0",
+        "debug": "^4.4.3"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2070,14 +2098,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.51.0.tgz",
-      "integrity": "sha512-JhhJDVwsSx4hiOEQPeajGhCWgBMBwVkxC/Pet53EpBVs7zHHtayKefw1jtPaNRXpI9RA2uocdmpdfE7T+NrizA==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.52.0.tgz",
+      "integrity": "sha512-ixxqmmCcc1Nf8S0mS0TkJ/3LKcC8mruYJPOU6Ia2F/zUUR4pApW7LzrpU3JmtePbRUTes9bEqRc1Gg4iyRnDzA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.51.0",
-        "@typescript-eslint/visitor-keys": "8.51.0"
+        "@typescript-eslint/types": "8.52.0",
+        "@typescript-eslint/visitor-keys": "8.52.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2088,9 +2116,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.51.0.tgz",
-      "integrity": "sha512-Qi5bSy/vuHeWyir2C8u/uqGMIlIDu8fuiYWv48ZGlZ/k+PRPHtaAu7erpc7p5bzw2WNNSniuxoMSO4Ar6V9OXw==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.52.0.tgz",
+      "integrity": "sha512-jl+8fzr/SdzdxWJznq5nvoI7qn2tNYV/ZBAEcaFMVXf+K6jmXvAFrgo/+5rxgnL152f//pDEAYAhhBAZGrVfwg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2105,17 +2133,17 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.51.0.tgz",
-      "integrity": "sha512-0XVtYzxnobc9K0VU7wRWg1yiUrw4oQzexCG2V2IDxxCxhqBMSMbjB+6o91A+Uc0GWtgjCa3Y8bi7hwI0Tu4n5Q==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.52.0.tgz",
+      "integrity": "sha512-JD3wKBRWglYRQkAtsyGz1AewDu3mTc7NtRjR/ceTyGoPqmdS5oCdx/oZMWD5Zuqmo6/MpsYs0wp6axNt88/2EQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.51.0",
-        "@typescript-eslint/typescript-estree": "8.51.0",
-        "@typescript-eslint/utils": "8.51.0",
-        "debug": "^4.3.4",
-        "ts-api-utils": "^2.2.0"
+        "@typescript-eslint/types": "8.52.0",
+        "@typescript-eslint/typescript-estree": "8.52.0",
+        "@typescript-eslint/utils": "8.52.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.4.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2130,9 +2158,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.51.0.tgz",
-      "integrity": "sha512-TizAvWYFM6sSscmEakjY3sPqGwxZRSywSsPEiuZF6d5GmGD9Gvlsv0f6N8FvAAA0CD06l3rIcWNbsN1e5F/9Ag==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.52.0.tgz",
+      "integrity": "sha512-LWQV1V4q9V4cT4H5JCIx3481iIFxH1UkVk+ZkGGAV1ZGcjGI9IoFOfg3O6ywz8QqCDEp7Inlg6kovMofsNRaGg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2144,21 +2172,21 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.51.0.tgz",
-      "integrity": "sha512-1qNjGqFRmlq0VW5iVlcyHBbCjPB7y6SxpBkrbhNWMy/65ZoncXCEPJxkRZL8McrseNH6lFhaxCIaX+vBuFnRng==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.52.0.tgz",
+      "integrity": "sha512-XP3LClsCc0FsTK5/frGjolyADTh3QmsLp6nKd476xNI9CsSsLnmn4f0jrzNoAulmxlmNIpeXuHYeEQv61Q6qeQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.51.0",
-        "@typescript-eslint/tsconfig-utils": "8.51.0",
-        "@typescript-eslint/types": "8.51.0",
-        "@typescript-eslint/visitor-keys": "8.51.0",
-        "debug": "^4.3.4",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
+        "@typescript-eslint/project-service": "8.52.0",
+        "@typescript-eslint/tsconfig-utils": "8.52.0",
+        "@typescript-eslint/types": "8.52.0",
+        "@typescript-eslint/visitor-keys": "8.52.0",
+        "debug": "^4.4.3",
+        "minimatch": "^9.0.5",
+        "semver": "^7.7.3",
         "tinyglobby": "^0.2.15",
-        "ts-api-utils": "^2.2.0"
+        "ts-api-utils": "^2.4.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2172,16 +2200,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.51.0.tgz",
-      "integrity": "sha512-11rZYxSe0zabiKaCP2QAwRf/dnmgFgvTmeDTtZvUvXG3UuAdg/GU02NExmmIXzz3vLGgMdtrIosI84jITQOxUA==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.52.0.tgz",
+      "integrity": "sha512-wYndVMWkweqHpEpwPhwqE2lnD2DxC6WVLupU/DOt/0/v+/+iQbbzO3jOHjmBMnhu0DgLULvOaU4h4pwHYi2oRQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@eslint-community/eslint-utils": "^4.7.0",
-        "@typescript-eslint/scope-manager": "8.51.0",
-        "@typescript-eslint/types": "8.51.0",
-        "@typescript-eslint/typescript-estree": "8.51.0"
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.52.0",
+        "@typescript-eslint/types": "8.52.0",
+        "@typescript-eslint/typescript-estree": "8.52.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2196,13 +2224,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.51.0.tgz",
-      "integrity": "sha512-mM/JRQOzhVN1ykejrvwnBRV3+7yTKK8tVANVN3o1O0t0v7o+jqdVu9crPy5Y9dov15TJk/FTIgoUGHrTOVL3Zg==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.52.0.tgz",
+      "integrity": "sha512-ink3/Zofus34nmBsPjow63FP5M7IGff0RKAgqR6+CFpdk22M7aLwC9gOcLGYqr7MczLPzZVERW9hRog3O4n1sQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.51.0",
+        "@typescript-eslint/types": "8.52.0",
         "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
@@ -2388,9 +2416,9 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.2.1.tgz",
-      "integrity": "sha512-g6oSenpnGMtpxHGAwKuu7HJJkNZpemK/zg3vZzZbJ6cnnXq1ssxuNrXSsAHYM3NvH8p4IkTw+NLmuxyeYz4r8A==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.2.2.tgz",
+      "integrity": "sha512-5DAuhxsxBN9kbriklh3Q5AMaJhyOCNiQJvCskN9/30XOpdLiqZU9Q+WvjArP17ubdGEyZtBzlIeG5nIjEbNOrQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2403,19 +2431,6 @@
         "picomatch": "^4.0.2"
       }
     },
-    "node_modules/@vue/language-core/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.26",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.26.tgz",
@@ -2652,6 +2667,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -3332,13 +3360,13 @@
       }
     },
     "node_modules/eslint-plugin-perfectionist": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-perfectionist/-/eslint-plugin-perfectionist-5.2.0.tgz",
-      "integrity": "sha512-rLD4VyA6sxcCPlG/koqjp0D46JTNRURSDs22Jr1JeVbOiu1BoeRdROnJoqDoGESuXbwxvGEnMSqClX/Q3HSMig==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-perfectionist/-/eslint-plugin-perfectionist-5.3.1.tgz",
+      "integrity": "sha512-v8kAP8TarQYqDC4kxr343ZNi++/oOlBnmWovsUZpbJ7A/pq1VHGlgsf/fDh4CdEvEstzkrc8NLvoVKtfpsC4oA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/utils": "^8.51.0",
+        "@typescript-eslint/utils": "^8.52.0",
         "natural-orderby": "^5.0.0"
       },
       "engines": {
@@ -3398,13 +3426,13 @@
       }
     },
     "node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.0.tgz",
+      "integrity": "sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
@@ -3434,6 +3462,24 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint/node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/eslint/node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3458,31 +3504,18 @@
       }
     },
     "node_modules/espree": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
-      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-11.0.0.tgz",
+      "integrity": "sha512-+gMeWRrIh/NsG+3NaLeWHuyeyk70p2tbvZIWBYcqQ4/7Xvars6GYTZNhF1sIeLcc6Wb11He5ffz3hsHyXFrw5A==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "acorn": "^8.15.0",
         "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^4.2.1"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "eslint-visitor-keys": "^5.0.0"
       },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/espree/node_modules/eslint-visitor-keys": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
-      "dev": true,
-      "license": "Apache-2.0",
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
@@ -3635,6 +3668,24 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -3894,9 +3945,9 @@
       "license": "MIT"
     },
     "node_modules/hookified": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.14.0.tgz",
-      "integrity": "sha512-pi1ynXIMFx/uIIwpWJ/5CEtOHLGtnUB0WhGeeYT+fKcQ+WCQbm3/rrkAXnpfph++PgepNqPdTC2WTj8A6k6zoQ==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.15.0.tgz",
+      "integrity": "sha512-51w+ZZGt7Zw5q7rM3nC4t3aLn/xvKDETsXqMczndvwyVQhAHfUmUuFBRFcos8Iyebtk7OAE9dL26wFNzZVVOkw==",
       "dev": true,
       "license": "MIT"
     },
@@ -4318,6 +4369,19 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -4512,12 +4576,11 @@
       }
     },
     "node_modules/oxlint": {
-      "version": "1.36.0",
-      "resolved": "https://registry.npmjs.org/oxlint/-/oxlint-1.36.0.tgz",
-      "integrity": "sha512-IicUdXfXgI8OKrDPnoSjvBfeEF8PkKtm+CoLlg4LYe4ypc8U+T4r7730XYshdBGZdelg+JRw8GtCb2w/KaaZvw==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/oxlint/-/oxlint-1.38.0.tgz",
+      "integrity": "sha512-XT7tBinQS+hVLxtfJOnokJ9qVBiQvZqng40tDgR6qEJMRMnpVq/JwYfbYyGntSq8MO+Y+N9M1NG4bAMFUtCJiw==",
       "license": "MIT",
       "bin": {
-        "oxc_language_server": "bin/oxc_language_server",
         "oxlint": "bin/oxlint"
       },
       "engines": {
@@ -4527,14 +4590,14 @@
         "url": "https://github.com/sponsors/Boshen"
       },
       "optionalDependencies": {
-        "@oxlint/darwin-arm64": "1.36.0",
-        "@oxlint/darwin-x64": "1.36.0",
-        "@oxlint/linux-arm64-gnu": "1.36.0",
-        "@oxlint/linux-arm64-musl": "1.36.0",
-        "@oxlint/linux-x64-gnu": "1.36.0",
-        "@oxlint/linux-x64-musl": "1.36.0",
-        "@oxlint/win32-arm64": "1.36.0",
-        "@oxlint/win32-x64": "1.36.0"
+        "@oxlint/darwin-arm64": "1.38.0",
+        "@oxlint/darwin-x64": "1.38.0",
+        "@oxlint/linux-arm64-gnu": "1.38.0",
+        "@oxlint/linux-arm64-musl": "1.38.0",
+        "@oxlint/linux-x64-gnu": "1.38.0",
+        "@oxlint/linux-x64-musl": "1.38.0",
+        "@oxlint/win32-arm64": "1.38.0",
+        "@oxlint/win32-x64": "1.38.0"
       },
       "peerDependencies": {
         "oxlint-tsgolint": ">=0.10.0"
@@ -4680,13 +4743,13 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "devOptional": true,
       "license": "MIT",
       "engines": {
-        "node": ">=8.6"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/jonschlinkert"
@@ -5021,9 +5084,9 @@
       "license": "MIT"
     },
     "node_modules/rollup": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
-      "integrity": "sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.55.1.tgz",
+      "integrity": "sha512-wDv/Ht1BNHB4upNbK74s9usvl7hObDnvVzknxqY/E/O3X6rW1U1rV1aENEfJ54eFZDTNo7zv1f5N4edCluH7+A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5037,28 +5100,31 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.54.0",
-        "@rollup/rollup-android-arm64": "4.54.0",
-        "@rollup/rollup-darwin-arm64": "4.54.0",
-        "@rollup/rollup-darwin-x64": "4.54.0",
-        "@rollup/rollup-freebsd-arm64": "4.54.0",
-        "@rollup/rollup-freebsd-x64": "4.54.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.54.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.54.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.54.0",
-        "@rollup/rollup-linux-arm64-musl": "4.54.0",
-        "@rollup/rollup-linux-loong64-gnu": "4.54.0",
-        "@rollup/rollup-linux-ppc64-gnu": "4.54.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.54.0",
-        "@rollup/rollup-linux-riscv64-musl": "4.54.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.54.0",
-        "@rollup/rollup-linux-x64-gnu": "4.54.0",
-        "@rollup/rollup-linux-x64-musl": "4.54.0",
-        "@rollup/rollup-openharmony-arm64": "4.54.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.54.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.54.0",
-        "@rollup/rollup-win32-x64-gnu": "4.54.0",
-        "@rollup/rollup-win32-x64-msvc": "4.54.0",
+        "@rollup/rollup-android-arm-eabi": "4.55.1",
+        "@rollup/rollup-android-arm64": "4.55.1",
+        "@rollup/rollup-darwin-arm64": "4.55.1",
+        "@rollup/rollup-darwin-x64": "4.55.1",
+        "@rollup/rollup-freebsd-arm64": "4.55.1",
+        "@rollup/rollup-freebsd-x64": "4.55.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.55.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.55.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.55.1",
+        "@rollup/rollup-linux-arm64-musl": "4.55.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.55.1",
+        "@rollup/rollup-linux-loong64-musl": "4.55.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.55.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.55.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.55.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.55.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.55.1",
+        "@rollup/rollup-linux-x64-gnu": "4.55.1",
+        "@rollup/rollup-linux-x64-musl": "4.55.1",
+        "@rollup/rollup-openbsd-x64": "4.55.1",
+        "@rollup/rollup-openharmony-arm64": "4.55.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.55.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.55.1",
+        "@rollup/rollup-win32-x64-gnu": "4.55.1",
+        "@rollup/rollup-win32-x64-msvc": "4.55.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -5087,9 +5153,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.97.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.1.tgz",
-      "integrity": "sha512-uf6HoO8fy6ClsrShvMgaKUn14f2EHQLQRtpsZZLeU/Mv0Q1K5P0+x2uvH6Cub39TVVbWNSrraUhDAoFph6vh0A==",
+      "version": "1.97.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.2.tgz",
+      "integrity": "sha512-y5LWb0IlbO4e97Zr7c3mlpabcbBtS+ieiZ9iwDooShpFKWXf62zz5pEPdwrLYm+Bxn1fnbwFGzHuCLSA9tBmrw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5508,9 +5574,9 @@
       }
     },
     "node_modules/stylelint-scss/node_modules/mdn-data": {
-      "version": "2.25.0",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.25.0.tgz",
-      "integrity": "sha512-T2LPsjgUE/tgMmRXREVmwsux89DwWfNjiynOeXuLd2mX6jphGQ2YE3Ukz7LQ2VOFKiVZU/Ee1GqzHiipZCjymw==",
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.26.0.tgz",
+      "integrity": "sha512-ZqI0qjKWHMPcGUfLmlr80NPNVHIOjPMHtIOe1qXYFGS0YBZ1YKAzo9yk8W+gGrLCN0Xdv/RKxqdIsqPakEfmow==",
       "dev": true,
       "license": "CC0-1.0"
     },
@@ -5696,37 +5762,6 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-    "node_modules/tinyglobby/node_modules/fdir": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
-      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "devOptional": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
-        "picomatch": "^3 || ^4"
-      },
-      "peerDependenciesMeta": {
-        "picomatch": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/tinyglobby/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "devOptional": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5787,16 +5822,16 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.51.0.tgz",
-      "integrity": "sha512-jh8ZuM5oEh2PSdyQG9YAEM1TCGuWenLSuSUhf/irbVUNW9O5FhbFVONviN2TgMTBnUmyHv7E56rYnfLZK6TkiA==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.52.0.tgz",
+      "integrity": "sha512-atlQQJ2YkO4pfTVQmQ+wvYQwexPDOIgo+RaVcD7gHgzy/IQA+XTyuxNM9M9TVXvttkF7koBHmcwisKdOAf2EcA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.51.0",
-        "@typescript-eslint/parser": "8.51.0",
-        "@typescript-eslint/typescript-estree": "8.51.0",
-        "@typescript-eslint/utils": "8.51.0"
+        "@typescript-eslint/eslint-plugin": "8.52.0",
+        "@typescript-eslint/parser": "8.52.0",
+        "@typescript-eslint/typescript-estree": "8.52.0",
+        "@typescript-eslint/utils": "8.52.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -5811,9 +5846,9 @@
       }
     },
     "node_modules/ufo": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
-      "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.2.tgz",
+      "integrity": "sha512-heMioaxBcG9+Znsda5Q8sQbWnLJSl98AFDXTO80wELWEzX3hordXsTdxrIfMQoO9IY1MEnoGoPjpoKpMj+Yx0Q==",
       "license": "MIT",
       "optional": true
     },
@@ -5863,19 +5898,6 @@
         "node": ">=18.12.0"
       }
     },
-    "node_modules/unplugin/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/untyped": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/untyped/-/untyped-2.0.0.tgz",
@@ -5911,9 +5933,9 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
-      "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
+      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6042,6 +6064,19 @@
         "node": ">= 6"
       }
     },
+    "node_modules/vite-plugin-static-copy/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/vite-plugin-static-copy/node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -6055,37 +6090,6 @@
         "node": ">=8.10.0"
       }
     },
-    "node_modules/vite/node_modules/fdir": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
-      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
-        "picomatch": "^3 || ^4"
-      },
-      "peerDependenciesMeta": {
-        "picomatch": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/vite/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/vscode-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
@@ -6151,6 +6155,24 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/vue-eslint-parser/node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.6.4",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
@@ -6182,14 +6204,14 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.2.1.tgz",
-      "integrity": "sha512-I23Rk8dkQfmcSbxDO0dmg9ioMLjKA1pjlU3Lz6Jfk2pMGu3Uryu9810XkcZH24IzPbhzPCnkKo2rEMRX0skSrw==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.2.2.tgz",
+      "integrity": "sha512-r9YSia/VgGwmbbfC06hDdAatH634XJ9nVl6Zrnz1iK4ucp8Wu78kawplXnIDa3MSu1XdQQePTHLXYwPDWn+nyQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@volar/typescript": "2.4.27",
-        "@vue/language-core": "3.2.1"
+        "@vue/language-core": "3.2.2"
       },
       "bin": {
         "vue-tsc": "bin/vue-tsc.js"
diff --git a/package.json b/package.json
index e7a5b355..29da68d5 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "flag-icons": "^7.5.0",
     "form-urlencoded": "^6.1.6",
     "ky": "^1.14.2",
-    "oxlint": "^1.36.0",
+    "oxlint": "^1.38.0",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
     "pkce-challenge": "^5.0.1",
@@ -31,31 +31,31 @@
     "@rushstack/eslint-patch": "^1.15.0",
     "@stylistic/eslint-plugin": "^5.7.0",
     "@types/dompurify": "^3.2.0",
-    "@types/node": "^25.0.3",
-    "@typescript-eslint/eslint-plugin": "^8.51.0",
-    "@typescript-eslint/parser": "^8.51.0",
+    "@types/node": "^25.0.6",
+    "@typescript-eslint/eslint-plugin": "^8.52.0",
+    "@typescript-eslint/parser": "^8.52.0",
     "@vitejs/plugin-vue": "^6.0.3",
     "@vue/compiler-sfc": "^3.5.26",
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vueuse/core": "latest",
     "eslint": "^9.39.2",
-    "eslint-plugin-perfectionist": "^5.2.0",
+    "eslint-plugin-perfectionist": "^5.3.1",
     "eslint-plugin-vue": "^10.6.2",
     "globals": "^17.0.0",
     "normalize.css": "^8.0.1",
     "postcss": "^8.5.6",
     "postcss-html": "^1.8.0",
-    "sass": "^1.97.1",
+    "sass": "^1.97.2",
     "stylelint": "^16.26.1",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-standard-scss": "^16.0.0",
     "stylelint-order": "^7.0.1",
     "stylelint-scss": "^6.14.0",
     "typescript": "5.9.3",
-    "vite": "^7.3.0",
+    "vite": "^7.3.1",
     "vite-plugin-static-copy": "^3.1.4",
     "vue-eslint-parser": "^10.2.0",
-    "vue-tsc": "^3.2.1"
+    "vue-tsc": "^3.2.2"
   },
   "optionalDependencies": {
     "@esbuild/linux-x64": "^0.27.2"
diff --git a/src/App.vue b/src/App.vue
index 86e2254f..38039633 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,10 +16,9 @@
     <Player key="player" />
     <PlayerSlideUp />
     <Notification />
-
     <Frame />
     <MinimizedWindows />
-  </template>
+</template>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/main.ts b/src/main.ts
index 476ecd5d..5cab4c99 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -95,10 +95,9 @@ handleSpotifySDKErrors();
 // Check if we're on the auth callback page
 // Handle both /auth and /auth/ (with or without trailing slash)
 const isAuthCallback
-
   = window.location.pathname === RouteName.Auth
-  || window.location.pathname === RouteName.Auth.replace(/\/$/, "")
-  || window.location.pathname.startsWith("/auth");
+    || window.location.pathname === RouteName.Auth.replace(/\/$/, "")
+    || window.location.pathname.startsWith("/auth");
 
 if (isAuthCallback) {
   // If we're on the auth page, just mount the app without trying to refresh