From 33ed6e98a744cce4d1393ccb2dd7aa14445d407d Mon Sep 17 00:00:00 2001
From: Chloe Kudryavtsev <code@toast.bunkerlabs.net>
Date: Thu, 1 Sep 2022 13:20:20 -0400
Subject: [PATCH] client: make emoji picker suggestion count configurable

---
 locales/en-US.yml                               |  4 ++++
 packages/client/src/components/emoji-picker.vue |  6 ++++--
 packages/client/src/pages/settings/general.vue  | 11 +++++++++++
 packages/client/src/store.ts                    |  8 ++++++++
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 7038dab5c..724e75cd0 100644
--- a/locales/en-US.yml
+++ b/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"
diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue
index 03ba29184..567715f16 100644
--- a/packages/client/src/components/emoji-picker.vue
+++ b/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() {
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 74fa0bc92..9be40bdd8 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/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'));
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index 6095e6f22..a592184fe 100644
--- a/packages/client/src/store.ts
+++ b/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',