Initial local space refactor and shared components update

Implement topbar tree map

Add local UI component
Add breadcrumbs implementation
Add shared modal implementation in local topbar

Initial theme handling
Add initial theme discard
Add basic theme options to NavigatorItem

Add initial theme setup for components

Add navigator v2 themes
Add folder list v2 themes
Update some buttons via v2 button theme

Add second iteration of theme updating

Updated preferences tab components
Updated topbar action items components
Update bottom bar selection components

Fix some preferences buttons and tabs

Add shared styles for SearchModal component
Add shared styles for preferences keymap tab

Use shared global style

Fix topbar breadcrumbs for specific storage cases

Remove duplicate storage breadcrumbs where not needed
Implement editing of storage name (localUI)
Fix folder rename (localUI)

Fix local UI for trashing and deleting note

Fix no dialog on delete folder/note
Update App.tsx with new dialog

Fix local search colors

Fix local search and local replace colors (v2 theme)
Fix CodeEditor marks colors

Discard local modal

Discard local modal since cloud one is generic now

Fix cloud intro modal

Fix cloud intro modal colors
Update Form to v2 style
Update style functions for primary and secondary buttons
Fix some size issues in folder view
Fix folder navigation style (v2 update)

Fix code fence styles

Update code fence styles to v2 theme

Fix shared context menu provider for local space

Add shared context menu provider implementation in local space App
Fix a typo in local space UI

Implement proper topbar folder breadcrumbs

Remove old topbar breadcrumbs on folder view
Add folder page breadcrumbs when on folder view (no note view)
Discard old topbar controls and use shared topbar controls (implement them based on previous)
Comment out the toggle context view on topbar controls

Add initial side bar mappers

Add search API
Update search structure for local space
Implement sidebar mappers except for tree

Half tree mapping done

Add full tree implementation mock

Todo: DND from local space
Todo: Implement sidebar folding and other API

Fix folder and note parent IDs

Still need to fix some todos, styling and implement rest of items
Implement Dnd

Implement sidebar folding

Add sidebar collapse store

Fix recursion on folder

Update v2 combined providers
Reorganize storage sidebar items

Fix storages, folders and note mappings

Update sidebar to show workspace

Update sidebar to show workspace and put notes and folders from storage to workspace root
Rename tags to labels, note to doc and storage to workspace (v2 part of API, DB still not)

Implement test DnD

Refactor more v2 components to new naming
Rename routes to doc and workspace, tags to lables and trashCan to archive

Refactor sidebar

Refactor sidebar application container
Use shared app layout

Implement rest of dnd

Refactor more of application layout

Implement proper sidebar toolbar instead of AppNavigator one

Fix some search issues for matching note content
Overall spaces mapping fix

Fix context view component

Fix topbar breadcrumb global style border issue

Fix App navigator (revert)

Add sidebar state in general status
Implement timeline mapping for local

Fix two bugs

Fix topbar rendering fight on z-index with code mirror editor (set code mirror one to z-index: 0)
Fix parent folder in breadcrumbs, should be set to breadcrumb folder so that new one goes inside

Refactor code

Refactor code into application structure
Create Application main component
Refactro WikiNotePage to use Application component
Add separate ArchivePage
Add separate AttachmentsPage
Add separate LabelsPage
Refactor some trash to archive namings
Update to appropriate buttons on archive/label pages

Update folder detail icon

Use shared icon for folder detail view
Set color of the icon and size for note/labels/folder/archive view

Add timeline page

Implement most of the components

Fix timeline page

Add archived at property
Update events handling and show more button
Set gray tags only
Refactor code in timeline
Fix DocLink (add style only) to not refresh the page as it is link with href and onClick prop

Update preferences styling

Update most of the styles for preferences
Set all updated style to shared style functions

Update some components

Refactor AppNavigator
Port features from AppNavigator
Refactor CreateStoragePage
Update Icon components in molecules and atoms in local space to use shared one
Fix AttachmentsPage (no storage in Application component)

Revert export buildSpacesBottomRows function

Remove unused components from local
Use Spinner from shared in cloud
Removed bunch of now unused components (replaced by topbar and sidebar)
Fix AppNavigator for cloud spaces
For now using 2 navigators since its hard to refactor the code to use component in single place
In local space there is need for sidebar and other items, in cloud space they are provided via webview
In local space with toolbar off on sidebar it does not layout well with AppNavigator being hidden (even after z-index fix, it stays on top rather than move the sidebar)

Refactor NoteStorageNavigator
Remove unused code
Rename component

Update to shared toast
Dialog/Modal/Toast from shared
Remove few components

Fix some bugs and error handling in localUI component
Update topbar properties to have type for breadcrumbs (button and not separator)
Update success messages across pushMessage new toast API

Refactor FolderDetailListNoteItem
Use WithTooltip and Button from shared components
Add Search Highlight colors to shared common theme
Update more components to shared

