feat(settings): add settings to adjust screen brightness when reading, closes #1532 (#2197)

apps/readest-app/src/components/Providers.tsx

@@ -9,6 +9,7 @@ import { CSPostHogProvider } from '@/context/PHContext';
 import { SyncProvider } from '@/context/SyncContext';
 import { initSystemThemeListener, loadDataTheme } from '@/store/themeStore';
 import { useSettingsStore } from '@/store/settingsStore';
+import { useDeviceControlStore } from '@/store/deviceStore';
 import { useDefaultIconSize } from '@/hooks/useResponsiveSize';
 import { useSafeAreaInsets } from '@/hooks/useSafeAreaInsets';
 import { getLocale } from '@/utils/misc';
@@ -16,6 +17,7 @@ import { getLocale } from '@/utils/misc';
 const Providers = ({ children }: { children: React.ReactNode }) => {
   const { appService } = useEnv();
   const { applyUILanguage } = useSettingsStore();
+  const { setScreenBrightness } = useDeviceControlStore();
   const iconSize = useDefaultIconSize();
   useSafeAreaInsets(); // Initialize safe area insets
 
@@ -38,9 +40,13 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
       initSystemThemeListener(appService);
       appService.loadSettings().then((settings) => {
         applyUILanguage(settings.globalViewSettings?.uiLanguage);
+        const brightness = settings.screenBrightness;
+        if (appService.hasScreenBrightness && brightness >= 0) {
+          setScreenBrightness(brightness / 100);
+        }
       });
     }
-  }, [appService, applyUILanguage]);
+  }, [appService, applyUILanguage, setScreenBrightness]);
 
   // Make sure appService is available in all children components
   if (!appService) return;

apps/readest-app/src/components/Slider.tsx

@@ -9,6 +9,8 @@ interface SliderProps {
   heightPx?: number;
   minLabel?: string;
   maxLabel?: string;
+  minIcon?: React.ReactNode;
+  maxIcon?: React.ReactNode;
   bubbleElement?: React.ReactNode;
   bubbleLabel?: string;
   className?: string;
@@ -27,6 +29,8 @@ const Slider: React.FC<SliderProps> = ({
   heightPx = 40,
   minLabel = '',
   maxLabel = '',
+  minIcon,
+  maxIcon,
   bubbleElement,
   bubbleLabel = '',
   className = '',
@@ -63,6 +67,7 @@ const Slider: React.FC<SliderProps> = ({
   }, [initialValue]);
 
   const percentage = ((value - min) / (max - min)) * 100;
+  const visualPercentage = (percentage / 100) * 95;
 
   return (
     <div
@@ -79,22 +84,22 @@ const Slider: React.FC<SliderProps> = ({
           className='bg-base-300 absolute h-full rounded-full'
           style={{
             width:
-              percentage > 0
-                ? `max(calc(${percentage}% + ${heightPx / 2}px), ${heightPx}px)`
+              visualPercentage > 0
+                ? `max(calc(${visualPercentage}% + ${heightPx / 2}px), ${heightPx}px)`
                 : '0px',
             [isRtl ? 'right' : 'left']: 0,
           }}
         ></div>
         {/* Min/Max labels */}
         <div className='absolute inset-0 flex items-center justify-between px-4 text-sm'>
-          <span className={`ml-2 ${minClassName}`}>{minLabel}</span>
-          <span className={`mr-2 ${maxClassName}`}>{maxLabel}</span>
+          {minIcon ? minIcon : <span className={`ml-2 ${minClassName}`}>{minLabel}</span>}
+          {maxIcon ? maxIcon : <span className={`mr-2 ${maxClassName}`}>{maxLabel}</span>}
         </div>
         {/* Thumb bubble */}
         <div
           className='pointer-events-none absolute top-0 z-10'
           style={{
-            [isRtl ? 'right' : 'left']: `max(${heightPx / 2}px, calc(${percentage}%))`,
+            [isRtl ? 'right' : 'left']: `max(${heightPx / 2}px, calc(${visualPercentage}%))`,
             transform: isRtl ? 'translateX(calc(50%))' : 'translateX(calc(-50%))',
             height: '100%',
           }}