From b2bc51a4eea66b4702526b28906a1a5d0c6b07e5 Mon Sep 17 00:00:00 2001
From: Free <freeplay@duck.com>
Date: Sun, 19 Mar 2023 07:13:02 +0000
Subject: [PATCH] note-improvements (#9721)

boop

Co-authored-by: Freeplay <Freeplay@duck.com>
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9721
Co-authored-by: Free <freeplay@duck.com>
Co-committed-by: Free <freeplay@duck.com>
---
 packages/client/src/components/MkNoteSub.vue  | 26 ++++++++++++++-----
 .../src/components/MkSubNoteContent.vue       | 13 +++++-----
 packages/client/src/pages/note.vue            | 12 ++-------
 3 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 48e9866d8..7fc7fc8dd 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -10,13 +10,17 @@
 			<XNoteHeader class="header" :note="note" :mini="true"/>
 			<div class="body">
 				<p v-if="note.cw != null" class="cw">
-					<i v-if="note.replyId" class="ph-arrow-bend-up-left ph-bold ph-lg reply-icon"></i>
-					<i v-if="note.renoteId != parentId" class="ph-quotes ph-bold ph-lg reply-icon"></i>
+					<MkA v-if="note.replyId"  :to="`/notes/${note.replyId}`" class="reply-icon" @click.stop>
+						<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
+					</MkA>
+					<MkA v-if="conversation && note.renoteId && note.renoteId != parentId" :to="`/notes/${note.renoteId}`" class="reply-icon" @click.stop>
+						<i class="ph-quotes ph-bold ph-lg"></i>
+					</MkA>
 					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 					<XCwButton v-model="showContent" :note="note"/>
 				</p>
 				<div v-show="note.cw == null || showContent" class="content" @click="router.push(notePage(note))">
-					<MkSubNoteContent class="text" :note="note" :detailed="true" :parentId="note.parentId"/>
+					<MkSubNoteContent class="text" :note="note" :detailed="true" :parentId="note.parentId" :conversation="conversation"/>
 				</div>
 			</div>
 			<MkNoteFooter :note="note" :directReplies="replies.length"></MkNoteFooter>
@@ -112,16 +116,24 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			}
 
 			> .body {
+				:deep(.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);
+					}
+				}
 				> .cw {
 					cursor: default;
 					display: block;
 					margin: 0;
 					padding: 0;
 					overflow-wrap: break-word;
-					> .reply-icon {
-						margin-right: 6px;
-						color: var(--accent);
-					}
+
 					> .text {
 						margin-right: 8px;
 					}
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 87e927df0..3193834c9 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -3,8 +3,12 @@
 	<div class="body">
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
 		<template v-if="!note.cw">
-			<i v-if="note.replyId" class="ph-arrow-bend-up-left ph-bold ph-lg reply-icon"></i>
-			<i v-if="note.renoteId != parentId" class="ph-quotes ph-bold ph-lg reply-icon"></i>
+			<MkA v-if="note.replyId"  :to="`/notes/${note.replyId}`" class="reply-icon" @click.stop>
+				<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
+			</MkA>
+			<MkA v-if="conversation && note.renoteId && note.renoteId != parentId" :to="`/notes/${note.renoteId}`" class="reply-icon" @click.stop>
+				<i class="ph-quotes ph-bold ph-lg"></i>
+			</MkA>
 		</template>
 		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">{{ i18n.ts.quoteAttached }}: ...</MkA>
@@ -45,6 +49,7 @@ import { i18n } from '@/i18n';
 const props = defineProps<{
 	note: misskey.entities.Note;
 	parentId?;
+	conversation?;
 	detailed?: boolean;
 }>();
 
@@ -64,10 +69,6 @@ const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)) : n
 	overflow-wrap: break-word;
 	
 	> .body {
-		> .reply-icon {
-			margin-right: 6px;
-			color: var(--accent);
-		}
 
 		> .rp {
 			margin-left: 4px;
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index 1b0380cc2..1baf1894f 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -1,8 +1,8 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
-		<div class="fcuexfpr" v-size="{ max: [500, 350] }">
+	<MkSpacer :content-max="800" :marginMin="0">
+		<div class="fcuexfpr">
 			<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
 				<div v-if="note" class="note">
 					<div v-if="showNext" class="_gap">
@@ -202,13 +202,5 @@ definePageMetadata(computed(() => note ? {
 			}
 		}
 	}
-	#calckey_app > :not(.mk-deck) {
-		&.max-width_500px > .note {
-			margin-inline: -24px;
-		}
-		&.max-width_350px > .note {
-			margin-inline: -12px;
-		}
-	}
 }
 </style>