From c07fdcb25ce7f88ac0b4edefbdcb39e994713ed4 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 20 Aug 2023 05:52:53 -0700
Subject: [PATCH] Show different strings based on query length

If the query is less than 3 characters, we can prompt the user to type more. Otherwise, a result wasn't found.
---
 components/MentionList/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/MentionList/index.tsx b/components/MentionList/index.tsx
index 499fb89a..e90d6336 100644
--- a/components/MentionList/index.tsx
+++ b/components/MentionList/index.tsx
@@ -11,7 +11,7 @@ import classNames from 'classnames'
 
 import styles from './index.module.scss'
 
-type Props = Pick<SuggestionProps, 'items' | 'command'>
+type Props = Pick<SuggestionProps, 'items' | 'command' | 'query'>
 
 export type MentionRef = {
   onKeyDown: (props: { event: KeyboardEvent }) => boolean
@@ -113,7 +113,9 @@ export const MentionList = forwardRef<MentionRef, Props>(
           ))
         ) : (
           <div className={styles.noResult}>
-            {t('search.errors.no_results_generic')}
+            {props.query.length < 3
+              ? t('search.errors.type')
+              : t('search.errors.no_results_generic')}
           </div>
         )}
       </div>