From 641d274d7b90f7c694089b61d6f480ba5e424c2e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 12 Sep 2023 18:50:46 +0800
Subject: [PATCH] Handle very-popular cases

- Shorten number
- Limit avatars to 50 since we have the Accounts sheet now
---
 src/components/notification.jsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/notification.jsx b/src/components/notification.jsx
index 5392eae6..6467eb68 100644
--- a/src/components/notification.jsx
+++ b/src/components/notification.jsx
@@ -1,3 +1,4 @@
+import shortenNumber from '../utils/shorten-number';
 import states from '../utils/states';
 import store from '../utils/store';
 
@@ -169,7 +170,10 @@ function Notification({ notification, instance, reload, isStatic }) {
                   {_accounts?.length > 1 ? (
                     <>
                       <b tabIndex="0" onClick={handleOpenGenericAccounts}>
-                        {_accounts.length} people
+                        <span title={_accounts.length}>
+                          {shortenNumber(_accounts.length)}
+                        </span>{' '}
+                        people
                       </b>{' '}
                     </>
                   ) : (
@@ -203,7 +207,7 @@ function Notification({ notification, instance, reload, isStatic }) {
         )}
         {_accounts?.length > 1 && (
           <p class="avatars-stack">
-            {_accounts.map((account, i) => (
+            {_accounts.slice(0, 50).map((account, i) => (
               <>
                 <a
                   href={account.url}
@@ -219,11 +223,11 @@ function Notification({ notification, instance, reload, isStatic }) {
                     size={
                       _accounts.length <= 10
                         ? 'xxl'
-                        : _accounts.length < 100
+                        : _accounts.length < 20
                         ? 'xl'
-                        : _accounts.length < 1000
+                        : _accounts.length < 30
                         ? 'l'
-                        : _accounts.length < 2000
+                        : _accounts.length < 40
                         ? 'm'
                         : 's' // My god, this person is popular!
                     }