feat: start working on account create success screen

on conversations view

_locales/en/messages.json

@@ -586,5 +586,7 @@
   "privacyPolicy": "Privacy Policy",
   "displayNamePick": "Pick your display name",
   "displayNameDescription": "It can be your real name, an alias, or anything else you like — and you can change it any time.",
-  "invalidDisplayNameTooLong": "Please enter a shorter display name."
+  "invalidDisplayNameTooLong": "Please enter a shorter display name.",
+  "onboardingAccountCreated": "Account Created",
+  "onboardingBubbleWelcomeToSession": "Welcome to Session"
 }

ts/components/EmptyMessageView.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+import { useMount } from 'react-use';
 import styled from 'styled-components';
 import { Flex } from './basic/Flex';
 
@@ -23,9 +25,66 @@ const StyledSessionFullLogo = styled(Flex)`
   }
 `;
 
+const StyledPartyPopper = styled.img`
+  height: 180px;
+  margin: 0 auto;
+  -webkit-user-drag: none;
+`;
+
+const StyledHeading = styled.p`
+  padding: 0;
+  margin: 0;
+  font-size: var(--font-size-h1);
+  font-weight: 700;
+`;
+
+const StyledSessionWelcome = styled.p`
+  padding: 0;
+  margin: 0;
+  color: var(--primary-color);
+  font-size: var(--font-size-h2);
+`;
+
 export const EmptyMessageView = () => {
+  const [newAccountCreated, setNewAccountCreated] = useState(false);
+
+  useMount(() => {
+    const launchCount = window.getSettingValue('launch-count');
+    window.log.debug(`WIP: [launch-count] ${launchCount}`);
+
+    if (!launchCount || launchCount < 1) {
+      setNewAccountCreated(true);
+    }
+  });
+
+  if (newAccountCreated) {
+    return (
+      <StyledPlaceholder
+        container={true}
+        className="content"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+        margin="auto"
+      >
+        <StyledPartyPopper src="images/party-popper.svg" alt="party popper emoji" />
+        <StyledHeading>{window.i18n('onboardingAccountCreated')}</StyledHeading>
+        <StyledSessionWelcome>
+          {window.i18n('onboardingBubbleWelcomeToSession')}
+        </StyledSessionWelcome>
+      </StyledPlaceholder>
+    );
+  }
+
   return (
-    <StyledPlaceholder container={true} alignItems="center">
+    <StyledPlaceholder
+      container={true}
+      className="content"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      margin="auto"
+    >
       <StyledSessionFullLogo
         container={true}
         className="content"

ts/mains/main_renderer.tsx

@@ -406,7 +406,10 @@ async function start() {
     window.showWindow();
     if (conversationKey) {
       // do not put the messageId here so the conversation is loaded on the last unread instead
-      await window.openConversationWithMessages({ conversationKey, messageId: null });
+      await window.openConversationWithMessages({
+        conversationKey,
+        messageId: null,
+      });
     } else {
       openInbox();
     }

ts/types/LocalizerKeys.ts

@@ -356,6 +356,8 @@ export type LocalizerKeys =
   | 'oceanLightThemeTitle'
   | 'offline'
   | 'ok'
+  | 'onboardingAccountCreated'
+  | 'onboardingBubbleWelcomeToSession'
   | 'onboardingTosPrivacy'
   | 'oneNonImageAtATimeToast'
   | 'onionPathIndicatorDescription'

ts/util/registration.ts

@@ -1,5 +1,6 @@
 import { Storage } from './storage';
 
+// TODO[epic=ses-50] possible to remove this code and any surrounding logic?
 async function markDone() {
   await Storage.put('chromiumRegistrationDoneEver', '');
   await Storage.put('chromiumRegistrationDone', '');