From dd7b6f92dfc74148d7ee7fdcffbef59c0df9dfb6 Mon Sep 17 00:00:00 2001
From: mattyatea <mattyacocacora0@gmail.com>
Date: Tue, 26 Sep 2023 10:54:46 +0900
Subject: [PATCH] =?UTF-8?q?=E5=85=AC=E9=96=8B=E7=AF=84=E5=9B=B2=E3=81=AB?=
 =?UTF-8?q?=E8=89=B2=E4=BB=98=E3=81=91(localonly)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkNote.vue   | 359 ++++++++++--------
 .../frontend/src/pages/settings/general.vue   |   4 +
 2 files changed, 206 insertions(+), 157 deletions(-)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 223e8f818d..611796d035 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -4,140 +4,160 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div
-	v-if="!muted"
-	v-show="!isDeleted"
-	ref="el"
-	v-hotkey="keymap"
-	: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'}]"
+	<div
+		v-if="!muted"
+		v-show="!isDeleted"
+		ref="el"
+		v-hotkey="keymap"
+		: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'
+		},{[$style.localonly] : defaultStore.state.showVisibilityColor && note.localOnly  }
+		]"
 
-	:tabindex="!isDeleted ? '-1' : undefined"
->
-	<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
-	<div v-if="pinned" :class="$style.tip"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</div>
-	<!--<div v-if="appearNote._prId_" class="tip"><i class="ti ti-speakerphone"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ti ti-x"></i></button></div>-->
-	<!--<div v-if="appearNote._featuredId_" class="tip"><i class="ti ti-bolt"></i> {{ i18n.ts.featured }}</div>-->
-	<div v-if="isRenote" :class="$style.renote">
-		<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
-		<MkAvatar :class="$style.renoteAvatar" :user="note.user" link preview/>
-		<i class="ti ti-repeat" style="margin-right: 4px;"></i>
-		<I18n :src="i18n.ts.renotedBy" tag="span" :class="$style.renoteText">
-			<template #user>
-				<MkA v-user-preview="note.userId" :class="$style.renoteUserName" :to="userPage(note.user)">
-					<MkUserName :user="note.user"/>
-				</MkA>
-			</template>
-		</I18n>
-		<div :class="$style.renoteInfo">
-			<button ref="renoteTime" :class="$style.renoteTime" class="_button" @click="showRenoteMenu()">
-				<i class="ti ti-dots" :class="$style.renoteMenu"></i>
-				<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>
+		:tabindex="!isDeleted ? '-1' : undefined"
+	>
+		<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
+		<div v-if="pinned" :class="$style.tip"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</div>
+		<!--<div v-if="appearNote._prId_" class="tip"><i class="ti ti-speakerphone"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ti ti-x"></i></button></div>-->
+		<!--<div v-if="appearNote._featuredId_" class="tip"><i class="ti ti-bolt"></i> {{ i18n.ts.featured }}</div>-->
+		<div v-if="isRenote" :class="$style.renote">
+			<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
+			<MkAvatar :class="$style.renoteAvatar" :user="note.user" link preview/>
+			<i class="ti ti-repeat" style="margin-right: 4px;"></i>
+			<I18n :src="i18n.ts.renotedBy" tag="span" :class="$style.renoteText">
+				<template #user>
+					<MkA v-user-preview="note.userId" :class="$style.renoteUserName" :to="userPage(note.user)">
+						<MkUserName :user="note.user"/>
+					</MkA>
+				</template>
+			</I18n>
+			<div :class="$style.renoteInfo">
+				<button ref="renoteTime" :class="$style.renoteTime" class="_button" @click="showRenoteMenu()">
+					<i class="ti ti-dots" :class="$style.renoteMenu"></i>
+					<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-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>
-			<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
-			<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
+				<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i
+					class="ti ti-rocket-off"></i></span>
+				<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
+			</div>
 		</div>
