feat: Multiple minor changes (#769)

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,55 +76,67 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
     }, [focusModeEnabled]);
 
     const reloadThemes = useCallback(() => {
-      application.streamItems(ContentType.Theme, () => {
+      const themes = application.getDisplayableItems(
-        const themes = application.getDisplayableItems(
+        ContentType.Theme
-          ContentType.Theme
+      ) as SNTheme[];
-        ) as SNTheme[];
+      setThemes(
-        setThemes(
+        themes.sort((a, b) => {
-          themes.sort((a, b) => {
+          const aIsLayerable = a.isLayerable();
-            const aIsLayerable = a.isLayerable();
+          const bIsLayerable = b.isLayerable();
-            const bIsLayerable = b.isLayerable();
 
-            if (aIsLayerable && !bIsLayerable) {
+          if (aIsLayerable && !bIsLayerable) {
-              return 1;
+            return 1;
-            } else if (!aIsLayerable && bIsLayerable) {
+          } else if (!aIsLayerable && bIsLayerable) {
-              return -1;
+            return -1;
-            } else {
+          } else {
-              return a.package_info.name.toLowerCase() <
+            return a.package_info.name.toLowerCase() <
-                b.package_info.name.toLowerCase()
+              b.package_info.name.toLowerCase()
-                ? -1
+              ? -1
-                : 1;
+              : 1;
-            }
+          }
-          })
+        })
-        );
+      );
-        setDefaultThemeOn(
+      setDefaultThemeOn(
-          !themes.find((theme) => theme.active && !theme.isLayerable())
+        !themes.find((theme) => theme.active && !theme.isLayerable())
-        );
+      );
-      });
     }, [application]);
 
     const reloadToggleableComponents = useCallback(() => {
-      application.streamItems(ContentType.Component, () => {
+      const toggleableComponents = (
-        const toggleableComponents = (
+        application.getDisplayableItems(ContentType.Component) as SNComponent[]
-          application.getDisplayableItems(
+      ).filter((component) =>
-            ContentType.Component
+        [ComponentArea.EditorStack, ComponentArea.TagsList].includes(
-          ) as SNComponent[]
+          component.area
-        ).filter((component) =>
+        )
-          [ComponentArea.EditorStack, ComponentArea.TagsList].includes(
+      );
-            component.area
+      setToggleableComponents(toggleableComponents);
-          )
-        );
-        setToggleableComponents(toggleableComponents);
-      });
     }, [application]);
 
     useEffect(() => {
-      reloadThemes();
+      const cleanupItemStream = application.streamItems(
-    }, [reloadThemes]);
+        ContentType.Theme,
+        () => {
+          reloadThemes();
+        }
+      );
+
+      return () => {
+        cleanupItemStream();
+      };
+    }, [application, reloadThemes]);
 
     useEffect(() => {
-      reloadToggleableComponents();
+      const cleanupItemStream = application.streamItems(
-    }, [reloadToggleableComponents]);
+        ContentType.Component,
+        () => {
+          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}