From 56af62029a324fba8a5389d339a45c82b9ff7e13 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 18 Sep 2025 00:06:09 +0900
Subject: [PATCH] [Update] Add transliteration position navigator when hiragana
 and romaji is both enabled and mouse hovered.

---
 .../log_box/message_container/MessageContainer.jsx   | 12 ++++++------
 .../message_container/MessageContainer.module.scss   |  7 +++++++
 2 files changed, 13 insertions(+), 6 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 3c7c0c2c..d53ccaa6 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,17 +94,17 @@ const MessageWithTransliteration = ({ item }) => {
         const hira = token.hira ?? "";
         const hepburn = token.hepburn ?? "";
 
-        if ((hira && orig === hira)) {
+        if (hira && hira === orig && hepburn) {
             return (
-                <span key={key} title={hepburn} className={styles.token}>
+                <span key={key} title={hepburn} className={styles.with_hepburn}>
                     {orig}
                 </span>
             );
         }
 
-        if (hira && hira !== orig) {
+        if (hira && hira !== orig && hepburn) {
             return (
-                <ruby key={key} title={hepburn} className={styles.tokenRuby}>
+                <ruby key={key} title={hepburn} className={styles.with_hepburn}>
                     {orig}
                     <rt>{hira}</rt>
                 </ruby>
@@ -113,7 +113,7 @@ const MessageWithTransliteration = ({ item }) => {
 
         if (hepburn && hepburn !== orig) {
             return (
-                <ruby key={key} className={styles.tokenRuby}>
+                <ruby key={key} className={styles.ruby}>
                     {orig}
                     <rt>{hepburn}</rt>
                 </ruby>
@@ -121,7 +121,7 @@ const MessageWithTransliteration = ({ item }) => {
         }
 
         return (
-            <span key={key} className={styles.token}>
+            <span key={key} className={styles.original_only}>
                 {orig}
             </span>
         );
diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
index ea82b297..b0986c3f 100644
--- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
+++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
@@ -112,4 +112,11 @@
         font-size: 1.2rem;
         color: var(--dark_500_color);
     }
+}
+
+// For ruby
+.with_hepburn {
+    &:hover {
+        color: var(--dark_500_color);
+    }
 }
\ No newline at end of file