公開範囲、見やすく。

locales/index.d.ts

@@ -832,6 +832,7 @@ export interface Locale {
     "GamingSpeedChangeInfo": string;
     "emailNotConfiguredWarning": string;
     "ratio": string;
+    "showVisibilityColor": string;
     "previewNoteText": string;
     "customCss": string;
     "customCssWarn": string;

locales/ja-JP.yml

@@ -829,6 +829,7 @@ GamingSpeedChange: "ゲーミングの光るスピードの調整"
 GamingSpeedChangeInfo: "左にすれば早くなる、右にすれば遅くなる。それだけ。"
 emailNotConfiguredWarning: "メールアドレスの設定がされていません。"
 ratio: "比率"
+showVisibilityColor: "ノートの公開範囲を色付けする"
 previewNoteText: "本文をプレビュー"
 customCss: "カスタムCSS"
 customCssWarn: "この設定は必ず知識のある方が行ってください。不適切な設定を行うとクライアントが正常に使用できなくなる恐れがあります。"

packages/frontend/src/components/MkNote.vue

@@ -9,7 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	v-show="!isDeleted"
 	ref="el"
 	v-hotkey="keymap"
-	:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
+	:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover } ,{[$style.home] : defaultStore.state.showVisibilityColor && note.visibility === 'home',[$style.followers] : defaultStore.state.showVisibilityColor && note.visibility === 'followers',[$style.specified] : defaultStore.state.showVisibilityColor && note.visibility === 'specified'}]"
+
 	:tabindex="!isDeleted ? '-1' : undefined"
 >
 	<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
@@ -33,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkTime :time="note.createdAt"/>
 			</button>
 			<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
-				<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
+				<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>
 			</span>
@@ -176,8 +177,7 @@ const props = defineProps<{
 }>();
 
 const inChannel = inject('inChannel', null);
-const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);
+const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);;
-
 let note = $ref(deepClone(props.note));
 
 // plugin
@@ -480,6 +480,8 @@ function focusAfter() {
 	focusNext(el.value);
 }
 
