feat: ability to hide follow buttons (close #34)

README.md

@@ -13,6 +13,8 @@
 
 ## 細かい変更点
 
+- 誤爆しやすい位置にあるフォローボタンを隠す設定を追加
+  - フォローを誤爆すると悲しいため
 - クローラーを拒否する [robots.txt](./custom/assets/robots.txt) の追加
 - 投稿プレビューをデフォルトでオンにする設定を追加
 - 猫耳の角を少し丸くする（Misskey から取り込み）

locales/en-US.yml

@@ -1127,6 +1127,8 @@ removeMember: "Remove member"
 verifiedLink: "Verified link"
 showPreviewByDefault: "Show preview in posting form by default"
 originalFeature: "original"
+preventMisclick: "Accidental click prevention"
+hideFollowButtons: "Hide follow buttons in notifications and user pages"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing

locales/ja-JP.yml

@@ -987,6 +987,8 @@ neverShow: "今後表示しない"
 remindMeLater: "また後で"
 showPreviewByDefault: "投稿画面でプレビュー表示をデフォルトでオンにする"
 originalFeature: "独自機能"
+preventMisclick: "誤タップ防止"
+hideFollowButtons: "新規フォロワーの通知とユーザーページの ... の隣にあるフォローボタンを隠す"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てられます。サーバーの負荷が少し増えます。"

packages/client/src/components/MkFollowButton.vue

@@ -8,7 +8,7 @@
 		<i class="ph-dots-three-outline ph-bold ph-lg"></i>
 	</button>
 	<button
-		v-if="$i != null && $i.id != user.id"
+		v-if="!hideFollowButton && $i != null && $i.id != user.id"
 		class="kpoogebi _button follow-button"
 		:class="{
 			wait,
@@ -79,6 +79,7 @@ const props = withDefaults(
 		full?: boolean;
 		large?: boolean;
 		hideMenu?: boolean;
+		hideFollowButton?: boolean;
 	}>(),
 	{
 		full: false,
@@ -97,6 +98,8 @@ let hasPendingFollowRequestFromYou = $ref(
 let wait = $ref(false);
 const connection = stream.useChannel("main");
 
+const hideFollowButton = props.hideFollowButton ?? false;
+
 if (props.user.isFollowing == null) {
 	os.api("users/show", {
 		userId: props.user.id,

packages/client/src/components/MkNotification.vue

@@ -215,7 +215,7 @@
 				class="text"
 				style="opacity: 0.7"
 				>{{ i18n.ts.youGotNewFollower }}
-				<div v-if="full">
+				<div v-if="full && !hideFollowButton">
 					<MkFollowButton
 						:user="notification.user"
 						:full="true"
@@ -303,6 +303,7 @@ const props = withDefaults(
 const elRef = ref<HTMLElement>(null);
 const reactionRef = ref(null);
 
+const hideFollowButton = defaultStore.state.hideFollowButtons;
 const showEmojiReactions =
 	defaultStore.state.enableEmojiReactions ||
 	defaultStore.state.showEmojisInReactionNotifications;

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

@@ -228,6 +228,16 @@
 			</FormSelect>
 		</FormSection>
 
+		<FormSection>
+			<template #label>{{ i18n.ts.preventMisclick }}</template>
+			<FormSwitch v-model="hideFollowButtons" class="_formBlock"
+				>{{ i18n.ts.hideFollowButtons
+				}}<span class="_beta">{{
+					i18n.ts.originalFeature
+				}}</span></FormSwitch
+			>
+		</FormSection>
+
 		<FormRange
 			v-model="numberOfPageCache"
 			:min="1"
@@ -366,6 +376,9 @@ const showPreviewByDefault = computed(
 const showTimelineReplies = computed(
 	defaultStore.makeGetterSetter("showTimelineReplies"),
 );
+const hideFollowButtons = computed(
+	defaultStore.makeGetterSetter("hideFollowButtons"),
+);
 
 watch(swipeOnDesktop, () => {
 	defaultStore.set("swipeOnMobile", true);

packages/client/src/pages/user/home.vue

@@ -223,6 +223,7 @@
 									:inline="true"
 									:transparent="false"
 									:full="true"
+									:hideFollowButton="hideFollowButton"
 									class="koudoku"
 								/>
 							</div>
@@ -410,6 +411,8 @@ import { host } from "@/config";
 const XPhotos = defineAsyncComponent(() => import("./index.photos.vue"));
 const XActivity = defineAsyncComponent(() => import("./index.activity.vue"));
 
+const hideFollowButton = defaultStore.state.hideFollowButtons;
+
 const emit = defineEmits(["refresh"]);
 const props = withDefaults(
 	defineProps<{

packages/client/src/store.ts

@@ -346,6 +346,10 @@ export const defaultStore = markRaw(
 			where: "deviceAccount",
 			default: true,
 		},
+		hideFollowButtons: {
+			where: "device",
+			default: true,
+		},
 	}),
 );