Add "safe area inset" setting to reader

src/features/reader/settings/ReaderSettings.constants.tsx

@@ -155,6 +155,7 @@ const GLOBAL_READER_SETTING_OBJECT: Record<keyof IReaderSettingsGlobal, undefine
     scrollAmount: undefined,
     shouldUseInfiniteScroll: undefined,
     shouldShowTransitionPage: undefined,
+    safeAreaInset: undefined,
 };
 
 export const GLOBAL_READER_SETTING_KEYS = Object.keys(GLOBAL_READER_SETTING_OBJECT);
@@ -242,6 +243,12 @@ export const DEFAULT_READER_SETTINGS: IReaderSettings = {
     scrollAmount: ReaderScrollAmount.LARGE,
     shouldUseInfiniteScroll: true,
     shouldShowTransitionPage: true,
+    safeAreaInset: {
+        top: true,
+        right: true,
+        bottom: true,
+        left: true,
+    },
 };
 
 export const READER_PROGRESS_BAR_POSITION_TO_PLACEMENT: Record<ProgressBarPosition, TooltipProps['placement']> = {

src/features/reader/settings/ReaderSettingsMetadata.ts

@@ -84,6 +84,7 @@ const convertSettingsToMetadata = (
     readerWidth: JSON.stringify(settings.readerWidth),
     hotkeys: JSON.stringify(settings.hotkeys),
     autoScroll: JSON.stringify(settings.autoScroll),
+    safeAreaInset: JSON.stringify(settings.autoScroll),
 });
 
 export const DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG = convertToSettingsWithDefaultFlag(

src/features/reader/settings/general/ReaderGeneralSettings.tsx

@@ -16,6 +16,7 @@ import { ProgressBarType, ReaderOverlayMode } from '@/features/reader/Reader.typ
 import { ReaderSettingOverlayMode } from '@/features/reader/overlay/settings/ReaderSettingOverlayMode.tsx';
 import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
 import { ReaderSettingBackgroundColor } from '@/features/reader/settings/general/components/ReaderSettingBackgroundColor.tsx';
+import { ReaderSettingSafeAreaInset } from '@/features/reader/settings/general/components/ReaderSettingSafeAreaInset.tsx';
 
 export const ReaderGeneralSettings = ({
     overlayMode,
@@ -59,6 +60,10 @@ export const ReaderGeneralSettings = ({
                     onChange={(_, checked) => updateSetting('shouldShowPageNumber', checked)}
                 />
             )}
+            <ReaderSettingSafeAreaInset
+                safeAreaInset={settings.safeAreaInset}
+                updateSetting={(value) => updateSetting('safeAreaInset', value)}
+            />
         </Stack>
     );
 };

src/features/reader/settings/general/components/ReaderSettingSafeAreaInset.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useLingui } from '@lingui/react/macro';
+import { msg } from '@lingui/core/macro';
+import type { ValueToDisplayData } from '@/base/Base.types.ts';
+import { ButtonSelectInput } from '@/base/components/inputs/ButtonSelectInput.tsx';
+import type { IReaderSettingsWithDefaultFlag, SafeAreaInset } from '@/features/reader/Reader.types.ts';
+import { DEFAULT_READER_SETTINGS } from '@/features/reader/settings/ReaderSettings.constants.tsx';
+
+const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<keyof SafeAreaInset> = {
+    top: {
+        title: msg`Top`,
+        icon: null,
+    },
+    right: {
+        title: msg`Right`,
+        icon: null,
+    },
+    bottom: {
+        title: msg`Bottom`,
+        icon: null,
+    },
+    left: {
+        title: msg`Left`,
+        icon: null,
+    },
+};
+
+const READER_SAFE_AREA_INSET_VALUES = Object.keys(DEFAULT_READER_SETTINGS.safeAreaInset) as (keyof SafeAreaInset)[];
+
+export const ReaderSettingSafeAreaInset = ({
+    safeAreaInset,
+    updateSetting,
+}: Pick<IReaderSettingsWithDefaultFlag, 'safeAreaInset'> & {
+    updateSetting: (safeAreaInset: SafeAreaInset) => void;
+}) => {
+    const { t } = useLingui();
+
+    return (
+        <ButtonSelectInput
+            label={t`Apply safe area padding`}
+            description={t`Prevents content from overlapping device cutouts and screen edges`}
+            value={Object.entries(safeAreaInset)
+                .filter(([, enabled]) => enabled)
+                .map(([key]) => key as keyof SafeAreaInset)}
+            values={READER_SAFE_AREA_INSET_VALUES}
+            setValue={(values) =>
+                updateSetting(
+                    Object.fromEntries(
+                        READER_SAFE_AREA_INSET_VALUES.map((key) => [key, values.includes(key)]),
+                    ) as unknown as SafeAreaInset,
+                )
+            }
+            valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+        />
+    );
+};

src/features/reader/settings/layout/components/ReaderSettingTapZoneInvertMode.tsx

@@ -93,7 +93,7 @@ export const ReaderSettingTapZoneInvertMode = ({
     const tapZonesInvertOption = convertTapZoneInvertModeToOption(tapZoneInvertMode.value);
 
     return (
-        <ButtonSelectInput
+        <ButtonSelectInput<TapZonesInvertOption>
             {...buttonSelectInputProps}
             label={t`Invert tap zones`}
             value={tapZoneInvertMode.isDefault ? undefined : tapZonesInvertOption}