From 5862ccc50869cd1e02d435f9530d3c258457204b Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Fri, 10 Nov 2023 12:09:14 -0700
Subject: [PATCH] provide default visibility state for comments tied to
 notifications

not just for when they're approved/rejected
---
 .../NotificationCommentContainer.tsx          | 78 ++++++++++++-------
 1 file changed, 52 insertions(+), 26 deletions(-)

diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationCommentContainer.tsx b/client/src/core/client/stream/tabs/Notifications/NotificationCommentContainer.tsx
index 701d8636fa..cfb6c7bb89 100644
--- a/client/src/core/client/stream/tabs/Notifications/NotificationCommentContainer.tsx
+++ b/client/src/core/client/stream/tabs/Notifications/NotificationCommentContainer.tsx
@@ -29,35 +29,61 @@ const NotificationCommentContainer: FunctionComponent<Props> = ({
     setIsOpen(!isOpen);
   }, [setIsOpen, isOpen]);
 
+  const hasBeenModerated =
+    status === GQLCOMMENT_STATUS.APPROVED ||
+    status === GQLCOMMENT_STATUS.REJECTED;
+
   return (
     <>
-      {status === GQLCOMMENT_STATUS.APPROVED && isOpen && (
-        <button className={styles.toggle} onClick={onToggleOpenClosed}>
-          <Localized id="notification-comment-toggle-approved-open">
-            Approved comment
-          </Localized>
-        </button>
-      )}
-      {status === GQLCOMMENT_STATUS.APPROVED && !isOpen && (
-        <button className={styles.toggle} onClick={onToggleOpenClosed}>
-          <Localized id="notification-comment-toggle-approved-closed">
-            + Approved comment
-          </Localized>
-        </button>
-      )}
-      {status === GQLCOMMENT_STATUS.REJECTED && isOpen && (
-        <button className={styles.toggle} onClick={onToggleOpenClosed}>
-          <Localized id="notification-comment-toggle-rejected-open">
-            Rejected comment
-          </Localized>
-        </button>
+      {hasBeenModerated && (
+        <>
+          {status === GQLCOMMENT_STATUS.APPROVED && isOpen && (
+            <button className={styles.toggle} onClick={onToggleOpenClosed}>
+              <Localized id="notification-comment-toggle-approved-open">
+                Approved comment
+              </Localized>
+            </button>
+          )}
+          {status === GQLCOMMENT_STATUS.APPROVED && !isOpen && (
+            <button className={styles.toggle} onClick={onToggleOpenClosed}>
+              <Localized id="notification-comment-toggle-approved-closed">
+                + Approved comment
+              </Localized>
+            </button>
+          )}
+          {status === GQLCOMMENT_STATUS.REJECTED && isOpen && (
+            <button className={styles.toggle} onClick={onToggleOpenClosed}>
+              <Localized id="notification-comment-toggle-rejected-open">
+                Rejected comment
+              </Localized>
+            </button>
+          )}
+          {status === GQLCOMMENT_STATUS.REJECTED && !isOpen && (
+            <button className={styles.toggle} onClick={onToggleOpenClosed}>
+              <Localized id="notification-comment-toggle-rejected-closed">
+                + Rejected comment
+              </Localized>
+            </button>
+          )}
+        </>
       )}
-      {status === GQLCOMMENT_STATUS.REJECTED && !isOpen && (
-        <button className={styles.toggle} onClick={onToggleOpenClosed}>
-          <Localized id="notification-comment-toggle-rejected-closed">
-            + Rejected comment
-          </Localized>
-        </button>
+      {!hasBeenModerated && (
+        <>
+          {isOpen && (
+            <button className={styles.toggle} onClick={onToggleOpenClosed}>
+              <Localized id="notification-comment-toggle-default-open">
+                Comment
+              </Localized>
+            </button>
+          )}
+          {!isOpen && (
+            <button className={styles.toggle} onClick={onToggleOpenClosed}>
+              <Localized id="notification-comment-toggle-default-closed">
+                + Comment
+              </Localized>
+            </button>
+          )}
+        </>
       )}
 
       {isOpen && (