enhance(frontend): TL上のノートを公開範囲に応じて色分けするように

locales/index.d.ts

@@ -5190,6 +5190,10 @@ export interface Locale extends ILocale {
      * 名前に禁止されている文字列が含まれています。この名前を使用したい場合は、サーバー管理者にお問い合わせください。
      */
     "yourNameContainsProhibitedWordsDescription": string;
+    /**
+     * 公開範囲に応じて色分けする
+     */
+    "enableNoteVisibilityColor": string;
     "_abuseUserReport": {
         /**
          * 転送

locales/ja-JP.yml

@@ -1293,6 +1293,8 @@ prohibitedWordsForNameOfUser: "禁止ワード（ユーザーの名前）"
 prohibitedWordsForNameOfUserDescription: "このリストに含まれる文字列がユーザーの名前に含まれる場合、ユーザーの名前の変更を拒否します。モデレーター権限を持つユーザーはこの制限の影響を受けません。"
 yourNameContainsProhibitedWords: "変更しようとした名前に禁止された文字列が含まれています"
 yourNameContainsProhibitedWordsDescription: "名前に禁止されている文字列が含まれています。この名前を使用したい場合は、サーバー管理者にお問い合わせください。"
+enableNoteVisibilityColor: "公開範囲に応じて色分けする"
+enableNoteVisibilityColor: "ノートの詳細表示ページなど、一部の箇所には適用されません。"
 
 _abuseUserReport:
   forward: "転送"

packages/frontend-shared/themes/_dark.json5

@@ -79,6 +79,10 @@
 		codeBoolean: '#c59eff',
 		deckBg: '#000',
 		htmlThemeColor: '@bg',
+		notePublic: 'transparent',
+		noteHome: '#43b3f4',
+		noteSpecified: '#f09e05',
+		noteFollowers: '#c54630',
 		X3: 'rgba(255, 255, 255, 0.05)',
 		X4: 'rgba(255, 255, 255, 0.1)',
 		X5: 'rgba(255, 255, 255, 0.05)',

packages/frontend-shared/themes/_light.json5

@@ -79,6 +79,10 @@
 		codeBoolean: '#62b70c',
 		deckBg: ':darken<3<@bg',
 		htmlThemeColor: '@bg',
+		notePublic: 'transparent',
+		noteHome: '#43b3f4',
+		noteSpecified: '#f09e05',
+		noteFollowers: '#c54630',
 		X3: 'rgba(0, 0, 0, 0.05)',
 		X4: 'rgba(0, 0, 0, 0.1)',
 		X5: 'rgba(0, 0, 0, 0.05)',

packages/frontend/src/components/MkNote.vue

@@ -9,7 +9,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 	v-show="!isDeleted"
 	ref="rootEl"
 	v-hotkey="keymap"
-	:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover, [$style.skipRender]: defaultStore.state.skipNoteRender }]"
+	:class="[$style.root, {
+		[$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover,
+		[$style.skipRender]: defaultStore.state.skipNoteRender,
+		[$style.noteVisibilityColor]: defaultStore.state.enableNoteVisibilityColor,
+		[$style.bgPublic]: appearNote.visibility === 'public',
+		[$style.bgHome]: appearNote.visibility === 'home',
+		[$style.bgFollowers]: appearNote.visibility === 'followers',
+		[$style.bgSpecified]: appearNote.visibility === 'specified',
+	}]"
 	:tabindex="isDeleted ? '-1' : '0'"
 >
 	<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
@@ -618,6 +626,8 @@ function emitUpdReaction(emoji: string, delta: number) {
 	font-size: 1.05em;
 	overflow: clip;
 	contain: content;
+	--noteBg: var(--MI_THEME-panel);
+	background-color: var(--noteBg);
 
 	&:focus-visible {
 		outline: none;
@@ -677,6 +687,26 @@ function emitUpdReaction(emoji: string, delta: number) {
 			visibility: visible;
 		}
 	}
+
+	&.noteVisibilityColor {
+		--noteBg: color-mix(in srgb, var(--MI_THEME-panel), var(--noteThemeColor) 10%);
+
+		&.bgPublic {
+			--noteThemeColor: var(--MI_THEME-notePublic);
+		}
+
+		&.bgHome {
+			--noteThemeColor: var(--MI_THEME-noteHome);
+		}
+
+		&.bgFollowers {
+			--noteThemeColor: var(--MI_THEME-noteFollowers);
+		}
+
+		&.bgSpecified {
+			--noteThemeColor: var(--MI_THEME-noteSpecified);
+		}
+	}
 }
 
 .skipRender {
@@ -854,7 +884,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	z-index: 2;
 	width: 100%;
 	height: 64px;
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--noteBg), color(from var(--noteBg) srgb r g b / 0));
 
 	&:hover > .collapsedLabel {
 		background: var(--MI_THEME-panelHighlight);

packages/frontend/src/components/MkNoteHeader.vue

@@ -23,7 +23,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkA v-else :to="notePage(note)">
 			<MkTime :time="note.createdAt" colored/>
 		</MkA>
-		<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
+		<span
+			v-if="note.visibility !== 'public'"
+			style="margin-left: 0.5em;"
+			:class="{
+				[$style.enableColorlize]: defaultStore.state.enableNoteVisibilityColor,
+				[$style.colorHome]: note.visibility === 'home',
+				[$style.colorFollowers]: note.visibility === 'followers',
+				[$style.colorSpecified]: note.visibility === 'specified',
+			}"
+			:title="i18n.ts._visibility[note.visibility]"
+		>
 			<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
 			<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
 			<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
@@ -56,6 +66,20 @@ const mock = inject<boolean>('mock', false);
 	white-space: nowrap;
 }
 
+.enableColorlize {
+	&.colorHome {
+		color: var(--MI_THEME-noteHome);
+	}
+
+	&.colorFollowers {
+		color: var(--MI_THEME-noteFollowers);
+	}
+
+	&.colorSpecified {
+		color: var(--MI_THEME-noteSpecified);
+	}
+}
+
 .name {
 	flex-shrink: 1;
 	display: block;

packages/frontend/src/pages/settings/general.vue

@@ -47,6 +47,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #label>{{ i18n.ts.collapseRenotes }}</template>
 					<template #caption>{{ i18n.ts.collapseRenotesDescription }}</template>
 				</MkSwitch>
+				<MkSwitch v-model="enableNoteVisibilityColor">
+					<template #label>{{ i18n.ts.enableNoteVisibilityColor }}</template>
+					<template #caption>{{ i18n.ts.enableNoteVisibilityColorDescription }}</template>
+				</MkSwitch>
 				<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
 				<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
 				<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
@@ -297,6 +301,7 @@ const menuStyle = computed(defaultStore.makeGetterSetter('menuStyle'));
 const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
 const forceShowAds = computed(defaultStore.makeGetterSetter('forceShowAds'));
 const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
+const enableNoteVisibilityColor = computed(defaultStore.makeGetterSetter('enableNoteVisibilityColor'));
 const highlightSensitiveMedia = computed(defaultStore.makeGetterSetter('highlightSensitiveMedia'));
 const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
 const nsfw = computed(defaultStore.makeGetterSetter('nsfw'));
@@ -352,6 +357,7 @@ watch([
 	squareAvatars,
 	showNoteActionsOnlyHover,
 	showGapBetweenNotesInTimeline,
+	enableNoteVisibilityColor,
 	instanceTicker,
 	overridedDeviceKind,
 	mediaListWithOneImageAppearance,

packages/frontend/src/store.ts

@@ -472,6 +472,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	enableNoteVisibilityColor: {
+		where: 'device',
+		default: false,
+	},
 
 	sound_masterVolume: {
 		where: 'device',