New User Onboarding Task List (#9083)

* Improve type of AccessibleButton to accurately represent available props
* Update analytics events

cypress/e2e/user-onboarding/user-onboarding-new.ts

@@ -0,0 +1,68 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/// <reference types="cypress" />
+
+import { MatrixClient } from "../../global";
+import { SynapseInstance } from "../../plugins/synapsedocker";
+
+describe("User Onboarding (new user)", () => {
+    let synapse: SynapseInstance;
+
+    const bot1Name = "BotBob";
+    let bot1: MatrixClient;
+
+    beforeEach(() => {
+        cy.startSynapse("default").then(data => {
+            synapse = data;
+            cy.initTestUser(synapse, "Jane Doe");
+            cy.window({ log: false }).then(win => {
+                win.localStorage.setItem("mx_registration_time", "1656633601");
+            });
+            cy.reload().then(() => {
+                // wait for the app to load
+                return cy.get(".mx_MatrixChat", { timeout: 15000 });
+            });
+            cy.getBot(synapse, { displayName: bot1Name }).then(_bot1 => {
+                bot1 = _bot1;
+            });
+            cy.get('.mx_UserOnboardingPage').should('exist');
+        });
+    });
+
+    afterEach(() => {
+        cy.stopSynapse(synapse);
+    });
+
+    it("page is shown", () => {
+        cy.get('.mx_UserOnboardingPage').should('exist');
+        cy.percySnapshot("User onboarding page");
+    });
+
+    it("using find friends action should increase progress", () => {
+        cy.get(".mx_ProgressBar").invoke("val").then((oldProgress) => {
+            const findPeopleAction = cy.contains(".mx_UserOnboardingTask_action", "Find friends");
+            expect(findPeopleAction).to.exist;
+            findPeopleAction.click();
+            cy.get(".mx_InviteDialog_editor input").type(bot1.getUserId());
+            cy.get(".mx_InviteDialog_buttonAndSpinner").click();
+            cy.get(".mx_InviteDialog_buttonAndSpinner").should("not.exist");
+            cy.visit("/#/home");
+
+            cy.get(".mx_ProgressBar").invoke("val").should("be.greaterThan", oldProgress);
+        });
+    });
+});

cypress/e2e/user-onboarding/user-onboarding-old.ts

@@ -0,0 +1,46 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/// <reference types="cypress" />
+
+import { SynapseInstance } from "../../plugins/synapsedocker";
+
+describe("User Onboarding (old user)", () => {
+    let synapse: SynapseInstance;
+
+    beforeEach(() => {
+        cy.startSynapse("default").then(data => {
+            synapse = data;
+            cy.initTestUser(synapse, "Jane Doe");
+            cy.window({ log: false }).then(win => {
+                win.localStorage.setItem("mx_registration_time", "2");
+            });
+            cy.reload().then(() => {
+                // wait for the app to load
+                return cy.get(".mx_MatrixChat", { timeout: 15000 });
+            });
+        });
+    });
+
+    afterEach(() => {
+        cy.visit("/#/home");
+        cy.stopSynapse(synapse);
+    });
+
+    it("page is hidden", () => {
+        cy.get('.mx_UserOnboardingPage').should('not.exist');
+    });
+});

package.json

@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@matrix-org/analytics-events": "^0.1.2",
+    "@matrix-org/analytics-events": "^0.2.0",
     "@matrix-org/react-sdk-module-api": "^0.0.3",
     "@sentry/browser": "^6.11.0",
     "@sentry/tracing": "^6.11.0",

res/css/_components.pcss

@@ -324,6 +324,10 @@
 @import "./views/toasts/_IncomingCallToast.pcss";
 @import "./views/toasts/_NonUrgentEchoFailureToast.pcss";
 @import "./views/typography/_Heading.pcss";
+@import "./views/user-onboarding/_UserOnboardingHeader.pcss";
+@import "./views/user-onboarding/_UserOnboardingList.pcss";
+@import "./views/user-onboarding/_UserOnboardingPage.pcss";
+@import "./views/user-onboarding/_UserOnboardingTask.pcss";
 @import "./views/verification/_VerificationShowSas.pcss";
 @import "./views/voip/CallView/_CallViewButtons.pcss";
 @import "./views/voip/_CallPreview.pcss";

res/css/_spacing.pcss

@@ -25,3 +25,5 @@ $spacing-24: 24px;
 $spacing-28: 28px;
 $spacing-32: 32px;
 $spacing-40: 40px;
+$spacing-48: 48px;
+$spacing-64: 64px;

res/css/views/user-onboarding/_UserOnboardingHeader.pcss

@@ -0,0 +1,101 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UserOnboardingHeader {
+    display: flex;
+    flex-direction: row;
+    padding: $spacing-32;
+    border-radius: 16px;
+    background: $system;
+    gap: $spacing-64;
+
+    animation-delay: 1500ms;
+    animation-duration: 300ms;
+    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+    animation-name: mx_UserOnboardingHeader_slideIn;
+    animation-fill-mode: backwards;
+    will-change: opacity, transform;
+
+    @media (max-width: 1280px) {
+        margin: $spacing-32;
+    }
+
+    .mx_UserOnboardingHeader_dot {
+        color: $accent;
+    }
+
+    .mx_UserOnboardingHeader_content {
+        display: flex;
+        flex-direction: column;
+        flex-basis: 50%;
+        flex-shrink: 1;
+        flex-grow: 1;
+        min-width: 0;
+        gap: $spacing-24;
+        margin-right: auto;
+
+        p {
+            margin: 0;
+        }
+
+        .mx_AccessibleButton {
+            margin-top: auto;
+            align-self: flex-start;
+            padding: $spacing-12 $spacing-24;
+        }
+    }
+
+    .mx_UserOnboardingHeader_image {
+        flex-basis: 30%;
+        flex-shrink: 1;
+        flex-grow: 1;
+        align-self: center;
+        height: calc(100% + $spacing-64 + $spacing-64);
+        aspect-ratio: 4 / 3;
+        object-fit: contain;
+        min-width: 0;
+        min-height: 0;
+        margin-top: -$spacing-64;
+        margin-bottom: -$spacing-64;
+
+        animation-delay: 1500ms;
+        animation-duration: 300ms;
+        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+        animation-name: mx_UserOnboardingHeader_slideInLong;
+        animation-fill-mode: backwards;
+        will-change: opacity, transform;
+    }
+}
+
+@keyframes mx_UserOnboardingHeader_slideIn {
+    0% {
+        transform: translate(0, 8px);
+        opacity: 0;
+    }
+    100% {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes mx_UserOnboardingHeader_slideInLong {
+    0% {
+        transform: translate(0, 32px);
+    }
+    100% {
+        transform: translate(0, 0);
+    }
+}

res/css/views/user-onboarding/_UserOnboardingList.pcss

@@ -0,0 +1,79 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UserOnboardingList {
+    display: flex;
+    flex-direction: column;
+    margin: 0 $spacing-32;
+
+    animation-duration: 300ms;
+    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+    animation-name: mx_UserOnboardingList_slideIn;
+    animation-fill-mode: backwards;
+    will-change: opacity;
+
+    .mx_UserOnboardingList_header {
+        display: flex;
+        flex-direction: row;
+        gap: 12px;
+        align-items: center;
+
+        .mx_UserOnboardingList_hint {
+            color: $secondary-content;
+        }
+    }
+
+    .mx_UserOnboardingList_progress {
+        display: flex;
+        flex-direction: column;
+        counter-reset: user-onboarding;
+
+        .mx_ProgressBar {
+            width: auto;
+            margin-top: $spacing-16;
+            height: 16px;
+
+            @mixin ProgressBarBorderRadius 16px;
+        }
+
+        .mx_UserOnboardingFeedback {
+            margin-top: $spacing-16;
+        }
+    }
+
+    .mx_UserOnboardingList_list {
+        display: grid;
+        grid-template-columns: max-content 1fr max-content;
+
+        appearance: none;
+        list-style: none;
+        margin: $spacing-32 0 0;
+        padding: 0;
+
+        grid-gap: $spacing-24;
+    }
+}
+
+@keyframes mx_UserOnboardingList_slideIn {
+    0% {
+        transform: translate(0, 8px);
+        opacity: 0;
+    }
+    100% {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}

res/css/views/user-onboarding/_UserOnboardingPage.pcss

@@ -0,0 +1,35 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UserOnboardingPage {
+    width: 100%;
+    height: 100%;
+
+    align-self: stretch;
+    max-width: 1200px;
+    margin: 0 auto auto;
+
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+
+    gap: $spacing-64;
+    padding: $spacing-64 100px;
+
+    @media (max-width: 1280px) {
+        padding: $spacing-48 $spacing-32;
+    }
+}

res/css/views/user-onboarding/_UserOnboardingTask.pcss

@@ -0,0 +1,116 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UserOnboardingTask {
+    display: contents;
+
+    .mx_UserOnboardingTask_number {
+        counter-increment: user-onboarding;
+        grid-column: 1;
+        color: $secondary-content;
+        width: 32px;
+        height: 32px;
+        text-align: center;
+        border: 2px solid $quinary-content;
+        border-radius: 32px;
+        line-height: 32px;
+        align-self: center;
+        position: relative;
+
+        &::before {
+            content: counter(user-onboarding);
+        }
+    }
+
+    .mx_UserOnboardingTask_content {
+        grid-column: 2;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        flex-shrink: 1;
+
+        transition: all 500ms;
+
+        .mx_UserOnboardingTask_description {
+            font-size: $font-12px;
+        }
+    }
+
+    .mx_UserOnboardingTask_action.mx_AccessibleButton {
+        grid-column: 3;
+        min-width: 180px;
+
+        @media (max-width: 800px) {
+            grid-column: 2;
+            margin-top: -16px;
+        }
+    }
+
+    &.mx_UserOnboardingTask_completed {
+        .mx_UserOnboardingTask_number {
+            &::before {
+                content: "";
+                position: absolute;
+                inset: -2px;
+                background: $accent;
+                border-radius: 32px;
+
+                animation-duration: 300ms;
+                animation-fill-mode: both;
+                animation-name: mx_UserOnboardingTask_spring;
+                will-change: opacity, transform;
+            }
+
+            &::after {
+                background-color: $background;
+                content: "";
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+                width: 16px;
+                height: 16px;
+                position: absolute;
+                left: calc(50% - 8px);
+                top: calc(50% - 8px);
+                mask-image: url("$(res)/img/element-icons/check-white.svg");
+
+                animation-duration: 300ms;
+                animation-fill-mode: both;
+                animation-name: mx_UserOnboardingTask_spring;
+                will-change: opacity, transform;
+            }
+        }
+
+        .mx_UserOnboardingTask_content {
+            opacity: 0.6;
+        }
+    }
+}
+
+@keyframes mx_UserOnboardingTask_spring {
+    0% {
+        opacity: 0;
+        transform: scale(0.6);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1.2);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}

src/MatrixClientPeg.ts

@@ -98,6 +98,12 @@ export interface IMatrixClientPeg {
      */
     userRegisteredWithinLastHours(hours: number): boolean;
 
+    /**
+     * If the current user has been registered by this device then this
+     * returns a boolean of whether it was after a given timestamp.
+     */
+    userRegisteredAfter(date: Date): boolean;
+
     /**
      * Replace this MatrixClientPeg's client with a client instance that has
      * homeserver / identity server URLs and active credentials
@@ -168,6 +174,15 @@ class MatrixClientPegClass implements IMatrixClientPeg {
         }
     }
 
+    public userRegisteredAfter(timestamp: Date): boolean {
+        try {
+            const registrationTime = parseInt(window.localStorage.getItem("mx_registration_time"), 10);
+            return timestamp.getTime() <= registrationTime;
+        } catch (e) {
+            return false;
+        }
+    }
+
     public replaceUsingCreds(creds: IMatrixClientCreds): void {
         this.currentClientCreds = creds;
         this.createClient(creds);

src/Notifier.ts

@@ -23,8 +23,12 @@ import { ClientEvent } from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MsgType } from "matrix-js-sdk/src/@types/event";
 import { M_LOCATION } from "matrix-js-sdk/src/@types/location";
+import {
+    PermissionChanged as PermissionChangedEvent,
+} from "@matrix-org/analytics-events/types/typescript/PermissionChanged";
 
 import { MatrixClientPeg } from './MatrixClientPeg';
+import { PosthogAnalytics } from "./PosthogAnalytics";
 import SdkConfig from './SdkConfig';
 import PlatformPeg from './PlatformPeg';
 import * as TextForEvent from './TextForEvent';
@@ -254,12 +258,23 @@ export const Notifier = {
                 }
 
                 if (callback) callback();
+
+                PosthogAnalytics.instance.trackEvent<PermissionChangedEvent>({
+                    eventName: "PermissionChanged",
+                    permission: "Notification",
+                    granted: true,
+                });
                 dis.dispatch({
                     action: "notifier_enabled",
                     value: true,
                 });
             });
         } else {
+            PosthogAnalytics.instance.trackEvent<PermissionChangedEvent>({
+                eventName: "PermissionChanged",
+                permission: "Notification",
+                granted: false,
+            });
             dis.dispatch({
                 action: "notifier_enabled",
                 value: false,

src/components/structures/LoggedInView.tsx

@@ -34,7 +34,6 @@ import { SettingLevel } from "../../settings/SettingLevel";
 import ResizeHandle from '../views/elements/ResizeHandle';
 import { CollapseDistributor, Resizer } from '../../resizer';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
-import HomePage from "./HomePage";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import PlatformPeg from "../../PlatformPeg";
 import { DefaultTagID } from "../../stores/room-list/models";
@@ -71,6 +70,7 @@ import { SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload
 import LegacyGroupView from "./LegacyGroupView";
 import { IConfigOptions } from "../../IConfigOptions";
 import LeftPanelLiveShareWarning from '../views/beacon/LeftPanelLiveShareWarning';
+import { UserOnboardingPage } from '../views/user-onboarding/UserOnboardingPage';
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -635,7 +635,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                 break;
 
             case PageTypes.HomePage:
-                pageElement = <HomePage justRegistered={this.props.justRegistered} />;
+                pageElement = <UserOnboardingPage justRegistered={this.props.justRegistered} />;
                 break;
 
             case PageTypes.UserView:

src/components/structures/UserView.tsx

@@ -22,13 +22,13 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import Modal from '../../Modal';
 import { _t } from '../../languageHandler';
-import HomePage from "./HomePage";
 import ErrorDialog from "../views/dialogs/ErrorDialog";
 import MainSplit from "./MainSplit";
 import RightPanel from "./RightPanel";
 import Spinner from "../views/elements/Spinner";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
+import { UserOnboardingPage } from "../views/user-onboarding/UserOnboardingPage";
 
 interface IProps {
     userId?: string;
@@ -92,7 +92,7 @@ export default class UserView extends React.Component<IProps, IState> {
                 resizeNotifier={this.props.resizeNotifier}
             />;
             return (<MainSplit panel={panel} resizeNotifier={this.props.resizeNotifier}>
-                <HomePage />
+                <UserOnboardingPage />
             </MainSplit>);
         } else {
             return (<div />);

src/components/views/elements/AccessibleButton.tsx

@@ -14,7 +14,7 @@
  limitations under the License.
  */
 
-import React, { ReactHTML } from 'react';
+import React, { HTMLAttributes, InputHTMLAttributes, ReactHTML, ReactNode } from 'react';
 import classnames from 'classnames';
 
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
@@ -35,15 +35,30 @@ type AccessibleButtonKind = | 'primary'
     | 'confirm_sm'
     | 'cancel_sm';
 
+/**
+ * This type construct allows us to specifically pass those props down to the element we’re creating that the element
+ * actually supports.
+ *
+ * e.g., if element is set to "a", we’ll support href and target, if it’s set to "input", we support type.
+ *
+ * To remain compatible with existing code, we’ll continue to support InputHTMLAttributes<Element>
+ */
+type DynamicHtmlElementProps<T extends keyof JSX.IntrinsicElements> =
+    JSX.IntrinsicElements[T] extends HTMLAttributes<{}> ? DynamicElementProps<T> : DynamicElementProps<"div">;
+type DynamicElementProps<T extends keyof JSX.IntrinsicElements> =
+    Partial<Omit<JSX.IntrinsicElements[T], 'ref' | 'onClick' | 'onMouseDown' | 'onKeyUp' | 'onKeyDown'>>
+    & Omit<InputHTMLAttributes<Element>, 'onClick'>;
+
 /**
  * children: React's magic prop. Represents all children given to the element.
  * element:  (optional) The base element type. "div" by default.
  * onClick:  (required) Event handler for button activation. Should be
  *           implemented exactly like a normal onClick handler.
  */
-interface IProps extends React.InputHTMLAttributes<Element> {
+type IProps<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> & {
     inputRef?: React.Ref<Element>;
-    element?: keyof ReactHTML;
+    element?: T;
+    children?: ReactNode | undefined;
     // The kind of button, similar to how Bootstrap works.
     // See available classes for AccessibleButton for options.
     kind?: AccessibleButtonKind | string;
@@ -55,7 +70,7 @@ interface IProps extends React.InputHTMLAttributes<Element> {
     className?: string;
     triggerOnMouseDown?: boolean;
     onClick(e?: ButtonEvent): void | Promise<void>;
-}
+};
 
 interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
     ref?: React.Ref<Element>;
@@ -69,7 +84,7 @@ interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
  * @param {Object} props  react element properties
  * @returns {Object} rendered react
  */
-export default function AccessibleButton({
+export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>({
     element,
     onClick,
     children,
@@ -81,7 +96,7 @@ export default function AccessibleButton({
     onKeyUp,
     triggerOnMouseDown,
     ...restProps
-}: IProps) {
+}: IProps<T>) {
     const newProps: IAccessibleButtonProps = restProps;
     if (disabled) {
         newProps["aria-disabled"] = true;

src/components/views/elements/ProgressBar.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020,2022 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,13 +16,20 @@ limitations under the License.
 
 import React from "react";
 
+import { useSmoothAnimation } from "../../../hooks/useSmoothAnimation";
+
 interface IProps {
     value: number;
     max: number;
+    animated?: boolean;
 }
 
-const ProgressBar: React.FC<IProps> = ({ value, max }) => {
+const PROGRESS_BAR_ANIMATION_DURATION = 300;
-    return <progress className="mx_ProgressBar" max={max} value={value} />;
+const ProgressBar: React.FC<IProps> = ({ value, max, animated }) => {
+    // Animating progress bars via CSS transition isn’t possible in all of our supported browsers yet.
+    // As workaround, we’re using animations through JS requestAnimationFrame
+    const currentValue = useSmoothAnimation(0, value, PROGRESS_BAR_ANIMATION_DURATION, animated);
+    return <progress className="mx_ProgressBar" max={max} value={currentValue} />;
 };
 
 export default ProgressBar;

src/components/views/settings/ProfileSettings.tsx

@@ -30,6 +30,7 @@ import AvatarSetting from './AvatarSetting';
 import ExternalLink from '../elements/ExternalLink';
 import UserIdentifierCustomisations from '../../../customisations/UserIdentifier';
 import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
+import PosthogTrackers from '../../../PosthogTrackers';
 
 interface IState {
     userId?: string;
@@ -189,7 +190,10 @@ export default class ProfileSettings extends React.Component<{}, IState> {
                     type="file"
                     ref={this.avatarUpload}
                     className="mx_ProfileSettings_avatarUpload"
-                    onClick={chromeFileInputFix}
+                    onClick={(ev) => {
+                        chromeFileInputFix(ev);
+                        PosthogTrackers.trackInteraction("WebProfileSettingsAvatarUploadButton", ev);
+                    }}
                     onChange={this.onAvatarChanged}
                     accept="image/*"
                 />

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

@@ -18,6 +18,7 @@ limitations under the License.
 import React from 'react';
 
 import { _t } from "../../../../../languageHandler";
+import { UseCase } from "../../../../../settings/enums/UseCase";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import Field from "../../../elements/Field";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
@@ -28,6 +29,7 @@ import { UserTab } from "../../../dialogs/UserTab";
 import { OpenToTabPayload } from "../../../../../dispatcher/payloads/OpenToTabPayload";
 import { Action } from "../../../../../dispatcher/actions";
 import SdkConfig from "../../../../../SdkConfig";
+import { showUserOnboardingPage } from "../../../user-onboarding/UserOnboardingPage";
 
 interface IProps {
     closeSettingsFn(success: boolean): void;
@@ -143,14 +145,21 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
     };
 
     render() {
+        const useCase = SettingsStore.getValue<UseCase | null>("FTUE.useCaseSelection");
+        const roomListSettings = PreferencesUserSettingsTab.ROOM_LIST_SETTINGS
+            // Only show the breadcrumbs setting if breadcrumbs v2 is disabled
+            .filter(it => it !== "breadcrumbs" || !SettingsStore.getValue("feature_breadcrumbs_v2"))
+            // Only show the user onboarding setting if the user should see the user onboarding page
+            .filter(it => it !== "FTUE.userOnboardingButton" || showUserOnboardingPage(useCase));
+
         return (
             <div className="mx_SettingsTab mx_PreferencesUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{ _t("Preferences") }</div>
 
-                { !SettingsStore.getValue("feature_breadcrumbs_v2") &&
+                { roomListSettings.length > 0 &&
                     <div className="mx_SettingsTab_section">
                         <span className="mx_SettingsTab_subheading">{ _t("Room list") }</span>
-                        { this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS) }
+                        { this.renderGroup(roomListSettings) }
                     </div>
                 }
 

src/components/views/user-onboarding/UserOnboardingHeader.tsx

@@ -0,0 +1,98 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import { _t } from "../../../languageHandler";
+import PosthogTrackers from "../../../PosthogTrackers";
+import SdkConfig from "../../../SdkConfig";
+import { UseCase } from "../../../settings/enums/UseCase";
+import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton";
+import Heading from "../../views/typography/Heading";
+
+const onClickSendDm = (ev: ButtonEvent) => {
+    PosthogTrackers.trackInteraction("WebUserOnboardingHeaderSendDm", ev);
+    defaultDispatcher.dispatch({ action: 'view_create_chat' });
+};
+
+interface Props {
+    useCase: UseCase;
+}
+
+export function UserOnboardingHeader({ useCase }: Props) {
+    let title: string;
+    let description: string;
+    let image;
+    let actionLabel: string;
+
+    switch (useCase) {
+        case UseCase.PersonalMessaging:
+            title = _t("Secure messaging for friends and family");
+            description = _t("With free end-to-end encrypted messaging, and unlimited voice and video calls, " +
+                "%(brand)s is a great way to stay in touch.", {
+                brand: SdkConfig.get("brand"),
+            });
+            image = require("../../../../res/img/user-onboarding/PersonalMessaging.png");
+            actionLabel = _t("Start your first chat");
+            break;
+        case UseCase.WorkMessaging:
+            title = _t("Secure messaging for work");
+            description = _t("With free end-to-end encrypted messaging, and unlimited voice and video calls," +
+                " %(brand)s is a great way to stay in touch.", {
+                brand: SdkConfig.get("brand"),
+            });
+            image = require("../../../../res/img/user-onboarding/WorkMessaging.png");
+            actionLabel = _t("Find your co-workers");
+            break;
+        case UseCase.CommunityMessaging:
+            title = _t("Community ownership");
+            description = _t("Keep ownership and control of community discussion.\n" +
+                "Scale to support millions, with powerful moderation and interoperability.");
+            image = require("../../../../res/img/user-onboarding/CommunityMessaging.png");
+            actionLabel = _t("Find your people");
+            break;
+        default:
+            title = _t("Welcome to %(brand)s", {
+                brand: SdkConfig.get("brand"),
+            });
+            description = _t("With free end-to-end encrypted messaging, and unlimited voice and video calls," +
+                " %(brand)s is a great way to stay in touch.", {
+                brand: SdkConfig.get("brand"),
+            });
+            image = require("../../../../res/img/user-onboarding/PersonalMessaging.png");
+            actionLabel = _t("Start your first chat");
+            break;
+    }
+
+    return (
+        <div className="mx_UserOnboardingHeader">
+            <div className="mx_UserOnboardingHeader_content">
+                <Heading size="h1">
+                    { title }
+                    <span className="mx_UserOnboardingHeader_dot">.</span>
+                </Heading>
+                <p>
+                    { description }
+                </p>
+                <AccessibleButton onClick={onClickSendDm} kind="primary">
+                    { actionLabel }
+                </AccessibleButton>
+            </div>
+            <img className="mx_UserOnboardingHeader_image" src={image} alt="" />
+        </div>
+    );
+}

src/components/views/user-onboarding/UserOnboardingList.tsx

@@ -0,0 +1,66 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+import { useMemo } from "react";
+
+import { UserOnboardingTask as Task } from "../../../hooks/useUserOnboardingTasks";
+import { _t } from "../../../languageHandler";
+import SdkConfig from "../../../SdkConfig";
+import ProgressBar from "../../views/elements/ProgressBar";
+import Heading from "../../views/typography/Heading";
+import { UserOnboardingTask } from "./UserOnboardingTask";
+
+interface Props {
+    completedTasks: Task[];
+    waitingTasks: Task[];
+}
+
+export function UserOnboardingList({ completedTasks, waitingTasks }: Props) {
+    const completed = completedTasks.length;
+    const waiting = waitingTasks.length;
+    const total = completed + waiting;
+
+    const tasks = useMemo(() => [
+        ...completedTasks.map((it): [Task, boolean] => [it, true]),
+        ...waitingTasks.map((it): [Task, boolean] => [it, false]),
+    ], [completedTasks, waitingTasks]);
+
+    return (
+        <div className="mx_UserOnboardingList">
+            <div className="mx_UserOnboardingList_header">
+                <Heading size="h3" className="mx_UserOnboardingList_title">
+                    { waiting > 0 ? _t("Only %(count)s steps to go", {
+                        count: waiting,
+                    }) : _t("You did it!") }
+                </Heading>
+                <div className="mx_UserOnboardingList_hint">
+                    { _t("Complete these to get the most out of %(brand)s", {
+                        brand: SdkConfig.get("brand"),
+                    }) }
+                </div>
+            </div>
+            <div className="mx_UserOnboardingList_progress">
+                <ProgressBar value={completed} max={total} animated />
+            </div>
+            <ol className="mx_UserOnboardingList_list">
+                { tasks.map(([task, completed]) => (
+                    <UserOnboardingTask key={task.title} completed={completed} task={task} />
+                )) }
+            </ol>
+        </div>
+    );
+}

src/components/views/user-onboarding/UserOnboardingPage.tsx

@@ -0,0 +1,84 @@
+/*
+Copyright 2020-2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useEffect, useState } from "react";
+import * as React from "react";
+
+import { useInitialSyncComplete } from "../../../hooks/useIsInitialSyncComplete";
+import { useSettingValue } from "../../../hooks/useSettings";
+import { useUserOnboardingTasks } from "../../../hooks/useUserOnboardingTasks";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import SdkConfig from "../../../SdkConfig";
+import { UseCase } from "../../../settings/enums/UseCase";
+import { getHomePageUrl } from "../../../utils/pages";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import EmbeddedPage from "../../structures/EmbeddedPage";
+import HomePage from "../../structures/HomePage";
+import { UserOnboardingHeader } from "./UserOnboardingHeader";
+import { UserOnboardingList } from "./UserOnboardingList";
+
+interface Props {
+    justRegistered?: boolean;
+}
+
+// We decided to only show the new user onboarding page to new users
+// For now, that means we set the cutoff at 2022-07-01 00:00 UTC
+const USER_ONBOARDING_CUTOFF_DATE = new Date(1_656_633_600);
+export function showUserOnboardingPage(useCase: UseCase): boolean {
+    return useCase !== null || MatrixClientPeg.userRegisteredAfter(USER_ONBOARDING_CUTOFF_DATE);
+}
+
+const ANIMATION_DURATION = 2800;
+export function UserOnboardingPage({ justRegistered = false }: Props) {
+    const config = SdkConfig.get();
+    const pageUrl = getHomePageUrl(config);
+
+    const useCase = useSettingValue<UseCase | null>("FTUE.useCaseSelection");
+    const [completedTasks, waitingTasks] = useUserOnboardingTasks();
+
+    const initialSyncComplete = useInitialSyncComplete();
+    const [showList, setShowList] = useState<boolean>(false);
+    useEffect(() => {
+        if (initialSyncComplete) {
+            let handler: number | null = setTimeout(() => {
+                handler = null;
+                setShowList(true);
+            }, ANIMATION_DURATION);
+            return () => {
+                clearTimeout(handler);
+                handler = null;
+            };
+        } else {
+            setShowList(false);
+        }
+    }, [initialSyncComplete, setShowList]);
+
+    // Only show new onboarding list to users who registered after a given date or have chosen a use case
+    if (!showUserOnboardingPage(useCase)) {
+        return <HomePage justRegistered={justRegistered} />;
+    }
+
+    if (pageUrl) {
+        return <EmbeddedPage className="mx_HomePage" url={pageUrl} scrollbar={true} />;
+    }
+
+    return <AutoHideScrollbar className="mx_UserOnboardingPage">
+        <UserOnboardingHeader useCase={useCase} />
+        { showList && (
+            <UserOnboardingList completedTasks={completedTasks} waitingTasks={waitingTasks} />
+        ) }
+    </AutoHideScrollbar>;
+}

src/components/views/user-onboarding/UserOnboardingTask.tsx

@@ -0,0 +1,64 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import classNames from "classnames";
+import * as React from "react";
+
+import { UserOnboardingTask as Task } from "../../../hooks/useUserOnboardingTasks";
+import AccessibleButton from "../../views/elements/AccessibleButton";
+import Heading from "../../views/typography/Heading";
+
+interface Props {
+    task: Task;
+    completed?: boolean;
+}
+
+export function UserOnboardingTask({ task, completed = false }: Props) {
+    return (
+        <li className={classNames("mx_UserOnboardingTask", {
+            "mx_UserOnboardingTask_completed": completed,
+        })}>
+            <div
+                className="mx_UserOnboardingTask_number"
+                role="checkbox"
+                aria-disabled="true"
+                aria-checked={completed}
+                aria-labelledby={`mx_UserOnboardingTask_${task.id}`}
+            />
+            <div
+                id={`mx_UserOnboardingTask_${task.id}`}
+                className="mx_UserOnboardingTask_content">
+                <Heading size="h4" className="mx_UserOnboardingTask_title">
+                    { task.title }
+                </Heading>
+                <div className="mx_UserOnboardingTask_description">
+                    { task.description }
+                </div>
+            </div>
+            { task.action && (!task.action.hideOnComplete || !completed) && (
+                <AccessibleButton
+                    element="a"
+                    className="mx_UserOnboardingTask_action"
+                    kind="primary_outline"
+                    href={task.action.href}
+                    target="_blank"
+                    onClick={task.action.onClick}>
+                    { task.action.label }
+                </AccessibleButton>
+            ) }
+        </li>
+    );
+}

src/hooks/useAnimation.ts

@@ -0,0 +1,55 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { logger } from "matrix-js-sdk/src/logger";
+import { useCallback, useEffect, useRef } from "react";
+
+import SettingsStore from "../settings/SettingsStore";
+
+const debuglog = (...args: any[]) => {
+    if (SettingsStore.getValue("debug_animation")) {
+        logger.log.call(console, "Animation debuglog:", ...args);
+    }
+};
+
+export function useAnimation(enabled: boolean, callback: (timestamp: DOMHighResTimeStamp) => boolean) {
+    const handle = useRef<number | null>(null);
+
+    const handler = useCallback(
+        (timestamp: DOMHighResTimeStamp) => {
+            if (callback(timestamp)) {
+                handle.current = requestAnimationFrame(handler);
+            } else {
+                debuglog("Finished animation!");
+            }
+        },
+        [callback],
+    );
+
+    useEffect(() => {
+        debuglog("Started animation!");
+        if (enabled) {
+            handle.current = requestAnimationFrame(handler);
+        }
+        return () => {
+            if (handle.current) {
+                debuglog("Aborted animation!");
+                cancelAnimationFrame(handle.current);
+                handle.current = null;
+            }
+        };
+    }, [enabled, handler]);
+}

src/hooks/useIsInitialSyncComplete.ts

@@ -0,0 +1,25 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { ClientEvent } from "matrix-js-sdk/src/matrix";
+
+import { MatrixClientPeg } from "../MatrixClientPeg";
+import { useEventEmitterState } from "./useEventEmitter";
+
+export function useInitialSyncComplete(): boolean {
+    const cli = MatrixClientPeg.get();
+    return useEventEmitterState(cli, ClientEvent.Sync, () => cli.isInitialSyncComplete());
+}

src/hooks/useSmoothAnimation.ts

@@ -0,0 +1,85 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { logger } from "matrix-js-sdk/src/logger";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import SettingsStore from "../settings/SettingsStore";
+import { useAnimation } from "./useAnimation";
+
+const debuglog = (...args: any[]) => {
+    if (SettingsStore.getValue("debug_animation")) {
+        logger.log.call(console, "Animation debuglog:", ...args);
+    }
+};
+
+/**
+ * Utility function to smoothly animate to a certain target value
+ * @param initialValue Initial value to be used as initial starting point
+ * @param targetValue Desired value to animate to (can be changed repeatedly to whatever is current at that time)
+ * @param duration Duration that each animation should take
+ * @param enabled Whether the animation should run or not
+ */
+export function useSmoothAnimation(
+    initialValue: number,
+    targetValue: number,
+    duration: number,
+    enabled: boolean,
+): number {
+    const state = useRef<{ timestamp: DOMHighResTimeStamp | null, value: number }>({
+        timestamp: null,
+        value: initialValue,
+    });
+    const [currentValue, setCurrentValue] = useState<number>(initialValue);
+    const [currentStepSize, setCurrentStepSize] = useState<number>(0);
+
+    useEffect(() => {
+        const totalDelta = targetValue - state.current.value;
+        setCurrentStepSize(totalDelta / duration);
+        state.current = { ...state.current, timestamp: null };
+    }, [duration, targetValue]);
+
+    const update = useCallback(
+        (timestamp: DOMHighResTimeStamp): boolean => {
+            if (!state.current.timestamp) {
+                state.current = { ...state.current, timestamp };
+                return true;
+            }
+
+            if (Math.abs(currentStepSize) < Number.EPSILON) {
+                return false;
+            }
+
+            const timeDelta = timestamp - state.current.timestamp;
+            const valueDelta = currentStepSize * timeDelta;
+            const maxValueDelta = targetValue - state.current.value;
+            const clampedValueDelta = Math.sign(valueDelta) * Math.min(Math.abs(maxValueDelta), Math.abs(valueDelta));
+            const value = state.current.value + clampedValueDelta;
+
+            debuglog(`Animating to ${targetValue} at ${value} timeDelta=${timeDelta}, valueDelta=${valueDelta}`);
+
+            setCurrentValue(value);
+            state.current = { value, timestamp };
+
+            return Math.abs(maxValueDelta) > Number.EPSILON;
+        },
+        [currentStepSize, targetValue],
+    );
+
+    useAnimation(enabled, update);
+
+    return currentValue;
+}

src/hooks/useUserOnboardingContext.ts

@@ -0,0 +1,62 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useCallback, useEffect, useState } from "react";
+import { ClientEvent, IMyDevice, Room } from "matrix-js-sdk/src/matrix";
+
+import { MatrixClientPeg } from "../MatrixClientPeg";
+import DMRoomMap from "../utils/DMRoomMap";
+import { useEventEmitter } from "./useEventEmitter";
+
+export interface UserOnboardingContext {
+    avatar: string | null;
+    myDevice: string;
+    devices: IMyDevice[];
+    dmRooms: {[userId: string]: Room};
+}
+
+export function useUserOnboardingContext(): UserOnboardingContext | null {
+    const [context, setContext] = useState<UserOnboardingContext | null>(null);
+
+    const cli = MatrixClientPeg.get();
+    const handler = useCallback(async () => {
+        const profile = await cli.getProfileInfo(cli.getUserId());
+
+        const myDevice = cli.getDeviceId();
+        const devices = await cli.getDevices();
+
+        const dmRooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals() ?? {};
+        setContext({
+            avatar: profile?.avatar_url ?? null,
+            myDevice,
+            devices: devices.devices,
+            dmRooms: dmRooms,
+        });
+    }, [cli]);
+
+    useEventEmitter(cli, ClientEvent.AccountData, handler);
+    useEffect(() => {
+        const handle = setInterval(handler, 2000);
+        handler();
+        return () => {
+            if (handle) {
+                clearInterval(handle);
+            }
+        };
+    }, [handler]);
+
+    return context;
+}

src/hooks/useUserOnboardingTasks.ts

@@ -0,0 +1,150 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useMemo } from "react";
+
+import { UserTab } from "../components/views/dialogs/UserTab";
+import { ButtonEvent } from "../components/views/elements/AccessibleButton";
+import { Action } from "../dispatcher/actions";
+import defaultDispatcher from "../dispatcher/dispatcher";
+import { _t } from "../languageHandler";
+import { Notifier } from "../Notifier";
+import PosthogTrackers from "../PosthogTrackers";
+import { UseCase } from "../settings/enums/UseCase";
+import { useSettingValue } from "./useSettings";
+import { UserOnboardingContext, useUserOnboardingContext } from "./useUserOnboardingContext";
+
+export interface UserOnboardingTask {
+    id: string;
+    title: string;
+    description: string;
+    relevant?: UseCase[];
+    action?: {
+        label: string;
+        onClick?: (ev?: ButtonEvent) => void;
+        href?: string;
+        hideOnComplete?: boolean;
+    };
+}
+
+interface InternalUserOnboardingTask extends UserOnboardingTask {
+    completed: (ctx: UserOnboardingContext) => boolean;
+}
+
+const hasOpenDMs = (ctx: UserOnboardingContext) => Boolean(Object.entries(ctx.dmRooms).length);
+
+const onClickStartDm = (ev: ButtonEvent) => {
+    PosthogTrackers.trackInteraction("WebUserOnboardingTaskSendDm", ev);
+    defaultDispatcher.dispatch({ action: 'view_create_chat' });
+};
+
+const tasks: InternalUserOnboardingTask[] = [
+    {
+        id: "create-account",
+        title: _t("Create account"),
+        description: _t("You made it!"),
+        completed: () => true,
+    },
+    {
+        id: "find-friends",
+        title: _t("Find and invite your friends"),
+        description: _t("It’s what you’re here for, so lets get to it"),
+        completed: hasOpenDMs,
+        relevant: [UseCase.PersonalMessaging, UseCase.Skip],
+        action: {
+            label: _t("Find friends"),
+            onClick: onClickStartDm,
+        },
+    },
+    {
+        id: "find-coworkers",
+        title: _t("Find and invite your co-workers"),
+        description: _t("Get stuff done by finding your teammates"),
+        completed: hasOpenDMs,
+        relevant: [UseCase.WorkMessaging],
+        action: {
+            label: _t("Find people"),
+            onClick: onClickStartDm,
+        },
+    },
+    {
+        id: "find-community-members",
+        title: _t("Find and invite your community members"),
+        description: _t("Get stuff done by finding your teammates"),
+        completed: hasOpenDMs,
+        relevant: [UseCase.CommunityMessaging],
+        action: {
+            label: _t("Find people"),
+            onClick: onClickStartDm,
+        },
+    },
+    {
+        id: "download-apps",
+        title: _t("Download Element"),
+        description: _t("Don’t miss a thing by taking Element with you"),
+        completed: (ctx: UserOnboardingContext) => {
+            return Boolean(ctx.devices.filter(it => it.device_id !== ctx.myDevice).length);
+        },
+        action: {
+            label: _t("Download apps"),
+            href: "https://element.io/get-started#download",
+            onClick: (ev: ButtonEvent) => {
+                PosthogTrackers.trackInteraction("WebUserOnboardingTaskDownloadApps", ev);
+            },
+        },
+    },
+    {
+        id: "setup-profile",
+        title: _t("Set up your profile"),
+        description: _t("Make sure people know it’s really you"),
+        completed: (info: UserOnboardingContext) => Boolean(info.avatar),
+        action: {
+            label: _t("Your profile"),
+            onClick: (ev: ButtonEvent) => {
+                PosthogTrackers.trackInteraction("WebUserOnboardingTaskSetupProfile", ev);
+                defaultDispatcher.dispatch({
+                    action: Action.ViewUserSettings,
+                    initialTabId: UserTab.General,
+                });
+            },
+        },
+    },
+    {
+        id: "permission-notifications",
+        title: _t("Turn on notifications"),
+        description: _t("Don’t miss a reply or important message"),
+        completed: () => Notifier.isPossible(),
+        action: {
+            label: _t("Enable notifications"),
+            onClick: (ev: ButtonEvent) => {
+                PosthogTrackers.trackInteraction("WebUserOnboardingTaskEnableNotifications", ev);
+                Notifier.setEnabled(true);
+            },
+            hideOnComplete: true,
+        },
+    },
+];
+
+export function useUserOnboardingTasks(): [UserOnboardingTask[], UserOnboardingTask[]] {
+    const useCase = useSettingValue<UseCase | null>("FTUE.useCaseSelection") ?? UseCase.Skip;
+    const relevantTasks = useMemo(
+        () => tasks.filter(it => !it.relevant || it.relevant.includes(useCase)),
+        [useCase],
+    );
+    const onboardingInfo = useUserOnboardingContext();
+    const completedTasks = relevantTasks.filter(it => onboardingInfo && it.completed(onboardingInfo));
+    return [completedTasks, relevantTasks.filter(it => !completedTasks.includes(it))];
+}

src/i18n/strings/en_EN.json

@@ -993,6 +993,24 @@
     "When rooms are upgraded": "When rooms are upgraded",
     "My Ban List": "My Ban List",
     "This is your list of users/servers you have blocked - don't leave the room!": "This is your list of users/servers you have blocked - don't leave the room!",
+    "Create account": "Create account",
+    "You made it!": "You made it!",
+    "Find and invite your friends": "Find and invite your friends",
+    "It’s what you’re here for, so lets get to it": "It’s what you’re here for, so lets get to it",
+    "Find friends": "Find friends",
+    "Find and invite your co-workers": "Find and invite your co-workers",
+    "Get stuff done by finding your teammates": "Get stuff done by finding your teammates",
+    "Find people": "Find people",
+    "Find and invite your community members": "Find and invite your community members",
+    "Download Element": "Download Element",
+    "Don’t miss a thing by taking Element with you": "Don’t miss a thing by taking Element with you",
+    "Download apps": "Download apps",
+    "Set up your profile": "Set up your profile",
+    "Make sure people know it’s really you": "Make sure people know it’s really you",
+    "Your profile": "Your profile",
+    "Turn on notifications": "Turn on notifications",
+    "Don’t miss a reply or important message": "Don’t miss a reply or important message",
+    "Enable notifications": "Enable notifications",
     "Sends the given message with confetti": "Sends the given message with confetti",
     "sends confetti": "sends confetti",
     "Sends the given message with fireworks": "Sends the given message with fireworks",
@@ -1129,6 +1147,19 @@
     "Anchor": "Anchor",
     "Headphones": "Headphones",
     "Folder": "Folder",
+    "Secure messaging for friends and family": "Secure messaging for friends and family",
+    "With free end-to-end encrypted messaging, and unlimited voice and video calls, %(brand)s is a great way to stay in touch.": "With free end-to-end encrypted messaging, and unlimited voice and video calls, %(brand)s is a great way to stay in touch.",
+    "Start your first chat": "Start your first chat",
+    "Secure messaging for work": "Secure messaging for work",
+    "Find your co-workers": "Find your co-workers",
+    "Community ownership": "Community ownership",
+    "Keep ownership and control of community discussion.\nScale to support millions, with powerful moderation and interoperability.": "Keep ownership and control of community discussion.\nScale to support millions, with powerful moderation and interoperability.",
+    "Find your people": "Find your people",
+    "Welcome to %(brand)s": "Welcome to %(brand)s",
+    "Only %(count)s steps to go|other": "Only %(count)s steps to go",
+    "Only %(count)s steps to go|one": "Only %(count)s step to go",
+    "You did it!": "You did it!",
+    "Complete these to get the most out of %(brand)s": "Complete these to get the most out of %(brand)s",
     "Your server isn't responding to some <a>requests</a>.": "Your server isn't responding to some <a>requests</a>.",
     "Decline (%(counter)s)": "Decline (%(counter)s)",
     "Accept <policyLink /> to continue:": "Accept <policyLink /> to continue:",
@@ -3253,7 +3284,6 @@
     "Continue with previous account": "Continue with previous account",
     "<a>Log in</a> to your new account.": "<a>Log in</a> to your new account.",
     "Registration Successful": "Registration Successful",
-    "Create account": "Create account",
     "Host account on": "Host account on",
     "Decide where your account is hosted": "Decide where your account is hosted",
     "It looks like you don't have a Security Key or any other devices you can verify against.  This device will not be able to access old encrypted messages. In order to verify your identity on this device, you'll need to reset your verification keys.": "It looks like you don't have a Security Key or any other devices you can verify against.  This device will not be able to access old encrypted messages. In order to verify your identity on this device, you'll need to reset your verification keys.",

src/settings/Settings.tsx

@@ -952,6 +952,10 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
         default: false,
     },
+    "debug_animation": {
+        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
+        default: false,
+    },
     "audioInputMuted": {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
         default: false,

yarn.lock

@@ -1508,10 +1508,10 @@
   resolved "https://registry.yarnpkg.com/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz#497c67a1cef50d1a2459ba60f315e448d2ad87fe"
   integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==
 
-"@matrix-org/analytics-events@^0.1.2":
+"@matrix-org/analytics-events@^0.2.0":
-  version "0.1.2"
+  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.1.2.tgz#820b1a78d1471f21da96274d92eb161b41f9e880"
+  resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.2.0.tgz#453925c939ecdd5ca6c797d293deb8cf0933f1b8"
-  integrity sha512-TumnmENiuTtSmfcVwzovLDq4pRgRlUmuq1bxOtli9XWMgscs3Z6URu5PJcvuFj87L7bKJrGCNS3zR+DMUxc7kg==
+  integrity sha512-+0/Sydm4MNOcqd8iySJmojVPB74Axba4BXlwTsiKmL5fgYqdUkwmqkO39K7Pn8i+a+8pg11oNvBPkpWs3O5Qww==
 
 "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz":
   version "3.2.8"