From fb864ecd6cd4a84762ca913f1ce184b07e3174fb Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 16 Sep 2025 03:46:10 +0000
Subject: [PATCH] Refine browser back button implementation using hash-based
 approach

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
---
 packages/frontend/src/boot/common.ts          |  5 +++
 .../frontend/src/components/MkFolderPage.vue  | 33 ++++++++-----------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index 574012ff78..32b97b303a 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@@ -106,6 +106,11 @@ export async function common(createVue: () => Promise<App<Element>>) {
 		window.history.replaceState(null, '', window.location.href.replace('#pswp', ''));
 	}
 
+	// URLに#folder-を含む場合は取り除く（FolderPageView用）
+	if (window.location.hash.startsWith('#folder-')) {
+		window.history.replaceState(null, '', window.location.href.replace(window.location.hash, ''));
+	}
+
 	// 一斉リロード
 	reloadChannel.addEventListener('message', path => {
 		if (path !== null) window.location.href = path;
diff --git a/packages/frontend/src/components/MkFolderPage.vue b/packages/frontend/src/components/MkFolderPage.vue
index c3279e9eb8..7b03cce9c5 100644
--- a/packages/frontend/src/components/MkFolderPage.vue
+++ b/packages/frontend/src/components/MkFolderPage.vue
@@ -43,44 +43,37 @@ const emit = defineEmits<{
 
 const zIndex = claimZIndex('low');
 const showing = ref(true);
-const closedByBackButton = ref(false);
 
 function closePage() {
 	showing.value = false;
 }
 
 function onClosed() {
-	// Don't manipulate history if we're closing due to back button
-	// The browser has already handled the history navigation
-	if (!closedByBackButton.value) {
-		// When closing normally (via close button), go back to remove our history entry
+	// When closing, remove our history entry if we're still on our hash
+	if (window.location.hash === `#folder-${props.pageId}`) {
 		window.history.back();
 	}
 	emit('closed');
 }
 
-function handlePopState() {
-	// User pressed back button - close the folder page
-	closedByBackButton.value = true;
-	closePage();
-}
+const popstateHandler = (): void => {
+	// If the hash is no longer our folder hash, close the page
+	if (window.location.hash !== `#folder-${props.pageId}`) {
+		closePage();
+	}
+};
 
 onMounted(() => {
-	// Push a new history state when the folder page opens
-	const folderPageState = {
-		folderPageId: props.pageId,
-		isFolderPage: true,
-	};
+	// Push a new history state with a unique hash when the folder page opens
+	window.history.pushState(null, '', `#folder-${props.pageId}`);
 	
-	window.history.pushState(folderPageState, '', window.location.href);
-	
-	// Listen for popstate events (browser back button) with high priority
-	window.addEventListener('popstate', handlePopState, true);
+	// Listen for popstate events (browser back button)
+	window.addEventListener('popstate', popstateHandler);
 });
 
 onUnmounted(() => {
 	// Clean up the event listener
-	window.removeEventListener('popstate', handlePopState, true);
+	window.removeEventListener('popstate', popstateHandler);
 });
 
 </script>