pass state from list navigation

This commit is contained in:
jeffvli
2025-11-20 00:18:19 -08:00
parent eb8dcfa053
commit ece82d813c
11 changed files with 81 additions and 17 deletions
@@ -201,7 +201,7 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
) {
const path = getTitlePath(itemType, item.id);
if (path) {
navigate(path);
navigate(path, { state: { item } });
return;
}
}
@@ -40,7 +40,14 @@ const AlbumArtistsColumn = (props: ItemTableListInnerColumn) => {
>
{albumArtists.map((albumArtist, index) => (
<Fragment key={albumArtist.id}>
<Text component={Link} isLink isMuted isNoSelect to={albumArtist.path}>
<Text
component={Link}
isLink
isMuted
isNoSelect
state={{ item: albumArtist }}
to={albumArtist.path}
>
{albumArtist.name}
</Text>
{index < albumArtists.length - 1 && ', '}
@@ -40,7 +40,14 @@ const ArtistsColumn = (props: ItemTableListInnerColumn) => {
>
{artists.map((artist, index) => (
<Fragment key={artist.id}>
<Text component={Link} isLink isMuted isNoSelect to={artist.path}>
<Text
component={Link}
isLink
isMuted
isNoSelect
state={{ item: artist }}
to={artist.path}
>
{artist.name}
</Text>
{index < artists.length - 1 && ', '}
@@ -39,6 +39,7 @@ const GenreBadgeColumn = (props: ItemTableListInnerColumn) => {
<Badge
component={Link}
key={genre.id}
state={{ item: genre }}
style={{
backgroundColor: genre.color,
color: genre.isLight ? 'black' : 'white',
@@ -40,7 +40,14 @@ const GenreColumn = (props: ItemTableListInnerColumn) => {
>
{genres.map((genre, index) => (
<Fragment key={genre.id}>
<Text component={Link} isLink isMuted isNoSelect to={genre.path}>
<Text
component={Link}
isLink
isMuted
isNoSelect
state={{ item: genre }}
to={genre.path}
>
{genre.name}
</Text>
{index < genres.length - 1 && ', '}
@@ -31,11 +31,13 @@ function DefaultTitleColumn(props: ItemTableListInnerColumn) {
if (typeof row === 'string') {
const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
const item = props.data[props.rowIndex] as any;
const titleLinkProps = path
? {
component: Link,
isLink: true,
state: { item },
to: path,
}
: {};
@@ -74,6 +76,7 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
if (typeof row === 'string') {
const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
const item = props.data[props.rowIndex] as any;
const textStyles = isActive ? { color: 'var(--theme-colors-primary)' } : {};
@@ -81,6 +84,7 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
? {
component: Link,
isLink: true,
state: { item },
to: path,
}
: {};
@@ -34,10 +34,12 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
const rowHeight = props.getRowHeight(props.rowIndex, props);
const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
const item = props.data[props.rowIndex] as any;
const titleLinkProps = path
? {
component: Link,
isLink: true,
state: { item },
to: path,
}
: {};
@@ -56,7 +58,14 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
<div className={styles.artists}>
{artists.map((artist, index) => (
<span key={artist.id}>
<Text component={Link} isLink isMuted isNoSelect to={artist.path}>
<Text
component={Link}
isLink
isMuted
isNoSelect
state={{ item: artist }}
to={artist.path}
>
{artist.name}
</Text>
{index < artists.length - 1 && ', '}
@@ -97,12 +106,14 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
const rowHeight = props.getRowHeight(props.rowIndex, props);
const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
const item = props.data[props.rowIndex] as any;
const textStyles = isActive ? { color: 'var(--theme-colors-primary)' } : {};
const titleLinkProps = path
? {
component: Link,
isLink: true,
state: { item },
to: path,
}
: {};
@@ -126,7 +137,14 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
<div className={styles.artists}>
{artists.map((artist, index) => (
<span key={artist.id}>
<Text component={Link} isLink isMuted isNoSelect to={artist.path}>
<Text
component={Link}
isLink
isMuted
isNoSelect
state={{ item: artist }}
to={artist.path}
>
{artist.name}
</Text>
{index < artists.length - 1 && ', '}