client: make emoji picker suggestion count configurable

locales/en-US.yml

@@ -987,6 +987,10 @@ _serverDisconnectedBehavior:
   reload: "Automatically reload"
   dialog: "Show warning dialog"
   quiet: "Show unobtrusive warning"
+maxCustomEmojiPicker: "Maximum suggested custom emoji in picker"
+maxCustomEmojiPickerDescription: "0 for unlimited"
+maxUnicodeEmojiPicker: "Maximum suggested unicode emoji in picker"
+maxUnicodeEmojiPickerDescription: "0 for unlimited"
 _channel:
   create: "Create channel"
   edit: "Edit channel"

packages/client/src/components/emoji-picker.vue

@@ -112,6 +112,8 @@ const {
 	reactionPickerSize,
 	reactionPickerWidth,
 	reactionPickerHeight,
+	maxCustomEmojiPicker,
+	maxUnicodeEmojiPicker,
 	disableShowingAnimatedImages,
 	recentlyUsedEmojis,
 } = defaultStore.reactiveState;
@@ -150,8 +152,8 @@ watch(q, () => {
 		return;
 	}
 	
-	searchResultCustom.value = emojiSearch(instance.emojis, 10, query);
-	searchResultUnicode.value = emojiSearch(emojilist, 10, query);
+	searchResultCustom.value = emojiSearch(instance.emojis, maxCustomEmojiPicker.value, query);
+	searchResultUnicode.value = emojiSearch(emojilist, maxUnicodeEmojiPicker.value, query);
 });
 
 function focus() {

packages/client/src/pages/settings/general.vue

@@ -35,6 +35,15 @@
 			<option value="dialog">{{ i18n.ts._serverDisconnectedBehavior.dialog }}</option>
 			<option value="quiet">{{ i18n.ts._serverDisconnectedBehavior.quiet }}</option>
 		</FormSelect>
+
+		<FormRange v-model="maxCustomEmojiPicker" :min="0" :max="24" :step="1" class="_formBlock">
+			<template #label>{{ i18n.ts.maxCustomEmojiPicker }}</template>
+			<template #caption>{{ i18n.ts.maxCustomEmojiPickerDescription }}</template>
+		</FormRange>
+		<FormRange v-model="maxUnicodeEmojiPicker" :min="0" :max="24" :step="1" class="_formBlock">
+			<template #label>{{ i18n.ts.maxUnicodeEmojiPicker }}</template>
+			<template #caption>{{ i18n.ts.maxUnicodeEmojiPickerDescription }}</template>
+		</FormRange>
 	</FormSection>
 
 	<FormSection>
@@ -124,6 +133,8 @@ async function reloadAsk() {
 
 const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDeviceKind'));
 const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior'));
+const maxCustomEmojiPicker = computed(defaultStore.makeGetterSetter('maxCustomEmojiPicker'));
+const maxUnicodeEmojiPicker = computed(defaultStore.makeGetterSetter('maxUnicodeEmojiPicker'));
 const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v));
 const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
 const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));

packages/client/src/store.ts

@@ -108,6 +108,14 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 'quiet' as 'quiet' | 'reload' | 'dialog',
 	},
+	maxCustomEmojiPicker: {
+		where: 'device',
+		default: 10,
+	},
+	maxUnicodeEmojiPicker: {
+		where: 'device',
+		default: 10,
+	},
 	nsfw: {
 		where: 'device',
 		default: 'respect' as 'respect' | 'force' | 'ignore',