From b834d8eadea3df84fe76919f6fb62baa75f30978 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Fri, 10 Jul 2026 19:48:37 -0700 Subject: [PATCH] adjust padding and text styles for album group --- .../album-group-header.module.css | 21 ++---- .../item-table-list/album-group-header.tsx | 37 +++++---- .../item-table-list/album-group-metadata.tsx | 75 ++++++++++++++----- 3 files changed, 87 insertions(+), 46 deletions(-) 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 }} > -
- {song?.albumId && albumPath ? ( - - {song.album ?? ''} - + {song?.album && + (song.albumId && albumPath ? ( + + {song.album} + ) : ( - (song?.album ?? '') - )} -
+ + {song.album} + + ))} {metadataRows.map((row) => ( -
- {row.content} -
+
{row.content}
))} {showFavoriteRating && (
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: