Merge branch 'develop'

1 files changed, 92 insertions, 0 deletions

diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
new file mode 100644
index 0000000000..482a43f474
--- /dev/null
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -0,0 +1,92 @@
+<template>
+<div :class="[$style.root, { [$style.collapsed]: collapsed }]">
+	<div :class="$style.body">
+		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
+		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
+		<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
+		<Mfm v-if="note.text" v-once :text="note.text" :author="note.user" :i="$i"/>
+		<MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
+	</div>
+	<details v-if="note.files.length > 0">
+		<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
+		<MkMediaList :media-list="note.files"/>
+	</details>
+	<details v-if="note.poll">
+		<summary>{{ i18n.ts.poll }}</summary>
+		<MkPoll :note="note"/>
+	</details>
+	<button v-if="collapsed" :class="$style.fade" class="_button" @click="collapsed = false">
+		<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
+	</button>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as misskey from 'misskey-js';
+import MkMediaList from '@/components/MkMediaList.vue';
+import MkPoll from '@/components/MkPoll.vue';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	note: misskey.entities.Note;
+}>();
+
+const collapsed = $ref(
+	props.note.cw == null && props.note.text != null && (
+		(props.note.text.split('\n').length > 9) ||
+		(props.note.text.length > 500)
+	));
+</script>
+
+<style lang="scss" module>
+.root {
+	overflow-wrap: break-word;
+
+	&.collapsed {
+		position: relative;
+		max-height: 9em;
+		overflow: clip;
+
+		> .fade {
+			display: block;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 64px;
+			background: linear-gradient(0deg, var(--panel), var(--X15));
+
+			> .fadeLabel {
+				display: inline-block;
+				background: var(--panel);
+				padding: 6px 10px;
+				font-size: 0.8em;
+				border-radius: 999px;
+				box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+			}
+
+			&:hover {
+				> .fadeLabel {
+					background: var(--panelHighlight);
+				}
+			}
+		}
+	}
+}
+
+.body {
+
+}
+
+.reply {
+	margin-right: 6px;
+	color: var(--accent);
+}
+
+.rp {
+	margin-left: 4px;
+	font-style: oblique;
+	color: var(--renote);
+}
+</style>