fix: remaining type errors

Locales are fully typed now. Keep track of intlify/vue-i18n#1116 for better TS support for them

The rest of them are waiting for PRs at Vuetify's side and an SDK upgrade

Author: ferferga

frontend/src/components/Item/Metadata/ImageEditor.vue

@@ -7,8 +7,7 @@
       xl="1"
       lg="3"
       md="4"
-      sm="6"
-      xs="12">
+      sm="6">
       <v-card class="ma-2" variant="outlined">
         <v-img
           :src="imageFormat(item)"
@@ -42,8 +41,7 @@
       xl="1"
       lg="3"
       md="4"
-      sm="6"
-      xs="12">
+      sm="6">
       <v-card class="ma-2" variant="outlined">
         <v-img
           :src="imageFormat(item)"

frontend/src/components/Item/Metadata/ImageSearch.vue

@@ -56,8 +56,7 @@
           xl="1"
           lg="3"
           md="4"
-          sm="6"
-          xs="12">
+          sm="6">
           <v-card class="ma-2">
             <v-img
               v-if="item.Url"

frontend/src/components/Layout/AppBar/Buttons/UserButton.vue

@@ -3,7 +3,7 @@
     <template #icon>
       <user-image :user="auth.currentUser" :size="40" rounded />
       <v-menu location="bottom">
-        <v-list class="min-list-width" dense>
+        <v-list class="min-list-width">
           <v-list-item>
             <template #prepend>
               <v-avatar>

frontend/src/components/Playback/UpNext.vue

@@ -13,13 +13,12 @@
         xl="3">
         <v-card class="pointer-events-all">
           <v-card-title class="text-h6">
-            <i18n path="dialog.upNext.nextItemPlayingIn" tag="span">
-              <template #time>
-                <span class="text-primary darken-2">
-                  {{ $tc('units.time.seconds', currentItemTimeLeft) }}
-                </span>
-              </template>
-            </i18n>
+            <span>
+              {{ $t('dialog.upNext.nextItemPlayingIn') }}
+              <span class="text-primary darken-2">
+                {{ $tc('units.time.seconds', currentItemTimeLeft) }}
+              </span>
+            </span>
           </v-card-title>
           <v-card-subtitle class="text-truncate text-subtitle-1">
             <span v-if="playbackManager.currentItem.Type === 'Episode'">

frontend/src/plugins/i18n.ts

@@ -1,4 +1,4 @@
-import { createI18n } from 'vue-i18n';
+import { createI18n, I18nOptions } from 'vue-i18n';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import messages from '@intlify/unplugin-vue-i18n/messages';
 
@@ -68,7 +68,7 @@ const i18n = createI18n({
   fallbackLocale: DEFAULT_LANGUAGE,
   globalInjection: true,
   legacy: false,
-  messages
+  messages: messages as I18nOptions['messages']
 });
 
 // `localeNames` is readonly but this is the one place it should actually be set

frontend/src/plugins/remote/index.ts

@@ -32,7 +32,9 @@ export default function createRemote(): {
 } {
   return {
     install: async (app: App): Promise<void> => {
-      app.config.globalProperties.$remote = remoteInstance;
+      // `remote` is readonly but this is the one place it should actually be set
+      (app.config.globalProperties.$remote as typeof remoteInstance) =
+        remoteInstance;
 
       const auth = remoteInstance.auth;
       const config = await getJSONConfig();

frontend/types/global/plugins.d.ts

@@ -3,6 +3,7 @@ import 'vue-router';
 import { RemotePlugin } from '@/plugins/remote/types';
 // eslint-disable-next-line no-restricted-imports
 import { languageMap } from '@/plugins/i18n';
+import enUS from '@/../locales/en-US.json';
 import 'vue-i18n';
 
 /**
@@ -40,6 +41,10 @@ declare module 'vue-i18n' {
      */
     readonly localeNames: typeof languageMap;
   }
+
+  type messages = typeof enUS;
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefineLocaleMessage extends messages {}
 }
 
 /**