support original date display and sort (#1488)

src/renderer/components/item-card/item-card.tsx

@@ -27,6 +27,7 @@ import {
     formatDurationString,
     formatRating,
 } from '/@/renderer/utils/format';
+import { SEPARATOR_STRING } from '/@/shared/api/utils';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Separator } from '/@/shared/components/separator/separator';
@@ -1054,7 +1055,17 @@ export const getDataRows = (type?: 'compact' | 'default' | 'poster'): DataRow[]
         {
             format: (data) => {
                 if ('releaseYear' in data && data.releaseYear !== null) {
-                    return String(data.releaseYear);
+                    const releaseYear = data.releaseYear;
+                    const originalYear =
+                        'originalYear' in data && data.originalYear !== null
+                            ? data.originalYear
+                            : null;
+
+                    if (originalYear !== null && originalYear !== releaseYear) {
+                        return `♫ ${originalYear}${SEPARATOR_STRING}${releaseYear}`;
+                    }
+
+                    return String(releaseYear);
                 }
                 return '';
             },
@@ -1063,7 +1074,15 @@ export const getDataRows = (type?: 'compact' | 'default' | 'poster'): DataRow[]
         {
             format: (data) => {
                 if ('releaseDate' in data && data.releaseDate) {
-                    return formatDateAbsoluteUTC(data.releaseDate);
+                    if (
+                        'originalDate' in data &&
+                        data.originalDate &&
+                        data.originalDate !== data.releaseDate
+                    ) {
+                        return `♫ ${formatDateAbsoluteUTC(data.originalDate)}${SEPARATOR_STRING}${formatDateAbsoluteUTC(data.releaseDate)}`;
+                    }
+
+                    return `${formatDateAbsoluteUTC(data.releaseDate)}`;
                 }
                 return '';
             },

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

@@ -10,9 +10,11 @@ import {
     formatDateRelative,
     formatHrDateTime,
 } 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 (
@@ -54,6 +56,47 @@ export const AbsoluteDateColumn = (props: ItemTableListInnerColumn) => {
         props.columns[props.columnIndex].id
     ];
 
+    if (props.type === TableColumn.RELEASE_DATE) {
+        const item = (props.data as (any | undefined)[])[props.rowIndex];
+        if (item && 'releaseDate' in item && item.releaseDate) {
+            const releaseDate = item.releaseDate;
+            const originalDate =
+                'originalDate' in item && item.originalDate && item.originalDate !== releaseDate
+                    ? item.originalDate
+                    : null;
+
+            if (originalDate) {
+                const formattedOriginalDate = formatDateAbsoluteUTC(originalDate);
+                const formattedReleaseDate = formatDateAbsoluteUTC(releaseDate);
+                const displayText = `♫ ${formattedOriginalDate}${SEPARATOR_STRING}${formattedReleaseDate}`;
+
+                return (
+                    <TableColumnTextContainer {...props}>
+                        <Tooltip label={getDateTooltipLabel(releaseDate)} multiline={false}>
+                            <span>{displayText}</span>
+                        </Tooltip>
+                    </TableColumnTextContainer>
+                );
+            }
+
+            if (typeof releaseDate === 'string' && releaseDate) {
+                return (
+                    <TableColumnTextContainer {...props}>
+                        <Tooltip label={getDateTooltipLabel(releaseDate)} multiline={false}>
+                            <span>{formatDateAbsoluteUTC(releaseDate)}</span>
+                        </Tooltip>
+                    </TableColumnTextContainer>
+                );
+            }
+        }
+
+        if (row === null) {
+            return <ColumnNullFallback {...props} />;
+        }
+
+        return <ColumnSkeletonFixed {...props} />;
+    }
+
     if (typeof row === 'string' && row) {
         return (
             <TableColumnTextContainer {...props}>

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

@@ -0,0 +1,41 @@
+import {
+    ColumnNullFallback,
+    ColumnSkeletonFixed,
+    ItemTableListInnerColumn,
+    TableColumnTextContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { SEPARATOR_STRING } from '/@/shared/api/utils';
+
+export const YearColumn = (props: ItemTableListInnerColumn) => {
+    const item = (props.data as (any | undefined)[])[props.rowIndex];
+
+    if (item && 'releaseYear' in item && item.releaseYear !== null) {
+        const releaseYear = item.releaseYear;
+        const originalYear =
+            'originalYear' in item && item.originalYear !== null ? item.originalYear : null;
+
+        if (originalYear !== null && originalYear !== releaseYear) {
+            return (
+                <TableColumnTextContainer {...props}>
+                    ♫ {originalYear}
+                    {SEPARATOR_STRING}
+                    {releaseYear}
+                </TableColumnTextContainer>
+            );
+        }
+
+        if (typeof releaseYear === 'number') {
+            return <TableColumnTextContainer {...props}>{releaseYear}</TableColumnTextContainer>;
+        }
+    }
+
+    const row: number | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonFixed {...props} />;
+};

src/renderer/components/item-list/item-table-list/default-columns.ts

@@ -110,7 +110,7 @@ export const SONG_TABLE_COLUMNS: DefaultTableColumn[] = [
         label: i18n.t('table.config.label.year', { postProcess: 'titleCase' }),
         pinned: null,
         value: TableColumn.YEAR,
-        width: 100,
+        width: 200,
     },
     {
         align: 'center',
@@ -119,7 +119,7 @@ export const SONG_TABLE_COLUMNS: DefaultTableColumn[] = [
         label: i18n.t('table.config.label.releaseDate', { postProcess: 'titleCase' }),
         pinned: null,
         value: TableColumn.RELEASE_DATE,
-        width: 120,
+        width: 240,
     },
     {
         align: 'center',
@@ -376,7 +376,7 @@ export const ALBUM_TABLE_COLUMNS: DefaultTableColumn[] = [
         label: i18n.t('table.config.label.year', { postProcess: 'titleCase' }),
         pinned: null,
         value: TableColumn.YEAR,
-        width: 100,
+        width: 200,
     },
     {
         align: 'center',
@@ -385,7 +385,7 @@ export const ALBUM_TABLE_COLUMNS: DefaultTableColumn[] = [
         label: i18n.t('table.config.label.releaseDate', { postProcess: 'titleCase' }),
         pinned: null,
         value: TableColumn.RELEASE_DATE,
-        width: 120,
+        width: 240,
     },
     {
         align: 'center',

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

@@ -47,6 +47,7 @@ import { SizeColumn } from '/@/renderer/components/item-list/item-table-list/col
 import { TextColumn } from '/@/renderer/components/item-list/item-table-list/columns/text-column';
 import { TitleColumn } from '/@/renderer/components/item-list/item-table-list/columns/title-column';
 import { TitleCombinedColumn } from '/@/renderer/components/item-list/item-table-list/columns/title-combined-column';
+import { YearColumn } from '/@/renderer/components/item-list/item-table-list/columns/year-column';
 import { TableItemProps } from '/@/renderer/components/item-list/item-table-list/item-table-list';
 import { ItemControls, ItemListItem } from '/@/renderer/components/item-list/types';
 import { eventEmitter } from '/@/renderer/events/event-emitter';
@@ -487,9 +488,11 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
             case TableColumn.DISC_NUMBER:
             case TableColumn.SAMPLE_RATE:
             case TableColumn.TRACK_NUMBER:
-            case TableColumn.YEAR:
                 return <NumericColumn {...props} {...dragProps} controls={controls} type={type} />;
 
+            case TableColumn.YEAR:
+                return <YearColumn {...props} {...dragProps} controls={controls} type={type} />;
+
             case TableColumn.DATE_ADDED:
                 return <DateColumn {...props} {...dragProps} controls={controls} type={type} />;