show more detailed upload dates for today and yesterday (#222)

* Always show month and day of the chapters release date with 2 digits

In case the month or date is one digit a leading 0 will be added

* Show more detailed upload date information for chapter uploads from today or yesterday

In case the upload date is from today or yesterday the shown upload date will be e.g. "Today at 02:50", otherwise, just the date will be shown e.g. "04.01.2023"

src/components/manga/ChapterCard.tsx

@@ -30,8 +30,9 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import client from 'util/client';
 import { BACK } from 'util/useBackTo';
+import { getUploadDateString } from 'util/date';
 
-interface IProps{
+interface IProps {
     chapter: IChapter
     triggerChaptersUpdate: () => void
     downloadChapter: IDownloadChapter | undefined
@@ -48,8 +49,6 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
     } = props;
     const isSelecting = selected !== null;
 
-    const dateStr = chapter.uploadDate && new Date(chapter.uploadDate).toLocaleDateString();
-
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
     const handleMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -69,7 +68,9 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
 
         const formData = new FormData();
         formData.append(key, value);
-        if (key === 'read') { formData.append('lastPageRead', '1'); }
+        if (key === 'read') {
+            formData.append('lastPageRead', '1');
+        }
         client.patch(`/api/v1/manga/${chapter.mangaId}/chapter/${chapter.index}`, formData)
             .then(() => triggerChaptersUpdate());
     };
@@ -131,13 +132,13 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
                                 {chapter.bookmarked && (
                                     <BookmarkIcon color="primary" sx={{ mr: 0.5, position: 'relative', top: '0.15em' }} />
                                 )}
-                                { showChapterNumber ? `Chapter ${chapter.chapterNumber}` : chapter.name}
+                                {showChapterNumber ? `Chapter ${chapter.chapterNumber}` : chapter.name}
                             </Typography>
                             <Typography variant="caption">
                                 {chapter.scanlator}
                             </Typography>
                             <Typography variant="caption">
-                                {dateStr}
+                                {getUploadDateString(chapter.uploadDate)}
                                 {isDownloaded && ' • Downloaded'}
                             </Typography>
                         </Stack>
@@ -186,7 +187,7 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
                                 Download
                             </ListItemText>
                         </MenuItem>
-                    ) }
+                    )}
                     <MenuItem onClick={() => sendChange('bookmarked', !chapter.bookmarked)}>
                         <ListItemIcon>
                             {chapter.bookmarked && <BookmarkRemove fontSize="small" />}