Feature/global update show last update time (#468)

* Show last global update timestamp

* Add update button to "Updates" screen

src/components/library/UpdateChecker.tsx

@@ -32,6 +32,9 @@ const calcProgress = (status: UpdaterSubscription['updateStatusChanged'] | undef
 export function UpdateChecker({ handleFinishedUpdate }: { handleFinishedUpdate: () => void }) {
     const { t } = useTranslation();
 
+    const { data: lastUpdateTimestampData, refetch: refetchlastTimestamp } =
+        requestManager.useGetLastGlobalUpdateTimestamp();
+    const lastUpdateTimestamp = lastUpdateTimestampData?.lastUpdateTimestamp.timestamp;
     const { data: updaterData } = requestManager.useUpdaterSubscription();
     const status = updaterData?.updateStatusChanged;
 
@@ -48,6 +51,7 @@ export function UpdateChecker({ handleFinishedUpdate }: { handleFinishedUpdate:
 
     const isUpdateFinished = progress === 100;
     if (isUpdateFinished) {
+        refetchlastTimestamp();
         handleFinishedUpdate();
     }
 
@@ -60,7 +64,11 @@ export function UpdateChecker({ handleFinishedUpdate }: { handleFinishedUpdate:
     };
 
     return (
-        <Tooltip title={t('library.settings.global_update.title')}>
+        <Tooltip
+            title={t('library.settings.global_update.label.last_update_tooltip', {
+                date: lastUpdateTimestamp ? new Date(+lastUpdateTimestamp).toLocaleString() : '-',
+            })}
+        >
             <IconButton onClick={onClick} disabled={loading}>
                 {loading ? <Progress progress={progress} /> : <RefreshIcon />}
             </IconButton>

src/i18n/locale/en.json

@@ -382,6 +382,10 @@
           },
           "title": "Skip updating entries"
         },
+        "label": {
+          "last_update": "Last update: {{date}}",
+          "last_update_tooltip": "$t(library.settings.global_update.title) ($t(library.settings.global_update.label.last_update, lowercase))"
+        },
         "metadata": {
           "label": {
             "description": "Check for new cover and details when updating library",

src/lib/requests/RequestManager.ts

@@ -76,6 +76,8 @@ import {
     GetExtensionsQueryVariables,
     GetGlobalMetadatasQuery,
     GetGlobalMetadatasQueryVariables,
+    GetLastUpdateTimestampQuery,
+    GetLastUpdateTimestampQueryVariables,
     GetMangaChaptersFetchMutation,
     GetMangaChaptersFetchMutationVariables,
     GetMangaFetchMutation,
@@ -200,7 +202,7 @@ import {
     UPDATE_CATEGORY_MANGAS,
     UPDATE_LIBRARY_MANGAS,
 } from '@/lib/graphql/mutations/UpdaterMutation.ts';
-import { GET_UPDATE_STATUS } from '@/lib/graphql/queries/UpdaterQuery.ts';
+import { GET_LAST_UPDATE_TIMESTAMP, GET_UPDATE_STATUS } from '@/lib/graphql/queries/UpdaterQuery.ts';
 import { CustomCache } from '@/lib/requests/CustomCache.ts';
 import { RESTORE_BACKUP } from '@/lib/graphql/mutations/BackupMutation.ts';
 import { GET_RESTORE_STATUS, VALIDATE_BACKUP } from '@/lib/graphql/queries/BackupQuery.ts';
@@ -1918,6 +1920,20 @@ export class RequestManager {
     ): AbortableApolloUseMutationResponse<DownloadAheadMutation, DownloadAheadMutationVariables> {
         return this.doRequest(GQLMethod.USE_MUTATION, DOWNLOAD_AHEAD, undefined, options);
     }
+
+    public useGetLastGlobalUpdateTimestamp(
+        options?: QueryHookOptions<GetLastUpdateTimestampQuery, GetLastUpdateTimestampQueryVariables>,
+    ): AbortableApolloUseQueryResponse<GetLastUpdateTimestampQuery, GetLastUpdateTimestampQueryVariables> {
+        return this.doRequest(
+            GQLMethod.USE_QUERY,
+            GET_LAST_UPDATE_TIMESTAMP,
+            {},
+            {
+                fetchPolicy: 'network-only',
+                ...options,
+            },
+        );
+    }
 }
 
 export const requestManager = new RequestManager();

src/screens/Updates.tsx

@@ -25,6 +25,7 @@ import { DownloadStateIndicator } from '@/components/molecules/DownloadStateIndi
 import { DownloadType } from '@/lib/graphql/generated/graphql.ts';
 import { TChapter } from '@/typings.ts';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { UpdateChecker } from '@/components/library/UpdateChecker.tsx';
 
 const StyledGroupedVirtuoso = styled(GroupedVirtuoso)(({ theme }) => ({
     // 64px header
@@ -117,11 +118,24 @@ export const Updates: React.FC = () => {
     const { data: downloaderData } = requestManager.useDownloadSubscription();
     const queue = (downloaderData?.downloadChanged.queue as DownloadType[]) ?? [];
 
+    const { data: lastUpdateTimestampData, refetch: refetchlastTimestamp } =
+        requestManager.useGetLastGlobalUpdateTimestamp();
+    const lastUpdateTimestamp = lastUpdateTimestampData?.lastUpdateTimestamp.timestamp;
+
     useEffect(() => {
         setTitle(t('updates.title'));
 
-        setAction(null);
-    }, [t]);
+        setAction(
+            <>
+                <Typography sx={{ marginRight: '10px' }}>
+                    {t('library.settings.global_update.label.last_update', {
+                        date: lastUpdateTimestamp ? new Date(+lastUpdateTimestamp).toLocaleString() : '-',
+                    })}
+                </Typography>
+                <UpdateChecker handleFinishedUpdate={() => refetchlastTimestamp()} />
+            </>,
+        );
+    }, [t, lastUpdateTimestamp]);
 
     const downloadForChapter = (chapter: TChapter) => {
         const {