From 6013959799b3e30e09d3e806a7fcbe0fe2476b18 Mon Sep 17 00:00:00 2001
From: chrox <chrox.huang@gmail.com>
Date: Sat, 30 Nov 2024 00:44:51 +0100
Subject: [PATCH] Add keyboard shortcuts for toggle scroll mode and open font
 layout config

---
 apps/readest-app/package.json                    |  2 +-
 .../components/settings/SettingsDialog.tsx       | 16 +++++++++++++++-
 .../src/app/reader/hooks/useBookShortcuts.ts     | 16 +++++++++++++++-
 apps/readest-app/src/helpers/shortcuts.ts        |  4 ++++
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/apps/readest-app/package.json b/apps/readest-app/package.json
index 884a218d..a9fb52ed 100644
--- a/apps/readest-app/package.json
+++ b/apps/readest-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@readest/readest-app",
-  "version": "0.7.6",
+  "version": "0.7.9",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx b/apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx
index f2c252d3..e4f73c46 100644
--- a/apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx
+++ b/apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { BookConfig } from '@/types/book';
 import { useSettingsStore } from '@/store/settingsStore';
 import { RiFontSize } from 'react-icons/ri';
@@ -19,6 +19,20 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
   const [activePanel, setActivePanel] = useState('Font');
   const { setFontLayoutSettingsDialogOpen } = useSettingsStore();
 
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      setFontLayoutSettingsDialogOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <dialog className='modal modal-open min-w-90 w-full'>
       <div className='modal-box settings-content flex h-[60%] w-1/2 min-w-[480px] max-w-full flex-col p-0'>
diff --git a/apps/readest-app/src/app/reader/hooks/useBookShortcuts.ts b/apps/readest-app/src/app/reader/hooks/useBookShortcuts.ts
index bc8ed9a9..657ee5e1 100644
--- a/apps/readest-app/src/app/reader/hooks/useBookShortcuts.ts
+++ b/apps/readest-app/src/app/reader/hooks/useBookShortcuts.ts
@@ -3,6 +3,7 @@ import { useNotebookStore } from '@/store/notebookStore';
 import useShortcuts from '@/hooks/useShortcuts';
 import useBooksManager from './useBooksManager';
 import { useSidebarStore } from '@/store/sidebarStore';
+import { useSettingsStore } from '@/store/settingsStore';
 
 interface UseBookShortcutsProps {
   sideBarBookKey: string | null;
@@ -10,8 +11,9 @@ interface UseBookShortcutsProps {
 }
 
 const useBookShortcuts = ({ sideBarBookKey, bookKeys }: UseBookShortcutsProps) => {
-  const { getView, getViewSettings } = useReaderStore();
+  const { getView, getViewSettings, setViewSettings } = useReaderStore();
   const { toggleSideBar, setSideBarBookKey } = useSidebarStore();
+  const { setFontLayoutSettingsDialogOpen } = useSettingsStore();
   const { toggleNotebook } = useNotebookStore();
   const { getNextBookKey } = useBooksManager();
   const viewSettings = getViewSettings(sideBarBookKey ?? '');
@@ -19,6 +21,16 @@ const useBookShortcuts = ({ sideBarBookKey, bookKeys }: UseBookShortcutsProps) =
   const lineHeight = viewSettings?.lineHeight ?? 1.6;
   const distance = fontSize * lineHeight * 3;
 
+  const toggleScrollMode = () => {
+    const viewSettings = getViewSettings(sideBarBookKey ?? '');
+    if (viewSettings && sideBarBookKey) {
+      viewSettings.scrolled = !viewSettings.scrolled;
+      setViewSettings(sideBarBookKey, viewSettings!);
+      const flowMode = viewSettings.scrolled ? 'scrolled' : 'paginated';
+      getView(sideBarBookKey)?.renderer.setAttribute('flow', flowMode);
+    }
+  };
+
   const switchSideBar = () => {
     if (sideBarBookKey) setSideBarBookKey(getNextBookKey(sideBarBookKey));
   };
@@ -48,6 +60,8 @@ const useBookShortcuts = ({ sideBarBookKey, bookKeys }: UseBookShortcutsProps) =
       onSwitchSideBar: switchSideBar,
       onToggleSideBar: toggleSideBar,
       onToggleNotebook: toggleNotebook,
+      onToggleScrollMode: toggleScrollMode,
+      onOpenFontLayoutSettings: () => setFontLayoutSettingsDialogOpen(true),
       onReloadPage: reloadPage,
       onGoLeft: goLeft,
       onGoRight: goRight,
diff --git a/apps/readest-app/src/helpers/shortcuts.ts b/apps/readest-app/src/helpers/shortcuts.ts
index e850bb5c..117e1faa 100644
--- a/apps/readest-app/src/helpers/shortcuts.ts
+++ b/apps/readest-app/src/helpers/shortcuts.ts
@@ -3,6 +3,8 @@ export interface ShortcutConfig {
   onToggleSideBar: string[];
   onToggleNotebook: string[];
   onToggleSearchBar: string[];
+  onToggleScrollMode: string[];
+  onOpenFontLayoutSettings: string[];
   onReloadPage: string[];
   onGoLeft: string[];
   onGoRight: string[];
@@ -15,6 +17,8 @@ const DEFAULT_SHORTCUTS: ShortcutConfig = {
   onToggleSideBar: ['s'],
   onToggleNotebook: ['n'],
   onToggleSearchBar: ['ctrl+f', 'cmd+f'],
+  onToggleScrollMode: ['shift+j'],
+  onOpenFontLayoutSettings: ['shift+f'],
   onReloadPage: ['shift+r'],
   onGoLeft: ['ArrowLeft', 'PageUp', 'h'],
   onGoRight: ['ArrowRight', 'PageDown', 'l'],