improve date parsing for partial dates (#1683)

src/renderer/components/item-list/item-detail-list/columns/release-date-column.tsx

@@ -1,6 +1,21 @@
 import { ItemDetailListCellProps } from './types';
 
-import { formatDateAbsoluteUTC } from '/@/renderer/utils/format';
+import { formatPartialIsoDateUTC } from '/@/renderer/utils/format';
+import { SEPARATOR_STRING } from '/@/shared/api/utils';
 
-export const ReleaseDateColumn = ({ song }: ItemDetailListCellProps) =>
-    song.releaseDate ? formatDateAbsoluteUTC(song.releaseDate) : <>&nbsp;</>;
+export const ReleaseDateColumn = ({ song }: ItemDetailListCellProps) => {
+    const row = song as typeof song & { originalDate?: null | string };
+    const releaseDate = row.releaseDate;
+    if (!releaseDate) {
+        return <>&nbsp;</>;
+    }
+
+    const originalDate =
+        row.originalDate && row.originalDate !== releaseDate ? row.originalDate : null;
+
+    if (originalDate) {
+        return `${formatPartialIsoDateUTC(originalDate)}${SEPARATOR_STRING}${formatPartialIsoDateUTC(releaseDate)}`;
+    }
+
+    return formatPartialIsoDateUTC(releaseDate);
+};

src/renderer/components/item-list/item-detail-list/item-detail-list.tsx

@@ -67,7 +67,7 @@ import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
 import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useSettingsStore, useShowRatings } from '/@/renderer/store';
-import { formatDateAbsoluteUTC, formatDurationString } from '/@/renderer/utils';
+import { formatDurationString, formatPartialIsoDateUTC } from '/@/renderer/utils';
 import { SEPARATOR_STRING } from '/@/shared/api/utils';
 import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';
