Add links to artist/playlist indicator

src/components/library/ArtistView.tsx

@@ -42,7 +42,7 @@ import {
   getPlayedSongsNotification,
   isCached,
 } from '../../shared/utils';
-import { StyledButton, StyledPopover, StyledTag } from '../shared/styled';
+import { StyledButton, StyledLink, StyledPopover, StyledTag } from '../shared/styled';
 import { setStatus } from '../../redux/playerSlice';
 import { GradientBackground, PageHeaderSubtitleDataLine } from '../layout/styled';
 import { apiController } from '../../api/controller';
@@ -365,9 +365,11 @@ const ArtistView = ({ ...rest }: any) => {
             showTitleTooltip
             subtitle={
               <>
-                <PageHeaderSubtitleDataLine $top>
-                  <strong>ARTIST</strong> • {data.albumCount} albums • {artistSongTotal} songs •{' '}
-                  {artistDurationTotal}
+                <PageHeaderSubtitleDataLine $top $overflow>
+                  <StyledLink onClick={() => history.push(`/library/artist`)}>
+                    <strong>ARTIST</strong>
+                  </StyledLink>{' '}
+                  • {data.albumCount} albums • {artistSongTotal} songs, {artistDurationTotal}
                 </PageHeaderSubtitleDataLine>
                 <CustomTooltip
                   text={data?.info.biography

src/components/playlist/PlaylistView.tsx

@@ -55,7 +55,13 @@ import GenericPageHeader from '../layout/GenericPageHeader';
 import { setStatus } from '../../redux/playerSlice';
 import { notifyToast } from '../shared/toast';
 import { addProcessingPlaylist, removeProcessingPlaylist } from '../../redux/miscSlice';
-import { StyledButton, StyledCheckbox, StyledInput, StyledPopover } from '../shared/styled';
+import {
+  StyledButton,
+  StyledCheckbox,
+  StyledInput,
+  StyledLink,
+  StyledPopover,
+} from '../shared/styled';
 import {
   moveToIndex,
   removeFromPlaylist,
@@ -514,8 +520,11 @@ const PlaylistView = ({ ...rest }) => {
           subtitle={
             <div>
               <PageHeaderSubtitleDataLine $top>
-                <strong>PLAYLIST</strong> • {data.songCount} songs • {formatDuration(data.duration)}{' '}
-                • {data.public ? 'Public' : 'Private'}
+                <StyledLink onClick={() => history.push('/playlist')}>
+                  <strong>PLAYLIST</strong>
+                </StyledLink>{' '}
+                • {data.songCount} songs, {formatDuration(data.duration)} •{' '}
+                {data.public ? 'Public' : 'Private'}
               </PageHeaderSubtitleDataLine>
               <PageHeaderSubtitleDataLine>
                 {data.owner && `By ${data.owner} • `}