feat: Nativize "No distraction" theme as "Focus Mode" (#758)

Co-authored-by: Mo Bitar <me@bitar.io>

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

@@ -0,0 +1,66 @@
+import { WebApplication } from '@/ui_models/application';
+import { FeatureIdentifier } from '@standardnotes/features';
+import { FeatureStatus } from '@standardnotes/snjs';
+import { FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
+import { JSXInternal } from 'preact/src/jsx';
+import { Icon } from '../Icon';
+import { PremiumFeaturesModal } from '../PremiumFeaturesModal';
+import { Switch } from '../Switch';
+
+type Props = {
+  application: WebApplication;
+  closeQuickSettingsMenu: () => void;
+  focusModeEnabled: boolean;
+  setFocusModeEnabled: (enabled: boolean) => void;
+};
+
+export const FocusModeSwitch: FunctionComponent<Props> = ({
+  application,
+  closeQuickSettingsMenu,
+  focusModeEnabled,
+  setFocusModeEnabled,
+}) => {
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  const isEntitledToFocusMode =
+    application.getFeatureStatus(FeatureIdentifier.FocusMode) ===
+    FeatureStatus.Entitled;
+
+  const toggleFocusMode = (
+    e: JSXInternal.TargetedMouseEvent<HTMLButtonElement>
+  ) => {
+    e.preventDefault();
+    if (isEntitledToFocusMode) {
+      setFocusModeEnabled(!focusModeEnabled);
+      closeQuickSettingsMenu();
+    } else {
+      setShowUpgradeModal(true);
+    }
+  };
+
+  return (
+    <>
+      <button
+        className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between"
+        onClick={toggleFocusMode}
+      >
+        <div className="flex items-center">
+          <Icon type="menu-close" className="color-neutral mr-2" />
+          Focused Writing
+        </div>
+        {isEntitledToFocusMode ? (
+          <Switch className="px-0" checked={focusModeEnabled} />
+        ) : (
+          <div title="Premium feature">
+            <Icon type="premium-feature" />
+          </div>
+        )}
+      </button>
+      <PremiumFeaturesModal
+        showModal={showUpgradeModal}
+        featureName="Focus Mode"
+        onClose={() => setShowUpgradeModal(false)}
+      />
+    </>
+  );
+};