-	</div>
-	<div v-if="renoteCollapsed" :class="$style.collapsedRenoteTarget">
-		<MkAvatar :class="$style.collapsedRenoteTargetAvatar" :user="appearNote.user" link preview/>
-		<Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
-	</div>
-	<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
-		<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
-		<MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/>
-		<div :class="$style.main">
-			<MkNoteHeader :note="appearNote" :mini="true"/>
-			<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
-			<div style="container-type: inline-size;">
-				<p v-if="appearNote.cw != null" :class="$style.cw">
-					<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :i="$i"/>
-					<MkCwButton v-model="showContent" :note="appearNote"/>
-				</p>
-				<div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]">
-					<div :class="$style.text">
-						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
-						<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/>
-						<div v-if="translating || translation" :class="$style.translation">
-							<MkLoading v-if="translating" mini/>
-							<div v-else>
-								<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/>
+		<div v-if="renoteCollapsed" :class="$style.collapsedRenoteTarget">
+			<MkAvatar :class="$style.collapsedRenoteTargetAvatar" :user="appearNote.user" link preview/>
+			<Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user"
+					 :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
+		</div>
+		<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
+			<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
+			<MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/>
+			<div :class="$style.main">
+				<MkNoteHeader :note="appearNote" :mini="true"/>
+				<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
+				<div style="container-type: inline-size;">
+					<p v-if="appearNote.cw != null" :class="$style.cw">
+						<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user"
+								 :i="$i"/>
+						<MkCwButton v-model="showContent" :note="appearNote"/>
+					</p>
+					<div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]">
+						<div :class="$style.text">
+							<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
+							<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i
+								class="ti ti-arrow-back-up"></i></MkA>
+							<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i"
+									 :emojiUrls="appearNote.emojis"/>
+							<div v-if="translating || translation" :class="$style.translation">
+								<MkLoading v-if="translating" mini/>
+								<div v-else>
+									<b>{{ i18n.t('translatedFrom', {x: translation.sourceLang}) }}: </b>
+									<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/>
+								</div>
 							</div>
 						</div>
+						<div v-if="appearNote.files.length > 0">
+							<MkMediaList :mediaList="appearNote.files"/>
+						</div>
+						<MkPoll v-if="appearNote.poll" :note="appearNote" :class="$style.poll"/>
+						<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false"
+													:class="$style.urlPreview"/>
+						<div v-if="appearNote.renote" :class="$style.quote">
+							<MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/>
+						</div>
+						<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click="collapsed = false">
+							<span :class="$style.collapsedLabel">{{ i18n.ts.showMore }}</span>
+						</button>
+						<button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click="collapsed = true">
+							<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
+						</button>
 					</div>
-					<div v-if="appearNote.files.length > 0">
-						<MkMediaList :mediaList="appearNote.files"/>
-					</div>
-					<MkPoll v-if="appearNote.poll" :note="appearNote" :class="$style.poll"/>
-					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview"/>
-					<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
-					<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click="collapsed = false">
-						<span :class="$style.collapsedLabel">{{ i18n.ts.showMore }}</span>
-					</button>
-					<button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click="collapsed = true">
-						<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
-					</button>
+					<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel"
+							 :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}
+					</MkA>
 				</div>
-				<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
+				<MkReactionsViewer :note="appearNote" :maxNumber="16">
+					<template #more>
+						<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
+					</template>
+				</MkReactionsViewer>
+				<footer :class="$style.footer">
+					<button :class="$style.footerButton" class="_button" @click="reply()">
+						<i class="ti ti-arrow-back-up"></i>
+						<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ appearNote.repliesCount }}</p>
+					</button>
+					<button
+						v-if="canRenote"
+						ref="renoteButton"
+						:class="$style.footerButton"
+						class="_button"
+						@mousedown="renote()"
+					>
+						<i class="ti ti-repeat"></i>
+						<p v-if="appearNote.renoteCount > 0" :class="$style.footerButtonCount">{{ appearNote.renoteCount }}</p>
+					</button>
+					<button v-else :class="$style.footerButton" class="_button" disabled>
+						<i class="ti ti-ban"></i>
+					</button>
+					<button v-if="appearNote.myReaction == null" ref="reactButton" :class="$style.footerButton" class="_button"
+									@mousedown="react()">
+						<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
+						<i v-else class="ti ti-plus"></i>
+					</button>
+					<button v-if="appearNote.myReaction != null" ref="reactButton" :class="$style.footerButton" class="_button"
+									@click="undoReact(appearNote)">
+						<i class="ti ti-minus"></i>
+					</button>
+					<button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton"
+									class="_button" @mousedown="clip()">
+						<i class="ti ti-paperclip"></i>
+					</button>
+					<button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown="menu()">
+						<i class="ti ti-dots"></i>
+					</button>
+				</footer>
 			</div>
