Custom reader profiles

src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopProfile.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
+import { IReaderSettingsWithDefaultFlag } from '@/modules/reader/types/Reader.types.ts';
+import { MultiValueButtonDefaultableProps } from '@/modules/core/Core.types.ts';
+import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
+import {
+    createProfileValueToDisplayData,
+    getValidReaderProfile,
+} from '@/modules/reader/utils/ReaderSettings.utils.tsx';
+
+export const ReaderNavBarDesktopProfile = ({
+    defaultProfile,
+    profiles,
+    updateSetting,
+    ...buttonSelectInputProps
+}: Pick<IReaderSettingsWithDefaultFlag, 'defaultProfile' | 'profiles'> &
+    Pick<MultiValueButtonDefaultableProps<string>, 'isDefaultable' | 'onDefault'> & {
+        updateSetting: (profile: string) => void;
+    }) => (
+    <ValueRotationButton
+        {...buttonSelectInputProps}
+        value={defaultProfile.isDefault ? undefined : getValidReaderProfile(defaultProfile.value, profiles)}
+        values={profiles}
+        setValue={updateSetting}
+        valueToDisplayData={createProfileValueToDisplayData(profiles, true)}
+        defaultIcon={<ManageAccountsIcon />}
+    />
+);

src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx

@@ -16,9 +16,18 @@ import { ReaderNavBarDesktopOffsetDoubleSpread } from '@/modules/reader/componen
 import { ReaderNavBarDesktopReadingDirection } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingDirection.tsx';
 import { ReaderSettingsTypeProps } from '@/modules/reader/types/Reader.types.ts';
 import { ReaderNavBarDesktopProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
+import { ReaderNavBarDesktopProfile } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopProfile.tsx';
 
 export const ReaderNavBarDesktopQuickSettings = ({
-    settings: { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldStretchPage, readingDirection },
+    settings: {
+        defaultProfile,
+        profiles,
+        readingMode,
+        shouldOffsetDoubleSpreads,
+        pageScaleMode,
+        shouldStretchPage,
+        readingDirection,
+    },
     updateSetting,
     openSettings,
     isDefaultable,
@@ -28,6 +37,13 @@ export const ReaderNavBarDesktopQuickSettings = ({
 
     return (
         <Stack sx={{ gap: 1 }}>
+            <ReaderNavBarDesktopProfile
+                defaultProfile={defaultProfile}
+                profiles={profiles}
+                updateSetting={(value) => updateSetting('defaultProfile', value)}
+                isDefaultable={isDefaultable}
+                onDefault={() => onDefault?.('defaultProfile')}
+            />
             <ReaderNavBarDesktopReadingMode
                 readingMode={readingMode}
                 setReadingMode={(value) => updateSetting('readingMode', value)}

src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx

@@ -12,11 +12,12 @@ import { ReaderSettingReadingDirection } from '@/modules/reader/components/setti
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
 import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
+import { ReaderSettingProfile } from '@/modules/reader/components/settings/layout/profiles/ReaderSettingProfile.tsx';
 
 const DEFAULT_MANGA: MangaIdInfo = { id: -1 };
 export const ReaderBottomBarMobileQuickSettings = () => {
     const { manga } = useReaderStateMangaContext();
-    const { readingMode, readingDirection } = ReaderService.useSettings();
+    const { defaultProfile, profiles, readingMode, readingDirection } = ReaderService.useSettings();
     const deleteSetting = ReaderService.useCreateDeleteSetting(manga ?? DEFAULT_MANGA);
 
     if (!manga) {
@@ -25,6 +26,13 @@ export const ReaderBottomBarMobileQuickSettings = () => {
 
     return (
         <Stack sx={{ gap: 2 }}>
+            <ReaderSettingProfile
+                defaultProfile={defaultProfile}
+                profiles={profiles}
+                updateSetting={(value) => ReaderService.updateSetting(manga, 'defaultProfile', value)}
+                isDefaultable
+                onDefault={() => deleteSetting('defaultProfile')}
+            />
             <ReaderSettingReadingMode
                 readingMode={readingMode}
                 setReadingMode={(value) => ReaderService.updateSetting(manga, 'readingMode', value)}