@@ -489,9 +489,9 @@ const MetadataSection = memo(
             let releaseStr = '';
             if (item.releaseDate) {
                 if (item.originalDate && item.originalDate !== item.releaseDate) {
-                    releaseStr = `${formatDateAbsoluteUTC(item.originalDate)}${SEPARATOR_STRING}${formatDateAbsoluteUTC(item.releaseDate)}`;
+                    releaseStr = `${formatPartialIsoDateUTC(item.originalDate)}${SEPARATOR_STRING}${formatPartialIsoDateUTC(item.releaseDate)}`;
                 } else {
-                    releaseStr = formatDateAbsoluteUTC(item.releaseDate);
+                    releaseStr = formatPartialIsoDateUTC(item.releaseDate);
                 }
             } else if (item.releaseYear != null) {
                 releaseStr = String(item.releaseYear);

src/renderer/components/item-list/item-table-list/columns/date-column.tsx

@@ -8,49 +8,20 @@ import {
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import {
     formatDateAbsolute,
-    formatDateAbsoluteUTC,
     formatDateRelative,
-    formatHrDateTime,
+    formatPartialIsoDateUTC,
 } from '/@/renderer/utils/format';
 import { SEPARATOR_STRING } from '/@/shared/api/utils';
-import { Stack } from '/@/shared/components/stack/stack';
-import { Text } from '/@/shared/components/text/text';
-import { Tooltip } from '/@/shared/components/tooltip/tooltip';
 import { TableColumn } from '/@/shared/types/types';
 
-const getDateTooltipLabel = (utcString: string) => {
-    return (
-        <Stack gap="xs" justify="center">
-            <Text size="md" ta="center">
-                {formatHrDateTime(utcString)}
-            </Text>
-            <Text isMuted size="sm" ta="center">
-                {utcString}
-            </Text>
-        </Stack>
-    );
-};
-
 const DateColumnBase = (props: ItemTableListInnerColumn) => {
     const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
     const row: string | undefined = (rowItem as any)?.[props.columns[props.columnIndex].id];
 
-    const { formattedDate, tooltipLabel } = useMemo(() => {
-        if (typeof row === 'string' && row) {
-            return {
-                formattedDate: formatDateAbsolute(row),
-                tooltipLabel: getDateTooltipLabel(row),
-            };
-        }
-        return { formattedDate: null, tooltipLabel: null };
-    }, [row]);
-
     if (typeof row === 'string' && row) {
         return (
             <TableColumnTextContainer {...props}>
-                <Tooltip label={tooltipLabel} multiline={false}>
-                    <span>{formattedDate}</span>
-                </Tooltip>
+                <span>{formatDateAbsolute(row)}</span>
             </TableColumnTextContainer>
         );
     }
@@ -79,44 +50,32 @@ const AbsoluteDateColumnBase = (props: ItemTableListInnerColumn) => {
                         : null;
 
                 if (originalDate) {
-                    const formattedOriginalDate = formatDateAbsoluteUTC(originalDate);
-                    const formattedReleaseDate = formatDateAbsoluteUTC(releaseDate);
-                    const displayText = `${formattedOriginalDate}${SEPARATOR_STRING}${formattedReleaseDate}`;
-
-                    return {
-                        displayText,
-                        tooltipLabel: getDateTooltipLabel(releaseDate),
-                    };
+                    const formattedOriginalDate = formatPartialIsoDateUTC(originalDate);
+                    const formattedReleaseDate = formatPartialIsoDateUTC(releaseDate);
+                    return `${formattedOriginalDate}${SEPARATOR_STRING}${formattedReleaseDate}`;
                 }
 
                 if (typeof releaseDate === 'string' && releaseDate) {
-                    return {
-                        displayText: formatDateAbsoluteUTC(releaseDate),
-                        tooltipLabel: getDateTooltipLabel(releaseDate),
-                    };
+                    return formatPartialIsoDateUTC(releaseDate);
                 }
             }
         }
         return null;
     }, [props.type, rowItem]);
 
-    const { formattedDate, tooltipLabel } = useMemo(() => {
-        if (typeof row === 'string' && row) {
-            return {
-                formattedDate: formatDateAbsoluteUTC(row),
-                tooltipLabel: getDateTooltipLabel(row),
-            };
-        }
-        return { formattedDate: null, tooltipLabel: null };
-    }, [row]);
-
     if (props.type === TableColumn.RELEASE_DATE) {
         if (releaseDateContent) {
             return (
                 <TableColumnTextContainer {...props}>
-                    <Tooltip label={releaseDateContent.tooltipLabel} multiline={false}>
-                        <span>{releaseDateContent.displayText}</span>
-                    </Tooltip>
+                    <span>{releaseDateContent}</span>
+                </TableColumnTextContainer>
+            );
+        }
+
+        if (typeof row === 'string' && row) {
+            return (
+                <TableColumnTextContainer {...props}>
+                    <span>{formatPartialIsoDateUTC(row)}</span>
                 </TableColumnTextContainer>
             );
         }
@@ -128,20 +87,6 @@ const AbsoluteDateColumnBase = (props: ItemTableListInnerColumn) => {
         return <ColumnSkeletonFixed {...props} />;
     }
 
-    if (typeof row === 'string' && row) {
-        return (
-            <TableColumnTextContainer {...props}>
-                <Tooltip label={tooltipLabel} multiline={false}>
-                    <span>{formattedDate}</span>
-                </Tooltip>
-            </TableColumnTextContainer>
-        );
-    }
-
-    if (row === null) {
-        return <ColumnNullFallback {...props} />;
-    }
-
     return <ColumnSkeletonFixed {...props} />;
 };
 
@@ -151,22 +96,10 @@ const RelativeDateColumnBase = (props: ItemTableListInnerColumn) => {
     const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
     const row: string | undefined = (rowItem as any)?.[props.columns[props.columnIndex].id];
 
-    const { formattedDate, tooltipLabel } = useMemo(() => {
-        if (typeof row === 'string') {
-            return {
-                formattedDate: formatDateRelative(row),
-                tooltipLabel: getDateTooltipLabel(row),
-            };
-        }
-        return { formattedDate: null, tooltipLabel: null };
-    }, [row]);
-
     if (typeof row === 'string') {
         return (
             <TableColumnTextContainer {...props}>
-                <Tooltip label={tooltipLabel} multiline={false}>
-                    <span>{formattedDate}</span>
-                </Tooltip>
+                <span>{formatDateRelative(row)}</span>
             </TableColumnTextContainer>
         );
     }

src/renderer/components/item-list/item-table-list/columns/year-column.tsx

@@ -13,10 +13,10 @@ const YearColumnBase = (props: ItemTableListInnerColumn) => {
     const item = rowItem as any;
 
     const yearDisplay = useMemo(() => {
-        if (item && 'releaseYear' in item && item.releaseYear !== null) {
+        if (item && 'releaseYear' in item && item.releaseYear != null) {
             const releaseYear = item.releaseYear;
             const originalYear =
-                'originalYear' in item && item.originalYear !== null ? item.originalYear : null;
+                'originalYear' in item && item.originalYear > 0 ? item.originalYear : null;
 
             if (originalYear !== null && originalYear !== releaseYear) {
                 return `${originalYear}${SEPARATOR_STRING}${releaseYear}`;