Add initial album artist detail route

src/renderer/features/artists/routes/album-artist-detail-route.tsx

@@ -0,0 +1,60 @@
+import { NativeScrollArea } from '/@/renderer/components';
+import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
+import { useRef } from 'react';
+import { useParams } from 'react-router';
+import { useFastAverageColor } from '/@/renderer/hooks';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+import { LibraryItem } from '/@/renderer/api/types';
+import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
+import { AlbumArtistDetailHeader } from '/@/renderer/features/artists/components/album-artist-detail-header';
+import { AlbumArtistDetailContent } from '/@/renderer/features/artists/components/album-artist-detail-content';
+
+const AlbumArtistDetailRoute = () => {
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef<HTMLDivElement>(null);
+
+  const { albumArtistId } = useParams() as { albumArtistId: string };
+  const handlePlayQueueAdd = usePlayQueueAdd();
+  const playButtonBehavior = usePlayButtonBehavior();
+  const detailQuery = useAlbumArtistDetail({ id: albumArtistId });
+  const background = useFastAverageColor(detailQuery.data?.imageUrl, !detailQuery.isLoading);
+
+  const handlePlay = () => {
+    handlePlayQueueAdd?.({
+      byItemType: {
+        id: [albumArtistId],
+        type: LibraryItem.ALBUM_ARTIST,
+      },
+      play: playButtonBehavior,
+    });
+  };
+
+  if (detailQuery.isLoading || !background) return null;
+
+  return (
+    <AnimatedPage key={`album-artist-detail-${albumArtistId}`}>
+      <NativeScrollArea
+        ref={scrollAreaRef}
+        pageHeaderProps={{
+          backgroundColor: background,
+          children: (
+            <LibraryHeaderBar>
+              <LibraryHeaderBar.PlayButton onClick={handlePlay} />
+              <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
+            </LibraryHeaderBar>
+          ),
+          target: headerRef,
+        }}
+      >
+        <AlbumArtistDetailHeader
+          ref={headerRef}
+          background={background}
+        />
+        <AlbumArtistDetailContent />
+      </NativeScrollArea>
+    </AnimatedPage>
+  );
+};
+
+export default AlbumArtistDetailRoute;