feat: change quick settings menu layout (#1770)

packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx

@@ -1,10 +1,6 @@
 import { WebApplication } from '@/Application/Application'
-import { FeatureStatus, FeatureIdentifier } from '@standardnotes/snjs'
 import { FunctionComponent, MouseEventHandler, useCallback } from 'react'
-import Icon from '@/Components/Icon/Icon'
-import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import Switch from '@/Components/Switch/Switch'
-import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
 import { isMobileScreen } from '@/Utils'
 
 type Props = {
@@ -15,21 +11,14 @@ type Props = {
 }
 
 const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onClose, isEnabled }) => {
-  const premiumModal = usePremiumModal()
-  const isEntitled = application.features.getFeatureStatus(FeatureIdentifier.FocusMode) === FeatureStatus.Entitled
-
   const toggle: MouseEventHandler = useCallback(
     (e) => {
       e.preventDefault()
 
-      if (isEntitled) {
+      onToggle(!isEnabled)
-        onToggle(!isEnabled)
+      onClose()
-        onClose()
-      } else {
-        premiumModal.activate('Focused Writing')
-      }
     },
-    [isEntitled, onToggle, isEnabled, onClose, premiumModal],
+    [onToggle, isEnabled, onClose],
   )
 
   return (
@@ -39,17 +28,8 @@ const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onCl
         onClick={toggle}
         disabled={application.isNativeMobileWeb() || isMobileScreen()}
       >
-        <div className="flex items-center">
+        <div className="flex items-center">Focused Writing</div>
-          <Icon type="menu-close" className="mr-2 text-neutral group-disabled:text-passive-2" />
+        <Switch className="px-0" checked={isEnabled} />
-          Focused Writing
-        </div>
-        {isEntitled ? (
-          <Switch className="px-0" checked={isEnabled} />
-        ) : (
-          <div title="Premium feature">
-            <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />
-          </div>
-        )}
       </button>
     </>
   )

packages/web/src/javascripts/Components/QuickSettingsMenu/PanelSettingsSection.tsx

@@ -4,7 +4,6 @@ import { ApplicationEvent, PrefKey } from '@standardnotes/snjs'
 import MenuItem from '../Menu/MenuItem'
 import { MenuItemType } from '../Menu/MenuItemType'
 import { PANEL_NAME_NAVIGATION, PANEL_NAME_NOTES } from '@/Constants/Constants'
-import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
 
 type Props = {
@@ -55,8 +54,6 @@ const PanelSettingsSection = ({ application }: Props) => {
 
   return (
     <div className="hidden text-sm md:block pointer-coarse:md-only:hidden pointer-coarse:lg-only:hidden">
-      <HorizontalSeparator classes="my-2" />
-      <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Panel Settings</div>
       <MenuItem
         type={MenuItemType.SwitchButton}
         className="py-1 hover:bg-contrast focus:bg-info-backdrop"
@@ -71,7 +68,7 @@ const PanelSettingsSection = ({ application }: Props) => {
         checked={currentItemsPanelWidth > WidthForCollapsedPanel}
         onChange={toggleItemsListPanel}
       >
-        Show items list panel
+        Show list panel
       </MenuItem>
     </div>
   )

packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx

@@ -70,8 +70,6 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
   const prefsButtonRef = useRef<HTMLButtonElement>(null)
   const defaultThemeButtonRef = useRef<HTMLButtonElement>(null)
 
-  const mainRef = useRef<HTMLDivElement>(null)
-
   useEffect(() => {
     toggleFocusMode(focusModeEnabled)
   }, [focusModeEnabled])
@@ -176,8 +174,29 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
   }, [application, isDarkModeOn, deactivateAnyNonLayerableTheme])
 
   return (
-    <div ref={mainRef}>
+    <div>
-      <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Themes</div>
+      {toggleableComponents.length > 0 && (
+        <>
+          <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Tools</div>
+          {toggleableComponents.map((component) => (
+            <button
+              className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
+              onClick={() => {
+                toggleComponent(component)
+              }}
+              key={component.uuid}
+            >
+              <div className="flex items-center">
+                <Icon type="window" className="mr-2 text-neutral" />
+                {component.displayName}
+              </div>
+              <Switch checked={component.active} className="px-0" />
+            </button>
+          ))}
+          <HorizontalSeparator classes="my-2" />
+        </>
+      )}
+      <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Appearance</div>
       <button
         className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
         onClick={toggleDefaultTheme}
@@ -196,23 +215,6 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
       {themes.map((theme) => (
         <ThemesMenuButton item={theme} application={application} key={theme.component?.uuid ?? theme.identifier} />
       ))}
-      <HorizontalSeparator classes="my-2" />
-      <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Tools</div>
-      {toggleableComponents.map((component) => (
-        <button
-          className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
-          onClick={() => {
-            toggleComponent(component)
-          }}
-          key={component.uuid}
-        >
-          <div className="flex items-center">
-            <Icon type="window" className="mr-2 text-neutral" />
-            {component.displayName}
-          </div>
-          <Switch checked={component.active} className="px-0" />
-        </button>
-      ))}
       <FocusModeSwitch
         application={application}
         onToggle={setFocusModeEnabled}

packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx

@@ -58,10 +58,10 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
       {item.component?.isLayerable() ? (
         <>
           <div className="flex items-center">
-            <Switch className="mr-2 px-0" checked={item.component?.active} />
+            {!canActivateTheme && <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />}
             {item.name}
           </div>
-          {!canActivateTheme && <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />}
+          <Switch className="px-0" checked={item.component?.active} />
         </>
       ) : (
         <>