From fc59574f58864b49027e36e3619b15e5148ee469 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 10 Jul 2026 18:49:50 +0900
Subject: [PATCH] Update MkImageGallery.vue

---
 .../src/components/MkImageGallery.vue         | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/packages/frontend/src/components/MkImageGallery.vue b/packages/frontend/src/components/MkImageGallery.vue
index d671c07832..319a4617a7 100644
--- a/packages/frontend/src/components/MkImageGallery.vue
+++ b/packages/frontend/src/components/MkImageGallery.vue
@@ -37,6 +37,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 					/>
 				</div>
 			</div>
+
+			<button v-if="!isTouchUsing && currentIndex > 0" class="_button" :class="[$style.prevButton]" @click="onPrev"><div :class="$style.buttonIcon"><i class="ti ti-arrow-left"></i></div></button>
+			<button v-if="!isTouchUsing && currentIndex < images.length - 1" class="_button" :class="[$style.nextButton]" @click="onNext"><div :class="$style.buttonIcon"><i class="ti ti-arrow-right"></i></div></button>
 		</div>
 	</div>
 </Transition>
@@ -49,6 +52,7 @@ import type { Image } from './MkImageGallery.item.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
+import { isTouchUsing } from '@/utility/touch.js';
 
 const props = withDefaults(defineProps<{
 	defaultIndex?: number;
@@ -170,6 +174,8 @@ function onAfterLeave() {
 
 .main {
 	position: absolute;
+	width: 100%;
+	height: 100%;
 }
 
 .items {
@@ -193,4 +199,30 @@ function onAfterLeave() {
 	contain: strict;
 	flex-shrink: 0;
 }
+
+.prevButton,
+.nextButton {
+	position: absolute;
+	top: 0;
+	width: 70px;
+	height: 100%;
+	display: grid;
+	place-items: center;
+}
+.prevButton {
+	left: 0;
+}
+.nextButton {
+	right: 0;
+}
+
+.buttonIcon {
+	width: 45px;
+	height: 45px;
+	display: grid;
+	place-items: center;
+	background-color: rgba(0, 0, 0, 0.3);
+	border-radius: 100%;
+	color: #fff;
+}
 </style>