Setting to collapse top-level replies by default

client/src/core/client/admin/routes/Configure/sections/General/CollapseRepliesConfig.tsx

@@ -0,0 +1,50 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import {
+  FieldSet,
+  FormField,
+  FormFieldDescription,
+  Label,
+} from "coral-ui/components/v2";
+
+import ConfigBox from "../../ConfigBox";
+import Header from "../../Header";
+import OnOffField from "../../OnOffField";
+
+// eslint-disable-next-line no-unused-expressions
+graphql`
+  fragment CollapseRepliesConfig_formValues on Settings {
+    collapseReplies
+  }
+`;
+
+interface Props {
+  disabled: boolean;
+}
+
+const CollapseRepliesConfig: FunctionComponent<Props> = ({ disabled }) => (
+  <ConfigBox
+    title={
+      <Localized id="configure-general-collapseReplies-title">
+        <Header container="h2">Collapse replies</Header>
+      </Localized>
+    }
+  >
+    <Localized id="configure-general-collapseReplies-explanation">
+      <FormFieldDescription>
+        When enabled, top-level replies to comments will be collapsed by
+        default.
+      </FormFieldDescription>
+    </Localized>
+    <FormField container={<FieldSet />}>
+      <Localized id="configure-general-collapseReplies-enabled">
+        <Label component="legend">Collapse replies enabled</Label>
+      </Localized>
+      <OnOffField name="collapseReplies" disabled={disabled} />
+    </FormField>
+  </ConfigBox>
+);
+
+export default CollapseRepliesConfig;

client/src/core/client/admin/routes/Configure/sections/General/GeneralConfigContainer.tsx

@@ -15,6 +15,7 @@ import AnnouncementConfigContainer from "./AnnouncementConfigContainer";
 import BadgeConfig from "./BadgeConfig";
 import ClosedStreamMessageConfig from "./ClosedStreamMessageConfig";
 import ClosingCommentStreamsConfig from "./ClosingCommentStreamsConfig";
+import CollapseRepliesConfig from "./CollapseRepliesConfig";
 import CommentEditingConfig from "./CommentEditingConfig";
 import CommentLengthConfig from "./CommentLengthConfig";
 import FeaturedByConfig from "./FeaturedByConfig";
