feat: add Super note type to list of note types (#2086)

2022-12-05 09:38:42 -06:00
parent 1d22365086
commit caf2c4a876
20 changed files with 148 additions and 87 deletions
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
+++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
@@ -28,6 +28,7 @@ const ChangeEditorButton: FunctionComponent<Props> = ({
  })
  const [selectedEditorIcon, selectedEditorIconTint] = getIconAndTintForNoteType(
    note?.noteType || selectedEditor?.package_info.note_type,
+    true,
  )
  const [isClickOutsideDisabled, setIsClickOutsideDisabled] = useState(false)

--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
+++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
@@ -12,6 +12,7 @@ import { reloadFont } from '../NoteView/FontFunctions'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
 import { SuperNoteImporter } from '../NoteView/SuperEditor/SuperNoteImporter'
 import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
+import { Pill } from '../Preferences/PreferencesComponents/Content'

 type ChangeEditorMenuProps = {
  application: WebApplication
@@ -188,17 +189,24 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
                    const onClickEditorItem = () => {
                      selectItem(item).catch(console.error)
                    }
+
                    return (
                      <MenuRadioButtonItem
                        key={item.name}
                        onClick={onClickEditorItem}
-                        className={'flex-row-reverse py-2'}
+                        className={'flex-row-reversed py-2'}
                        checked={item.isEntitled ? isSelected(item) : false}
+                        info={item.description}
                      >
                        <div className="flex flex-grow items-center justify-between">
                          <div className={`flex items-center ${group.featured ? 'font-bold' : ''}`}>
                            {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
                            {item.name}
+                            {item.isLabs && (
+                              <Pill className="py-0.5 px-1.5" style="success">
+                                Labs
+                              </Pill>
+                            )}
                          </div>
                          {!item.isEntitled && (
                            <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />
--- a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
@@ -22,6 +22,7 @@ import { classNames } from '@standardnotes/utils'
 import NoSubscriptionBanner from '@/Components/NoSubscriptionBanner/NoSubscriptionBanner'
 import MenuRadioButtonItem from '@/Components/Menu/MenuRadioButtonItem'
 import MenuSwitchButtonItem from '@/Components/Menu/MenuSwitchButtonItem'
+import { Pill } from '@/Components/Preferences/PreferencesComponents/Content'

 const DailyEntryModeEnabled = true

@@ -365,9 +366,9 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
            <div className="flex flex-col pr-5">
              <div className="flex flex-row items-center">
                <div className="text-base font-semibold uppercase text-text lg:text-xs">Daily Notebook</div>
-                <div className="ml-2 rounded bg-warning px-1.5 py-[1px] text-[10px] font-bold text-warning-contrast">
+                <Pill className="py-0 px-1.5" style="success">
                  Labs
-                </div>
+                </Pill>
              </div>
              <div className="mt-1">Capture new notes daily with a calendar-based layout</div>
            </div>
--- a/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
@@ -1,20 +1,60 @@
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { classNames } from '@standardnotes/snjs'
 import { PlatformedKeyboardShortcut } from '@standardnotes/ui-services'
-import { ComponentPropsWithoutRef, ForwardedRef, forwardRef, ReactNode } from 'react'
+import {
+  ComponentPropsWithoutRef,
+  ForwardedRef,
+  forwardRef,
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useState,
+} from 'react'
+import Icon from '../Icon/Icon'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
 import RadioIndicator from '../Radio/RadioIndicator'
 import MenuListItem from './MenuListItem'

+const Tooltip = ({ text }: { text: string }) => {
+  const [mobileVisible, setMobileVisible] = useState(false)
+  const onClickMobile: MouseEventHandler<HTMLDivElement> = useCallback(
+    (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      setMobileVisible(!mobileVisible)
+    },
+    [mobileVisible],
+  )
+
+  return (
+    <div className="relative">
+      <div className={classNames('peer flex h-5 w-5 items-center justify-center rounded-full')} onClick={onClickMobile}>
+        <Icon type={'help'} className="text-neutral" size="large" />
+        <span className="sr-only">Note sync status</span>
+      </div>
+      <div
+        className={classNames(
+          'hidden',
+          'absolute top-full right-0 w-60 translate-x-2 translate-y-1 select-none rounded border border-border shadow-main',
+          'bg-default py-1.5 px-3 text-left peer-hover:block peer-focus:block',
+        )}
+      >
+        {text}
+      </div>
+    </div>
+  )
+}
+
 type Props = {
  checked: boolean
  children: ReactNode
  shortcut?: PlatformedKeyboardShortcut
+  info?: string
 } & ComponentPropsWithoutRef<'button'>

 const MenuRadioButtonItem = forwardRef(
  (
-    { checked, disabled, tabIndex, children, shortcut, className, ...props }: Props,
+    { checked, disabled, tabIndex, children, shortcut, className, info, ...props }: Props,
    ref: ForwardedRef<HTMLButtonElement>,
  ) => {
    return (
@@ -37,6 +77,7 @@ const MenuRadioButtonItem = forwardRef(
          {shortcut && <KeyboardShortcutIndicator className="mr-2" shortcut={shortcut} />}
          <RadioIndicator disabled={disabled} checked={checked} className="flex-shrink-0" />
          {children}
+          {info && <Tooltip text={info} />}
        </button>
      </MenuListItem>
    )
--- a/packages/web/src/javascripts/Components/NotesOptions/EditorMenuItem.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/EditorMenuItem.tsx
@@ -5,4 +5,6 @@ export type EditorMenuItem = {
  component?: SNComponent
  isEntitled: boolean
  noteType: NoteType
+  isLabs?: boolean
+  description?: string
 }
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx
@@ -24,8 +24,8 @@ const General: FunctionComponent<Props> = ({ viewControllerManager, application,
    <Defaults application={application} />
    <Tools application={application} />
    <SmartViews application={application} featuresController={viewControllerManager.featuresController} />
-    <LabsPane application={application} />
    <Moments application={application} />
+    <LabsPane application={application} />
    <Advanced
      application={application}
      viewControllerManager={viewControllerManager}
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/Moments.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Moments.tsx
@@ -80,7 +80,7 @@ const Moments: FunctionComponent<Props> = ({ application }: Props) => {
        <div className="flex items-center justify-between">
          <div className="flex items-start">
            <Title>Moments</Title>
-            <Pill style={'warning'}>Labs</Pill>
+            <Pill style={'success'}>Labs</Pill>
            <Pill style={'info'}>Professional</Pill>
          </div>
          <Switch onChange={toggle} checked={momentsEnabled} />
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
@@ -58,7 +58,7 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
  }

  const reloadDesktopAutoLockInterval = useCallback(async () => {
-    const interval = await application.getAutolockService()!.getAutoLockInterval()
+    const interval = await application.getAutolockService()?.getAutoLockInterval()
    setSelectedAutoLockInterval(interval)
  }, [application])

@@ -86,7 +86,7 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
      return
    }

-    await application.getAutolockService()!.setAutoLockInterval(interval)
+    await application.getAutolockService()?.setAutoLockInterval(interval)
    reloadDesktopAutoLockInterval().catch(console.error)
  }

@@ -184,6 +184,12 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
    setPasscodeConfirmation(undefined)
  }

+  const autolockService = application.getAutolockService()
+
+  if (!autolockService) {
+    return null
+  }
+
  return (
    <>
      <PreferencesGroup>
@@ -248,25 +254,22 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
              <Title>Autolock</Title>
              <Text className="mb-3">The autolock timer begins when the window or tab loses focus.</Text>
              <div className="flex flex-row items-center">
-                {application
-                  .getAutolockService()!
-                  .getAutoLockIntervalOptions()
-                  .map((option) => {
-                    return (
-                      <a
-                        key={option.value}
-                        className={classNames(
-                          'mr-3 cursor-pointer rounded',
-                          option.value === selectedAutoLockInterval
-                            ? 'bg-info px-1.5 py-0.5 text-info-contrast'
-                            : 'text-info',
-                        )}
-                        onClick={() => selectDesktopAutoLockInterval(option.value)}
-                      >
-                        {option.label}
-                      </a>
-                    )
-                  })}
+                {autolockService.getAutoLockIntervalOptions().map((option) => {
+                  return (
+                    <a
+                      key={option.value}
+                      className={classNames(
+                        'mr-3 cursor-pointer rounded',
+                        option.value === selectedAutoLockInterval
+                          ? 'bg-info px-1.5 py-0.5 text-info-contrast'
+                          : 'text-info',
+                      )}
+                      onClick={() => selectDesktopAutoLockInterval(option.value)}
+                    >
+                      {option.label}
+                    </a>
+                  )
+                })}
              </div>
            </PreferencesSegment>
          </PreferencesGroup>
--- a/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
+++ b/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
@@ -31,7 +31,7 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({

  return (
    <AlertDialog leastDestructiveRef={ctaButtonRef} className="p-0">
-      <div tabIndex={-1} className="sn-component">
+      <div tabIndex={-1} className="sn-component bg-default">
        <div tabIndex={0} className="max-w-89 rounded bg-default p-4 shadow-main">
          {type === PremiumFeatureModalType.UpgradePrompt && (
            <UpgradePrompt