From 0f3c364b42647ca27d996f0291a60cba788db18f Mon Sep 17 00:00:00 2001
From: Nicolas <nicolaslef53@gmail.com>
Date: Mon, 14 Sep 2026 00:48:04 +0200
Subject: [PATCH] =?UTF-8?q?Fix=20"Voir=20les=20=C3=A9pisodes"=20rendering?=
 =?UTF-8?q?=20as=20a=20bare=20link=20instead=20of=20a=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug report: the button wasn't as visible as the others on a tile.

Cause: the global `button {}` rule in app.css that gives "Lancer une watch
party" its solid green look is tag-scoped, so it never applied to "Voir
les épisodes" - the one .tileBtn that's an <a> (a plain hash link, not a
<button>). "Voir sur Emby" avoided the same fate only because it also
carries .tileBtnLink, which explicitly sets its own background/color.
"Voir les épisodes" had neither, so it rendered as a bare, small,
default-blue link sitting on the tile overlay next to two solid buttons.

Fixed by moving the solid-button look onto .tileBtn itself (tag-agnostic:
background/color/border-radius/font-weight/hover), with .tileBtnLink now
overriding just the two properties that make "Voir sur Emby" read as the
secondary action. This is the semantically right fix, not just a visual
patch: for a Series tile "Voir les épisodes" IS the primary action (a
Series is never itself directly playable - WATCH_PARTY_TYPES in
server/src/index.js - so the two buttons never compete on the same tile)
- it should look like one, matching "Lancer une watch party"'s weight
exactly rather than "Voir sur Emby"'s secondary one.

Verified via computed styles on a mocked library grid (one Movie tile, one
Series tile): "Lancer une watch party" and "Voir les épisodes" now compute
to the identical rgb(82, 181, 75) background / white text / 600 weight /
8px radius, while "Voir sur Emby" on both tiles still computes to the
distinct secondary rgb(38, 38, 38).

docs/architecture.md has the full writeup.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 client/css/app.css   | 25 +++++++++++++++++++++++--
 docs/architecture.md | 15 +++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/client/css/app.css b/client/css/app.css
index 19fb7c0..fe25155 100644
--- a/client/css/app.css
+++ b/client/css/app.css
@@ -340,18 +340,39 @@ button[disabled] { opacity: .5; cursor: default; }
   pointer-events: auto;
 }
 
+/* Base look is the same solid, high-contrast treatment as every other
+   button in the app (see the global `button {}` rule above) - but that
+   rule is tag-scoped, so it never applied to "Voir les épisodes", the one
+   .tileBtn that's an <a>, not a <button> (a plain hash link, so the
+   browser's native navigation handles it with no JS needed). Left
+   unstyled beyond padding/text-align, it rendered as a bare, small,
+   default-blue link sitting on the overlay - much less visible than
+   "Lancer une watch party" (a real <button>, styled by that global rule)
+   or "Voir sur Emby" (an <a>, but with the explicit .tileBtnLink look
+   below) right next to it. Styling .tileBtn itself, tag-agnostic, fixes
+   that - and is the semantically right call besides: for a Series tile,
+   "Voir les épisodes" IS the primary action (a Series is never itself
+   directly playable - see WATCH_PARTY_TYPES in server/src/index.js - so
+   the two never appear on the same tile), not a secondary one. */
 .tileBtn {
   padding: 8px 10px;
   font-size: 12px;
+  font-weight: 600;
   text-align: center;
   text-decoration: none;
+  border-radius: 8px;
+  background: var(--accent);
+  color: white;
 }
 
+.tileBtn:hover { background: var(--accent-bright); }
+
+/* "Voir sur Emby" only: the one secondary/neutral action among the tile
+   buttons - overrides just the two properties that make it read as
+   secondary, on top of .tileBtn's shared sizing/weight/radius above. */
 .tileBtnLink {
   background: var(--panel);
   color: var(--text);
-  border-radius: 8px;
-  font-weight: 600;
 }
 
 .tileBtnLink:hover { background: #333; }
diff --git a/docs/architecture.md b/docs/architecture.md
index 15ff6a3..41930de 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -501,6 +501,21 @@ generic grid:
   `serverId`). `:hover`/`:focus-within` reveal it on mouse/keyboard;
   `@media (hover: none)` keeps it always visible on touch devices, which
   have no hover state at all.
+
+  Bug: "Voir les épisodes" used to render as a bare, default-blue link,
+  much less visible than the other two buttons next to it. The global
+  `button {}` rule (`app.css`) that gives "Lancer une watch party" its
+  solid green look is tag-scoped, so it never applied to "Voir les
+  épisodes" — the one `.tileBtn` that's an `<a>` (a plain hash link) rather
+  than a `<button>`. "Voir sur Emby" avoided the same fate only because it
+  additionally carries `.tileBtnLink`, which explicitly sets a background/
+  color for exactly this reason. Fixed by moving the solid-button look onto
+  `.tileBtn` itself, tag-agnostic, with `.tileBtnLink` now overriding just
+  the two properties that make it read as the secondary action. This also
+  happens to be the semantically correct fix, not just a visual patch: for
+  a Series tile "Voir les épisodes" *is* the primary action (a Series is
+  never itself directly playable, so the two buttons never compete for
+  primacy on the same tile) - it should look like one.
 - **`views/series.js`** (route `/series/:id`): a detail header — poster,
   title + year, overview, a "Voir sur Emby" link — above season tabs
   (`GET /api/catalog/series/:id/seasons`, Emby's `/Shows/{id}/Seasons`) and