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

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

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

@@ -0,0 +1,60 @@
+import { WebApplication } from '@/ui_models/application';
+import { SNTheme } from '@standardnotes/snjs';
+import { FunctionComponent } from 'preact';
+import { JSXInternal } from 'preact/src/jsx';
+import { Switch } from '../Switch';
+
+type Props = {
+  theme: SNTheme;
+  application: WebApplication;
+  onBlur: (event: { relatedTarget: EventTarget | null }) => void;
+};
+
+export const ThemesMenuButton: FunctionComponent<Props> = ({
+  application,
+  theme,
+  onBlur,
+}) => {
+  const toggleTheme: JSXInternal.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault();
+    if (theme.isLayerable() || !theme.active) {
+      application.toggleComponent(theme);
+    }
+  };
+
+  return (
+    <button
+      className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none ${
+        theme.isLayerable() ? `justify-start` : `justify-between`
+      }`}
+      onClick={toggleTheme}
+      onBlur={onBlur}
+    >
+      {theme.isLayerable() ? (
+        <>
+          <Switch className="px-0 mr-2" checked={theme.active} />
+          {theme.package_info.name}
+        </>
+      ) : (
+        <>
+          <div className="flex items-center">
+            <div
+              className={`pseudo-radio-btn ${
+                theme.active ? 'pseudo-radio-btn--checked' : ''
+              } mr-2`}
+            ></div>
+            <span className={theme.active ? 'font-semibold' : undefined}>
+              {theme.package_info.name}
+            </span>
+          </div>
+          <div
+            className="w-5 h-5 rounded-full"
+            style={{
+              backgroundColor: theme.package_info?.dock_icon?.background_color,
+            }}
+          ></div>
+        </>
+      )}
+    </button>
+  );
+};