disable single attribute per line

This commit is contained in:
jeffvli 2025-07-12 11:17:54 -07:00
parent 92ed8e20c9
commit 8b141d652c
154 changed files with 390 additions and 1800 deletions

View file

@ -15,21 +15,14 @@ export const AlbumArtistCell = ({ data, value }: ICellRendererParams) => {
if (value === undefined) {
return (
<CellContainer position="left">
<Skeleton
height="1rem"
width="80%"
/>
<Skeleton height="1rem" width="80%" />
</CellContainer>
);
}
return (
<CellContainer position="left">
<Text
isMuted
overflow="hidden"
size="md"
>
<Text isMuted overflow="hidden" size="md">
{value?.map((item: AlbumArtist | Artist, index: number) => (
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
{index > 0 && <Separator />}
@ -47,11 +40,7 @@ export const AlbumArtistCell = ({ data, value }: ICellRendererParams) => {
{item.name || '—'}
</Text>
) : (
<Text
isMuted
overflow="hidden"
size="md"
>
<Text isMuted overflow="hidden" size="md">
{item.name || '—'}
</Text>
)}

View file

@ -15,21 +15,14 @@ export const ArtistCell = ({ data, value }: ICellRendererParams) => {
if (value === undefined) {
return (
<CellContainer position="left">
<Skeleton
height="1rem"
width="80%"
/>
<Skeleton height="1rem" width="80%" />
</CellContainer>
);
}
return (
<CellContainer position="left">
<Text
isMuted
overflow="hidden"
size="md"
>
<Text isMuted overflow="hidden" size="md">
{value?.map((item: AlbumArtist | Artist, index: number) => (
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
{index > 0 && <Separator />}
@ -47,11 +40,7 @@ export const ArtistCell = ({ data, value }: ICellRendererParams) => {
{item.name || '—'}
</Text>
) : (
<Text
isMuted
overflow="hidden"
size="md"
>
<Text isMuted overflow="hidden" size="md">
{item.name || '—'}
</Text>
)}

View file

@ -41,11 +41,7 @@ export const CombinedTitleCell = ({
>
<Skeleton className={styles.image} />
</div>
<Skeleton
className={styles.skeletonMetadata}
height="1rem"
width="80%"
/>
<Skeleton className={styles.skeletonMetadata} height="1rem" width="80%" />
</div>
);
}
@ -62,11 +58,7 @@ export const CombinedTitleCell = ({
width: `${(node.rowHeight || 40) - 10}px`,
}}
>
<Image
alt="cover"
className={styles.image}
src={value.imageUrl}
/>
<Image alt="cover" className={styles.image} src={value.imageUrl} />
<ListCoverControls
className={styles.playButton}
@ -77,18 +69,10 @@ export const CombinedTitleCell = ({
/>
</div>
<div className={styles.metadataWrapper}>
<Text
className="current-song-child"
overflow="hidden"
size="md"
>
<Text className="current-song-child" overflow="hidden" size="md">
{value.name}
</Text>
<Text
isMuted
overflow="hidden"
size="md"
>
<Text isMuted overflow="hidden" size="md">
{artists?.length ? (
artists.map((artist: AlbumArtist | Artist, index: number) => (
<React.Fragment key={`queue-${rowIndex}-artist-${artist.id}`}>

View file

@ -25,10 +25,7 @@ export const FullWidthDiscCell = ({ api, data, node }: ICellRendererParams) => {
return (
<div className={styles.container}>
<Group
justify="space-between"
w="100%"
>
<Group justify="space-between" w="100%">
<Button
leftSection={isSelected ? <Icon icon="squareCheck" /> : <Icon icon="square" />}
onClick={handleToggleDiscNodes}

View file

@ -23,10 +23,7 @@ export const GenericCell = ({ value, valueFormatted }: ICellRendererParams, opti
if (value === undefined) {
return (
<CellContainer position={position || 'left'}>
<Skeleton
height="1rem"
width="80%"
/>
<Skeleton height="1rem" width="80%" />
</CellContainer>
);
}
@ -45,12 +42,7 @@ export const GenericCell = ({ value, valueFormatted }: ICellRendererParams, opti
{isLink ? displayedValue.value : displayedValue}
</Text>
) : (
<Text
isMuted={!primary}
isNoSelect={false}
overflow="hidden"
size="md"
>
<Text isMuted={!primary} isNoSelect={false} overflow="hidden" size="md">
{displayedValue}
</Text>
)}

View file

@ -13,11 +13,7 @@ export const GenreCell = ({ data, value }: ICellRendererParams) => {
const genrePath = useGenreRoute();
return (
<CellContainer position="left">
<Text
isMuted
overflow="hidden"
size="md"
>
<Text isMuted overflow="hidden" size="md">
{value?.map((item: AlbumArtist | Artist, index: number) => (
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
{index > 0 && <Separator />}

View file

@ -19,20 +19,14 @@ export const NoteCell = ({ value }: ICellRendererParams) => {
if (value === undefined) {
return (
<CellContainer position="left">
<Skeleton
height="1rem"
width="80%"
/>
<Skeleton height="1rem" width="80%" />
</CellContainer>
);
}
return (
<CellContainer position="left">
<Text
isMuted
overflow="hidden"
>
<Text isMuted overflow="hidden">
{formattedValue}
</Text>
</CellContainer>

View file

@ -26,11 +26,7 @@ export const RatingCell = ({ node, value }: ICellRendererParams) => {
return (
<CellContainer position="center">
<Rating
onChange={handleUpdateRating}
size="xs"
value={value?.userRating}
/>
<Rating onChange={handleUpdateRating} size="xs" value={value?.userRating} />
</CellContainer>
);
};

View file

@ -144,15 +144,9 @@ export const RowIndexCell = ({ eGridCell, value }: ICellRendererParams) => {
return (
<CellContainer position="right">
{isPlaying && isCurrentSong ? (
<Icon
fill="primary"
icon="mediaPlay"
/>
<Icon fill="primary" icon="mediaPlay" />
) : isCurrentSong ? (
<Icon
fill="primary"
icon="mediaPause"
/>
<Icon fill="primary" icon="mediaPause" />
) : (
<Text
className="current-song-child current-song-index"

View file

@ -8,21 +8,14 @@ export const TitleCell = ({ value }: ICellRendererParams) => {
if (value === undefined) {
return (
<CellContainer position="left">
<Skeleton
height="1rem"
width="80%"
/>
<Skeleton height="1rem" width="80%" />
</CellContainer>
);
}
return (
<CellContainer position="left">
<Text
className="current-song-child"
overflow="hidden"
size="md"
>
<Text className="current-song-child" overflow="hidden" size="md">
{value}
</Text>
</CellContainer>

View file

@ -7,10 +7,5 @@ export interface ICustomHeaderParams extends IHeaderParams {
}
export const DurationHeader = () => {
return (
<Icon
icon="duration"
size="sm"
/>
);
return <Icon icon="duration" size="sm" />;
};

View file

@ -16,36 +16,11 @@ type Options = {
type Presets = 'actions' | 'duration' | 'rowIndex' | 'userFavorite' | 'userRating';
const headerPresets = {
actions: (
<Icon
icon="ellipsisHorizontal"
size="sm"
/>
),
duration: (
<Icon
icon="duration"
size="sm"
/>
),
rowIndex: (
<Icon
icon="hash"
size="sm"
/>
),
userFavorite: (
<Icon
icon="favorite"
size="sm"
/>
),
userRating: (
<Icon
icon="star"
size="sm"
/>
),
actions: <Icon icon="ellipsisHorizontal" size="sm" />,
duration: <Icon icon="duration" size="sm" />,
rowIndex: <Icon icon="hash" size="sm" />,
userFavorite: <Icon icon="favorite" size="sm" />,
userRating: <Icon icon="star" size="sm" />,
};
export const GenericTableHeader = (

View file

@ -635,15 +635,8 @@ export const VirtualTable = forwardRef(
onNewColumnsLoaded={handleNewColumnsLoaded}
/>
{paginationProps && (
<AnimatePresence
initial={false}
mode="wait"
presenceAffectsLayout
>
<TablePagination
{...paginationProps}
tableRef={tableRef}
/>
<AnimatePresence initial={false} mode="wait" presenceAffectsLayout>
<TablePagination {...paginationProps} tableRef={tableRef} />
</AnimatePresence>
)}
</div>

View file

@ -76,10 +76,7 @@ export const TablePagination = ({
ref={containerQuery.ref}
style={{ borderTop: '1px solid var(--theme-generic-border-color)' }}
>
<Text
isMuted
size="md"
>
<Text isMuted size="md">
{containerQuery.isMd ? (
<>
Showing <b>{currentPageStartIndex}</b> - <b>{currentPageStopIndex}</b> of{' '}
@ -97,11 +94,7 @@ export const TablePagination = ({
</>
)}
</Text>
<Group
gap="sm"
ref={containerQuery.ref}
wrap="nowrap"
>
<Group gap="sm" ref={containerQuery.ref} wrap="nowrap">
<Popover
onClose={() => handlers.close()}
opened={isGoToPageOpen}
@ -127,10 +120,7 @@ export const TablePagination = ({
min={1}
width={70}
/>
<Button
type="submit"
variant="filled"
>
<Button type="submit" variant="filled">
Go
</Button>
</Group>