Include actual error in snackbar

src/modules/core/components/UpdateChecker.tsx

@@ -25,6 +25,7 @@ import { dateTimeFormatter } from '@/util/DateHelper.ts';
 import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
 
 import { CategoryIdInfo } from '@/modules/category/Category.types.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 
 const calcProgress = (status: UpdaterSubscription['updateStatusChanged'] | undefined) => {
     if (!status) {
@@ -93,7 +94,7 @@ export function UpdateChecker({
             reFetchLastTimestamp().catch(defaultPromiseErrorHandler('UpdateChecker::reFetchLastTimestamp'));
         } catch (e) {
             lastRunningState = false;
-            makeToast(t('global.error.label.update_failed'), 'error');
+            makeToast(t('global.error.label.update_failed'), 'error', getErrorMessage(e));
         }
     };
 
@@ -101,7 +102,7 @@ export function UpdateChecker({
         try {
             await requestManager.resetGlobalUpdate();
         } catch (e) {
-            makeToast(t('library.error.label.stop_global_update'), 'error');
+            makeToast(t('library.error.label.stop_global_update'), 'error', getErrorMessage(e));
         }
     };
 

src/modules/core/components/snackbar/SnackbarWithDescription.tsx

@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { CustomContentProps, SnackbarContent, VariantType } from 'notistack';
+import { ForwardedRef, forwardRef, memo } from 'react';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import Button from '@mui/material/Button';
+import { useTranslation } from 'react-i18next';
+import { awaitConfirmation } from '@/modules/core/utils/AwaitableDialog.tsx';
+import { TranslationKey } from '@/Base.types.ts';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+
+const MAX_DESCRIPTION_LENGTH = 255;
+
+const SNACKBAR_VARIANT_TO_TRANSLATION_KEY: Record<VariantType, TranslationKey> = {
+    default: 'global.label.info',
+    info: 'global.label.info',
+    success: 'global.label.success',
+    warning: 'global.label.warning',
+    error: 'global.label.error',
+};
+
+export const SnackbarWithDescription = memo(
+    forwardRef(
+        (
+            {
+                id,
+                message,
+                description,
+                variant,
+                action,
+            }: CustomContentProps & {
+                // eslint-disable-next-line react/no-unused-prop-types
+                description?: string;
+            },
+            ref: ForwardedRef<HTMLDivElement>,
+        ) => {
+            const { t } = useTranslation();
+
+            const severity = variant === 'default' ? undefined : variant;
+            const finalAction = typeof action === 'function' ? action(id) : action;
+
+            const isDescriptionTooLong = (description?.length ?? 0) > MAX_DESCRIPTION_LENGTH;
+            const actualDescription = isDescriptionTooLong
+                ? description?.slice(0, MAX_DESCRIPTION_LENGTH)
+                : description;
+
+            return (
+                <SnackbarContent ref={ref}>
+                    <Alert severity={severity} action={finalAction}>
+                        <AlertTitle>{message}</AlertTitle>
+                        {actualDescription}{' '}
+                        {isDescriptionTooLong ? (
+                            <Button
+                                onClick={() => {
+                                    awaitConfirmation({
+                                        title:
+                                            typeof message === 'string'
+                                                ? message
+                                                : t(SNACKBAR_VARIANT_TO_TRANSLATION_KEY[variant]),
+                                        message: description ?? '',
+                                        actions: {
+                                            cancel: { show: false },
+                                            confirm: { title: t('global.label.close') },
+                                        },
+                                    }).catch(
+                                        defaultPromiseErrorHandler(
+                                            `SnackbarWidthDescription: ${id} - ${message} - ${description}`,
+                                        ),
+                                    );
+                                }}
+                                size="small"
+                            >
+                                {t('global.button.show_more')}
+                            </Button>
+                        ) : (
+                            ''
+                        )}
+                    </Alert>
+                </SnackbarContent>
+            );
+        },
+    ),
+);

src/modules/core/contexts/AppContext.tsx

@@ -26,6 +26,7 @@ import { useMetadataServerSettings } from '@/modules/settings/services/ServerSet
 import { ReaderContextProvider } from '@/modules/reader/contexts/ReaderContextProvider.tsx';
 import { DIRECTION_TO_CACHE } from '@/modules/theme/ThemeDirectionCache.ts';
 import { AppHotkeysProvider } from '@/modules/hotkeys/contexts/AppHotkeysProvider.tsx';
+import { SnackbarWithDescription } from '@/modules/core/components/snackbar/SnackbarWithDescription.tsx';
 
 interface Props {
     children: React.ReactNode;
@@ -84,7 +85,15 @@ export const AppContext: React.FC<Props> = ({ children }) => {
                                 <LibraryOptionsContextProvider>
                                     <NavBarContextProvider>
                                         <ActiveDeviceContextProvider>
-                                            <SnackbarProvider>
+                                            <SnackbarProvider
+                                                Components={{
+                                                    default: SnackbarWithDescription,
+                                                    info: SnackbarWithDescription,
+                                                    success: SnackbarWithDescription,
+                                                    warning: SnackbarWithDescription,
+                                                    error: SnackbarWithDescription,
+                                                }}
+                                            >
                                                 <ReaderContextProvider>
                                                     <AppHotkeysProvider>{children}</AppHotkeysProvider>
                                                 </ReaderContextProvider>

src/modules/core/utils/Toast.ts

@@ -8,12 +8,21 @@
 
 import { enqueueSnackbar, OptionsObject, SnackbarKey } from 'notistack';
 
-export function makeToast(message: string, severity?: OptionsObject['variant']): SnackbarKey;
-export function makeToast(message: string, options?: OptionsObject): SnackbarKey;
-export function makeToast(message: string, options: OptionsObject['variant'] | OptionsObject = 'default'): SnackbarKey {
-    if (typeof options === 'string') {
-        return enqueueSnackbar(message, { variant: options });
-    }
+export function makeToast(message: string, severity?: OptionsObject['variant'], description?: string): SnackbarKey;
+export function makeToast(message: string, options?: OptionsObject, description?: string): SnackbarKey;
+export function makeToast(
+    message: string,
+    options: OptionsObject['variant'] | OptionsObject = 'default',
+    description?: string,
+): SnackbarKey {
+    const variant = typeof options === 'string' ? options : undefined;
+    const snackbarOptions = typeof options === 'object' ? options : {};
 
-    return enqueueSnackbar(message, options);
+    return enqueueSnackbar(message, {
+        variant,
+        ...snackbarOptions,
+        // @ts-ignore - TS2353, "notistack" is outdated and the provided way to define custom props is not working, however,
+        // everything in the options object gets passed to the custom snackbar component
+        description,
+    });
 }