refactor(settings): move Keep Screen Awake to Behavior > Device (#4027)

Relocate the toggle from the library settings menu to the Behavior settings
panel under the Device section. Add a matching command palette entry so the
setting remains discoverable via search.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/readest-app/src/app/library/components/SettingsMenu.tsx

@@ -55,7 +55,6 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ onPullLibrary, setIsDropdow
   const [isAutoCheckUpdates, setIsAutoCheckUpdates] = useState(settings.autoCheckUpdates);
   const [isAlwaysOnTop, setIsAlwaysOnTop] = useState(settings.alwaysOnTop);
   const [isAlwaysShowStatusBar, setIsAlwaysShowStatusBar] = useState(settings.alwaysShowStatusBar);
-  const [isScreenWakeLock, setIsScreenWakeLock] = useState(settings.screenWakeLock);
   const [isOpenLastBooks, setIsOpenLastBooks] = useState(settings.openLastBooks);
   const [isAutoImportBooksOnOpen, setIsAutoImportBooksOnOpen] = useState(
     settings.autoImportBooksOnOpen,
@@ -153,12 +152,6 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ onPullLibrary, setIsDropdow
     setIsAutoCheckUpdates(newValue);
   };
 
-  const toggleScreenWakeLock = () => {
-    const newValue = !settings.screenWakeLock;
-    saveSysSettings(envConfig, 'screenWakeLock', newValue);
-    setIsScreenWakeLock(newValue);
-  };
-
   const toggleOpenLastBooks = () => {
     const newValue = !settings.openLastBooks;
     saveSysSettings(envConfig, 'openLastBooks', newValue);
@@ -398,11 +391,6 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ onPullLibrary, setIsDropdow
           onClick={toggleAlwaysShowStatusBar}
         />
       )}
-      <MenuItem
-        label={_('Keep Screen Awake')}
-        toggled={isScreenWakeLock}
-        onClick={toggleScreenWakeLock}
-      />
       {appService?.isAndroidApp && (
         <MenuItem
           label={_(_('Background Read Aloud'))}

apps/readest-app/src/components/settings/ControlPanel.tsx

@@ -49,6 +49,7 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
   const [isEink, setIsEink] = useState(viewSettings.isEink);
   const [isColorEink, setIsColorEink] = useState(viewSettings.isColorEink);
   const [autoScreenBrightness, setAutoScreenBrightness] = useState(settings.autoScreenBrightness);
+  const [screenWakeLock, setScreenWakeLock] = useState(settings.screenWakeLock);
   const [allowScript, setAllowScript] = useState(viewSettings.allowScript);
 
   const resetToDefaults = useResetViewSettings();
@@ -188,6 +189,12 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [autoScreenBrightness]);
 
+  useEffect(() => {
+    if (screenWakeLock === settings.screenWakeLock) return;
+    saveSysSettings(envConfig, 'screenWakeLock', screenWakeLock);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [screenWakeLock]);
+
   useEffect(() => {
     if (viewSettings.allowScript === allowScript) return;
     saveViewSettings(envConfig, bookKey, 'allowScript', allowScript, true, false).then(() => {
@@ -411,49 +418,56 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
         </div>
       </div>
 
-      {(appService?.isMobileApp || appService?.appPlatform === 'web') && (
-        <div className='w-full' data-setting-id='settings.control.einkMode'>
-          <h2 className='mb-2 font-medium'>{_('Device')}</h2>
-          <div className='card border-base-200 bg-base-100 border shadow'>
-            <div className='divide-base-200 divide-y'>
-              {(appService?.isAndroidApp || appService?.appPlatform === 'web') && (
-                <div className='config-item'>
-                  <span className=''>{_('E-Ink Mode')}</span>
-                  <input
-                    type='checkbox'
-                    className='toggle'
-                    checked={isEink}
-                    onChange={() => setIsEink(!isEink)}
-                  />
-                </div>
-              )}
-              {(appService?.isAndroidApp || appService?.appPlatform === 'web') && (
-                <div className='config-item' data-setting-id='settings.control.colorEinkMode'>
-                  <span className=''>{_('Color E-Ink Mode')}</span>
-                  <input
-                    type='checkbox'
-                    className='toggle'
-                    disabled={!isEink}
-                    checked={isColorEink}
-                    onChange={() => setIsColorEink(!isColorEink)}
-                  />
-                </div>
-              )}
-              {appService?.isMobileApp && (
-                <div className='config-item'>
-                  <span className=''>{_('System Screen Brightness')}</span>
-                  <input
-                    type='checkbox'
-                    className='toggle'
-                    checked={autoScreenBrightness}
-                    onChange={() => setAutoScreenBrightness(!autoScreenBrightness)}
-                  />
-                </div>
-              )}
+      <div className='w-full' data-setting-id='settings.control.device'>
+        <h2 className='mb-2 font-medium'>{_('Device')}</h2>
+        <div className='card border-base-200 bg-base-100 border shadow'>
+          <div className='divide-base-200 divide-y'>
+            {(appService?.isAndroidApp || appService?.appPlatform === 'web') && (
+              <div className='config-item' data-setting-id='settings.control.einkMode'>
+                <span className=''>{_('E-Ink Mode')}</span>
+                <input
+                  type='checkbox'
+                  className='toggle'
+                  checked={isEink}
+                  onChange={() => setIsEink(!isEink)}
+                />
+              </div>
+            )}
+            {(appService?.isAndroidApp || appService?.appPlatform === 'web') && (
+              <div className='config-item' data-setting-id='settings.control.colorEinkMode'>
+                <span className=''>{_('Color E-Ink Mode')}</span>
+                <input
+                  type='checkbox'
+                  className='toggle'
+                  disabled={!isEink}
+                  checked={isColorEink}
+                  onChange={() => setIsColorEink(!isColorEink)}
+                />
+              </div>
+            )}
+            {appService?.isMobileApp && (
+              <div className='config-item'>
+                <span className=''>{_('System Screen Brightness')}</span>
+                <input
+                  type='checkbox'
+                  className='toggle'
+                  checked={autoScreenBrightness}
+                  onChange={() => setAutoScreenBrightness(!autoScreenBrightness)}
+                />
+              </div>
+            )}
+            <div className='config-item' data-setting-id='settings.control.screenWakeLock'>
+              <span className=''>{_('Keep Screen Awake')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={screenWakeLock}
+                onChange={() => setScreenWakeLock(!screenWakeLock)}
+              />
             </div>
           </div>
         </div>
-      )}
+      </div>
 
       <div className='w-full' data-setting-id='settings.control.allowJavascript'>
         <h2 className='mb-2 font-medium'>{_('Security')}</h2>

apps/readest-app/src/services/commandRegistry.ts

@@ -483,6 +483,12 @@ const controlPanelItems = [
     keywords: ['color', 'eink', 'e-ink', 'kaleido'],
     section: 'Device',
   },
+  {
+    id: 'settings.control.screenWakeLock',
+    labelKey: _('Keep Screen Awake'),
+    keywords: ['screen', 'wake', 'lock', 'awake', 'sleep', 'display'],
+    section: 'Device',
+  },
   {
     id: 'settings.control.allowJavascript',
     labelKey: _('Allow JavaScript'),