Fix useFetch misuse (use $fetch instead)

website/app/components/AddLibraryModal.vue

@@ -17,6 +17,7 @@
 <script setup lang="ts">
 import type { components } from '#open-fetch-schemas/api';
 type CreateLibraryRecord = components['schemas']['CreateLibraryRecord'];
+const { $api } = useNuxtApp();
 
 const name = ref('');
 const path = ref('');
@@ -29,8 +30,8 @@ const busy = ref(false);
 const onAddClick = async () => {
     if (!model.value) return;
     busy.value = true;
-    await useApi('/v2/FileLibrary', { method: 'PUT', body: model.value })
+    await $api('/v2/FileLibrary', { method: 'PUT', body: model.value });
-        .then(() => refreshNuxtData(FetchKeys.FileLibraries))
+    await refreshNuxtData(FetchKeys.FileLibraries);
-        .finally(() => (busy.value = false));
+    busy.value = false;
 };
 </script>

website/app/components/FileLibraries.vue

@@ -16,12 +16,14 @@
 <script setup lang="ts">
 import type { components } from '#open-fetch-schemas/api';
 type FileLibrary = components['schemas']['FileLibrary'];
+const { $api } = useNuxtApp();
+
 const { data: fileLibraries } = await useApi('/v2/FileLibrary', { key: FetchKeys.FileLibraries });
 
 const busy = ref(false);
 const deleteLibrary = async (library: FileLibrary) => {
     busy.value = true;
-    await useApi('/v2/FileLibrary/{FileLibraryId}', { path: { FileLibraryId: library.key }, method: 'DELETE' });
+    await $api('/v2/FileLibrary/{FileLibraryId}', { path: { FileLibraryId: library.key }, method: 'DELETE' });
     await refreshNuxtData(FetchKeys.FileLibraries);
     busy.value = false;
 };

website/app/components/LibrarySelect.vue

@@ -24,6 +24,8 @@
 </template>
 
 <script setup lang="ts">
