misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

merge: Expand Mandatory CW feature and fixup block/mute/silence features (resolves #809, #910, #912, #943, #1064, #1142, and #1186) (!1148)

Browse source 
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1148

Closes #809, #910, #912, #943, #1064, #1142, and #1186

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>
This commit is contained in:
Marie 2025-09-25 20:05:46 +02:00
commit 741e612508
125 changed files with 3195 additions and 1338 deletions
Download patch file Download diff file Expand all files Collapse all files

36
packages/frontend/src/components/DynamicNote.vue
View file

@ -14,28 +14,31 @@ Displays a note with either Misskey or Sharkey style, based on user preference.
:withHardMute="withHardMute"
@reaction="emoji => emit('reaction', emoji)"
@removeReaction="emoji => emit('removeReaction', emoji)"
@expandMute="n => onExpandNote(n)"
/>
</template>
<script setup lang="ts">
import * as Misskey from 'misskey-js';
import { computed, defineAsyncComponent, useTemplateRef } from 'vue';
import { defineAsyncComponent, useTemplateRef } from 'vue';
import type { ComponentExposed } from 'vue-component-type-helpers';
import type MkNote from '@/components/MkNote.vue';
import type SkNote from '@/components/SkNote.vue';
import { prefer } from '@/preferences';
import { deepAssign } from '@/utility/merge';
import { useMuteOverrides } from '@/utility/check-word-mute';
const XNote = defineAsyncComponent(() =>
prefer.s.noteDesign === 'misskey'
? import('@/components/MkNote.vue')
: import('@/components/SkNote.vue')
);
? import('@/components/MkNote.vue')
: import('@/components/SkNote.vue'));
const rootEl = useTemplateRef<ComponentExposed<typeof MkNote | typeof SkNote>>('rootEl');
const muteOverrides = useMuteOverrides();
defineExpose({ rootEl });
defineProps<{
const props = defineProps<{
note: Misskey.entities.Note;
pinned?: boolean;
mock?: boolean;
@ -45,5 +48,28 @@ defineProps<{
const emit = defineEmits<{
(ev: 'reaction', emoji: string): void;
(ev: 'removeReaction', emoji: string): void;
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
function onExpandNote(note: Misskey.entities.Note) {
// Expand the user/instance CW for matching subthread (and the inline reply/renote view)
if (note.id === props.note.id) {
deepAssign(muteOverrides, {
user: {
[note.user.id]: {
userMandatoryCW: null,
userSilenced: false,
},
},
instance: {
[note.user.host ?? '']: {
instanceMandatoryCW: null,
instanceSilenced: false,
},
},
});
}
emit('expandMute', note);
}
</script>

50
packages/frontend/src/components/DynamicNoteDetailed.vue
View file

@ -11,30 +11,70 @@ Displays a note in the detailed view with either Misskey or Sharkey style, based
:note="note"
:initialTab="initialTab"
:expandAllCws="expandAllCws"
@expandMute="n => onExpandNote(n)"
/>
</template>
<script setup lang="ts">
import * as Misskey from 'misskey-js';
import { computed, defineAsyncComponent, useTemplateRef } from 'vue';
import { defineAsyncComponent, useTemplateRef, watch } from 'vue';
import type { ComponentExposed } from 'vue-component-type-helpers';
import type MkNoteDetailed from '@/components/MkNoteDetailed.vue';
import type SkNoteDetailed from '@/components/SkNoteDetailed.vue';
import { prefer } from '@/preferences';
import { useMuteOverrides } from '@/utility/check-word-mute';
import { deepAssign } from '@/utility/merge';
const XNoteDetailed = defineAsyncComponent(() =>
prefer.s.noteDesign === 'misskey'
? import('@/components/MkNoteDetailed.vue')
: import('@/components/SkNoteDetailed.vue'),
);
? import('@/components/MkNoteDetailed.vue')
: import('@/components/SkNoteDetailed.vue'));
const rootEl = useTemplateRef<ComponentExposed<typeof MkNoteDetailed | typeof SkNoteDetailed>>('rootEl');
const muteOverrides = useMuteOverrides();
defineExpose({ rootEl });
defineProps<{
const props = defineProps<{
note: Misskey.entities.Note;
initialTab?: string;
expandAllCws?: boolean;
}>();
// Expand mandatory CWs when "expand all CWs" is clicked
watch(() => props.expandAllCws, () => {
deepAssign(muteOverrides, {
all: {
noteMandatoryCW: null,
userMandatoryCW: null,
instanceMandatoryCW: null,
},
});
});
const emit = defineEmits<{
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
function onExpandNote(note: Misskey.entities.Note) {
// Since this is a Detailed note, note.props must point to the top of a thread.
// Go ahead and expand matching user/instance/thread mutes downstream, since the user is very likely to want them.
if (note.id === props.note.id) {
deepAssign(muteOverrides, {
user: {
[note.user.id]: {
userMandatoryCW: null,
instanceMandatoryCW: null,
},
},
thread: {
[note.threadId]: {
threadMuted: false,
},
},
});
}
emit('expandMute', note);
}
</script>

11
packages/frontend/src/components/DynamicNoteSimple.vue
View file

@ -10,14 +10,16 @@ Displays a note in the simple view with either Misskey or Sharkey style, based o
ref="rootEl"
:note="note"
:expandAllCws="expandAllCws"
:skipMute="skipMute"
:hideFiles="hideFiles"
@editScheduledNote="() => emit('editScheduleNote')"
@expandMute="n => emit('expandMute', n)"
/>
</template>
<script setup lang="ts">
import * as Misskey from 'misskey-js';
import { computed, defineAsyncComponent, useTemplateRef } from 'vue';
import { defineAsyncComponent, useTemplateRef } from 'vue';
import type { ComponentExposed } from 'vue-component-type-helpers';
import type MkNoteSimple from '@/components/MkNoteSimple.vue';
import type SkNoteSimple from '@/components/SkNoteSimple.vue';
@ -25,9 +27,8 @@ import { prefer } from '@/preferences';
const XNoteSimple = defineAsyncComponent(() =>
prefer.s.noteDesign === 'misskey'
? import('@/components/MkNoteSimple.vue')
: import('@/components/SkNoteSimple.vue'),
);
? import('@/components/MkNoteSimple.vue')
: import('@/components/SkNoteSimple.vue'));
const rootEl = useTemplateRef<ComponentExposed<typeof MkNoteSimple | typeof SkNoteSimple>>('rootEl');
@ -39,10 +40,12 @@ defineProps<{
scheduledNoteId?: string
};
expandAllCws?: boolean;
skipMute?: boolean;
hideFiles?: boolean;
}>();
const emit = defineEmits<{
(ev: 'editScheduleNote'): void;
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
</script>

55
packages/frontend/src/components/MkNote.vue
View file

@ -4,20 +4,22 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div
v-if="!hardMuted && muted === false && !threadMuted && !noteMuted"
<SkMutedNote
v-show="!isDeleted"
ref="rootEl"
ref="rootComp"
v-hotkey="keymap"
:note="appearNote"
:withHardMute="withHardMute"
:class="[$style.root, { [$style.showActionsOnlyHover]: prefer.s.showNoteActionsOnlyHover, [$style.skipRender]: prefer.s.skipNoteRender }]"
:tabindex="isDeleted ? '-1' : '0'"
@expandMute="n => emit('expandMute', n)"
>
<div v-if="appearNote.reply && inReplyToCollapsed" :class="$style.collapsedInReplyTo">
<MkAvatar :class="$style.collapsedInReplyToAvatar" :user="appearNote.reply.user" link preview/>
<MkAcct :user="appearNote.reply.user" :class="$style.collapsedInReplyToText" @click="inReplyToCollapsed = false"/>:
<Mfm :text="getNoteSummary(appearNote.reply)" :plain="true" :nowrap="true" :author="appearNote.reply.user" :nyaize="'respect'" :class="$style.collapsedInReplyToText" @click="inReplyToCollapsed = false"/>
</div>
<MkNoteSub v-if="appearNote.reply" v-show="!renoteCollapsed && !inReplyToCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
<MkNoteSub v-if="appearNote.reply" v-show="!renoteCollapsed && !inReplyToCollapsed" :note="appearNote.reply" :class="$style.replyTo" @expandMute="n => emit('expandMute', n)"/>
<div v-if="pinned" :class="$style.tip"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</div>
<div v-if="isRenote" :class="$style.renote">
<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
@ -57,10 +59,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkInstanceTicker v-if="showTicker" :host="appearNote.user.host" :instance="appearNote.user.instance"/>
<div style="container-type: inline-size;">
<bdi>
<p v-if="mergedCW != null" :class="$style.cw">
<p v-if="appearNote.cw != null" :class="$style.cw">
<Mfm
v-if="mergedCW != ''"
:text="mergedCW"
v-if="appearNote.cw != ''"
:text="appearNote.cw"
:author="appearNote.user"
:nyaize="'respect'"
:enableEmojiMenu="true"
@ -69,7 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-only
/>
<MkCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll" style="margin: 4px 0;" @click.stop/>
</p>
<div v-show="mergedCW == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]">
<div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]">
<div :class="$style.text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<div>
@ -96,9 +98,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :author="appearNote.user" :emojiUrls="appearNote.emojis" :class="$style.poll" @click.stop/>
<div v-if="isEnabledUrlPreview" :class="[$style.urlPreview, '_gaps_s']" @click.stop>
<SkUrlPreviewGroup :sourceUrls="urls" :sourceNote="appearNote" :compact="true" :detail="false" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds"/>
<SkUrlPreviewGroup :sourceUrls="urls" :sourceNote="appearNote" :compact="true" :detail="false" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" @expandMute="n => emit('expandMute', n)"/>
</div>
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote" @expandMute="n => emit('expandMute', n)"/></div>
<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click.stop @click="collapsed = false">
<span :class="$style.collapsedLabel">{{ i18n.ts.showMore }}</span>
</button>
@ -167,16 +169,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</footer>
</div>
</article>
</div>
<div v-else-if="!hardMuted" :class="$style.muted" @click.stop="muted = false">
<SkMutedNote :muted="muted" :threadMuted="threadMuted" :noteMuted="noteMuted" :note="appearNote"></SkMutedNote>
</div>
<div v-else>
<!--
MkDateSeparatedList uses TransitionGroup which requires single element in the child elements
so MkNote create empty div instead of no elements
-->
</div>
</SkMutedNote>
</template>
<script lang="ts" setup>
@ -186,7 +179,6 @@ import * as Misskey from 'misskey-js';
import { isLink } from '@@/js/is-link.js';
import { shouldCollapsed } from '@@/js/collapsed.js';
import * as config from '@@/js/config.js';
import { computeMergedCw } from '@@/js/compute-merged-cw.js';
import type { Ref } from 'vue';
import type { MenuItem } from '@/types/menu.js';
import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
@ -205,7 +197,6 @@ import MkUrlPreview from '@/components/MkUrlPreview.vue';
import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
import MkButton from '@/components/MkButton.vue';
import { pleaseLogin } from '@/utility/please-login.js';
import { checkMutes } from '@/utility/check-word-mute.js';
import { notePage } from '@/filters/note.js';
import { userPage } from '@/filters/user.js';
import number from '@/filters/number.js';
@ -217,7 +208,7 @@ import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
import { checkAnimationFromMfm } from '@/utility/check-animated-mfm.js';
import { $i } from '@/i.js';
import { i18n } from '@/i18n.js';
import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu, getRenoteMenu, translateNote } from '@/utility/get-note-menu.js';
import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu, translateNote } from '@/utility/get-note-menu.js';
import { getNoteVersionsMenu } from '@/utility/get-note-versions-menu.js';
import { useNoteCapture } from '@/use/use-note-capture.js';
import { deepClone } from '@/utility/clone.js';
@ -254,6 +245,7 @@ provide(DI.mock, props.mock);
const emit = defineEmits<{
(ev: 'reaction', emoji: string): void;
(ev: 'removeReaction', emoji: string): void;
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
const router = useRouter();
@ -272,7 +264,8 @@ function noteclick(id: string) {
const isRenote = Misskey.note.isPureRenote(note.value);
const rootEl = useTemplateRef('rootEl');
const rootComp = useTemplateRef('rootComp');
const rootEl = computed(() => rootComp.value?.rootEl ?? null);
const menuButton = useTemplateRef('menuButton');
const renoteButton = useTemplateRef('renoteButton');
const renoteTime = useTemplateRef('renoteTime');
@ -291,7 +284,6 @@ const selfNoteIds = computed(() => getSelfNoteIds(props.note));
const isLong = shouldCollapsed(appearNote.value, urls.value);
const collapsed = ref(prefer.s.expandLongNote && appearNote.value.cw == null && isLong ? false : appearNote.value.cw == null && isLong);
const isDeleted = ref(false);
const { muted, hardMuted, threadMuted, noteMuted } = checkMutes(appearNote, computed(() => props.withHardMute));
const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
const translating = ref(false);
const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceTicker === 'remote' && appearNote.value.user.instance);
@ -314,8 +306,6 @@ const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
}));
const mergedCW = computed(() => computeMergedCw(appearNote.value));
const renoteTooltip = computeRenoteTooltip(appearNote);
let renoting = false;
@ -1291,16 +1281,7 @@ function emitUpdReaction(emoji: string, delta: number) {
}
}
.muted {
padding: 8px;
text-align: center;
opacity: 0.7;
cursor: pointer;
}
.muted:hover {
background: var(--MI_THEME-buttonBg);
}
// Mute CSS moved to SkMutedNote.vue
.reactionOmitted {
display: inline-block;

58
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -4,21 +4,22 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div
v-if="!muted && !threadMuted && !noteMuted"
<SkMutedNote
v-show="!isDeleted"
ref="rootEl"
ref="rootComp"
v-hotkey="keymap"
:note="appearNote"
:class="$style.root"
:tabindex="isDeleted ? '-1' : '0'"
@expandMute="n => emit('expandMute', n)"
>
<div v-if="appearNote.reply && appearNote.reply.replyId">
<div v-if="!conversationLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadConversation">{{ i18n.ts.loadConversation }}</MkButton>
</div>
<MkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws"/>
<MkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws" @expandMute="n => emit('expandMute', n)"/>
</div>
<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws"/>
<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws" @expandMute="n => emit('expandMute', n)"/>
<div v-if="isRenote" :class="$style.renote">
<MkAvatar :class="$style.renoteAvatar" :user="note.user" link preview/>
<i class="ti ti-repeat" style="margin-right: 4px;"></i>
@ -75,10 +76,10 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</header>
<div :class="$style.noteContent">
<p v-if="mergedCW != null" :class="$style.cw">
<p v-if="appearNote.cw != null" :class="$style.cw">
<Mfm
v-if="mergedCW != ''"
:text="mergedCW"
v-if="appearNote.cw != ''"
:text="appearNote.cw"
:author="appearNote.user"
:nyaize="'respect'"
:enableEmojiMenu="true"
@ -87,7 +88,7 @@ SPDX-License-Identifier: AGPL-3.0-only
/>
<MkCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll"/>
</p>
<div v-show="mergedCW == null || showContent">
<div v-show="appearNote.cw == null || showContent">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<div>
<MkA v-if="appearNote.replyId" :class="$style.noteReplyTarget" :to="`/notes/${appearNote.replyId}`"><i class="ph-arrow-bend-left-up ph-bold ph-lg"></i></MkA>
@ -112,9 +113,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkPoll v-if="appearNote.poll" ref="pollViewer" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :class="$style.poll" :author="appearNote.user" :emojiUrls="appearNote.emojis"/>
<div v-if="isEnabledUrlPreview" class="_gaps_s" style="margin-top: 6px;" @click.stop>
<SkUrlPreviewGroup :sourceNodes="parsed" :sourceNote="appearNote" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds"/>
<SkUrlPreviewGroup :sourceNodes="parsed" :sourceNote="appearNote" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" @expandMute="n => emit('expandMute', n)"/>
</div>
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote" :expandAllCws="props.expandAllCws"/></div>
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote" :expandAllCws="props.expandAllCws" @expandMute="n => emit('expandMute', n)"/></div>
</div>
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
</div>
@ -188,7 +189,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!repliesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
</div>
<MkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
<MkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" @expandMute="n => emit('expandMute', n)"/>
</div>
<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@ -205,7 +206,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!quotesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadQuotes">{{ i18n.ts.loadReplies }}</MkButton>
</div>
<MkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws"/>
<MkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" @expandMute="n => emit('expandMute', n)"/>
</div>
<div v-else-if="tab === 'reactions'" :class="$style.tab_reactions">
<div :class="$style.reactionTabs">
@ -225,10 +226,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkPagination>
</div>
</div>
</div>
<div v-else class="_panel" :class="$style.muted" @click.stop="muted = false">
<SkMutedNote :muted="muted" :threadMuted="threadMuted" :noteMuted="noteMuted" :note="appearNote"></SkMutedNote>
</div>
</SkMutedNote>
</template>
<script lang="ts" setup>
@ -237,7 +235,6 @@ import * as mfm from 'mfm-js';
import * as Misskey from 'misskey-js';
import { isLink } from '@@/js/is-link.js';
import * as config from '@@/js/config.js';
import { computeMergedCw } from '@@/js/compute-merged-cw.js';
import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
import type { Paging } from '@/components/MkPagination.vue';
import type { Keymap } from '@/utility/hotkey.js';
@ -253,7 +250,6 @@ import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
import MkUrlPreview from '@/components/MkUrlPreview.vue';
import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
import { pleaseLogin } from '@/utility/please-login.js';
import { checkMutes } from '@/utility/check-word-mute.js';
import { userPage } from '@/filters/user.js';
import { notePage } from '@/filters/note.js';
import number from '@/filters/number.js';
@ -264,7 +260,7 @@ import { reactionPicker } from '@/utility/reaction-picker.js';
import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
import { $i } from '@/i.js';
import { i18n } from '@/i18n.js';
import { getNoteClipMenu, getNoteMenu, getRenoteMenu, translateNote } from '@/utility/get-note-menu.js';
import { getNoteClipMenu, getNoteMenu, translateNote } from '@/utility/get-note-menu.js';
import { getNoteVersionsMenu } from '@/utility/get-note-versions-menu.js';
import { checkAnimationFromMfm } from '@/utility/check-animated-mfm.js';
import { useNoteCapture } from '@/use/use-note-capture.js';
@ -296,13 +292,18 @@ const props = withDefaults(defineProps<{
initialTab: 'replies',
});
const emit = defineEmits<{
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
const inChannel = inject('inChannel', null);
const note = ref(deepClone(props.note));
const isRenote = Misskey.note.isPureRenote(note.value);
const rootEl = useTemplateRef('rootEl');
const rootComp = useTemplateRef('rootComp');
const rootEl = computed(() => rootComp.value?.rootEl ?? null);
const menuButton = useTemplateRef('menuButton');
const renoteButton = useTemplateRef('renoteButton');
const renoteTime = useTemplateRef('renoteTime');
@ -329,12 +330,8 @@ const quotes = ref<Misskey.entities.Note[]>([]);
const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
const defaultLike = computed(() => prefer.s.like ? prefer.s.like : null);
const mergedCW = computed(() => computeMergedCw(appearNote.value));
const renoteTooltip = computeRenoteTooltip(appearNote);
const { muted, threadMuted, noteMuted } = checkMutes(appearNote);
setupNoteViewInterruptors(note, isDeleted);
watch(() => props.expandAllCws, (expandAllCws) => {
@ -1149,14 +1146,5 @@ function animatedMFM() {
}
}
.muted {
padding: 8px;
text-align: center;
opacity: 0.7;
cursor: pointer;
}
.muted:hover {
background: var(--MI_THEME-buttonBg);
}
// Mute CSS moved to SkMutedNote.vue
</style>

18
packages/frontend/src/components/MkNoteSimple.vue
View file

@ -4,16 +4,16 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div v-if="!isDeleted" :class="$style.root">
<SkMutedNote v-if="!isDeleted" :note="note" :skipMute="skipMute" :class="$style.root" @expandMute="n => emit('expandMute', n)">
<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
<div :class="$style.main">
<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
<div>
<p v-if="mergedCW != null" :class="$style.cw">
<Mfm v-if="mergedCW != ''" style="margin-right: 8px;" :text="mergedCW" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
<p v-if="props.note.cw != null" :class="$style.cw">
<Mfm v-if="props.note.cw != ''" style="margin-right: 8px;" :text="props.note.cw" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll" @click.stop/>
</p>
<div v-show="mergedCW == null || showContent">
<div v-show="props.note.cw == null || showContent">
<MkSubNoteContent :hideFiles="hideFiles" :class="$style.text" :note="note" :expandAllCws="props.expandAllCws"/>
<div v-if="note.isSchedule" style="margin-top: 10px;">
<MkButton :class="$style.button" inline @click.stop.prevent="editScheduleNote()"><i class="ti ti-eraser"></i> {{ i18n.ts.edit }}</MkButton>
@ -22,18 +22,18 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</div>
</div>
</SkMutedNote>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { ref, watch } from 'vue';
import * as Misskey from 'misskey-js';
import { computeMergedCw } from '@@/js/compute-merged-cw.js';
import * as os from '@/os.js';
import MkNoteHeader from '@/components/MkNoteHeader.vue';
import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
import MkCwButton from '@/components/MkCwButton.vue';
import MkButton from '@/components/MkButton.vue';
import SkMutedNote from '@/components/SkMutedNote.vue';
import { i18n } from '@/i18n.js';
import { prefer } from '@/preferences.js';
import { setupNoteViewInterruptors } from '@/plugin.js';
@ -45,6 +45,7 @@ const props = defineProps<{
scheduledNoteId?: string
};
expandAllCws?: boolean;
skipMute?: boolean;
hideFiles?: boolean;
}>();
@ -53,14 +54,13 @@ const isDeleted = ref(false);
const note = ref(deepClone(props.note));
const mergedCW = computed(() => computeMergedCw(note.value));
if (!note.value.isSchedule) {
setupNoteViewInterruptors(note, null);
}
const emit = defineEmits<{
(ev: 'editScheduleNote'): void;
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
async function deleteScheduleNote() {

35
packages/frontend/src/components/MkNoteSub.vue
View file

@ -4,18 +4,18 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div v-show="!isDeleted" v-if="!muted && !noteMuted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
<SkMutedNote v-show="!isDeleted" ref="rootComp" :note="appearNote" :mutedClass="$style.muted" :expandedClass="[$style.root, { [$style.children]: depth > 1 }]" @expandMute="n => emit('expandMute', n)">
<div :class="$style.main">
<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
<div :class="$style.body">
<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
<div :class="$style.content">
<p v-if="mergedCW != null" :class="$style.cw">
<Mfm v-if="mergedCW != ''" style="margin-right: 8px;" :text="mergedCW" :isBlock="true" :author="note.user" :nyaize="'respect'"/>
<p v-if="appearNote.cw != null" :class="$style.cw">
<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :isBlock="true" :author="note.user" :nyaize="'respect'"/>
<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll"/>
</p>
<div v-show="mergedCW == null || showContent">
<div v-show="appearNote.cw == null || showContent">
<MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation" :expandAllCws="props.expandAllCws"/>
</div>
</div>
@ -72,21 +72,17 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<template v-if="depth < prefer.s.numberOfReplies">
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="$style.reply" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="$style.reply" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" @expandMute="n => emit('expandMute', n)"/>
</template>
<div v-else :class="$style.more">
<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ti ti-chevron-double-right"></i></MkA>
</div>
</div>
<div v-else :class="$style.muted" @click.stop="muted = false">
<SkMutedNote :muted="muted" :threadMuted="false" :noteMuted="noteMuted" :note="appearNote"></SkMutedNote>
</div>
</SkMutedNote>
</template>
<script lang="ts" setup>
import { computed, inject, ref, shallowRef, useTemplateRef, watch } from 'vue';
import * as Misskey from 'misskey-js';
import { computeMergedCw } from '@@/js/compute-merged-cw.js';
import * as config from '@@/js/config.js';
import type { Ref } from 'vue';
import type { Visibility } from '@/utility/boost-quote.js';
@ -102,7 +98,6 @@ import { misskeyApi } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js';
import { $i } from '@/i.js';
import { userPage } from '@/filters/user.js';
import { checkMutes } from '@/utility/check-word-mute.js';
import { pleaseLogin } from '@/utility/please-login.js';
import { showMovedDialog } from '@/utility/show-moved-dialog.js';
import MkRippleEffect from '@/components/MkRippleEffect.vue';
@ -131,13 +126,18 @@ const props = withDefaults(defineProps<{
onDeleteCallback: undefined,
});
const emit = defineEmits<{
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
const note = ref(deepClone(props.note));
const appearNote = computed(() => getAppearNote(note.value));
const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || appearNote.value.userId === $i?.id);
const el = shallowRef<HTMLElement>();
const rootComp = useTemplateRef('rootComp');
const el = computed(() => rootComp.value?.rootEl ?? null);
const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
const translating = ref(false);
const isDeleted = ref(false);
@ -153,8 +153,6 @@ const renoteTooltip = computeRenoteTooltip(appearNote);
const defaultLike = computed(() => prefer.s.like ? prefer.s.like : null);
const replies = ref<Misskey.entities.Note[]>([]);
const mergedCW = computed(() => computeMergedCw(appearNote.value));
const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
type: 'lookup',
url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
@ -177,8 +175,6 @@ async function removeReply(id: Misskey.entities.Note['id']) {
}
}
const { muted, noteMuted } = checkMutes(appearNote);
useNoteCapture({
rootEl: el,
note: appearNote,
@ -504,15 +500,8 @@ if (props.detail) {
}
.muted {
text-align: center;
padding: 8px !important;
border: 1px solid var(--MI_THEME-divider);
margin: 8px 8px 0 8px;
border-radius: var(--MI-radius-sm);
cursor: pointer;
}
.muted:hover {
background: var(--MI_THEME-buttonBg);
}
</style>

6
packages/frontend/src/components/MkNotes.vue
View file

@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #default="{ items: notes }">
<div :class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap, [$style.reverse]: pagination.reversed }]">
<template v-for="(note, i) in notes" :key="note.id">
<DynamicNote :class="$style.note" :note="note as Misskey.entities.Note" :withHardMute="true" :data-scroll-anchor="note.id"/>
<DynamicNote :class="$style.note" :note="note as Misskey.entities.Note" :withHardMute="true" :data-scroll-anchor="note.id" @expandMute="n => emit('expandMute', n)"/>
<MkAd v-if="note._shouldInsertAd_" :preferForms="['horizontal', 'horizontal-big']" :class="$style.ad"/>
</template>
</div>
@ -37,6 +37,10 @@ const pagingComponent = useTemplateRef('pagingComponent');
defineExpose({
pagingComponent,
});
const emit = defineEmits<{
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
</script>
<style lang="scss" module>

4
packages/frontend/src/components/MkPostForm.vue
View file

@ -52,8 +52,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</button>
</div>
</header>
<MkNoteSimple v-if="reply" :class="$style.targetNote" :hideFiles="true" :note="reply"/>
<MkNoteSimple v-if="renoteTargetNote" :class="$style.targetNote" :hideFiles="true" :note="renoteTargetNote"/>
<MkNoteSimple v-if="reply" :class="$style.targetNote" :hideFiles="true" :note="reply" :skipMute="true"/>
<MkNoteSimple v-if="renoteTargetNote" :class="$style.targetNote" :hideFiles="true" :note="renoteTargetNote" :skipMute="true"/>
<div v-if="quoteId" :class="$style.withQuote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null; renoteTargetNote = null;"><i class="ti ti-x"></i></button></div>
<div v-if="visibility === 'specified'" :class="$style.toSpecified">
<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>

2
packages/frontend/src/components/MkSchedulePostListDialog.vue
View file

@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #default="{ items }">
<div class="_gaps">
<MkNoteSimple v-for="item in items" :key="item.id" :scheduled="true" :note="item.note" @editScheduleNote="listUpdate"/>
<MkNoteSimple v-for="item in items" :key="item.id" :scheduled="true" :note="item.note" :skipMute="true" @editScheduleNote="listUpdate"/>
</div>
</template>
</MkPagination>

6
packages/frontend/src/components/MkUrlPreview.vue
View file

@ -43,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkButton>
</div>
</template>
<div v-else-if="theNote" :class="[$style.link, { [$style.compact]: compact }]"><DynamicNoteSimple :note="theNote" :class="$style.body"/></div>
<div v-else-if="theNote" :class="[$style.link, { [$style.compact]: compact }]"><DynamicNoteSimple :note="theNote" :class="$style.body" @expandMute="n => emit('expandMute', n)"/></div>
<div v-else-if="!hidePreview">
<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="maybeRelativeUrl" rel="nofollow noopener" :target="target" :title="url" @click.prevent="self ? true : warningExternalWebsite(url)" @click.stop>
<div v-if="thumbnail && !sensitive" :class="$style.thumbnail" :style="prefer.s.dataSaver.urlPreview ? '' : { backgroundImage: `url('${thumbnail}')` }">
@ -151,6 +151,10 @@ const props = withDefaults(defineProps<{
attributionHint: undefined,
});
const emit = defineEmits<{
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
const MOBILE_THRESHOLD = 500;
const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);

27
packages/frontend/src/components/SkFollowingFeedEntry.vue
View file

@ -6,7 +6,7 @@ Selectable entry on the "Following" feed, displaying a user with their most rece
-->
<template>
<div v-if="!hardMuted" :class="$style.root" @click="$emit('select', note.user)">
<SkMutedNote :note="note" :mutedClass="$style.muted" :expandedClass="$style.root" @click="$emit('select', note.user)">
<div :class="$style.avatar">
<MkAvatar :class="$style.icon" :user="note.user" indictor/>
</div>
@ -20,39 +20,26 @@ Selectable entry on the "Following" feed, displaying a user with their most rece
</MkA>
</header>
<div>
<div v-if="muted || threadMuted || noteMuted" :class="[$style.text, $style.muted]">
<SkMutedNote :muted="muted" :threadMuted="threadMuted" :noteMuted="noteMuted" :note="note"></SkMutedNote>
</div>
<Mfm v-else :class="$style.text" :text="getNoteSummary(note)" :isBlock="true" :plain="true" :nowrap="false" :isNote="true" nyaize="respect" :author="note.user"/>
<Mfm :class="$style.text" :text="getNoteSummary(note, false)" :isBlock="true" :plain="true" :nowrap="false" :isNote="true" nyaize="respect" :author="note.user"/>
</div>
</div>
</div>
<div v-else>
<!--
MkDateSeparatedList uses TransitionGroup which requires single element in the child elements
so MkNote create empty div instead of no elements
-->
</div>
</SkMutedNote>
</template>
<script lang="ts" setup>
import * as Misskey from 'misskey-js';
import { computed } from 'vue';
import { getNoteSummary } from '@/utility/get-note-summary.js';
import { userPage } from '@/filters/user.js';
import { notePage } from '@/filters/note.js';
import { checkMutes } from '@/utility/check-word-mute';
import SkMutedNote from '@/components/SkMutedNote.vue';
const props = defineProps<{
defineProps<{
note: Misskey.entities.Note,
}>();
defineEmits<{
(event: 'select', user: Misskey.entities.UserLite): void
}>();
const { muted, hardMuted, threadMuted, noteMuted } = checkMutes(computed(() => props.note));
</script>
<style lang="scss" module>
@ -67,6 +54,10 @@ const { muted, hardMuted, threadMuted, noteMuted } = checkMutes(computed(() => p
cursor: pointer;
}
.root:hover {
background: var(--MI_THEME-buttonBg);
}
.avatar {
align-self: center;
flex-shrink: 0;
@ -116,6 +107,8 @@ const { muted, hardMuted, threadMuted, noteMuted } = checkMutes(computed(() => p
.muted {
font-style: italic;
align-items: center;
justify-content: center;
}
@container (max-width: 600px) {

184
packages/frontend/src/components/SkMutedNote.vue
View file

@ -6,62 +6,168 @@ Displays a placeholder for a muted note.
-->
<template>
<I18n v-if="noteMuted" :src="i18n.ts.userSaysSomethingInMutedNote" tag="small">
<template #name>
<MkUserName :user="note.user"/>
</template>
</I18n>
<I18n v-else-if="threadMuted" :src="i18n.ts.userSaysSomethingInMutedThread" tag="small">
<template #name>
<MkUserName :user="note.user"/>
</template>
</I18n>
<div ref="rootEl" :class="rootClass">
<!-- The actual note (or whatever we're wrapping) will render here. -->
<slot v-if="isExpanded"></slot>
<br v-if="threadMuted && muted">
<!-- If hard muted, we want to hide *everything*, including the placeholders and controls to expand. -->
<div v-else-if="!mute.hardMuted" :class="[$style.muted, $style.muteContainer, mutedClass]" @click.stop="expand">
<!-- Mandatory CWs -->
<I18n v-if="mute.noteMandatoryCW" :src="i18n.ts.noteIsFlaggedAs" tag="small">
<template #cw>
{{ mute.noteMandatoryCW }}
</template>
</I18n>
<I18n v-if="mute.userMandatoryCW" :src="i18n.ts.userIsFlaggedAs" tag="small">
<template #name>
{{ userName }}
</template>
<template #cw>
{{ mute.userMandatoryCW }}
</template>
</I18n>
<I18n v-if="mute.instanceMandatoryCW" :src="i18n.ts.instanceIsFlaggedAs" tag="small">
<template #name>
{{ instanceName }}
</template>
<template #cw>
{{ mute.instanceMandatoryCW }}
</template>
</I18n>
<template v-if="muted">
<I18n v-if="muted === 'sensitiveMute'" :src="i18n.ts.userSaysSomethingSensitive" tag="small">
<template #name>
<MkUserName :user="note.user"/>
<!-- Muted notes/threads -->
<I18n v-if="mute.noteMuted" :src="i18n.ts.userSaysSomethingInMutedNote" tag="small">
<template #name>
{{ userName }}
</template>
</I18n>
<I18n v-else-if="mute.threadMuted" :src="i18n.ts.userSaysSomethingInMutedThread" tag="small">
<template #name>
{{ userName }}
</template>
</I18n>
<!-- Silenced users/instances -->
<I18n v-if="mute.userSilenced" :src="i18n.ts.silencedUserSaysSomething" tag="small">
<template #name>
{{ userName }}
</template>
<template #host>
{{ host }}
</template>
</I18n>
<I18n v-if="mute.instanceSilenced" :src="i18n.ts.silencedInstanceSaysSomething" tag="small">
<template #name>
{{ instanceName }}
</template>
<template #host>
{{ host }}
</template>
</I18n>
<!-- Word mutes -->
<template v-if="mutedWords">
<I18n v-if="prefer.s.showSoftWordMutedWord" :src="i18n.ts.userSaysSomethingAbout" tag="small">
<template #name>
{{ userName }}
</template>
<template #word>
{{ mutedWords }}
</template>
</I18n>
<I18n v-else :src="i18n.ts.userSaysSomething" tag="small">
<template #name>
{{ userName }}
</template>
</I18n>
</template>
</I18n>
<I18n v-else-if="!prefer.s.showSoftWordMutedWord" :src="i18n.ts.userSaysSomething" tag="small">
<template #name>
<MkUserName :user="note.user"/>
</template>
</I18n>
<I18n v-else :src="i18n.ts.userSaysSomethingAbout" tag="small">
<template #name>
<MkUserName :user="note.user"/>
</template>
<template #word>
{{ mutedWords }}
</template>
</I18n>
</template>
<!-- Sensitive mute -->
<I18n v-if="mute.sensitiveMuted" :src="i18n.ts.userSaysSomethingSensitive" tag="small">
<template #name>
{{ userName }}
</template>
</I18n>
</div>
</div>
</template>
<script setup lang="ts">
import * as Misskey from 'misskey-js';
import { computed } from 'vue';
import { computed, ref, useTemplateRef } from 'vue';
import { host } from '@@/js/config.js';
import type { Ref } from 'vue';
import { i18n } from '@/i18n.js';
import { prefer } from '@/preferences.js';
import { checkMute } from '@/utility/check-word-mute.js';
const props = withDefaults(defineProps<{
muted: false | 'sensitiveMute' | string[];
threadMuted?: boolean;
noteMuted?: boolean;
note: Misskey.entities.Note;
withHardMute?: boolean;
mutedClass?: string | string[] | Record<string, boolean> | (string | string[] | Record<string, boolean>)[];
expandedClass?: string | string[] | Record<string, boolean> | (string | string[] | Record<string, boolean>)[];
skipMute?: boolean;
}>(), {
threadMuted: false,
noteMuted: false,
withHardMute: true,
mutedClass: undefined,
expandedClass: undefined,
skipMute: false,
});
const mutedWords = computed(() => Array.isArray(props.muted)
? props.muted.join(', ')
: props.muted);
const emit = defineEmits<{
(type: 'expandMute', note: Misskey.entities.Note): void;
}>();
const expandNote = ref(false);
function expand() {
expandNote.value = true;
emit('expandMute', props.note);
}
const mute = checkMute(
computed(() => props.note),
computed(() => props.withHardMute),
computed(() => prefer.s.uncollapseCW),
);
const mutedWords = computed(() => mute.value.softMutedWords?.join(', '));
const isExpanded = computed(() => props.skipMute || expandNote.value || !mute.value.hasMute);
const rootClass = computed(() => isExpanded.value ? props.expandedClass : undefined);
const userName = computed(() => props.note.user.host
? `@${props.note.user.username}@${props.note.user.host}`
: `@${props.note.user.username}`);
const instanceName = computed(() => props.note.user.host ?? host);
const rootEl = useTemplateRef('rootEl');
defineExpose({
rootEl: rootEl as Ref<HTMLElement | null>,
});
</script>
<style module lang="scss">
.muted {
padding: 8px;
text-align: center;
opacity: 0.7;
cursor: pointer;
// Without this, the mute placeholder collapses weirdly when the note is rendered in a flax container.
flex: 1;
}
.muted:hover {
background: var(--MI_THEME-buttonBg);
}
.muteContainer > :not(:first-child) {
margin-left: 0.75rem;
&:before {
content: "•";
margin-right: 0.75rem;
font-size: 1rem;
}
}
</style>

52
packages/frontend/src/components/SkNote.vue
View file

@ -6,15 +6,17 @@ Displays a note in the Sharkey style. Used to show the "main" note in a given co
-->
<template>
<div
v-if="!hardMuted && muted === false && !threadMuted && !noteMuted"
<SkMutedNote
v-show="!isDeleted"
ref="rootEl"
ref="rootComp"
v-hotkey="keymap"
:note="appearNote"
:withHardMute="withHardMute"
:class="[$style.root, { [$style.showActionsOnlyHover]: prefer.s.showNoteActionsOnlyHover, [$style.skipRender]: prefer.s.skipNoteRender }]"
:tabindex="isDeleted ? '-1' : '0'"
@expandMute="n => emit('expandMute', n)"
>
<SkNoteSub v-if="appearNote.reply" v-show="!renoteCollapsed && !inReplyToCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
<SkNoteSub v-if="appearNote.reply" v-show="!renoteCollapsed && !inReplyToCollapsed" :note="appearNote.reply" :class="$style.replyTo" @expandMute="n => emit('expandMute', n)"/>
<div v-if="appearNote.reply && inReplyToCollapsed && !renoteCollapsed" :class="$style.collapsedInReplyTo">
<div :class="$style.collapsedInReplyToLine"></div>
<MkAvatar :class="$style.collapsedInReplyToAvatar" :user="appearNote.reply.user" link preview/>
@ -62,10 +64,10 @@ Displays a note in the Sharkey style. Used to show the "main" note in a given co
</div>
<div :class="[{ [$style.clickToOpen]: prefer.s.clickToOpen }]" @click.stop="prefer.s.clickToOpen ? noteclick(appearNote.id) : undefined">
<div style="container-type: inline-size;">
<p v-if="mergedCW != null" :class="$style.cw">
<p v-if="appearNote.cw != null" :class="$style.cw">
<Mfm
v-if="mergedCW != ''"
:text="mergedCW"
v-if="appearNote.cw != ''"
:text="appearNote.cw"
:author="appearNote.user"
:nyaize="'respect'"
:enableEmojiMenu="true"
@ -75,7 +77,7 @@ Displays a note in the Sharkey style. Used to show the "main" note in a given co
/>
<MkCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll" style="margin: 4px 0;" @click.stop/>
</p>
<div v-show="mergedCW == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]">
<div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]">
<div :class="$style.text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<Mfm
@ -99,7 +101,7 @@ Displays a note in the Sharkey style. Used to show the "main" note in a given co
</div>
<MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :author="appearNote.user" :emojiUrls="appearNote.emojis" :class="$style.poll" @click.stop/>
<div v-if="isEnabledUrlPreview" :class="[$style.urlPreview, '_gaps_s']" @click.stop>
<SkUrlPreviewGroup :sourceUrls="urls" :sourceNote="appearNote" :compact="true" :detail="false" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds"/>
<SkUrlPreviewGroup :sourceUrls="urls" :sourceNote="appearNote" :compact="true" :detail="false" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" @expandMute="n => emit('expandMute', n)"/>
</div>
<div v-if="appearNote.renote" :class="$style.quote"><SkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click.stop @click="collapsed = false">
@ -169,16 +171,7 @@ Displays a note in the Sharkey style. Used to show the "main" note in a given co
</footer>
</div>
</article>
</div>
<div v-else-if="!hardMuted" :class="$style.muted" @click.stop="muted = false">
<SkMutedNote :muted="muted" :threadMuted="threadMuted" :noteMuted="noteMuted" :note="appearNote"></SkMutedNote>
</div>
<div v-else>
<!--
MkDateSeparatedList uses TransitionGroup which requires single element in the child elements
so MkNote create empty div instead of no elements
-->
</div>
</SkMutedNote>
</template>
<script lang="ts" setup>
@ -188,7 +181,6 @@ import * as Misskey from 'misskey-js';
import { isLink } from '@@/js/is-link.js';
import { shouldCollapsed } from '@@/js/collapsed.js';
import * as config from '@@/js/config.js';
import { computeMergedCw } from '@@/js/compute-merged-cw.js';
import type { Ref } from 'vue';
import type { MenuItem } from '@/types/menu.js';
import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
@ -206,7 +198,6 @@ import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
import MkUrlPreview from '@/components/MkUrlPreview.vue';
import MkButton from '@/components/MkButton.vue';
import { pleaseLogin } from '@/utility/please-login.js';
import { checkMutes } from '@/utility/check-word-mute.js';
import { notePage } from '@/filters/note.js';
import { userPage } from '@/filters/user.js';
import number from '@/filters/number.js';
@ -240,6 +231,7 @@ import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
import { getSelfNoteIds } from '@/utility/get-self-note-ids.js';
import { extractPreviewUrls } from '@/utility/extract-preview-urls.js';
import SkUrlPreviewGroup from '@/components/SkUrlPreviewGroup.vue';
import MkNoteSub from '@/components/MkNoteSub.vue';
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
@ -255,6 +247,7 @@ provide(DI.mock, props.mock);
const emit = defineEmits<{
(ev: 'reaction', emoji: string): void;
(ev: 'removeReaction', emoji: string): void;
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
const router = useRouter();
@ -273,7 +266,8 @@ function noteclick(id: string) {
const isRenote = Misskey.note.isPureRenote(note.value);
const rootEl = useTemplateRef('rootEl');
const rootComp = useTemplateRef('rootComp');
const rootEl = computed(() => rootComp.value?.rootEl ?? null);
const menuButton = useTemplateRef('menuButton');
const renoteButton = useTemplateRef('renoteButton');
const renoteTime = useTemplateRef('renoteTime');
@ -292,7 +286,6 @@ const selfNoteIds = computed(() => getSelfNoteIds(props.note));
const isLong = shouldCollapsed(appearNote.value, urls.value);
const collapsed = ref(prefer.s.expandLongNote && appearNote.value.cw == null && isLong ? false : appearNote.value.cw == null && isLong);
const isDeleted = ref(false);
const { muted, hardMuted, threadMuted, noteMuted } = checkMutes(appearNote, computed(() => props.withHardMute));
const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
const translating = ref(false);
const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceTicker === 'remote' && appearNote.value.user.instance);
@ -315,8 +308,6 @@ const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
}));
const mergedCW = computed(() => computeMergedCw(appearNote.value));
const renoteTooltip = computeRenoteTooltip(appearNote);
let renoting = false;
@ -1341,16 +1332,7 @@ function emitUpdReaction(emoji: string, delta: number) {
}
}
.muted {
padding: 8px;
text-align: center;
opacity: 0.7;
cursor: pointer;
}
.muted:hover {
background: var(--MI_THEME-buttonBg);
}
// Mute CSS moved to SkMutedNote.vue
.reactionOmitted {
display: inline-block;

55
packages/frontend/src/components/SkNoteDetailed.vue
View file

@ -6,13 +6,14 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
-->
<template>
<div
v-if="!muted && !threadMuted && !noteMuted"
<SkMutedNote
v-show="!isDeleted"
ref="rootEl"
ref="rootComp"
v-hotkey="keymap"
:note="appearNote"
:class="$style.root"
:tabindex="isDeleted ? '-1' : '0'"
@expandMute="n => emit('expandMute', n)"
>
<div v-if="appearNote.reply && appearNote.reply.replyId && !conversationLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadConversation">{{ i18n.ts.loadConversation }}</MkButton>
@ -43,9 +44,9 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
</div>
</div>
<template v-if="appearNote.reply && appearNote.reply.replyId">
<SkNoteSub v-for="note in conversation" :key="note.id" :note="note" :expandAllCws="props.expandAllCws" detailed/>
<SkNoteSub v-for="note in conversation" :key="note.id" :note="note" :expandAllCws="props.expandAllCws" detailed @expandMute="n => emit('expandMute', n)"/>
</template>
<SkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws" detailed/>
<SkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws" detailed @expandMute="n => emit('expandMute', n)"/>
<article :id="appearNote.id" ref="noteEl" :class="$style.note" tabindex="-1" @contextmenu.stop="onContextmenu">
<header :class="$style.noteHeader">
<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
@ -83,10 +84,10 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
</div>
</header>
<div :class="$style.noteContent">
<p v-if="mergedCW != null" :class="$style.cw">
<p v-if="appearNote.cw != null" :class="$style.cw">
<Mfm
v-if="mergedCW != ''"
:text="mergedCW"
v-if="appearNote.cw != ''"
:text="appearNote.cw"
:author="appearNote.user"
:nyaize="'respect'"
:enableEmojiMenu="true"
@ -95,7 +96,7 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
/>
<MkCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll"/>
</p>
<div v-show="mergedCW == null || showContent">
<div v-show="appearNote.cw == null || showContent">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<Mfm
v-if="appearNote.text"
@ -118,7 +119,7 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
</div>
<MkPoll v-if="appearNote.poll" ref="pollViewer" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :class="$style.poll" :author="appearNote.user" :emojiUrls="appearNote.emojis"/>
<div v-if="isEnabledUrlPreview" class="_gaps_s" style="margin-top: 6px;" @click.stop>
<SkUrlPreviewGroup :sourceNodes="parsed" :sourceNote="appearNote" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds"/>
<SkUrlPreviewGroup :sourceNodes="parsed" :sourceNote="appearNote" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" @expandMute="n => emit('expandMute', n)"/>
</div>
<div v-if="appearNote.renote" :class="$style.quote"><SkNoteSimple :note="appearNote.renote" :class="$style.quoteNote" :expandAllCws="props.expandAllCws"/></div>
</div>
@ -194,7 +195,7 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
<div v-if="!repliesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
</div>
<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" :isReply="true"/>
<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" :isReply="true" @expandMute="n => emit('expandMute', n)"/>
</div>
<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@ -211,7 +212,7 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
<div v-if="!quotesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadQuotes">{{ i18n.ts.loadReplies }}</MkButton>
</div>
<SkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :reply="true"/>
<SkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :reply="true" @expandMute="n => emit('expandMute', n)"/>
</div>
<div v-else-if="tab === 'reactions'" :class="$style.tab_reactions">
<div :class="$style.reactionTabs">
@ -231,10 +232,7 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
</MkPagination>
</div>
</div>
</div>
<div v-else class="_panel" :class="$style.muted" @click.stop="muted = false">
<SkMutedNote :muted="muted" :threadMuted="threadMuted" :noteMuted="noteMuted" :note="appearNote"></SkMutedNote>
</div>
</SkMutedNote>
</template>
<script lang="ts" setup>
@ -243,7 +241,6 @@ import * as mfm from 'mfm-js';
import * as Misskey from 'misskey-js';
import { isLink } from '@@/js/is-link.js';
import * as config from '@@/js/config.js';
import { computeMergedCw } from '@@/js/compute-merged-cw.js';
import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
import type { Paging } from '@/components/MkPagination.vue';
import type { Keymap } from '@/utility/hotkey.js';
@ -259,7 +256,6 @@ import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
import MkUrlPreview from '@/components/MkUrlPreview.vue';
import SkInstanceTicker from '@/components/SkInstanceTicker.vue';
import { pleaseLogin } from '@/utility/please-login.js';
import { checkMutes } from '@/utility/check-word-mute.js';
import { userPage } from '@/filters/user.js';
import { notePage } from '@/filters/note.js';
import number from '@/filters/number.js';
@ -293,6 +289,7 @@ import SkMutedNote from '@/components/SkMutedNote.vue';
import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
import { getSelfNoteIds } from '@/utility/get-self-note-ids.js';
import SkUrlPreviewGroup from '@/components/SkUrlPreviewGroup.vue';
import MkNoteSub from '@/components/MkNoteSub.vue';
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
@ -302,13 +299,18 @@ const props = withDefaults(defineProps<{
initialTab: 'replies',
});
const emit = defineEmits<{
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
const inChannel = inject('inChannel', null);
const note = ref(deepClone(props.note));
const isRenote = Misskey.note.isPureRenote(note.value);
const rootEl = useTemplateRef('rootEl');
const rootComp = useTemplateRef('rootComp');
const rootEl = computed(() => rootComp.value?.rootEl ?? null);
const noteEl = useTemplateRef('noteEl');
const menuButton = useTemplateRef('menuButton');
const renoteButton = useTemplateRef('renoteButton');
@ -336,12 +338,8 @@ const quotes = ref<Misskey.entities.Note[]>([]);
const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
const defaultLike = computed(() => prefer.s.like ? prefer.s.like : null);
const mergedCW = computed(() => computeMergedCw(appearNote.value));
const renoteTooltip = computeRenoteTooltip(appearNote);
const { muted, threadMuted, noteMuted } = checkMutes(appearNote);
setupNoteViewInterruptors(note, isDeleted);
watch(() => props.expandAllCws, (expandAllCws) => {
@ -1226,16 +1224,7 @@ onUnmounted(() => {
border-radius: var(--MI-radius-sm) !important;
}
.muted {
padding: 8px;
text-align: center;
opacity: 0.7;
cursor: pointer;
}
.muted:hover {
background: var(--MI_THEME-buttonBg);
}
// Mute CSS moved to SkMutedNote.vue
.badgeRoles {
margin: 0 .5em 0 0;

27
packages/frontend/src/components/SkNoteSimple.vue
View file

@ -6,46 +6,53 @@ Simple view of a note in the Sharkey style. Used in quote renotes, link previews
-->
<template>
<div :class="$style.root">
<SkMutedNote :note="note" :skipMute="skipMute" :class="$style.root" @expandMute="n => emit('expandMute', n)">
<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
<div :class="$style.main">
<MkNoteHeader :class="$style.header" :classic="true" :note="note" :mini="true"/>
<div>
<p v-if="mergedCW != null" :class="$style.cw">
<Mfm v-if="mergedCW != ''" style="margin-right: 8px;" :text="mergedCW" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
<p v-if="props.note.cw != null" :class="$style.cw">
<Mfm v-if="props.note.cw != ''" style="margin-right: 8px;" :text="props.note.cw" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll" @click.stop/>
</p>
<div v-show="mergedCW == null || showContent">
<div v-show="props.note.cw == null || showContent">
<MkSubNoteContent :hideFiles="hideFiles" :class="$style.text" :note="note" :expandAllCws="props.expandAllCws"/>
</div>
</div>
</div>
</div>
</SkMutedNote>
</template>
<script lang="ts" setup>
import { watch, ref, computed } from 'vue';
import { watch, ref } from 'vue';
import * as Misskey from 'misskey-js';
import { computeMergedCw } from '@@/js/compute-merged-cw.js';
import MkNoteHeader from '@/components/MkNoteHeader.vue';
import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
import MkCwButton from '@/components/MkCwButton.vue';
import { prefer } from '@/preferences.js';
import { setupNoteViewInterruptors } from '@/plugin.js';
import { deepClone } from '@/utility/clone.js';
import SkMutedNote from '@/components/SkMutedNote.vue';
const props = defineProps<{
note: Misskey.entities.Note;
note: Misskey.entities.Note & {
isSchedule?: boolean,
scheduledNoteId?: string
};
expandAllCws?: boolean;
skipMute?: boolean;
hideFiles?: boolean;
}>();
const emit = defineEmits<{
(ev: 'editScheduleNote'): void;
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
let showContent = ref(prefer.s.uncollapseCW);
const note = ref(deepClone(props.note));
const mergedCW = computed(() => computeMergedCw(note.value));
setupNoteViewInterruptors(note, null);
watch(() => props.expandAllCws, (expandAllCws) => {

32
packages/frontend/src/components/SkNoteSub.vue
View file

@ -8,7 +8,7 @@ For example, when viewing a reply on the timeline, SkNoteSub will be used to dis
-->
<template>
<div v-show="!isDeleted" v-if="!muted && !noteMuted" ref="el" :class="[$style.root, { [$style.children]: depth > 1, [$style.isReply]: props.isReply, [$style.detailed]: props.detailed }]">
<SkMutedNote v-show="!isDeleted" ref="rootComp" :note="appearNote" :mutedClass="$style.muted" :expandedClass="[$style.root, { [$style.children]: depth > 1, [$style.isReply]: props.isReply, [$style.detailed]: props.detailed }]" @expandMute="n => emit('expandMute', n)">
<div v-if="!hideLine" :class="$style.line"></div>
<div :class="$style.main">
<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
@ -23,11 +23,11 @@ For example, when viewing a reply on the timeline, SkNoteSub will be used to dis
<div :class="$style.body">
<SkNoteHeader :class="$style.header" :note="note" :classic="true" :mini="true"/>
<div :class="$style.content">
<p v-if="mergedCW != null" :class="$style.cw">
<Mfm v-if="mergedCW != ''" style="margin-right: 8px;" :text="mergedCW" :isBlock="true" :author="note.user" :nyaize="'respect'"/>
<p v-if="appearNote.cw != null" :class="$style.cw">
<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :isBlock="true" :author="note.user" :nyaize="'respect'"/>
<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll"/>
</p>
<div v-show="mergedCW == null || showContent">
<div v-show="appearNote.cw == null || showContent">
<MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation" :expandAllCws="props.expandAllCws"/>
</div>
</div>
@ -84,21 +84,17 @@ For example, when viewing a reply on the timeline, SkNoteSub will be used to dis
</div>
</div>
<template v-if="depth < prefer.s.numberOfReplies">
<SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" :isReply="props.isReply"/>
<SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" :isReply="props.isReply" @expandMute="n => emit('expandMute', n)"/>
</template>
<div v-else :class="$style.more">
<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ti ti-chevron-double-right"></i></MkA>
</div>
</div>
<div v-else :class="$style.muted" @click.stop="muted = false">
<SkMutedNote :muted="muted" :threadMuted="false" :noteMuted="noteMuted" :note="appearNote"></SkMutedNote>
</div>
</SkMutedNote>
</template>
<script lang="ts" setup>
import { computed, inject, ref, shallowRef, useTemplateRef, watch } from 'vue';
import * as Misskey from 'misskey-js';
import { computeMergedCw } from '@@/js/compute-merged-cw.js';
import * as config from '@@/js/config.js';
import type { Ref } from 'vue';
import type { Visibility } from '@/utility/boost-quote.js';
@ -114,7 +110,6 @@ import { misskeyApi } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js';
import { $i } from '@/i.js';
import { userPage } from '@/filters/user.js';
import { checkMutes } from '@/utility/check-word-mute.js';
import { pleaseLogin } from '@/utility/please-login.js';
import { showMovedDialog } from '@/utility/show-moved-dialog.js';
import MkRippleEffect from '@/components/MkRippleEffect.vue';
@ -148,6 +143,10 @@ const props = withDefaults(defineProps<{
onDeleteCallback: undefined,
});
const emit = defineEmits<{
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
const note = ref(deepClone(props.note));
const appearNote = computed(() => getAppearNote(note.value));
@ -171,8 +170,6 @@ const renoteTooltip = computeRenoteTooltip(appearNote);
const defaultLike = computed(() => prefer.s.like ? prefer.s.like : null);
const replies = ref<Misskey.entities.Note[]>([]);
const mergedCW = computed(() => computeMergedCw(appearNote.value));
const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
type: 'lookup',
url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
@ -195,8 +192,6 @@ async function removeReply(id: Misskey.entities.Note['id']) {
}
}
const { muted, noteMuted } = checkMutes(appearNote);
useNoteCapture({
rootEl: el,
note: appearNote,
@ -602,16 +597,9 @@ if (props.detail) {
}
.muted {
text-align: center;
padding: 8px !important;
border: 1px solid var(--MI_THEME-divider);
margin: 8px 8px 0 8px;
border-radius: var(--MI-radius-sm);
cursor: pointer;
}
.muted:hover {
background: var(--MI_THEME-buttonBg);
}
// avatar container with line

2
packages/frontend/src/components/SkOldNoteWindow.vue
View file

@ -52,7 +52,7 @@ Displays an old version of an edited note.
<div class="_gaps_s" style="margin-top: 6px;" @click.stop>
<SkUrlPreviewGroup :sourceNodes="parsed" :sourceNote="appearNote" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds"/>
</div>
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote" :skipMute="true"/></div>
</div>
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
</div>

12
packages/frontend/src/components/SkPatternTest.vue
View file

@ -27,26 +27,26 @@ import { i18n } from '@/i18n';
import MkFolder from '@/components/MkFolder.vue';
import MkButton from '@/components/MkButton.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import { parseMutes } from '@/utility/parse-mutes';
import { checkWordMute } from '@/utility/check-word-mute';
import { parseMutes } from '@/utility/parse-mutes.js';
import { getMutedWords } from '@/utility/check-word-mute.js';
const props = defineProps<{
mutedWords?: string | null,
mutedWords: string,
}>();
const testWords = ref<string | null>(null);
const testMatches = ref<string | null>(null);
function testWordMutes() {
if (!testWords.value || !props.mutedWords) {
if (!testWords.value) {
testMatches.value = null;
return;
}
try {
const mutes = parseMutes(props.mutedWords);
const matches = checkWordMute(testWords.value, null, mutes);
testMatches.value = matches ? matches.join(', ') : '';
const matches = getMutedWords(mutes, testWords.value);
testMatches.value = matches.join(', ');
} catch {
// Error is displayed by above function
testMatches.value = null;

29
packages/frontend/src/components/SkUrlPreviewGroup.vue
View file

@ -25,6 +25,7 @@ Attempts to avoid displaying the same preview twice, even if multiple URLs point
:showAsQuote="showAsQuote"
:showActions="showActions"
:skipNoteIds="skipNoteIds"
@expandMute="n => onExpandNote(n)"
></MkUrlPreview>
</template>
</template>
@ -42,6 +43,8 @@ import { $i } from '@/i';
import { misskeyApi } from '@/utility/misskey-api';
import MkUrlPreview from '@/components/MkUrlPreview.vue';
import { getNoteUrls } from '@/utility/getNoteUrls';
import { deepAssign } from '@/utility/merge';
import { useMuteOverrides } from '@/utility/check-word-mute';
type Summary = SummalyResult & {
note?: Misskey.entities.Note | null;
@ -74,6 +77,32 @@ const props = withDefaults(defineProps<{
skipNoteIds: () => [],
});
const emit = defineEmits<{
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
const muteOverrides = useMuteOverrides();
function onExpandNote(note: Misskey.entities.Note) {
// Expand related mutes within this preview group
deepAssign(muteOverrides, {
user: {
[note.user.id]: {
userMandatoryCW: null,
userSilenced: false,
},
},
instance: {
[note.user.host ?? '']: {
instanceMandatoryCW: null,
instanceSilenced: false,
},
},
});
emit('expandMute', note);
}
const urlPreviews = ref<Summary[]>([]);
const urls = computed<string[]>(() => {

20
packages/frontend/src/components/SkUserRecentNotes.vue
View file

@ -9,7 +9,7 @@ Displays a user's recent notes for the "Following" feed.
<MkPullToRefresh :refresher="() => reload()">
<div v-if="user" :class="$style.userInfo">
<MkUserInfo :class="$style.userInfo" class="user" :user="user"/>
<MkNotes :noGap="true" :pagination="pagination"/>
<MkNotes :noGap="true" :pagination="pagination" @expandMute="n => onExpandMute(n)"/>
</div>
<div v-else-if="loadError" :class="$style.panel">{{ loadError }}</div>
<MkLoading v-else-if="userId"/>
@ -26,6 +26,8 @@ import MkNotes from '@/components/MkNotes.vue';
import MkUserInfo from '@/components/MkUserInfo.vue';
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
import { misskeyApi } from '@/utility/misskey-api.js';
import { useMuteOverrides } from '@/utility/check-word-mute';
import { deepAssign } from '@/utility/merge';
const props = defineProps<{
userId: string;
@ -54,6 +56,22 @@ const pagination: Paging<'users/notes'> = {
})),
};
const muteOverrides = useMuteOverrides();
function onExpandMute(note: Misskey.entities.Note) {
if (note.user.id === props.userId) {
// This kills the mandatoryCW for this user below this point
deepAssign(muteOverrides, {
user: {
[props.userId]: {
userMandatoryCW: null,
instanceMandatoryCW: null,
},
},
});
}
}
defineExpose({
reload,
user,

30
packages/frontend/src/components/page/page.block.vue
View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<component :is="getComponent(block.type)" :key="block.id" :page="page" :block="block" :h="h"/>
<component :is="getComponent(block.type)" :key="block.id" :page="page" :block="block" :h="h" @expandMute="n => onExpandNote(n)"/>
</template>
<script lang="ts" setup>
@ -15,6 +15,8 @@ import XSection from './page.section.vue';
import XImage from './page.image.vue';
import XNote from './page.note.vue';
import XDynamic from './page.dynamic.vue';
import { deepAssign } from '@/utility/merge';
import { useMuteOverrides } from '@/utility/check-word-mute';
function getComponent(type: string) {
switch (type) {
@ -45,4 +47,30 @@ defineProps<{
h: number,
page: Misskey.entities.Page,
}>();
const emit = defineEmits<{
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
const muteOverrides = useMuteOverrides();
function onExpandNote(note: Misskey.entities.Note) {
// Expand related mutes within this page group
deepAssign(muteOverrides, {
user: {
[note.user.id]: {
userMandatoryCW: null,
userSilenced: false,
},
},
instance: {
[note.user.host ?? '']: {
instanceMandatoryCW: null,
instanceSilenced: false,
},
},
});
emit('expandMute', note);
}
</script>

4
packages/frontend/src/components/page/page.dynamic.vue
View file

@ -23,6 +23,10 @@ const props = defineProps<{
block: Misskey.entities.PageBlock,
page: Misskey.entities.Page,
}>();
defineEmits<{
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
</script>
<style lang="scss" module>

4
packages/frontend/src/components/page/page.image.vue
View file

@ -19,6 +19,10 @@ const props = defineProps<{
page: Misskey.entities.Page,
}>();
defineEmits<{
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
const image = ref<Misskey.entities.DriveFile | null>(null);
onMounted(() => {

8
packages/frontend/src/components/page/page.note.vue
View file

@ -5,8 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="$style.root">
<MkNote v-if="note && !block.detailed" :key="note.id + ':normal'" :note="note"/>
<MkNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" :note="note"/>
<MkNote v-if="note && !block.detailed" :key="note.id + ':normal'" :note="note" @expandMute="n => emit('expandMute', n)"/>
<MkNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" :note="note" @expandMute="n => emit('expandMute', n)"/>
</div>
</template>
@ -24,6 +24,10 @@ const props = defineProps<{
index: number;
}>();
const emit = defineEmits<{
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
const note = ref<Misskey.entities.Note | null>(null);
// eslint-disable-next-line id-denylist

4
packages/frontend/src/components/page/page.section.vue
View file

@ -33,6 +33,10 @@ defineProps<{
h: number,
page: Misskey.entities.Page,
}>();
defineEmits<{
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
</script>
<style lang="scss" module>

6
packages/frontend/src/components/page/page.text.vue
View file

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps" :class="$style.textRoot">
<Mfm :text="block.text ?? ''" :isBlock="true" :isNote="false"/>
<div v-if="isEnabledUrlPreview" class="_gaps_s" @click.stop>
<SkUrlPreviewGroup :sourceText="block.text" :showAsQuote="!page.user.rejectQuotes"/>
<SkUrlPreviewGroup :sourceText="block.text" :showAsQuote="!page.user.rejectQuotes" @expandMute="n => emit('expandMute', n)"/>
</div>
</div>
</template>
@ -21,6 +21,10 @@ defineProps<{
block: Misskey.entities.PageBlock,
page: Misskey.entities.Page,
}>();
const emit = defineEmits<{
(ev: 'expandMute', note: Misskey.entities.Note): void;
}>();
</script>
<style lang="scss" module>