From 322f132da1d30e610551e4e83a1d184908c283a0 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 3 Jun 2024 19:38:41 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=A6=E3=83=BC=E3=82=B6TL=E3=81=AE=E4=BD=99?=
 =?UTF-8?q?=E7=99=BD=E3=82=92=E3=82=AF=E3=83=AA=E3=83=83=E3=82=AF=E3=81=97?=
 =?UTF-8?q?=E3=81=A6=E4=B8=8A=E9=83=A8=E3=81=AB=E6=88=BB=E3=82=8C=E3=82=8B?=
 =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkNoteDetailed.vue         |  1 +
 .../src/pages/embed/user-timeline.vue         | 26 +++++++++++++++++--
 packages/frontend/src/router/definition.ts    |  1 +
 packages/frontend/src/scripts/is-link.ts      | 12 +++++++++
 packages/frontend/src/ui/embed.vue            |  8 +++++-
 5 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontend/src/scripts/is-link.ts

diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index a69a625f62..4b9afdc1a2 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -710,6 +710,7 @@ function loadConversation() {
 .noteHeaderInstanceIcon {
 	width: 32px;
 	height: 32px;
+	border-radius: 4px;
 }
 
 .noteHeaderUsername {
diff --git a/packages/frontend/src/pages/embed/user-timeline.vue b/packages/frontend/src/pages/embed/user-timeline.vue
index c4b8d2056a..ddd24cb9ce 100644
--- a/packages/frontend/src/pages/embed/user-timeline.vue
+++ b/packages/frontend/src/pages/embed/user-timeline.vue
@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer" :class="$style.avatarLink">
 					<MkAvatar :class="$style.avatar" :user="user"/>
 				</a>
-				<div :class="$style.headerTitle">
+				<div :class="$style.headerTitle" @click="top">
 					<I18n :src="i18n.ts.noteOf" tag="div">
 						<template #user>
 							<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer">
@@ -29,8 +29,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</a>
 			</div>
 			<MkNotes
+				ref="notesEl"
 				:class="$style.userTimelineNotes"
 				:pagination="pagination"
+				:disableAutoLoad="!normalizedEnableAutoLoad"
 				:noGap="true"
 				:ad="false"
 			/>
@@ -40,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkNotes from '@/components/MkNotes.vue';
 import XNotFound from '@/pages/not-found.vue';
@@ -49,14 +51,21 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import { url, instanceName } from '@/config.js';
+import { scrollToTop } from '@/scripts/scroll.js';
+import { isLink } from '@/scripts/is-link.js';
 
 const props = defineProps<{
 	username: string;
 	showHeader?: string;
+	enableAutoLoad?: string;
 }>();
 
+// デフォルト: true
 const normalizedShowHeader = computed(() => props.showHeader !== 'false');
 
+// デフォルト: false
+const normalizedEnableAutoLoad = computed(() => props.enableAutoLoad === 'true');
+
 const user = ref<Misskey.entities.UserLite | null>(null);
 const pagination = computed(() => ({
 	endpoint: 'users/notes',
@@ -66,6 +75,17 @@ const pagination = computed(() => ({
 } as Paging));
 const loading = ref(true);
 
+const notesEl = shallowRef<InstanceType<typeof MkNotes> | null>(null);
+
+function top(ev: MouseEvent) {
+	const target = ev.target as HTMLElement | null;
+	if (target && isLink(target)) return;
+
+	if (notesEl.value) {
+		scrollToTop(notesEl.value.$el as HTMLElement, { behavior: 'smooth' });
+	}
+}
+
 misskeyApi('users/show', {
 	username: props.username,
 }).then(res => {
@@ -106,6 +126,7 @@ misskeyApi('users/show', {
 	}
 
 	.headerTitle {
+		flex-grow: 1;
 		font-weight: 700;
 		line-height: 1.1;
 
@@ -117,6 +138,7 @@ misskeyApi('users/show', {
 	}
 
 	.instanceIconLink {
+		flex-shrink: 0;
 		display: block;
 		margin-left: auto;
 		height: 24px;
diff --git a/packages/frontend/src/router/definition.ts b/packages/frontend/src/router/definition.ts
index 09d80fcf40..0da1c5131e 100644
--- a/packages/frontend/src/router/definition.ts
+++ b/packages/frontend/src/router/definition.ts
@@ -563,6 +563,7 @@ const routes: RouteDef[] = [{
 	component: page(() => import('@/pages/embed/user-timeline.vue')),
 	query: {
 		header: 'showHeader',
+		autoload: 'enableAutoLoad',
 	}
 }, {
 	path: '/timeline',
diff --git a/packages/frontend/src/scripts/is-link.ts b/packages/frontend/src/scripts/is-link.ts
new file mode 100644
index 0000000000..d016511ccb
--- /dev/null
+++ b/packages/frontend/src/scripts/is-link.ts
@@ -0,0 +1,12 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export function isLink(el: HTMLElement) {
+	if (el.tagName === 'A') return true;
+	if (el.parentElement) {
+		return isLink(el.parentElement);
+	}
+	return false;
+};
diff --git a/packages/frontend/src/ui/embed.vue b/packages/frontend/src/ui/embed.vue
index 42ce7ff7af..227d744c9c 100644
--- a/packages/frontend/src/ui/embed.vue
+++ b/packages/frontend/src/ui/embed.vue
@@ -10,6 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		$style.rootForEmbedPage,
 		{
 			[$style.rounded]: embedRounded,
+			[$style.noBorder]: embedNoBorder,
 		}
 	]"
 	:style="maxHeight > 0 ? { maxHeight: `${maxHeight}px`, '--embedMaxHeight': `${maxHeight}px` } : {}"
@@ -65,6 +66,7 @@ provide('EMBED_PAGE', true);
 //#region Embed Style
 const params = new URLSearchParams(location.search);
 const embedRounded = ref(params.get('rounded') !== 'false');
+const embedNoBorder = ref(params.get('border') === 'false');
 const maxHeight = ref(params.get('maxHeight') ? parseInt(params.get('maxHeight')!) : 0);
 //#endregion
 
@@ -73,7 +75,7 @@ const rootEl = shallowRef<HTMLElement | null>(null);
 
 let previousHeight = 0;
 const resizeObserver = new ResizeObserver(async () => {
-	const height = rootEl.value!.scrollHeight + 2; // border 上下1px
+	const height = rootEl.value!.scrollHeight + (embedNoBorder.value ? 0 : 2); // border 上下1px
 	if (Math.abs(previousHeight - height) < 1) return; // 1px未満の変化は無視
 	postMessageToParentWindow('misskey:embed:changeHeight', {
 		height: (maxHeight.value > 0 && height > maxHeight.value) ? maxHeight.value : height,
@@ -106,6 +108,10 @@ if (_DEV_) document.documentElement.classList.add('embed');
 	&.rounded {
 		border-radius: var(--radius);
 	}
+
+	&.noBorder {
+		border: none;
+	}
 }
 
 .routerViewContainer {