@itsmrtr/bunkoshelf 1.8.1 → 1.9.0

package/dist/src/components/catalog/CatalogLibraryActions.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import clsx from "clsx";
 import { Loader2Icon, ScanSearchIcon, TrashIcon } from "lucide-react";
 import { useToast } from "@/components/ToastProvider";
+import { useAlertDialog } from "@/components/AlertDialogProvider";
 import { scanVolume } from "@/actions/scan-series";
 import { deleteVolume } from "@/actions/delete";
 import type { Dictionary } from "@/lib/types";
@@ -22,6 +23,7 @@ export default function CatalogLibraryActions({
 }: CatalogLibraryActionsProps) {
   const router = useRouter();
   const { addToast } = useToast()!;
+  const { confirm } = useAlertDialog()!;
   const [isScanning, setIsScanning] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
 
@@ -59,9 +61,12 @@ export default function CatalogLibraryActions({
   };
 
   const handleDelete = async () => {
-    const confirmed = confirm(
-      (intl.libraries.deleteSure as Record<string, string>).volume
-    );
+    const confirmed = await confirm({
+      title: (intl.libraries.deleteItem as Record<string, string>).volume,
+      description: (intl.libraries.deleteSure as Record<string, string>).volume,
+      destructive: true,
+      irreversible: true,
+    });
 
     if (!confirmed) return;
 

package/dist/src/components/catalog/CatalogRelationsTable.tsx

@@ -23,8 +23,9 @@ export default function CatalogRelationsTable({
               <tr className="font-bold uppercase bg-onix">
                 <th className="p-4 text-left rounded-l-md">{nameLabel}</th>
                 <th className="p-4 text-center">{intl.catalog.mangaColumn as string}</th>
-                <th className="p-4 text-center">{intl.catalog.othersColumn as string}</th>
+                <th className="p-4 text-center">{intl.catalog.comicColumn as string}</th>
                 <th className="p-4 text-center">{intl.catalog.booksColumn as string}</th>
+                <th className="p-4 text-center">{intl.catalog.othersColumn as string}</th>
                 <th className="p-4 text-center rounded-r-md">{intl.catalog.totalColumn as string}</th>
               </tr>
             </thead>
@@ -43,7 +44,7 @@ export default function CatalogRelationsTable({
                   </td>
                   <td className="p-4 text-center">
                     <div className="flex items-center justify-center">
-                      {item.hasOthers ? <CheckIcon size={18} /> : null}
+                      {item.hasComic ? <CheckIcon size={18} /> : null}
                     </div>
                   </td>
                   <td className="p-4 text-center">
@@ -51,6 +52,11 @@ export default function CatalogRelationsTable({
                       {item.hasBooks ? <CheckIcon size={18} /> : null}
                     </div>
                   </td>
+                  <td className="p-4 text-center">
+                    <div className="flex items-center justify-center">
+                      {item.hasOthers ? <CheckIcon size={18} /> : null}
+                    </div>
+                  </td>
                   <td className="p-4 text-center whitespace-nowrap">{item.total}</td>
                 </tr>
               ))}

package/dist/src/components/favorites/FavoritesNav.tsx

@@ -6,16 +6,23 @@ import clsx from "clsx";
 import MobileSecondaryNav from "@/components/ui/MobileSecondaryNav";
 import { getFavoritesNavLinks } from "@/lib/nav/favoritesNav";
 import type { Dictionary, Locale } from "@/lib/types";
+import type { FavoriteSectionCounts } from "@/lib/db/library";
 
 interface FavoritesNavProps {
   intl: Dictionary;
+  counts?: FavoriteSectionCounts;
 }
 
-export default function FavoritesNav({ intl }: FavoritesNavProps) {
+export default function FavoritesNav({ intl, counts }: FavoritesNavProps) {
   const params = useParams<{ lang: Locale }>();
   const pathname = usePathname();
   const currentLang = params.lang || "es";
-  const links = getFavoritesNavLinks({ intl, lang: currentLang, pathname });
+  const links = getFavoritesNavLinks({
+    intl,
+    lang: currentLang,
+    pathname,
+    counts: counts || { mangaSeries: 0, mangaVolumes: 0, comicSeries: 0, comicVolumes: 0, otherSeries: 0, otherVolumes: 0, books: 0 },
+  });
 
   return (
     <div className="mt-4 md:mt-16">

package/dist/src/components/library/manga/DeleteMangaItem.tsx

@@ -3,6 +3,7 @@
 import clsx from "clsx";
 import { TrashIcon } from "lucide-react";
 import { deleteSeries, deleteVolume } from "@/actions/delete";
+import { useAlertDialog } from "@/components/AlertDialogProvider";
 import type { LibrarySection } from "@/lib/librarySection";
 import type { Dictionary } from "@/lib/types";
 
@@ -20,15 +21,23 @@ export default function DeleteMangaItem({
   section = "manga",
 }: DeleteMangaItemProps) {
   const t = intl;
+  const { confirm } = useAlertDialog()!;
 
   async function handleDelete() {
     let err: unknown = null;
     try {
-      const confirmed = confirm(
-        type === "volume"
-          ? (t.libraries.deleteSure as Record<string, string>).volume
-          : (t.libraries.deleteSure as Record<string, string>).series
-      );
+      const confirmed = await confirm({
+        title:
+          type === "volume"
+            ? (t.libraries.deleteItem as Record<string, string>).volume
+            : (t.libraries.deleteItem as Record<string, string>).series,
+        description:
+          type === "volume"
+            ? (t.libraries.deleteSure as Record<string, string>).volume
+            : (t.libraries.deleteSure as Record<string, string>).series,
+        destructive: true,
+        irreversible: true,
+      });
       if (!confirmed) return;
 
       const result =

package/dist/src/components/library/manga/ReadingEntryForm.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, type FormEvent } from "react";
 import { PenLineIcon } from "lucide-react";
 import Modal from "@/components/ui/Modal";
+import { useAlertDialog } from "@/components/AlertDialogProvider";
 import {
   createReadingEntry,
   updateReadingEntry,
@@ -32,6 +33,7 @@ export default function ReadingEntryForm({
 }: ReadingEntryFormProps) {
   const [readAt, setReadAt] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const { confirm } = useAlertDialog()!;
 
   const isEdit = !!entry;
 
@@ -59,7 +61,12 @@ export default function ReadingEntryForm({
   };
 
   const handleDelete = async () => {
-    const confirmResult = window.confirm((intl.alerts?.confirmDelete as string) || "Are you sure?");
+    const confirmResult = await confirm({
+      title: intl.manga.deleteReadingEntry as string,
+      description: (intl.alerts?.confirmDelete as string) || "Are you sure?",
+      destructive: true,
+      irreversible: true,
+    });
     if (!confirmResult) return;
 
     setIsLoading(true);

package/dist/src/components/library/manga/VolumesContent.tsx

@@ -11,7 +11,7 @@ import ScanSeriesButton from "./ScanSeriesButton";
 import Separator from "@/components/ui/Separator";
 import Tabs from "@/components/ui/Tabs";
 import VolumeRating from "./VolumeRating";
-import type { LibrarySection } from "@/lib/librarySection";
+import { getOneshotLabel, type LibrarySection } from "@/lib/librarySection";
 import type { Locale, Dictionary, DictionarySection, Session } from "@/lib/types";
 
 interface ReadingEntry {
@@ -164,7 +164,7 @@ export default function VolumesContent({
             ) : null}
             {isOneshot && (
               <span className="text-xs uppercase bg-lilah border border-lilah rounded px-1.5">
-                Oneshot
+                {getOneshotLabel(section, intl.manga as DictionarySection)}
               </span>
             )}
           </p>

package/dist/src/components/library/manga/grid/SeriesIndexFav.tsx

@@ -35,10 +35,12 @@ export default async function SeriesIndexFav({
 }: SeriesIndexFavProps) {
   const user = await verifySession();
   if (!user) return null;
-  const heading =
-    section === "others"
+  const heading = section === "comic"
+    ? intl.favorites.ttSeriesComic
+    : section === "others"
       ? intl.favorites.ttSeriesOthers
       : intl.favorites.ttSeriesManga;
+  const emptyMessage = intl.misc.noSeriesFav;
 
   const favoriteSeriesIds = await listFavoriteSeriesIds(user.id);
 
@@ -46,7 +48,7 @@ export default async function SeriesIndexFav({
     return (
       <div className="flex flex-col items-center justify-center h-80 gap-4">
         <GhostIcon size={64} />
-        <h2>{intl.misc.noSeriesFav as string}</h2>
+        <h2>{emptyMessage as string}</h2>
       </div>
     );
   }
@@ -58,6 +60,15 @@ export default async function SeriesIndexFav({
     scope,
   });
 
+  if (favorites.total === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-80 gap-4">
+        <GhostIcon size={64} />
+        <h2>{emptyMessage as string}</h2>
+      </div>
+    );
+  }
+
   const entries = favorites.items.map((series) => {
     const sortedVolumes = sortByPaddedTitle(series.volumes);
 

package/dist/src/components/library/manga/grid/VolumesIndexFav.tsx

@@ -34,17 +34,23 @@ export default async function VolumesIndexFav({
 }: VolumesIndexFavProps) {
   const user = await verifySession();
   if (!user) return null;
-  const heading =
-    section === "others"
+  const heading = section === "comic"
+    ? intl.favorites.ttVolumesComic
+    : section === "others"
       ? intl.favorites.ttVolumesOthers
       : intl.favorites.ttVolumesManga;
+  const emptyMessage = section === "manga"
+    ? intl.misc.noVolumesFav
+    : section === "comic"
+      ? intl.misc.noComicsFav
+      : intl.misc.noWorksFav;
 
   const favoriteVolumeIds = await listFavoriteVolumeIds(user.id);
   if (favoriteVolumeIds.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center h-80 gap-4">
         <GhostIcon size={64} />
-        <h2>{intl.misc.noVolumesFav as string}</h2>
+        <h2>{emptyMessage as string}</h2>
       </div>
     );
   }
@@ -60,6 +66,15 @@ export default async function VolumesIndexFav({
     paginated.items.map((volume) => volume.id)
   );
 
+  if (paginated.total === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-80 gap-4">
+        <GhostIcon size={64} />
+        <h2>{emptyMessage as string}</h2>
+      </div>
+    );
+  }
+
   const entries = paginated.items.map((vol) => ({
     ...vol,
     isOneshot: vol.series?.isOneshot === true,

package/dist/src/components/mobNav/MobNav.tsx

@@ -1,6 +1,7 @@
 import MobNavButton from "./MobNavButton";
 import type { ChallengeData, Dictionary, Locale, Session } from "@/lib/types";
 import type { VersionInfo } from "@/lib/versionInfo";
+import type { LibrarySectionCounts } from "@/lib/db/library";
 
 interface MobNavProps {
   lang: Locale;
@@ -8,6 +9,7 @@ interface MobNavProps {
   user: Session | null;
   challengeData: ChallengeData | null;
   versionData: VersionInfo;
+  libraryCounts: LibrarySectionCounts;
 }
 
 export default function MobNav({
@@ -16,6 +18,7 @@ export default function MobNav({
   user,
   challengeData,
   versionData,
+  libraryCounts,
 }: MobNavProps) {
   return (
     <div className="fixed bottom-8 right-6 z-50 md:hidden">
@@ -25,6 +28,7 @@ export default function MobNav({
         user={user}
         challengeData={challengeData}
         versionData={versionData}
+        libraryCounts={libraryCounts}
       />
     </div>
   );

package/dist/src/components/mobNav/MobNavButton.tsx

@@ -7,6 +7,7 @@ import { MenuIcon, SearchIcon } from "lucide-react";
 import MobNavModal from "./MobNavModal";
 import type { Dictionary, Session, ChallengeData } from "@/lib/types";
 import type { VersionInfo } from "@/lib/versionInfo";
+import type { LibrarySectionCounts } from "@/lib/db/library";
 
 interface MobNavButtonProps {
   lang: string;
@@ -14,6 +15,7 @@ interface MobNavButtonProps {
   user: Session | null;
   challengeData: ChallengeData | null;
   versionData: VersionInfo;
+  libraryCounts: LibrarySectionCounts;
 }
 
 export default function MobNavButton({
@@ -22,6 +24,7 @@ export default function MobNavButton({
   user,
   challengeData,
   versionData,
+  libraryCounts,
 }: MobNavButtonProps) {
   const [open, setOpen] = useState(false);
   const pathname = usePathname();
@@ -58,6 +61,7 @@ export default function MobNavButton({
         user={user}
         challengeData={challengeData}
         versionData={versionData}
+        libraryCounts={libraryCounts}
       />
     </div>
   );

package/dist/src/components/mobNav/MobNavModal.tsx

@@ -9,6 +9,7 @@ import ChallengeProg from "@/components/sidebar/ChallengeProg";
 import FooterNav from "@/components/sidebar/FooterNav";
 import type { Dictionary, Session, ChallengeData } from "@/lib/types";
 import type { VersionInfo } from "@/lib/versionInfo";
+import type { LibrarySectionCounts } from "@/lib/db/library";
 
 interface MobNavModalProps {
   lang: string;
@@ -18,6 +19,7 @@ interface MobNavModalProps {
   user: Session | null;
   challengeData: ChallengeData | null;
   versionData: VersionInfo;
+  libraryCounts: LibrarySectionCounts;
 }
 
 export default function MobNavModal({
@@ -28,6 +30,7 @@ export default function MobNavModal({
   user,
   challengeData,
   versionData,
+  libraryCounts,
 }: MobNavModalProps) {
   const modalRef = useRef<HTMLDivElement>(null);
 
@@ -81,7 +84,7 @@ export default function MobNavModal({
 
         <div>
           {!user && <SecondNav intl={intl} />}
-          {user && <MainNav intl={intl} user={user} />}
+          {user && <MainNav intl={intl} user={user} libraryCounts={libraryCounts} />}
         </div>
 
         <div className="mt-8 mb-4">

package/dist/src/components/pwa/OfflineDownloadButton.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import { DownloadIcon, Trash2Icon } from "lucide-react";
 import clsx from "clsx";
+import { useAlertDialog } from "@/components/AlertDialogProvider";
 import {
   downloadSeriesBySlug,
   downloadVolumeBySlug,
@@ -40,6 +41,7 @@ export default function OfflineDownloadButton({ userId, section, slug, volumeId,
   const [seriesProgress, setSeriesProgress] = useState<{ completed: number; total: number } | null>(null);
   const [isOnline, setIsOnline] = useState(false);
   const offline = intl.offline as Record<string, string> | undefined;
+  const { alert, confirm } = useAlertDialog()!;
 
   useEffect(() => {
     const updateOnlineStatus = () => setIsOnline(navigator.onLine);
@@ -87,7 +89,10 @@ export default function OfflineDownloadButton({ userId, section, slug, volumeId,
     if (!userId) return;
     if (isReady) {
       const message = isSeries ? offline?.removeSeries : offline?.removeVolume;
-      if (!window.confirm(message || "¿Quieres eliminar esta descarga offline?")) return;
+      if (!await confirm({
+        title: isSeries ? offline?.removeSeriesTitle : offline?.removeVolumeTitle,
+        description: message || "¿Quieres eliminar esta descarga offline?",
+      })) return;
       if (isSeries && seriesId) await removeOfflineSeries(userId, seriesId);
       if (!isSeries && volumeId) await removeOfflineVolume(userId, volumeId);
       setSeriesProgress(null);
@@ -97,7 +102,10 @@ export default function OfflineDownloadButton({ userId, section, slug, volumeId,
     if (!navigator.onLine || isDownloading) return;
     try {
       if (isSeries && seriesId) {
-        if (!window.confirm(offline?.downloadSeries || "¿Quieres descargar todos los tomos de esta serie?")) return;
+        if (!await confirm({
+          title: offline?.downloadSeriesTitle,
+          description: offline?.downloadSeries || "¿Quieres descargar todos los tomos de esta serie?",
+        })) return;
         setSeriesProgress({ completed: 0, total: 1 });
         await downloadSeriesBySlug(userId, section, slug, (completed, total) => setSeriesProgress({ completed, total }));
       } else {
@@ -115,7 +123,10 @@ export default function OfflineDownloadButton({ userId, section, slug, volumeId,
       }
     } catch (error) {
       console.error("Offline download error:", error);
-      window.alert(offline?.downloadError || "No se pudo completar la descarga");
+      await alert({
+        title: offline?.downloadErrorTitle,
+        description: offline?.downloadError || "No se pudo completar la descarga",
+      });
       setSeriesProgress(null);
     }
   };

package/dist/src/components/pwa/OfflineGate.tsx

@@ -31,7 +31,7 @@ import SeriesRating from "@/components/library/manga/SeriesRating";
 import Separator from "@/components/ui/Separator";
 import Tabs from "@/components/ui/Tabs";
 import { LIBRARY_PAGE_SIZE } from "@/lib/libraryPagination";
-import { getLibraryScope, type LibrarySection } from "@/lib/librarySection";
+import { getLibraryScope, getOneshotLabel, type LibrarySection } from "@/lib/librarySection";
 import { getReadyVolumes, offlinePageUrl, type OfflineVolume } from "@/lib/client/offlineLibrary";
 import { ageRatingMap } from "@/lib/mangaMetadata";
 import type { Dictionary, Locale, Session } from "@/lib/types";
@@ -137,7 +137,7 @@ function VolumeDetail({ volume, lang, intl, userId, user }: { volume: OfflineVol
           <p className="mt-4 flex items-center gap-2">
             {meta.year ? meta.year as number : null}
             {meta.pageCount ? <>&bull; {meta.pageCount as number} {intl.manga.pages as string}</> : null}
-            {volume.isOneshot && <span className="text-xs uppercase bg-lilah border border-lilah rounded px-1.5">Oneshot</span>}
+            {volume.isOneshot && <span className="text-xs uppercase bg-lilah border border-lilah rounded px-1.5">{getOneshotLabel(volume.section, intl.manga)}</span>}
           </p>
           {meta.summary ? <><h2 className="text-sm mt-8 mb-1">{intl.manga.synopsis as string}</h2><MangaSummary meta={meta} intl={intl} /></> : null}
           <Tabs tabs={[{ label: intl.manga.details as string, content: <MetadataPanel meta={meta} lang={lang} intl={intl} section={volume.section} /> }]} />
@@ -248,7 +248,11 @@ function OfflineLibrary({ path, lang, intl, userId, user }: { path: string; lang
   useEffect(() => { const load = () => void getReadyVolumes(userId).then(setVolumes); load(); window.addEventListener("bunko:offline-change", load); return () => window.removeEventListener("bunko:offline-change", load); }, [userId]);
   if (!volumes) return null;
 
-  const section: LibrarySection = path.includes(`/${lang}/others`) || path.includes("/favorites/others") ? "others" : "manga";
+  const section: LibrarySection = path.includes(`/${lang}/comic`) || path.includes("/favorites/comic")
+    ? "comic"
+    : path.includes(`/${lang}/others`) || path.includes("/favorites/others")
+      ? "others"
+      : "manga";
   const favorites = path.includes(`/${lang}/favorites`);
   const scoped = volumes.filter((volume) => volume.section === section && (!favorites || volume.isFavorite));
   const volumeSlug = path.match(/\/volume\/([^/?]+)/)?.[1];

package/dist/src/components/search/SearchComp.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { searchManga } from "@/actions/search";
 import { getReadyVolumes } from "@/lib/client/offlineLibrary";
+import { getOneshotLabel } from "@/lib/librarySection";
 import { usePwa } from "@/components/pwa/PwaProvider";
 import type { Locale, Dictionary, SearchResult } from "@/lib/types";
 import {
@@ -211,7 +212,7 @@ export default function SearchComp({ lang, intl }: SearchCompProps) {
                           <p className="text-base truncate">
                             <span className="flex items-center">
                               <BookIcon size={16} className="mr-1" />
-                              Oneshot
+                              {getOneshotLabel(res.section, intl.manga)}
                             </span>
                             <span className="flex items-center capitalize">
                               {genres && (

package/dist/src/components/search/SearchModal.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { useSearchModal } from "@/hooks/useSearchModal";
 import Link from "next/link";
 import { searchManga } from "@/actions/search";
+import { getOneshotLabel } from "@/lib/librarySection";
 import type { Locale, Dictionary, SearchResult } from "@/lib/types";
 import {
   SearchIcon,
@@ -212,7 +213,7 @@ export default function SearchModal({ lang, intl }: SearchModalProps) {
                           <p className="text-base truncate">
                             <span className="flex items-center">
                               <BookIcon size={16} className="mr-1" />
-                              Oneshot
+                              {getOneshotLabel(res.section, intl.manga)}
                             </span>
                             <span className="flex items-center capitalize">
                               {genres && (

package/dist/src/components/settings/ClearLogsButton.tsx

@@ -2,14 +2,24 @@
 
 import { TrashIcon } from "lucide-react";
 import { clearLogs } from "@/actions/admin-logs";
+import { useAlertDialog } from "@/components/AlertDialogProvider";
+import type { Dictionary } from "@/lib/types";
 
 interface ClearLogsButtonProps {
+  intl: Dictionary;
   onClear?: () => void;
 }
 
-export default function ClearLogsButton({ onClear }: ClearLogsButtonProps) {
+export default function ClearLogsButton({ intl, onClear }: ClearLogsButtonProps) {
+  const { alert, confirm } = useAlertDialog()!;
+
   async function handleClick() {
-    const confirmed = confirm("¿Seguro que deseas limpiar el log?");
+    const confirmed = await confirm({
+      title: intl.alerts.clearLogsTitle as string,
+      description: intl.alerts.clearLogsDescription as string,
+      destructive: true,
+      irreversible: true,
+    });
     if (!confirmed) return;
 
     const result = await clearLogs();
@@ -21,7 +31,10 @@ export default function ClearLogsButton({ onClear }: ClearLogsButtonProps) {
         window.location.reload();
       }
     } else {
-      alert("No se pudo limpiar el log.");
+      await alert({
+        title: intl.alerts.clearLogsErrorTitle as string,
+        description: intl.alerts.clearLogsErrorDescription as string,
+      });
     }
   }
 

package/dist/src/components/settings/EditUserForm.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react";
 import { UserRoundPenIcon } from "lucide-react";
 import { useToast } from "@/components/ToastProvider";
+import { useAlertDialog } from "@/components/AlertDialogProvider";
 import { adminUpdateUser, deleteUser } from "@/actions/users";
 import type { Dictionary } from "@/lib/types";
 import type { Role } from "@/lib/types/auth";
@@ -40,6 +41,7 @@ export default function EditUserForm({
   const [error] = useState<string | null>(null);
 
   const { addToast } = useToast()!;
+  const { confirm } = useAlertDialog()!;
 
   const isSelf = user?.id === currentUserId;
 
@@ -91,7 +93,12 @@ export default function EditUserForm({
   };
 
   const handleDelete = async () => {
-    const confirmed = window.confirm(intl.alerts.confirmDelete as string);
+    const confirmed = await confirm({
+      title: intl.settings.deleteUser as string,
+      description: intl.alerts.confirmDelete as string,
+      destructive: true,
+      irreversible: true,
+    });
     if (!confirmed) return;
 
     const result = await deleteUser({ id: user!.id });

package/dist/src/components/settings/LibSettingsButtons.tsx

@@ -9,6 +9,7 @@ import {
   CloudCheckIcon,
 } from "lucide-react";
 import { useToast } from "@/components/ToastProvider";
+import { useAlertDialog } from "@/components/AlertDialogProvider";
 import useScanPolling from "@/hooks/useScanPolling";
 import Modal from "@/components/ui/Modal";
 import UploadMangaForm from "./UploadMangaForm";
@@ -46,6 +47,7 @@ export default function LibSettingsButtons({
   const [loadingAction, setLoadingAction] = useState<LoadingActionType>(null);
   const dbFileInputRef = useRef<HTMLInputElement>(null);
   const { addToast, updateToast } = useToast()!;
+  const { alert } = useAlertDialog()!;
   const { startPolling, loading } = useScanPolling({
     lang,
     intl: intl as unknown as Parameters<typeof useScanPolling>[0]["intl"],
@@ -199,7 +201,10 @@ export default function LibSettingsButtons({
       if (url) window.URL.revokeObjectURL(url);
       if (_err) {
         console.error(_err);
-        alert("Ocurrió un error al descargar la base de datos.");
+        await alert({
+          title: intl.settings.backupdb as string,
+          description: intl.settings.errorBackupDbDesc as string,
+        });
       }
     }
   };