feat(#8149): respect nsfw settings on gallery list (#10481)

* feat(#8149): respect nsfw settings on gallery list

* ci(#10336): use pull_request

* test(#8149): add interaction tests

* test(#10336): use `waitFor`

* chore: transition

packages/frontend/.storybook/fakes.ts

@@ -1,10 +1,71 @@
 import type { entities } from 'misskey-js'
 
-export const userDetailed = {
+export function abuseUserReport() {
-	id: 'someuserid',
+	return {
-	username: 'miskist',
+		id: 'someabusereportid',
-	host: 'misskey-hub.net',
+		createdAt: '2016-12-28T22:49:51.000Z',
-	name: 'Misskey User',
+		comment: 'This user is a spammer!',
+		resolved: false,
+		reporterId: 'reporterid',
+		targetUserId: 'targetuserid',
+		assigneeId: 'assigneeid',
+		reporter: userDetailed('reporterid', 'reporter', 'misskey-hub.net', 'Reporter'),
+		targetUser: userDetailed('targetuserid', 'target', 'misskey-hub.net', 'Target'),
+		assignee: userDetailed('assigneeid', 'assignee', 'misskey-hub.net', 'Assignee'),
+		me: null,
+		forwarded: false,
+	};
+}
+
+export function galleryPost(isSensitive = false) {
+	return {
+		id: 'somepostid',
+		createdAt: '2016-12-28T22:49:51.000Z',
+		updatedAt: '2016-12-28T22:49:51.000Z',
+		userid: 'someuserid',
+		user: userDetailed(),
+		title: 'Some post title',
+		description: 'Some post description',
+		fileIds: ['somefileid'],
+		files: [
+			file(isSensitive),
+		],
+		isSensitive,
+		likedCount: 0,
+		isLiked: false,
+	}
+}
+
+export function file(isSensitive = false) {
+	return {
+		id: 'somefileid',
+		createdAt: '2016-12-28T22:49:51.000Z',
+		name: 'somefile.jpg',
+		type: 'image/jpeg',
+		md5: 'f6fc51c73dc21b1fb85ead2cdf57530a',
+		size: 77752,
+		isSensitive,
+		blurhash: 'eQAmoa^-MH8w9ZIvNLSvo^$*MwRPbwtSxutRozjEiwR.RjWBoeozog',
+		properties: {
+			width: 1024,
+			height: 270
+		},
+		url: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
+		thumbnailUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
+		comment: null,
+		folderId: null,
+		folder: null,
+		userId: null,
+		user: null,
+	};
+}
+
+export function userDetailed(id = 'someuserid', username = 'miskist', host = 'misskey-hub.net', name = 'Misskey User'): entities.UserDetailed {
+	return {
+		id,
+		username,
+		host,
+		name,
 		onlineStatus: 'unknown',
 		avatarUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
 		avatarBlurhash: 'eQFRshof5NWBRi},juayfPju53WB?0ofs;s*a{ofjuay^SoMEJR%ay',
@@ -51,4 +112,5 @@ export const userDetailed = {
 		updatedAt: null,
 		uri: null,
 		url: null,
-} satisfies entities.UserDetailed
+	};
+}

packages/frontend/.storybook/generate.tsx

@@ -394,13 +394,13 @@ function toStories(component: string): string {
 	);
 }
 
-// glob('src/{components,pages,ui,widgets}/**/*.vue').then(
+// glob('src/{components,pages,ui,widgets}/**/*.vue')
-glob('src/components/global/**/*.vue').then(
+Promise.all([
-	(components) =>
+	glob('src/components/global/*.vue'),
-		Promise.all(
+	glob('src/components/MkGalleryPostPreview.vue'),
-			components.map((component) => {
+])
+	.then((globs) => globs.flat())
+	.then((components) => Promise.all(components.map((component) => {
 		const stories = component.replace(/\.vue$/, '.stories.ts');
 		return writeFile(stories, toStories(component));
-			})
+	})));
-		)
-);

packages/frontend/src/components/MkGalleryPostPreview.stories.impl.ts

@@ -0,0 +1,85 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { expect } from '@storybook/jest';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { StoryObj } from '@storybook/vue3';
+import { galleryPost } from '../../.storybook/fakes';
+import MkGalleryPostPreview from './MkGalleryPostPreview.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkGalleryPostPreview,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkGalleryPostPreview v-bind="props" />',
+		};
+	},
+	async play({ canvasElement }) {
+		const canvas = within(canvasElement);
+		const links = canvas.getAllByRole('link');
+		await expect(links).toHaveLength(2);
+		await expect(links[0]).toHaveAttribute('href', `/gallery/${galleryPost().id}`);
+		await expect(links[1]).toHaveAttribute('href', `/@${galleryPost().user.username}@${galleryPost().user.host}`);
+	},
+	args: {
+		post: galleryPost(),
+	},
+	decorators: [
+		() => ({
+			template: '<div style="width:260px"><story /></div>',
+		}),
+	],
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;
+export const Hover = {
+	...Default,
+	async play(context) {
+		await Default.play(context);
+		const canvas = within(context.canvasElement);
+		const links = canvas.getAllByRole('link');
+		await waitFor(() => userEvent.hover(links[0]));
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;
+export const HoverThenUnhover = {
+	...Default,
+	async play(context) {
+		await Hover.play(context);
+		const canvas = within(context.canvasElement);
+		const links = canvas.getAllByRole('link');
+		await waitFor(() => userEvent.unhover(links[0]));
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;
+export const Sensitive = {
+	...Default,
+	args: {
+		...Default.args,
+		post: galleryPost(true),
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;
+export const SensitiveHover = {
+	...Hover,
+	args: {
+		...Hover.args,
+		post: galleryPost(true),
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;
+export const SensitiveHoverThenUnhover = {
+	...HoverThenUnhover,
+	args: {
+		...HoverThenUnhover.args,
+		post: galleryPost(true),
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;

packages/frontend/src/components/MkGalleryPostPreview.vue

@@ -1,7 +1,10 @@
 <template>
-<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
+<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1" @pointerenter="enterHover" @pointerleave="leaveHover">
 	<div class="thumbnail">
-		<ImgWithBlurhash class="img" :src="post.files[0].thumbnailUrl" :hash="post.files[0].blurhash"/>
+		<ImgWithBlurhash class="img" :hash="post.files[0].blurhash"/>
+		<Transition>
+			<ImgWithBlurhash v-if="show" class="img layered" :src="post.files[0].thumbnailUrl" :hash="post.files[0].blurhash"/>
+		</Transition>
 	</div>
 	<article>
 		<header>
@@ -15,12 +18,25 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import * as misskey from 'misskey-js';
+import { computed, ref } from 'vue';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
-	post: any;
+	post: misskey.entities.GalleryPost;
 }>();
+
+const hover = ref(false);
+const show = computed(() => defaultStore.state.nsfw === 'ignore' || defaultStore.state.nsfw === 'respect' && !props.post.isSensitive || hover.value);
+
+function enterHover(): void {
+	hover.value = true;
+}
+
+function leaveHover(): void {
+	hover.value = false;
+}
 </script>
 
 <style lang="scss" scoped>
@@ -56,6 +72,21 @@ const props = defineProps<{
 			width: 100%;
 			height: 100%;
 			object-fit: cover;
+
+			&.layered {
+				position: absolute;
+				top: 0;
+
+				&.v-enter-active,
+				&.v-leave-active {
+					transition: opacity 0.5s ease;
+				}
+
+				&.v-enter-from,
+				&.v-leave-to {
+					opacity: 0;
+				}
+			}
 		}
 	}
 

packages/frontend/src/components/global/MkAcct.stories.impl.ts

@@ -25,7 +25,7 @@ export const Default = {
 	},
 	args: {
 		user: {
-			...userDetailed,
+			...userDetailed(),
 			host: null,
 		},
 	},
@@ -37,7 +37,7 @@ export const Detail = {
 	...Default,
 	args: {
 		...Default.args,
-		user: userDetailed,
+		user: userDetailed(),
 		detail: true,
 	},
 } satisfies StoryObj<typeof MkAcct>;

packages/frontend/src/components/global/MkAvatar.stories.impl.ts

@@ -24,7 +24,7 @@ const common = {
 		};
 	},
 	args: {
-		user: userDetailed,
+		user: userDetailed(),
 	},
 	decorators: [
 		(Story, context) => ({
@@ -49,7 +49,7 @@ export const ProfilePageCat = {
 	args: {
 		...ProfilePage.args,
 		user: {
-			...userDetailed,
+			...userDetailed(),
 			isCat: true,
 		},
 	},

packages/frontend/src/components/global/MkUrl.stories.impl.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { expect } from '@storybook/jest';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
 import { StoryObj } from '@storybook/vue3';
 import { rest } from 'msw';
 import { commonHandlers } from '../../../.storybook/mocks';
@@ -30,7 +30,7 @@ export const Default = {
 		const canvas = within(canvasElement);
 		const a = canvas.getByRole<HTMLAnchorElement>('link');
 		await expect(a).toHaveAttribute('href', 'https://misskey-hub.net/');
-		await userEvent.hover(a);
+		await waitFor(() => userEvent.hover(a));
 		/*
 		await tick(); // FIXME: wait for network request
 		const anchors = canvas.getAllByRole<HTMLAnchorElement>('link');
@@ -44,7 +44,7 @@ export const Default = {
 		await expect(icon).toBeInTheDocument();
 		await expect(icon).toHaveAttribute('src', 'https://misskey-hub.net/favicon.ico');
 		 */
-		await userEvent.unhover(a);
+		await waitFor(() => userEvent.unhover(a));
 	},
 	args: {
 		url: 'https://misskey-hub.net/',

packages/frontend/src/components/global/MkUserName.stories.impl.ts

@@ -26,10 +26,10 @@ export const Default = {
 		};
 	},
 	async play({ canvasElement }) {
-		await expect(canvasElement).toHaveTextContent(userDetailed.name);
+		await expect(canvasElement).toHaveTextContent(userDetailed().name);
 	},
 	args: {
-		user: userDetailed,
+		user: userDetailed(),
 	},
 	parameters: {
 		layout: 'centered',
@@ -38,12 +38,12 @@ export const Default = {
 export const Anonymous = {
 	...Default,
 	async play({ canvasElement }) {
-		await expect(canvasElement).toHaveTextContent(userDetailed.username);
+		await expect(canvasElement).toHaveTextContent(userDetailed().username);
 	},
 	args: {
 		...Default.args,
 		user: {
-			...userDetailed,
+			...userDetailed(),
 			name: null,
 		},
 	},