[PAY-2681] Artist dashboard album support

packages/common/src/store/account/selectors.ts

@@ -177,6 +177,14 @@ export const getAccountWithAlbums = createSelector(
   }
 )
 
+export const getAccountAlbums = createSelector(
+  [getAccountWithCollections],
+  (account) => {
+    if (!account) return undefined
+    return account.collections.filter((c) => c.is_album)
+  }
+)
+
 export const getAccountWithNameSortedPlaylistsAndAlbums = createSelector(
   [getAccountWithCollections],
   (account) => {

packages/harmony/src/components/input/TextInput/TextInput.tsx

@@ -173,7 +173,11 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
           )}
         >
           {StartIcon ? (
-            <StartIcon size='m' color='subdued' {...IconProps} />
+            <StartIcon
+              size={size === TextInputSize.SMALL ? 's' : 'm'}
+              color='subdued'
+              {...IconProps}
+            />
           ) : null}
           <Flex direction='column' gap='xs' justifyContent='center' w='100%'>
             {shouldShowLabel ? (

packages/web/src/pages/dashboard-page/DashboardPage.tsx

@@ -1,6 +1,7 @@
 import { useState, Suspense, ReactNode, useEffect, useCallback } from 'react'
 
 import { Status, Track } from '@audius/common/models'
+import { FeatureFlags } from '@audius/common/services'
 import { themeSelectors } from '@audius/common/store'
 import { formatCount } from '@audius/common/utils'
 import cn from 'classnames'
@@ -12,10 +13,12 @@ import Header from 'components/header/desktop/Header'
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import Page from 'components/page/Page'
 import { useGoToRoute } from 'hooks/useGoToRoute'
+import { useFlag } from 'hooks/useRemoteConfig'
 import lazyWithPreload from 'utils/lazyWithPreload'
 
 import styles from './DashboardPage.module.css'
 import { ArtistCard } from './components/ArtistCard'
+import { ArtistContentSection } from './components/ArtistContentSection'
 import {
   TracksTableContainer,
   DataSourceTrack,
@@ -67,6 +70,9 @@ const StatTile = (props: { title: string; value: any }) => {
 export const DashboardPage = () => {
   const goToRoute = useGoToRoute()
   const dispatch = useDispatch()
+  const { isEnabled: isPremiumAlbumsEnabled } = useFlag(
+    FeatureFlags.PREMIUM_ALBUMS_ENABLED
+  )
   const [selectedTrack, setSelectedTrack] = useState(-1)
   const { account, tracks, stats } = useSelector(makeGetDashboard())
   const listenData = useSelector(getDashboardListenData)
@@ -194,7 +200,14 @@ export const DashboardPage = () => {
           <div className={styles.sectionContainer}>
             {renderChart()}
             {renderStats()}
-            {renderTable()}
+            {isPremiumAlbumsEnabled ? (
+              <ArtistContentSection
+                tracks={formatMetadata(tracks)}
+                account={account}
+              />
+            ) : (
+              renderTable()
+            )}
           </div>
         </>
       )}