@@ -54,6 +55,7 @@ const GeneralConfigContainer: React.FunctionComponent<Props> = ({
       <DSAConfigContainer disabled={submitting} settings={settings} />
       <InPageNotificationsConfig disabled={submitting} />
       <FlattenRepliesConfig disabled={submitting} />
+      <CollapseRepliesConfig disabled={submitting} />
       <SitewideCommentingConfig disabled={submitting} />
       <AnnouncementConfigContainer disabled={submitting} settings={settings} />
       <GuidelinesConfig disabled={submitting} />
@@ -79,6 +81,7 @@ const enhanced = withFragmentContainer<Props>({
     fragment GeneralConfigContainer_settings on Settings {
       ...AnnouncementConfigContainer_settings
       ...FlattenRepliesConfig_formValues @relay(mask: false)
+      ...CollapseRepliesConfig_formValues @relay(mask: false)
       ...InPageNotificationsConfig_formValues @relay(mask: false)
       ...LocaleConfig_formValues @relay(mask: false)
       ...DSAConfigContainer_formValues @relay(mask: false)

client/src/core/client/admin/test/fixtures.ts

@@ -226,6 +226,7 @@ export const settings = createFixture<GQLSettings>({
   },
   amp: false,
   flattenReplies: false,
+  collapseReplies: false,
   forReviewQueue: false,
   emailDomainModeration: [],
   embeddedComments: {

client/src/core/client/framework/helpers/supportedBrowsersRegExp.ts

@@ -3,5 +3,5 @@
  * Any manual changes will be overridden.
  */
 // eslint-disable-next-line
-const supportedBrowsersRegExp = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(10[_.]0|10[_.]([1-9]|\d{2,})|10[_.]2|10[_.]([3-9]|\d{2,})|(1[1-9]|[2-9]\d|\d{3,})[_.]\d+|11[_.]0|11[_.]([1-9]|\d{2,})|11[_.]2|11[_.]([3-9]|\d{2,})|(1[2-9]|[2-9]\d|\d{3,})[_.]\d+|12[_.]0|12[_.]([1-9]|\d{2,})|12[_.]5|12[_.]([6-9]|\d{2,})|(1[3-9]|[2-9]\d|\d{3,})[_.]\d+|13[_.]0|13[_.]([1-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|15[_.]8|15[_.](9|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+|17[_.]0|17[_.]([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})[_.]\d+|18[_.]0|18[_.]([1-9]|\d{2,})|(19|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|(CFNetwork\/808\.(\d))|(CFNetwork\/8.* Darwin\/16\.5\.\d+)|(CFNetwork\/8.* Darwin\/16\.6\.\d+)|(CFNetwork\/8.* Darwin\/16\.7\.\d+)|(CFNetwork\/8.* Darwin\/16\.\d+)|(CFNetwork\/8.* Darwin\/17\.0\.\d+)|(CFNetwork\/8.* Darwin\/17\.2\.\d+)|(CFNetwork\/8.* Darwin\/17\.3\.\d+)|(CFNetwork\/8.* Darwin\/17\.\d+)|(Opera\/.+Opera Mobi.+Version\/(80\.0|80\.([1-9]|\d{2,})|(8[1-9]|9\d|\d{3,})\.\d+))|(Opera\/(80\.0|80\.([1-9]|\d{2,})|(8[1-9]|9\d|\d{3,})\.\d+).+Opera Mobi)|(Opera Mobi.+Opera(?:\/|\s+)(80\.0|80\.([1-9]|\d{2,})|(8[1-9]|9\d|\d{3,})\.\d+))|(SamsungBrowser\/(25\.0|25\.([1-9]|\d{2,})|(2[6-9]|[3-9]\d|\d{3,})\.\d+))|(Edge\/(79(?:\.0)?|79(?:\.([1-9]|\d{2,}))?|([8-9]\d|\d{3,})(?:\.\d+)?|83(?:\.0)?|83(?:\.([1-9]|\d{2,}))?|(8[4-9]|9\d|\d{3,})(?:\.\d+)?))|((Chromium|Chrome)\/(54\.0|54\.([1-9]|\d{2,})|(5[5-9]|[6-9]\d|\d{3,})\.\d+|83\.0|83\.([1-9]|\d{2,})|(8[4-9]|9\d|\d{3,})\.\d+)(?:\.\d+)?)|(Version\/(10\.0|10\.([1-9]|\d{2,})|(1[1-9]|[2-9]\d|\d{3,})\.\d+|11\.0|11\.([1-9]|\d{2,})|(1[2-9]|[2-9]\d|\d{3,})\.\d+|12\.0|12\.([1-9]|\d{2,})|(1[3-9]|[2-9]\d|\d{3,})\.\d+|13\.0|13\.([1-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+|17\.0|17\.([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})\.\d+|18\.0|18\.([1-9]|\d{2,})|(19|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Trident\/7\.0)|(Firefox\/(63\.0|63\.([1-9]|\d{2,})|(6[4-9]|[7-9]\d|\d{3,})\.\d+)\.\d+)|(Firefox\/(63\.0|63\.([1-9]|\d{2,})|(6[4-9]|[7-9]\d|\d{3,})\.\d+)(pre|[ab]\d+[a-z]*)?)|(([MS]?IE) (11\.0|11\.([1-9]|\d{2,})|(1[2-9]|[2-9]\d|\d{3,})\.\d+))/;
+const supportedBrowsersRegExp = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(10[_.]0|10[_.]([1-9]|\d{2,})|10[_.]2|10[_.]([3-9]|\d{2,})|(1[1-9]|[2-9]\d|\d{3,})[_.]\d+|11[_.]0|11[_.]([1-9]|\d{2,})|11[_.]2|11[_.]([3-9]|\d{2,})|(1[2-9]|[2-9]\d|\d{3,})[_.]\d+|12[_.]0|12[_.]([1-9]|\d{2,})|12[_.]5|12[_.]([6-9]|\d{2,})|(1[3-9]|[2-9]\d|\d{3,})[_.]\d+|13[_.]0|13[_.]([1-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|(CFNetwork\/808\.(\d))|(CFNetwork\/8.* Darwin\/16\.5\.\d+)|(CFNetwork\/8.* Darwin\/16\.6\.\d+)|(CFNetwork\/8.* Darwin\/16\.7\.\d+)|(CFNetwork\/8.* Darwin\/16\.\d+)|(CFNetwork\/8.* Darwin\/17\.0\.\d+)|(CFNetwork\/8.* Darwin\/17\.2\.\d+)|(CFNetwork\/8.* Darwin\/17\.3\.\d+)|(CFNetwork\/8.* Darwin\/17\.\d+)|(Opera\/.+Opera Mobi.+Version\/(64\.0|64\.([1-9]|\d{2,})|(6[5-9]|[7-9]\d|\d{3,})\.\d+))|(Opera\/(64\.0|64\.([1-9]|\d{2,})|(6[5-9]|[7-9]\d|\d{3,})\.\d+).+Opera Mobi)|(Opera Mobi.+Opera(?:\/|\s+)(64\.0|64\.([1-9]|\d{2,})|(6[5-9]|[7-9]\d|\d{3,})\.\d+))|(SamsungBrowser\/(12\.0|12\.([1-9]|\d{2,})|(1[3-9]|[2-9]\d|\d{3,})\.\d+))|(Edge\/(79(?:\.0)?|79(?:\.([1-9]|\d{2,}))?|([8-9]\d|\d{3,})(?:\.\d+)?|83(?:\.0)?|83(?:\.([1-9]|\d{2,}))?|(8[4-9]|9\d|\d{3,})(?:\.\d+)?))|((Chromium|Chrome)\/(54\.0|54\.([1-9]|\d{2,})|(5[5-9]|[6-9]\d|\d{3,})\.\d+|83\.0|83\.([1-9]|\d{2,})|(8[4-9]|9\d|\d{3,})\.\d+)(?:\.\d+)?)|(Version\/(10\.0|10\.([1-9]|\d{2,})|(1[1-9]|[2-9]\d|\d{3,})\.\d+|11\.0|11\.([1-9]|\d{2,})|(1[2-9]|[2-9]\d|\d{3,})\.\d+|12\.0|12\.([1-9]|\d{2,})|(1[3-9]|[2-9]\d|\d{3,})\.\d+|13\.0|13\.([1-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Trident\/7\.0)|(Firefox\/(63\.0|63\.([1-9]|\d{2,})|(6[4-9]|[7-9]\d|\d{3,})\.\d+)\.\d+)|(Firefox\/(63\.0|63\.([1-9]|\d{2,})|(6[4-9]|[7-9]\d|\d{3,})\.\d+)(pre|[ab]\d+[a-z]*)?)|(([MS]?IE) (11\.0|11\.([1-9]|\d{2,})|(1[2-9]|[2-9]\d|\d{3,})\.\d+))/;
 export default supportedBrowsersRegExp;

client/src/core/client/stream/classes.ts

@@ -492,6 +492,11 @@ const CLASSES = {
      * indentation classes for the different levels.
      */
     indent: (level: number) => `coral coral-indent coral-indent-${level}`,
+
+    /**
+     * collapseFirstLevelDefault is the class added to the comment container if the first level is collapsed by default.
+     */
+    collapseFirstLevelDefault: "coral coral-collapseFirstLevelDefault",
   },
 
   /**

client/src/core/client/stream/local/local.graphql

@@ -54,6 +54,10 @@ type ExpandedMediaSettings {
   commentIDs: [String!]!
 }
 
+type CollapsedCommentSettings {
+  commentIDs: [String!]!
+}
+
 extend type Comment {
   # pending is true during the optimistic response.
   pending: Boolean
@@ -119,6 +123,9 @@ extend type Local {
   # Keeps track of comments that have been expanded/collapsed (opposite of the user's default
   # media settings)
   expandedMediaSettings: ExpandedMediaSettings
+  # Keeps track of comments that have been collapsed/expanded (opposite of their default
+  # state based on depth and tenant settings)
+  collapsedCommentSettings: CollapsedCommentSettings
 
   archivingEnabled: Boolean!
   autoArchiveOlderThanMs: Int!

client/src/core/client/stream/tabs/Comments/Comment/CollapsableComment.tsx

@@ -1,4 +1,9 @@
-import { FunctionComponent, ReactElement, useCallback, useState } from "react";
+import { FunctionComponent, ReactElement, useCallback, useMemo } from "react";
+import { graphql } from "react-relay";
+
+import { useLocal } from "coral-framework/lib/relay";
+
+import { CollapsableCommentLocal } from "coral-stream/__generated__/CollapsableCommentLocal.graphql";
 
 interface InjectedCollapsableCommentProps {
   collapsed: boolean;
@@ -7,13 +12,65 @@ interface InjectedCollapsableCommentProps {
 
 interface Props {
   children(props: InjectedCollapsableCommentProps): ReactElement;
+  defaultCollapsed?: boolean;
+  comment: {
+    id: string;
+    lastViewerAction?: string | null;
+  };
 }
 
-const CollapsableComment: FunctionComponent<Props> = ({ children }) => {
-  const [collapsed, setCollapsed] = useState<boolean>(false);
+const CollapsableComment: FunctionComponent<Props> = ({
+  children,
+  defaultCollapsed = false,
+  comment,
+}) => {
+  const [{ collapsedCommentSettings }, setLocal] =
+    useLocal<CollapsableCommentLocal>(graphql`
+      fragment CollapsableCommentLocal on Local {
+        collapsedCommentSettings {
+          commentIDs
+        }
+      }
+    `);
+
+  // If comment was just created, always start un-collapsed
+  const isNewlyCreated = comment?.lastViewerAction === "CREATE";
+
+  const collapsed = useMemo(() => {
+    // If comment was just created, always show un-collapsed
+    if (isNewlyCreated) {
+      return false;
+    }
+
+    const commentInSettings =
+      collapsedCommentSettings?.commentIDs.includes(comment.id) ?? false;
+    // If in settings list, it means it's toggled to opposite of default
+    return defaultCollapsed ? !commentInSettings : commentInSettings;
+  }, [collapsedCommentSettings, comment.id, defaultCollapsed, isNewlyCreated]);
+
   const toggleCollapsed = useCallback(() => {
-    setCollapsed(!collapsed);
-  }, [collapsed]);
+    const initialSettings = collapsedCommentSettings ?? { commentIDs: [] };
+    const indexOfComment = initialSettings.commentIDs.indexOf(comment.id);
+
+    if (indexOfComment === -1) {
+      // Add to list - comment is now opposite of default
+      setLocal({
+        collapsedCommentSettings: {
+          commentIDs: initialSettings.commentIDs.concat(comment.id),
+        },
+      });
+    } else {
+      // Remove from list - comment returns to default
+      setLocal({
+        collapsedCommentSettings: {
+          commentIDs: initialSettings.commentIDs.filter(
+            (id: string) => id !== comment.id
+          ),
+        },
+      });
+    }
+  }, [comment.id, collapsedCommentSettings, setLocal]);
+
   return children({ collapsed, toggleCollapsed });
 };
 

client/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx

@@ -439,7 +439,11 @@ export const CommentContainer: FunctionComponent<Props> = ({
         className,
         CLASSES.comment.$root,
         `${CLASSES.comment.reacted}-${comment.actionCounts.reaction.total}`,
-        badgesClassName
+        badgesClassName,
+        {
+          [CLASSES.comment.collapseFirstLevelDefault]:
+            indentLevel === 1 && settings.collapseReplies,
+        }
       )}
       tabIndex={-1}
       id={commentElementID}
@@ -917,6 +921,7 @@ const enhanced = withShowAuthPopupMutation(
     settings: graphql`
       fragment CommentContainer_settings on Settings {
         flattenReplies
+        collapseReplies
         disableCommenting {
           enabled
         }

client/src/core/client/stream/tabs/Comments/ReplyList/ReplyListCommentContainer.tsx

@@ -57,7 +57,10 @@ const ReplyListCommentContainer: FunctionComponent<Props> = ({
         allowTombstoneReveal={allowIgnoredTombstoneReveal}
       >
         <HorizontalGutter spacing={commentSeenEnabled ? 0 : undefined}>
-          <CollapsableComment>
+          <CollapsableComment
+            defaultCollapsed={indentLevel === 1 && settings.collapseReplies}
+            comment={comment}
+          >
             {({ collapsed, toggleCollapsed }) => {
               const collapseEnabled = !isReplyFlattened(
                 settings.flattenReplies,
@@ -115,12 +118,15 @@ const enhanced = withFragmentContainer<Props>({
     fragment ReplyListCommentContainer_settings on Settings {
       ...CommentContainer_settings
       flattenReplies
+      collapseReplies
       featureFlags
     }
   `,
   comment: graphql`
     fragment ReplyListCommentContainer_comment on Comment {
+      id
       enteredLive
+      lastViewerAction
       ...CommentContainer_comment
       ...IgnoredTombstoneOrHideContainer_comment
       ...DeletedTombstoneContainer_comment

client/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabCommentContainer.tsx

@@ -27,6 +27,7 @@ interface Props {
   settings: AllCommentsTabCommentContainer_settings;
   story: AllCommentsTabCommentContainer_story;
   isLast: boolean;
+  indentLevel?: number;
 }
 
 const AllCommentsTabCommentContainer: FunctionComponent<Props> = ({
@@ -35,6 +36,7 @@ const AllCommentsTabCommentContainer: FunctionComponent<Props> = ({
   settings,
   story,
   isLast,
+  indentLevel,
 }) => {
   const [{ refreshStream }] = useLocal<AllCommentsTabCommentContainerLocal>(
     graphql`
@@ -49,7 +51,10 @@ const AllCommentsTabCommentContainer: FunctionComponent<Props> = ({
   return (
     <IgnoredTombstoneOrHideContainer viewer={viewer} comment={comment}>
       <FadeInTransition active={!!comment.enteredLive}>
-        <CollapsableComment>
+        <CollapsableComment
+          defaultCollapsed={indentLevel === 1}
+          comment={comment}
+        >
           {({ collapsed, toggleCollapsed }) => (
             <HorizontalGutter
               className={cn({
@@ -68,6 +73,7 @@ const AllCommentsTabCommentContainer: FunctionComponent<Props> = ({
                   comment={comment}
                   story={story}
                   toggleCollapsed={toggleCollapsed}
+                  indentLevel={indentLevel}
                 />
               </DeletedTombstoneContainer>
               {!collapsed && (
@@ -117,6 +123,7 @@ const enhanced = withFragmentContainer<Props>({
     ) {
       id
       enteredLive
+      lastViewerAction
       seen
       ...CommentContainer_comment
       ...ReplyListContainer1_comment @arguments(refreshStream: $refreshStream)

client/src/core/client/stream/tabs/Comments/Stream/UnansweredCommentsTab/UnansweredCommentsTabCommentContainer.tsx

@@ -38,7 +38,7 @@ const UnansweredCommentsTabCommentContainer: FunctionComponent<Props> = ({
   return (
     <IgnoredTombstoneOrHideContainer viewer={viewer} comment={comment}>
       <FadeInTransition active={!!comment.enteredLive}>
-        <CollapsableComment>
+        <CollapsableComment comment={comment}>
           {({ collapsed, toggleCollapsed }) => (
             <HorizontalGutter
               className={cn({
@@ -100,7 +100,9 @@ const enhanced = withFragmentContainer<Props>({
     @argumentDefinitions(
       refreshStream: { type: "Boolean", defaultValue: false }
     ) {
+      id
       enteredLive
+      lastViewerAction
       ...CommentContainer_comment
       ...ReplyListContainer1_comment @arguments(refreshStream: $refreshStream)
       ...IgnoredTombstoneOrHideContainer_comment

client/src/core/client/stream/test/fixtures.ts

@@ -134,6 +134,7 @@ export const settings = createFixture<GQLSettings>({
     sarcasm: false,
   },
   flattenReplies: false,
+  collapseReplies: false,
   flairBadges: {
     flairBadgesEnabled: true,
     badges: [{ name: "subscriber", url: "https://wwww.example.com/image.jpg" }],

client/src/core/client/test/helpers/fixture.ts

@@ -398,6 +398,7 @@ export function createSettings(): GQLSettings {
     },
     premoderateSuspectWords: false,
     flattenReplies: false,
+    collapseReplies: false,
     auth: {
       integrations: {
         local: {

locales/en-US/admin.ftl

@@ -524,6 +524,11 @@ configure-general-flattenReplies-enabled = Flatten replies enabled
 configure-general-flattenReplies-explanation =
   Change how levels of replies display. When enabled, replies to comments can go up to seven levels deep before they are no longer indented on the page. When disabled, after a depth of seven replies, the rest of the conversation is displayed in a dedicated view away from the other comments.
 
+#### Collapse Replies
+configure-general-collapseReplies-title = Collapse replies
+configure-general-collapseReplies-enabled = Collapse replies enabled
+configure-general-collapseReplies-explanation =
+  When enabled, top-level replies to comments will be collapsed by default.
 configure-general-featuredBy-title = Featured by
 configure-general-featuredBy-enabled = Featured by enabled
 configure-general-featuredBy-explanation = Add moderator name to featured comment display

server/src/core/server/graph/resolvers/Settings.ts

@@ -41,6 +41,7 @@ export const Settings: GQLSettingsTypeResolver<Tenant> = {
   stories: ({ stories }) => stories,
   amp: (parent, args, ctx) => isAMPEnabled(ctx.tenant),
   flattenReplies: (parent, args, ctx) => areRepliesFlattened(ctx.tenant),
+  collapseReplies: (parent, args, ctx) => ctx.tenant.collapseReplies || false,
   forReviewQueue: (parent, args, ctx) => isForReviewQueueEnabled(ctx.tenant),
   disableDefaultFonts: ({ disableDefaultFonts }) =>
     Boolean(disableDefaultFonts),

server/src/core/server/graph/schema/schema.graphql

@@ -2190,6 +2190,12 @@ type Settings @cacheControl(maxAge: 30) {
   """
   flattenReplies: Boolean!
 
+  """
+  collapseReplies when enabled, will cause first-level replies to be collapsed
+  by default in the comment stream.
+  """
+  collapseReplies: Boolean!
+
   """
   customCSSURL is the URL of the custom CSS used to display on the frontend.
   """
@@ -6917,6 +6923,11 @@ input SettingsInput {
   """
   flattenReplies: Boolean
 
+  """
+  collapseReplies is whether or not to collapse first-level replies by default
+  """
+  collapseReplies: Boolean
+
   """
   forReviewQueue is whether or not to show the For Review queue in
   the Moderate tab of the admin. This queue allows moderators to

server/src/core/server/models/settings/settings.ts

@@ -435,6 +435,11 @@ export type Settings = GlobalModerationSettings &
      */
     flattenReplies: boolean;
 
+    /**
+     * collapseReplies is whether or not to collapse first-level replies by default
+     */
+    collapseReplies: boolean;
+
     /**
      * forReviewQueue is whether the tenant wants to enable the For Review
      * moderation queue in the admin to review every flag that has been

server/src/core/server/models/tenant/tenant.ts

@@ -289,6 +289,7 @@ export const combineTenantDefaultsAndInput = (
     rte: defaultRTEConfiguration,
     amp: false,
     flattenReplies: false,
+    collapseReplies: false,
     disableDefaultFonts: false,
     emailDomainModeration: [],
     embeddedComments: {