Close modals on browser back

packages/client/src/components/MkMediaList.vue

@@ -108,6 +108,7 @@ onMounted(() => {
 				  },
 		imageClickAction: "close",
 		tapAction: "toggle-controls",
+		preloadFirstSlide: false,
 		pswpModule: PhotoSwipe,
 	});
 
@@ -162,7 +163,22 @@ onMounted(() => {
 		});
 	});
 
+	lightbox.on("afterInit", () => {
+		history.pushState(null, "", location.href);
+		addEventListener("popstate", close);
+	})
+	lightbox.on("close", () => {
+		removeEventListener("popstate", close);
+		history.back();
+	})
+
 	lightbox.init();
+
+	function close() {
+		removeEventListener("popstate", close);
+		history.forward();
+		lightbox.pswp.close();
+	}
 });
 
 const previewable = (file: misskey.entities.DriveFile): boolean => {

packages/client/src/components/MkModal.vue

@@ -74,7 +74,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, watch, provide } from "vue";
+import { nextTick, onMounted, watch, provide, onUnmounted } from "vue";
 import * as os from "@/os";
 import { isTouchUsing } from "@/scripts/touch";
 import { defaultStore } from "@/store";
@@ -176,7 +176,11 @@ let transitionDuration = $computed(() =>
 let contentClicking = false;
 
 const focusedElement = document.activeElement;
-function close(opts: { useSendAnimation?: boolean } = {}) {
+function close(ev, opts: { useSendAnimation?: boolean } = {}) {
+	removeEventListener("popstate", close);
+	if (props.preferType == "dialog") {
+		history.forward();
+	}
 	if (opts.useSendAnimation) {
 		useSendAnime = true;
 	}
@@ -354,6 +358,10 @@ const onOpened = () => {
 		},
 		{ passive: true }
 	);
+	if (props.preferType == "dialog") {
+		history.pushState(null, "", location.href);
+	}
+	addEventListener("popstate", close);
 };
 
 onMounted(() => {
@@ -379,6 +387,12 @@ onMounted(() => {
 		}).observe(content!);
 	});
 });
+onUnmounted(() => {
+	removeEventListener("popstate", close);
+	if (props.preferType == "dialog") {
+		history.back();
+	}
+});
 
 defineExpose({
 	close,