chore: initial public commit

client/app/routes/MediaItems/Artist.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { useLoaderData, type LoaderFunctionArgs } from "react-router";
+import TopTracks from "~/components/TopTracks";
+import { mergeArtists, type Artist } from "api/api";
+import LastPlays from "~/components/LastPlays";
+import PeriodSelector from "~/components/PeriodSelector";
+import MediaLayout from "./MediaLayout";
+import ArtistAlbums from "~/components/ArtistAlbums";
+import ActivityGrid from "~/components/ActivityGrid";
+
+export async function clientLoader({ params }: LoaderFunctionArgs) {
+  const res = await fetch(`/apis/web/v1/artist?id=${params.id}`);
+  if (!res.ok) {
+    throw new Response("Failed to load artist", { status: 500 });
+  }
+  const artist: Artist = await res.json();
+  return artist;
+}
+
+export default function Artist() {
+  const artist = useLoaderData() as Artist;
+  const [period, setPeriod] = useState('week')
+
+  // remove canonical name from alias list
+  console.log(artist.aliases)
+  let index = artist.aliases.indexOf(artist.name);
+  if (index !== -1) {
+    artist.aliases.splice(index, 1);
+  }
+
+  return (
+    <MediaLayout type="Artist"
+        title={artist.name}
+        img={artist.image}
+        id={artist.id}
+        musicbrainzId={artist.musicbrainz_id}
+        imgItemId={artist.id}
+        mergeFunc={mergeArtists}
+        mergeCleanerFunc={(r, id) => {
+            r.albums = []
+            r.tracks = []
+            for (let i = 0; i < r.artists.length; i ++) {
+                if (r.artists[i].id === id) {
+                    delete r.artists[i]
+                }
+            }
+            return r
+        }}
+        subContent={<>
+        {artist.listen_count && <p>{artist.listen_count} play{ artist.listen_count > 1 ? 's' : ''}</p>}
+        </>}
+    >
+        <div className="mt-10">
+            <PeriodSelector setter={setPeriod} current={period} />
+        </div>
+        <div className="flex flex-col gap-20">
+            <div className="flex gap-15 mt-10 flex-wrap">
+                <LastPlays limit={20} artistId={artist.id} />
+                <TopTracks limit={8} period={period} artistId={artist.id} />
+                <ActivityGrid configurable autoAdjust artistId={artist.id} />
+            </div>
+            <ArtistAlbums period={period} artistId={artist.id} name={artist.name} />
+        </div>
+    </MediaLayout>
+  );
+}