From b95e4841f9362b0813796c72b59fbe39dc9d81b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 3 Aug 2026 21:20:46 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20MkLightbox:=20=E3=83=94?=
 =?UTF-8?q?=E3=82=AF=E3=82=BB=E3=83=AB=E3=82=A2=E3=83=BC=E3=83=88=E6=8B=A1?=
 =?UTF-8?q?=E5=A4=A7=E3=83=A2=E3=83=BC=E3=83=89=E3=82=92=E8=BF=BD=E5=8A=A0?=
 =?UTF-8?q?=20(#17845)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* enhance(frontend): MkLightbox: ピクセルアート拡大モードを追加

* Update Changelog

* fix lint

* fix typo

* fix
---
 CHANGELOG.md                                      |  1 +
 locales/ja-JP.yml                                 |  1 +
 .../frontend/src/components/MkLightbox.item.vue   | 15 ++++++++++++++-
 packages/frontend/src/components/MkLightbox.vue   |  3 +++
 packages/i18n/src/autogen/locale.ts               |  4 ++++
 5 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99116c2a0e..e3dfd4cd17 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 -
 
 ### Client
+- Enhance: 画像ビューワーで、ピクセルアートの拡大表示に適したモードを追加（画像ビューワー起動時に画面上の詳細メニューから有効化できます）
 - Fix: 画像の表示時にBlurhashが描画されない場合があるのを修正
 
 ### Server
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 2f6c912044..a492078400 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1421,6 +1421,7 @@ append: "末尾に追加"
 prepend: "先頭に追加"
 urlPreviewSensitiveList: "サムネイルの表示を制限するURL"
 urlPreviewSensitiveListDescription: "スペースで区切るとAND指定になり、改行で区切るとOR指定になります。スラッシュで囲むと正規表現になります。一致した場合、サムネイルが表示されなくなります。"
+pixelatedZoom: "ピクセルアート拡大モード"
 
 _imageEditing:
   _vars:
diff --git a/packages/frontend/src/components/MkLightbox.item.vue b/packages/frontend/src/components/MkLightbox.item.vue
index d358f20767..c75c3402a7 100644
--- a/packages/frontend/src/components/MkLightbox.item.vue
+++ b/packages/frontend/src/components/MkLightbox.item.vue
@@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template v-if="activated">
 						<img
 							v-if="content.type === 'image'"
-							:class="$style.content"
+							:class="[$style.content, { [$style.pixelatedZoom]: pixelatedZoom }]"
 							:src="content.url"
 							:alt="content.file?.comment ?? undefined"
 							draggable="false"
@@ -208,6 +208,10 @@ const emit = defineEmits<{
 	(ev: 'cancelHorizontalSwipe'): void;
 }>();
 
+// 一回のビューワー操作内では状態を維持するためにmodelで親に伝えて親で状態を保持する
+// TODO: drivefileのproperties側にピクセルアートかどうかのフラグを立ててそちらを元にデフォルトの挙動を決めるようにする
+const pixelatedZoom = defineModel<boolean>('pixelatedZoom', { required: true });
+
 const rootEl = useTemplateRef('rootEl');
 const mainEl = useTemplateRef('mainEl');
 const videoEl = useTemplateRef('videoEl');
@@ -880,6 +884,11 @@ function openMenu(ev: PointerEvent) {
 	});
 
 	menu.push({
+		type: 'switch',
+		text: i18n.ts.pixelatedZoom,
+		icon: 'ti ti-grain',
+		ref: pixelatedZoom,
+	}, {
 		text: i18n.ts.hide,
 		icon: 'ti ti-eye-off',
 		action: () => {
@@ -956,6 +965,10 @@ defineExpose({
 	object-fit: contain;
 }
 
+.pixelatedZoom {
+	image-rendering: pixelated;
+}
+
 .video {
 	display: block;
 	user-select: none;
diff --git a/packages/frontend/src/components/MkLightbox.vue b/packages/frontend/src/components/MkLightbox.vue
index ae40c7a612..9dc90fc474 100644
--- a/packages/frontend/src/components/MkLightbox.vue
+++ b/packages/frontend/src/components/MkLightbox.vue
@@ -28,6 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div v-for="(content, i) in contents" :key="content.url" ref="itemEl" :class="$style.item">
 					<XItem
 						:ref="(comp) => { items.set(i, comp as InstanceType<typeof XItem>); }"
+						v-model:pixelatedZoom="pixelatedZoom"
 						:content="content"
 						:initiallyOpened="i === (props.defaultIndex ?? 0)"
 						:activated="activatedIndexes.has(i)"
@@ -72,6 +73,8 @@ const activatedIndexes = ref(new Set<number>());
 const items = new Map<number, InstanceType<typeof XItem> | null>();
 const currentIndex = ref(props.defaultIndex ?? 0);
 
+const pixelatedZoom = ref(false);
+
 watch(currentIndex, (newIndex, oldIndex) => {
 	activatedIndexes.value.add(newIndex);
 
diff --git a/packages/i18n/src/autogen/locale.ts b/packages/i18n/src/autogen/locale.ts
index 5103f3845f..a314e52a84 100644
--- a/packages/i18n/src/autogen/locale.ts
+++ b/packages/i18n/src/autogen/locale.ts
@@ -5699,6 +5699,10 @@ export interface Locale extends ILocale {
      * スペースで区切るとAND指定になり、改行で区切るとOR指定になります。スラッシュで囲むと正規表現になります。一致した場合、サムネイルが表示されなくなります。
      */
     "urlPreviewSensitiveListDescription": string;
+    /**
+     * ピクセルアート拡大モード
+     */
+    "pixelatedZoom": string;
     "_imageEditing": {
         "_vars": {
             /**