From 957cddfe1882c8219e820e9ebd3cb0992a8aa563 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 30 Sep 2025 04:55:23 +0900
Subject: [PATCH] [bugfix] UI: Transliteration: Fix the bug that isn't shown
 when only hiragana or only hepburn is provided.

---
 .../message_container/MessageContainer.jsx    | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
index d53ccaa6..cb38e838 100644
--- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
+++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
@@ -94,6 +94,7 @@ const MessageWithTransliteration = ({ item }) => {
         const hira = token.hira ?? "";
         const hepburn = token.hepburn ?? "";
 
+        // Only hovered romaji if it exists. (No ruby cuz 'orig' and 'hira' are same.)
         if (hira && hira === orig && hepburn) {
             return (
                 <span key={key} title={hepburn} className={styles.with_hepburn}>
@@ -102,7 +103,8 @@ const MessageWithTransliteration = ({ item }) => {
             );
         }
 
-        if (hira && hira !== orig && hepburn) {
+        // Ruby hiragana and hovered romaji.
+        if (hira && hepburn) {
             return (
                 <ruby key={key} title={hepburn} className={styles.with_hepburn}>
                     {orig}
@@ -111,15 +113,20 @@ const MessageWithTransliteration = ({ item }) => {
             );
         }
 
-        if (hepburn && hepburn !== orig) {
-            return (
-                <ruby key={key} className={styles.ruby}>
-                    {orig}
-                    <rt>{hepburn}</rt>
-                </ruby>
-            );
+        // Ruby romaji or hiragana.
+        if (hepburn || hira) {
+            const ruby = hepburn ? hepburn : hira;
+            if (ruby !== orig) {
+                return (
+                    <ruby key={key} className={styles.ruby}>
+                        {orig}
+                        <rt>{ruby}</rt>
+                    </ruby>
+                );
+            };
         }
 
+        // Nothing. Original only.
         return (
             <span key={key} className={styles.original_only}>
                 {orig}