From 30de43163e5d6c61b70cab7edb59156ba22bf008 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 24 Sep 2025 14:54:21 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20FolderPageView=E3=81=A7?=
 =?UTF-8?q?=E3=83=96=E3=83=A9=E3=82=A6=E3=82=B6=E3=81=AE=E6=88=BB=E3=82=8B?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E4=BD=BF=E3=81=88=E3=82=8B?=
 =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=ABwip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/boot/common.ts          |  5 +++
 packages/frontend/src/components/MkFolder.vue | 33 +++++++++++++----
 .../frontend/src/components/MkFolderPage.vue  | 21 +++++------
 packages/frontend/src/os.ts                   |  2 -
 packages/frontend/src/utility/folder-page.ts  | 37 +++++++++++++++++++
 5 files changed, 77 insertions(+), 21 deletions(-)
 create mode 100644 packages/frontend/src/utility/folder-page.ts

diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index 4becf32ab5..8e169e2c07 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にfolderPageのhashが含まれる場合は取り除く
+	if (window.location.hash.startsWith('#fp_')) {
+		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/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index 9f5bc8da6c..c0e1801298 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -96,10 +96,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, ref, useTemplateRef } from 'vue';
+import { nextTick, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { prefer } from '@/preferences.js';
 import { getBgColor } from '@/utility/get-bg-color.js';
-import { pageFolderTeleportCount, popup } from '@/os.js';
+import { popup } from '@/os.js';
+import { pageFolderTeleportedIds } from '@/utility/folder-page.js';
+import { genId } from '@/utility/id.js';
 import MkFolderPage from '@/components/MkFolderPage.vue';
 import { deviceKind } from '@/utility/device-kind.js';
 
@@ -123,6 +125,8 @@ const rootEl = useTemplateRef('rootEl');
 const asPage = props.canPage && deviceKind === 'smartphone' && prefer.s['experimental.enableFolderPageView'];
 const bgSame = ref(false);
 const opened = ref(asPage ? false : props.defaultOpen);
+const pageShowing = ref(false);
+const pageId = ref(genId());
 const openedAtLeastOnce = ref(opened.value);
 
 //#region interpolate-sizeに対応していないブラウザ向け（TODO: 主要ブラウザが対応したら消す）
@@ -161,17 +165,24 @@ function afterLeave(el: Element) {
 }
 //#endregion
 
-let pageId = pageFolderTeleportCount.value;
-pageFolderTeleportCount.value += 1000;
-
 async function toggle() {
-	if (asPage && !opened.value) {
-		pageId++;
-		const { dispose } = await popup(MkFolderPage, {
+	if (asPage && !opened.value && !pageShowing.value) {
+		if (pageFolderTeleportedIds.value.includes(pageId.value)) {
+			return;
+		}
+
+		pageShowing.value = true;
+		pageId.value = genId();
+		pageFolderTeleportedIds.value.push(pageId.value);
+
+		const { dispose } = popup(MkFolderPage, {
 			pageId,
+			showing: pageShowing,
 		}, {
 			closed: () => {
 				opened.value = false;
+				pageShowing.value = false;
+				pageFolderTeleportedIds.value = pageFolderTeleportedIds.value.filter((v) => v !== pageId.value);
 				dispose();
 			},
 		});
@@ -186,6 +197,12 @@ async function toggle() {
 	});
 }
 
+watch(pageFolderTeleportedIds, (newVal) => {
+	if (!newVal.includes(pageId.value) && pageShowing.value) {
+		pageShowing.value = false;
+	}
+}, { deep: true });
+
 onMounted(() => {
 	const computedStyle = getComputedStyle(window.document.documentElement);
 	const parentBg = getBgColor(rootEl.value?.parentElement) ?? 'transparent';
diff --git a/packages/frontend/src/components/MkFolderPage.vue b/packages/frontend/src/components/MkFolderPage.vue
index 21700c9dd8..6fc858b408 100644
--- a/packages/frontend/src/components/MkFolderPage.vue
+++ b/packages/frontend/src/components/MkFolderPage.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:leaveToClass="prefer.s.animation ? $style.transition_x_leaveTo : ''"
 	:duration="300" appear @afterLeave="onClosed"
 >
-	<div v-show="showing" :class="[$style.root]" :style="{ zIndex }">
+	<div v-show="actualShowingState" :class="[$style.root]" :style="{ zIndex }">
 		<div :class="[$style.bg]" :style="{ zIndex }"></div>
 		<div :class="[$style.content]" :style="{ zIndex }">
 			<div :class="$style.header">
@@ -27,31 +27,30 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { ref, computed } from 'vue';
 import { claimZIndex } from '@/os.js';
 import { prefer } from '@/preferences.js';
 
-const props = withDefaults(defineProps<{
-	pageId: number,
-}>(), {
-	pageId: 0,
-});
+const props = defineProps<{
+	pageId: string;
+	showing: boolean;
+}>();
 
 const emit = defineEmits<{
-	(_: 'closed'): void
+	(_: 'closed'): void;
 }>();
 
 const zIndex = claimZIndex('low');
-const showing = ref(true);
+const manualShowing = ref(true);
+const actualShowingState = computed(() => props.showing && manualShowing.value);
 
 function closePage() {
-	showing.value = false;
+	manualShowing.value = false;
 }
 
 function onClosed() {
 	emit('closed');
 }
-
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index 6c5f04c6b5..c3c0615a84 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -803,5 +803,3 @@ export function launchUploader(
 		});
 	});
 }
-
-export const pageFolderTeleportCount = ref(0);
diff --git a/packages/frontend/src/utility/folder-page.ts b/packages/frontend/src/utility/folder-page.ts
new file mode 100644
index 0000000000..410b28a5d2
--- /dev/null
+++ b/packages/frontend/src/utility/folder-page.ts
@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { ref,  watch } from 'vue';
+
+const FOLDER_PAGE_HASH_PREFIX = 'fp_';
+
+export const pageFolderTeleportedIds = ref<string[]>([]);
+
+window.addEventListener('popstate', () => {
+	const newHash = location.hash.split('#')[1] ?? '';
+	let newHashIds: string[] | null = null;
+
+	if (newHash.startsWith(FOLDER_PAGE_HASH_PREFIX)) {
+		newHashIds = newHash
+			.slice(FOLDER_PAGE_HASH_PREFIX.length)
+			.split(',');
+	}
+
+	if (newHashIds === null || newHashIds.length === 0) {
+		pageFolderTeleportedIds.value = [];
+	}
+
+	if (newHashIds !== null) {
+		pageFolderTeleportedIds.value = newHashIds;
+	}
+});
+
+watch(pageFolderTeleportedIds, (newVal) => {
+	const newHash = newVal.join(',');
+	const expectedHash = newHash ? `#${FOLDER_PAGE_HASH_PREFIX}${newHash}` : location.pathname + location.search;
+	if (location.hash !== expectedHash) {
+		history.pushState(null, '', expectedHash);
+	}
+}, { immediate: true, deep: true });