enhance(frontend): 絵文字パレット設定に説明文を追加 (#16750)

* enhance(frontend): 絵文字パレット設定に説明文を追加

* tweak message

locales/index.d.ts

@@ -5997,6 +5997,10 @@ export interface Locale extends ILocale {
          * ページのタブバーを下部に表示
          */
         "showPageTabBarBottom": string;
+        /**
+         * 絵文字ピッカーに固定表示するプリセットをパレットとして登録したり、ピッカーの表示方法をカスタマイズしたりできます。
+         */
+        "emojiPaletteBanner": string;
         "_chat": {
             /**
              * 送信者の名前を表示

locales/ja-JP.yml

@@ -1503,6 +1503,7 @@ _settings:
   showUrlPreview: "URLプレビューを表示する"
   showAvailableReactionsFirstInNote: "利用できるリアクションを先頭に表示"
   showPageTabBarBottom: "ページのタブバーを下部に表示"
+  emojiPaletteBanner: "絵文字ピッカーに固定表示するプリセットをパレットとして登録したり、ピッカーの表示方法をカスタマイズしたりできます。"
 
   _chat:
     showSenderName: "送信者の名前を表示"

packages/frontend/src/pages/settings/emoji-palette.vue

@@ -6,6 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <SearchMarker path="/settings/emoji-palette" :label="i18n.ts.emojiPalette" :keywords="['emoji', 'palette']" icon="ti ti-mood-happy">
 	<div class="_gaps_m">
+		<MkFeatureBanner icon="/client-assets/artist_palette_3d.png" color="#ff9100">
+			<SearchText>{{ i18n.ts._settings.emojiPaletteBanner }}</SearchText>
+		</MkFeatureBanner>
+
 		<FormSection first>
 			<template #label>{{ i18n.ts._emojiPalette.palettes }}</template>
 
@@ -123,6 +127,7 @@ import { computed, ref, watch } from 'vue';
 import XPalette from './emoji-palette.palette.vue';
 import type { MkSelectItem } from '@/components/MkSelect.vue';
 import { genId } from '@/utility/id.js';
+import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkButton from '@/components/MkButton.vue';
 import FormSection from '@/components/form/section.vue';