1 files changed, 113 insertions, 0 deletions
diff --git a/packages/frontend/src/components/SkNoteSimple.vue b/packages/frontend/src/components/SkNoteSimple.vue
new file mode 100644
index 0000000000..8ebd24b322
--- /dev/null
+++ b/packages/frontend/src/components/SkNoteSimple.vue
@@ -0,0 +1,113 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.root">
+	<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
+	<div :class="$style.main">
+		<MkNoteHeader :class="$style.header" :classic="true" :note="note" :mini="true"/>
+		<div>
+			<p v-if="note.cw != null" :class="$style.cw">
+				<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
+				<MkCwButton v-model="showContent" :note="note" v-on:click.stop/>
+			</p>
+			<div v-show="note.cw == null || showContent">
+				<MkSubNoteContent :hideFiles="hideFiles" :class="$style.text" :note="note"/>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { watch } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkNoteHeader from '@/components/MkNoteHeader.vue';
+import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
+import MkCwButton from '@/components/MkCwButton.vue';
+import { $i } from '@/account.js';
+
+const props = defineProps<{
+	note: Misskey.entities.Note;
+	expandAllCws?: boolean;
+	hideFiles?: boolean;
+}>();
+
+let showContent = $ref(false);
+
+watch(() => props.expandAllCws, (expandAllCws) => {
+	if (expandAllCws !== showContent) showContent = expandAllCws;
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	display: flex;
+	margin: 0;
+	padding: 0;
+	font-size: 0.95em;
+}
+
+.avatar {
+	flex-shrink: 0;
+	display: block;
+	margin: 0 10px 0 0;
+	width: 34px;
+	height: 34px;
+	border-radius: var(--radius-sm);
+	position: sticky !important;
+	top: calc(16px + var(--stickyTop, 0px));
+	left: 0;
+}
+
+.main {
+	flex: 1;
+	min-width: 0;
+}
+
+.header {
+	margin-bottom: 2px;
+	z-index: 2;
+}
+
+.cw {
+	display: block;
+	margin: 0;
+	padding: 0;
+	overflow-wrap: break-word;
+	overflow: hidden;
+}
+
+.text {
+	cursor: default;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+}
+
+@container (min-width: 250px) {
+	.avatar {
+		margin: 0 10px 0 0;
+		width: 40px;
+		height: 40px;
+	}
+}
+
+@container (min-width: 350px) {
+	.avatar {
+		margin: 0 10px 0 0;
+		width: 44px;
+		height: 44px;
+	}
+}
+
+@container (min-width: 500px) {
+	.avatar {
+		margin: 0 12px 0 0;
+		width: 48px;
+		height: 48px;
+	}
+}
+</style>