From 2a580dc478780e89af9757d8180a951a87f2e3e1 Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Fri, 15 Sep 2023 02:08:23 +0900
Subject: [PATCH] feat: ability to hide own name/icon

---
 README.md                                        |  3 +++
 locales/en-US.yml                                |  2 ++
 locales/ja-JP.yml                                |  2 ++
 packages/client/src/components/global/MkAcct.vue |  7 +++++--
 .../client/src/components/global/MkAvatar.vue    | 11 +++++++----
 .../client/src/components/global/MkUserName.vue  |  5 +++++
 packages/client/src/pages/note.vue               | 16 +++++++++++-----
 packages/client/src/pages/settings/general.vue   | 14 ++++++++++++++
 packages/client/src/store.ts                     |  8 ++++++++
 9 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 38aada437..d93a77d57 100644
--- a/README.md
+++ b/README.md
@@ -34,6 +34,9 @@
 
 - 身バレ防止の設定を追加
   - 「おかえりなさい、◯◯さん」が出ないようにできるように
+  - 自分のアイコンを非表示にできるように
+  - 自分の名前とIDを非表示にできるように
+    - 名前とIDの部分が空白になるので慣れるまで時間が掛かります
 - ユーザーページのデフォルトのタブを「投稿と返信」に変更
 - タイムラインにリプライを表示する設定をデフォルトで有効に
 - 未読通知のタブをリアクションの通知を表示するタブに変更
diff --git a/locales/en-US.yml b/locales/en-US.yml
index 833e2e630..2d420c8cf 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -2146,3 +2146,5 @@ _emojiModPerm:
   full: "Allow All"
 privacyForNerds: "Privacy protection in public places"
 disableToast: "Don't show the \"Welcome back\" banner"
+hideMyIcon: "Hide my icon"
+hideMyName: "Hide my name and ID"
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 48c8319c8..9b216a6a4 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2001,3 +2001,5 @@ emojiPackCreator: 絵文字パックの作者
 exportZip: ZIPをエクスポート
 privacyForNerds: "身バレ防止"
 disableToast: "「おかえりなさい、◯◯さん」を表示しない"
+hideMyIcon: "自分のアイコンを表示しない"
+hideMyName: "自分の名前とIDを表示しない"
diff --git a/packages/client/src/components/global/MkAcct.vue b/packages/client/src/components/global/MkAcct.vue
index 7433c7046..7b2efb70a 100644
--- a/packages/client/src/components/global/MkAcct.vue
+++ b/packages/client/src/components/global/MkAcct.vue
@@ -1,5 +1,5 @@
 <template>
-	<span class="mk-acct">
+	<span class="mk-acct" v-if="show">
 		<span class="name">@{{ user.username }}</span>
 		<span
 			v-if="user.host || detail || $store.state.showFullAcct"
@@ -13,13 +13,16 @@
 import type * as misskey from "firefish-js";
 import { toUnicode } from "punycode/";
 import { host as hostRaw } from "@/config";
+import { defaultStore } from "@/store";
+import { $i } from "@/account";
 
-defineProps<{
+const props = defineProps<{
 	user: misskey.entities.UserDetailed;
 	detail?: boolean;
 }>();
 
 const host = toUnicode(hostRaw);
+const show = !defaultStore.state.hideMyName || $i.id !== props.user.id;
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index 1161f459d..a1dfd9bd0 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -4,14 +4,14 @@
 		v-user-preview="disablePreview ? undefined : user.id"
 		class="eiwwqkts _noSelect"
 		:class="{
-			cat: user.isCat,
+			cat: show && user.isCat,
 			square: user.isCat ? false : $store.state.squareAvatars,
 		}"
 		:style="{ color }"
 		:title="acct(user)"
 		@click="onClick"
 	>
-		<img class="inner" :src="url" decoding="async" />
+		<img v-if="show" class="inner" :src="url" decoding="async" />
 		<MkUserOnlineIndicator
 			v-if="showIndicator && user.instance == null"
 			class="indicator"
@@ -23,7 +23,7 @@
 		v-user-preview="disablePreview ? undefined : user.id"
 		class="eiwwqkts _noSelect"
 		:class="{
-			cat: user.isCat,
+			cat: show && user.isCat,
 			square: user.isCat ? false : $store.state.squareAvatars,
 		}"
 		:style="{ color }"
