converting more components to setup composition api

frontend/locales/en-US.json

@@ -333,7 +333,9 @@
       "dateCreated": "Date created",
       "description": "Add and revoke API keys for external access to your server",
       "refreshKeysFailure": "Error refreshing API keys",
+      "revoke": "Revoke",
       "revokeAll": "Revoke all API keys",
+      "revokeConfirm": "Confirm API key revocation",
       "revokeAllFailure": "Error revoking all API keys",
       "revokeAllSuccess": "Successfully revoked all API keys",
       "revokeFailure": "Error revoking API key",
@@ -344,6 +346,7 @@
       "appVersion": "App version",
       "delete": "Delete",
       "deleteAll": "Delete all",
+      "deleteConfirm": "Confirm device deletion",
       "deleteAllDevicesError": "Error deleting all devices",
       "deleteAllDevicesSuccess": "All devices deleted successfully",
       "deleteDeviceError": "Error deleting device",

frontend/src/components/Buttons/FilterButton.vue

@@ -205,7 +205,7 @@ const isMovieOrTvShow = computed(
     props.item.CollectionType === 'tvshows'
 );
 
-const statusFilters = computed((): { label: string; name: ItemFilter }[] => [
+const statusFilters = computed<{ label: string; name: ItemFilter }[]>(() => [
   {
     label: t('played'),
     name: ItemFilter.IsPlayed

frontend/src/components/Buttons/Playback/PlayButton.vue

@@ -48,12 +48,20 @@ const props = withDefaults(
     iconOnly?: boolean;
     fab?: boolean;
     shuffle?: boolean;
-    videoTrackIndex: number;
-    audioTrackIndex: number;
-    subtitleTrackIndex: number;
+    videoTrackIndex?: number;
+    audioTrackIndex?: number;
+    subtitleTrackIndex?: number;
     disabled?: boolean;
   }>(),
-  { iconOnly: false, fab: false, shuffle: false, disabled: false }
+  {
+    iconOnly: false,
+    fab: false,
+    shuffle: false,
+    disabled: false,
+    videoTrackIndex: undefined,
+    audioTrackIndex: undefined,
+    subtitleTrackIndex: undefined
+  }
 );
 
 const playbackManager = playbackManagerStore();

frontend/src/components/Buttons/TypeButton.vue

@@ -48,7 +48,7 @@ const { t } = useI18n();
 
 const model = ref<BaseItemKind[]>([]);
 
-const items = computed((): { title: string; value: BaseItemKind }[] => {
+const items = computed<{ title: string; value: BaseItemKind }[]>(() => {
   switch (props.type) {
     case 'movies': {
       return [

frontend/src/components/Item/CollectionTabs.vue

@@ -1,21 +1,24 @@
 <template>
-  <div v-if="!!children">
+  <div v-if="children">
     <v-tabs v-model="currentTab" class="mb-3" bg-color="transparent">
-      <v-tab v-for="(items, type) in children" :key="type">
-        {{ type }} ({{ items.length }})
+      <v-tab v-for="(baseItems, type) in children" :key="type" :value="type">
+        {{ type }} ({{ baseItems.length }})
       </v-tab>
     </v-tabs>
     <h1 v-if="!children && !loading" class="text-h5 text-center">
       {{ $t('collectionEmpty') }}
     </h1>
-    <v-tabs v-model="currentTab" class="bg-transparent">
-      <v-tab v-for="(items, type) in children" :key="type">
+    <v-window v-model="currentTab" class="bg-transparent">
+      <v-window-item
+        v-for="(baseItems, type) in children"
+        :key="type"
+        :value="type">
         <v-container>
           <skeleton-item-grid v-if="loading" :view-type="item.Type" />
-          <item-grid :loading="loading" :items="items" />
+          <item-grid :loading="loading" :items="baseItems" />
         </v-container>
-      </v-tab>
-    </v-tabs>
+      </v-window-item>
+    </v-window>
   </div>
 </template>
 
@@ -40,11 +43,16 @@ const children = computed(() => {
 watch(
   () => props.item,
   async (item) => {
-    if (!children.value) {
-      loading.value = true;
-      await items.fetchAndAddCollection(item.Id);
-      loading.value = false;
+    /**
+     * Only try to load children if there aren't any children items in the itemStore yet
+     */
+    if (children.value) {
+      return;
     }
+
+    loading.value = true;
+    await items.fetchAndAddCollection(item.Id);
+    loading.value = false;
   },
   { immediate: true }
 );

frontend/src/components/Item/ItemMenu.vue

@@ -33,7 +33,7 @@
       </v-list>
     </v-menu>
     <metadata-editor-dialog
-      v-if="metadataDialog"
+      v-if="item.Id"
       v-model:dialog="metadataDialog"
       :item-id="item.Id" />
   </div>