Bump vuetify from 3.12.0 to 4.0.3 (#1363)

* Bump vuetify from 3.12.0 to 4.0.3

Bumps [vuetify](https://github.com/vuetifyjs/vuetify/tree/HEAD/packages/vuetify) from 3.12.0 to 4.0.3.
- [Release notes](https://github.com/vuetifyjs/vuetify/releases)
- [Commits](https://github.com/vuetifyjs/vuetify/commits/v4.0.3/packages/vuetify)

---
updated-dependencies:
- dependency-name: vuetify
  dependency-version: 4.0.3
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* Update yarn.nix

* Follow migration guide

* Fix some ugly layouts

* Fix type errors

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Charlotte Van Petegem <charlotte@vanpetegem.be>

Author: dependabot[bot]

package.json

@@ -26,7 +26,7 @@
     "vue-i18n": "^11.3.0",
     "vue-router": "^5.0.4",
     "vuedraggable": "^4.1.0",
-    "vuetify": "^3.12.0"
+    "vuetify": "^4.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",

scss/settings.scss

@@ -1,4 +1,4 @@
 @use "vuetify/settings" with (
   $button-text-letter-spacing: 0,
   $list-item-icon-opacity: 1,
-);
+);

src/Root.vue

@@ -17,9 +17,20 @@ useHead({ title: "Main" });
 
 <style lang="scss">
 // Additional resets
-a {
-  text-decoration: none;
-  color: rgb(var(--v-theme-primary));
+@layer vuetify-core.reset {
+  a {
+    text-decoration: none;
+    color: rgb(var(--v-theme-primary));
+  }
+
+  ul,
+  ol,
+  figure,
+  details,
+  summary {
+    padding: 0;
+    margin: 0;
+  }
 }
 
 // Additional utility classes

src/components/AddToPlaylist.vue

@@ -14,7 +14,7 @@
     </template>
     <VCard>
       <VCardTitle>
-        <span class="text-h5">
+        <span class="text-headline-medium">
           {{ I18n.t("music.playlist.add-item", { obj: cardTitleName }) }}
         </span>
       </VCardTitle>
@@ -33,10 +33,10 @@
               >
                 <template #item="{ item: innerItem, props: listItemProps }">
                   <VListItem
-                    :disabled="innerItem.raw.disabled"
+                    :disabled="innerItem.disabled"
                     v-bind="listItemProps"
                   >
-                    <template v-if="innerItem.raw.disabled" #append>
+                    <template v-if="innerItem.disabled" #append>
                       ({{ I18n.t("music.playlist.item-already-present") }})
                     </template>
                   </VListItem>

src/components/AlbumForm.vue

@@ -122,7 +122,7 @@
           :key="`artist-${index}`"
           no-gutters
         >
-          <VCol class="flex-column flex-grow-0">
+          <VCol class="flex-grow-0">
             <VBtn
               icon
               size="small"
@@ -153,7 +153,7 @@
               <VIcon size="x-large">mdi-close</VIcon>
             </VBtn>
           </VCol>
-          <VCol class="flex-column">
+          <VCol>
             <VCombobox
               v-model="item.artist_id"
               :items="sortedArtists"
@@ -186,7 +186,7 @@
           >
             <VIcon size="x-large">mdi-close</VIcon>
           </VBtn>
-          <VCol class="flex-column">
+          <VCol>
             <VCombobox
               v-model="item.label_id"
               :items="sortedLabels"

src/components/AlbumMergeDialog.vue

@@ -11,7 +11,7 @@
     </template>
     <VCard>
       <VCardTitle>
-        <span class="text-h5">
+        <span class="text-headline-medium">
           {{ I18n.t("music.album.merge-into", { obj: album.title }) }}
         </span>
       </VCardTitle>
@@ -31,7 +31,7 @@
                   <VListItem v-bind="listItemProps">
                     <template #append>
                       <span class="text-grey pl-2 text-body-2">
-                        {{ item.value }}
+                        {{ item.id }}
                       </span>
                     </template>
                   </VListItem>

src/components/ArtistMergeDialog.vue

@@ -20,7 +20,7 @@
     </template>
     <VCard>
       <VCardTitle>
-        <span class="text-h5">
+        <span class="text-headline-medium">
           {{ I18n.t("music.artist.merge-into", { obj: artist.name }) }}
         </span>
       </VCardTitle>
@@ -41,7 +41,7 @@
                   <VListItem v-bind="listItemProps">
                     <template #append>
                       <span class="text-grey pl-2 text-body-2">
-                        {{ item.value }}
+                        {{ item.id }}
                       </span>
                     </template>
                   </VListItem>

src/components/CodecForm.vue

@@ -5,7 +5,7 @@
         <VTextField
           v-model="newCodec.extension"
           :label="I18n.t('library.extension')"
-          :disabled="codec !== null"
+          :disabled="!!codec"
           required
           :rules="rules.ext"
         />

src/components/CoverFilenameForm.vue

@@ -5,7 +5,7 @@
         <VTextField
           v-model="newCoverFilename.filename"
           :label="I18n.t('library.filename')"
-          :disabled="coverFilename !== null"
+          :disabled="!!coverFilename"
           required
           :rules="[
             (v) => !!v || I18n.t('errors.cover_filename.filename-blank'),

src/components/EditReviewComment.vue

@@ -9,7 +9,7 @@
     <VIcon size="x-large">mdi-flag</VIcon>
     <VDialog v-model="show" max-width="600px">
       <VCard>
-        <VCardTitle class="text-h5">
+        <VCardTitle class="text-headline-medium">
           {{ I18n.t("music.flag.for-review") }}
         </VCardTitle>
         <VCardText>