From 74bb79792d045078c31907b1914217ba71be01ff Mon Sep 17 00:00:00 2001
From: Free <freeplay@duck.com>
Date: Mon, 20 Mar 2023 20:26:05 +0000
Subject: [PATCH] note-improvements (#9739)

fixes #9735, translations, plus other tweaks

Co-authored-by: Freeplay <Freeplay@duck.com>
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9739
Co-authored-by: Free <freeplay@duck.com>
Co-committed-by: Free <freeplay@duck.com>
---
 packages/client/src/components/MkLink.vue     |   2 +-
 packages/client/src/components/MkNote.vue     |  72 +++++++-
 .../client/src/components/MkNoteFooter.vue    | 164 -----------------
 packages/client/src/components/MkNoteSub.vue  | 169 +++++++++++++++++-
 .../src/components/MkSubNoteContent.vue       |  12 +-
 packages/client/src/components/global/MkA.vue |   2 +-
 packages/client/src/pages/note.vue            |   2 +-
 7 files changed, 244 insertions(+), 179 deletions(-)
 delete mode 100644 packages/client/src/components/MkNoteFooter.vue

diff --git a/packages/client/src/components/MkLink.vue b/packages/client/src/components/MkLink.vue
index 307e6bec21..7536284894 100644
--- a/packages/client/src/components/MkLink.vue
+++ b/packages/client/src/components/MkLink.vue
@@ -1,6 +1,6 @@
 <template>
 <component :is="self ? 'MkA' : 'a'" ref="el" class="xlcxczvw _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
-	:title="url"
+	:title="url" @click.stop
 >
 	<slot></slot>
 	<i v-if="target === '_blank'" class="ph-arrow-square-out ph-bold ph-lg icon"></i>
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index b9e7417497..852eb48b50 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -72,7 +72,28 @@
 				</div>
 				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`" @click.stop><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
-			<MkNoteFooter :note="appearNote"></MkNoteFooter>
+			<footer ref="el" class="footer" @click.stop>
+				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+				<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
+					<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
+					<template v-if="appearNote.repliesCount > 0">
+						<p class="count">{{ appearNote.repliesCount }}</p>
+					</template>
+				</button>
+				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
+				<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
+				<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
+					<i class="ph-smiley ph-bold ph-lg"></i>
+				</button>
+				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
+					<i class="ph-minus ph-bold ph-lg"></i>
+				</button>
+				<XQuoteButton class="button" :note="appearNote"/>
+				<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
+					<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+				</button>
+			</footer>
+			<!-- <MkNoteFooter :note="appearNote"></MkNoteFooter> -->
 		</div>
 	</article>
 </div>
@@ -97,9 +118,11 @@ import XNoteHeader from '@/components/MkNoteHeader.vue';
 import XNoteSimple from '@/components/MkNoteSimple.vue';
 import XMediaList from '@/components/MkMediaList.vue';
 import XCwButton from '@/components/MkCwButton.vue';
-import MkNoteFooter from '@/components/MkNoteFooter.vue';
 import XPoll from '@/components/MkPoll.vue';
 import XRenoteButton from '@/components/MkRenoteButton.vue';
+import XReactionsViewer from '@/components/MkReactionsViewer.vue';
+import XStarButton from '@/components/MkStarButton.vue';
+import XQuoteButton from '@/components/MkQuoteButton.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import MkVisibility from '@/components/MkVisibility.vue';
 import { pleaseLogin } from '@/scripts/please-login';
@@ -149,6 +172,7 @@ const isRenote = (
 
 const el = ref<HTMLElement>();
 const menuButton = ref<HTMLElement>();
+const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
@@ -206,6 +230,14 @@ function react(viaKeyboard = false): void {
 	});
 }
 
+function undoReact(note): void {
+	const oldReaction = note.myReaction;
+	if (!oldReaction) return;
+	os.api('notes/reactions/delete', {
+		noteId: note.id,
+	});
+}
+
 const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
 
 function onContextmenu(ev: MouseEvent): void {
@@ -578,8 +610,44 @@ function readPromo() {
 					font-size: 80%;
 				}
 			}
+			> .footer {
+				position: relative;
+				z-index: 2;
+				display: flex;
+				flex-wrap: wrap;
+				pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
+
+				> .button {
+					margin: 0;
+					padding: 8px;
+					opacity: 0.7;
+					flex-grow: 1;
+					max-width: 3.5em;
+					width: max-content;
+					min-width: max-content;
+					pointer-events: all;
+					transition: opacity .2s;
+					&:first-of-type {
+						margin-left: -.5em;
+					}
+					&:hover {
+						color: var(--fgHighlighted);
+					}
+
+					> .count {
+						display: inline;
+						margin: 0 0 0 8px;
+						opacity: 0.7;
+					}
+
+					&.reacted {
+						color: var(--accent);
+					}
+				}
+			}
 		}
 	}
+	
 
 	> .reply {
 		border-top: solid 0.5px var(--divider);
diff --git a/packages/client/src/components/MkNoteFooter.vue b/packages/client/src/components/MkNoteFooter.vue
deleted file mode 100644
index 579cfcb077..0000000000
--- a/packages/client/src/components/MkNoteFooter.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-	<footer ref="el" class="footer" @click.stop>
-		<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
-		<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
-			<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
-			<template v-if="directReplies > 0">
-				<p class="count">{{ directReplies }}</p>
-			</template>
-			<template v-else-if="appearNote.repliesCount > 0">
-				<p class="count">{{ appearNote.repliesCount }}</p>
-			</template>
-		</button>
-		<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
-		<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
-		<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
-			<i class="ph-smiley ph-bold ph-lg"></i>
-		</button>
-		<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-			<i class="ph-minus ph-bold ph-lg"></i>
-		</button>
-		<XQuoteButton class="button" :note="appearNote"/>
-		<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
-			<i class="ph-dots-three-outline ph-bold ph-lg"></i>
-		</button>
-	</footer>
-</template>
-
-<script lang="ts" setup>
-import { inject, ref } from 'vue';
-import type { Ref } from 'vue';
-import type * as misskey from 'calckey-js';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XStarButton from '@/components/MkStarButton.vue';
-import XRenoteButton from '@/components/MkRenoteButton.vue';
-import XQuoteButton from '@/components/MkQuoteButton.vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import * as os from '@/os';
-import { reactionPicker } from '@/scripts/reaction-picker';
-import { i18n } from '@/i18n';
-import { getNoteMenu } from '@/scripts/get-note-menu';
-import { deepClone } from '@/scripts/clone';
-import { useNoteCapture } from '@/scripts/use-note-capture';
-
-
-const props = defineProps<{
-	note: misskey.entities.Note;
-	directReplies;
-}>();
-
-let note = $ref(deepClone(props.note));
-
-const isRenote = (
-	note.renote != null &&
-	note.text == null &&
-	note.fileIds.length === 0 &&
-	note.poll == null
-);
-
-const el = ref<HTMLElement>();
-const menuButton = ref<HTMLElement>();
-const starButton = ref<InstanceType<typeof XStarButton>>();
-const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
-const reactButton = ref<HTMLElement>();
-let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
-const isDeleted = ref(false);
-const translation = ref(null);
-const translating = ref(false);
-
-useNoteCapture({
-	rootEl: el,
-	note: $$(appearNote),
-	isDeletedRef: isDeleted,
-});
-
-
-function reply(viaKeyboard = false): void {
-	pleaseLogin();
-	os.post({
-		reply: appearNote,
-		animation: !viaKeyboard,
-	}, () => {
-		focus();
-	});
-}
-
-function react(viaKeyboard = false): void {
-	pleaseLogin();
-	blur();
-	reactionPicker.show(reactButton.value, reaction => {
-		os.api('notes/reactions/create', {
-			noteId: appearNote.id,
-			reaction: reaction,
-		});
-	}, () => {
-		focus();
-	});
-}
-
-function undoReact(note): void {
-	const oldReaction = note.myReaction;
-	if (!oldReaction) return;
-	os.api('notes/reactions/delete', {
-		noteId: note.id,
-	});
-}
-
-const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
-
-
-function menu(viaKeyboard = false): void {
-	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, {
-		viaKeyboard,
-	}).then(focus);
-}
-
-function focus() {
-	el.value.focus();
-}
-
-function blur() {
-	el.value.blur();
-}
-
-
-</script>
-
-
-<style lang="scss" scoped>
-.footer {
-	position: relative;
-	z-index: 2;
-	display: flex;
-	flex-wrap: wrap;
-	pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
-
-	> .button {
-		margin: 0;
-		padding: 8px;
-		opacity: 0.7;
-		flex-grow: 1;
-		max-width: 3.5em;
-		width: max-content;
-		min-width: max-content;
-		pointer-events: all;
-		transition: opacity .2s;
-		&:first-of-type {
-			margin-left: -.5em;
-		}
-		&:hover {
-			color: var(--fgHighlighted);
-		}
-
-		> .count {
-			display: inline;
-			margin: 0 0 0 8px;
-			opacity: 0.7;
-		}
-
-		&.reacted {
-			color: var(--accent);
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 4c6edf46e6..5b9d4b33ae 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -1,5 +1,9 @@
 <template>
-<div v-size="{ max: [450, 500] }" class="wrpstxzv" :class="{ children: depth > 1, singleStart: replies.length == 1, firstColumn: depth == 1 && conversation }">
+<div ref="el" 
+	v-size="{ max: [450, 500] }"
+	class="wrpstxzv"
+	:class="{ children: depth > 1, singleStart: replies.length == 1, firstColumn: depth == 1 && conversation }"
+>
 	<div v-if="conversation && depth > 1" class="line"></div>
 	<div class="main" @click="noteClick">
 		<div class="avatar-container">
@@ -23,8 +27,36 @@
 				<div v-show="note.cw == null || showContent" class="content">
 					<MkSubNoteContent class="text" :note="note" :detailed="true" :parentId="note.parentId" :conversation="conversation"/>
 				</div>
+				<div v-if="translating || translation" class="translation">
+					<MkLoading v-if="translating" mini/>
+					<div v-else class="translated">
+						<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
+						<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+					</div>
+				</div>
 			</div>
-			<MkNoteFooter :note="note" :directReplies="replies.length"></MkNoteFooter>
+			<footer class="footer" @click.stop>
+				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+				<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
+					<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
+					<template v-if="appearNote.repliesCount > 0">
+						<p class="count">{{ appearNote.repliesCount }}</p>
+					</template>
+				</button>
+				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
+				<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
+				<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
+					<i class="ph-smiley ph-bold ph-lg"></i>
+				</button>
+				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
+					<i class="ph-minus ph-bold ph-lg"></i>
+				</button>
+				<XQuoteButton class="button" :note="appearNote"/>
+				<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
+					<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+				</button>
+			</footer>
+			<!-- <MkNoteFooter :note="note" :directReplies="replies.length"></MkNoteFooter> -->
 		</div>
 	</div>
 	<template v-if="conversation">
@@ -43,16 +75,26 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { inject, ref } from 'vue';
+import type { Ref } from 'vue';
 import * as misskey from 'calckey-js';
 import XNoteHeader from '@/components/MkNoteHeader.vue';
 import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
+import XReactionsViewer from '@/components/MkReactionsViewer.vue';
+import XStarButton from '@/components/MkStarButton.vue';
+import XRenoteButton from '@/components/MkRenoteButton.vue';
+import XQuoteButton from '@/components/MkQuoteButton.vue';
 import XCwButton from '@/components/MkCwButton.vue';
-import MkNoteFooter from '@/components/MkNoteFooter.vue';
+import { pleaseLogin } from '@/scripts/please-login';
+import { getNoteMenu } from '@/scripts/get-note-menu';
 import { notePage } from '@/filters/note';
 import { useRouter } from '@/router';
 import * as os from '@/os';
+import { reactionPicker } from '@/scripts/reaction-picker';
 import { i18n } from '@/i18n';
+import { deepClone } from '@/scripts/clone';
+import { useNoteCapture } from '@/scripts/use-note-capture';
+
 
 const router = useRouter();
 
@@ -67,9 +109,81 @@ const props = withDefaults(defineProps<{
 	depth: 1,
 });
 
+let note = $ref(deepClone(props.note));
+
+const isRenote = (
+	note.renote != null &&
+	note.text == null &&
+	note.fileIds.length === 0 &&
+	note.poll == null
+);
+
+const el = ref<HTMLElement>();
+const menuButton = ref<HTMLElement>();
+const starButton = ref<InstanceType<typeof XStarButton>>();
+const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
+const reactButton = ref<HTMLElement>();
+let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
+const isDeleted = ref(false);
+const translation = ref(null);
+const translating = ref(false);
 let showContent = $ref(false);
 const replies: misskey.entities.Note[] = props.conversation?.filter(item => item.replyId === props.note.id || item.renoteId === props.note.id).reverse() ?? [];
 
+useNoteCapture({
+	rootEl: el,
+	note: $$(appearNote)
+});
+
+
+function reply(viaKeyboard = false): void {
+	pleaseLogin();
+	os.post({
+		reply: appearNote,
+		animation: !viaKeyboard,
+	}, () => {
+		focus();
+	});
+}
+
+function react(viaKeyboard = false): void {
+	pleaseLogin();
+	blur();
+	reactionPicker.show(reactButton.value, reaction => {
+		os.api('notes/reactions/create', {
+			noteId: appearNote.id,
+			reaction: reaction,
+		});
+	}, () => {
+		focus();
+	});
+}
+
+function undoReact(note): void {
+	const oldReaction = note.myReaction;
+	if (!oldReaction) return;
+	os.api('notes/reactions/delete', {
+		noteId: note.id,
+	});
+}
+
+const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
+
+
+function menu(viaKeyboard = false): void {
+	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, {
+		viaKeyboard,
+	}).then(focus);
+}
+
+function focus() {
+	el.value.focus();
+}
+
+function blur() {
+	el.value.blur();
+}
+
 function noteClick(e) {
 	if (document.getSelection().type === 'Range') {
 		e.stopPropagation();
@@ -125,7 +239,7 @@ function noteClick(e) {
 			}
 
 			> .body {
-				:deep(.reply-icon) {
+				.reply-icon {
 					display: inline-block;
 					border-radius: 6px;
 					padding: .2em .2em;
@@ -147,13 +261,53 @@ function noteClick(e) {
 						margin-right: 8px;
 					}
 				}
-
 				> .content {
 					> .text {
 						margin: 0;
 						padding: 0;
 					}
 				}
+				> .translation {
+					border: solid 0.5px var(--divider);
+					border-radius: var(--radius);
+					padding: 12px;
+					margin-top: 8px;
+				}
+			}
+			> .footer {
+				position: relative;
+				z-index: 2;
+				display: flex;
+				flex-wrap: wrap;
+				pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
+	
+				> .button {
+					margin: 0;
+					padding: 8px;
+					opacity: 0.7;
+					flex-grow: 1;
+					max-width: 3.5em;
+					width: max-content;
+					min-width: max-content;
+					pointer-events: all;
+					transition: opacity .2s;
+					&:first-of-type {
+						margin-left: -.5em;
+					}
+					&:hover {
+						color: var(--fgHighlighted);
+					}
+	
+					> .count {
+						display: inline;
+						margin: 0 0 0 8px;
+						opacity: 0.7;
+					}
+	
+					&.reacted {
+						color: var(--accent);
+					}
+				}
 			}
 		}
 	}
@@ -166,9 +320,6 @@ function noteClick(e) {
 		.avatar-container {
 			margin-right: 8px !important;
 		}
-		:deep(.footer) {
-			font-size: .9em;
-		}
 	}
 	> .reply, > .more {
 		margin-top: 10px;
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 3193834c97..abb0def32d 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -69,12 +69,22 @@ const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)) : n
 	overflow-wrap: break-word;
 	
 	> .body {
-
 		> .rp {
 			margin-left: 4px;
 			font-style: oblique;
 			color: var(--renote);
 		}
+		.reply-icon {
+			display: inline-block;
+			border-radius: 6px;
+			padding: .2em .2em;
+			margin-right: .2em;
+			color: var(--accent);
+			transition: background .2s;
+			&:hover, &:focus {
+				background: var(--buttonHoverBg);
+			}
+		}
 	}
 
 	> .mk-url-preview {
diff --git a/packages/client/src/components/global/MkA.vue b/packages/client/src/components/global/MkA.vue
index 8133229df3..a75cd34299 100644
--- a/packages/client/src/components/global/MkA.vue
+++ b/packages/client/src/components/global/MkA.vue
@@ -1,5 +1,5 @@
 <template>
-<a :href="to" :class="active ? activeClass : null" @click.prevent="nav" @contextmenu.prevent.stop="onContextmenu">
+<a :href="to" :class="active ? activeClass : null" @click.prevent="nav" @contextmenu.prevent.stop="onContextmenu" @click.stop>
 	<slot></slot>
 </a>
 </template>
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index 1baf1894fb..5298194a6d 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -1,7 +1,7 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800" :marginMin="0">
+	<MkSpacer :content-max="800" :marginMin="6">
 		<div class="fcuexfpr">
 			<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
 				<div v-if="note" class="note">