use absolute date for release date column (#1364)

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

@@ -4,9 +4,29 @@ import {
     ItemTableListInnerColumn,
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { formatDateAbsolute, formatDateRelative } from '/@/renderer/utils/format';
+import {
+    formatDateAbsolute,
+    formatDateAbsoluteUTC,
+    formatDateRelative,
+    formatHrDateTime,
+} from '/@/renderer/utils/format';
+import { Stack } from '/@/shared/components/stack/stack';
+import { Text } from '/@/shared/components/text/text';
 import { Tooltip } from '/@/shared/components/tooltip/tooltip';
 
+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>
+    );
+};
+
 export const DateColumn = (props: ItemTableListInnerColumn) => {
     const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
         props.columns[props.columnIndex].id
@@ -15,7 +35,7 @@ export const DateColumn = (props: ItemTableListInnerColumn) => {
     if (typeof row === 'string' && row) {
         return (
             <TableColumnTextContainer {...props}>
-                <Tooltip label={row} multiline={false}>
+                <Tooltip label={getDateTooltipLabel(row)} multiline={false}>
                     <span>{formatDateAbsolute(row)}</span>
                 </Tooltip>
             </TableColumnTextContainer>
@@ -29,6 +49,28 @@ export const DateColumn = (props: ItemTableListInnerColumn) => {
     return <ColumnSkeletonFixed {...props} />;
 };
 
+export const AbsoluteDateColumn = (props: ItemTableListInnerColumn) => {
+    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string' && row) {
+        return (
+            <TableColumnTextContainer {...props}>
+                <Tooltip label={getDateTooltipLabel(row)} multiline={false}>
+                    <span>{formatDateAbsoluteUTC(row)}</span>
+                </Tooltip>
+            </TableColumnTextContainer>
+        );
+    }
+
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonFixed {...props} />;
+};
+
 export const RelativeDateColumn = (props: ItemTableListInnerColumn) => {
     const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
         props.columns[props.columnIndex].id
@@ -37,7 +79,7 @@ export const RelativeDateColumn = (props: ItemTableListInnerColumn) => {
     if (typeof row === 'string') {
         return (
             <TableColumnTextContainer {...props}>
-                <Tooltip label={row} multiline={false}>
+                <Tooltip label={getDateTooltipLabel(row)} multiline={false}>
                     <span>{formatDateRelative(row)}</span>
                 </Tooltip>
             </TableColumnTextContainer>

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

@@ -28,6 +28,7 @@ import { AlbumColumn } from '/@/renderer/components/item-list/item-table-list/co
 import { ArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/artists-column';
 import { CountColumn } from '/@/renderer/components/item-list/item-table-list/columns/count-column';
 import {
+    AbsoluteDateColumn,
     DateColumn,
     RelativeDateColumn,
 } from '/@/renderer/components/item-list/item-table-list/columns/date-column';
@@ -490,7 +491,6 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
                 return <NumericColumn {...props} {...dragProps} controls={controls} type={type} />;
 
             case TableColumn.DATE_ADDED:
-            case TableColumn.RELEASE_DATE:
                 return <DateColumn {...props} {...dragProps} controls={controls} type={type} />;
 
             case TableColumn.DURATION:
@@ -518,6 +518,11 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
             case TableColumn.PLAYLIST_REORDER:
                 return <PlaylistReorderColumn {...props} controls={controls} type={type} />;
 
+            case TableColumn.RELEASE_DATE:
+                return (
+                    <AbsoluteDateColumn {...props} {...dragProps} controls={controls} type={type} />
+                );
+
             case TableColumn.ROW_INDEX:
                 return <RowIndexColumn {...props} {...dragProps} controls={controls} type={type} />;
 

src/renderer/utils/format.tsx

@@ -27,6 +27,9 @@ export const formatDateAbsolute = (key: null | string) =>
 export const formatDateAbsoluteUTC = (key: null | string) =>
     key ? dayjs.utc(key).format(getDateFormat(key)) : '';
 
+export const formatHrDateTime = (key: null | string) =>
+    key ? dayjs(key).format('YYYY-MM-DD HH:mm') : '';
+
 export const formatDateRelative = (key: null | string) => (key ? dayjs(key).fromNow() : '');
 
 export const formatDurationString = (duration: number) => {