web: add toggle focus mode command (#7736)

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

apps/web/src/components/editor/footer.tsx

@@ -44,6 +44,7 @@ import { MAX_AUTO_SAVEABLE_WORDS } from "./types";
 import { strings } from "@notesnook/intl";
 import { EDITOR_ZOOM } from "./common";
 import { useWindowControls } from "../../hooks/use-window-controls";
+import { exitFullscreen } from "../../utils/fullscreen";
 
 const SAVE_STATE_ICON_MAP = {
   "-1": NotSaved,
@@ -96,13 +97,7 @@ function EditorFooter() {
       icon: isFocusMode ? FocusMode : NormalMode,
       enabled: true,
       hideOnMobile: true,
-      onClick: () => {
-        useAppStore.getState().toggleFocusMode();
-        if (document.fullscreenElement) exitFullscreen();
-        const editor =
-          session && useEditorManager.getState().getEditor(session.id);
-        if (editor) editor.editor?.focus();
-      }
+      onClick: () => useAppStore.getState().toggleFocusMode()
     }
   ];
 
@@ -230,8 +225,3 @@ export default EditorFooter;
 function enterFullscreen(elem: HTMLElement) {
   elem.requestFullscreen();
 }
-
-function exitFullscreen() {
-  if (!document.fullscreenElement) return;
-  document.exitFullscreen();
-}

apps/web/src/dialogs/command-palette/commands.ts

@@ -32,12 +32,15 @@ import {
   Notebook as NotebookIcon,
   Note as NoteIcon,
   Reminder as ReminderIcon,
-  Tag as TagIcon
+  Tag as TagIcon,
+  FocusMode,
+  NormalMode
 } from "../../components/icons";
 import { trashMenuItems } from "../../components/trash-item";
 import { hashNavigate, navigate } from "../../navigation";
 import { useEditorStore } from "../../stores/editor-store";
 import { useStore as useNoteStore } from "../../stores/note-store";
+import { useStore as useAppStore } from "../../stores/app-store";
 import { useStore as useThemeStore } from "../../stores/theme-store";
 import { AttachmentsDialog } from "../attachments-dialog";
 import { CreateColorDialog } from "../create-color-dialog";
@@ -351,6 +354,7 @@ function getEditorCommands(): Command[] {
   const session = useEditorStore.getState().getActiveSession();
   if (!session) return [];
   const editor = useEditorManager.getState().editors[session.id];
+  const isFocusMode = useAppStore.getState().isFocusMode;
 
   const commands: Command[] = [
     {
@@ -440,6 +444,15 @@ function getEditorCommands(): Command[] {
     });
   }
 
+  commands.push({
+    id: "toggle-focus-mode",
+    title: strings.toggleFocusMode(),
+    icon: isFocusMode ? FocusMode : NormalMode,
+    action: () => useAppStore.getState().toggleFocusMode(),
+    group: strings.editor(),
+    type: "command"
+  });
+
   return commands;
 }
 

apps/web/src/stores/app-store.ts

@@ -41,6 +41,9 @@ import {
 import { NetworkCheck } from "../utils/network-check";
 import { Color, Notebook, Tag } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
+import { useEditorStore } from "./editor-store";
+import { useEditorManager } from "../components/editor/manager";
+import { exitFullscreen } from "../utils/fullscreen";
 
 type SyncState =
   | "synced"
@@ -171,6 +174,10 @@ class AppStore extends BaseStore<AppStore> {
 
   toggleFocusMode = () => {
     this.set((state) => (state.isFocusMode = !state.isFocusMode));
+    if (document.fullscreenElement) exitFullscreen();
+    const session = useEditorStore.getState().getActiveSession();
+    const editor = session && useEditorManager.getState().getEditor(session.id);
+    if (editor) editor.editor?.focus();
   };
 
   toggleAutoSync = () => {

apps/web/src/utils/fullscreen.ts

@@ -0,0 +1,23 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+export function exitFullscreen() {
+  if (!document.fullscreenElement) return;
+  document.exitFullscreen();
+}

packages/intl/locale/en.po

@@ -6173,6 +6173,10 @@ msgstr "To use app lock, you must enable biometrics such as Fingerprint lock or
 msgid "Toggle dark/light mode"
 msgstr "Toggle dark/light mode"
 
+#: src/strings.ts:2441
+msgid "Toggle focus mode"
+msgstr "Toggle focus mode"
+
 #: src/strings.ts:2331
 msgid "Toggle indentation mode"
 msgstr "Toggle indentation mode"

packages/intl/locale/pseudo-LOCALE.po

@@ -6132,6 +6132,10 @@ msgstr ""
 msgid "Toggle dark/light mode"
 msgstr ""
 
+#: src/strings.ts:2441
+msgid "Toggle focus mode"
+msgstr ""
+
 #: src/strings.ts:2331
 msgid "Toggle indentation mode"
 msgstr ""

packages/intl/src/strings.ts

@@ -2438,5 +2438,6 @@ Use this if changes from other devices are not appearing on this device. This wi
   releaseTrackDesc: () => t`Select the release track for Notesnook.`,
   stable: () => t`Stable`,
   beta: () => t`Beta`,
-  zoom: () => t`Zoom`
+  zoom: () => t`Zoom`,
+  toggleFocusMode: () => t`Toggle focus mode`
 };