✨(frontend) add UI support for reaction limit on comments

Prevent users from adding more reactions once the per-message
limit has been exceeded. It Disables reaction buttons
when limit is reached

Signed-off-by: Mohamed El Amine BOUKERFA <boukerfa.ma@gmail.com>

Author: maboukerfa

src/frontend/apps/impress/src/core/config/api/useConfig.tsx

@@ -48,6 +48,7 @@ export interface ConfigResponse {
   MEDIA_BASE_URL?: string;
   POSTHOG_KEY?: PostHogConf;
   SENTRY_DSN?: string;
+  REACTIONS_MAX_PER_COMMENT: number;
   TRASHBIN_CUTOFF_DAYS?: number;
   theme_customization?: ThemeCustomization;
 }

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/DocsThreadStoreAuth.tsx

@@ -6,6 +6,7 @@ export class DocsThreadStoreAuth extends ThreadStoreAuth {
   constructor(
     private readonly userId: string,
     public canSee: boolean,
+    private readonly maxReactions: number = 10,
   ) {
     super();
   }
@@ -68,13 +69,27 @@ export class DocsThreadStoreAuth extends ThreadStoreAuth {
     }
 
     if (!emoji) {
-      return true;
+      return comment.reactions.length < this.maxReactions;
     }
 
-    return !comment.reactions.some(
+    const hasReactedWithEmoji = comment.reactions.some(
       (reaction) =>
         reaction.emoji === emoji && reaction.userIds.includes(this.userId),
     );
+
+    if (hasReactedWithEmoji) {
+      return false;
+    }
+
+    const reactionExists = comment.reactions.some(
+      (reaction) => reaction.emoji === emoji,
+    );
+
+    if (reactionExists) {
+      return true;
+    }
+
+    return comment.reactions.length < this.maxReactions;
   }
 
   canDeleteReaction(comment: ClientCommentData, emoji?: string): boolean {

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/useComments.ts

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useCunninghamTheme } from '@/cunningham';
 import { User, avatarUrlFromName } from '@/features/auth';
 import { Doc, useProviderStore } from '@/features/docs/doc-management';
+import { useConfig } from '@/core';
 
 import { DocsThreadStore } from './DocsThreadStore';
 import { DocsThreadStoreAuth } from './DocsThreadStoreAuth';
@@ -16,6 +17,7 @@ export function useComments(
   const { provider } = useProviderStore();
   const { t } = useTranslation();
   const { themeTokens } = useCunninghamTheme();
+  const { data: config } = useConfig();
 
   const threadStore = useMemo(() => {
     return new DocsThreadStore(
@@ -24,9 +26,16 @@ export function useComments(
       new DocsThreadStoreAuth(
         encodeURIComponent(user?.full_name || ''),
         canComment,
+        config?.REACTIONS_MAX_PER_COMMENT,
       ),
     );
-  }, [docId, canComment, provider?.awareness, user?.full_name]);
+  }, [
+    docId,
+    canComment,
+    provider?.awareness,
+    user?.full_name,
+    config?.REACTIONS_MAX_PER_COMMENT,
+  ]);
 
   useEffect(() => {
     return () => {