From 8458e23b47f8c89afe99ace9c66c8b723aeea1a1 Mon Sep 17 00:00:00 2001
From: tmorio <morikapusan@morikapu-denki.com>
Date: Mon, 20 Nov 2023 10:05:19 +0900
Subject: [PATCH] =?UTF-8?q?=E6=8A=95=E7=A8=BF=E3=81=97=E3=81=9F=E3=83=95?=
 =?UTF-8?q?=E3=82=A1=E3=82=A4=E3=83=AB=E3=81=AE=E4=B8=80=E8=A6=A7=E3=82=92?=
 =?UTF-8?q?=E3=83=97=E3=83=AD=E3=83=95=E3=82=A3=E3=83=BC=E3=83=AB=E3=83=9A?=
 =?UTF-8?q?=E3=83=BC=E3=82=B8=E5=86=85=E3=81=AE=E3=82=BF=E3=83=96=E3=81=A7?=
 =?UTF-8?q?=E8=A6=8B=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=97?=
 =?UTF-8?q?=E3=81=A6=E3=81=BF=E3=81=9F=20(Otaku-Social#14)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            |   4 +
 locales/ja-JP.yml                             |   1 +
 packages/frontend/src/pages/user/index.vue    |   6 +
 .../frontend/src/pages/user/post-gallery.vue  | 113 ++++++++++++++++++
 4 files changed, 124 insertions(+)
 create mode 100644 packages/frontend/src/pages/user/post-gallery.vue

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 0ae188f1f7..5755d038a7 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -3470,6 +3470,10 @@ export interface Locale extends ILocale {
      * ギャラリー
      */
     "gallery": string;
+    /**
+     * ギャラリー（ノート）
+     */
+    "galleryFromPosts": string;
     /**
      * 最近の投稿
      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 1b59708d85..11abf11ccd 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -863,6 +863,7 @@ configure: "設定する"
 postToGallery: "ギャラリーへ投稿"
 postToHashtag: "このハッシュタグで投稿"
 gallery: "ギャラリー"
+galleryFromPosts: "ギャラリー（ノート）"
 recentPosts: "最近の投稿"
 popularPosts: "人気の投稿"
 shareWithNote: "ノートで共有"
diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue
index d862387401..b9ce5ecdba 100644
--- a/packages/frontend/src/pages/user/index.vue
+++ b/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',
diff --git a/packages/frontend/src/pages/user/post-gallery.vue b/packages/frontend/src/pages/user/post-gallery.vue
new file mode 100644
index 0000000000..de5f5c5af9
--- /dev/null
+++ b/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>