+ directly, not a with a separate absolutely-positioned
+ .tileLink/.tileOverlay on top of it: there's only ever the one
+ action (open the artist/album page), so the whole tile just being
+ the link is simpler than reusing machinery built for a second,
+ hover-revealed set of actions these two never have. */
+.tile.tileArtist,
+.tile.tileAlbum {
+ text-decoration: none;
+ color: var(--text);
+}
+
+.tile.tileArtist img,
+.tile.tileAlbum img {
+ aspect-ratio: 1 / 1;
+}
+
+.tile.tileArtist img {
+ border-radius: 50%;
+}
+
+.tile.tileArtist .tileLabel {
+ text-align: center;
+}
+
+.tile.tileArtist:hover .tileLabel,
+.tile.tileAlbum:hover .tileLabel {
+ text-decoration: underline;
+}
diff --git a/client/src/tiles.ts b/client/src/tiles.ts
index cd6be9d..3552540 100644
--- a/client/src/tiles.ts
+++ b/client/src/tiles.ts
@@ -49,7 +49,15 @@ const DRILL_DOWN: Record = {
Playlist: { route: 'playlist', label: 'Voir la playlist' }
};
-export function tileHtml(item: ItemDto): string {
+/**
+ * A poster tile - movies/shows/musicvideos/playlists, anything that
+ * still gets Emby's own portrait artwork. MusicArtist/MusicAlbum get a
+ * completely different shape below (a circle/a square, no hover
+ * overlay) since a movie poster's proportions and "hover for actions"
+ * pattern never fit an artist photo or an album cover - see
+ * docs/architecture.md's "Music UI rework".
+ */
+function posterTileHtml(item: ItemDto): string {
const drill = item.type ? DRILL_DOWN[item.type] : undefined;
const drillHref = drill ? `#/${drill.route}/${item.id}` : null;
const partyLabel = item.type === 'Audio' ? 'Écouter ensemble' : 'Lancer une watch party';
@@ -66,6 +74,46 @@ export function tileHtml(item: ItemDto): string {
`;
}
+/**
+ * An artist tile - a circle, the one shape every music app uses for a
+ * person/act, never a rectangle. No hover overlay at all: unlike a
+ * poster tile, there's only ever one thing to do with an artist photo
+ * (open the artist page), so the whole tile is just that one link -
+ * see DRILL_DOWN's own MusicArtist entry.
+ */
+function artistTileHtml(item: ItemDto): string {
+ return `
+