Reader hotkeys

src/modules/core/Core.types.ts

@@ -47,3 +47,13 @@ export interface MultiValueButtonDefaultableProps<Value extends string | number>
 export type MultiValueButtonProps<Value extends string | number> =
     | (MultiValueButtonBaseProps<Value> & PropertiesNever<MultiValueButtonDefaultableProps<Value>>)
     | MultiValueButtonDefaultableProps<Value>;
+
+export enum ScrollOffset {
+    BACKWARD,
+    FORWARD,
+}
+
+export enum ScrollDirection {
+    X,
+    Y,
+}

src/modules/core/components/Kbd.tsx

@@ -0,0 +1,23 @@
+/*
+ * 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 { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+
+export const Kbd = styled(Typography)(({ theme }) => ({
+    display: 'inline-block',
+    padding: '0.2em 0.4em',
+    fontSize: '0.85em',
+    lineHeight: '1.4',
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: '3px',
+    boxShadow: `inset 0 -1px 0 ${theme.palette.divider}`,
+    fontFamily: 'monospace, monospace',
+}));

src/modules/core/components/buttons/ValueRotationButton.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { ReactNode, useMemo } from 'react';
 import Button from '@mui/material/Button';
 import { MultiValueButtonProps } from '@/modules/core/Core.types.ts';
+import { getNextRotationValue } from '@/modules/core/utils/ValueRotationButton.utils.ts';
 
 export const ValueRotationButton = <Value extends string | number>({
     value,
@@ -48,16 +49,14 @@ export const ValueRotationButton = <Value extends string | number>({
     return (
         <Button
             onClick={() => {
-                const nextValueIndex = (indexOfValue + 1) % values.length;
-                const wasLastValue = nextValueIndex === 0;
+                const nextValue = getNextRotationValue(indexOfValue, values, isDefaultable);
 
-                const isDefaultNextValue = isDefaultable && wasLastValue;
-                if (isDefaultNextValue) {
+                if (nextValue === undefined) {
                     onDefault?.();
                     return;
                 }
 
-                setValue(values[(indexOfValue + 1) % values.length]);
+                setValue(nextValue);
             }}
             sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
             variant="contained"

src/modules/core/contexts/AppContext.tsx

@@ -25,6 +25,7 @@ import { AppThemes, getTheme } from '@/modules/theme/services/AppThemes.ts';
 import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
 import { ReaderContextProvider } from '@/modules/reader/contexts/ReaderContextProvider.tsx';
 import { DIRECTION_TO_CACHE } from '@/modules/theme/ThemeDirectionCache.ts';
+import { AppHotkeysProvider } from '@/modules/hotkeys/contexts/AppHotkeysProvider.tsx';
 
 interface Props {
     children: React.ReactNode;
@@ -84,7 +85,9 @@ export const AppContext: React.FC<Props> = ({ children }) => {
                                     <NavBarContextProvider>
                                         <ActiveDeviceContextProvider>
                                             <SnackbarProvider>
-                                                <ReaderContextProvider>{children}</ReaderContextProvider>
+                                                <ReaderContextProvider>
+                                                    <AppHotkeysProvider>{children}</AppHotkeysProvider>
+                                                </ReaderContextProvider>
                                             </SnackbarProvider>
                                         </ActiveDeviceContextProvider>
                                     </NavBarContextProvider>

src/modules/core/utils/ValueRotationButton.utils.ts

@@ -0,0 +1,23 @@
+/*
+ * 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/.
+ */
+
+export const getNextRotationValue = <Value>(
+    indexOfValue: number,
+    values: Value[],
+    isDefaultable?: boolean,
+): Value | undefined => {
+    const nextValueIndex = (indexOfValue + 1) % values.length;
+    const wasLastValue = nextValueIndex === 0;
+
+    const isDefaultNextValue = !!isDefaultable && wasLastValue;
+    if (isDefaultNextValue) {
+        return undefined;
+    }
+
+    return values[(indexOfValue + 1) % values.length];
+};