Merge pull request #44 from team-shahu/feat/toggle-favorite-button

feat: いいねボタンを有効/無効切り替えれるように
team-shahu · Nov 12, 2024 · 0f86cf7 · 0f86cf7
2 parents 2644aab + 51b77fd
commit 0f86cf7
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -38,7 +38,7 @@
 - フォローしているユーザーなら鍵ノートでもアンテナにひっかかるように https://github.com/team-shahu/misskey/pull/38
 - nyaizeを無効化できるように https://github.com/team-shahu/misskey/pull/39
 - 新着ノート通知があった時まとめるように https://github.com/team-shahu/misskey/pull/40
-- いいねボタンの実装 https://github.com/team-shahu/misskey/pull/41
+- いいねボタンの実装 https://github.com/team-shahu/misskey/pull/41 https://github.com/team-shahu/misskey/pull/44
 - 独自機能ページの追加 https://github.com/team-shahu/misskey/pull/42
 
 ## Special Thanks

diff --git a/locales/index.d.ts b/locales/index.d.ts
@@ -5377,6 +5377,10 @@ export interface Locale extends ILocale {
      * いいねボタンで使うリアクションを選択
      */
     "selectReaction": string;
+    /**
+     * いいねボタンを表示する
+     */
+    "showLikeButton": string;
     "_bubbleGame": {
         /**
          * 遊び方

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -1344,6 +1344,7 @@ _delivery:
     autoSuspendedForNotResponding: "サーバー応答なしのため停止中"
 
 selectReaction: "いいねボタンで使うリアクションを選択"
+showLikeButton: "いいねボタンを表示する"
 
 _bubbleGame:
   howToPlay: "遊び方"

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
@@ -125,7 +125,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<button v-else :class="$style.footerButton" class="_button" disabled>
 					<i class="ti ti-ban"></i>
 				</button>
-				<button v-if="appearNote.myReaction == null" ref="heartReactButton" v-tooltip="i18n.ts.like" :class="$style.footerButton" class="_button" @mousedown="heartReact()">
+				<button v-if="appearNote.reactionAcceptance !== 'likeOnly' && appearNote.myReaction == null && defaultStore.state.showLikeButton" ref="heartReactButton" v-tooltip="i18n.ts.like" :class="$style.footerButton" class="_button" @mousedown="heartReact()">
 					<i class="ti ti-heart"></i>
 				</button>
 				<button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()">

diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -135,7 +135,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<button v-else class="_button" :class="$style.noteFooterButton" disabled>
 				<i class="ti ti-ban"></i>
 			</button>
-			<button v-if="appearNote.myReaction == null" ref="heartReactButton" v-tooltip="i18n.ts.like" :class="$style.noteFooterButton" class="_button" @mousedown="heartReact()">
+			<button v-if="appearNote.myReaction == null && defaultStore.state.showLikeButton" ref="heartReactButton" v-tooltip="i18n.ts.like" :class="$style.noteFooterButton" class="_button" @mousedown="heartReact()">
 				<i class="ti ti-heart"></i>
 			</button>
 			<button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()">

diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
@@ -100,17 +100,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<MkSwitch v-model="disableNoteNyaize">{{ i18n.ts.disableNoteNyaize }}<span class="_beta">{{ i18n.ts.originalFeature }}</span></MkSwitch>
 
-			<FromSlot v-model="selectReaction">
-				<template #label>{{ i18n.ts.selectReaction }}<span class="_beta">{{ i18n.ts.originalFeature }}</span></template>
-				<MkCustomEmoji v-if="selectReaction && selectReaction.startsWith(':')" style="max-height: 3em; font-size: 1.1em;" :useOriginalSize="false" :name="selectReaction" :normal="true" :noStyle="true"/>
-				<MkEmoji v-else-if="selectReaction && !selectReaction.startsWith(':')" :emoji="selectReaction" style="max-height: 3em; font-size: 1.1em;" :normal="true" :noStyle="true"/>
-				<span v-else-if="!selectReaction">{{ i18n.ts.notSet }}</span>
-				<div class="_buttons" style="padding-top: 8px;">
-					<MkButton rounded :small="true" inline @click="chooseNewReaction"><i class="ph-smiley ph-bold ph-lg"></i> Change</MkButton>
-					<MkButton rounded :small="true" inline @click="resetReaction"><i class="ph-arrow-clockwise ph-bold ph-lg"></i> Reset</MkButton>
+			<MkFolder>
+				<template #label>{{ i18n.ts.like }}<span class="_beta">{{ i18n.ts.originalFeature }}</span></template>
+				<div class="_gaps_m">
+					<MkSwitch v-model="showLikeButton">{{ i18n.ts.showLikeButton }}</MkSwitch>
+
+					<FromSlot v-model="selectReaction">
+						<template #label>{{ i18n.ts.selectReaction }}</template>
+						<MkCustomEmoji v-if="selectReaction && selectReaction.startsWith(':')" style="max-height: 3em; font-size: 1.1em;" :useOriginalSize="false" :name="selectReaction" :normal="true" :noStyle="true"/>
+						<MkEmoji v-else-if="selectReaction && !selectReaction.startsWith(':')" :emoji="selectReaction" style="max-height: 3em; font-size: 1.1em;" :normal="true" :noStyle="true"/>
+						<span v-else-if="!selectReaction">{{ i18n.ts.notSet }}</span>
+						<div class="_buttons" style="padding-top: 8px;">
+							<MkButton rounded :small="true" inline @click="chooseNewReaction"><i class="ph-smiley ph-bold ph-lg"></i> Change</MkButton>
+							<MkButton rounded :small="true" inline @click="resetReaction"><i class="ph-arrow-clockwise ph-bold ph-lg"></i> Reset</MkButton>
+						</div>
+					</FromSlot>
 				</div>
-			</FromSlot>
-
+			</MkFolder>
 		</div>
 	</FormSection>
 
@@ -282,15 +288,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</MkFolder>
 
-		<MkFolder>
-			<template #label>{{ i18n.ts.timeline }}<span class="_beta">{{ i18n.ts.originalFeature }}</span></template>
-			<div class="_gaps_m">
-				<MkSwitch v-model="hideLocalTimeLine">{{ i18n.ts.hideLocalTimeLine }}</MkSwitch>
-				<MkSwitch v-model="hideSocialTimeLine">{{ i18n.ts.hideSocialTimeLine }}</MkSwitch>
-				<MkSwitch v-model="hideGlobalTimeLine">{{ i18n.ts.hideGlobalTimeLine }}</MkSwitch>
-			</div>
-		</MkFolder>
-	</div>
+			<MkFolder>
+				<template #label>{{ i18n.ts.timeline }}<span class="_beta">{{ i18n.ts.originalFeature }}</span></template>
+				<div class="_gaps_m">
+					<MkSwitch v-model="hideLocalTimeLine">{{ i18n.ts.hideLocalTimeLine }}</MkSwitch>
+					<MkSwitch v-model="hideSocialTimeLine">{{ i18n.ts.hideSocialTimeLine }}</MkSwitch>
+					<MkSwitch v-model="hideGlobalTimeLine">{{ i18n.ts.hideGlobalTimeLine }}</MkSwitch>
+				</div>
+			</MkFolder>
+		</div>
 	</FormSection>
 
 	<FormSection>
@@ -409,6 +415,7 @@ const hideLocalTimeLine = computed(defaultStore.makeGetterSetter('hideLocalTimeL
 const hideGlobalTimeLine = computed(defaultStore.makeGetterSetter('hideGlobalTimeLine'));
 const hideSocialTimeLine = computed(defaultStore.makeGetterSetter('hideSocialTimeLine'));
 const selectReaction = computed(defaultStore.makeGetterSetter('selectReaction'));
+const showLikeButton = computed(defaultStore.makeGetterSetter('showLikeButton'));
 
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);
@@ -458,6 +465,7 @@ watch([
 	hiddenActivity,
 	hiddenFiles,
 	selectReaction,
+	showLikeButton,
 ], async () => {
 	await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
 });

diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue
@@ -124,6 +124,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'hiddenPinnedNotes',
 	'hiddenActivity',
 	'hiddenFiles',
+	'showLikeButton',
 	'disableNoteNyaize',
 	'selectReaction',
 ];

diff --git a/packages/frontend/src/pages/settings/shahu-settings.vue b/packages/frontend/src/pages/settings/shahu-settings.vue
@@ -33,16 +33,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<MkSwitch v-model="disableNoteNyaize">{{ i18n.ts.disableNoteNyaize }}<span class="_beta">{{ i18n.ts.originalFeature }}</span></MkSwitch>
 
-			<FromSlot v-model="selectReaction">
-				<template #label>{{ i18n.ts.selectReaction }}<span class="_beta">{{ i18n.ts.originalFeature }}</span></template>
-				<MkCustomEmoji v-if="selectReaction && selectReaction.startsWith(':')" style="max-height: 3em; font-size: 1.1em;" :useOriginalSize="false" :name="selectReaction" :normal="true" :noStyle="true"/>
-				<MkEmoji v-else-if="selectReaction && !selectReaction.startsWith(':')" :emoji="selectReaction" style="max-height: 3em; font-size: 1.1em;" :normal="true" :noStyle="true"/>
-				<span v-else-if="!selectReaction">{{ i18n.ts.notSet }}</span>
-				<div class="_buttons" style="padding-top: 8px;">
-					<MkButton rounded :small="true" inline @click="chooseNewReaction"><i class="ph-smiley ph-bold ph-lg"></i> Change</MkButton>
-					<MkButton rounded :small="true" inline @click="resetReaction"><i class="ph-arrow-clockwise ph-bold ph-lg"></i> Reset</MkButton>
+			<MkFolder>
+				<template #label>{{ i18n.ts.like }}<span class="_beta">{{ i18n.ts.originalFeature }}</span></template>
+				<div class="_gaps_m">
+					<MkSwitch v-model="showLikeButton">{{ i18n.ts.showLikeButton }}</MkSwitch>
+
+					<FromSlot v-model="selectReaction">
+						<template #label>{{ i18n.ts.selectReaction }}</template>
+						<MkCustomEmoji v-if="selectReaction && selectReaction.startsWith(':')" style="max-height: 3em; font-size: 1.1em;" :useOriginalSize="false" :name="selectReaction" :normal="true" :noStyle="true"/>
+						<MkEmoji v-else-if="selectReaction && !selectReaction.startsWith(':')" :emoji="selectReaction" style="max-height: 3em; font-size: 1.1em;" :normal="true" :noStyle="true"/>
+						<span v-else-if="!selectReaction">{{ i18n.ts.notSet }}</span>
+						<div class="_buttons" style="padding-top: 8px;">
+							<MkButton rounded :small="true" inline @click="chooseNewReaction"><i class="ph-smiley ph-bold ph-lg"></i> Change</MkButton>
+							<MkButton rounded :small="true" inline @click="resetReaction"><i class="ph-arrow-clockwise ph-bold ph-lg"></i> Reset</MkButton>
+						</div>
+					</FromSlot>
 				</div>
-			</FromSlot>
+			</MkFolder>
 		</div>
 	</FormSection>
 
@@ -144,6 +151,7 @@ const hideGlobalTimeLine = computed(defaultStore.makeGetterSetter('hideGlobalTim
 const hideSocialTimeLine = computed(defaultStore.makeGetterSetter('hideSocialTimeLine'));
 const selectReaction = computed(defaultStore.makeGetterSetter('selectReaction'));
 const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'));
+const showLikeButton = computed(defaultStore.makeGetterSetter('showLikeButton'));
 
 watch([
 	hideReactionUsers,
@@ -161,6 +169,7 @@ watch([
 	hideSocialTimeLine,
 	selectReaction,
 	instanceTicker,
+	showLikeButton,
 ], async () => {
 	await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
 });

diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
@@ -422,6 +422,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: '🤍' as string,
 	},
+	showLikeButton: {
+		where: 'device',
+		default: true,
+	},
 	hideReactionCount: {
 		where: 'account',
 		default: 'none' as 'none' | 'self' | 'others' | 'all',