-			<MkReactionsViewer :note="appearNote" :maxNumber="16">
-				<template #more>
-					<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
-				</template>
-			</MkReactionsViewer>
-			<footer :class="$style.footer">
-				<button :class="$style.footerButton" class="_button" @click="reply()">
-					<i class="ti ti-arrow-back-up"></i>
-					<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ appearNote.repliesCount }}</p>
-				</button>
-				<button
-					v-if="canRenote"
-					ref="renoteButton"
-					:class="$style.footerButton"
-					class="_button"
-					@mousedown="renote()"
-				>
-					<i class="ti ti-repeat"></i>
-					<p v-if="appearNote.renoteCount > 0" :class="$style.footerButtonCount">{{ appearNote.renoteCount }}</p>
-				</button>
-				<button v-else :class="$style.footerButton" class="_button" disabled>
-					<i class="ti ti-ban"></i>
-				</button>
-				<button v-if="appearNote.myReaction == null" ref="reactButton" :class="$style.footerButton" class="_button" @mousedown="react()">
-					<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
-					<i v-else class="ti ti-plus"></i>
-				</button>
-				<button v-if="appearNote.myReaction != null" ref="reactButton" :class="$style.footerButton" class="_button" @click="undoReact(appearNote)">
-					<i class="ti ti-minus"></i>
-				</button>
-				<button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @mousedown="clip()">
-					<i class="ti ti-paperclip"></i>
-				</button>
-				<button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown="menu()">
-					<i class="ti ti-dots"></i>
-				</button>
-			</footer>
-		</div>
-	</article>
-</div>
-<div v-else :class="$style.muted" @click="muted = false">
-	<I18n :src="i18n.ts.userSaysSomething" tag="small">
-		<template #name>
-			<MkA v-user-preview="appearNote.userId" :to="userPage(appearNote.user)">
-				<MkUserName :user="appearNote.user"/>
-			</MkA>
-		</template>
-	</I18n>
-</div>
+		</article>
+	</div>
+	<div v-else :class="$style.muted" @click="muted = false">
+		<I18n :src="i18n.ts.userSaysSomething" tag="small">
+			<template #name>
+				<MkA v-user-preview="appearNote.userId" :to="userPage(appearNote.user)">
+					<MkUserName :user="appearNote.user"/>
+				</MkA>
+			</template>
+		</I18n>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, ref, shallowRef, Ref, defineAsyncComponent } from 'vue';
+import {computed, inject, onMounted, ref, shallowRef, Ref, defineAsyncComponent} from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
@@ -150,26 +170,26 @@ import MkPoll from '@/components/MkPoll.vue';
 import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
-import { pleaseLogin } from '@/scripts/please-login.js';
-import { focusPrev, focusNext } from '@/scripts/focus.js';
-import { checkWordMute } from '@/scripts/check-word-mute.js';
-import { userPage } from '@/filters/user.js';
+import {pleaseLogin} from '@/scripts/please-login.js';
+import {focusPrev, focusNext} from '@/scripts/focus.js';
+import {checkWordMute} from '@/scripts/check-word-mute.js';
+import {userPage} from '@/filters/user.js';
 import * as os from '@/os.js';
