Add "Get Started" to side menu

src/components/CreateAccountModal/CreateAccountModal.tsx

@@ -29,6 +29,7 @@ const CreateAccountModal: Component<{
   const navigate = useNavigate();
 
   const onCreateAccount = () => {
+    props.onAbort && props.onAbort();
     navigate('/new');
   };
 

src/components/HomeHeader/HomeHeader.tsx

@@ -76,15 +76,6 @@ const HomeHeader: Component< { id?: string} > = (props) => {
 
   const activeUser = () => account?.activeUser;
 
-  const [showGettingStarted, setShowGettingStarted] = createSignal(false);
-  const [showLogin, setShowLogin] = createSignal(false);
-
-  const onGetStarted = () => {
-    setShowGettingStarted(true);
-  };
-
-  const doCreateAccount = () => {};
-
   return (
     <div id={props.id} class={styles.fullHeader}>
       <Show
@@ -95,8 +86,8 @@ const HomeHeader: Component< { id?: string} > = (props) => {
               <div>
                 {intl.formatMessage(t.guestUserGreeting)}
               </div>
-              <ButtonPrimary onClick={onGetStarted}>
-              {intl.formatMessage(tActions.getStarted)}
+              <ButtonPrimary onClick={account?.actions.showGetStarted}>
+                {intl.formatMessage(tActions.getStarted)}
               </ButtonPrimary>
             </div>
           </Show>
@@ -146,18 +137,6 @@ const HomeHeader: Component< { id?: string} > = (props) => {
           <div class={styles.rightCorner}></div>
         </div>
       </div>
-      <CreateAccountModal
-        open={showGettingStarted()}
-        onAbort={() => setShowGettingStarted(false)}
-        onLogin={() => {
-          setShowGettingStarted(false);
-          setShowLogin(true);
-        }}
-      />
-      <LoginModal
-        open={showLogin()}
-        onAbort={() => setShowLogin(false)}
-      />
     </div>
   );
 }

src/components/NavMenu/NavMenu.module.scss

@@ -11,6 +11,21 @@
   display: grid;
   justify-content: right;
   margin-top: 15px;
+
+  .message {
+    color: var(--text-tertiary);
+    text-align: right;
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 16px;
+    margin-bottom: 4px;
+  }
+
+  .action {
+    button {
+      margin: 0;
+    }
+  }
 }
 
 @media only screen and (max-width: 720px) {

src/components/NavMenu/NavMenu.tsx

@@ -4,12 +4,13 @@ import { Component, For, Show } from 'solid-js';
 import { useAccountContext } from '../../contexts/AccountContext';
 import { useMessagesContext } from '../../contexts/MessagesContext';
 import { useNotificationsContext } from '../../contexts/NotificationsContext';
-import { navBar as t } from '../../translations';
+import { navBar as t, actions as tActions, placeholders as tPlaceholders } from '../../translations';
 import NavLink from '../NavLink/NavLink';
 import FloatingNewPostButton from '../FloatingNewPostButton/FloatingNewPostButton';
 
 import styles from './NavMenu.module.scss';
 import { hookForDev } from '../../lib/devTools';
+import ButtonPrimary from '../Buttons/ButtonPrimary';
 
 const NavMenu: Component< { id?: string } > = (props) => {
   const account = useAccountContext();
@@ -84,6 +85,19 @@ const NavMenu: Component< { id?: string } > = (props) => {
           <FloatingNewPostButton />
         </div>
       </Show>
+
+      <Show when={!account?.hasPublicKey()}>
+        <div class={styles.callToAction}>
+          <div class={styles.message}>
+            {intl.formatMessage(tPlaceholders.welcomeMessage)}
+          </div>
+          <div class={styles.action}>
+            <ButtonPrimary onClick={account?.actions.showGetStarted}>
+              {intl.formatMessage(tActions.getStarted)}
+            </ButtonPrimary>
+          </div>
+        </div>
+      </Show>
     </div>
   )
 }

src/contexts/AccountContext.tsx

@@ -30,6 +30,8 @@ import { connectRelays, connectToRelay, getDefaultRelays, getPreConfiguredRelays
 import { getPublicKey } from "../lib/nostrAPI";
 import { generateKeys } from "../lib/PrimalNostr";
 import EnterPinModal from "../components/EnterPinModal/EnterPinModal";
+import CreateAccountModal from "../components/CreateAccountModal/CreateAccountModal";
+import LoginModal from "../components/LoginModal/LoginModal";
 
 export type AccountContextStore = {
   likes: string[],
@@ -56,6 +58,8 @@ export type AccountContextStore = {
   allowlistSince: number,
   sec: string | undefined,
   showPin: string,
+  showGettingStarted: boolean,
+  showLogin: boolean,
   actions: {
     showNewNoteForm: () => void,
     hideNewNoteForm: () => void,
@@ -80,6 +84,7 @@ export type AccountContextStore = {
     removeFromAllowlist: (pubkey: string | undefined) => void,
     setSec: (sec: string | undefined) => void,
     logout: () => void,
+    showGetStarted: () => void,
   },
 }
 
@@ -107,6 +112,8 @@ const initialData = {
   allowlistSince: 0,
   sec: undefined,
   showPin: '',
+  showGettingStarted: false,
+  showLogin: false,
 };
 
 export const AccountContext = createContext<AccountContextStore>();
@@ -121,6 +128,10 @@ export function AccountProvider(props: { children: JSXElement }) {
 
   let connectedRelaysCopy: Relay[] = [];
 
+  const showGetStarted = () => {
+    updateStore('showGettingStarted', () => true);
+  }
+
   const logout = () => {
     updateStore('sec', () => undefined);
     updateStore('publicKey', () => undefined);
@@ -1228,6 +1239,7 @@ const [store, updateStore] = createStore<AccountContextStore>({
     removeFromAllowlist,
     setSec,
     logout,
+    showGetStarted,
   },
 });
 
@@ -1243,6 +1255,18 @@ const [store, updateStore] = createStore<AccountContextStore>({
         }}
         onAbort={() => updateStore('showPin', () => '')}
       />
+      <CreateAccountModal
+        open={store.showGettingStarted}
+        onAbort={() => updateStore('showGettingStarted', () => false)}
+        onLogin={() => {
+          updateStore('showGettingStarted', () => false);
+          updateStore('showLogin', () => true);
+        }}
+      />
+      <LoginModal
+        open={store.showLogin}
+        onAbort={() => updateStore('showLogin', () => false)}
+      />
     </AccountContext.Provider>
   );
 }