From 966127c63e260f017f8bce769c1a2bc8e8d3c6ab Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 22 Sep 2025 19:43:31 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E7=B5=B5=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E3=83=94=E3=83=83=E3=82=AB=E3=83=BC=E3=81=AE=E3=82=B5?=
 =?UTF-8?q?=E3=82=A4=E3=82=BA=E3=82=92=E3=82=88=E3=82=8A=E5=A4=A7=E3=81=8D?=
 =?UTF-8?q?=E3=81=8F=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                   |  1 +
 .../frontend/src/components/MkEmojiPicker.vue  |  8 ++++++++
 .../src/pages/settings/emoji-palette.vue       | 18 +++++++++++-------
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7303c1f507..7adb7ff748 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 - Enhance: チャットの日本語名称がダイレクトメッセージに戻るとともに、ベータ版機能ではなくなりました
 - Enhance: 画像編集にマスクエフェクト(塗りつぶし、ぼかし)を追加
 - Enhance: ウォーターマークにアカウントのQRコードを追加できるように
+- Enhance: 絵文字ピッカーのサイズをより大きくできるように
 - Enhance: 時刻計算のための基準値を一か所で管理するようにし、パフォーマンスを向上
 - Fix: iOSで、デバイスがダークモードだと初回読み込み時にエラーになる問題を修正
 
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 6904c417ce..4ac65a5f45 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -530,6 +530,14 @@ defineExpose({
 		--eachSize: 50px;
 	}
 
+	&.s4 {
+		--eachSize: 55px;
+	}
+
+	&.s5 {
+		--eachSize: 60px;
+	}
+
 	&.w1 {
 		width: calc((var(--eachSize) * 5) + (#{$pad} * 2));
 		--columns: 1fr 1fr 1fr 1fr 1fr;
diff --git a/packages/frontend/src/pages/settings/emoji-palette.vue b/packages/frontend/src/pages/settings/emoji-palette.vue
index 34bf1c14af..9c70461847 100644
--- a/packages/frontend/src/pages/settings/emoji-palette.vue
+++ b/packages/frontend/src/pages/settings/emoji-palette.vue
@@ -64,6 +64,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<option :value="1">{{ i18n.ts.small }}</option>
 								<option :value="2">{{ i18n.ts.medium }}</option>
 								<option :value="3">{{ i18n.ts.large }}</option>
+								<option :value="4">{{ i18n.ts.large }}+</option>
+								<option :value="5">{{ i18n.ts.large }}++</option>
 							</MkRadios>
 						</MkPreferenceContainer>
 					</SearchMarker>
@@ -95,11 +97,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 					<SearchMarker :keywords="['emoji', 'picker', 'style']">
 						<MkPreferenceContainer k="emojiPickerStyle">
-							<MkSelect v-model="emojiPickerStyle" :items="[
-								{ label: i18n.ts.auto, value: 'auto' },
-								{ label: i18n.ts.popup, value: 'popup' },
-								{ label: i18n.ts.drawer, value: 'drawer' },
-							]">
+							<MkSelect
+								v-model="emojiPickerStyle" :items="[
+									{ label: i18n.ts.auto, value: 'auto' },
+									{ label: i18n.ts.popup, value: 'popup' },
+									{ label: i18n.ts.drawer, value: 'drawer' },
+								]"
+							>
 								<template #label><SearchLabel>{{ i18n.ts.style }}</SearchLabel></template>
 								<template #caption>{{ i18n.ts.needReloadToApply }}</template>
 							</MkSelect>
@@ -116,13 +120,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
-import { genId } from '@/utility/id.js';
 import XPalette from './emoji-palette.palette.vue';
+import type { MkSelectItem } from '@/components/MkSelect.vue';
+import { genId } from '@/utility/id.js';
 import MkRadios from '@/components/MkRadios.vue';
 import MkButton from '@/components/MkButton.vue';
 import FormSection from '@/components/form/section.vue';
 import MkSelect from '@/components/MkSelect.vue';
-import type { MkSelectItem } from '@/components/MkSelect.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';