Release threads as a beta feature

res/css/views/right_panel/_ThreadPanel.scss

@@ -220,6 +220,18 @@ limitations under the License.
             display: none; // hide the hidden event expand button, not enough space, view source can still be used
         }
     }
+
+    .mx_BaseCard_footer {
+        text-align: left;
+        font-size: $font-12px;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 4px;
+
+        .mx_AccessibleButton_kind_link_inline {
+            color: inherit;
+        }
+    }
 }
 
 .mx_ThreadPanel_replies {

src/components/structures/MatrixChat.tsx

@@ -1469,18 +1469,18 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                             description: <>
                                 <p>
                                     { _t("We’ve recently introduced key stability "
-                                    + "improvements for Threads, which also means "
-                                    + "phasing out support for experimental Threads.") }
+                                    + "improvements for threads, which also means "
+                                    + "phasing out support for experimental threads.") }
                                 </p>
                                 <p>
                                     { _t("All thread events created during the "
                                     + "experimental period will now be rendered in "
                                     + "the room timeline and displayed as replies. "
-                                    + "This is a one-off transition. Threads are now "
+                                    + "This is a one-off transition. threads are now "
                                     + "part of the Matrix specification.") }
                                 </p>
                                 <p>
-                                    { _t("Thank you for helping us testing Threads!") }
+                                    { _t("Thank you for helping us testing threads!") }
                                 </p>
                             </>,
                             onFinished: () => {

src/components/structures/ThreadPanel.tsx

@@ -30,7 +30,11 @@ import { Layout } from '../../settings/enums/Layout';
 import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
 import Measured from '../views/elements/Measured';
 import PosthogTrackers from "../../PosthogTrackers";
-import { ButtonEvent } from "../views/elements/AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
+import { BetaPill } from '../views/beta/BetaCard';
+import SdkConfig from '../../SdkConfig';
+import Modal from '../../Modal';
+import BetaFeedbackDialog from '../views/dialogs/BetaFeedbackDialog';
 
 interface IProps {
     roomId: string;
@@ -208,6 +212,12 @@ const ThreadPanel: React.FC<IProps> = ({
         }
     }, [timelineSet, timelinePanel]);
 
+    const openFeedback = SdkConfig.get().bug_report_endpoint_url ? () => {
+        Modal.createTrackedDialog("Threads Feedback", "feature_thread", BetaFeedbackDialog, {
+            featureId: "feature_thread",
+        });
+    } : null;
+
     return (
         <RoomContext.Provider value={{
             ...roomContext,
@@ -221,6 +231,18 @@ const ThreadPanel: React.FC<IProps> = ({
                     setFilterOption={setFilterOption}
                     empty={threadCount === 0}
                 />}
+                footer={<>
+                    <BetaPill
+                        tooltipTitle={_t("Threads are a work in progress")}
+                        tooltipCaption={_t("Click to give feedback")}
+                        onClick={() => openFeedback?.()}
+                    />
+                    { openFeedback && _t("<a>Give feedback on threads</a>.", {}, {
+                        a: sub => <AccessibleButton kind="link_inline" onClick={openFeedback}>
+                            { sub }
+                        </AccessibleButton>,
+                    }) }
+                </>}
                 className="mx_ThreadPanel"
                 onClose={onClose}
                 withoutScrollContainer={true}

src/components/views/beta/BetaCard.tsx

@@ -36,17 +36,27 @@ interface IProps {
     featureId: string;
 }
 
-export const BetaPill = ({ onClick }: { onClick?: () => void }) => {
+interface IBetaPillProps {
+    onClick?: () => void;
+    tooltipTitle?: string;
+    tooltipCaption?: string;
+}
+
+export const BetaPill = ({
+    onClick,
+    tooltipTitle = _t("This is a beta feature"),
+    tooltipCaption = _t("Click for more info"),
+}: IBetaPillProps) => {
     if (onClick) {
         return <AccessibleTooltipButton
             className="mx_BetaCard_betaPill"
-            title={_t("This is a beta feature. Click for more info")}
+            title={`${tooltipTitle} ${tooltipCaption}`}
             tooltip={<div>
                 <div className="mx_Tooltip_title">
-                    { _t("This is a beta feature") }
+                    { tooltipTitle }
                 </div>
                 <div className="mx_Tooltip_sub">
-                    { _t("Click for more info") }
+                    { tooltipCaption }
                 </div>
             </div>}
             onClick={onClick}
@@ -76,6 +86,7 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
         feedbackSubheading,
         extraSettings,
         requiresRefresh,
+        canLeaveBeta = true,
     } = info;
 
     let feedbackButton;
@@ -109,7 +120,7 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
                 <span className="mx_BetaCard_caption">{ caption() }</span>
                 <div className="mx_BetaCard_buttons">
                     { feedbackButton }
-                    <AccessibleButton
+                    { canLeaveBeta && (<AccessibleButton
                         onClick={async () => {
                             setBusy(true);
                             // make it look like we're doing something for two seconds,
@@ -126,13 +137,13 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
                         disabled={busy}
                     >
                         { content }
-                    </AccessibleButton>
+                    </AccessibleButton>) }
                 </div>
                 { disclaimer && <div className="mx_BetaCard_disclaimer">
                     { disclaimer(value) }
                 </div> }
             </div>
-            <img src={image} alt="" />
+            { image && (<img src={image} alt="" />) }
         </div>
         { extraSettings && value && <div className="mx_BetaCard_relatedSettings">
             { extraSettings.map(key => (

src/components/views/rooms/EventTile.tsx

@@ -615,7 +615,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
          * when we are at the sync stage
          */
         const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
-        const thread = room?.threads.get(this.props.mxEvent.getId());
+        const thread = room?.threads?.get(this.props.mxEvent.getId());
 
         return thread || null;
     }

src/i18n/strings/en_EN.json

@@ -876,6 +876,11 @@
     "Communities v2 prototypes. Requires compatible homeserver. Highly experimental - use with caution.": "Communities v2 prototypes. Requires compatible homeserver. Highly experimental - use with caution.",
     "Message Pinning": "Message Pinning",
     "Threaded messaging": "Threaded messaging",
+    "Keep discussions organised with threads.": "Keep discussions organised with threads.",
+    "Threads help keep conversations on-topic and easy to track.": "Threads help keep conversations on-topic and easy to track.",
+    "How can I start a thread?": "How can I start a thread?",
+    "Use “Reply in thread” when hovering over a message.": "Use “Reply in thread” when hovering over a message.",
+    "Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.",
     "Custom user status messages": "Custom user status messages",
     "Group & filter rooms by custom tags (refresh to apply changes)": "Group & filter rooms by custom tags (refresh to apply changes)",
     "Render simple counters in room header": "Render simple counters in room header",
@@ -897,7 +902,6 @@
     "To feedback, join the beta, start a search and click on feedback.": "To feedback, join the beta, start a search and click on feedback.",
     "How can I leave the beta?": "How can I leave the beta?",
     "To leave, just return to this page or click on the beta badge when you search.": "To leave, just return to this page or click on the beta badge when you search.",
-    "Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.",
     "Right panel stays open (defaults to room member list)": "Right panel stays open (defaults to room member list)",
     "Jump to date (adds /jumptodate and jump to date headers)": "Jump to date (adds /jumptodate and jump to date headers)",
     "Don't send read receipts": "Don't send read receipts",
@@ -2951,7 +2955,6 @@
     "Revoke permissions": "Revoke permissions",
     "Move left": "Move left",
     "Move right": "Move right",
-    "This is a beta feature. Click for more info": "This is a beta feature. Click for more info",
     "This is a beta feature": "This is a beta feature",
     "Click for more info": "Click for more info",
     "Beta": "Beta",
@@ -3092,9 +3095,9 @@
     "Unable to copy room link": "Unable to copy room link",
     "Unable to copy a link to the room to the clipboard.": "Unable to copy a link to the room to the clipboard.",
     "Threads are no longer experimental! 🎉": "Threads are no longer experimental! 🎉",
-    "We’ve recently introduced key stability improvements for Threads, which also means phasing out support for experimental Threads.": "We’ve recently introduced key stability improvements for Threads, which also means phasing out support for experimental Threads.",
-    "All thread events created during the experimental period will now be rendered in the room timeline and displayed as replies. This is a one-off transition. Threads are now part of the Matrix specification.": "All thread events created during the experimental period will now be rendered in the room timeline and displayed as replies. This is a one-off transition. Threads are now part of the Matrix specification.",
-    "Thank you for helping us testing Threads!": "Thank you for helping us testing Threads!",
+    "We’ve recently introduced key stability improvements for threads, which also means phasing out support for experimental threads.": "We’ve recently introduced key stability improvements for threads, which also means phasing out support for experimental threads.",
+    "All thread events created during the experimental period will now be rendered in the room timeline and displayed as replies. This is a one-off transition. threads are now part of the Matrix specification.": "All thread events created during the experimental period will now be rendered in the room timeline and displayed as replies. This is a one-off transition. threads are now part of the Matrix specification.",
+    "Thank you for helping us testing threads!": "Thank you for helping us testing threads!",
     "New search beta available": "New search beta available",
     "We're testing a new search to make finding what you want quicker.\n": "We're testing a new search to make finding what you want quicker.\n",
     "Signed Out": "Signed Out",
@@ -3222,6 +3225,9 @@
     "Keep discussions organised with threads": "Keep discussions organised with threads",
     "Reply to an ongoing thread or use “%(replyInThread)s” when hovering over a message to start a new one.": "Reply to an ongoing thread or use “%(replyInThread)s” when hovering over a message to start a new one.",
     "Show all threads": "Show all threads",
+    "Threads are a work in progress": "Threads are a work in progress",
+    "Click to give feedback": "Click to give feedback",
+    "<a>Give feedback on threads</a>.": "<a>Give feedback on threads</a>.",
     "Thread": "Thread",
     "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.",
     "Tried to load a specific point in this room's timeline, but was unable to find it.": "Tried to load a specific point in this room's timeline, but was unable to find it.",

src/settings/Settings.tsx

@@ -165,11 +165,12 @@ export interface IBaseSetting<T extends SettingValueType = SettingValueType> {
         title: string; // _td
         caption: () => ReactNode;
         disclaimer?: (enabled: boolean) => ReactNode;
-        image: string; // require(...)
+        image?: string; // require(...)
         feedbackSubheading?: string;
         feedbackLabel?: string;
         extraSettings?: string[];
         requiresRefresh?: boolean;
+        canLeaveBeta?: boolean;
     };
 }
 
@@ -238,7 +239,25 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         controller: new ReloadOnChangeController(),
         displayName: _td("Threaded messaging"),
         supportedLevels: LEVELS_FEATURE,
-        default: false,
+        default: true,
+        betaInfo: {
+            title: _td("Threads"),
+            caption: () => <>
+                <p>{ _t("Keep discussions organised with threads.") }</p>
+                <p>{ _t("Threads help keep conversations on-topic and easy to track.") }</p>
+            </>,
+            disclaimer: () =>
+                SdkConfig.get().bug_report_endpoint_url && <>
+                    <h4>{ _t("How can I start a thread?") }</h4>
+                    <p>{ _t("Use “Reply in thread” when hovering over a message.") }</p>
+                </>,
+            feedbackLabel: "thread-feedback",
+            feedbackSubheading: _td("Thank you for trying the beta, " +
+                "please go into as much detail as you can so we can improve it."),
+            image: require("../../res/img/betas/threads.png"),
+            requiresRefresh: true,
+        },
+
     },
     "feature_custom_status": {
         isFeature: true,