feat (client): ability to hide misclickable follow buttons

docs/changelog.md

@@ -1,3 +1,4 @@
+- add a toggleable setting to hide follow buttons in a misclickable position
 - add a toggleable setting to show preview in posting form by default
 
 # v20240210

locales/en-US.yml

@@ -1161,6 +1161,8 @@ noLanguage: "No language"
 useEmojiCdn: "Get Twemoji from CDN"
 useEmojiCdnDescription: "Use Twemoji from the JSDelivr CDN instead of the server's assets."
 showPreviewByDefault: "Show preview in posting form by default"
+preventMisclick: "Accidental click prevention"
+hideFollowButtons: "Hide follow buttons in a misclickable position"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing

locales/ja-JP.yml

@@ -2010,3 +2010,5 @@ noLanguage: "言語なし"
 moreUrls: "固定するページ"
 moreUrlsDescription: "左下のヘルプメニューに固定したいページを以下の形式で、改行区切りで入力してください:\n\"表示名\": https://example.com/"
 showPreviewByDefault: "投稿画面でプレビュー表示をデフォルトでオンにする"
+preventMisclick: "誤タップ防止"
+hideFollowButtons: "誤タップしやすい位置にあるフォローボタンを隠す"

locales/zh-TW.yml

@@ -2010,3 +2010,5 @@ useEmojiCdnDescription: 使用JSDelivr CDN提供的Twemoji，而不使用儲存
 moreUrls: 置頂的頁面
 moreUrlsDescription: "請以下列形式輸入欲釘選在左下角幫助選單的頁面，一行一個：\n\"顯示名稱\": https://example.com/"
 showPreviewByDefault: "自動開啟發文介面中的預覽顯示"
+preventMisclick: "預防誤觸"
+hideFollowButtons: "隱藏會誤觸的追隨按鈕"

packages/client/src/components/MkFollowButton.vue

@@ -8,7 +8,7 @@
 		<i :class="icon('ph-dots-three-outline')"></i>
 	</button>
 	<button
-		v-if="isSignedIn && $i.id != user.id"
+		v-if="!hideFollowButton && isSignedIn && $i.id != user.id"
 		v-tooltip="full ? null : `${state} ${user.name || user.username}`"
 		class="kpoogebi _button follow-button"
 		:class="{
@@ -81,6 +81,7 @@ const props = withDefaults(
 		full?: boolean;
 		large?: boolean;
 		hideMenu?: boolean;
+		hideFollowButton?: boolean;
 	}>(),
 	{
 		full: false,
@@ -99,6 +100,8 @@ const hasPendingFollowRequestFromYou = ref(
 const 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"
@@ -304,6 +304,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

@@ -285,6 +285,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"
@@ -430,6 +440,9 @@ const showPreviewByDefault = computed(
 const showTimelineReplies = computed(
 	defaultStore.makeGetterSetter("showTimelineReplies"),
 );
+const hideFollowButtons = computed(
+	defaultStore.makeGetterSetter("hideFollowButtons"),
+);
 const detectPostLanguage = computed(
 	defaultStore.makeGetterSetter("detectPostLanguage"),
 );

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

@@ -400,6 +400,8 @@ import icon from "@/scripts/icon";
 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

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