Replace some buttons to use shared one
Replace some links to use shared one (with inline encapsulation)
Remove some unused components
Refactor form buttons

Refactor more components to shared

Refactor AboutTab links
Update storage create to shared form elements
Rebase and update to latest master (new nav buttons)
Update FormRowProps location in localUI
Add sidebar hide option

Update keymap component buttons

Replace KeymapItemButton with shared one

Fix global content search results and style

Update to correct shared style colors for highlight
Fix global search note and note content results (note content results not showing)
Remove redundant console.logs from search results API

Refactor more components to shared

Update context view labels input and rendering (similar to cloud)
Update ProgressBar to shared style theme
Refactor form input to allow onKeyDown event as well
Remove unused components after refactor

Author: Komediruzecki

src/cloud/components/organisms/Onboarding/UsagePage.tsx

@@ -10,10 +10,10 @@ import {
 } from '@mdi/js'
 import Flexbox from '../../atoms/Flexbox'
 import Button from '../../atoms/Button'
-import Spinner from '../../../../components/atoms/Spinner'
 import Icon from '../../../../components/atoms/Icon'
 import { useRouter } from '../../../lib/router'
 import { usingElectron, sendToHost } from '../../../lib/stores/electron'
+import Spinner from '../../../../shared/components/atoms/Spinner'
 
 interface UsagePageProps {
   onUsage: (val: 'personal' | 'team') => void

src/cloud/components/organisms/Subscription/SubscriptionManagement.tsx

@@ -1,7 +1,7 @@
 import { mdiGiftOff, mdiOpenInNew } from '@mdi/js'
 import React, { useCallback, useMemo, useState } from 'react'
 import Icon from '../../../../components/atoms/Icon'
-import Spinner from '../../../../components/atoms/Spinner'
+import Spinner from '../../../../shared/components/atoms/Spinner'
 import { useToast } from '../../../../shared/lib/stores/toast'
 import { cancelSubscription } from '../../../api/teams/subscription'
 import { getTeamPortalUrl } from '../../../api/teams/subscription/invoices'

src/cloud/lib/hooks/useCloudResourceModals.tsx

@@ -248,7 +248,7 @@ export function useCloudResourceModals() {
     ) => {
       messageBox({
         title: `Delete ${title}`,
-        message: `Are you sure to remove for good this content?`,
+        message: `Are you sure you want to remove this permanently?`,
         iconType: DialogIconTypes.Warning,
         buttons: [
           {

src/cloud/lib/i18n/enUS.ts

@@ -6,7 +6,7 @@ const enTranslation: TranslationSource = {
   'general.cancel': 'Cancel',
   'general.update': 'Update',
   'general.attachments': 'Attachments',
-  'general.trash': 'Trash',
+  'general.archive': 'Archive',
   'general.allnote': 'All Notes',
   'general.signin': 'Sign In',
   'general.signinCheck': 'Signing in...',

src/cloud/lib/i18n/types.ts

@@ -3,7 +3,7 @@ export type TranslationSource = {
   'general.cancel': string
   'general.update': string
   'general.attachments': string
-  'general.trash': string
+  'general.archive': string
   'general.allnote': string
   'general.signin': string
   'general.signinCheck': string

src/cloud/lib/mappers/topbarTree.ts

@@ -57,6 +57,7 @@ export function mapTopbarTree(
   )
 
   folders.forEach((folder) => {
+    if (folder.pathname == '/') return
     const folderId = getFolderId(folder)
     const href = `${process.env.BOOST_HUB_BASE_URL}${getFolderHref(
       folder,
@@ -112,6 +113,5 @@ export function mapTopbarTree(
       })
       items.set(parentId, parentArray)
     })
-
   return items
 }

src/cloud/lib/stores/pageStore/store.tsx

@@ -201,7 +201,6 @@ function usePageDataStore(pageProps: any) {
         },
       }
     }
-
     const docCount = team.creationsCounter
     const trialIsOver = !team.trial
     overLimit = docCount >= freePlanDocLimit

src/components/App.tsx

@@ -1,19 +1,14 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import Router from './Router'
-import GlobalStyle from './GlobalStyle'
 import { ThemeProvider } from 'styled-components'
-import { selectTheme } from '../themes'
-import Dialog from './organisms/Dialog'
 import { useDb } from '../lib/db'
 import PreferencesModal from './PreferencesModal/PreferencesModal'
 import { usePreferences } from '../lib/preferences'
 import '../lib/i18n'
 import '../lib/analytics'
 import CodeMirrorStyle from './CodeMirrorStyle'
-import ToastList from './Toast'
 import styled from '../lib/styled'
 import { useEffectOnce } from 'react-use'
-import AppNavigator from './organisms/AppNavigator'
 import { useRouter } from '../lib/router'
 import { values, keys } from '../lib/db/utils'
 import {
@@ -51,8 +46,16 @@ import { useCreateWorkspaceModal } from '../lib/createWorkspaceModal'
 import CreateWorkspaceModal from './organisms/CreateWorkspaceModal'
 import { useStorageRouter } from '../lib/storageRouter'
 import ExternalStyle from './ExternalStyle'
-import { useDialog, DialogIconTypes } from '../lib/dialog'
 import { selectV2Theme } from '../shared/lib/styled/styleFunctions'
+import Modal from '../shared/components/organisms/Modal'
+import GlobalStyle from '../shared/components/atoms/GlobalStyle'
+import { DialogIconTypes, useDialog } from '../shared/lib/stores/dialog'
+import Dialog from '../shared/components/organisms/Dialog/Dialog'
+import ContextMenu from '../shared/components/molecules/ContextMenu'
+import { useCloudIntroModal } from '../lib/cloudIntroModal'
+import CloudIntroModal from './organisms/CloudIntroModal'
+import AppNavigator from './organisms/AppNavigator'
+import Toast from '../shared/components/organisms/Toast'
 
 const LoadingText = styled.div`
   margin: 30px;
@@ -119,25 +122,32 @@ const App = () => {
         messageBox({
           title: 'Sign In',
           message: 'Your cloud access token has been expired.',
-          buttons: ['Sign In Again', 'Cancel'],
-          defaultButtonIndex: 0,
+          buttons: [
+            {
+              label: 'Sign In Again',
+              defaultButton: true,
+              onClick: () => {
+                push(`/app/boosthub/login`)
+                setTimeout(() => {
+                  boostHubLoginRequestEventEmitter.dispatch()
+                }, 1000)
+              },
+            },
+            {
+              label: 'Cancel',
+              cancelButton: true,
+              onClick: () => {
+                setPreferences({
+                  'cloud.user': undefined,
+                })
+                setGeneralStatus({
+                  boostHubTeams: [],
+                })
+              },
+            },
+          ],
+          // defaultButtonIndex: 0,
           iconType: DialogIconTypes.Warning,
-          onClose: (value: number | null) => {
-            if (value === 0) {
-              push(`/app/boosthub/login`)
-              setTimeout(() => {
-                boostHubLoginRequestEventEmitter.dispatch()
-              }, 1000)
-              return
-            }
-
-            setPreferences({
-              'cloud.user': undefined,
-            })
-            setGeneralStatus({
-              boostHubTeams: [],
-            })
-          },
         })
         return
       }
@@ -419,35 +429,57 @@ const App = () => {
     toggleShowCreateWorkspaceModal,
   } = useCreateWorkspaceModal()
 
+  const { showingCloudIntroModal } = useCloudIntroModal()
+
+  const activeBoostHubTeamDomain = useMemo<string | null>(() => {
+    if (routeParams.name !== 'boosthub.teams.show') {
+      return null
+    }
+    return routeParams.domain
+  }, [routeParams])
+
+  const boosthubTeam =
+    activeBoostHubTeamDomain != null
+      ? generalStatus.boostHubTeams.find(
+          (team) => team.domain === activeBoostHubTeamDomain
+        )
+      : null
+
   return (
-    <ThemeProvider theme={selectTheme(preferences['general.theme'])}>
-      <ThemeProvider theme={selectV2Theme(preferences['general.theme'] as any)}>
-        <AppContainer
-          onDrop={(event: React.DragEvent) => {
-            event.preventDefault()
-          }}
-        >
-          {initialized ? (
-            <>
+    <ThemeProvider theme={selectV2Theme(preferences['general.theme'] as any)}>
+      <AppContainer
+        onDrop={(event: React.DragEvent) => {
+          event.preventDefault()
+        }}
+      >
+        {initialized ? (
+          <>
+            {boosthubTeam != null ? (
               <AppNavigator />
-              <Router />
-              {showCreateWorkspaceModal && (
-                <CreateWorkspaceModal
-                  closeModal={toggleShowCreateWorkspaceModal}
-                />
-              )}
-            </>
-          ) : (
-            <LoadingText>Loading Data...</LoadingText>
-          )}
-          <GlobalStyle />
-          <Dialog />
-          <PreferencesModal />
-          <ToastList />
-          <CodeMirrorStyle />
-          <ExternalStyle />
-        </AppContainer>
-      </ThemeProvider>
+            ) : (
+              showingCloudIntroModal && <CloudIntroModal />
+            )}
+            <Router />
+            {showCreateWorkspaceModal && (
+              <CreateWorkspaceModal
+                closeModal={toggleShowCreateWorkspaceModal}
+              />
+            )}
+          </>
+        ) : (
+          <LoadingText>Loading Data...</LoadingText>
+        )}
+        <GlobalStyle />
+        <CodeMirrorStyle />
+        <ExternalStyle />
+
+        <Toast />
+        <PreferencesModal />
+        <ContextMenu />
+
+        <Dialog />
+        <Modal />
+      </AppContainer>
     </ThemeProvider>
   )
 }