From f9e39457ba6d24ac00d52171f37664ca2c01ef07 Mon Sep 17 00:00:00 2001
From: Natalie Bridgers <natalie@stream.place>
Date: Wed, 24 Jun 2026 17:00:03 -0500
Subject: [PATCH] fix(player-offline): replace broken <1> Trans placeholder
 with JSX bolding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The user-offline-message i18n key uses Fluent's numeric
placeholder syntax (<1>...</1>). With i18next-fluent + Trans,
this didn't render — the literal '<1>' showed up in the rendered
output instead of being replaced with the bolded handle. The
combination of Fluent selectors and numeric placeholders
through i18next-fluent doesn't round-trip cleanly.

Switched to plain JSX composition: the message is inline in the
component with a <span className='font-semibold'> around the
handle. We lose the source/handle as a localized interpolation,
but the offline copy is small and the screenshot the user pointed
at is the canonical text anyway.

Also: the recommendation case reads 'they recommend' and the
no-recommendation case reads 'is offline right now. Check back
later.' — closer to the Twitch reference text.
---
 .../src/components/stream/player-offline.tsx  | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/js/web/src/components/stream/player-offline.tsx b/js/web/src/components/stream/player-offline.tsx
index 035e72cc..be4c8a42 100644
--- a/js/web/src/components/stream/player-offline.tsx
+++ b/js/web/src/components/stream/player-offline.tsx
@@ -108,21 +108,31 @@ export function PlayerOffline({
       <div aria-hidden className="absolute inset-0 bg-black/40" />
 
       <div className="relative flex h-full items-center gap-4 px-6">
-        <div className="flex min-w-0 flex-1 flex-col items-center justify-center gap-2 text-center">
+        <div className="flex min-w-0 flex-[3] flex-col items-start justify-center gap-2 text-left">
           <span className="rounded-full border border-white/20 bg-black/40 px-2.5 py-0.5 text-[10px] font-semibold tracking-wider text-white/80 uppercase">
             {t("offline")}
           </span>
+          {recommendation ? (
+            <p className="text-base text-white">
+              Looks like <span className="font-semibold">@{handle}</span> is
+              offline, but they recommend checking out:
+            </p>
+          ) : (
+            <p className="text-base text-white">
+              Looks like <span className="font-semibold">@{handle}</span> is
+              offline right now. Check back later.
+            </p>
+          )}
           {avatar && (
-            <img
-              src={avatar}
-              alt=""
-              className="h-12 w-12 rounded-full border-2 border-white/20 object-cover"
-            />
+            <div className="mt-1 flex items-center gap-2">
+              <img
+                src={avatar}
+                alt=""
+                className="h-6 w-6 rounded-full border border-white/20 object-cover"
+              />
+              <p className="text-sm font-medium text-white">@{handle}</p>
+            </div>
           )}
-          <p className="text-sm font-medium text-white">@{handle}</p>
-          <p className="text-xs text-white/60">
-            {t("user-not-streaming-check-back", { user: handle })}
-          </p>
         </div>
 
         {recommendation && (
@@ -159,7 +169,7 @@ function RecommendationEmbed({
   }, [did]);
 
   return (
-    <div className="flex w-[42%] max-w-[260px] flex-col items-stretch gap-1.5">
+    <div className="flex w-[42%] max-w-[280px] flex-col items-stretch gap-1.5">
       <div className="relative aspect-video w-full overflow-hidden rounded-md border border-white/10 bg-black">
         <Player
           src={playlistUrl}
-- 
2.51.2