feat: ability to emphasize "Follows you" sign (close #64)

README.md

@@ -21,6 +21,8 @@
 
 ## 細かい変更点
 
+- 「フォローされています」の表示を目立たせられるように
+	- デフォルトの表示は目立たないため
 - 最大 15 件の投稿を固定できるように
 	- 5 件は少ないと思ったため
 - 投稿ボタンを巨大にできるように

locales/en-US.yml

@@ -1146,6 +1146,7 @@ languageForTranslation: "Language used for post translation"
 addRe: "Add \"re:\" at the beginning of comment in reply to a post with a content warning"
 showBigPostButton: "Show a bigger post button in the posting form"
 confirm: "Confirm"
+emphasizeFollowed: "Highlight the \"Follows you\" sign on your follower info"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing

locales/ja-JP.yml

@@ -998,6 +998,7 @@ addRe: "閲覧注意の投稿への返信で、注釈の先頭に\"re:\"を追
 detectPostLanguage: "投稿の言語を自動検出し、外国語の投稿に翻訳ボタンを表示する"
 languageForTranslation: "投稿翻訳に使用する言語"
 showBigPostButton: "投稿ボタンを巨大にする"
+emphasizeFollowed: "フォロワーのアカウントに表示される「フォローされています」の表示を強調する"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てられます。サーバーの負荷が少し増えます。"

packages/client/src/components/MkUserInfo.vue

@@ -10,6 +10,7 @@
 			<span
 				v-if="$i && $i.id != user.id && user.isFollowed"
 				class="followed"
+				:class="{ 'followed-emph': emphasizeFollowed }"
 				>{{ i18n.ts.followsYou }}</span
 			>
 		</div>
@@ -92,12 +93,15 @@ import XShowMoreButton from "@/components/MkShowMoreButton.vue";
 import MkNumber from "@/components/MkNumber.vue";
 import { userPage } from "@/filters/user";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
 	user: misskey.entities.UserDetailed;
 	detailed?: boolean;
 }>();
 
+const emphasizeFollowed = defaultStore.state.emphasizeFollowed;
+
 let isLong = $ref(
 	props.detailed &&
 		props.user.description &&
@@ -142,6 +146,11 @@ let collapsed = $ref(isLong);
 			font-size: 0.7em;
 			border-radius: 6px;
 		}
+
+		> .followed-emph {
+			background: var(--accent);
+			font-size: 1em;
+		}
 		&.detailed::after {
 			content: "";
 			background-image: var(--blur, inherit);

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

@@ -198,6 +198,12 @@
 			<FormSwitch v-model="squareAvatars" class="_formBlock">{{
 				i18n.ts.squareAvatars
 			}}</FormSwitch>
+			<FormSwitch v-model="emphasizeFollowed" class="_formBlock"
+				>{{ i18n.ts.emphasizeFollowed
+				}}<span class="_beta">{{
+					i18n.ts.originalFeature
+				}}</span></FormSwitch
+			>
 			<FormSwitch v-model="seperateRenoteQuote" class="_formBlock">{{
 				i18n.ts.seperateRenoteQuote
 			}}</FormSwitch>
@@ -428,13 +434,15 @@ const replaceChatButtonWithAccountButton = computed(
 const replaceWidgetsButtonWithReloadButton = computed(
 	defaultStore.makeGetterSetter("replaceWidgetsButtonWithReloadButton"),
 );
-const addRe = computed(defaultStore.makeGetterSetter("addRe"));
 const detectPostLanguage = computed(
 	defaultStore.makeGetterSetter("detectPostLanguage"),
 );
 const showBigPostButton = computed(
 	defaultStore.makeGetterSetter("showBigPostButton"),
 );
+const emphasizeFollowed = computed(
+	defaultStore.makeGetterSetter("emphasizeFollowed"),
+);
 
 watch(swipeOnDesktop, () => {
 	defaultStore.set("swipeOnMobile", true);

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

@@ -76,6 +76,9 @@
 											user.isFollowed
 										"
 										class="followed"
+										:class="{
+											'followed-emph': emphasizeFollowed,
+										}"
 										>{{ i18n.ts.followsYou }}</span
 									>
 								</div>
@@ -142,6 +145,9 @@
 										user.isFollowed
 									"
 									class="followed"
+									:class="{
+										'followed-emph': emphasizeFollowed,
+									}"
 									>{{ i18n.ts.followsYou }}</span
 								>
 								<div v-if="$i?.isModerator || $i?.isAdmin">
@@ -404,6 +410,7 @@ const XPhotos = defineAsyncComponent(() => import("./index.photos.vue"));
 const XActivity = defineAsyncComponent(() => import("./index.activity.vue"));
 
 const hideFollowButton = defaultStore.state.hideFollowButtons;
+const emphasizeFollowed = defaultStore.state.emphasizeFollowed;
 
 const emit = defineEmits(["refresh"]);
 const props = withDefaults(
@@ -552,6 +559,11 @@ onUnmounted(() => {
 						border-radius: 6px;
 					}
 
+					> .followed-emph {
+						background: var(--accent);
+						font-size: 1em;
+					}
+
 					> .title {
 						position: absolute;
 						bottom: 0;
@@ -581,6 +593,11 @@ onUnmounted(() => {
 								font-size: 0.7em;
 								border-radius: 24px;
 							}
+
+							> .followed-emph {
+								background: var(--accent);
+								font-size: 1em;
+							}
 						}
 
 						> .bottom {
@@ -690,6 +707,11 @@ onUnmounted(() => {
 							font-size: 0.7em;
 							border-radius: 24px;
 						}
+
+						> .followed-emph {
+							background: var(--accent);
+							font-size: 1em;
+						}
 					}
 
 					> .followedWindow {

packages/client/src/store.ts

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