Reader hotkeys

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"