Merge pull request #6594 from matrix-org/t3chguy/fix/18088

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -28,7 +28,6 @@ import { replaceableComponent } from "../../../../../utils/replaceableComponent"
 import SettingsFlag from '../../../elements/SettingsFlag';
 import * as KeyboardShortcuts from "../../../../../accessibility/KeyboardShortcuts";
 import AccessibleButton from "../../../elements/AccessibleButton";
-import SpaceStore from "../../../../../stores/SpaceStore";
 import GroupAvatar from "../../../avatars/GroupAvatar";
 import dis from "../../../../../dispatcher/dispatcher";
 import GroupActions from "../../../../../actions/GroupActions";
@@ -145,7 +144,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
     ];
 
     static COMMUNITIES_SETTINGS = [
-        // TODO: part of delabsing move the toggle here - https://github.com/vector-im/element-web/issues/18088
+        "showCommunitiesInsteadOfSpaces",
     ];
 
     static KEYBINDINGS_SETTINGS = [
@@ -286,9 +285,17 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         SettingsStore.setValue("readMarkerOutOfViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
     };
 
-    private renderGroup(settingIds: string[]): React.ReactNodeArray {
-        return settingIds.filter(SettingsStore.isEnabled).map(i => {
-            return <SettingsFlag key={i} name={i} level={SettingLevel.ACCOUNT} />;
+    private renderGroup(
+        settingIds: string[],
+        level = SettingLevel.ACCOUNT,
+        includeDisabled = false,
+    ): React.ReactNodeArray {
+        if (!includeDisabled) {
+            settingIds = settingIds.filter(SettingsStore.isEnabled);
+        }
+
+        return settingIds.map(i => {
+            return <SettingsFlag key={i} name={i} level={level} />;
         });
     }
 
@@ -334,10 +341,10 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                     { this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS) }
                 </div>
 
-                { SpaceStore.spacesEnabled && <div className="mx_SettingsTab_section">
+                <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{ _t("Spaces") }</span>
-                    { this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS) }
-                </div> }
+                    { this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT, true) }
+                </div>
 
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{ _t("Communities") }</span>
@@ -349,7 +356,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                         <p>{ _t("If a community isn't shown you may not have permission to convert it.") }</p>
                         <CommunityMigrator onFinished={this.props.closeSettingsFn} />
                     </details>
-                    { this.renderGroup(PreferencesUserSettingsTab.COMMUNITIES_SETTINGS) }
+                    { this.renderGroup(PreferencesUserSettingsTab.COMMUNITIES_SETTINGS, SettingLevel.DEVICE) }
                 </div>
 
                 <div className="mx_SettingsTab_section">

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -117,9 +117,7 @@ export const SpaceFeedbackPrompt = ({ onClick }: { onClick?: () => void }) => {
                         "Your feedback will help inform the next versions."),
                     rageshakeLabel: "spaces-feedback",
                     rageshakeData: Object.fromEntries([
-                        "feature_spaces.all_rooms",
-                        "feature_spaces.space_member_dms",
-                        "feature_spaces.space_dm_badges",
+                        "Spaces.allRoomsInHome",
                     ].map(k => [k, SettingsStore.getValue(k)])),
                 });
             }}
@@ -301,13 +299,13 @@ const SpaceCreateMenu = ({ onFinished }) => {
             />
 
             <p>
-                { _t("You can also create a Space from a <a>community</a>.", {}, {
+                { _t("You can also make Spaces from <a>communities</a>.", {}, {
                     a: sub => <AccessibleButton kind="link" onClick={onCreateSpaceFromCommunityClick}>
                         { sub }
                     </AccessibleButton>,
                 }) }
                 <br />
-                { _t("To join an existing space you'll need an invite.") }
+                { _t("To join a space you'll need an invite.") }
             </p>
 
             <SpaceFeedbackPrompt onClick={onFinished} />

src/components/views/spaces/SpacePanel.tsx

@@ -151,12 +151,19 @@ const CreateSpaceButton = ({
     }
 
     const onNewClick = menuDisplayed ? closeMenu : () => {
+        // persist that the user has interacted with this, use it to dismiss the beta dot
+        localStorage.setItem("mx_seenSpaces", "1");
         if (!isPanelCollapsed) setPanelCollapsed(true);
         openMenu();
     };
 
+    let betaDot: JSX.Element;
+    if (!localStorage.getItem("mx_seenSpaces") && !SpaceStore.instance.spacePanelSpaces.length) {
+        betaDot = <div className="mx_BetaDot" />;
+    }
+
     return <li
-        className={classNames("mx_SpaceItem", {
+        className={classNames("mx_SpaceItem mx_SpaceItem_new", {
             "collapsed": isPanelCollapsed,
         })}
         role="treeitem"
@@ -169,6 +176,7 @@ const CreateSpaceButton = ({
             onClick={onNewClick}
             isNarrow={isPanelCollapsed}
         />
+        { betaDot }
 
         { contextMenu }
     </li>;