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

@ -47,10 +47,7 @@ export const CardControls = ({
return (
<div className={styles.gridCardControlsContainer}>
<div className={styles.bottomControls}>
<button
className={styles.playButton}
onClick={handlePlay}
>
<button className={styles.playButton} onClick={handlePlay}>
<Icon icon="mediaPlay" />
</button>
<Group gap="xs">

View file

@ -55,14 +55,8 @@ export const PosterCard = ({
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<Link
className={styles.imageContainer}
to={path}
>
<Image
className={styles.image}
src={data?.imageUrl}
/>
<Link className={styles.imageContainer} to={path}>
<Image className={styles.image} src={data?.imageUrl} />
<GridCardControls
handleFavorite={controls.handleFavorite}
handlePlayQueueAdd={controls.handlePlayQueueAdd}
@ -72,30 +66,21 @@ export const PosterCard = ({
/>
</Link>
<div className={styles.detailContainer}>
<CardRows
data={data}
rows={controls.cardRows}
/>
<CardRows data={data} rows={controls.cardRows} />
</div>
</div>
);
}
return (
<div
className={styles.container}
key={`placeholder-${uniqueId}-${data.id}`}
>
<div className={styles.container} key={`placeholder-${uniqueId}-${data.id}`}>
<div className={styles.imageContainer}>
<Skeleton className={styles.image} />
</div>
<div className={styles.detailContainer}>
<Stack gap="xs">
{(controls?.cardRows || []).map((row, index) => (
<Skeleton
height={14}
key={`${index}-${row.arrayProperty}`}
/>
<Skeleton height={14} key={`${index}-${row.arrayProperty}`} />
))}
</Stack>
</div>

View file

@ -35,14 +35,8 @@ export const ContextMenuButton = forwardRef(
onClick={props.onClick}
ref={ref}
>
<Group
justify="space-between"
w="100%"
>
<Group
className={styles.left}
gap="md"
>
<Group justify="space-between" w="100%">
<Group className={styles.left} gap="md">
{leftIcon}
{children}
</Group>

View file

@ -77,11 +77,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
className={styles.wrapper}
to={generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: currentItem?.id || '' })}
>
<AnimatePresence
custom={direction}
initial={false}
mode="popLayout"
>
<AnimatePresence custom={direction} initial={false} mode="popLayout">
{data && (
<motion.div
animate="animate"
@ -101,10 +97,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
/>
</div>
<div className={styles.infoColumn}>
<Stack
gap="md"
style={{ width: '100%' }}
>
<Stack gap="md" style={{ width: '100%' }}>
<div className={styles.titleWrapper}>
<TextTitle
fw={900}
@ -117,10 +110,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
</div>
<div className={styles.titleWrapper}>
{currentItem?.albumArtists.slice(0, 1).map((artist) => (
<Text
fw={600}
key={`carousel-artist-${artist.id}`}
>
<Text fw={600} key={`carousel-artist-${artist.id}`}>
{artist.name}
</Text>
))}

View file

@ -60,10 +60,7 @@ const Title = ({ handleNext, handlePrev, label, pagination }: TitleProps) => {
{isValidElement(label) ? (
label
) : (
<TextTitle
order={3}
weight={700}
>
<TextTitle order={3} weight={700}>
{label}
</TextTitle>
)}
@ -280,11 +277,7 @@ export const SwiperGridCarousel = ({
}, []);
return (
<Stack
className="grid-carousel"
gap="md"
ref={containerRef as any}
>
<Stack className="grid-carousel" gap="md" ref={containerRef as any}>
{title ? (
<Title
{...title}

View file

@ -91,11 +91,7 @@ export const NativeScrollArea = forwardRef(
{...pageHeaderProps}
/>
)}
<div
className={styles.scrollArea}
ref={mergedRef}
{...props}
>
<div className={styles.scrollArea} ref={mergedRef} {...props}>
{children}
</div>
</>

View file

@ -99,10 +99,7 @@ export const QueryBuilder = ({
};
return (
<Stack
gap="sm"
ml={`${level * 10}px`}
>
<Stack gap="sm" ml={`${level * 10}px`}>
<Group gap="sm">
<Select
data={FILTER_GROUP_OPTIONS_DATA}
@ -112,12 +109,7 @@ export const QueryBuilder = ({
value={data.type}
width="20%"
/>
<ActionIcon
icon="add"
onClick={handleAddRule}
size="sm"
variant="subtle"
/>
<ActionIcon icon="add" onClick={handleAddRule} size="sm" variant="subtle" />
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<ActionIcon
@ -150,24 +142,14 @@ export const QueryBuilder = ({
<DropdownMenu.Divider />
<DropdownMenu.Item
isDanger
leftSection={
<Icon
color="error"
icon="refresh"
/>
}
leftSection={<Icon color="error" icon="refresh" />}
onClick={onResetFilters}
>
Reset to default
</DropdownMenu.Item>
<DropdownMenu.Item
isDanger
leftSection={
<Icon
color="error"
icon="delete"
/>
}
leftSection={<Icon color="error" icon="delete" />}
onClick={onClearFilters}
>
Clear filters

View file

@ -48,13 +48,7 @@ const QueryValueInput = ({ data, onChange, type, ...props }: any) => {
/>
);
case 'date':
return (
<TextInput
onChange={onChange}
size="sm"
{...props}
/>
);
return <TextInput onChange={onChange} size="sm" {...props} />;
case 'dateRange':
return (
<>
@ -92,21 +86,9 @@ const QueryValueInput = ({ data, onChange, type, ...props }: any) => {
/>
);
case 'playlist':
return (
<Select
data={data}
onChange={onChange}
{...props}
/>
);
return <Select data={data} onChange={onChange} {...props} />;
case 'string':
return (
<TextInput
onChange={onChange}
size="sm"
{...props}
/>
);
return <TextInput onChange={onChange} size="sm" {...props} />;
default:
return <></>;
@ -188,10 +170,7 @@ export const QueryBuilderOption = ({
const ml = (level + 1) * 10;
return (
<Group
gap="sm"
ml={ml}
>
<Group gap="sm" ml={ml}>
<Select
data={filters}
maxWidth={170}

View file

@ -81,10 +81,7 @@ export const DefaultCard = ({
data?.userFavorite && styles.isFavorite,
)}
>
<Image
className={styles.image}
src={data?.imageUrl}
/>
<Image className={styles.image} src={data?.imageUrl} />
<GridCardControls
handleFavorite={controls.handleFavorite}
handlePlayQueueAdd={controls.handlePlayQueueAdd}
@ -95,10 +92,7 @@ export const DefaultCard = ({
/>
</div>
<div className={styles.detailContainer}>
<CardRows
data={data}
rows={controls.cardRows}
/>
<CardRows data={data} rows={controls.cardRows} />
</div>
</div>
</div>

View file

@ -86,10 +86,7 @@ export const GridCardControls = ({
onClick={handlePlay}
variant="filled"
>
<Icon
icon="mediaPlay"
size="xl"
/>
<Icon icon="mediaPlay" size="xl" />
</Button>
<div className={styles.bottomControls}>
{itemType !== LibraryItem.PLAYLIST && (

View file

@ -73,17 +73,11 @@ export const PosterCard = ({
margin: controls.itemGap,
}}
>
<div
className={styles.linkContainer}
onClick={() => navigate(path)}
>
<div className={styles.linkContainer} onClick={() => navigate(path)}>
<div
className={`${styles.imageContainer} ${data?.userFavorite ? styles.isFavorite : ''}`}
>
<Image
className={styles.image}
src={data?.imageUrl}
/>
<Image className={styles.image} src={data?.imageUrl} />
<GridCardControls
handleFavorite={controls.handleFavorite}
handlePlayQueueAdd={controls.handlePlayQueueAdd}
@ -95,10 +89,7 @@ export const PosterCard = ({
</div>
</div>
<div className={styles.detailContainer}>
<CardRows
data={data}
rows={controls.cardRows}
/>
<CardRows data={data} rows={controls.cardRows} />
</div>
</div>
);

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>