From 04928ba7d163d3c5ecec89196f36b4cb94a01381 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: Fri, 9 May 2025 21:16:21 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20Instance=20Ticker=E3=81=AE?=
 =?UTF-8?q?=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E6=94=B9=E5=96=84=20(#1594?=
 =?UTF-8?q?6)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(tms): インスタンス情報の表示位置 (taiyme#198)

* migrate

* fix(InstanceTicker): リモートサーバーのアイコンが初期画像になる問題 (taiyme#211)

* refactor(InstanceTicker): 参照の構造を変更

Co-Authored-By: taiy <53635909+taiyme@users.noreply.github.com>

* perf(TmsInstanceTicker): color関数に変更 (taiyme#283)

* :art:

* Update Changelog

* remove unused property

* revert unrelated changes

* fix

* 実装を簡略化

* :art:

* Update CHANGELOG.md

* 色の計算をコンポーネント内に移動

---------

Co-authored-by: taiy <53635909+taiyme@users.noreply.github.com>
---
 CHANGELOG.md                                  |  2 ++
 .../src/components/MkInstanceTicker.vue       | 27 +++++++++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb03667257..abc4bbfd93 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,8 @@
 	- チャットなど、一部の機能は引き続き設定に関わらずWebsocket接続が行われます
 - Enhance: メモリ使用量を軽減しました
 - Enhance: リプライ元にアンケートがあることが表示されるように
+- Enhance: ノートのサーバー情報のデザインを改善・パフォーマンス向上  
+  (Based on https://github.com/taiyme/misskey/pull/198, https://github.com/taiyme/misskey/pull/211, https://github.com/taiyme/misskey/pull/283)
 - Fix: "時計"ウィジェット(Clock)において、Transparent設定が有効でも、その背景が透過されない問題を修正
 
 ### Server
diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue
index 380fb7b2d8..62ff806096 100644
--- a/packages/frontend/src/components/MkInstanceTicker.vue
+++ b/packages/frontend/src/components/MkInstanceTicker.vue
@@ -12,6 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed } from 'vue';
+import tinycolor from 'tinycolor2';
 import { instanceName as localInstanceName } from '@@/js/config.js';
 import type { CSSProperties } from 'vue';
 import { instance as localInstance } from '@/instance.js';
@@ -43,10 +44,33 @@ const faviconUrl = computed(() => {
 	return getProxiedImageUrlNullable(imageSrc);
 });
 
+type ITickerColors = {
+	readonly bg: string;
+	readonly fg: string;
+};
+
+const TICKER_YUV_THRESHOLD = 191 as const;
+const TICKER_FG_COLOR_LIGHT = '#ffffff' as const;
+const TICKER_FG_COLOR_DARK = '#2f2f2fcc' as const;
+
+function getTickerColors(bgHex: string): ITickerColors {
+	const tinycolorInstance = tinycolor(bgHex);
+	const { r, g, b } = tinycolorInstance.toRgb();
+	const yuv = 0.299 * r + 0.587 * g + 0.114 * b;
+	const fgHex = yuv > TICKER_YUV_THRESHOLD ? TICKER_FG_COLOR_DARK : TICKER_FG_COLOR_LIGHT;
+
+	return {
+		fg: fgHex,
+		bg: bgHex,
+	} as const satisfies ITickerColors;
+}
+
 const themeColorStyle = computed<CSSProperties>(() => {
 	const themeColor = (props.host == null ? localInstance.themeColor : props.instance?.themeColor) ?? '#777777';
+	const colors = getTickerColors(themeColor);
 	return {
-		background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`,
+		background: `linear-gradient(90deg, ${colors.bg}, ${colors.bg}00)`,
+		color: colors.fg,
 	};
 });
 </script>
@@ -60,7 +84,6 @@ $height: 2ex;
 	height: $height;
 	border-radius: 4px 0 0 4px;
 	overflow: clip;
-	color: #fff;
 
 	// text-shadowは重いから使うな