From 42008d1377757a3c76ee9fd49a17c0cea5e7a850 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 15 Oct 2025 12:59:26 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=83=87=E3=83=83=E3=82=AD?=
 =?UTF-8?q?=E3=81=AE=E3=83=A1=E3=82=A4=E3=83=B3=E3=82=AB=E3=83=A9=E3=83=A0?=
 =?UTF-8?q?=E3=81=AE=E3=83=98=E3=83=83=E3=83=80=E3=82=92=E3=82=AF=E3=83=AA?=
 =?UTF-8?q?=E3=83=83=E3=82=AF=E3=81=97=E3=81=A6=E3=82=82=E3=83=9A=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E4=B8=8A=E9=83=A8/=E4=B8=8B=E9=83=A8=E3=81=AB?=
 =?UTF-8?q?=E3=82=B9=E3=82=AF=E3=83=AD=E3=83=BC=E3=83=AB=E3=81=97=E3=81=AA?=
 =?UTF-8?q?=E3=81=84=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3=20(#1665?=
 =?UTF-8?q?3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): デッキのメインカラムのヘッダをクリックしても上部にスクロールしない問題を修正

* fix

* Update Changelog

* fix lint

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
---
 CHANGELOG.md                                  |  1 +
 packages/frontend/src/ui/deck/column.vue      |  8 ++++++-
 packages/frontend/src/ui/deck/main-column.vue | 24 ++++++++++++++++---
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ab3bdbb58c..96b9554c6a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - 依存関係の更新
 
 ### Client
+- Enhance: デッキのメインカラムのヘッダをクリックしてページ上部/下部にスクロールできるように
 - Fix: カスタム絵文字画面(beta)のaliasesで使用される区切り文字が一致していないのを修正 #15614
 - Fix: バナー画像の幅が表示領域と一致していない問題を修正
 - Fix: 一部のブラウザでバナー画像が上下中央に表示されない問題を修正
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 11937fda24..312ca51c83 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -62,15 +62,18 @@ const props = withDefaults(defineProps<{
 	column: Column;
 	isStacked?: boolean;
 	naked?: boolean;
+	handleScrollToTop?: boolean;
 	menu?: MenuItem[];
 	refresher?: () => Promise<void>;
 }>(), {
 	isStacked: false,
 	naked: false,
+	handleScrollToTop: true,
 });
 
 const emit = defineEmits<{
 	(ev: 'headerWheel', ctx: WheelEvent): void;
+	(ev: 'headerClick', ctx: MouseEvent): void;
 }>();
 
 const body = useTemplateRef('body');
@@ -252,7 +255,10 @@ function onContextmenu(ev: MouseEvent) {
 	os.contextMenu(getMenu(), ev);
 }
 
-function goTop() {
+function goTop(ev: MouseEvent) {
+	emit('headerClick', ev);
+	if (!props.handleScrollToTop) return;
+
 	if (body.value) {
 		body.value.scrollTo({
 			top: 0,
diff --git a/packages/frontend/src/ui/deck/main-column.vue b/packages/frontend/src/ui/deck/main-column.vue
index 78454d2e49..1388cbdc18 100644
--- a/packages/frontend/src/ui/deck/main-column.vue
+++ b/packages/frontend/src/ui/deck/main-column.vue
@@ -4,7 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<XColumn v-if="prefer.s['deck.alwaysShowMainColumn'] || mainRouter.currentRoute.value.name !== 'index'" :column="column" :isStacked="isStacked">
+<XColumn
+	v-if="prefer.s['deck.alwaysShowMainColumn'] || mainRouter.currentRoute.value.name !== 'index'"
+	:column="column"
+	:isStacked="isStacked"
+	:handleScrollToTop="false"
+	@headerClick="onHeaderClick"
+>
 	<template #header>
 		<template v-if="pageMetadata">
 			<i :class="pageMetadata.icon"></i>
@@ -12,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 	</template>
 
-	<div style="height: 100%;">
+	<div ref="rootEl" style="height: 100%;">
 		<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']" @contextmenu.stop="onContextmenu"/>
 		<RouterView v-else @contextmenu.stop="onContextmenu"/>
 	</div>
@@ -20,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { provide, shallowRef, ref } from 'vue';
+import { provide, useTemplateRef, ref } from 'vue';
 import { isLink } from '@@/js/is-link.js';
 import XColumn from './column.vue';
 import type { Column } from '@/deck.js';
@@ -38,6 +44,7 @@ defineProps<{
 }>();
 
 const pageMetadata = ref<null | PageMetadata>(null);
+const rootEl = useTemplateRef('rootEl');
 
 provide(DI.router, mainRouter);
 provideMetadataReceiver((metadataGetter) => {
@@ -69,4 +76,15 @@ function onContextmenu(ev: MouseEvent) {
 		},
 	}], ev);
 }
+
+function onHeaderClick() {
+	if (!rootEl.value) return;
+	const scrollEl = rootEl.value.querySelector<HTMLElement>('._pageScrollable,._pageScrollableReversed');
+	if (scrollEl) {
+		scrollEl.scrollTo({
+			top: 0,
+			behavior: 'smooth',
+		});
+	}
+}
 </script>