Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merge: real-time updates on note detail view (#246)

Browse source 
Closes #223

Reviewed-on: https://git.joinsharkey.org/Sharkey/Sharkey/pulls/246
Reviewed-by: Marie <marie@kaifa.ch>
This commit is contained in:
Marie 2023-12-23 21:00:00 +01:00
commit 53365159e8
7 changed files with 91 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
<div v-show="!isDeleted" v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
<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/>
@ -65,7 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<template v-if="depth < numberOfReplies">
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="$style.reply" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws"/>
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="$style.reply" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
</template>
<div v-else :class="$style.more">
<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA>
@ -110,6 +110,7 @@ const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
detail?: boolean;
expandAllCws?: boolean;
onDeleteCallback?: (id: Misskey.entities.Note['id']) => void;
// how many notes are in between this one and the note being viewed in detail
depth?: number;
@ -132,6 +133,7 @@ const likeButton = shallowRef<HTMLElement>();
let appearNote = computed(() => isRenote ? props.note.renote as Misskey.entities.Note : props.note);
const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state.like : null);
const replies = ref<Misskey.entities.Note[]>([]);
const isRenote = (
props.note.renote != null &&
@ -140,10 +142,26 @@ const isRenote = (
props.note.poll == null
);
async function addReplyTo(replyNote: Misskey.entities.Note) {
replies.value.unshift(replyNote);
appearNote.value.repliesCount += 1;
}
async function removeReply(id: Misskey.entities.Note['id']) {
const replyIdx = replies.value.findIndex(note => note.id === id);
if (replyIdx >= 0) {
replies.value.splice(replyIdx, 1);
appearNote.value.repliesCount -= 1;
}
}
useNoteCapture({
rootEl: el,
note: appearNote,
isDeletedRef: isDeleted,
// only update replies if we are, in fact, showing replies
onReplyCallback: props.detail && props.depth < numberOfReplies.value ? addReplyTo : undefined,
onDeleteCallback: props.detail && props.depth < numberOfReplies.value ? props.onDeleteCallback : undefined,
});
if ($i) {
@ -250,8 +268,6 @@ watch(() => props.expandAllCws, (expandAllCws) => {
if (expandAllCws !== showContent.value) showContent.value = expandAllCws;
});
let replies = ref<Misskey.entities.Note[]>([]);
function boostVisibility() {
os.popupMenu([
{