-import { defaultStore, noteViewInterruptors } from '@/store.js';
-import { reactionPicker } from '@/scripts/reaction-picker.js';
-import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js';
-import { $i } from '@/account.js';
-import { i18n } from '@/i18n.js';
-import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu } from '@/scripts/get-note-menu.js';
-import { useNoteCapture } from '@/scripts/use-note-capture.js';
-import { deepClone } from '@/scripts/clone.js';
-import { useTooltip } from '@/scripts/use-tooltip.js';
-import { claimAchievement } from '@/scripts/achievements.js';
-import { getNoteSummary } from '@/scripts/get-note-summary.js';
-import { MenuItem } from '@/types/menu';
+import {defaultStore, noteViewInterruptors} from '@/store.js';
+import {reactionPicker} from '@/scripts/reaction-picker.js';
+import {extractUrlFromMfm} from '@/scripts/extract-url-from-mfm.js';
+import {$i} from '@/account.js';
+import {i18n} from '@/i18n.js';
+import {getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu} from '@/scripts/get-note-menu.js';
+import {useNoteCapture} from '@/scripts/use-note-capture.js';
+import {deepClone} from '@/scripts/clone.js';
+import {useTooltip} from '@/scripts/use-tooltip.js';
+import {claimAchievement} from '@/scripts/achievements.js';
+import {getNoteSummary} from '@/scripts/get-note-summary.js';
+import {MenuItem} from '@/types/menu';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
-import { showMovedDialog } from '@/scripts/show-moved-dialog.js';
-import { shouldCollapsed } from '@/scripts/collapsed.js';
+import {showMovedDialog} from '@/scripts/show-moved-dialog.js';
+import {shouldCollapsed} from '@/scripts/collapsed.js';
 
 const props = defineProps<{
 	note: Misskey.entities.Note;
@@ -177,7 +197,8 @@ 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
@@ -280,7 +301,7 @@ function renote(viaKeyboard = false) {
 					const rect = el.getBoundingClientRect();
 					const x = rect.left + (el.offsetWidth / 2);
 					const y = rect.top + (el.offsetHeight / 2);
-					os.popup(MkRippleEffect, { x, y }, {}, 'end');
+					os.popup(MkRippleEffect, {x, y}, {}, 'end');
 				}
 
 				os.api('notes/create', {
@@ -311,7 +332,7 @@ function renote(viaKeyboard = false) {
 				const rect = el.getBoundingClientRect();
 				const x = rect.left + (el.offsetWidth / 2);
 				const y = rect.top + (el.offsetHeight / 2);
-				os.popup(MkRippleEffect, { x, y }, {}, 'end');
+				os.popup(MkRippleEffect, {x, y}, {}, 'end');
 			}
 
 			const configuredVisibility = defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility;
@@ -370,7 +391,7 @@ function react(viaKeyboard = false): void {
 			const rect = el.getBoundingClientRect();
 			const x = rect.left + (el.offsetWidth / 2);
 			const y = rect.top + (el.offsetHeight / 2);
-			os.popup(MkRippleEffect, { x, y }, {}, 'end');
+			os.popup(MkRippleEffect, {x, y}, {}, 'end');
 		}
 	} else {
 		blur();
@@ -412,20 +433,38 @@ function onContextmenu(ev: MouseEvent): void {
 		ev.preventDefault();
 		react();
 	} else {
-		const { menu, cleanup } = getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClip: currentClip?.value });
+		const {menu, cleanup} = getNoteMenu({
+			note: note,
+			translating,
+			translation,
+			menuButton,
+			isDeleted,
+			currentClip: currentClip?.value
+		});
 		os.contextMenu(menu, ev).then(focus).finally(cleanup);
 	}
 }
 
 function menu(viaKeyboard = false): void {
-	const { menu, cleanup } = getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClip: currentClip?.value });
+	const {menu, cleanup} = getNoteMenu({
+		note: note,
+		translating,
+		translation,
+		menuButton,
+		isDeleted,
+		currentClip: currentClip?.value
+	});
 	os.popupMenu(menu, menuButton.value, {
 		viaKeyboard,
 	}).then(focus).finally(cleanup);
 }
 
 async function clip() {
-	os.popupMenu(await getNoteClipMenu({ note: note, isDeleted, currentClip: currentClip?.value }), clipButton.value).then(focus);
+	os.popupMenu(await getNoteClipMenu({
+		note: note,
+		isDeleted,
+		currentClip: currentClip?.value
+	}), clipButton.value).then(focus);
 }
 
 function showRenoteMenu(viaKeyboard = false): void {
@@ -481,7 +520,6 @@ function focusAfter() {
 }
 
 
-
 function readPromo() {
 	os.api('promo/read', {
 		noteId: appearNote.id,
@@ -498,14 +536,20 @@ function readPromo() {
 	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;
+
+	&.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;
+	}
+  &.localonly {
+    background-color: rgba(var(--localOnlyColor), 0.20) !important;
   }
 	// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
 	// 下の方までスクロールすると上のノートの高さがここで決め打ちされたものに変化し、表示しているノートの位置が変わってしまう
@@ -513,7 +557,7 @@ function readPromo() {
 	// 今度はその処理自体がパフォーマンス低下の原因にならないか懸念される。また、被リアクションでも高さは変化するため、やはり多少のズレは生じる
 	// 一度レンダリングされた要素はブラウザがよしなにサイズを覚えておいてくれるような実装になるまで待った方が良さそう(なるのか？)
 	//content-visibility: auto;
-  //contain-intrinsic-size: 0 128px;
+	//contain-intrinsic-size: 0 128px;
 
 	&:focus-visible {
 		outline: none;
@@ -951,7 +995,8 @@ function readPromo() {
 	padding: 0 6px;
 	opacity: .8;
 }
-.root:has(.ti-home){
+
+.root:has(.ti-home) {
 	background-color: rgba(255, 255, 100, 0.10) !important;
 }
 </style>
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 1c1207770a..b4c7b021e9 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -57,6 +57,9 @@ SPDX-License-Identifier: AGPL-3.0-only
         </MkColorInput>
         <MkColorInput v-if="showVisibilityColor" v-model="specifiedColor">
           <template #label>{{ i18n.ts._visibility.specified }}</template>
+        </MkColorInput>
+        <MkColorInput v-if="showVisibilityColor" v-model="localOnlyColor">
+          <template #label>{{ i18n.ts.localOnly }}</template>
         </MkColorInput>
 				<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
 				<MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch>
@@ -269,6 +272,7 @@ const numberOfGamingSpeed = computed(defaultStore.makeGetterSetter('numberOfGami
 const homeColor = computed(defaultStore.makeGetterSetter('homeColor'));
 const followerColor = computed(defaultStore.makeGetterSetter('followerColor'));
 const specifiedColor = computed(defaultStore.makeGetterSetter('specifiedColor'));
+const localOnlyColor = computed(defaultStore.makeGetterSetter('localOnlyColor'));
 const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'));
 const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
 const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));