From bcb93aec14650d5213f2c44de11a875c28308081 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Fri, 16 Sep 2022 17:21:09 +0200
Subject: [PATCH] client: make emoji amount slider more intuitive

Changelog: Changed
---
 locales/en-US.yml                             |  3 +-
 .../client/src/pages/settings/general.vue     | 29 +++++++++++++++----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 75317fbe6..094440985 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -851,6 +851,7 @@ noEmailServerWarning: "Email server not configured."
 thereIsUnresolvedAbuseReportWarning: "There are unsolved reports."
 recommended: "Recommended"
 check: "Check"
+unlimited: "Unlimited"
 _emailUnavailable:
   used: "This email address is already being used"
   format: "The format of this email address is invalid"
@@ -982,9 +983,7 @@ _serverDisconnectedBehavior:
   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/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 845d4f461..137ec8c94 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -35,13 +35,11 @@
 			<option value="quiet">{{ i18n.ts._serverDisconnectedBehavior.quiet }}</option>
 		</FormSelect>
 
-		<FormRange v-model="maxCustomEmojiPicker" :min="0" :max="24" :step="1" class="_formBlock">
+		<FormRange v-model="maxCustomEmojiPicker" :min="1" :max="25" :step="1" :text-converter="emojiCountConverter" 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">
+		<FormRange v-model="maxUnicodeEmojiPicker" :min="1" :max="25" :step="1" :text-converter="emojiCountConverter" class="_formBlock">
 			<template #label>{{ i18n.ts.maxUnicodeEmojiPicker }}</template>
-			<template #caption>{{ i18n.ts.maxUnicodeEmojiPickerDescription }}</template>
 		</FormRange>
 	</FormSection>
 
@@ -128,8 +126,6 @@ async function reloadAsk(): Promise<void> {
 
 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'));
@@ -148,6 +144,27 @@ const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfin
 const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
 const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
 
+/*
+For these two, the sliders go to 25, but 25 should be mapped to "unlimited".
+"Unlimited" is stored internally as 0 so the modulo is necessary.
+*/
+let maxCustomEmojiPicker = $ref(defaultStore.state.maxCustomEmojiPicker);
+watch($$(maxCustomEmojiPicker), () => {
+	defaultStore.set('maxCustomEmojiPicker', maxCustomEmojiPicker % 25);
+});
+let maxUnicodeEmojiPicker = $ref(defaultStore.state.maxUnicodeEmojiPicker);
+watch($$(maxUnicodeEmojiPicker), () => {
+	defaultStore.set('maxUnicodeEmojiPicker', maxUnicodeEmojiPicker % 25);
+});
+
+function emojiCountConverter(n: number): string {
+	if (n === 25) {
+		return i18n.ts.unlimited;
+	} else {
+		return n.toString();
+	}
+}
+
 watch(lang, () => {
 	localStorage.setItem('lang', lang.value as string);
 	localStorage.removeItem('locale');