enhance: 既存のファイルコンテナの「もっと見る」をクリックしたらファイルタブに飛べるように

packages/frontend/src/components/MkContainer.vue

@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	>
 		<div v-show="showBody" ref="contentEl" :class="[$style.content, { [$style.omitted]: omitted }]">
 			<slot></slot>
-			<button v-if="omitted" :class="$style.fade" class="_button" @click="() => { ignoreOmit = true; omitted = false; }">
+			<button v-if="omitted" :class="$style.fade" class="_button" @click="showMore">
 				<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
 			</button>
 		</div>
@@ -48,6 +48,7 @@ const props = withDefaults(defineProps<{
 	thin?: boolean;
 	naked?: boolean;
 	foldable?: boolean;
+	onUnfold?: () => boolean; // return false to prevent unfolding
 	scrollable?: boolean;
 	expanded?: boolean;
 	maxHeight?: number | null;
@@ -101,6 +102,13 @@ const omitObserver = new ResizeObserver((entries, observer) => {
 	calcOmit();
 });
 
+function showMore() {
+	if (props.onUnfold && !props.onUnfold()) return;
+
+	ignoreOmit.value = true;
+	omitted.value = false;
+}
+
 onMounted(() => {
 	watch(showBody, v => {
 		if (!rootEl.value) return;

packages/frontend/src/components/MkMedias.vue

@@ -5,13 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 	<template v-for="file in note.files">
-		<div v-if="file.isSensitive && !showingFiles.includes(file.id)" :class="$style.sensitive" @click="showingFiles.push(file.id)">
+		<div v-if="file.isSensitive && !showingFiles.includes(file.id)" :class="[$style.sensitive, { [$style.square]: square }]" @click="showingFiles.push(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(note)">
+		<MkA v-else :class="[$style.img, { [$style.square]: square }]" :to="notePage(note)">
 			<!-- TODO: 画像以外のファイルに対応 -->
 			<ImgWithBlurhash :hash="file.blurhash" :src="thumbnail(file)" :title="file.name"/>
 		</MkA>
@@ -28,8 +28,9 @@ import * as Misskey from 'misskey-js';
 import { defaultStore } from '@/store.js';
 import { getProxiedImageUrl, getStaticImageUrl } from '@/scripts/media-proxy.js';
 
-const props = defineProps<{
+defineProps<{
 	note: Misskey.entities.Note;
+	square?: boolean;
 }>();
 
 const showingFiles = ref<string[]>([]);
@@ -42,10 +43,20 @@ function thumbnail(image: Misskey.entities.DriveFile): string {
 </script>
 
 <style lang="scss" module>
+.square {
+	width: 100%;
+	height: auto;
+	aspect-ratio: 1;
+}
+
 .img {
 	height: 220px;
 	border-radius: 6px;
 	overflow: clip;
+
+	&.square {
+		height: 100%;
+	}
 }
 
 .empty {

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

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.root">
 			<MkPagination v-slot="{items}" :pagination="pagination">
 				<div :class="$style.stream">
-					<MkMedias v-for="note in items" :note="note"/>
+					<MkMedias v-for="note in items" :note="note" square/>
 				</div>
 			</MkPagination>
 		</div>
@@ -46,10 +46,4 @@ const pagination = {
 	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 	grid-gap: 6px;
 }
-
-@media (min-width: 720px) {
-	.stream {
-		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-	}
-}
 </style>

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

@@ -136,7 +136,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
 				<template v-if="narrow">
 					<MkLazy>
-						<XFiles :key="user.id" :user="user"/>
+						<XFiles :key="user.id" :user="user" @unfold="emit('unfoldFiles')"/>
 					</MkLazy>
 					<MkLazy>
 						<XActivity :key="user.id" :user="user"/>
@@ -150,7 +150,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 		<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
-			<XFiles :key="user.id" :user="user"/>
+			<XFiles :key="user.id" :user="user" @unfold="emit('unfoldFiles')"/>
 			<XActivity :key="user.id" :user="user"/>
 		</div>
 	</div>
@@ -212,6 +212,10 @@ const props = withDefaults(defineProps<{
 	disableNotes: false,
 });
 
+const emit = defineEmits<{
+	(ev: 'unfoldFiles'): void;
+}>();
+
 const router = useRouter();
 
 const user = ref(props.user);

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

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkContainer :max-height="300" :foldable="true">
+<MkContainer :max-height="300" :foldable="true" :onUnfold="unfoldContainer">
 	<template #icon><i class="ti ti-photo"></i></template>
 	<template #header>{{ i18n.ts.files }}</template>
 	<div :class="$style.root">
@@ -35,7 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { getStaticImageUrl } from '@/scripts/media-proxy.js';
+import { getProxiedImageUrl, getStaticImageUrl } from '@/scripts/media-proxy.js';
 import { notePage } from '@/filters/note.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkContainer from '@/components/MkContainer.vue';
@@ -47,6 +47,10 @@ const props = defineProps<{
 	user: Misskey.entities.UserDetailed;
 }>();
 
+const emit = defineEmits<{
+	(ev: 'unfold'): void;
+}>();
+
 const fetching = ref(true);
 const files = ref<{
 	note: Misskey.entities.Note;
@@ -54,10 +58,15 @@ const files = ref<{
 }[]>([]);
 const showingFiles = ref<string[]>([]);
 
+function unfoldContainer(): boolean {
+	emit('unfold');
+	return false;
+}
+
 function thumbnail(image: Misskey.entities.DriveFile): string {
 	return defaultStore.state.disableShowingAnimatedImages
 		? getStaticImageUrl(image.url)
-		: image.thumbnailUrl;
+		: image.thumbnailUrl ?? getProxiedImageUrl(image.url, 'preview');
 }
 
 onMounted(() => {
@@ -67,6 +76,7 @@ onMounted(() => {
 		limit: 15,
 	}).then(notes => {
 		for (const note of notes) {
+			if (!note.files) continue;
 			for (const file of note.files) {
 				files.value.push({
 					note,

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

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div>
 		<div v-if="user">
 			<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
-				<XHome v-if="tab === 'home'" key="home" :user="user"/>
+				<XHome v-if="tab === 'home'" key="home" :user="user" @unfoldFiles="() => { tab = 'files'; }"/>
 				<MkSpacer v-else-if="tab === 'notes'" key="notes" :contentMax="800" style="padding-top: 0">
 					<XTimeline :user="user"/>
 				</MkSpacer>
@@ -105,7 +105,7 @@ const headerTabs = computed(() => user.value ? [{
 	title: i18n.ts.notes,
 	icon: 'ti ti-pencil',
 }, {
-	key: 'file',
+	key: 'files',
 	title: i18n.ts.files,
 	icon: 'ti ti-photo',
 }, {