note-improvements (#9799)

Boop!

Co-authored-by: Freeplay <Freeplay@duck.com>
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9799
Co-authored-by: Free <freeplay@duck.com>
Co-committed-by: Free <freeplay@duck.com>

locales/en-US.yml

@@ -1230,13 +1230,13 @@ _sfx:
 _ago:
   future: "Future"
   justNow: "Just now"
-  secondsAgo: "{n} second(s) ago"
+  secondsAgo: "{n}s ago"
-  minutesAgo: "{n} minute(s) ago"
+  minutesAgo: "{n}m ago"
-  hoursAgo: "{n} hour(s) ago"
+  hoursAgo: "{n}h ago"
-  daysAgo: "{n} day(s) ago"
+  daysAgo: "{n}d ago"
-  weeksAgo: "{n} week(s) ago"
+  weeksAgo: "{n}w ago"
-  monthsAgo: "{n} month(s) ago"
+  monthsAgo: "{n}mo ago"
-  yearsAgo: "{n} year(s) ago"
+  yearsAgo: "{n}y ago"
 _time:
   second: "Second(s)"
   minute: "Minute(s)"

packages/client/src/components/MkNote.vue

@@ -10,16 +10,16 @@
 	:class="{ renote: isRenote }"
 >
 	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
-	<div class="note-context">
+	<div class="note-context" @click="noteClick">
 		<div class="line"></div>
-		<div v-if="appearNote._prId_" class="info"><i class="ph-megaphone-simple-bold ph-lg"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ph-x ph-bold ph-lg"></i></button></div>
+		<div v-if="appearNote._prId_" class="info"><i class="ph-megaphone-simple-bold ph-lg"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click.stop="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ph-x ph-bold ph-lg"></i></button></div>
 		<div v-if="appearNote._featuredId_" class="info"><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts.featured }}</div>
 		<div v-if="pinned" class="info"><i class="ph-push-pin ph-bold ph-lg"></i>{{ i18n.ts.pinnedNote }}</div>
 		<div v-if="isRenote" class="renote">
 			<i class="ph-repeat ph-bold ph-lg"></i>
 			<I18n :src="i18n.ts.renotedBy" tag="span">
 				<template #user>
-					<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
+					<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)" @click.stop>
 						<MkUserName :user="note.user"/>
 					</MkA>
 				</template>
@@ -93,7 +93,6 @@
 					<i class="ph-dots-three-outline ph-bold ph-lg"></i>
 				</button>
 			</footer>
-			<!-- <MkNoteFooter :note="appearNote"></MkNoteFooter> -->
 		</div>
 	</article>
 </div>