@@ -32,7 +32,7 @@
 		:target="target"
 		@click.stop
 	>
-		<img class="inner" :src="url" decoding="async" />
+		<img v-if="show" class="inner" :src="url" decoding="async" />
 		<MkUserOnlineIndicator
 			v-if="showIndicator && user.instance == null"
 			class="indicator"
@@ -49,6 +49,7 @@ import { extractAvgColorFromBlurhash } from "@/scripts/extract-avg-color-from-bl
 import { acct, userPage } from "@/filters/user";
 import MkUserOnlineIndicator from "@/components/MkUserOnlineIndicator.vue";
 import { defaultStore } from "@/store";
+import { $i } from "@/account";
 
 const props = withDefaults(
 	defineProps<{
@@ -76,6 +77,8 @@ const url = computed(() =>
 		: props.user.avatarUrl,
 );
 
+const show = !defaultStore.state.hideMyIcon || $i.id !== props.user.id;
+
 function onClick(ev: MouseEvent) {
 	emit("click", ev);
 }
diff --git a/packages/client/src/components/global/MkUserName.vue b/packages/client/src/components/global/MkUserName.vue
index 5094d2f2a..9b4dd592c 100644
--- a/packages/client/src/components/global/MkUserName.vue
+++ b/packages/client/src/components/global/MkUserName.vue
@@ -1,5 +1,6 @@
 <template>
 	<Mfm
+		v-if="show"
 		:class="$style.root"
 		:text="user.name || user.username"
 		:plain="true"
@@ -10,6 +11,8 @@
 
 <script lang="ts" setup>
 import type * as misskey from "firefish-js";
+import { defaultStore } from "@/store";
+import { $i } from "@/account";
 
 const props = withDefaults(
 	defineProps<{
@@ -20,6 +23,8 @@ const props = withDefaults(
 		nowrap: true,
 	},
 );
+
+const show = !defaultStore.state.hideMyName || $i.id !== props.user.id;
 </script>
 
 <style lang="scss" module>
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index 1eccecf80..33061fd8b 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -78,6 +78,8 @@ import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import { $i } from "@/account";
 
 const props = defineProps<{
 	noteId: string;
@@ -172,11 +174,15 @@ definePageMetadata(
 	computed(() =>
 		appearNote.value
 			? {
-					title: i18n.t("noteOf", {
-						user:
-							appearNote.value.user.name ||
-							appearNote.value.user.username,
-					}),
+					title:
+						defaultStore.state.hideMyName &&
+						appearNote.value.userId === $i.id
+							? ""
+							: i18n.t("noteOf", {
+									user:
+										appearNote.value.user.name ||
+										appearNote.value.user.username,
+							  }),
 					subtitle: new Date(
 						appearNote.value.createdAt,
 					).toLocaleString(),
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 1afeb91cc..d88a257fa 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -270,6 +270,18 @@
 					i18n.ts.originalFeature
 				}}</span></FormSwitch
 			>
+			<FormSwitch v-model="hideMyIcon" class="_formBlock"
+				>{{ i18n.ts.hideMyIcon
+				}}<span class="_beta">{{
+					i18n.ts.originalFeature
+				}}</span></FormSwitch
+			>
+			<FormSwitch v-model="hideMyName" class="_formBlock"
+				>{{ i18n.ts.hideMyName
+				}}<span class="_beta">{{
+					i18n.ts.originalFeature
+				}}</span></FormSwitch
+			>
 		</FormSection>
 
 		<FormSection>
@@ -450,6 +462,8 @@ const emphasizeFollowed = computed(
 	defaultStore.makeGetterSetter("emphasizeFollowed"),
 );
 const disableToast = computed(defaultStore.makeGetterSetter("disableToast"));
+const hideMyIcon = computed(defaultStore.makeGetterSetter("hideMyIcon"));
+const hideMyName = computed(defaultStore.makeGetterSetter("hideMyName"));
 
 watch(swipeOnDesktop, () => {
 	defaultStore.set("swipeOnMobile", true);
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index d0c5a18b8..d6c016461 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -377,6 +377,14 @@ export const defaultStore = markRaw(
 			where: "device",
 			default: false,
 		},
+		hideMyIcon: {
+			where: "device",
+			default: false,
+		},
+		hideMyName: {
+			where: "device",
+			default: false,
+		},
 	}),
 );