enhance(frontend): 絵文字ピッカーのサイズをより大きくできるように

CHANGELOG.md

@@ -11,6 +11,7 @@
 - Enhance: チャットの日本語名称がダイレクトメッセージに戻るとともに、ベータ版機能ではなくなりました
 - Enhance: 画像編集にマスクエフェクト(塗りつぶし、ぼかし)を追加
 - Enhance: ウォーターマークにアカウントのQRコードを追加できるように
+- Enhance: 絵文字ピッカーのサイズをより大きくできるように
 - Enhance: 時刻計算のための基準値を一か所で管理するようにし、パフォーマンスを向上
 - Fix: iOSで、デバイスがダークモードだと初回読み込み時にエラーになる問題を修正
 

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;

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="[
+							<MkSelect
-								{ label: i18n.ts.auto, value: 'auto' },
+								v-model="emojiPickerStyle" :items="[
-								{ label: i18n.ts.popup, value: 'popup' },
+									{ label: i18n.ts.auto, value: 'auto' },
-								{ label: i18n.ts.drawer, value: 'drawer' },
+									{ 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';