+
+
 function readPromo() {
 	os.api('promo/read', {
 		noteId: appearNote.id,
@@ -489,13 +491,22 @@ function readPromo() {
 </script>
 
 <style lang="scss" module>
+
 .root {
 	position: relative;
 	transition: box-shadow 0.1s ease;
 	font-size: 1.05em;
 	overflow: clip;
 	contain: content;
-
+&.home{
+  background-color: rgba( var(--homeColor) , 0.20) !important;
+}
+  &.followers{
+    background-color: rgba(var(--followerColor), 0.20) !important;
+  }
+  &.specified{
+    background-color: rgba(var(--specifiedColor), 0.20) !important;
+  }
 	// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
 	// 下の方までスクロールすると上のノートの高さがここで決め打ちされたものに変化し、表示しているノートの位置が変わってしまう
 	// ノートがマウントされたときに自身の高さを取得し contain-intrinsic-size を設定しなおせばほぼ解決できそうだが、
@@ -940,4 +951,7 @@ function readPromo() {
 	padding: 0 6px;
 	opacity: .8;
 }
+.root:has(.ti-home){
+	background-color: rgba(255, 255, 100, 0.10) !important;
+}
 </style>

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

@@ -48,6 +48,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
 				<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
 				<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
+				<MkSwitch v-model="showVisibilityColor">{{ i18n.ts.showVisibilityColor}}</MkSwitch>
+        <MkColorInput v-if="showVisibilityColor" v-model="homeColor">
+          <template #label>{{ i18n.ts._visibility.home }}</template>
+        </MkColorInput>
+        <MkColorInput v-if="showVisibilityColor" v-model="followerColor">
+          <template #label>{{ i18n.ts._visibility.followers }}</template>
+        </MkColorInput>
+        <MkColorInput v-if="showVisibilityColor" v-model="specifiedColor">
+          <template #label>{{ i18n.ts._visibility.specified }}</template>
+        </MkColorInput>
 				<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
 				<MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch>
 				<MkSwitch v-model="showGapBetweenNotesInTimeline">{{ i18n.ts.showGapBetweenNotesInTimeline }}</MkSwitch>
@@ -212,6 +222,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { globalEvents } from '@/events';
 import { claimAchievement } from '@/scripts/achievements.js';
+import MkColorInput from "@/components/MkColorInput.vue";
 
 const lang = ref(miLocalStorage.getItem('lang'));
 const fontSize = ref(miLocalStorage.getItem('fontSize'));
@@ -255,6 +266,9 @@ const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostF
 const showFixedPostFormInChannel = computed(defaultStore.makeGetterSetter('showFixedPostFormInChannel'));
 const numberOfPageCache = computed(defaultStore.makeGetterSetter('numberOfPageCache'));
 const numberOfGamingSpeed = computed(defaultStore.makeGetterSetter('numberOfGamingSpeed'));
+const homeColor = computed(defaultStore.makeGetterSetter('homeColor'));
+const followerColor = computed(defaultStore.makeGetterSetter('followerColor'));
+const specifiedColor = computed(defaultStore.makeGetterSetter('specifiedColor'));
 const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'));
 const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
 const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
@@ -266,12 +280,32 @@ const showTimelineReplies = computed(defaultStore.makeGetterSetter('showTimeline
 const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
 const enableGamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
 const showMediaTimeline = computed(defaultStore.makeGetterSetter('showMediaTimeline'));
-
+const showVisibilityColor = computed(defaultStore.makeGetterSetter('showVisibilityColor'))
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);
 	miLocalStorage.removeItem('locale');
 });
+
 document.documentElement.style.setProperty('--gamingspeed', numberOfGamingSpeed.value+'s');
+function hexToRgb(hex) {
+  // 16進数のカラーコードから "#" を除去
+  hex = hex.replace(/^#/, '');
+
+  // 16進数をRGBに変換
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+
+  return `${r},${g},${b}`;
+}
+document.documentElement.style.setProperty('--homeColor', hexToRgb(homeColor.value));
+document.documentElement.style.setProperty("--followerColor",hexToRgb(followerColor.value));
+document.documentElement.style.setProperty("--specifiedColor",hexToRgb(specifiedColor.value))
+watch([homeColor,specifiedColor,followerColor], ()=>{
+  document.documentElement.style.setProperty('--homeColor', hexToRgb(homeColor.value));
+  document.documentElement.style.setProperty("--followerColor",hexToRgb(followerColor.value));
+  document.documentElement.style.setProperty("--specifiedColor",hexToRgb(specifiedColor.value))
+})
 watch(numberOfGamingSpeed, () =>{
   document.documentElement.style.setProperty('--gamingspeed', numberOfGamingSpeed.value+'s');
 })
@@ -290,7 +324,6 @@ watch(useSystemFont, () => {
 		miLocalStorage.removeItem('useSystemFont');
 	}
 });
-
 watch([
 	lang,
 	fontSize,
@@ -306,6 +339,7 @@ watch([
 	highlightSensitiveMedia,
 	keepScreenOn,
 	showMediaTimeline,
+  showVisibilityColor,
 ], async () => {
 	await reloadAsk();
 });

packages/frontend/src/store.ts

@@ -348,6 +348,18 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 3,
 	},
+	specifiedColor:{
+		where: 'device',
+		default: '#FFFF64',
+	},
+	followerColor:{
+		where: 'device',
+		default: '#FF00FF',
+	},
+	homeColor:{
+		where: 'device',
+		default: '#00FFFF',
+	},
 	numberOfGamingSpeed: {
 		where: 'device',
 		default: 44,
@@ -364,6 +376,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	showVisibilityColor:{
+		where: 'device',
+		default: false,
+	},
 	reactionsDisplaySize: {
 		where: 'device',
 		default: 'medium' as 'small' | 'medium' | 'large',

packages/frontend/src/ui/_common_/navbar-for-mobile.vue

@@ -84,9 +84,23 @@ import {instance} from '@/instance';
 
 let bannerUrl = ref(defaultStore.state.bannerUrl);
 let iconUrl = ref(defaultStore.state.iconUrl);
+function hexToRgb(hex) {
+  // 16進数のカラーコードから "#" を除去
+  hex = hex.replace(/^#/, '');
 
+  // 16進数をRGBに変換
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+
+  return `${r},${g},${b}`;
+}
 const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
 const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
+document.documentElement.style.setProperty('--homeColor', hexToRgb(defaultStore.state.homeColor));
+document.documentElement.style.setProperty("--followerColor",hexToRgb(defaultStore.state.followerColor));
+document.documentElement.style.setProperty("--specifiedColor",hexToRgb(defaultStore.state.specifiedColor))
+document.documentElement.style.setProperty('--gamingspeed', defaultStore.state.numberOfGamingSpeed+'s');
 
 let gaming = ref()
 if (darkMode.value) {

packages/frontend/src/ui/_common_/navbar.vue

@@ -94,6 +94,21 @@ import {$i, openAccountMenu as openAccountMenu_} from '@/account';
 import {bannerDark, bannerLight, defaultStore, iconDark, iconLight} from '@/store';
 import {i18n} from '@/i18n';
 import {instance} from '@/instance';
+function hexToRgb(hex) {
+  // 16進数のカラーコードから "#" を除去
+  hex = hex.replace(/^#/, '');
+
+  // 16進数をRGBに変換
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+
+  return `${r},${g},${b}`;
+}
+document.documentElement.style.setProperty('--homeColor', hexToRgb(defaultStore.state.homeColor));
+document.documentElement.style.setProperty("--followerColor",hexToRgb(defaultStore.state.followerColor));
+document.documentElement.style.setProperty("--specifiedColor",hexToRgb(defaultStore.state.specifiedColor))
+document.documentElement.style.setProperty('--gamingspeed', defaultStore.state.numberOfGamingSpeed+'s');
 
 const iconOnly = ref(false);
 let bannerUrl = ref(defaultStore.state.bannerUrl);