投稿したファイルの一覧をプロフィールページ内のタブで見れるようにしてみた (Otaku-Social#14)

locales/index.d.ts

@@ -3470,6 +3470,10 @@ export interface Locale extends ILocale {
      * ギャラリー
      */
     "gallery": string;
+    /**
+     * ギャラリー（ノート）
+     */
+    "galleryFromPosts": string;
     /**
      * 最近の投稿
      */

locales/ja-JP.yml

@@ -863,6 +863,7 @@ configure: "設定する"
 postToGallery: "ギャラリーへ投稿"
 postToHashtag: "このハッシュタグで投稿"
 gallery: "ギャラリー"
+galleryFromPosts: "ギャラリー（ノート）"
 recentPosts: "最近の投稿"
 popularPosts: "人気の投稿"
 shareWithNote: "ノートで共有"

packages/frontend/src/pages/user/index.vue

@@ -21,6 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<XPages v-else-if="tab === 'pages'" key="pages" :user="user"/>
 				<XFlashs v-else-if="tab === 'flashs'" key="flashs" :user="user"/>
 				<XGallery v-else-if="tab === 'gallery'" key="gallery" :user="user"/>
+				<XGalleryFromPosts v-else-if="tab === 'galleryFromPosts'" :user="user"/>
 				<XRaw v-else-if="tab === 'raw'" key="raw" :user="user"/>
 			</MkHorizontalSwipe>
 		</div>
@@ -51,6 +52,7 @@ const XLists = defineAsyncComponent(() => import('./lists.vue'));
 const XPages = defineAsyncComponent(() => import('./pages.vue'));
 const XFlashs = defineAsyncComponent(() => import('./flashs.vue'));
 const XGallery = defineAsyncComponent(() => import('./gallery.vue'));
+const XGalleryFromPosts = defineAsyncComponent(() => import('./post-gallery.vue'));
 const XRaw = defineAsyncComponent(() => import('./raw.vue'));
 
 const CTX_USER = getServerContext('user');
@@ -134,6 +136,10 @@ const headerTabs = computed(() => user.value ? [{
 	key: 'gallery',
 	title: i18n.ts.gallery,
 	icon: 'ti ti-icons',
+}, {
+	key: 'galleryFromPosts',
+	title: i18n.ts.galleryFromPosts,
+	icon: 'ti ti-icons',
 }, {
 	key: 'raw',
 	title: 'Raw',

packages/frontend/src/pages/user/post-gallery.vue

@@ -0,0 +1,113 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+	<MkSpacer :contentMax="1100">
+		<div :class="$style.root">
+			<MkLoading v-if="fetching"/>
+			<div v-if="!fetching && files.length > 0" :class="$style.stream">
+				<template v-for="file in files" :key="file.note.id + file.file.id">
+					<div v-if="file.file.isSensitive && !showingFiles.includes(file.file.id)" :class="$style.sensitive" @click="showingFiles.push(file.file.id)">
+						<div>
+							<div><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}</div>
+							<div>{{ i18n.ts.clickToShow }}</div>
+						</div>
+					</div>
+					<MkA v-else :class="$style.img" :to="notePage(file.note)">
+						<!-- TODO: 画像以外のファイルに対応 -->
+						<ImgWithBlurhash :hash="file.file.blurhash" :src="thumbnail(file.file)" :title="file.file.name"/>
+					</MkA>
+				</template>
+			</div>
+			<p v-if="!fetching && files.length == 0" :class="$style.empty">{{ i18n.ts.nothing }}</p>
+		</div>
+	</MkSpacer>
+</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 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;
+}[]>([]);
+let showingFiles = $ref<string[]>([]);
+
+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: 50,
+	}).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(200px, 1fr));
+	grid-gap: 6px;
+}
+
+.img {
+	height: 200px;
+	border-radius: 6px;
+	overflow: clip;
+}
+
+@media (max-width: 568px) {
+	.stream {
+		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+	}
+
+	.img {
+		height: 120px;
+	}
+}
+
+.empty {
+	margin: 0;
+	padding: 16px;
+	text-align: center;
+}
+
+.sensitive {
+	display: grid;
+	place-items: center;
+}
+</style>