Revert "Merge pull request 'Add show more button to notifications' (#9942) from Freeplay/calckey:notifications into develop"

This reverts commit 8cb321b110dca7f8020f8a7a9af6a49308a0c036, reversing
changes made to 133391122b77c92bff6e0e94f40cfdea542c6f35.

packages/client/src/components/MkCwButton.vue

@@ -77,42 +77,5 @@ defineExpose({
 		background: var(--cwFg) !important;
 		color: var(--cwBg) !important;
 	}
-
-	&.fade {
-		display: block;
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		z-index: 2;
-		> span {
-			display: inline-block;
-			background: var(--panel);
-			padding: 0.4em 1em;
-			font-size: 0.8em;
-			border-radius: 999px;
-			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-		}
-		&:hover, &:focus {
-			> span {
-				background: var(--panelHighlight);
-			}
-		}
-	}
-	&.showLess {
-		width: 100%;
-		margin-top: 1em;
-		position: sticky;
-		bottom: var(--stickyBottom);
-
-		> span {
-			display: inline-block;
-			background: var(--panel);
-			padding: 6px 10px;
-			font-size: 0.8em;
-			border-radius: 999px;
-			box-shadow: 0 0 7px 7px var(--bg);
-		}
-	}
 }
 </style>

packages/client/src/components/MkNotification.vue

@@ -89,7 +89,7 @@
 				/>
 			</div>
 		</div>
-		<div class="tail" :class="{ collapsed }">
+		<div class="tail">
 			<header>
 				<span v-if="notification.type === 'pollEnded'">{{
 					i18n.ts._notification.pollEnded
@@ -112,11 +112,11 @@
 				v-if="notification.type === 'reaction'"
 				class="text"
 				:to="notePage(notification.note)"
-				:title="summary"
+				:title="getNoteSummary(notification.note)"
 			>
 				<i class="ph-quotes ph-fill ph-lg"></i>
 				<Mfm
-					:text="summary"
+					:text="getNoteSummary(notification.note)"
 					:plain="true"
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
@@ -142,10 +142,10 @@
 				v-if="notification.type === 'reply'"
 				class="text"
 				:to="notePage(notification.note)"
-				:title="summary"
+				:title="getNoteSummary(notification.note)"
 			>
 				<Mfm
-					:text="summary"
+					:text="getNoteSummary(notification.note)"
 					:plain="true"
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
@@ -155,10 +155,10 @@
 				v-if="notification.type === 'mention'"
 				class="text"
 				:to="notePage(notification.note)"
-				:title="summary"
+				:title="getNoteSummary(notification.note)"
 			>
 				<Mfm
-					:text="summary"
+					:text="getNoteSummary(notification.note)"
 					:plain="true"
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
@@ -168,10 +168,10 @@
 				v-if="notification.type === 'quote'"
 				class="text"
 				:to="notePage(notification.note)"
-				:title="summary"
+				:title="getNoteSummary(notification.note)"
 			>
 				<Mfm
-					:text="summary"
+					:text="getNoteSummary(notification.note)"
 					:plain="true"
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
@@ -181,11 +181,11 @@
 				v-if="notification.type === 'pollVote'"
 				class="text"
 				:to="notePage(notification.note)"
-				:title="summary"
+				:title="getNoteSummary(notification.note)"
 			>
 				<i class="ph-quotes ph-fill ph-lg"></i>
 				<Mfm
-					:text="summary"
+					:text="getNoteSummary(notification.note)"
 					:plain="true"
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
@@ -196,11 +196,11 @@
 				v-if="notification.type === 'pollEnded'"
 				class="text"
 				:to="notePage(notification.note)"
-				:title="summary"
+				:title="getNoteSummary(notification.note)"
 			>
 				<i class="ph-quotes ph-fill ph-lg"></i>
 				<Mfm
-					:text="summary"
+					:text="getNoteSummary(notification.note)"
 					:plain="true"
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
@@ -264,7 +264,6 @@
 			<span v-if="notification.type === 'app'" class="text">
 				<Mfm :text="notification.body" :nowrap="!full" />
 			</span>
-			<xShowMoreButton v-if="isLong" v-model="collapsed"></xShowMoreButton>
 		</div>
 	</div>
 </template>
@@ -275,7 +274,6 @@ import * as misskey from "calckey-js";
 import XReactionIcon from "@/components/MkReactionIcon.vue";
 import MkFollowButton from "@/components/MkFollowButton.vue";
 import XReactionTooltip from "@/components/MkReactionTooltip.vue";
-import XShowMoreButton from "./MkShowMoreButton.vue";
 import { getNoteSummary } from "@/scripts/get-note-summary";
 import { notePage } from "@/filters/note";
 import { userPage } from "@/filters/user";
@@ -301,19 +299,12 @@ const props = withDefaults(
 const elRef = ref<HTMLElement>(null);
 const reactionRef = ref(null);
 
-const summary = getNoteSummary(props.notification.note);
-
 const showEmojiReactions =
 	defaultStore.state.enableEmojiReactions ||
 	defaultStore.state.showEmojisInReactionNotifications;
 const defaultReaction = ["⭐", "👍", "❤️"].includes(instance.defaultReaction)
 	? instance.defaultReaction
 	: "⭐";
-const isLong = (summary.split("\n").length > 3 || summary.length > 200);
-const collapsed = $ref(isLong);
-
-
-
 
 let readObserver: IntersectionObserver | undefined;
 let connection;
@@ -495,7 +486,6 @@ useTooltip(reactionRef, (showing) => {
 	}
 
 	> .tail {
-		position: relative;
 		flex: 1;
 		min-width: 0;
 
@@ -536,17 +526,6 @@ useTooltip(reactionRef, (showing) => {
 				margin-left: 4px;
 			}
 		}
-		&.collapsed > .text {
-			display: block;
-			position: relative;
-			max-height: calc(4em + 50px);
-			overflow: hidden;
-			mask: linear-gradient(black calc(100% - 64px), transparent);
-			-webkit-mask: linear-gradient(
-				black calc(100% - 64px),
-				transparent
-			);
-		}
 	}
 }
 </style>

packages/client/src/components/MkShowMoreButton.vue

@@ -1,68 +0,0 @@
-<template>
-	<button
-		v-if="modelValue"
-		class="fade _button"
-		@click.stop="toggle"
-	>
-		<span>{{ i18n.ts.showMore }}</span>
-	</button>
-	<button
-		v-if="!modelValue"
-		class="showLess _button"
-		@click.stop="toggle"
-	>
-		<span>{{ i18n.ts.showLess }}</span>
-	</button>
-</template>
-<script lang="ts" setup>
-import { i18n } from "@/i18n";
-
-const props = defineProps<{
-	modelValue: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: "update:modelValue", v: boolean): void;
-}>();
-
-const toggle = () => {
-	emit("update:modelValue", !props.modelValue);
-};
-</script>
-<style lang="scss" scoped>
-.fade {
-	display: block;
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	> span {
-		display: inline-block;
-		background: var(--panel);
-		padding: 0.4em 1em;
-		font-size: 0.8em;
-		border-radius: 999px;
-		box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-	}
-	&:hover {
-		> span {
-			background: var(--panelHighlight);
-		}
-	}
-}
-.showLess {
-	width: 100%;
-	margin-top: 1em;
-	position: sticky;
-	bottom: var(--stickyBottom);
-
-	> span {
-		display: inline-block;
-		background: var(--panel);
-		padding: 6px 10px;
-		font-size: 0.8em;
-		border-radius: 999px;
-		box-shadow: 0 0 7px 7px var(--bg);
-	}
-}
-</style>

packages/client/src/components/MkSubNoteContent.vue

@@ -106,8 +106,21 @@
 					v-on:focus="cwButton?.focus()"
 				></div>
 			</div>
-			<XShowMoreButton v-if="isLong" v-model="collapsed"></XShowMoreButton>
+			<button
-			<XCwButton v-if="note.cw && showContent" v-model="showContent" :note="note" />
+				v-if="isLong && collapsed"
+				class="fade _button"
+				@click.stop="collapsed = false"
+			>
+				<span>{{ i18n.ts.showMore }}</span>
+			</button>
+			<button
+				v-if="isLong && !collapsed"
+				class="showLess _button"
+				@click.stop="collapsed = true"
+			>
+				<span>{{ i18n.ts.showLess }}</span>
+			</button>
+			<XCwButton v-if="note.cw" v-model="showContent" :note="note" />
 		</div>
 	</div>
 </template>
@@ -120,7 +133,6 @@ import XNoteSimple from "@/components/MkNoteSimple.vue";
 import XMediaList from "@/components/MkMediaList.vue";
 import XPoll from "@/components/MkPoll.vue";
 import MkUrlPreview from "@/components/MkUrlPreview.vue";
-import XShowMoreButton from "./MkShowMoreButton.vue";
 import XCwButton from "@/components/MkCwButton.vue";
 import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
 import { i18n } from "@/i18n";
@@ -145,7 +157,6 @@ const isLong =
 	props.note.text != null &&
 	(props.note.text.split("\n").length > 9 || props.note.text.length > 500);
 const collapsed = $ref(props.note.cw == null && isLong);
-
 const urls = props.note.text
 	? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5)
 	: null;
@@ -274,6 +285,43 @@ function focusFooter(ev) {
 					top: 40px;
 				}
 			}
