From a412253928eb2907137b391e290f7ed889810703 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 11 Jul 2026 22:51:57 +0900
Subject: [PATCH] =?UTF-8?q?enhance:=20=E3=83=96=E3=83=A9=E3=82=A6=E3=82=B6?=
 =?UTF-8?q?=E3=81=AE=E6=88=BB=E3=82=8B=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=A7?=
 =?UTF-8?q?=E9=96=89=E3=81=98=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/boot/common.ts          |  5 ++++
 .../src/components/MkImageGallery.item.vue    |  1 +
 .../src/components/MkImageGallery.vue         | 26 ++++++++++++++++++-
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index 4c670a44f1..4c5e601dae 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@@ -99,6 +99,11 @@ export async function common(createVue: () => Promise<App<Element>>) {
 	// タッチデバイスでCSSの:hoverを機能させる
 	window.document.addEventListener('touchend', () => {}, { passive: true });
 
+	// URLに#pswpを含む場合は取り除く
+	if (window.location.hash === '#pswp') {
+		window.history.replaceState(null, '', window.location.href.replace('#pswp', ''));
+	}
+
 	// 一斉リロード
 	reloadChannel.addEventListener('message', path => {
 		if (path !== null) window.location.href = path;
diff --git a/packages/frontend/src/components/MkImageGallery.item.vue b/packages/frontend/src/components/MkImageGallery.item.vue
index 756099e0f2..33a46ea938 100644
--- a/packages/frontend/src/components/MkImageGallery.item.vue
+++ b/packages/frontend/src/components/MkImageGallery.item.vue
@@ -796,6 +796,7 @@ function onDeactive() {
 defineExpose({
 	onActive,
 	onDeactive,
+	closeThis,
 });
 </script>
 
diff --git a/packages/frontend/src/components/MkImageGallery.vue b/packages/frontend/src/components/MkImageGallery.vue
index 9201f5b4ae..0a3406272d 100644
--- a/packages/frontend/src/components/MkImageGallery.vue
+++ b/packages/frontend/src/components/MkImageGallery.vue
@@ -48,7 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, nextTick, onBeforeUnmount } from 'vue';
+import { ref, watch, nextTick, onBeforeUnmount, onMounted } from 'vue';
 import XItem from './MkImageGallery.item.vue';
 import type { Content } from './MkImageGallery.item.vue';
 import type { Keymap } from '@/utility/hotkey.js';
@@ -133,6 +133,14 @@ function scrollToCurrentIndex() {
 	contentsOffset.value = targetOffset;
 }
 
+function close() {
+	if (items.has(currentIndex.value)) {
+		items.get(currentIndex.value)!.closeThis();
+	} else {
+		showing.value = false;
+	}
+}
+
 function onSlideTransitionFinished(ev: TransitionEvent) {
 	if (ev.propertyName !== 'translate') return;
 	enableSlideTransition.value = false;
@@ -169,6 +177,17 @@ function onAfterLeave() {
 	emit('closed');
 }
 
+function onPopState() {
+	if (showing.value) {
+		close();
+	}
+}
+
+onMounted(() => {
+	window.history.pushState(null, '', '#pswp');
+	window.addEventListener('popstate', onPopState);
+});
+
 const keymap = {
 	'esc': {
 		allowRepeat: true,
@@ -186,6 +205,11 @@ const keymap = {
 
 onBeforeUnmount(() => {
 	window.removeEventListener('resize', onResize);
+	window.removeEventListener('popstate', onPopState);
+});
+
+defineExpose({
+	close,
 });
 </script>