Onboarding improvement

src/components/App.tsx

@@ -29,7 +29,6 @@ import FSNoteDb from '../lib/db/FSNoteDb'
 import path from 'path'
 import { useGeneralStatus } from '../lib/generalStatus'
 import { getFolderItemId } from '../lib/nav'
-import AppModeModal from './organisms/AppModeModal'
 import { useBoostNoteProtocol } from '../lib/protocol'
 import { useBoostHub, getBoostHubTeamIconUrl } from '../lib/boosthub'
 import { useDialog, DialogIconTypes } from '../lib/dialog'
@@ -50,11 +49,12 @@ import {
 } from '../lib/events'
 import {
   useCheckedFeatures,
-  featureAppModeSelect,
   featureBoostHubIntro,
 } from '../lib/checkedFeatures'
 import BoostHubIntroModal from '../components/organisms/BoostHubIntroModal'
 import { useRouteParams } from '../lib/routeParams'
+import { useCreateWorkspaceModal } from '../lib/createWorkspaceModal'
+import CreateWorkspaceModal from './organisms/CreateWorkspaceModal'
 
 const LoadingText = styled.div`
   margin: 30px;
@@ -341,6 +341,11 @@ const App = () => {
 
   const { isChecked } = useCheckedFeatures()
 
+  const {
+    showCreateWorkspaceModal,
+    toggleShowCreateWorkspaceModal,
+  } = useCreateWorkspaceModal()
+
   return (
     <ThemeProvider theme={selectTheme(preferences['general.theme'])}>
       <AppContainer
@@ -352,10 +357,11 @@ const App = () => {
           <>
             {preferences['general.showAppNavigator'] && <AppNavigator />}
             <Router />
-            {!isChecked(featureAppModeSelect) ? (
-              <AppModeModal />
-            ) : (
-              !isChecked(featureBoostHubIntro) && <BoostHubIntroModal />
+            {!isChecked(featureBoostHubIntro) && <BoostHubIntroModal />}
+            {showCreateWorkspaceModal && (
+              <CreateWorkspaceModal
+                closeModal={toggleShowCreateWorkspaceModal}
+              />
             )}
           </>
         ) : (

src/components/PreferencesModal/GeneralTab.tsx

@@ -1,11 +1,5 @@
 import React, { useCallback } from 'react'
-import {
-  Section,
-  SectionHeader,
-  SectionControl,
-  SectionSelect,
-  SectionPrimaryButton,
-} from './styled'
+import { Section, SectionHeader, SectionControl, SectionSelect } from './styled'
 import {
   usePreferences,
   GeneralThemeOptions,
@@ -15,17 +9,13 @@ import {
 } from '../../lib/preferences'
 import { useTranslation } from 'react-i18next'
 import { SelectChangeEventHandler } from '../../lib/events'
-import { useUsers } from '../../lib/accounts'
-import UserInfo from './UserInfo'
-import LoginButton from '../atoms/LoginButton'
 import { useAnalytics, analyticsEvents } from '../../lib/analytics'
 import { FormCheckItem } from '../atoms/form'
 import { NoteSortingOptions } from '../../lib/sort'
 import NoteSortingOptionsFragment from '../molecules/NoteSortingOptionsFragment'
 
 const GeneralTab = () => {
   const { preferences, setPreferences } = usePreferences()
-  const [users, { removeUser }] = useUsers()
   const { report } = useAnalytics()
 
   const selectTheme: SelectChangeEventHandler = useCallback(
@@ -97,28 +87,6 @@ const GeneralTab = () => {
 
   return (
     <div>
-      <Section>
-        <SectionHeader>{t('preferences.account')}</SectionHeader>
-        <div>
-          {users.map((user) => (
-            <UserInfo key={user.id} user={user} signout={removeUser} />
-          ))}
-          {users.length === 0 && (
-            <LoginButton
-              onErr={console.error /* TODO: Toast error */}
-              ButtonComponent={SectionPrimaryButton}
-            >
-              {(loginState) =>
-                loginState !== 'logging-in' ? (
-                  <>{t('preferences.addAccount')}</>
-                ) : (
-                  <>{t('preferences.loginWorking')}</>
-                )
-              }
-            </LoginButton>
-          )}
-        </div>
-      </Section>
       <Section>
         <SectionHeader>App Mode</SectionHeader>
         <SectionSelect

src/components/PreferencesModal/PreferencesModal.tsx

@@ -7,7 +7,6 @@ import GeneralTab from './GeneralTab'
 import EditorTab from './EditorTab'
 import MarkdownTab from './MarkdownTab'
 import AboutTab from './AboutTab'
-import BillingTab from './BillingTab'
 import {
   backgroundColor,
   closeIconColor,
@@ -138,8 +137,6 @@ const PreferencesModal = () => {
         return <MarkdownTab />
       case 'about':
         return <AboutTab />
-      case 'billing':
-        return <BillingTab />
       case 'storage':
         if (currentStorage != null) {
           return <StorageTab storage={currentStorage} />
@@ -200,12 +197,6 @@ const PreferencesModal = () => {
               active={tab === 'markdown'}
               setTab={openTab}
             />
-            <TabButton
-              label={t('billing.billing')}
-              tab='billing'
-              active={tab === 'billing'}
-              setTab={openTab}
-            />
           </TabNav>
           <TabContent>{content}</TabContent>
         </ModalBody>