Remove incorrect "ListItemSecondaryAction" usage (#486)

src/components/navbar/ReaderNavBar.tsx

@@ -21,7 +21,6 @@ import Zoom from '@mui/material/Zoom';
 import { Divider, FormControl, MenuItem, Select, styled, Tooltip } from '@mui/material';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
-import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Collapse from '@mui/material/Collapse';
 import { useTranslation } from 'react-i18next';
 import { ChapterOffset, IReaderSettings, TChapter, TManga } from '@/typings';
@@ -247,20 +246,18 @@ export function ReaderNavBar(props: IProps) {
                         }}
                     >
                         <ListItemText primary={t('reader.settings.title.reader_settings')} />
-                        <ListItemSecondaryAction>
-                            <IconButton
-                                edge="start"
-                                color="inherit"
-                                aria-label="menu"
-                                disableRipple
-                                disableFocusRipple
-                                onClick={() => setSettingsCollapseOpen(!settingsCollapseOpen)}
-                                size="large"
-                            >
-                                {settingsCollapseOpen && <KeyboardArrowUpIcon />}
-                                {!settingsCollapseOpen && <KeyboardArrowDownIcon />}
-                            </IconButton>
-                        </ListItemSecondaryAction>
+                        <IconButton
+                            edge="start"
+                            color="inherit"
+                            aria-label="menu"
+                            disableRipple
+                            disableFocusRipple
+                            onClick={() => setSettingsCollapseOpen(!settingsCollapseOpen)}
+                            size="large"
+                        >
+                            {settingsCollapseOpen && <KeyboardArrowUpIcon />}
+                            {!settingsCollapseOpen && <KeyboardArrowDownIcon />}
+                        </IconButton>
                     </ListItem>
                     <Collapse in={settingsCollapseOpen} timeout="auto" unmountOnExit>
                         <ReaderSettingsOptions

src/components/navbar/action/LangSelect.tsx

@@ -15,7 +15,7 @@ import Dialog from '@mui/material/Dialog';
 import Switch from '@mui/material/Switch';
 import IconButton from '@mui/material/IconButton';
 import FilterListIcon from '@mui/icons-material/FilterList';
-import { List, ListItemSecondaryAction, ListItemText, Tooltip } from '@mui/material';
+import { List, ListItemText, Tooltip } from '@mui/material';
 import ListItem from '@mui/material/ListItem';
 import { useTranslation } from 'react-i18next';
 import { cloneObject } from '@/util/cloneObject';
@@ -98,12 +98,10 @@ export function LangSelect(props: IProps) {
                             <ListItem key={lang}>
                                 <ListItemText primary={translateExtensionLanguage(lang)} />
 
-                                <ListItemSecondaryAction>
-                                    <Switch
-                                        checked={mShownLangs.indexOf(lang) !== -1}
-                                        onChange={(e) => handleChange(e, lang)}
-                                    />
-                                </ListItemSecondaryAction>
+                                <Switch
+                                    checked={mShownLangs.indexOf(lang) !== -1}
+                                    onChange={(e) => handleChange(e, lang)}
+                                />
                             </ListItem>
                         ))}
                     </List>

src/components/reader/ReaderSettingsOptions.tsx

@@ -7,7 +7,6 @@
  */
 
 import { List, ListItem, ListItemText, Switch } from '@mui/material';
