Merge pull request 'Add some labels to & truncate notifications' (#10181) from Freeplay/calckey:notifications into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10181

locales/en-US.yml

@@ -1962,6 +1962,9 @@ _notification:
   youWereInvitedToGroup: "{userName} invited you to a group"
   pollEnded: "Poll results have become available"
   emptyPushNotificationMessage: "Push notifications have been updated"
+  reacted: "reacted to your post"
+  renoted: "boosted your post"
+  voted: "voted on your poll"
   _types:
     all: "All"
     follow: "New followers"

packages/client/src/components/MkNote.vue

@@ -5,7 +5,7 @@
 		v-show="!isDeleted"
 		ref="el"
 		v-hotkey="keymap"
-		v-size="{ max: [500, 450, 350, 300] }"
+		v-size="{ max: [500, 450, 350] }"
 		class="tkcbzcuz note-container"
 		:tabindex="!isDeleted ? '-1' : null"
 		:class="{ renote: isRenote }"

packages/client/src/components/MkNotification.vue

@@ -1,8 +1,8 @@
 <template>
 	<div
 		ref="elRef"
-		v-size="{ max: [500, 600] }"
+		v-size="{ max: [500, 450] }"
-		class="qglefbjs"
+		class="qglefbjs notification"
 		:class="notification.type"
 	>
 		<div class="head">
@@ -114,6 +114,7 @@
 				:to="notePage(notification.note)"
 				:title="getNoteSummary(notification.note)"
 			>
+				<span>{{ i18n.ts._notification.reacted }}</span>
 				<i class="ph-quotes ph-fill ph-lg"></i>
 				<Mfm
 					:text="getNoteSummary(notification.note)"
@@ -129,6 +130,7 @@
 				:to="notePage(notification.note)"
 				:title="getNoteSummary(notification.note.renote)"
 			>
+			<span>{{ i18n.ts._notification.renoted }}</span>
 				<i class="ph-quotes ph-fill ph-lg"></i>
 				<Mfm
 					:text="getNoteSummary(notification.note.renote)"
@@ -183,6 +185,7 @@
 				:to="notePage(notification.note)"
 				:title="getNoteSummary(notification.note)"
 			>
+				<span>{{ i18n.ts._notification.voted }}</span>
 				<i class="ph-quotes ph-fill ph-lg"></i>
 				<Mfm
 					:text="getNoteSummary(notification.note)"
@@ -210,7 +213,7 @@
 			<span
 				v-if="notification.type === 'follow'"
 				class="text"
-				style="opacity: 0.6"
+				style="opacity: 0.7"
 				>{{ i18n.ts.youGotNewFollower }}
 				<div v-if="full">
 					<MkFollowButton
@@ -221,13 +224,13 @@
 			<span
 				v-if="notification.type === 'followRequestAccepted'"
 				class="text"
-				style="opacity: 0.6"
+				style="opacity: 0.7"
 				>{{ i18n.ts.followRequestAccepted }}</span
 			>
 			<span
 				v-if="notification.type === 'receiveFollowRequest'"
 				class="text"
-				style="opacity: 0.6"
+				style="opacity: 0.7"
 				>{{ i18n.ts.receiveFollowRequest }}
 				<div v-if="full && !followRequestDone">
 					<button class="_textButton" @click="acceptFollowRequest()">
@@ -242,7 +245,7 @@
 			<span
 				v-if="notification.type === 'groupInvited'"
 				class="text"
-				style="opacity: 0.6"
+				style="opacity: 0.7"
 				>{{ i18n.ts.groupInvited }}:
 				<b>{{ notification.invitation.group.name }}</b>
 				<div v-if="full && !groupInviteDone">
@@ -389,14 +392,13 @@ useTooltip(reactionRef, (showing) => {
 	display: flex;
 	contain: content;
 
-	&.max-width_600px {
-		padding: 16px;
-		font-size: 0.9em;
-	}
 
 	&.max-width_500px {
-		padding: 12px;
+		padding-block: 16px;
-		font-size: 0.85em;
+		font-size: 0.9em;
+	}
+	&.max-width_450px {
+		padding: 12px 16px;
 	}
 
 	> .head {
@@ -509,9 +511,17 @@ useTooltip(reactionRef, (showing) => {
 
 		> .text {
 			white-space: nowrap;
+			display: -webkit-box;
+			-webkit-line-clamp: 3;
+			-webkit-box-orient: vertical;  
 			overflow: hidden;
 			text-overflow: ellipsis;
 
+			> span:first-child {
+				opacity: .7;
+				&::after { content: ": " }
+			}
+
 			> i {
 				vertical-align: super;
 				font-size: 50%;

packages/client/src/components/MkUserPreview.vue

@@ -361,7 +361,7 @@ onMounted(() => {
 				> span {
 					font-size: 1em;
 					color: var(--accent);
-					:global(span) {
+					:deep(span) {
 						white-space: nowrap;
 					}
 				}