+
+			:deep(.fade) {
+				display: block;
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				> span {
+					display: inline-block;
+					background: var(--panel);
+					padding: 0.4em 1em;
+					font-size: 0.8em;
+					border-radius: 999px;
+					box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+				}
+				&:hover {
+					> span {
+						background: var(--panelHighlight);
+					}
+				}
+			}
+		}
+
+		:deep(.showLess) {
+			width: 100%;
+			margin-top: 1em;
+			position: sticky;
+			bottom: var(--stickyBottom);
+
+			> span {
+				display: inline-block;
+				background: var(--panel);
+				padding: 6px 10px;
+				font-size: 0.8em;
+				border-radius: 999px;
+				box-shadow: 0 0 7px 7px var(--bg);
+			}
 		}
 	}
 }

packages/client/src/components/MkUserPreview.vue

@@ -55,7 +55,20 @@
 						:custom-emojis="user.emojis"
 					/>
 				</div>
-				<XShowMoreButton v-if="isLong" v-model="collapsed"></XShowMoreButton>
+				<button
+					v-if="isLong && collapsed"
+					class="fade _button"
+					@click.stop="collapsed = false"
+				>
+					<span>{{ i18n.ts.showMore }}</span>
+				</button>
+				<button
+					v-if="isLong && !collapsed"
+					class="showLess _button"
+					@click.stop="collapsed = true"
+				>
+					<span>{{ i18n.ts.showLess }}</span>
+				</button>
 				<div v-if="user.fields.length > 0" class="fields">
 					<dl
 						v-for="(field, i) in user.fields"
@@ -115,7 +128,6 @@ import * as Acct from "calckey-js/built/acct";
 import type * as misskey from "calckey-js";
 import MkFollowButton from "@/components/MkFollowButton.vue";
 import { userPage } from "@/filters/user";
-import XShowMoreButton from "./MkShowMoreButton.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";