From 1cebad0ddb587ff506a2ff141e92bd2205ef54be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 5 Nov 2025 09:45:42 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20navbar=E3=81=AE=E3=83=AA?=
 =?UTF-8?q?=E3=82=A2=E3=83=AB=E3=82=BF=E3=82=A4=E3=83=A0=E3=83=A2=E3=83=BC?=
 =?UTF-8?q?=E3=83=89=E3=81=AE=E3=82=AA=E3=83=B3=E3=82=AA=E3=83=95=E7=8A=B6?=
 =?UTF-8?q?=E6=85=8B=E3=81=AE=E8=A1=A8=E7=A4=BA=E3=82=92=E3=82=8F=E3=81=8B?=
 =?UTF-8?q?=E3=82=8A=E3=82=84=E3=81=99=E3=81=8F=20(#16748)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): navbarのリアルタイムモードのオンオフをわかりやすく

* Update Changelog

* remove unused imports
---
 CHANGELOG.md                                 | 1 +
 packages/frontend/src/ui/_common_/navbar.vue | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4b08a76093..44692f5a6d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 ### Client
 - Fix: 紙吹雪エフェクトがアニメーション設定を考慮せず常に表示される問題を修正
+- Fix: ナビゲーションバーのリアルタイムモード切替ボタンの状態をよりわかりやすく表示するように
 
 ### Server
 -
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index b0e45eafcd..f37e7ae85e 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -11,7 +11,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<img :src="instance.iconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon" style="viewTransitionName: navbar-serverIcon;"/>
 			</button>
 			<button v-if="!iconOnly" v-tooltip.noDelay.right="i18n.ts.realtimeMode" class="_button" :class="[$style.realtimeMode, store.r.realtimeMode.value ? $style.on : null]" @click="toggleRealtimeMode">
-				<i class="ti ti-bolt ti-fw"></i>
+				<i v-if="store.r.realtimeMode.value" class="ti ti-bolt ti-fw"></i>
+				<i v-else class="ti ti-bolt-off ti-fw"></i>
 			</button>
 		</div>
 		<div :class="$style.middle">
@@ -54,7 +55,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<i class="ti ti-apps ti-fw"></i>
 			</button>
 			<button v-if="iconOnly" v-tooltip.noDelay.right="i18n.ts.realtimeMode" class="_button" :class="[$style.realtimeMode, store.r.realtimeMode.value ? $style.on : null]" @click="toggleRealtimeMode">
-				<i class="ti ti-bolt ti-fw"></i>
+				<i v-if="store.r.realtimeMode.value" class="ti ti-bolt ti-fw"></i>
+				<i v-else class="ti ti-bolt-off ti-fw"></i>
 			</button>
 			<button v-tooltip.noDelay.right="i18n.ts.note" class="_button" :class="[$style.post]" data-cy-open-post-form @click="() => { os.post(); }">
 				<i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{ i18n.ts.note }}</span>