From 86f158ee5f1fea426fe003dfe7bd5aec7cc93bc6 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Mon, 9 Feb 2026 16:11:42 -0800 Subject: [PATCH] reorder metadata section, use consistent separator --- .../item-detail-list/item-detail.module.css | 1 + .../item-detail-list/item-detail.tsx | 40 +++++++++++-------- .../albums/components/album-detail-header.tsx | 4 +- .../components/album-artist-detail-header.tsx | 7 +++- src/shared/api/utils.ts | 2 +- 5 files changed, 34 insertions(+), 20 deletions(-) diff --git a/src/renderer/components/item-list/item-detail-list/item-detail.module.css b/src/renderer/components/item-list/item-detail-list/item-detail.module.css index c0444be3f..ddf8331c8 100644 --- a/src/renderer/components/item-list/item-detail-list/item-detail.module.css +++ b/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; } diff --git a/src/renderer/components/item-list/item-detail-list/item-detail.tsx b/src/renderer/components/item-list/item-detail-list/item-detail.tsx index 101ad5b0a..0ca8bdcba 100644 --- a/src/renderer/components/item-list/item-detail-list/item-detail.tsx +++ b/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]); diff --git a/src/renderer/features/albums/components/album-detail-header.tsx b/src/renderer/features/albums/components/album-detail-header.tsx index 9d3bd8331..b15ff85c3 100644 --- a/src/renderer/features/albums/components/album-detail-header.tsx +++ b/src/renderer/features/albums/components/album-detail-header.tsx @@ -233,8 +233,8 @@ export const AlbumDetailHeader = forwardRef((_props, ref) => { {metadataItems.map((item, index) => ( {index > 0 && ( - - • + + )} {item.value} diff --git a/src/renderer/features/artists/components/album-artist-detail-header.tsx b/src/renderer/features/artists/components/album-artist-detail-header.tsx index d77cf55de..58599e8d3 100644 --- a/src/renderer/features/artists/components/album-artist-detail-header.tsx +++ b/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 i.enabled) .map((item, index) => ( - {index > 0 && •} + {index > 0 && ( + + {SEPARATOR_STRING} + + )} {item.value} ))} diff --git a/src/shared/api/utils.ts b/src/shared/api/utils.ts index cdb1d396f..88936e1b0 100644 --- a/src/shared/api/utils.ts +++ b/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;