upgrade all packages to latest, run prettier

package.json

@@ -35,7 +35,7 @@
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
     "@tailwindcss/typography": "^0.5.9",
-    "@tsconfig/node18": "^2.0.1",
+    "@tsconfig/node18": "^18.2.0",
     "@types/axios": "^0.14.0",
     "@types/d3": "^7.4.0",
     "@types/node": "^20.1.5",
@@ -49,11 +49,11 @@
     "eslint-plugin-vue": "^9.11.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.23",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "sass": "^1.62.1",
     "tailwindcss": "^3.3.2",
-    "typescript": "~5.0.4",
+    "typescript": "~5.1.6",
     "vite": "^4.3.9",
     "vite-plugin-compression": "^0.5.1",
     "vite-svg-loader": "^4.0.0",

src/assets/main.scss

@@ -27,7 +27,9 @@ body {
 
 .fade-y-enter-active,
 .fade-y-leave-active {
-  transition: opacity 0.3s, transform 0.5s;
+  transition:
+    opacity 0.3s,
+    transform 0.5s;
 }
 
 .v-toast--bottom {

src/components/modals/LightsModal.vue

@@ -135,7 +135,11 @@ function rgbToHex(color: number[]) {
             name="effect"
             label="Light Effect"
             v-model="lights.effectID"
-            @input="(_x: any, node: FormKitNode) => { lights.effectID = node.value as number }"
+            @input="
+              (_x: any, node: FormKitNode) => {
+                lights.effectID = node.value as number
+              }
+            "
             :options="effects"
           />
         </div>

src/components/modals/PlaylistModal.vue

@@ -189,7 +189,7 @@ const emit = defineEmits<{
           ghost-class="!bg-gray-600"
           item-key="uuid"
         >
-          <template #item="{ element: pattern, index }: { element: Pattern, index: number }">
+          <template #item="{ element: pattern, index }: { element: Pattern; index: number }">
             <div
               class="rounded-lg py-2 px-5 w-full bg-gray-700 flex justify-between items-center"
               :class="{ 'animate-wiggle': isEditing }"

src/views/PatternsView.vue

@@ -137,7 +137,7 @@ const sortModalOptions = [
           :pageSize="10"
           class="grid xl:grid-cols-5 lg:grid-cols-4 md:grid-cols-3 grid-cols-2 gap-6"
         >
-          <template v-slot:default="{ item, style }: { item: Pattern, style: StyleValue }">
+          <template v-slot:default="{ item, style }: { item: Pattern; style: StyleValue }">
             <PatternGridItem :item="item" :style="style" @click="showPatternModal(item)" />
           </template>
           <template v-slot:placeholder="{ style }: { style: StyleValue }">

src/views/PlaylistsView.vue

@@ -143,7 +143,7 @@ const sortModalOptions = [
           :pageSize="2"
           class="grid xl:grid-cols-5 lg:grid-cols-4 md:grid-cols-3 grid-cols-2 gap-6"
         >
-          <template v-slot:default="{ item, style }: { item: Playlist, style: StyleValue }">
+          <template v-slot:default="{ item, style }: { item: Playlist; style: StyleValue }">
             <PlaylistGridItem :item="item" :style="style" @click="showPlaylistModal(item)" />
           </template>
           <template v-slot:placeholder="{ style }: { style: StyleValue }">