feat: improve tl performance (#11946)

* wip * wip * wip * wip * wip * wip * Update NoteCreateService.ts * wip * wip * wip * wip * Update NoteCreateService.ts * wip * Update NoteCreateService.ts * wip * Update user-notes.ts * wip * wip * wip * Update NoteCreateService.ts * wip * Update timeline.ts * Update timeline.ts * Update timeline.ts * Update timeline.ts * Update timeline.ts * wip * Update timelines.ts * Update timelines.ts * Update timelines.ts * wip * wip * wip * Update timelines.ts * Update misskey-js.api.md * Update timelines.ts * Update timelines.ts * wip * wip * wip * Update timelines.ts * wip * Update timelines.ts * wip * test * Update activitypub.ts * refactor: UserListJoining -> UserListMembership * Update NoteCreateService.ts * wip
2023-10-03 20:26:11 +09:00
parent 5ee93dc4a2
commit 6277a5545c
84 changed files with 1898 additions and 947 deletions
--- a/packages/frontend/src/pages/user/index.files.vue
+++ b/packages/frontend/src/pages/user/index.files.vue
@@ -0,0 +1,97 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkContainer :max-height="300" :foldable="true">
+	<template #icon><i class="ti ti-photo"></i></template>
+	<template #header>{{ i18n.ts.files }}</template>
+	<div :class="$style.root">
+		<MkLoading v-if="fetching"/>
+		<div v-if="!fetching && files.length > 0" :class="$style.stream">
+			<MkA
+				v-for="file in files"
+				:key="file.note.id + file.file.id"
+				:class="$style.img"
+				:to="notePage(file.note)"
+			>
+				<!-- TODO: 画像以外のファイルに対応 -->
+				<ImgWithBlurhash :hash="file.file.blurhash" :src="thumbnail(file.file)" :title="file.file.name"/>
+			</MkA>
+		</div>
+		<p v-if="!fetching && files.length == 0" :class="$style.empty">{{ i18n.ts.nothing }}</p>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import * as Misskey from 'misskey-js';
+import { getStaticImageUrl } from '@/scripts/media-proxy.js';
+import { notePage } from '@/filters/note.js';
+import * as os from '@/os.js';
+import MkContainer from '@/components/MkContainer.vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import { defaultStore } from '@/store.js';
+import { i18n } from '@/i18n.js';
+
+const props = defineProps<{
+	user: Misskey.entities.UserDetailed;
+}>();
+
+let fetching = $ref(true);
+let files = $ref<{
+	note: Misskey.entities.Note;
+	file: Misskey.entities.DriveFile;
+}[]>([]);
+
+function thumbnail(image: Misskey.entities.DriveFile): string {
+	return defaultStore.state.disableShowingAnimatedImages
+		? getStaticImageUrl(image.url)
+		: image.thumbnailUrl;
+}
+
+onMounted(() => {
+	os.api('users/notes', {
+		userId: props.user.id,
+		withFiles: true,
+		excludeNsfw: defaultStore.state.nsfw !== 'ignore',
+		limit: 15,
+	}).then(notes => {
+		for (const note of notes) {
+			for (const file of note.files) {
+				files.push({
+					note,
+					file,
+				});
+			}
+		}
+		fetching = false;
+	});
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 8px;
+}
+
+.stream {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+	grid-gap: 6px;
+}
+
+.img {
+	height: 128px;
+	border-radius: 6px;
+	overflow: clip;
+}
+
+.empty {
+	margin: 0;
+	padding: 16px;
+	text-align: center;
+}
+</style>