Prompt users to set up recovery (#30075)

* Show indicator in settings dialog when user doesn't have recovery set up

* Update settings headers to use red dot for recommended settings

* update recovery setup toast and remember if the user dismisses it

* update playwright snapshots

* use typed event emitters

* reverse logic for the account data flag

* fix comment and type

test/unit-tests/components/views/settings/__snapshots__/SettingsHeader-test.tsx.snap

@@ -5,7 +5,7 @@ exports[`<SettingsHeader /> should render the component 1`] = `
   <h2
     class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 mx_SettingsHeader"
   >
-    Settings Header 
+    Settings Header
   </h2>
 </DocumentFragment>
 `;
@@ -13,12 +13,9 @@ exports[`<SettingsHeader /> should render the component 1`] = `
 exports[`<SettingsHeader /> should render the component with the recommended tag 1`] = `
 <DocumentFragment>
   <h2
-    class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 mx_SettingsHeader"
+    class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 mx_SettingsHeader mx_SettingsHeader_recommended"
   >
-    Settings Header 
-    <span>
-      Recommended
-    </span>
+    Settings Header
   </h2>
 </DocumentFragment>
 `;

test/unit-tests/components/views/settings/encryption/ChangeRecoveryKey-test.tsx

@@ -104,12 +104,14 @@ describe("<ChangeRecoveryKey />", () => {
             expect(screen.getByText("The recovery key you entered is not correct.")).toBeInTheDocument();
             expect(asFragment()).toMatchSnapshot();
 
+            const setAccountDataSpy = jest.spyOn(matrixClient, "setAccountData");
             await userEvent.clear(input);
             // If the user enters the correct recovery key, the finish button should be enabled
             await userEvent.type(input, "encoded private key");
             await waitFor(() => expect(finishButton).not.toHaveAttribute("aria-disabled", "true"));
 
             await user.click(finishButton);
+            expect(setAccountDataSpy).toHaveBeenCalledWith("io.element.recovery", { enabled: true });
             expect(onFinish).toHaveBeenCalledWith();
         });
 

test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanel-test.tsx.snap

@@ -12,7 +12,7 @@ exports[`<RecoveryPanel /> should allow to change the recovery key when everythi
       <h2
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 mx_SettingsHeader"
       >
-        Recovery 
+        Recovery
       </h2>
       Recover your cryptographic identity and message history with a recovery key if you’ve lost all your existing devices.
     </div>
@@ -51,12 +51,9 @@ exports[`<RecoveryPanel /> should ask to set up a recovery key when there is no
       class="mx_SettingsSection_header"
     >
       <h2
-        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 mx_SettingsHeader"
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 mx_SettingsHeader mx_SettingsHeader_recommended"
       >
-        Recovery 
-        <span>
-          Recommended
-        </span>
+        Recovery
       </h2>
       Recover your cryptographic identity and message history with a recovery key if you’ve lost all your existing devices.
     </div>
@@ -97,7 +94,7 @@ exports[`<RecoveryPanel /> should be in loading state when checking the recovery
       <h2
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 mx_SettingsHeader"
       >
-        Recovery 
+        Recovery
       </h2>
       Recover your cryptographic identity and message history with a recovery key if you’ve lost all your existing devices.
     </div>

test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanelOutOfSync-test.tsx.snap

@@ -12,7 +12,7 @@ exports[`<RecoveyPanelOutOfSync /> should render 1`] = `
       <h2
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 mx_SettingsHeader"
       >
-        Recovery 
+        Recovery
       </h2>
       <div
         class="mx_SettingsSubheader"

test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap

@@ -18,7 +18,7 @@ exports[`<EncryptionUserSettingsTab /> should display a verify button when the e
           <h2
             class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 mx_SettingsHeader"
           >
-            Device not verified 
+            Device not verified
           </h2>
           <div
             class="mx_SettingsSubheader"
@@ -100,7 +100,7 @@ exports[`<EncryptionUserSettingsTab /> should display the recovery out of sync p
           <h2
             class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 mx_SettingsHeader"
           >
-            Recovery 
+            Recovery
           </h2>
           <div
             class="mx_SettingsSubheader"