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

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

* fix

* Update Changelog

* fix lint

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

CHANGELOG.md

@@ -4,6 +4,7 @@
 - 依存関係の更新
 
 ### Client
+- Enhance: デッキのメインカラムのヘッダをクリックしてページ上部/下部にスクロールできるように
 - Fix: カスタム絵文字画面(beta)のaliasesで使用される区切り文字が一致していないのを修正 #15614
 - Fix: バナー画像の幅が表示領域と一致していない問題を修正
 - Fix: 一部のブラウザでバナー画像が上下中央に表示されない問題を修正

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,

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>