Emit event when cw is expanded

packages/client/src/components/MkNote.vue

@@ -18,79 +18,47 @@
 				{{ i18n.ts.featured }}
 			</div>
 			<div v-if="pinned" class="info">
-				<i class="ph-push-pin ph-bold ph-lg"></i
+				<i class="ph-push-pin ph-bold ph-lg"></i>{{ i18n.ts.pinnedNote }}
-				>{{ 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
+						<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)" @click.stop>
-							v-user-preview="note.userId"
-							class="name"
-							:to="userPage(note.user)"
-							@click.stop
-						>
 							<MkUserName :user="note.user" />
 						</MkA>
 					</template>
 				</I18n>
 				<div class="info">
-					<button
+					<button ref="renoteTime" class="_button time" @click.stop="showRenoteMenu()">
-						ref="renoteTime"
+						<i v-if="isMyRenote" class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"></i>
-						class="_button time"
-						@click.stop="showRenoteMenu()"
-					>
-						<i
-							v-if="isMyRenote"
-							class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
-						></i>
 						<MkTime :time="note.createdAt" />
 					</button>
 					<MkVisibility :note="note" />
 				</div>
 			</div>
 		</div>
-		<article
+		<article class="article" @contextmenu.stop="onContextmenu" @click="noteClick">
-			class="article"
-			@contextmenu.stop="onContextmenu"
-			@click="noteClick"
-		>
 			<div class="main">
 				<div class="header-container">
 					<MkAvatar class="avatar" :user="appearNote.user" />
-					<XNoteHeader
+					<XNoteHeader class="header" :note="appearNote" :mini="true" />
-						class="header"
-						:note="appearNote"
-						:mini="true"
-					/>
 				</div>
 				<div class="body">
-					<MkSubNoteContent
+					<MkSubNoteContent class="text" :note="appearNote" :detailed="true" :detailedView="detailedView"
-						class="text"
+						:parentId="appearNote.parentId" @push="(e) => router.push(notePage(e))"
-						:note="appearNote"
+						@focusfooter="footerEl.focus()" @expanded="(e) => setPostExpanded(e)"></MkSubNoteContent>
-						:detailed="true"
-						:detailedView="detailedView"
-						:parentId="appearNote.parentId"
-						@push="(e) => router.push(notePage(e))"
-						@focusfooter="footerEl.focus()"
-					></MkSubNoteContent>
 					<div v-if="translating || translation" class="translation">
 						<MkLoading v-if="translating" mini />
 						<div v-else class="translated">
-							<b
+							<b>{{
-								>{{
 								i18n.t("translatedFrom", {
 									x: translation.sourceLang,
 								})
 							}}:
 							</b>
-							<Mfm
+							<Mfm :text="translation.text" :author="appearNote.user" :i="$i"
-								:text="translation.text"
+								:custom-emojis="appearNote.emojis" />
-								:author="appearNote.user"
-								:i="$i"
-								:custom-emojis="appearNote.emojis"
-							/>
 						</div>
 					</div>
 				</div>
@@ -461,18 +429,30 @@ function readPromo() {
 	isDeleted.value = true;
 }
 
+let postIsExpanded = false;
+
+function setPostExpanded(val: boolean) {
+	postIsExpanded = val;
+}
+
 const accessibleLabel = computed(() => {
 	let label = `${props.note.user.username}; `;
 	if (props.note.renote) {
 		label += `${i18n.t("renoted")} ${props.note.renote.user.username}; `;
 		if (props.note.renote.cw) {
 			label += `content warning: ${props.note.renote.cw}; `;
+			if (postIsExpanded) {
+				label += `${props.note.renote.text}; `;	
+			}
 		} else {
 			label += `${props.note.renote.text}; `;
 		}
 	} else {
 		if (props.note.cw) {
 			label += `${i18n.t("cw")}: ${props.note.cw}; `;
+			if (postIsExpanded) {
+				label += `${props.note.text}; `;
+			}
 		} else {
 			label += `${props.note.text}; `;
 		}

packages/client/src/components/MkSubNoteContent.vue

@@ -54,6 +54,7 @@
 				v-model="showContent"
 				:note="note"
 				v-on:keydown="focusFooter"
+				v-on:update:model-value="(val) => emit('expanded', val)"
 			/>
 			<div
 				class="body"
@@ -190,6 +191,7 @@ const props = defineProps<{
 const emit = defineEmits<{
 	(ev: "push", v): void;
 	(ev: "focusfooter"): void;
+	(ev: "expanded", v): void;
 }>();
 
 const cwButton = ref<HTMLElement>();