@@ -418,7 +417,7 @@ function readPromo() {
 			align-items: center;
 			white-space: pre;
 			color: var(--renote);
-
+			cursor: pointer;
 
 			> i {
 				margin-right: 4px;
@@ -504,7 +503,7 @@ function readPromo() {
 							width: 100%;
 							margin-top: 1em;
 							position: sticky;
-							bottom: 1em;
+							bottom: var(--stickyBottom);
 
 							> span {
 								display: inline-block;
@@ -663,6 +662,9 @@ function readPromo() {
 			}
 			> .line {
 				margin-right: 10px;
+				&::before {
+					margin-top: 8px;
+				}
 			}
 		}
 		> .article {

packages/client/src/components/MkNoteDetailed.vue

@@ -352,6 +352,7 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .lxwezrsl {
+	font-size: 1.05em;
 	position: relative;
 	transition: box-shadow 0.1s ease;
 	contain: content;
@@ -451,7 +452,7 @@ onUnmounted(() => {
 		&:last-child {
 			padding-bottom: 24px;
 		}
-		font-size: 1.2em;
+		font-size: 1.1em;
 		overflow: clip;
 		outline: none;
 		scroll-margin-top: calc(var(--stickyTop) + 20vh);

packages/client/src/components/MkNoteSub.vue

@@ -7,25 +7,25 @@
 	<div v-if="conversation && depth > 1" class="line"></div>
 	<div class="main" @click="noteClick">
 		<div class="avatar-container">
-			<MkAvatar class="avatar" :user="note.user"/>
+			<MkAvatar class="avatar" :user="appearNote.user"/>
 			<div v-if="(!conversation) || replies.length > 0" class="line"></div>
 		</div>
 		<div class="body">
 			<XNoteHeader class="header" :note="note" :mini="true"/>
 			<div class="body">
-				<p v-if="note.cw != null" class="cw">
+				<p v-if="appearNote.cw != null" class="cw">
-					<MkA v-if="note.replyId"  :to="`/notes/${note.replyId}`" class="reply-icon" @click.stop>
+					<MkA v-if="appearNote.replyId"  :to="`/notes/${appearNote.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 && !note.replyId" :to="`/notes/${note.renoteId}`" class="reply-icon" @click.stop>
+					<MkA v-if="conversation && appearNote.renoteId && appearNote.renoteId != parentId && !appearNote.replyId" :to="`/notes/${appearNote.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"/>
+					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 					<br/>
 					<XCwButton v-model="showContent" :note="note"/>
 				</p>
-				<div v-show="note.cw == null || showContent" class="content">
+				<div v-show="appearNote.cw == null || showContent" class="content">
-					<MkSubNoteContent class="text" :note="note" :detailed="true" :parentId="note.parentId" :conversation="conversation"/>
+					<MkSubNoteContent class="text" :note="note" :detailed="true" :parentId="appearNote.parentId" :conversation="conversation"/>
 				</div>
 				<div v-if="translating || translation" class="translation">
 					<MkLoading v-if="translating" mini/>
@@ -56,15 +56,14 @@
 					<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">
 		<template v-if="replies.length == 1">
-			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth" :parentId="note.replyId"/>
+			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth" :parentId="appearNote.replyId"/>
 		</template>
 		<template v-else-if="depth < 5">
-			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1" :parentId="note.replyId"/>
+			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1" :parentId="appearNote.replyId"/>
 		</template>
 		<div v-else-if="replies.length > 0" class="more">
 			<div class="line"></div>
@@ -457,6 +456,26 @@ function noteClick(e) {
 			-webkit-mask: linear-gradient(to right, transparent 2px, black 2px);
 		}
 	}
+	// End Reply Divider
+	.children > .main:last-child {
+		padding-bottom: 1em;
+		&::before {
+			bottom: 1em;
+		}
+		// &::after {
+		// 	content: "";
+		// 	border-top: 1px solid var(--X13);
+		// 	position: absolute;
+		// 	bottom: 0;
+		// 	margin-left: calc(var(--avatarSize) + 12px);
+		// 	inset-inline: 0;
+		// }
+	}
+	&.firstColumn > .children:last-child > .main {
+		padding-bottom: 0 !important;
+		&::before { bottom: 0 !important }
+		// &::after { content: unset }
+	}
 
 	&.max-width_500px {
 		:not(.reply) > & {

packages/client/src/components/MkSubNoteContent.vue

@@ -130,7 +130,7 @@ const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)) : n
 			width: 100%;
 			margin-top: 1em;
 			position: sticky;
-			bottom: 1em;
+			bottom: var(--stickyBottom);
 
 			> span {
 				display: inline-block;

packages/client/src/ui/universal.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="dkgtipfy" :class="{ wallpaper }">
+<div class="dkgtipfy" :class="{ wallpaper, isMobile }">
 	<XSidebar v-if="!isMobile" class="sidebar"/>
 
 	<MkStickyContainer class="contents">
@@ -319,6 +319,10 @@ console.log(mainRouter.currentRoute.value.name);
 	box-sizing: border-box;
 	display: flex;
 
+	--stickyBottom: 1em;
+	&.isMobile {
+		--stickyBottom: 6rem;
+	}
 	&.wallpaper {
 		background: var(--wallpaperOverlay);
 		//backdrop-filter: var(--blur, blur(4px));
@@ -363,7 +367,7 @@ console.log(mainRouter.currentRoute.value.name);
 	}
 
 	> .postButton, .widgetButton {
-		bottom: 6rem;
+		bottom: var(--stickyBottom);
 		right: 1.5rem;
 		height: 4rem;
 		width: 4rem;