Update album artist base route

src/renderer/components/card/card-rows.tsx

@@ -134,7 +134,7 @@ export const ALBUM_CARD_ROWS: { [key: string]: CardRow<Album> } = {
     arrayProperty: 'name',
     property: 'albumArtists',
     route: {
-      route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
+      route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
       slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
     },
   },
@@ -142,7 +142,7 @@ export const ALBUM_CARD_ROWS: { [key: string]: CardRow<Album> } = {
     arrayProperty: 'name',
     property: 'artists',
     route: {
-      route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
+      route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
       slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
     },
   },
@@ -195,7 +195,7 @@ export const ALBUMARTIST_CARD_ROWS: { [key: string]: CardRow<AlbumArtist> } = {
   name: {
     property: 'name',
     route: {
-      route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
+      route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
       slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
     },
   },

src/renderer/components/virtual-table/cells/album-artist-cell.tsx

@@ -44,7 +44,7 @@ export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
               component={Link}
               overflow="hidden"
               size="sm"
-              to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
+              to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
                 albumArtistId: item.id,
               })}
             >

src/renderer/components/virtual-table/cells/combined-title-cell.tsx

@@ -125,7 +125,7 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams
                   overflow="hidden"
                   size="sm"
                   sx={{ width: 'fit-content' }}
-                  to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
+                  to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
                     albumArtistId: artist.id,
                   })}
                 >

src/renderer/features/albums/components/album-detail-content.tsx

@@ -268,13 +268,14 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
                 arrayProperty: 'name',
                 property: 'albumArtists',
                 route: {
-                  route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
+                  route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
                   slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
                 },
               },
             ]}
             containerWidth={cq.width}
             data={carousel.data}
+            itemType={LibraryItem.ALBUM}
             loading={carousel.loading}
             pagination={carousel.pagination}
             uniqueId={carousel.uniqueId}

src/renderer/features/albums/components/album-detail-header.tsx

@@ -80,7 +80,7 @@ export const AlbumDetailHeader = forwardRef(
                     $link
                     component={Link}
                     fw="600"
-                    to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
+                    to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
                       albumArtistId: artist.id,
                     })}
                   >

src/renderer/features/artists/components/album-artist-list-content.tsx

@@ -254,7 +254,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
   );
 
   const handleRowDoubleClick = (e: RowDoubleClickedEvent) => {
-    navigate(generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, { albumArtistId: e.data.id }));
+    navigate(generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, { albumArtistId: e.data.id }));
   };
 
   return (
@@ -280,7 +280,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
                 loading={checkAlbumArtistList.isLoading}
                 minimumBatchSize={40}
                 route={{
-                  route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
+                  route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
                   slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
                 }}
                 setItemData={setItemData}

src/renderer/features/home/routes/home-route.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useRef } from 'react';
 import { Box, Stack } from '@mantine/core';
 import { useSetState } from '@mantine/hooks';
-import { AlbumListSort, ServerType, SortOrder } from '/@/renderer/api/types';
+import { AlbumListSort, LibraryItem, ServerType, SortOrder } from '/@/renderer/api/types';
 import { TextTitle, FeatureCarousel, GridCarousel, NativeScrollArea } from '/@/renderer/components';
 import { useAlbumList } from '/@/renderer/features/albums';
 import { useRecentlyPlayed } from '/@/renderer/features/home/queries/recently-played-query';
@@ -242,13 +242,14 @@ const HomeRoute = () => {
                       arrayProperty: 'name',
                       property: 'albumArtists',
                       route: {
-                        route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
+                        route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
                         slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
                       },
                     },
                   ]}
                   containerWidth={cq.width}
                   data={carousel.data}
+                  itemType={LibraryItem.ALBUM}
                   loading={carousel.loading}
                   pagination={carousel.pagination}
                   uniqueId={carousel.uniqueId}

src/renderer/router/routes.ts

@@ -1,13 +1,13 @@
-// Referenced from: https://betterprogramming.pub/the-best-way-to-manage-routes-in-a-react-project-with-typescript-c4e8d4422d64
-
 export enum AppRoute {
   ACTION_REQUIRED = '/action-required',
   EXPLORE = '/explore',
   HOME = '/',
-  LIBRARY_ALBUMARTISTS = '/library/album-artists',
-  LIBRARY_ALBUMARTISTS_DETAIL = '/library/album-artists/:albumArtistId',
   LIBRARY_ALBUMS = '/library/albums',
   LIBRARY_ALBUMS_DETAIL = '/library/albums/:albumId',
+  LIBRARY_ALBUM_ARTISTS = '/library/album-artists',
+  LIBRARY_ALBUM_ARTISTS_DETAIL = '/library/album-artists/:albumArtistId',
+  LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY = '/library/album-artists/:albumArtistId/discography',
+  LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS = '/library/album-artists/:albumArtistId/top-songs',
   LIBRARY_ARTISTS = '/library/artists',
   LIBRARY_ARTISTS_DETAIL = '/library/artists/:artistId',
   LIBRARY_FOLDERS = '/library/folders',
@@ -20,39 +20,3 @@ export enum AppRoute {
   SEARCH = '/search',
   SERVERS = '/servers',
 }
-
-type TArgs =
-  | { path: AppRoute.HOME }
-  | { path: AppRoute.ACTION_REQUIRED }
-  | { path: AppRoute.NOW_PLAYING }
-  | { path: AppRoute.EXPLORE }
-  | { path: AppRoute.PLAYING }
-  | { path: AppRoute.SERVERS }
-  | { path: AppRoute.SEARCH }
-  | { path: AppRoute.LIBRARY_ARTISTS }
-  | { path: AppRoute.LIBRARY_ARTISTS_DETAIL }
-  | { path: AppRoute.LIBRARY_ALBUMARTISTS }
-  | {
-      params: { albumArtistId: string };
-      path: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL;
-    }
-  | { path: AppRoute.LIBRARY_ALBUMS }
-  | { path: AppRoute.LIBRARY_FOLDERS }
-  | { path: AppRoute.LIBRARY_SONGS }
-  | {
-      params: { albumId: string };
-      path: AppRoute.LIBRARY_ALBUMS_DETAIL;
-    };
-
-type TArgsWithParams = Extract<TArgs, { params: any; path: any }>;
-
-export const createPath = (args: TArgs) => {
-  // eslint-disable-next-line no-prototype-builtins
-  if (args.hasOwnProperty('params') === false) return args.path;
-
-  // Create a path by replacing params in the route definition
-  return Object.entries((args as TArgsWithParams).params).reduce(
-    (previousValue: string, [param, value]) => previousValue.replace(`:${param}`, `${value}`),
-    args.path,
-  );
-};