reorder metadata section, use consistent separator

src/renderer/components/item-list/item-detail-list/item-detail.module.css

@@ -232,6 +232,7 @@
 }
 
 .row .metadata-link:hover {
+    color: var(--theme-colors-foreground);
     text-decoration: underline;
 }
 

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

@@ -53,6 +53,7 @@ import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useSettingsStore, useShowRatings } from '/@/renderer/store';
 import { formatDateAbsoluteUTC, formatDurationString } 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';
 import { useDoubleClick } from '/@/shared/hooks/use-double-click';
@@ -361,10 +362,30 @@ const MetadataSection = memo(
 
         const metadataExtra = useMemo(() => {
             const parts: Array<{ content: React.ReactNode; key: string }> = [];
-            const releaseStr =
-                (item.releaseDate && formatDateAbsoluteUTC(item.releaseDate)) ||
-                (item.releaseYear != null ? String(item.releaseYear) : '');
+            let releaseStr = '';
+            if (item.releaseDate) {
+                if (item.originalDate && item.originalDate !== item.releaseDate) {
+                    releaseStr = `${formatDateAbsoluteUTC(item.originalDate)}${SEPARATOR_STRING}${formatDateAbsoluteUTC(item.releaseDate)}`;
+                } else {
+                    releaseStr = formatDateAbsoluteUTC(item.releaseDate);
+                }
+            } else if (item.releaseYear != null) {
+                releaseStr = String(item.releaseYear);
+            }
             if (releaseStr) parts.push({ content: releaseStr, key: 'release' });
+            const songCount = item.songCount ?? 0;
+            const duration = item.duration ?? 0;
+            const tracksAndDurationParts: string[] = [];
+            if (songCount > 0) {
+                tracksAndDurationParts.push(t('entity.trackWithCount', { count: songCount }));
+            }
+            if (duration > 0) {
+                tracksAndDurationParts.push(formatDurationString(duration));
+            }
+            const tracksAndDuration = tracksAndDurationParts.join(SEPARATOR_STRING);
+            if (tracksAndDuration) {
+                parts.push({ content: tracksAndDuration, key: 'tracks' });
+            }
             const genres = item.genres?.filter((g) => g.name) ?? [];
             if (genres.length > 0) {
                 parts.push({
@@ -384,19 +405,6 @@ const MetadataSection = memo(
                     key: 'genres',
                 });
             }
-            const songCount = item.songCount ?? 0;
-            const duration = item.duration ?? 0;
-            const tracksAndDurationParts: string[] = [];
-            if (songCount > 0) {
-                tracksAndDurationParts.push(t('entity.trackWithCount', { count: songCount }));
-            }
-            if (duration > 0) {
-                tracksAndDurationParts.push(formatDurationString(duration));
-            }
-            const tracksAndDuration = tracksAndDurationParts.join(' · ');
-            if (tracksAndDuration) {
-                parts.push({ content: tracksAndDuration, key: 'tracks' });
-            }
             return parts.length > 0 ? parts : null;
         }, [item, t]);
 

src/renderer/features/albums/components/album-detail-header.tsx

@@ -233,8 +233,8 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
                         {metadataItems.map((item, index) => (
                             <Fragment key={item.id}>
                                 {index > 0 && (
-                                    <Text fw={400} isMuted isNoSelect>
-                                        •
+                                    <Text isMuted isNoSelect>
+                                        <Separator />
                                     </Text>
                                 )}
                                 <Text fw={400}>{item.value}</Text>

src/renderer/features/artists/components/album-artist-detail-header.tsx

@@ -19,6 +19,7 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useShowRatings } from '/@/renderer/store';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { formatDurationString } from '/@/renderer/utils';
+import { SEPARATOR_STRING } from '/@/shared/api/utils';
 import { Group } from '/@/shared/components/group/group';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Text } from '/@/shared/components/text/text';
@@ -160,7 +161,11 @@ export const AlbumArtistDetailHeader = forwardRef((_props, ref: Ref<HTMLDivEleme
                         .filter((i) => i.enabled)
                         .map((item, index) => (
                             <Fragment key={`item-${item.id}-${index}`}>
-                                {index > 0 && <Text isNoSelect>•</Text>}
+                                {index > 0 && (
+                                    <Text isMuted isNoSelect>
+                                        {SEPARATOR_STRING}
+                                    </Text>
+                                )}
                                 <Text isMuted={item.secondary}>{item.value}</Text>
                             </Fragment>
                         ))}

src/shared/api/utils.ts

@@ -139,7 +139,7 @@ export const getClientType = (): string => {
     }
 };
 
-export const SEPARATOR_STRING = ' · ';
+export const SEPARATOR_STRING = ' • ';
 
 export const sortSongList = (songs: Song[], sortBy: SongListSort, sortOrder: SortOrder) => {
     let results: Song[] = songs;