Merge branch 'release/10.3.0'

app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx

@@ -70,16 +70,19 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
               <div className="my-0.5 font-bold">{user.email}</div>
               <span className="color-neutral">{application.getHost()}</span>
             </div>
-            <div className="flex items-center justify-between px-3 mb-2">
+            <div className="flex items-start justify-between px-3 mb-2">
               {isSyncingInProgress ? (
                 <div className="flex items-center color-info font-semibold">
                   <div className="sk-spinner w-5 h-5 mr-2 spinner-info"></div>
                   Syncing...
                 </div>
               ) : (
-                <div className="flex items-center success font-semibold">
+                <div className="flex items-start">
-                  <Icon type="check-circle" className="mr-2" />
+                  <Icon type="check-circle" className="mr-2 success" />
-                  Last synced: {lastSyncDate}
+                  <div>
+                    <div class="font-semibold success">Last synced:</div>
+                    <div class="color-text">{lastSyncDate}</div>
+                  </div>
                 </div>
               )}
               <div

app/assets/javascripts/components/AccountMenu/SignIn.tsx

@@ -34,7 +34,7 @@ export const SignInPane: FunctionComponent<Props> = observer(
 
     useEffect(() => {
       if (emailInputRef?.current) {
-        emailInputRef.current!.focus();
+        emailInputRef.current?.focus();
       }
     }, []);
 
@@ -73,8 +73,8 @@ export const SignInPane: FunctionComponent<Props> = observer(
 
     const signIn = () => {
       setIsSigningIn(true);
-      emailInputRef?.current!.blur();
+      emailInputRef?.current?.blur();
-      passwordInputRef?.current!.blur();
+      passwordInputRef?.current?.blur();
 
       application
         .signIn(email, password, isStrictSignin, isEphemeral, shouldMergeLocal)
@@ -92,7 +92,7 @@ export const SignInPane: FunctionComponent<Props> = observer(
             application.alertService.alert(err);
           }
           setPassword('');
-          passwordInputRef?.current!.blur();
+          passwordInputRef?.current?.blur();
         })
         .finally(() => {
           setIsSigningIn(false);
@@ -109,12 +109,12 @@ export const SignInPane: FunctionComponent<Props> = observer(
       e.preventDefault();
 
       if (!email || email.length === 0) {
-        emailInputRef?.current!.focus();
+        emailInputRef?.current?.focus();
         return;
       }
 
       if (!password || password.length === 0) {
-        passwordInputRef?.current!.focus();
+        passwordInputRef?.current?.focus();
         return;
       }
 
@@ -134,7 +134,6 @@ export const SignInPane: FunctionComponent<Props> = observer(
           />
           <div className="sn-account-menu-headline">Sign in</div>
         </div>
-        <form onSubmit={handleSignInFormSubmit}>
         <div className="px-3 mb-1">
           <InputWithIcon
             className={`mb-2 ${isInvalid ? 'border-dark-red' : null}`}
@@ -196,7 +195,6 @@ export const SignInPane: FunctionComponent<Props> = observer(
             />
           ) : null}
         </div>
-        </form>
         <div className="h-1px my-2 bg-border"></div>
         <AdvancedOptions
           appState={appState}

app/assets/javascripts/components/NotesListOptionsMenu.tsx

@@ -2,11 +2,11 @@ import { WebApplication } from '@/ui_models/application';
 import { CollectionSort, PrefKey } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
+import { useRef, useState } from 'preact/hooks';
 import { Icon } from './Icon';
 import { Menu } from './menu/Menu';
 import { MenuItem, MenuItemSeparator, MenuItemType } from './menu/MenuItem';
-import { toDirective } from './utils';
+import { toDirective, useCloseOnClickOutside } from './utils';
 
 type Props = {
   application: WebApplication;
@@ -108,8 +108,16 @@ flex flex-col py-2 bottom-0 left-2 absolute';
       application.setPreference(PrefKey.NotesHideProtected, !hideProtected);
     };
 
+    const menuRef = useRef<HTMLDivElement>(null);
+
+    useCloseOnClickOutside(menuRef as any, (open: boolean) => {
+      if (!open) {
+        setShowMenuFalse();
+      }
+    });
+
     return (
-      <div className={menuClassName}>
+      <div ref={menuRef} className={menuClassName}>
         <Menu a11yLabel="Sort by" closeMenu={setShowMenuFalse}>
           <div className="px-3 my-1 text-xs font-semibold color-text uppercase">
             Sort by

app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx

@@ -76,7 +76,6 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
     }, [focusModeEnabled]);
 
     const reloadThemes = useCallback(() => {
-      application.streamItems(ContentType.Theme, () => {
       const themes = application.getDisplayableItems(
         ContentType.Theme
       ) as SNTheme[];
@@ -100,31 +99,44 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
       setDefaultThemeOn(
         !themes.find((theme) => theme.active && !theme.isLayerable())
       );
-      });
     }, [application]);
 
     const reloadToggleableComponents = useCallback(() => {
-      application.streamItems(ContentType.Component, () => {
       const toggleableComponents = (
-          application.getDisplayableItems(
+        application.getDisplayableItems(ContentType.Component) as SNComponent[]
-            ContentType.Component
-          ) as SNComponent[]
       ).filter((component) =>
         [ComponentArea.EditorStack, ComponentArea.TagsList].includes(
           component.area
         )
       );
       setToggleableComponents(toggleableComponents);
-      });
     }, [application]);
 
     useEffect(() => {
+      const cleanupItemStream = application.streamItems(
+        ContentType.Theme,
+        () => {
           reloadThemes();
-    }, [reloadThemes]);
+        }
+      );
+
+      return () => {
+        cleanupItemStream();
+      };
+    }, [application, reloadThemes]);
 
     useEffect(() => {
+      const cleanupItemStream = application.streamItems(
+        ContentType.Component,
+        () => {
           reloadToggleableComponents();
-    }, [reloadToggleableComponents]);
+        }
+      );
+
+      return () => {
+        cleanupItemStream();
+      };
+    }, [application, reloadToggleableComponents]);
 
     useEffect(() => {
       if (themesMenuOpen) {
@@ -274,10 +286,9 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
             </Disclosure>
           ) : null}
           {toggleableComponents.map((component) => (
-            <Switch
+            <button
-              className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
+              className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
-              checked={component.active}
+              onClick={() => {
-              onChange={() => {
                 toggleComponent(component);
               }}
             >
@@ -285,7 +296,8 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
                 <Icon type="window" className="color-neutral mr-2" />
                 {component.name}
               </div>
-            </Switch>
+              <Switch checked={component.active} className="px-0" />
+            </button>
           ))}
           <FocusModeSwitch
             application={application}

app/assets/javascripts/preferences/panes/account/offlineSubscription.tsx

@@ -17,11 +17,14 @@ interface IProps {
   appState: AppState;
 }
 
-export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ application, appState }) => {
+export const OfflineSubscription: FunctionalComponent<IProps> = observer(
+  ({ application, appState }) => {
     const [activationCode, setActivationCode] = useState('');
-  const [isSuccessfullyActivated, setIsSuccessfullyActivated] = useState(false);
+    const [isSuccessfullyActivated, setIsSuccessfullyActivated] =
+      useState(false);
     const [isSuccessfullyRemoved, setIsSuccessfullyRemoved] = useState(false);
-  const [hasUserPreviouslyStoredCode, setHasUserPreviouslyStoredCode] = useState(false);
+    const [hasUserPreviouslyStoredCode, setHasUserPreviouslyStoredCode] =
+      useState(false);
 
     useEffect(() => {
       if (application.hasOfflineRepo()) {
@@ -30,10 +33,12 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
     }, [application]);
 
     const shouldShowOfflineSubscription = () => {
-    return !application.hasAccount() || application.isCustomServerHostUsed();
+      return !application.hasAccount() || application.isThirdPartyHostUsed();
     };
 
-  const handleSubscriptionCodeSubmit = async (event: TargetedEvent<HTMLFormElement, Event>) => {
+    const handleSubscriptionCodeSubmit = async (
+      event: TargetedEvent<HTMLFormElement, Event>
+    ) => {
       event.preventDefault();
 
       const result = await application.setOfflineFeaturesCode(activationCode);
@@ -57,7 +62,8 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
     };
 
     const handleRemoveClick = async () => {
-    application.alertService.confirm(
+      application.alertService
+        .confirm(
           STRING_REMOVE_OFFLINE_KEY_CONFIRMATION,
           'Remove offline key?',
           'Remove Offline Key',
@@ -80,9 +86,11 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
 
     return (
       <>
-      <div className='flex items-center justify-between'>
+        <div className="flex items-center justify-between">
-        <div className='flex flex-col mt-3 w-full'>
+          <div className="flex flex-col mt-3 w-full">
-          <Subtitle>{!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription</Subtitle>
+            <Subtitle>
+              {!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription
+            </Subtitle>
             <form onSubmit={handleSubscriptionCodeSubmit}>
               <div className={'mt-2'}>
                 {!hasUserPreviouslyStoredCode && (
@@ -97,13 +105,14 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
               </div>
               {(isSuccessfullyActivated || isSuccessfullyRemoved) && (
                 <div className={'mt-3 mb-3 info'}>
-                Your offline subscription code has been successfully {isSuccessfullyActivated ? 'activated' : 'removed'}.
+                  Your offline subscription code has been successfully{' '}
+                  {isSuccessfullyActivated ? 'activated' : 'removed'}.
                 </div>
               )}
               {hasUserPreviouslyStoredCode && (
                 <Button
-                type='danger'
+                  type="danger"
-                label='Remove offline key'
+                  label="Remove offline key"
                   onClick={() => {
                     handleRemoveClick();
                   }}
@@ -112,17 +121,20 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
               {!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
                 <Button
                   label={'Submit'}
-                type='primary'
+                  type="primary"
                   disabled={activationCode === ''}
                   onClick={(event) =>
-                  handleSubscriptionCodeSubmit(event as TargetedEvent<HTMLFormElement>)
+                    handleSubscriptionCodeSubmit(
+                      event as TargetedEvent<HTMLFormElement>
+                    )
                   }
                 />
               )}
             </form>
           </div>
         </div>
-      <HorizontalSeparator classes='mt-8 mb-5' />
+        <HorizontalSeparator classes="mt-8 mb-5" />
       </>
     );
-});
+  }
+);

app/assets/stylesheets/_sn.scss

@@ -256,6 +256,10 @@
   margin-right: 0.75rem;
 }
 
+.mr-4 {
+  margin-right: 1rem;
+}
+
 .mr-12 {
   margin-right: 3rem;
 }
@@ -283,6 +287,10 @@
   margin-bottom: 0.5rem;
 }
 
+.max-w-1\/2 {
+  max-width: 50%;
+}
+
 .max-w-3\/4 {
   max-width: 75%;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "standard-notes-web",
-  "version": "3.9.8",
+  "version": "3.9.10",
   "license": "AGPL-3.0-or-later",
   "repository": {
     "type": "git",
@@ -85,7 +85,7 @@
     "@reach/listbox": "^0.16.2",
     "@standardnotes/features": "1.10.2",
     "@standardnotes/sncrypto-web": "1.5.3",
-    "@standardnotes/snjs": "2.20.1",
+    "@standardnotes/snjs": "2.20.3",
     "mobx": "^6.3.5",
     "mobx-react-lite": "^3.2.2",
     "preact": "^10.5.15",

yarn.lock

@@ -2614,10 +2614,10 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.20.1":
+"@standardnotes/snjs@2.20.3":
-  version "2.20.1"
+  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.20.1.tgz#4813adbfd16a1c373357bd4c7ece3085abf142b4"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.20.3.tgz#11fe962dfb017be459e856b9fbc6311c5046a0b0"
-  integrity sha512-wJILt7YerLFaZTKoIZaCkqSuvpVWoVKqCVjP0KNHrMknnbgMHZygHqrb9sr57JL1AcNCkAULEFS/kev2GYTG3Q==
+  integrity sha512-FHog3p3SuMvTXsEl76UenbjY8PS6VL/b6MjaC9whJR5ZwsvmLwE0G16dWZ+z+izm+CsRaHMWU8R2cy7RG7HjZg==
   dependencies:
     "@standardnotes/auth" "^3.8.1"
     "@standardnotes/common" "^1.2.1"