refactor: repo (#1070)

2022-06-07 07:18:41 -05:00
parent 4c65784421
commit f4ef63693c
1102 changed files with 5786 additions and 3366 deletions
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/Defaults.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Defaults.tsx
@@ -0,0 +1,152 @@
+import Dropdown from '@/Components/Dropdown/Dropdown'
+import { DropdownItem } from '@/Components/Dropdown/DropdownItem'
+import { FeatureIdentifier, PrefKey, ComponentArea, ComponentMutator, SNComponent } from '@standardnotes/snjs'
+import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
+import { WebApplication } from '@/Application/Application'
+import { FunctionComponent, useEffect, useState } from 'react'
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
+import Switch from '@/Components/Switch/Switch'
+import { PLAIN_EDITOR_NAME } from '@/Constants/Constants'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
+
+type Props = {
+  application: WebApplication
+}
+
+type EditorOption = DropdownItem & {
+  value: FeatureIdentifier | 'plain-editor'
+}
+
+const makeEditorDefault = (application: WebApplication, component: SNComponent, currentDefault: SNComponent) => {
+  if (currentDefault) {
+    removeEditorDefault(application, currentDefault)
+  }
+  application.mutator
+    .changeAndSaveItem(component, (m) => {
+      const mutator = m as ComponentMutator
+      mutator.defaultEditor = true
+    })
+    .catch(console.error)
+}
+
+const removeEditorDefault = (application: WebApplication, component: SNComponent) => {
+  application.mutator
+    .changeAndSaveItem(component, (m) => {
+      const mutator = m as ComponentMutator
+      mutator.defaultEditor = false
+    })
+    .catch(console.error)
+}
+
+const getDefaultEditor = (application: WebApplication) => {
+  return application.componentManager.componentsForArea(ComponentArea.Editor).filter((e) => e.isDefaultEditor())[0]
+}
+
+const Defaults: FunctionComponent<Props> = ({ application }) => {
+  const [editorItems, setEditorItems] = useState<DropdownItem[]>([])
+  const [defaultEditorValue, setDefaultEditorValue] = useState(
+    () => getDefaultEditor(application)?.package_info?.identifier || 'plain-editor',
+  )
+
+  const [spellcheck, setSpellcheck] = useState(() => application.getPreference(PrefKey.EditorSpellcheck, true))
+
+  const [addNoteToParentFolders, setAddNoteToParentFolders] = useState(() =>
+    application.getPreference(PrefKey.NoteAddToParentFolders, true),
+  )
+
+  const toggleSpellcheck = () => {
+    setSpellcheck(!spellcheck)
+    application.toggleGlobalSpellcheck().catch(console.error)
+  }
+
+  useEffect(() => {
+    const editors = application.componentManager
+      .componentsForArea(ComponentArea.Editor)
+      .map((editor): EditorOption => {
+        const identifier = editor.package_info.identifier
+        const [iconType, tint] = application.iconsController.getIconAndTintForNoteType(editor.package_info.note_type)
+
+        return {
+          label: editor.displayName,
+          value: identifier,
+          ...(iconType ? { icon: iconType } : null),
+          ...(tint ? { iconClassName: `color-accessory-tint-${tint}` } : null),
+        }
+      })
+      .concat([
+        {
+          icon: 'plain-text',
+          iconClassName: 'color-accessory-tint-1',
+          label: PLAIN_EDITOR_NAME,
+          value: 'plain-editor',
+        },
+      ])
+      .sort((a, b) => {
+        return a.label.toLowerCase() < b.label.toLowerCase() ? -1 : 1
+      })
+
+    setEditorItems(editors)
+  }, [application])
+
+  const setDefaultEditor = (value: string) => {
+    setDefaultEditorValue(value as FeatureIdentifier)
+    const editors = application.componentManager.componentsForArea(ComponentArea.Editor)
+    const currentDefault = getDefaultEditor(application)
+
+    if (value !== 'plain-editor') {
+      const editorComponent = editors.filter((e) => e.package_info.identifier === value)[0]
+      makeEditorDefault(application, editorComponent, currentDefault)
+    } else {
+      removeEditorDefault(application, currentDefault)
+    }
+  }
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Defaults</Title>
+        <div>
+          <Subtitle>Default Note Type</Subtitle>
+          <Text>New notes will be created using this type.</Text>
+          <div className="mt-2">
+            <Dropdown
+              id="def-editor-dropdown"
+              label="Select the default note type"
+              items={editorItems}
+              value={defaultEditorValue}
+              onChange={setDefaultEditor}
+            />
+          </div>
+        </div>
+        <HorizontalSeparator classes="my-4" />
+        <div className="flex items-center justify-between">
+          <div className="flex flex-col">
+            <Subtitle>Spellcheck</Subtitle>
+            <Text>
+              The default spellcheck value for new notes. Spellcheck can be configured per note from the note context
+              menu. Spellcheck may degrade overall typing performance with long notes.
+            </Text>
+          </div>
+          <Switch onChange={toggleSpellcheck} checked={spellcheck} />
+        </div>
+        <HorizontalSeparator classes="my-4" />
+        <div className="flex items-center justify-between">
+          <div className="flex flex-col">
+            <Subtitle>Add all parent tags when adding a nested tag to a note</Subtitle>
+            <Text>When enabled, adding a nested tag to a note will automatically add all associated parent tags.</Text>
+          </div>
+          <Switch
+            onChange={() => {
+              application.setPreference(PrefKey.NoteAddToParentFolders, !addNoteToParentFolders).catch(console.error)
+              setAddNoteToParentFolders(!addNoteToParentFolders)
+            }}
+            checked={addNoteToParentFolders}
+          />
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+}
+
+export default Defaults
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx
@@ -0,0 +1,31 @@
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { FunctionComponent } from 'react'
+import { ExtensionsLatestVersions } from '@/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions'
+import { observer } from 'mobx-react-lite'
+import Tools from './Tools'
+import Defaults from './Defaults'
+import LabsPane from './Labs'
+import Advanced from '@/Components/Preferences/Panes/Account/Advanced'
+import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
+
+type Props = {
+  viewControllerManager: ViewControllerManager
+  application: WebApplication
+  extensionsLatestVersions: ExtensionsLatestVersions
+}
+
+const General: FunctionComponent<Props> = ({ viewControllerManager, application, extensionsLatestVersions }) => (
+  <PreferencesPane>
+    <Tools application={application} />
+    <Defaults application={application} />
+    <LabsPane application={application} />
+    <Advanced
+      application={application}
+      viewControllerManager={viewControllerManager}
+      extensionsLatestVersions={extensionsLatestVersions}
+    />
+  </PreferencesPane>
+)
+
+export default observer(General)
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/Labs.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Labs.tsx
@@ -0,0 +1,90 @@
+import Switch from '@/Components/Switch/Switch'
+import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
+import { WebApplication } from '@/Application/Application'
+import { FeatureIdentifier, FeatureStatus, FindNativeFeature } from '@standardnotes/snjs'
+import { Fragment, FunctionComponent, useCallback, useEffect, useState } from 'react'
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
+
+type ExperimentalFeatureItem = {
+  identifier: FeatureIdentifier
+  name: string
+  description: string
+  isEnabled: boolean
+  isEntitled: boolean
+}
+
+type Props = {
+  application: WebApplication
+}
+
+const LabsPane: FunctionComponent<Props> = ({ application }) => {
+  const [experimentalFeatures, setExperimentalFeatures] = useState<ExperimentalFeatureItem[]>([])
+
+  const reloadExperimentalFeatures = useCallback(() => {
+    const experimentalFeatures = application.features.getExperimentalFeatures().map((featureIdentifier) => {
+      const feature = FindNativeFeature(featureIdentifier)
+      return {
+        identifier: featureIdentifier,
+        name: feature?.name ?? featureIdentifier,
+        description: feature?.description ?? '',
+        isEnabled: application.features.isExperimentalFeatureEnabled(featureIdentifier),
+        isEntitled: application.features.getFeatureStatus(featureIdentifier) === FeatureStatus.Entitled,
+      }
+    })
+    setExperimentalFeatures(experimentalFeatures)
+  }, [application])
+
+  useEffect(() => {
+    reloadExperimentalFeatures()
+  }, [reloadExperimentalFeatures])
+
+  const premiumModal = usePremiumModal()
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Labs</Title>
+        <div>
+          {experimentalFeatures.map(({ identifier, name, description, isEnabled, isEntitled }, index: number) => {
+            const toggleFeature = () => {
+              if (!isEntitled) {
+                premiumModal.activate(name)
+                return
+              }
+
+              application.features.toggleExperimentalFeature(identifier)
+              reloadExperimentalFeatures()
+            }
+
+            const showHorizontalSeparator = experimentalFeatures.length > 1 && index !== experimentalFeatures.length - 1
+
+            return (
+              <Fragment key={identifier}>
+                <div className="flex items-center justify-between">
+                  <div className="flex flex-col">
+                    <Subtitle>{name}</Subtitle>
+                    <Text>{description}</Text>
+                  </div>
+                  <Switch onChange={toggleFeature} checked={isEnabled} />
+                </div>
+                {showHorizontalSeparator && <HorizontalSeparator classes="mt-2.5 mb-3" />}
+              </Fragment>
+            )
+          })}
+          {experimentalFeatures.length === 0 && (
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col">
+                <Text>No experimental features available.</Text>
+              </div>
+            </div>
+          )}
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+}
+
+export default LabsPane
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx
@@ -0,0 +1,59 @@
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
+import Switch from '@/Components/Switch/Switch'
+import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
+import { WebApplication } from '@/Application/Application'
+import { PrefKey } from '@standardnotes/snjs'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent, useState } from 'react'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
+
+type Props = {
+  application: WebApplication
+}
+
+const Tools: FunctionComponent<Props> = ({ application }: Props) => {
+  const [monospaceFont, setMonospaceFont] = useState(() =>
+    application.getPreference(PrefKey.EditorMonospaceEnabled, true),
+  )
+  const [marginResizers, setMarginResizers] = useState(() =>
+    application.getPreference(PrefKey.EditorResizersEnabled, true),
+  )
+
+  const toggleMonospaceFont = () => {
+    setMonospaceFont(!monospaceFont)
+    application.setPreference(PrefKey.EditorMonospaceEnabled, !monospaceFont).catch(console.error)
+  }
+
+  const toggleMarginResizers = () => {
+    setMarginResizers(!marginResizers)
+    application.setPreference(PrefKey.EditorResizersEnabled, !marginResizers).catch(console.error)
+  }
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Tools</Title>
+        <div>
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col">
+              <Subtitle>Monospace Font</Subtitle>
+              <Text>Toggles the font style in the Plain Text editor.</Text>
+            </div>
+            <Switch onChange={toggleMonospaceFont} checked={monospaceFont} />
+          </div>
+          <HorizontalSeparator classes="my-4" />
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col">
+              <Subtitle>Margin Resizers</Subtitle>
+              <Text>Allows left and right editor margins to be resized.</Text>
+            </div>
+            <Switch onChange={toggleMarginResizers} checked={marginResizers} />
+          </div>
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+}
+
+export default observer(Tools)