-import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import { useTranslation } from 'react-i18next';
@@ -39,66 +38,54 @@ export function ReaderSettingsOptions({
         <List>
             <ListItem>
                 <ListItemText primary={t('reader.settings.label.static_navigation')} />
-                <ListItemSecondaryAction>
-                    <Switch
-                        edge="end"
-                        checked={staticNav}
-                        onChange={(e) => setSettingValue('staticNav', e.target.checked)}
-                    />
-                </ListItemSecondaryAction>
+                <Switch
+                    edge="end"
+                    checked={staticNav}
+                    onChange={(e) => setSettingValue('staticNav', e.target.checked)}
+                />
             </ListItem>
             <ListItem>
                 <ListItemText primary={t('reader.settings.label.show_page_number')} />
-                <ListItemSecondaryAction>
-                    <Switch
-                        edge="end"
-                        checked={showPageNumber}
-                        onChange={(e) => setSettingValue('showPageNumber', e.target.checked)}
-                    />
-                </ListItemSecondaryAction>
+                <Switch
+                    edge="end"
+                    checked={showPageNumber}
+                    onChange={(e) => setSettingValue('showPageNumber', e.target.checked)}
+                />
             </ListItem>
             <ListItem>
                 <ListItemText primary={t('reader.settings.label.load_next_chapter')} />
-                <ListItemSecondaryAction>
-                    <Switch
-                        edge="end"
-                        checked={loadNextOnEnding}
-                        onChange={(e) => setSettingValue('loadNextOnEnding', e.target.checked)}
-                    />
-                </ListItemSecondaryAction>
+                <Switch
+                    edge="end"
+                    checked={loadNextOnEnding}
+                    onChange={(e) => setSettingValue('loadNextOnEnding', e.target.checked)}
+                />
             </ListItem>
             <ListItem>
                 <ListItemText primary={t('reader.settings.label.skip_dup_chapters')} />
-                <ListItemSecondaryAction>
-                    <Switch
-                        edge="end"
-                        checked={skipDupChapters}
-                        onChange={(e) => setSettingValue('skipDupChapters', e.target.checked)}
-                    />
-                </ListItemSecondaryAction>
+                <Switch
+                    edge="end"
+                    checked={skipDupChapters}
+                    onChange={(e) => setSettingValue('skipDupChapters', e.target.checked)}
+                />
             </ListItem>
             {fitPageToWindowEligible ? (
                 <ListItem>
                     <ListItemText primary={t('reader.settings.label.fit_page_to_window')} />
-                    <ListItemSecondaryAction>
-                        <Switch
-                            edge="end"
-                            checked={fitPageToWindow}
-                            onChange={(e) => setSettingValue('fitPageToWindow', e.target.checked)}
-                        />
-                    </ListItemSecondaryAction>
+                    <Switch
+                        edge="end"
+                        checked={fitPageToWindow}
+                        onChange={(e) => setSettingValue('fitPageToWindow', e.target.checked)}
+                    />
                 </ListItem>
             ) : null}
             {readerType === 'DoubleLTR' || readerType === 'DoubleRTL' ? (
                 <ListItem>
                     <ListItemText primary={t('reader.settings.label.offset_first_page')} />
-                    <ListItemSecondaryAction>
-                        <Switch
-                            edge="end"
-                            checked={offsetFirstPage}
-                            onChange={(e) => setSettingValue('offsetFirstPage', e.target.checked)}
-                        />
-                    </ListItemSecondaryAction>
+                    <Switch
+                        edge="end"
+                        checked={offsetFirstPage}
+                        onChange={(e) => setSettingValue('offsetFirstPage', e.target.checked)}
+                    />
                 </ListItem>
             ) : null}
             <ListItem>

src/components/settings/downloads/DownloadAheadSetting.tsx

@@ -8,7 +8,6 @@
 
 import { useTranslation } from 'react-i18next';
 import { List, ListItem, ListItemText, Switch } from '@mui/material';
-import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import { useCallback } from 'react';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
@@ -51,13 +50,7 @@ export const DownloadAheadSetting = () => {
         <List>
             <ListItem>
                 <ListItemText primary={t('download.settings.download_ahead.label.while_reading')} />
-                <ListItemSecondaryAction>
-                    <Switch
-                        edge="end"
-                        checked={shouldDownloadAhead}
-                        onChange={(e) => setDoAutoUpdates(e.target.checked)}
-                    />
-                </ListItemSecondaryAction>
+                <Switch edge="end" checked={shouldDownloadAhead} onChange={(e) => setDoAutoUpdates(e.target.checked)} />
             </ListItem>
             <NumberSetting
                 settingTitle={t('download.settings.download_ahead.label.unread_chapters_to_download')}

src/components/settings/globalUpdate/GlobalUpdateSettings.tsx

@@ -10,7 +10,6 @@ import List from '@mui/material/List';
 import ListSubheader from '@mui/material/ListSubheader';
 import { useTranslation } from 'react-i18next';
 import { ListItem, ListItemText, Switch } from '@mui/material';
-import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import { GlobalUpdateSettingsCategories } from '@/components/settings/globalUpdate/GlobalUpdateSettingsCategories.tsx';
 import { GlobalUpdateSettingsEntries } from '@/components/settings/globalUpdate/GlobalUpdateSettingsEntries.tsx';
 import { GlobalUpdateSettingsInterval } from '@/components/settings/globalUpdate/GlobalUpdateSettingsInterval.tsx';
@@ -54,13 +53,11 @@ export const GlobalUpdateSettings = () => {
                     primary={t('library.settings.global_update.metadata.label.title')}
                     secondary={t('library.settings.global_update.metadata.label.description')}
                 />
-                <ListItemSecondaryAction>
-                    <Switch
-                        edge="end"
-                        checked={updateMangas}
-                        onChange={(e) => updateSetting('updateMangas', e.target.checked)}
-                    />
-                </ListItemSecondaryAction>
+                <Switch
+                    edge="end"
+                    checked={updateMangas}
+                    onChange={(e) => updateSetting('updateMangas', e.target.checked)}
+                />
             </ListItem>
         </List>
     );

src/components/settings/globalUpdate/GlobalUpdateSettingsInterval.tsx

@@ -8,7 +8,6 @@
 
 import { useTranslation } from 'react-i18next';
 import { List, ListItem, ListItemText, Switch } from '@mui/material';
-import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import { useCallback } from 'react';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
@@ -51,9 +50,7 @@ export const GlobalUpdateSettingsInterval = () => {
         <List>
             <ListItem>
                 <ListItemText primary={t('library.settings.global_update.auto_update.label.title')} />
-                <ListItemSecondaryAction>
-                    <Switch edge="end" checked={doAutoUpdates} onChange={(e) => setDoAutoUpdates(e.target.checked)} />
-                </ListItemSecondaryAction>
+                <Switch edge="end" checked={doAutoUpdates} onChange={(e) => setDoAutoUpdates(e.target.checked)} />
             </ListItem>
             <NumberSetting
                 settingTitle={t('library.settings.global_update.auto_update.interval.label.title')}

src/components/settings/webUI/WebUIUpdateIntervalSetting.tsx

@@ -8,7 +8,6 @@
 
 import { useTranslation } from 'react-i18next';
 import { List, ListItem, ListItemText, Switch } from '@mui/material';
-import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import { useCallback } from 'react';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
@@ -51,14 +50,12 @@ export const WebUIUpdateIntervalSetting = ({ disabled = false }: { disabled?: bo
         <List>
             <ListItem disabled={disabled}>
                 <ListItemText primary={t('settings.webui.auto_update.label.title')} />
-                <ListItemSecondaryAction>
-                    <Switch
-                        disabled={disabled}
-                        edge="end"
-                        checked={shouldAutoUpdate}
-                        onChange={(e) => setDoAutoUpdates(e.target.checked)}
-                    />
-                </ListItemSecondaryAction>
+                <Switch
+                    disabled={disabled}
+                    edge="end"
+                    checked={shouldAutoUpdate}
+                    onChange={(e) => setDoAutoUpdates(e.target.checked)}
+                />
             </ListItem>
             <NumberSetting
                 settingTitle={t('settings.webui.auto_update.label.interval')}

src/components/sourceConfiguration/TwoStatePreference.tsx

@@ -9,7 +9,6 @@
 import { createElement, useState, useEffect } from 'react';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
-import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Switch from '@mui/material/Switch';
 import Checkbox from '@mui/material/Checkbox';
 import { CheckBoxPreferenceProps, SwitchPreferenceCompatProps, TwoStatePreferenceProps } from '@/typings';
@@ -57,18 +56,16 @@ function TwoSatePreference(props: TwoStatePreferenceProps) {
     return (
         <ListItem>
             <ListItemText primary={title} secondary={summary} />
-            <ListItemSecondaryAction>
-                {createElement(getTwoStateType(twoStateType), {
-                    edge: 'end',
-                    checked: internalCurrentValue,
-                    onChange: () => {
-                        updateValue(twoStateType === 'Switch' ? 'switchState' : 'checkBoxState', !currentValue);
+            {createElement(getTwoStateType(twoStateType), {
+                edge: 'end',
+                checked: internalCurrentValue,
+                onChange: () => {
+                    updateValue(twoStateType === 'Switch' ? 'switchState' : 'checkBoxState', !currentValue);
 
-                        // appear smooth
-                        setInternalCurrentValue(!currentValue);
-                    },
-                })}
-            </ListItemSecondaryAction>
+                    // appear smooth
+                    setInternalCurrentValue(!currentValue);
+                },
+            })}
         </ListItem>
     );
 }