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

packages/frontend/src/scripts/tms/instance-ticker.ts → packages/frontend/src/components/TmsInstanceTicker.impl.ts

@@ -7,43 +7,59 @@ import { host } from '@/config.js';
 import { instance as localInstance } from '@/instance.js';
 import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
 import { type HEX, hexToRgb } from '@/scripts/tms/color.js';
-import { type TickerProps } from '@/components/TmsInstanceTicker.vue';
+
+export type TmsInstanceTickerProps = {
+	readonly instance?: {
+		readonly name?: string | null;
+		// NOTE: リモートサーバーにおいてiconUrlを参照すると意図した画像にならない https://github.com/taiyme/misskey/issues/210
+		// readonly iconUrl?: string | null;
+		readonly faviconUrl?: string | null;
+		readonly themeColor?: string | null;
+	} | null;
+	readonly channel?: {
+		readonly name: string;
+		readonly color: string;
+	} | null;
+	readonly position: TickerPosition;
+};
+
+export type TickerPosition = 'default' | 'leftVerticalBar' | 'rightVerticalBar' | 'leftWatermark' | 'rightWatermark';
 
 //#region ticker info
-type TickerInfo = {
+type ITickerInfo = {
 	readonly name: string;
 	readonly iconUrl: string;
 	readonly themeColor: string;
 };
 
 const TICKER_BG_COLOR_DEFAULT = '#777777' as const;
 
-export const getTickerInfo = (props: TickerProps): TickerInfo => {
+export const getTickerInfo = (props: TmsInstanceTickerProps) => {
 	if (props.channel != null) {
 		return {
 			name: props.channel.name,
 			iconUrl: getProxiedImageUrlNullable(localInstance.iconUrl, 'preview') ?? '/favicon.ico',
 			themeColor: props.channel.color,
-		} as const satisfies TickerInfo;
+		} as const satisfies ITickerInfo;
 	}
 	if (props.instance != null) {
 		return {
 			name: props.instance.name ?? '',
 			// NOTE: リモートサーバーにおいてiconUrlを参照すると意図した画像にならない https://github.com/taiyme/misskey/issues/210
 			iconUrl: getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png',
 			themeColor: props.instance.themeColor ?? TICKER_BG_COLOR_DEFAULT,
-		} as const satisfies TickerInfo;
+		} as const satisfies ITickerInfo;
 	}
 	return {
 		name: localInstance.name ?? host,
 		iconUrl: getProxiedImageUrlNullable(localInstance.iconUrl, 'preview') ?? '/favicon.ico',
 		themeColor: localInstance.themeColor ?? document.querySelector<HTMLMetaElement>('meta[name="theme-color-orig"]')?.content ?? TICKER_BG_COLOR_DEFAULT,
-	} as const satisfies TickerInfo;
+	} as const satisfies ITickerInfo;
 };
 //#endregion ticker info
 
 //#region ticker colors
-type TickerColors = {
+type ITickerColors = {
 	readonly '--ticker-bg': string;
 	readonly '--ticker-fg': string;
 	readonly '--ticker-bg-rgb': string;
@@ -53,9 +69,9 @@ const TICKER_YUV_THRESHOLD = 191 as const;
 const TICKER_FG_COLOR_LIGHT = '#ffffff' as const;
 const TICKER_FG_COLOR_DARK = '#2f2f2fcc' as const;
 
-const tickerColorsCache = new Map<HEX, TickerColors>();
+const tickerColorsCache = new Map<HEX, ITickerColors>();
 
-export const getTickerColors = (info: TickerInfo): TickerColors => {
+export const getTickerColors = (info: ITickerInfo) => {
 	const bgHex = info.themeColor;
 	const cachedTickerColors = tickerColorsCache.get(bgHex);
 	if (cachedTickerColors != null) return cachedTickerColors;
@@ -68,7 +84,7 @@ export const getTickerColors = (info: TickerInfo): TickerColors => {
 		'--ticker-fg': fgHex,
 		'--ticker-bg': bgHex,
 		'--ticker-bg-rgb': `${r}, ${g}, ${b}`,
-	} as const satisfies TickerColors;
+	} as const satisfies ITickerColors;
 
 	tickerColorsCache.set(bgHex, tickerColors);
 
@@ -77,20 +93,20 @@ export const getTickerColors = (info: TickerInfo): TickerColors => {
 //#endregion ticker colors
 
 //#region ticker state
-type TickerState = {
+type ITickerState = {
 	readonly normal: boolean;
 	readonly vertical: boolean;
 	readonly watermark: boolean;
 	readonly left: boolean;
 	readonly right: boolean;
 };
 
-export const getTickerState = (props: TickerProps): TickerState => {
+export const getTickerState = (props: TmsInstanceTickerProps) => {
 	const vertical = props.position === 'leftVerticalBar' || props.position === 'rightVerticalBar';
 	const watermark = props.position === 'leftWatermark' || props.position === 'rightWatermark';
 	const normal = !vertical && !watermark;
 	const left = props.position === 'leftVerticalBar' || props.position === 'leftWatermark';
 	const right = props.position === 'rightVerticalBar' || props.position === 'rightWatermark';
-	return { normal, vertical, watermark, left, right } as const satisfies TickerState;
+	return { normal, vertical, watermark, left, right } as const satisfies ITickerState;
 };
 //#endregion ticker state

packages/frontend/src/components/TmsInstanceTicker.vue

@@ -22,25 +22,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { getTickerColors, getTickerInfo, getTickerState } from '@/scripts/tms/instance-ticker.js';
-import { type tmsStore } from '@/tms/store.js';
-
-export type TickerProps = {
-	readonly instance?: {
-		readonly name?: string | null;
-		// NOTE: リモートサーバーにおいてiconUrlを参照すると意図した画像にならない https://github.com/taiyme/misskey/issues/210
-		// readonly iconUrl?: string | null;
-		readonly faviconUrl?: string | null;
-		readonly themeColor?: string | null;
-	} | null;
-	readonly channel?: {
-		readonly name: string;
-		readonly color: string;
-	} | null;
-	readonly position: typeof tmsStore.state.tickerPosition;
-};
-
-const props = defineProps<TickerProps>();
+import {
+	type TmsInstanceTickerProps,
+	getTickerColors,
+	getTickerInfo,
+	getTickerState,
+} from '@/components/TmsInstanceTicker.impl.js';
+
+const props = defineProps<TmsInstanceTickerProps>();
 
 const tickerInfoRef = computed(() => getTickerInfo(props));
 const tickerColorsRef = computed(() => getTickerColors(tickerInfoRef.value));

packages/frontend/src/tms/store.ts

@@ -12,7 +12,7 @@ import { Storage } from '@/pizzax.js';
 export const tmsStore = markRaw(new Storage('tmsMain', {
 	tickerPosition: {
 		where: 'account',
-		default: 'default' as 'default' | 'leftVerticalBar' | 'rightVerticalBar' | 'leftWatermark' | 'rightWatermark',
+		default: 'default' as import('@/components/TmsInstanceTicker.impl.js').TickerPosition,
 	},
 	superMenuDisplayMode: {
 		where: 'deviceAccount',