diff --git a/src/renderer/components/item-list/item-table-list/album-group-header.module.css b/src/renderer/components/item-list/item-table-list/album-group-header.module.css
index 9c9694088..16acaffec 100644
--- a/src/renderer/components/item-list/item-table-list/album-group-header.module.css
+++ b/src/renderer/components/item-list/item-table-list/album-group-header.module.css
@@ -13,7 +13,6 @@
flex-shrink: 0;
height: 100%;
aspect-ratio: 1;
- padding-top: calc(var(--theme-spacing-xs) * 0.5);
overflow: hidden;
border-radius: var(--theme-radius-md);
@@ -49,33 +48,23 @@
align-content: start;
min-width: 0;
padding: 0;
- padding-top: calc(var(--theme-spacing-xs) * 0.5);
}
.info.enlarged-image {
padding-top: var(--theme-spacing-xs);
}
-.album-name {
- font-size: var(--theme-font-size-sm);
- line-height: 1.25;
+.album-title {
+ font-weight: 500;
overflow-wrap: anywhere;
-}
-
-.album-name a {
- color: inherit;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
+ white-space: normal;
}
.metadata-row {
font-size: var(--theme-font-size-xs);
- line-height: 1.25;
+ color: var(--theme-colors-foreground-muted);
overflow-wrap: anywhere;
- opacity: 0.7;
+ white-space: normal;
}
.controls-row {
diff --git a/src/renderer/components/item-list/item-table-list/album-group-header.tsx b/src/renderer/components/item-list/item-table-list/album-group-header.tsx
index 3df92bb15..b9df02f0d 100644
--- a/src/renderer/components/item-list/item-table-list/album-group-header.tsx
+++ b/src/renderer/components/item-list/item-table-list/album-group-header.tsx
@@ -6,7 +6,11 @@ import { generatePath, Link } from 'react-router';
import imageColumnStyles from '../item-detail-list/columns/image-column.module.css';
import { AlbumGroupControls } from './album-group-controls';
import styles from './album-group-header.module.css';
-import { AlbumGroupMetadata, renderAlbumGroupMetadataItem } from './album-group-metadata';
+import {
+ AlbumGroupMetadata,
+ AlbumGroupTextSize,
+ renderAlbumGroupMetadataItem,
+} from './album-group-metadata';
import { TableItemSize } from './item-table-list';
import { ItemImage } from '/@/renderer/components/item-image/item-image';
@@ -22,6 +26,7 @@ import {
useAlbumGroupShowFavoriteRating,
usePlayButtonBehavior,
} from '/@/renderer/store';
+import { Text } from '/@/shared/components/text/text';
import { LibraryItem, Song } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
@@ -31,7 +36,7 @@ interface AlbumGroupHeaderProps {
onPlay?: (playType: Play) => void;
rowIndex?: number;
setAlbumGroupContentHeight?: (rowIndex: number, height: number) => void;
- size?: 'compact' | 'large' | 'normal';
+ size?: AlbumGroupTextSize;
song: Song | undefined;
}
@@ -157,19 +162,25 @@ export const AlbumGroupHeader = ({
ref={infoRef}
style={{ minHeight: resolvedInfoHeight ?? infoHeight }}
>
-
diff --git a/src/renderer/components/item-list/item-table-list/album-group-metadata.tsx b/src/renderer/components/item-list/item-table-list/album-group-metadata.tsx
index 5efb638ee..9eeee297c 100644
--- a/src/renderer/components/item-list/item-table-list/album-group-metadata.tsx
+++ b/src/renderer/components/item-list/item-table-list/album-group-metadata.tsx
@@ -2,7 +2,12 @@ import { TFunction } from 'i18next';
import { Fragment, ReactNode } from 'react';
import { generatePath, Link } from 'react-router';
-import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
+import styles from './album-group-header.module.css';
+
+import {
+ JOINED_ARTISTS_MUTED_PROPS,
+ JoinedArtists,
+} from '/@/renderer/features/albums/components/joined-artists';
import { AppRoute } from '/@/renderer/router/routes';
import { AlbumGroupItem } from '/@/renderer/store';
import { formatDurationString, formatPartialIsoDateUTC, formatSizeString } from '/@/renderer/utils';
@@ -20,6 +25,23 @@ export type AlbumGroupMetadata = {
songCount: number;
};
+export type AlbumGroupTextSize = 'compact' | 'large' | 'normal';
+
+const metadataTextProps = {
+ isMuted: true,
+ isNoSelect: true,
+ size: 'xs' as const,
+};
+
+const albumGroupArtistProps = {
+ linkProps: { ...JOINED_ARTISTS_MUTED_PROPS.linkProps, size: 'xs' as const },
+ rootTextProps: { ...JOINED_ARTISTS_MUTED_PROPS.rootTextProps, size: 'xs' as const },
+};
+
+const MetadataTextContainer = ({ children }: { children: ReactNode }) => (
+
{children}
+);
+
export const computeAlbumGroupMetadata = (
songs: Song[],
songCount: number,
@@ -78,17 +100,21 @@ export const renderAlbumGroupMetadataItem = (
}
return (
-
+
+
+
);
case AlbumGroupItem.DURATION:
return metadata.duration > 0 ? (
-
{formatDurationString(metadata.duration)}
+
+ {formatDurationString(metadata.duration)}
+
) : null;
case AlbumGroupItem.GENRES:
@@ -97,14 +123,13 @@ export const renderAlbumGroupMetadataItem = (
}
return (
- <>
+
{metadata.genres.map((genre, index) => (
))}
- >
+
);
case AlbumGroupItem.RELEASE_DATE: {
const releaseDate = formatReleaseDate(metadata);
- return releaseDate ?
{releaseDate} : null;
+ return releaseDate ? (
+
+ {releaseDate}
+
+ ) : null;
}
case AlbumGroupItem.RELEASE_TYPE:
- return metadata.releaseType ?
{metadata.releaseType} : null;
+ return metadata.releaseType ? (
+
+ {metadata.releaseType}
+
+ ) : null;
case AlbumGroupItem.RELEASE_YEAR:
return metadata.releaseYear != null && metadata.releaseYear > 0 ? (
-
{metadata.releaseYear}
+
+ {metadata.releaseYear}
+
) : null;
case AlbumGroupItem.SIZE:
return metadata.size > 0 ? (
-
{formatSizeString(metadata.size)}
+
+ {formatSizeString(metadata.size)}
+
) : null;
case AlbumGroupItem.SONG_COUNT:
return metadata.songCount > 0 ? (
-
{t('entity.trackWithCount', { count: metadata.songCount })}
+
+
+ {t('entity.trackWithCount', { count: metadata.songCount })}
+
+
) : null;
default: