From 490b249407e1a89b23b0afc274daed1cffb89a59 Mon Sep 17 00:00:00 2001 From: Mar0xy Date: Thu, 16 Nov 2023 00:22:12 +0100 Subject: [PATCH] upd: Allow users to change default like emoji When users change the default like emoji in reactions tab from heart to another one it will be send out as that specific emoji. If reset back to heart it will default to the instance like emoji again which is heart by default. Closes transfem-org/Sharkey#95 --- packages/frontend/src/components/MkNote.vue | 5 ++-- .../src/components/MkNoteDetailed.vue | 5 ++-- .../frontend/src/components/MkNoteSub.vue | 5 ++-- .../frontend/src/pages/settings/reaction.vue | 23 +++++++++++++++++++ packages/frontend/src/store.ts | 4 ++++ 5 files changed, 36 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 295ab64a23..8b412f79b8 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -280,6 +280,7 @@ const translating = ref(false); const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance); const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || (appearNote.visibility === 'followers' && appearNote.userId === $i.id)); let renoteCollapsed = $ref(defaultStore.state.collapseRenotes && isRenote && (($i && ($i.id === note.userId || $i.id === appearNote.userId)) || (appearNote.myReaction != null))); +const defaultLike = computed(() => defaultStore.state.like !== '❤️' ? defaultStore.state.like : props.meta.defaultLike); const keymap = { 'r': () => reply(true), @@ -513,7 +514,7 @@ function like(): void { } os.api('notes/reactions/create', { noteId: appearNote.id, - reaction: props.meta.defaultLike, + reaction: defaultLike.value, }); const el = likeButton.value as HTMLElement | null | undefined; if (el) { @@ -534,7 +535,7 @@ function react(viaKeyboard = false): void { os.api('notes/reactions/create', { noteId: appearNote.id, - reaction: props.meta.defaultLike, + reaction: defaultLike.value, }); const el = reactButton.value as HTMLElement | null | undefined; if (el) { diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index 88773bdf03..66eeb962f3 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -323,6 +323,7 @@ const conversation = ref([]); const replies = ref([]); const quotes = ref([]); const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || appearNote.userId === $i.id); +const defaultLike = computed(() => defaultStore.state.like !== '❤️' ? defaultStore.state.like : meta.defaultLike); watch(() => props.expandAllCws, (expandAllCws) => { if (expandAllCws !== showContent.value) showContent.value = expandAllCws; @@ -558,7 +559,7 @@ function react(viaKeyboard = false): void { if (appearNote.reactionAcceptance === 'likeOnly') { os.api('notes/reactions/create', { noteId: appearNote.id, - reaction: meta.defaultLike, + reaction: defaultLike.value, }); const el = reactButton.value as HTMLElement | null | undefined; if (el) { @@ -588,7 +589,7 @@ function like(): void { showMovedDialog(); os.api('notes/reactions/create', { noteId: appearNote.id, - reaction: meta.defaultLike, + reaction: defaultLike.value, }); const el = likeButton.value as HTMLElement | null | undefined; if (el) { diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue index 7b8d744d6a..85d1203831 100644 --- a/packages/frontend/src/components/MkNoteSub.vue +++ b/packages/frontend/src/components/MkNoteSub.vue @@ -134,6 +134,7 @@ const menuButton = shallowRef(); const likeButton = shallowRef(); let appearNote = $computed(() => isRenote ? props.note.renote as Misskey.entities.Note : props.note); +const defaultLike = computed(() => defaultStore.state.like !== '❤️' ? defaultStore.state.like : props.meta.defaultLike); const isRenote = ( props.note.renote != null && @@ -189,7 +190,7 @@ function react(viaKeyboard = false): void { if (props.note.reactionAcceptance === 'likeOnly') { os.api('notes/reactions/create', { noteId: props.note.id, - reaction: props.meta.defaultLike, + reaction: defaultLike.value, }); const el = reactButton.value as HTMLElement | null | undefined; if (el) { @@ -219,7 +220,7 @@ function like(): void { showMovedDialog(); os.api('notes/reactions/create', { noteId: props.note.id, - reaction: props.meta.defaultLike, + reaction: defaultLike.value, }); const el = reactButton.value as HTMLElement | null | undefined; if (el) { diff --git a/packages/frontend/src/pages/settings/reaction.vue b/packages/frontend/src/pages/settings/reaction.vue index 183d2bfb47..16ddf00a6a 100644 --- a/packages/frontend/src/pages/settings/reaction.vue +++ b/packages/frontend/src/pages/settings/reaction.vue @@ -23,6 +23,16 @@ SPDX-License-Identifier: AGPL-3.0-only + + + + +
+ Change + Reset +
+ + @@ -74,6 +84,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js'; import { deepClone } from '@/scripts/clone.js'; let reactions = $ref(deepClone(defaultStore.state.reactions)); +const like = $computed(defaultStore.makeGetterSetter('like')); const reactionPickerSize = $computed(defaultStore.makeGetterSetter('reactionPickerSize')); const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPickerWidth')); @@ -120,6 +131,18 @@ function chooseEmoji(ev: MouseEvent) { }); } +function chooseNewLike(ev: MouseEvent) { + os.pickEmoji(ev.currentTarget ?? ev.target, { + showPinned: false, + }).then(emoji => { + defaultStore.set('like', emoji as string); + }); +} + +function resetLike() { + defaultStore.set('like', '❤️'); +} + watch($$(reactions), () => { save(); }, { diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 30c876ec20..a655d3542b 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -110,6 +110,10 @@ export const defaultStore = markRaw(new Storage('base', { where: 'account', default: 'nonSensitiveOnly' as 'likeOnly' | 'likeOnlyForRemote' | 'nonSensitiveOnly' | 'nonSensitiveOnlyForLocalLikeOnlyForRemote' | null, }, + like: { + where: 'account', + default: '❤️', + }, mutedAds: { where: 'account', default: [] as string[],