+const { $api } = useNuxtApp();
+
 export interface LibrarySelectProps {
     mangaId: string;
     libraryId?: string;
@@ -38,7 +40,7 @@ const loading = ref(false);
 const onLibrarySelectChange = async () => {
     if (!library.value) return;
     loading.value = true;
-    await useApi('/v2/Manga/{MangaId}/ChangeLibrary/{LibraryId}', {
+    await $api('/v2/Manga/{MangaId}/ChangeLibrary/{LibraryId}', {
         method: 'POST',
         path: { MangaId: props.mangaId, LibraryId: library.value },
     });

website/app/pages/manga/[mangaId]/download/[mangaConnectorName].vue

@@ -20,6 +20,7 @@
 const route = useRoute();
 const mangaId = route.params.mangaId as string;
 const mangaConnectorName = route.params.mangaConnectorName as string;
+const { $api } = useNuxtApp();
 
 const { data: manga } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Manga.Id(mangaId) });
 const libraryId = ref(manga.value?.fileLibraryId);
@@ -31,7 +32,7 @@ const { data: mangaConnector } = await useApi('/v2/MangaConnector/{MangaConnecto
 const loading = ref(false);
 const onDownloadClick = async () => {
     loading.value = true;
-    await useApi('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', {
+    await $api('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', {
         method: 'PATCH',
         path: { MangaId: mangaId, MangaConnectorName: mangaConnectorName, IsRequested: true },
     });

website/app/pages/manga/[mangaId]/index.vue

@@ -21,6 +21,7 @@
                                 <UButton
                                     :icon="mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'"
                                     variant="ghost"
+                                    :disabled="!libraryId"
                                     @click="setRequestedFrom(mangaconnectorId.mangaConnectorName, !mangaconnectorId.useForDownload)" />
                             </UTooltip>
                         </div>
@@ -51,9 +52,9 @@
 
 <script setup lang="ts">
 import MangaDetailPage from '~/components/MangaDetailPage.vue';
-
 const route = useRoute();
 const mangaId = route.params.mangaId as string;
+const { $api } = useNuxtApp();
 
 const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
     path: { MangaId: mangaId },
@@ -70,7 +71,7 @@ const { data: metadataFetchers } = await useApi('/v2/MetadataFetcher', { key: Fe
 const { data: metadata } = await useApi('/v2/MetadataFetcher/Links/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Metadata.Manga(mangaId), lazy: true });
 
 const setRequestedFrom = async (MangaConnectorName: string, IsRequested: boolean) => {
-    await useApi('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', {
+    await $api('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', {
         method: 'PATCH',
         path: { MangaId: mangaId, MangaConnectorName: MangaConnectorName, IsRequested: IsRequested },
     });
@@ -78,7 +79,7 @@ const setRequestedFrom = async (MangaConnectorName: string, IsRequested: boolean
 };
 
 const unlinkMetadataFetcher = async (metadataFetcherName: string) => {
-    await useApi('/v2/MetadataFetcher/{MetadataFetcherName}/Unlink/{MangaId}', { method: 'POST', path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName } });
+    await $api('/v2/MetadataFetcher/{MetadataFetcherName}/Unlink/{MangaId}', { method: 'POST', path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName } });
     await refreshNuxtData(FetchKeys.Metadata.Manga(mangaId) );
 }
 

website/app/pages/manga/[mangaId]/linkMetadata/[metadataFetcherName].vue

@@ -17,10 +17,10 @@
 
 
 <script setup lang="ts">
-
 const route = useRoute();
 const mangaId = route.params.mangaId as string;
 const metadataFetcherName = route.params.metadataFetcherName as string;
+const { $api } = useNuxtApp();
 
 const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
     path: { MangaId: mangaId },
@@ -38,7 +38,7 @@ const { data: searchData, status } = await useApi('/v2/MetadataFetcher/{Metadata
 })
 
 const link = async (identifier: string) => {
-    await useApi('/v2/MetadataFetcher/{MetadataFetcherName}/Link/{MangaId}', { method: 'POST' ,path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName }, body: identifier });
+    await $api('/v2/MetadataFetcher/{MetadataFetcherName}/Link/{MangaId}', { method: 'POST' ,path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName }, body: identifier });
     await refreshNuxtData(FetchKeys.Metadata.Manga(mangaId) );
     navigateTo(`/manga/${mangaId}`);
 }

website/app/pages/manga/[mangaId]/merge/[targetId].vue

@@ -4,12 +4,12 @@
         <div class="flex flex-row justify-evenly items-center">
             <MangaCard v-if="manga" :manga="manga" :expanded="true" />
             <USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
-            <UIcon name="i-lucide-merge" class="rotate-90 px-20" size="50" />
+            <UButton icon="i-lucide-merge" :class="[reverse ? 'rotate-270' : 'rotate-90', 'px-20 transition-transform duration-200 p-5 m-10']" size="xl" variant="ghost" color="neutral" @click="reverse = !reverse" />
             <MangaCard v-if="target" :manga="target" :expanded="true" />
             <USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
         </div>
         <p class="text-warning">This action is irreversible!</p>
-        <UButton color="warning" class="w-fit">Merge</UButton>
+        <UButton color="warning" class="w-fit" @click="merge">Merge</UButton>
     </UPageBody>
 </template>
 
@@ -17,9 +17,18 @@
 const route = useRoute();
 const targetId = route.params.targetId as string;
 const mangaId = route.params.mangaId as string;
+const { $api } = useNuxtApp();
 
+const reverse = ref(false);
 const { data: target } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: targetId }, key: FetchKeys.Manga.Id(targetId) });
 const { data: manga } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Manga.Id(mangaId) });
 
+const merge = async () => {
+    const from = reverse.value ? mangaId : targetId;
+    const to = reverse.value == false ? targetId : mangaId;
+    await $api('/v2/Manga/{MangaIdFrom}/MergeInto/{MangaIdInto}', { method: 'POST', path: { MangaIdFrom: from, MangaIdInto: to } });
+    navigateTo(`/manga/${to}`);
+}
+
 useHead({ title: `Merge ${manga.value?.name} with ${target.value?.name}` });
 </script>

website/app/pages/manga/[mangaId]/merge/index.vue

@@ -5,7 +5,8 @@
             ><USkeleton v-else as="span" class="w-60 h-lh" /> with</UPageHeader
         >
         <UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
-            <NuxtLink v-for="m in mangas" :key="m.key" :to="m.key">
+            <USkeleton v-if="!mangas" class="w-full h-[350px]" />
+            <NuxtLink v-for="m in mangas.filter(m => m.key != mangaId)" v-else :key="m.key" :to="m.key">
                 <MangaCard :manga="m" />
             </NuxtLink>
         </UPageBody>