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

@@ -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;

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
+	// When closing, remove our history entry if we're still on our hash
-	// The browser has already handled the history navigation
+	if (window.location.hash === `#folder-${props.pageId}`) {
-	if (!closedByBackButton.value) {
-		// When closing normally (via close button), go back to remove our history entry
 		window.history.back();
 	}
 	emit('closed');
 }
 
-function handlePopState() {
+const popstateHandler = (): void => {
-	// User pressed back button - close the folder page
+	// If the hash is no longer our folder hash, close the page
-	closedByBackButton.value = true;
+	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,
 };
 
-	window.history.pushState(folderPageState, '', window.location.href);
+onMounted(() => {
+	// Push a new history state with a unique hash when the folder page opens
+	window.history.pushState(null, '', `#folder-${props.pageId}`);
 	
-	// Listen for popstate events (browser back button) with high priority
+	// Listen for popstate events (browser back button)
-	window.addEventListener('popstate', handlePopState, true);
+	window.addEventListener('popstate', popstateHandler);
 });
 
 onUnmounted(() => {
 	// Clean up the event listener
-	window.removeEventListener('popstate', handlePopState, true);
+	window.removeEventListener('popstate', popstateHandler);
 });
 
 </script>