Fix linting

src/features/manga/components/TrackMangaButton.tsx

@@ -27,6 +27,7 @@ import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
 export const TrackMangaButton = ({ manga }: { manga: MangaTrackRecordInfo & Pick<MangaType, 'title'> }) => {
     const { t } = useLingui();
     const navigate = useNavigate();
+    const isMobileWidth = MediaQuery.useIsMobileWidth();
 
     const trackerList = requestManager.useGetTrackerList<GetTrackersSettingsQuery>(GET_TRACKERS_SETTINGS);
     const trackers = trackerList.data?.trackers.nodes ?? [];
@@ -55,7 +56,7 @@ export const TrackMangaButton = ({ manga }: { manga: MangaTrackRecordInfo & Pick
                 <>
                     <CustomButton
                         {...bindTrigger(popupState)}
-                        size={MediaQuery.useIsMobileWidth() ? 'small' : 'medium'}
+                        size={isMobileWidth ? 'small' : 'medium'}
                         disabled={trackerList.loading || !!trackerList.error}
                         onClick={() => handleClick(popupState.open)}
                         variant={trackersInUse.length ? 'contained' : 'outlined'}

src/features/navigation-bar/components/MobileBottomBar.tsx

@@ -20,8 +20,32 @@ import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
 import type { NavbarItem } from '@/features/navigation-bar/NavigationBar.types.ts';
 import type { StaticAppRoute } from '@/base/AppRoute.constants.ts';
 
-export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
+const BottomNavigationItem = ({
+    path,
+    title,
+    useBadge,
+    SelectedIconComponent,
+    IconComponent,
+    isActive,
+}: NavbarItem & { isActive: boolean }) => {
     const { t } = useLingui();
+    const count = useBadge?.()?.count;
+
+    return (
+        <BottomNavigationAction
+            key={path}
+            value={path}
+            label={t(title)}
+            icon={
+                <Badge key={path} badgeContent={count} color="primary">
+                    {isActive ? <SelectedIconComponent /> : <IconComponent />}
+                </Badge>
+            }
+        />
+    );
+};
+
+export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
     const theme = useTheme();
     const { setBottomBarHeight } = useNavBarContext();
     const location = useLocation();
@@ -66,16 +90,11 @@ export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] })
                     navigate(newValue);
                 }}
             >
-                {navBarItems.map(({ path, title, IconComponent, SelectedIconComponent, useBadge }) => (
-                    <BottomNavigationAction
-                        key={path}
-                        value={path}
-                        label={t(title)}
-                        icon={
-                            <Badge key={path} badgeContent={useBadge?.().count} color="primary">
-                                {selectedNavBarItem === path ? <SelectedIconComponent /> : <IconComponent />}
-                            </Badge>
-                        }
+                {navBarItems.map((navbarItem) => (
+                    <BottomNavigationItem
+                        key={navbarItem.path}
+                        {...navbarItem}
+                        isActive={selectedNavBarItem === navbarItem.path}
                     />
                 ))}
             </BottomNavigation>

src/features/settings/screens/ImageProcessingSetting.tsx

@@ -22,7 +22,6 @@ import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholder.tsx';
 import { EmptyViewAbsoluteCentered } from '@/base/components/feedback/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
-import { assertIsDefined } from '@/base/Asserts.ts';
 import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
 import {
     addStableIdToConversions,
@@ -45,25 +44,9 @@ export const ImageProcessingSetting = ({ type }: { type: ImageProcessingType })
     });
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
-    if (loading) {
-        return <LoadingPlaceholder />;
-    }
-
-    if (error) {
-        return (
-            <EmptyViewAbsoluteCentered
-                message={t`Unable to load data`}
-                messageExtra={getErrorMessage(error)}
-                retry={() => refetch().catch(defaultPromiseErrorHandler('ImageProcessingSetting::refetch'))}
-            />
-        );
-    }
-
     const settingKey = IMAGE_PROCESSING_TYPE_TO_SETTING[type];
 
-    assertIsDefined(data?.settings?.[settingKey]);
-
-    const conversions = data?.settings?.[settingKey];
+    const conversions = data?.settings?.[settingKey] ?? [];
 
     const [tmpConversions, setTmpConversions] = useState(
         normalizeConversions(maybeAddDefault(addStableIdToConversions(conversions))),
@@ -90,6 +73,20 @@ export const ImageProcessingSetting = ({ type }: { type: ImageProcessingType })
         }
     };
 
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
+    if (error) {
+        return (
+            <EmptyViewAbsoluteCentered
+                message={t`Unable to load data`}
+                messageExtra={getErrorMessage(error)}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('ImageProcessingSetting::refetch'))}
+            />
+        );
+    }
+
     return (
         <Stack sx={{ p: 2, gap: 5 }}>
             <Typography>

src/features/source/browse/components/filters/SelectFilter.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
@@ -23,7 +23,7 @@ interface Props {
     update: any;
 }
 
-function noSelect(
+function NoSelect(
     values: string[],
     name: string,
     state: number,
@@ -32,7 +32,7 @@ function noSelect(
     update: any,
     group?: number,
 ) {
-    const [val, setval] = React.useState(state);
+    const [val, setval] = useState(state);
 
     if (values) {
         const handleChange = (event: { target: { name: any; value: any } }) => {
@@ -62,4 +62,4 @@ function noSelect(
 }
 
 export const SelectFilter: React.FC<Props> = ({ values, name, state, position, updateFilterValue, update, group }) =>
-    noSelect(values, name, state, position, updateFilterValue, update, group);
+    NoSelect(values, name, state, position, updateFilterValue, update, group);