[ESLint] Prefer named exports (#427)

src/components/ExtensionCard.tsx

@@ -15,7 +15,7 @@ import Typography from '@mui/material/Typography';
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { PartialExtension, TranslationKey } from '@/typings';
-import requestManager from '@/lib/requests/RequestManager.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
 
 interface IProps {
     extension: PartialExtension;
@@ -60,7 +60,7 @@ const INSTALLED_STATE_TO_TRANSLATION_KEY_MAP: { [installedState in InstalledStat
     [InstalledState.INSTALLING]: 'extension.state.label.installing',
 } as const;
 
-export default function ExtensionCard(props: IProps) {
+export function ExtensionCard(props: IProps) {
     const { t } = useTranslation();
 
     const {

src/components/MangaCard.tsx

@@ -12,9 +12,9 @@ import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
 import { Avatar, Box, CardContent, styled } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import requestManager from '@/lib/requests/RequestManager.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
-import SpinnerImage from '@/components/util/SpinnerImage';
+import { SpinnerImage } from '@/components/util/SpinnerImage';
 import { TPartialManga } from '@/typings.ts';
 
 const BottomGradient = styled('div')({
@@ -71,7 +71,7 @@ interface IProps {
     inLibraryIndicator?: boolean;
 }
 
-const MangaCard = (props: IProps) => {
+export const MangaCard = (props: IProps) => {
     const { t } = useTranslation();
 
     const {
@@ -259,5 +259,3 @@ const MangaCard = (props: IProps) => {
         </Card>
     );
 };
-
-export default MangaCard;

src/components/MangaGrid.tsx

@@ -11,11 +11,11 @@ import Grid, { GridTypeMap } from '@mui/material/Grid';
 import { Box, Typography } from '@mui/material';
 import { GridItemProps, VirtuosoGrid, VirtuosoGridHandle } from 'react-virtuoso';
 import { useNavigate, useLocation } from 'react-router-dom';
-import EmptyView from '@/components/util/EmptyView';
-import LoadingPlaceholder from '@/components/util/LoadingPlaceholder';
-import MangaCard from '@/components/MangaCard';
+import { EmptyView } from '@/components/util/EmptyView';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
+import { MangaCard } from '@/components/MangaCard';
 import { GridLayout } from '@/components/context/LibraryOptionsContext';
-import useLocalStorage from '@/util/useLocalStorage';
+import { useLocalStorage } from '@/util/useLocalStorage';
 import { TPartialManga } from '@/typings.ts';
 
 const GridContainer = React.forwardRef<HTMLDivElement, GridTypeMap['props']>(({ children, ...props }, ref) => (
@@ -162,7 +162,7 @@ export interface IMangaGridProps {
     inLibraryIndicator?: boolean;
 }
 
-const MangaGrid: React.FC<IMangaGridProps> = (props) => {
+export const MangaGrid: React.FC<IMangaGridProps> = (props) => {
     const {
         mangas,
         isLoading,
@@ -256,5 +256,3 @@ MangaGrid.defaultProps = {
     message: '',
     messageExtra: undefined,
 };
-
-export default MangaGrid;

src/components/SourceCard.tsx

@@ -16,7 +16,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { ISource } from '@/typings';
-import requestManager from '@/lib/requests/RequestManager.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { translateExtensionLanguage } from '@/screens/util/Extensions';
 import { SourceContentType } from '@/screens/SourceMangas';
 
@@ -42,7 +42,7 @@ interface IProps {
     source: ISource;
 }
 
-const SourceCard: React.FC<IProps> = (props: IProps) => {
+export const SourceCard: React.FC<IProps> = (props: IProps) => {
     const { t } = useTranslation();
 
     const {
@@ -137,5 +137,3 @@ const SourceCard: React.FC<IProps> = (props: IProps) => {
         </Card>
     );
 };
-
-export default SourceCard;

src/components/atoms/CheckboxInput.tsx

@@ -13,8 +13,6 @@ interface IProps extends CheckboxProps {
     label?: string;
 }
 
-const CheckboxInput: React.FC<IProps> = ({ label, sx, ...rest }) => (
+export const CheckboxInput: React.FC<IProps> = ({ label, sx, ...rest }) => (
     <FormControlLabel control={<Checkbox {...rest} />} label={label} sx={sx} />
 );
-
-export default CheckboxInput;

src/components/atoms/LoadingIconButton.tsx

@@ -1,37 +0,0 @@
-/*
- * 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 { CircularProgress, IconButton, IconButtonProps } from '@mui/material';
-import React, { useState } from 'react';
-
-interface IProps extends Omit<IconButtonProps, 'onClick'> {
-    loading?: boolean;
-    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => Promise<any>;
-}
-
-const LoadingIconButton = ({ onClick, children, loading: iLoading, ...rest }: IProps) => {
-    const [sLoading, setLoading] = useState(false);
-    const loading = sLoading || iLoading;
-
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-        setLoading(true);
-        onClick(e).finally(() => setLoading(false));
-    };
-
-    return (
-        <IconButton disabled={loading} {...rest} onClick={handleClick}>
-            {loading ? <CircularProgress size={24} /> : children}
-        </IconButton>
-    );
-};
-
-LoadingIconButton.defaultProps = {
-    loading: false,
-};
-
-export default LoadingIconButton;

src/components/atoms/RadioInput.tsx

@@ -13,8 +13,6 @@ export interface RadioInputProps extends RadioProps {
     label?: string;
 }
 
-const RadioInput: React.FC<RadioInputProps> = ({ label, sx, ...rest }) => (
+export const RadioInput: React.FC<RadioInputProps> = ({ label, sx, ...rest }) => (
     <FormControlLabel control={<Radio {...rest} />} label={label} sx={sx} />
 );
-
-export default RadioInput;

src/components/atoms/SortRadioInput.tsx

@@ -9,17 +9,15 @@
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
 import { memo } from 'react';
-import RadioInput, { RadioInputProps } from '@/components/atoms/RadioInput';
+import { RadioInput, RadioInputProps } from '@/components/atoms/RadioInput';
 
 interface IProps extends RadioInputProps {
     sortDescending?: boolean | null | undefined;
 }
 
-const SortRadioInput = memo(({ sortDescending, ...rest }: IProps) => (
+export const SortRadioInput = memo(({ sortDescending, ...rest }: IProps) => (
     <RadioInput
         checkedIcon={sortDescending ? <ArrowDownward color="primary" /> : <ArrowUpward color="primary" />}
         {...rest}
     />
 ));
-
-export default SortRadioInput;

src/components/atoms/ThreeStateCheckbox.tsx

@@ -28,7 +28,7 @@ export interface ThreeStateCheckboxProps extends Omit<CheckboxProps, 'checked' |
  * When checked is false, checkbox contains cross
  * When checked is null or undefined, checkbox is empty
  */
-const ThreeStateCheckbox: React.FC<ThreeStateCheckboxProps> = ({ checked, onChange, ...rest }) => {
+export const ThreeStateCheckbox: React.FC<ThreeStateCheckboxProps> = ({ checked, onChange, ...rest }) => {
     const handleChange = useCallback(() => {
         if (onChange) {
             const newState = nextState(checked);
@@ -46,4 +46,3 @@ const ThreeStateCheckbox: React.FC<ThreeStateCheckboxProps> = ({ checked, onChan
         />
     );
 };
-export default ThreeStateCheckbox;

src/components/atoms/ThreeStateCheckboxInput.tsx

@@ -8,14 +8,12 @@
 
 import { FormControlLabel } from '@mui/material';
 import React from 'react';
-import ThreeStateCheckbox, { ThreeStateCheckboxProps } from '@/components/atoms/ThreeStateCheckbox';
+import { ThreeStateCheckbox, ThreeStateCheckboxProps } from '@/components/atoms/ThreeStateCheckbox';
 
 interface IProps extends ThreeStateCheckboxProps {
     label?: string;
 }
 
-const ThreeStateCheckboxInput: React.FC<IProps> = ({ label, sx, ...rest }) => (
+export const ThreeStateCheckboxInput: React.FC<IProps> = ({ label, sx, ...rest }) => (
     <FormControlLabel control={<ThreeStateCheckbox {...rest} />} label={label} sx={sx} />
 );
-
-export default ThreeStateCheckboxInput;

src/components/context/AppContext.tsx

@@ -11,17 +11,17 @@ import React, { useMemo } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
-import createTheme from '@/theme';
-import useLocalStorage from '@/util/useLocalStorage';
-import DarkTheme from '@/components/context/DarkTheme';
-import NavBarContextProvider from '@/components/navbar/NavBarContextProvider';
-import LibraryOptionsContextProvider from '@/components/library/LibraryOptionsProvider';
+import { createTheme } from '@/theme';
+import { useLocalStorage } from '@/util/useLocalStorage';
+import { DarkTheme } from '@/components/context/DarkTheme';
+import { NavBarContextProvider } from '@/components/navbar/NavBarContextProvider';
+import { LibraryOptionsContextProvider } from '@/components/library/LibraryOptionsProvider';
 
 interface Props {
     children: React.ReactNode;
 }
 
-const AppContext: React.FC<Props> = ({ children }) => {
+export const AppContext: React.FC<Props> = ({ children }) => {
     const [darkTheme, setDarkTheme] = useLocalStorage<boolean>('darkTheme', true);
 
     const darkThemeContext = useMemo(
@@ -50,5 +50,3 @@ const AppContext: React.FC<Props> = ({ children }) => {
         </Router>
     );
 };
-
-export default AppContext;

src/components/context/DarkTheme.tsx

@@ -13,9 +13,7 @@ type ContextType = {
     setDarkTheme: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const DarkTheme = React.createContext<ContextType>({
+export const DarkTheme = React.createContext<ContextType>({
     darkTheme: true,
     setDarkTheme: (): void => {},
 });
-
-export default DarkTheme;

src/components/context/LibraryOptionsContext.tsx

@@ -34,13 +34,11 @@ export const DefaultLibraryOptions: LibraryOptions = {
     showTabSize: false,
 };
 
-const LibraryOptionsContext = React.createContext<ContextType>({
+export const LibraryOptionsContext = React.createContext<ContextType>({
     options: DefaultLibraryOptions,
     setOptions: () => {},
 });
 
-export default LibraryOptionsContext;
-
 export function useLibraryOptionsContext() {
     return useContext(LibraryOptionsContext);
 }

src/components/context/NavbarContext.tsx

@@ -27,7 +27,7 @@ type ContextType = {
     setOverride: React.Dispatch<React.SetStateAction<INavbarOverride>>;
 };
 
-const NavBarContext = React.createContext<ContextType>({
+export const NavBarContext = React.createContext<ContextType>({
     defaultBackTo: undefined,
     setDefaultBackTo: (): void => {},
     title: 'Tachidesk',
@@ -38,8 +38,6 @@ const NavBarContext = React.createContext<ContextType>({
     setOverride: (): void => {},
 });
 
-export default NavBarContext;
-
 export const useNavBarContext = () => useContext(NavBarContext);
 
 export const useSetDefaultBackTo = (value: string) => {

src/components/globalUpdate/CheckboxContainer.ts

@@ -8,7 +8,6 @@
 
 import { styled } from '@mui/material';
 
-// eslint-disable-next-line import/prefer-default-export
 export const CheckboxContainer = styled('div')({
     display: 'flex',
     flexDirection: 'column',

src/components/globalUpdate/GlobalUpdateSettings.tsx

@@ -12,7 +12,6 @@ import { useTranslation } from 'react-i18next';
 import { GlobalUpdateSettingsCategories } from '@/components/globalUpdate/GlobalUpdateSettingsCategories.tsx';
 import { GlobalUpdateSettingsEntries } from '@/components/globalUpdate/GlobalUpdateSettingsEntries.tsx';
 
-// eslint-disable-next-line import/prefer-default-export
 export const GlobalUpdateSettings = () => {
     const { t } = useTranslation();
 

src/components/globalUpdate/GlobalUpdateSettingsCategories.tsx

@@ -17,11 +17,11 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import { t as translate } from 'i18next';
-import ThreeStateCheckboxInput from '@/components/atoms/ThreeStateCheckboxInput.tsx';
-import makeToast from '@/components/util/Toast.tsx';
+import { ThreeStateCheckboxInput } from '@/components/atoms/ThreeStateCheckboxInput.tsx';
+import { makeToast } from '@/components/util/Toast.tsx';
 import { IncludeInUpdate } from '@/lib/graphql/generated/graphql.ts';
 import { TCategory } from '@/typings.ts';
-import requestManager from '@/lib/requests/RequestManager.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { CheckboxContainer } from '@/components/globalUpdate/CheckboxContainer.ts';
 
 const booleanToIncludeInStatus = (status: boolean | null | undefined): IncludeInUpdate => {
@@ -78,7 +78,6 @@ const getCategoryUpdateInfo = (
     return categories.map((category) => category.name).join(', ');
 };
 
-// eslint-disable-next-line import/prefer-default-export
 export const GlobalUpdateSettingsCategories = () => {
     const { t } = useTranslation();
 

src/components/globalUpdate/GlobalUpdateSettingsEntries.tsx

@@ -14,10 +14,10 @@ import ListItemText from '@mui/material/ListItemText';
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
 import { GetServerSettingsQuery } from '@/lib/graphql/generated/graphql.ts';
 import { TranslationKey } from '@/typings.ts';
-import requestManager from '@/lib/requests/RequestManager.ts';
-import makeToast from '@/components/util/Toast.tsx';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { makeToast } from '@/components/util/Toast.tsx';
 import { CheckboxContainer } from '@/components/globalUpdate/CheckboxContainer';
-import CheckboxInput from '@/components/atoms/CheckboxInput';
+import { CheckboxInput } from '@/components/atoms/CheckboxInput';
 
 type GlobalUpdateSkipEntriesSettings = Pick<
     GetServerSettingsQuery['settings'],
@@ -69,7 +69,6 @@ const extractSkipEntriesSettings = (
     excludeUnreadChapters: serverSettings.excludeUnreadChapters,
 });
 
-// eslint-disable-next-line import/prefer-default-export
 export const GlobalUpdateSettingsEntries = () => {
     const { t } = useTranslation();
     const { data, loading, error: requestError } = requestManager.useGetServerSettings();

src/components/library/LibraryMangaGrid.tsx

@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next';
 import { LibrarySortMode, NullAndUndefined, TManga } from '@/typings';
 import { useSearchSettings } from '@/util/searchSettings';
 import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
-import MangaGrid from '@/components/MangaGrid';
+import { MangaGrid } from '@/components/MangaGrid';
 
 const unreadFilter = (unread: NullAndUndefined<boolean>, { unreadCount }: TManga): boolean => {
     switch (unread) {
@@ -109,7 +109,7 @@ interface LibraryMangaGridProps {
     message?: string;
 }
 
-const LibraryMangaGrid: React.FC<LibraryMangaGridProps> = ({ mangas, isLoading, message }) => {
+export const LibraryMangaGrid: React.FC<LibraryMangaGridProps> = ({ mangas, isLoading, message }) => {
     const { t } = useTranslation();
 
     const [query] = useQueryParam('query', StringParam);
@@ -144,5 +144,3 @@ const LibraryMangaGrid: React.FC<LibraryMangaGridProps> = ({ mangas, isLoading,
         />
     );
 };
-
-export default LibraryMangaGrid;

src/components/library/LibraryOptionsPanel.tsx

@@ -10,12 +10,12 @@ import { FormLabel, RadioGroup } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { LibraryOptions, LibrarySortMode, TranslationKey } from '@/typings';
-import CheckboxInput from '@/components/atoms/CheckboxInput';
-import RadioInput from '@/components/atoms/RadioInput';
-import SortRadioInput from '@/components/atoms/SortRadioInput';
-import ThreeStateCheckboxInput from '@/components/atoms/ThreeStateCheckboxInput';
+import { CheckboxInput } from '@/components/atoms/CheckboxInput';
+import { RadioInput } from '@/components/atoms/RadioInput';
+import { SortRadioInput } from '@/components/atoms/SortRadioInput';
+import { ThreeStateCheckboxInput } from '@/components/atoms/ThreeStateCheckboxInput';
 import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
-import OptionsTabs from '@/components/molecules/OptionsTabs';
+import { OptionsTabs } from '@/components/molecules/OptionsTabs';
 
 const TITLES: { [key in 'filter' | 'sort' | 'display']: TranslationKey } = {
     filter: 'global.label.filter',
@@ -35,7 +35,7 @@ interface IProps {
     onClose: () => void;
 }
 
-const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
+export const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
     const { t } = useTranslation();
     const { options, setOptions } = useLibraryOptionsContext();
 
@@ -133,5 +133,3 @@ const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
         />
     );
 };
-
-export default LibraryOptionsPanel;

src/components/library/LibraryOptionsProvider.tsx

@@ -8,19 +8,17 @@
 
 import React, { useMemo } from 'react';
 import { LibraryOptions } from '@/typings';
-import useLocalStorage from '@/util/useLocalStorage';
-import LibraryOptionsContext, { DefaultLibraryOptions } from '@/components/context/LibraryOptionsContext';
+import { useLocalStorage } from '@/util/useLocalStorage';
+import { LibraryOptionsContext, DefaultLibraryOptions } from '@/components/context/LibraryOptionsContext';
 
 interface IProps {
     children: React.ReactNode;
 }
 
-const LibraryOptionsContextProvider: React.FC<IProps> = ({ children }) => {
+export const LibraryOptionsContextProvider: React.FC<IProps> = ({ children }) => {
     const [options, setOptions] = useLocalStorage<LibraryOptions>('libraryOptions', DefaultLibraryOptions);
 
     const value = useMemo(() => ({ options, setOptions }), [options, setOptions]);
 
     return <LibraryOptionsContext.Provider value={value}>{children}</LibraryOptionsContext.Provider>;
 };
-
-export default LibraryOptionsContextProvider;

src/components/library/LibraryToolbarMenu.tsx

@@ -10,9 +10,9 @@ import FilterList from '@mui/icons-material/FilterList';
 import { IconButton } from '@mui/material';
 import React, { useState } from 'react';
 import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
-import LibraryOptionsPanel from '@/components/library/LibraryOptionsPanel';
+import { LibraryOptionsPanel } from '@/components/library/LibraryOptionsPanel';
 
-const LibraryToolbarMenu: React.FC = () => {
+export const LibraryToolbarMenu: React.FC = () => {
     const [open, setOpen] = useState(false);
     const { options } = useLibraryOptionsContext();
     const active = options.downloaded != null || options.unread != null;
@@ -26,5 +26,3 @@ const LibraryToolbarMenu: React.FC = () => {
         </>
     );
 };
-
-export default LibraryToolbarMenu;

src/components/library/UpdateChecker.tsx

@@ -13,8 +13,8 @@ import CircularProgress from '@mui/material/CircularProgress';
 import { Box } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
-import requestManager from '@/lib/requests/RequestManager.ts';
-import makeToast from '@/components/util/Toast';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { makeToast } from '@/components/util/Toast';
 import { UpdaterSubscription } from '@/lib/graphql/generated/graphql.ts';
 
 interface IProgressProps {
@@ -45,7 +45,7 @@ const calcProgress = (status: UpdaterSubscription['updateStatusChanged'] | undef
     return Number.isNaN(progress) ? 0 : progress;
 };
 
-function UpdateChecker({ handleFinishedUpdate }: { handleFinishedUpdate: () => void }) {
+export function UpdateChecker({ handleFinishedUpdate }: { handleFinishedUpdate: () => void }) {
     const { t } = useTranslation();
 
     const { data: updaterData } = requestManager.useUpdaterSubscription();
@@ -81,5 +81,3 @@ function UpdateChecker({ handleFinishedUpdate }: { handleFinishedUpdate: () => v
         </IconButton>
     );
 }
-
-export default UpdateChecker;

src/components/manga/ChapterCard.tsx

@@ -27,9 +27,9 @@ import Typography from '@mui/material/Typography';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import requestManager from '@/lib/requests/RequestManager.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { getUploadDateString } from '@/util/date';
-import DownloadStateIndicator from '@/components/molecules/DownloadStateIndicator';
+import { DownloadStateIndicator } from '@/components/molecules/DownloadStateIndicator';
 import { DownloadType, UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
 import { TChapter } from '@/typings.ts';
 
@@ -42,7 +42,7 @@ interface IProps {
     selected: boolean | null;
 }
 
-const ChapterCard: React.FC<IProps> = (props: IProps) => {
+export const ChapterCard: React.FC<IProps> = (props: IProps) => {
     const { t } = useTranslation();
     const theme = useTheme();
 
@@ -212,5 +212,3 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
         </li>
     );
 };
-
-export default ChapterCard;

src/components/manga/ChapterList.tsx

@@ -12,14 +12,14 @@ import React, { ComponentProps, useEffect, useMemo, useRef, useState } from 'rea
 import { Virtuoso } from 'react-virtuoso';
 import { useTranslation } from 'react-i18next';
 import { TChapter, TManga, TranslationKey } from '@/typings';
-import requestManager from '@/lib/requests/RequestManager.ts';
-import ChapterCard from '@/components/manga/ChapterCard';
-import ResumeFab from '@/components/manga/ResumeFAB';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { ChapterCard } from '@/components/manga/ChapterCard';
+import { ResumeFab } from '@/components/manga/ResumeFAB';
 import { filterAndSortChapters, useChapterOptions } from '@/components/manga/util';
-import EmptyView from '@/components/util/EmptyView';
-import makeToast from '@/components/util/Toast';
-import ChaptersToolbarMenu from '@/components/manga/ChaptersToolbarMenu';
-import SelectionFAB from '@/components/manga/SelectionFAB';
+import { EmptyView } from '@/components/util/EmptyView';
+import { makeToast } from '@/components/util/Toast';
+import { ChaptersToolbarMenu } from '@/components/manga/ChaptersToolbarMenu';
+import { SelectionFAB } from '@/components/manga/SelectionFAB';
 import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab';
 import { DownloadType, UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
 
@@ -78,7 +78,7 @@ interface IProps {
     isRefreshing: boolean;
 }
 
-const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
+export const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
     const { t } = useTranslation();
 
     const [selection, setSelection] = useState<number[] | null>(null);
@@ -299,5 +299,3 @@ const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
         </>
     );
 };
-
-export default ChapterList;

src/components/manga/ChapterOptions.tsx

@@ -10,10 +10,10 @@ import { RadioGroup } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChapterListOptions, ChapterOptionsReducerAction, TranslationKey } from '@/typings';
-import RadioInput from '@/components/atoms/RadioInput';
-import SortRadioInput from '@/components/atoms/SortRadioInput';
-import ThreeStateCheckboxInput from '@/components/atoms/ThreeStateCheckboxInput';
-import OptionsTabs from '@/components/molecules/OptionsTabs';
+import { RadioInput } from '@/components/atoms/RadioInput';
+import { SortRadioInput } from '@/components/atoms/SortRadioInput';
+import { ThreeStateCheckboxInput } from '@/components/atoms/ThreeStateCheckboxInput';
+import { OptionsTabs } from '@/components/molecules/OptionsTabs';
 import { SORT_OPTIONS } from '@/components/manga/util';
 
 interface IProps {
@@ -29,7 +29,7 @@ const TITLES: { [key in 'filter' | 'sort' | 'display']: TranslationKey } = {
     display: 'global.label.display',
 };
 
-const ChapterOptions: React.FC<IProps> = ({ open, onClose, options, optionsDispatch }) => {
+export const ChapterOptions: React.FC<IProps> = ({ open, onClose, options, optionsDispatch }) => {
     const { t } = useTranslation();
 
     return (
@@ -110,5 +110,3 @@ const ChapterOptions: React.FC<IProps> = ({ open, onClose, options, optionsDispa
         />
     );
 };
-
-export default ChapterOptions;

src/components/manga/ChaptersToolbarMenu.tsx

@@ -10,7 +10,7 @@ import FilterList from '@mui/icons-material/FilterList';
 import { IconButton } from '@mui/material';
 import * as React from 'react';
 import { ChapterListOptions, ChapterOptionsReducerAction } from '@/typings';
-import ChapterOptions from '@/components/manga/ChapterOptions';
+import { ChapterOptions } from '@/components/manga/ChapterOptions';
 import { isFilterActive } from '@/components/manga/util';
 
 interface IProps {
@@ -18,7 +18,7 @@ interface IProps {
     optionsDispatch: React.Dispatch<ChapterOptionsReducerAction>;
 }
 
-const ChaptersToolbarMenu = ({ options, optionsDispatch }: IProps) => {
+export const ChaptersToolbarMenu = ({ options, optionsDispatch }: IProps) => {
     const [open, setOpen] = React.useState(false);
     const isFiltered = isFilterActive(options);
 
@@ -36,5 +36,3 @@ const ChaptersToolbarMenu = ({ options, optionsDispatch }: IProps) => {
         </>
     );
 };
-
-export default ChaptersToolbarMenu;

src/components/manga/MangaDetails.tsx

@@ -15,8 +15,8 @@ import { useTranslation } from 'react-i18next';
 import { t as translate } from 'i18next';
 import Button from '@mui/material/Button';
 import { ISource, TManga } from '@/typings';
-import requestManager from '@/lib/requests/RequestManager.ts';
-import makeToast from '@/components/util/Toast';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { makeToast } from '@/components/util/Toast';
 
 const DetailsWrapper = styled('div')(({ theme }) => ({
     width: '100%',
@@ -165,7 +165,7 @@ function getValueOrUnknown(val?: string | null) {
     return val || 'UNKNOWN';
 }
 
-const MangaDetails: React.FC<IProps> = ({ manga }) => {
+export const MangaDetails: React.FC<IProps> = ({ manga }) => {
     const { t } = useTranslation();
     const { data: categoriesData, loading: areCategoriesLoading } = requestManager.useGetCategories();
     const categories = categoriesData?.categories.nodes ?? [];
@@ -250,5 +250,3 @@ const MangaDetails: React.FC<IProps> = ({ manga }) => {
         </DetailsWrapper>
     );
 };
-
-export default MangaDetails;

src/components/manga/MangaToolbarMenu.tsx

@@ -21,7 +21,7 @@ import {
 } from '@mui/material';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import CategorySelect from '@/components/navbar/action/CategorySelect';
+import { CategorySelect } from '@/components/navbar/action/CategorySelect';
 import { TManga } from '@/typings.ts';
 
 interface IProps {
@@ -30,7 +30,7 @@ interface IProps {
     refreshing: boolean;
 }
 
-const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
+export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
     const { t } = useTranslation();
     const theme = useTheme();
     const isLargeScreen = useMediaQuery(theme.breakpoints.up('sm'));
@@ -123,5 +123,3 @@ const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
         </>
     );
 };
-
-export default MangaToolbarMenu;

src/components/manga/ResumeFAB.tsx

@@ -9,14 +9,14 @@
 import { Link } from 'react-router-dom';
 import { PlayArrow } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
-import StyledFab from '@/components/util/StyledFab';
+import { StyledFab } from '@/components/util/StyledFab';
 
 interface ResumeFABProps {
     chapterIndex: number;
     mangaId: number;
 }
 
-export default function ResumeFab(props: ResumeFABProps) {
+export function ResumeFab(props: ResumeFABProps) {
     const { t } = useTranslation();
 
     const { chapterIndex, mangaId } = props;

src/components/manga/SelectionFAB.tsx

@@ -11,7 +11,7 @@ import { Fab, Menu, Box } from '@mui/material';
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { IChapterWithMeta } from '@/components/manga/ChapterList';
-import SelectionFABActionItem from '@/components/manga/SelectionFABActionItem';
+import { SelectionFABActionItem } from '@/components/manga/SelectionFABActionItem';
 import { DEFAULT_FAB_STYLE } from '@/components/util/StyledFab';
 
 export type SelectionAction = 'download' | 'delete' | 'bookmark' | 'unbookmark' | 'mark_as_read' | 'mark_as_unread';
@@ -21,7 +21,7 @@ interface SelectionFABProps {
     onAction: (action: SelectionAction, chapters: IChapterWithMeta[]) => void;
 }
 
-const SelectionFAB: React.FC<SelectionFABProps> = (props) => {
+export const SelectionFAB: React.FC<SelectionFABProps> = (props) => {
     const { t } = useTranslation();
 
     const { selectedChapters, onAction } = props;
@@ -102,5 +102,3 @@ const SelectionFAB: React.FC<SelectionFABProps> = (props) => {
         </Box>
     );
 };
-
-export default SelectionFAB;

src/components/manga/SelectionFABActionItem.tsx

@@ -33,7 +33,7 @@ const ICONS = {
     mark_as_unread: RemoveDone,
 };
 
-const SelectionFABActionItem: React.FC<IProps> = ({ action, matchingChapters, onClick, title }) => {
+export const SelectionFABActionItem: React.FC<IProps> = ({ action, matchingChapters, onClick, title }) => {
     const count = matchingChapters.length;
     const Icon = ICONS[action];
     return (
@@ -48,5 +48,3 @@ const SelectionFABActionItem: React.FC<IProps> = ({ action, matchingChapters, on
         </MenuItem>
     );
 };
-
-export default SelectionFABActionItem;

src/components/manga/hooks.ts

@@ -7,7 +7,7 @@
  */
 
 import { useCallback, useEffect, useState } from 'react';
-import requestManager from '@/lib/requests/RequestManager.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
 
 export const useRefreshManga = (mangaId: string) => {
     const [fetchingOnline, setFetchingOnline] = useState(false);

src/components/molecules/DownloadStateIndicator.tsx

@@ -24,7 +24,7 @@ const DOWNLOAD_STATE_TO_TRANSLATION_KEY_MAP: { [state in DownloadState]: Transla
     QUEUED: 'download.state.label.queued',
 } as const;
 
-const DownloadStateIndicator: React.FC<DownloadStateIndicatorProps> = ({ download }) => {
+export const DownloadStateIndicator: React.FC<DownloadStateIndicatorProps> = ({ download }) => {
     const { t } = useTranslation();
 
     return (
@@ -59,5 +59,3 @@ const DownloadStateIndicator: React.FC<DownloadStateIndicatorProps> = ({ downloa
         </Box>
     );
 };
-
-export default DownloadStateIndicator;

src/components/molecules/OptionsPanel.tsx

@@ -16,7 +16,7 @@ interface IProps {
     minHeight?: number;
 }
 
-const OptionsPanel: React.FC<IProps> = ({ open, onClose, children, minHeight }) => (
+export const OptionsPanel: React.FC<IProps> = ({ open, onClose, children, minHeight }) => (
     <Drawer
         anchor="bottom"
         open={open}
@@ -37,5 +37,3 @@ const OptionsPanel: React.FC<IProps> = ({ open, onClose, children, minHeight })
 OptionsPanel.defaultProps = {
     minHeight: undefined,
 };
-
-export default OptionsPanel;

src/components/molecules/OptionsTabs.tsx

@@ -8,8 +8,8 @@
 
 import { Stack, Tab, Tabs } from '@mui/material';
 import React, { useState } from 'react';
-import TabPanel from '@/components/util/TabPanel';
-import OptionsPanel from '@/components/molecules/OptionsPanel';
+import { TabPanel } from '@/components/util/TabPanel';
+import { OptionsPanel } from '@/components/molecules/OptionsPanel';
 
 interface IProps<T = string> {
     open: boolean;
@@ -20,7 +20,7 @@ interface IProps<T = string> {
     minHeight?: number;
 }
 
-const OptionsTabs = <T extends string = string>({
+export const OptionsTabs = <T extends string = string>({
     open,
     onClose,
     tabs,
@@ -55,5 +55,3 @@ const OptionsTabs = <T extends string = string>({
 OptionsTabs.defaultProps = {
     minHeight: undefined,
 };
-
-export default OptionsTabs;

src/components/navbar/DefaultNavBar.tsx

@@ -27,10 +27,10 @@ import ArrowBack from '@mui/icons-material/ArrowBack';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { createPortal } from 'react-dom';
 import { NavbarItem } from '@/typings';
-import NavBarContext from '@/components/context/NavbarContext';
-import ExtensionOutlinedIcon from '@/components/util/CustomExtensionOutlinedIcon';
-import DesktopSideBar from '@/components/navbar/navigation/DesktopSideBar';
-import MobileBottomBar from '@/components/navbar/navigation/MobileBottomBar';
+import { NavBarContext } from '@/components/context/NavbarContext';
+import { ExtensionOutlinedIcon } from '@/components/util/CustomExtensionOutlinedIcon';
+import { DesktopSideBar } from '@/components/navbar/navigation/DesktopSideBar';
+import { MobileBottomBar } from '@/components/navbar/navigation/MobileBottomBar';
 import { useHistory } from '@/util/useHistory';
 
 const navbarItems: Array<NavbarItem> = [
@@ -85,7 +85,7 @@ const navbarItems: Array<NavbarItem> = [
     },
 ];
 
-export default function DefaultNavBar() {
+export function DefaultNavBar() {
     const { title, action, override, defaultBackTo: backToUrl } = useContext(NavBarContext);
 
     const theme = useTheme();

src/components/navbar/NavBarContextProvider.tsx

@@ -8,13 +8,13 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 import { INavbarOverride } from '@/typings';
-import NavBarContext from '@/components/context/NavbarContext';
+import { NavBarContext } from '@/components/context/NavbarContext';
 
 interface IProps {
     children: React.ReactNode;
 }
 
-export default function NavBarProvider({ children }: IProps) {
+export function NavBarContextProvider({ children }: IProps) {
     const [defaultBackTo, setDefaultBackTo] = useState<string | undefined>();
     const [title, setTitle] = useState<string | React.ReactNode>('Tachidesk');
     const [action, setAction] = useState<any>(<div />);

src/components/navbar/ReaderNavBar.tsx

@@ -25,7 +25,7 @@ import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Collapse from '@mui/material/Collapse';
 import { useTranslation } from 'react-i18next';
 import { ChapterOffset, IReaderSettings, TChapter, TManga } from '@/typings';
-import ReaderSettingsOptions from '@/components/reader/ReaderSettingsOptions';
+import { ReaderSettingsOptions } from '@/components/reader/ReaderSettingsOptions';
 
 const Root = styled('div')(({ theme }) => ({
     top: 0,
@@ -122,7 +122,7 @@ interface IProps {
     retrievingNextChapter: boolean;
 }
 
-export default function ReaderNavBar(props: IProps) {
+export function ReaderNavBar(props: IProps) {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const location = useLocation<{

src/components/navbar/action/CategorySelect.tsx

@@ -16,7 +16,7 @@ import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup';
 import { useTranslation } from 'react-i18next';
-import requestManager from '@/lib/requests/RequestManager.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
 
 interface IProps {
     open: boolean;
@@ -24,7 +24,7 @@ interface IProps {
     mangaId: number;
 }
 
-export default function CategorySelect(props: IProps) {
+export function CategorySelect(props: IProps) {
     const { t } = useTranslation();
 
     const { open, setOpen, mangaId } = props;

src/components/navbar/action/LangSelect.tsx

@@ -18,7 +18,7 @@ import FilterListIcon from '@mui/icons-material/FilterList';
 import { List, ListItemSecondaryAction, ListItemText } from '@mui/material';
 import ListItem from '@mui/material/ListItem';
 import { useTranslation } from 'react-i18next';
-import cloneObject from '@/util/cloneObject';
+import { cloneObject } from '@/util/cloneObject';
 import { translateExtensionLanguage } from '@/screens/util/Extensions';
 
 function removeAll(firstList: any[], secondList: any[]) {
@@ -39,7 +39,7 @@ interface IProps {
     forcedLangs?: string[];
 }
 
-export default function LangSelect(props: IProps) {
+export function LangSelect(props: IProps) {
     const { t } = useTranslation();
 
     const { shownLangs, setShownLangs, allLangs, forcedLangs } = props;

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -28,7 +28,7 @@ interface IProps {
     navBarItems: Array<NavbarItem>;
 }
 
-export default function DesktopSideBar({ navBarItems }: IProps) {
+export function DesktopSideBar({ navBarItems }: IProps) {
     const { t } = useTranslation();
     const location = useLocation();
     const theme = useTheme();

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -37,7 +37,7 @@ interface IProps {
     navBarItems: Array<NavbarItem>;
 }
 
-export default function MobileBottomBar({ navBarItems }: IProps) {
+export function MobileBottomBar({ navBarItems }: IProps) {
     const { t } = useTranslation();
     const location = useLocation();
     const theme = useTheme();

src/components/reader/DoublePage.tsx

@@ -26,7 +26,7 @@ interface IProps {
     settings: IReaderSettings;
 }
 
-const DoublePage = forwardRef((props: IProps, ref: any) => {
+export const DoublePage = forwardRef((props: IProps, ref: any) => {
     const { image1src, image2src, index, settings } = props;
 
     return (
@@ -47,5 +47,3 @@ const DoublePage = forwardRef((props: IProps, ref: any) => {
         </Box>
     );
 });
-
-export default DoublePage;

src/components/reader/Page.tsx

@@ -9,7 +9,7 @@
 import { useState, useEffect, forwardRef, useRef } from 'react';
 import Box from '@mui/material/Box';
 import { IReaderSettings } from '@/typings';
-import SpinnerImage from '@/components/util/SpinnerImage';
+import { SpinnerImage } from '@/components/util/SpinnerImage';
 
 function imageStyle(settings: IReaderSettings): any {
     const [dimensions, setDimensions] = useState({
@@ -65,7 +65,7 @@ interface IProps {
     settings: IReaderSettings;
 }
 
-const Page = forwardRef((props: IProps, ref: any) => {
+export const Page = forwardRef((props: IProps, ref: any) => {
     const { src, index, onImageLoad, settings } = props;
 
     const imgRef = useRef<HTMLImageElement>(null);
@@ -92,5 +92,3 @@ const Page = forwardRef((props: IProps, ref: any) => {
         </Box>
     );
 });
-
-export default Page;

src/components/reader/PageNumber.tsx

@@ -15,7 +15,7 @@ interface IProps {
     pageCount: number;
 }
 
-export default function PageNumber(props: IProps) {
+export function PageNumber(props: IProps) {
     const { settings, curPage, pageCount } = props;
 
     return (

src/components/reader/ReaderSettingsOptions.tsx

@@ -17,7 +17,7 @@ interface IProps extends IReaderSettings {
     setSettingValue: (key: keyof IReaderSettings, value: string | boolean) => void;
 }
 
-export default function ReaderSettingsOptions({
+export function ReaderSettingsOptions({
     staticNav,
     loadNextOnEnding,
     readerType,

src/components/reader/pager/DoublePagedPager.tsx

@@ -10,8 +10,8 @@ import { useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
 import { createRoot } from 'react-dom/client';
 import { IReaderProps } from '@/typings';
-import Page from '@/components/reader/Page';
-import DoublePage from '@/components/reader/DoublePage';
+import { Page } from '@/components/reader/Page';
+import { DoublePage } from '@/components/reader/DoublePage';
 
 const isSpreadPage = (image: HTMLImageElement): boolean => {
     const aspectRatio = image.height / image.width;
@@ -29,7 +29,7 @@ const isSinglePage = (index: number, spreadPages: boolean[], offsetFirstPage: bo
     return offsetFirstPage ? numberOfNonSpreads % 2 === 0 : numberOfNonSpreads % 2 === 1;
 };
 
-export default function DoublePagedPager(props: IReaderProps) {
+export function DoublePagedPager(props: IReaderProps) {
     const { pages, settings, setCurPage, initialPage, curPage, nextChapter, prevChapter } = props;
 
     const selfRef = useRef<HTMLDivElement>(null);

src/components/reader/pager/HorizontalPager.tsx

@@ -9,7 +9,7 @@
 import { useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
 import { IReaderProps } from '@/typings';
-import Page from '@/components/reader/Page';
+import { Page } from '@/components/reader/Page';
 
 const findCurrentPageIndex = (wrapper: HTMLDivElement): number => {
     for (let i = 0; i < wrapper.children.length; i++) {
@@ -31,7 +31,7 @@ const isAtEnd = () => {
 };
 const isAtStart = () => window.scrollX <= 0;
 
-export default function HorizontalPager(props: IReaderProps) {
+export function HorizontalPager(props: IReaderProps) {
     const { pages, curPage, initialPage, settings, setCurPage, prevChapter, nextChapter } = props;
 
     const currentPageRef = useRef(initialPage);

src/components/reader/pager/PagedPager.tsx

@@ -9,9 +9,9 @@
 import { useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
 import { IReaderProps } from '@/typings';
-import Page from '@/components/reader/Page';
+import { Page } from '@/components/reader/Page';
 
-export default function PagedReader(props: IReaderProps) {
+export function PagedPager(props: IReaderProps) {
     const { pages, settings, setCurPage, initialPage, curPage, nextChapter, prevChapter } = props;
 
     const selfRef = useRef<HTMLDivElement>(null);

src/components/reader/pager/VerticalPager.tsx

@@ -9,7 +9,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
 import { IReaderProps } from '@/typings';
-import Page from '@/components/reader/Page';
+import { Page } from '@/components/reader/Page';
 
 const findCurrentPageIndex = (wrapper: HTMLDivElement): number => {
     for (let i = 0; i < wrapper.children.length; i++) {
@@ -35,7 +35,7 @@ const isAtBottom = () => {
 };
 const isAtTop = () => window.scrollY <= 0;
 
-export default function VerticalPager(props: IReaderProps) {
+export function VerticalPager(props: IReaderProps) {
     const { pages, settings, setCurPage, initialPage, nextChapter, prevChapter } = props;
 
     const currentPageRef = useRef(initialPage);

src/components/source/GridLayouts.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
 
 // TODO: clean up this to use a FormControl, and remove dependency on name o radio button
-export default function SourceGridLayout() {
+export function SourceGridLayout() {
     const { t } = useTranslation();
 
     const {

src/components/source/SourceMangaGrid.tsx

@@ -7,14 +7,14 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import MangaGrid, { IMangaGridProps } from '@/components/MangaGrid';
+import { MangaGrid, IMangaGridProps } from '@/components/MangaGrid';
 import { TPartialManga } from '@/typings.ts';
 
 function filterManga(mangas: TPartialManga[]): TPartialManga[] {
     return mangas;
 }
 
-export default function SourceMangaGrid(props: IMangaGridProps) {
+export function SourceMangaGrid(props: IMangaGridProps) {
     const { t } = useTranslation();
     const { mangas, isLoading, hasNextPage, loadMore, message, messageExtra, gridLayout } = props;
 

src/components/source/SourceOptions.tsx

@@ -11,18 +11,18 @@ import { Button, Stack, Box } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SourceFilters } from '@/typings';
-import OptionsPanel from '@/components/molecules/OptionsPanel';
-import CheckBoxFilter from '@/components/source/filters/CheckBoxFilter';
-import HeaderFilter from '@/components/source/filters/HeaderFilter';
-import SelectFilter from '@/components/source/filters/SelectFilter';
-import SortFilter from '@/components/source/filters/SortFilter';
-import TextFilter from '@/components/source/filters/TextFilter';
-import TriStateFilter from '@/components/source/filters/TriStateFilter';
+import { OptionsPanel } from '@/components/molecules/OptionsPanel';
+import { CheckBoxFilter } from '@/components/source/filters/CheckBoxFilter';
+import { HeaderFilter } from '@/components/source/filters/HeaderFilter';
+import { SelectFilter } from '@/components/source/filters/SelectFilter';
+import { SortFilter } from '@/components/source/filters/SortFilter';
+import { TextFilter } from '@/components/source/filters/TextFilter';
+import { TriStateFilter } from '@/components/source/filters/TriStateFilter';
 // this can only cycle once, so should be fine
 // eslint-disable-next-line import/no-cycle
-import GroupFilter from '@/components/source/filters/GroupFilter';
-import SeperatorFilter from '@/components/source/filters/SeparatorFilter';
-import StyledFab from '@/components/util/StyledFab';
+import { GroupFilter } from '@/components/source/filters/GroupFilter';
+import { SeparatorFilter } from '@/components/source/filters/SeparatorFilter';
+import { StyledFab } from '@/components/util/StyledFab';
 
 interface IFilters {
     sourceFilter: SourceFilters[];
@@ -88,7 +88,7 @@ export function Options({ sourceFilter, group, updateFilterValue, update }: IFil
                             />
                         );
                     case 'SeparatorFilter':
-                        return <SeperatorFilter key={`filters ${e.name}`} name={e.name} />;
+                        return <SeparatorFilter key={`filters ${e.name}`} name={e.name} />;
                     case 'SortFilter':
                         return (
                             <SortFilter
@@ -139,7 +139,7 @@ export function Options({ sourceFilter, group, updateFilterValue, update }: IFil
     );
 }
 
-export default function SourceOptions({
+export function SourceOptions({
     sourceFilter,
     updateFilterValue,
     resetFilterValue,

src/components/source/filters/CheckBoxFilter.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import CheckboxInput from '@/components/atoms/CheckboxInput';
+import { CheckboxInput } from '@/components/atoms/CheckboxInput';
 
 interface Props {
     state: boolean;
@@ -18,7 +18,7 @@ interface Props {
     update: any;
 }
 
-const CheckBoxFilter: React.FC<Props> = (props: Props) => {
+export const CheckBoxFilter: React.FC<Props> = (props: Props) => {
     const { state, name, position, group, updateFilterValue, update } = props;
     const [val, setval] = React.useState(state);
 
@@ -35,5 +35,3 @@ const CheckBoxFilter: React.FC<Props> = (props: Props) => {
     }
     return null;
 };
-
-export default CheckBoxFilter;

src/components/source/filters/GroupFilter.tsx

@@ -21,7 +21,7 @@ interface Props {
     update: any;
 }
 
-const GroupFilter: React.FC<Props> = (props: Props) => {
+export const GroupFilter: React.FC<Props> = (props: Props) => {
     const { state, name, position, updateFilterValue, update } = props;
 
     const [open, setOpen] = React.useState(false);
@@ -46,5 +46,3 @@ const GroupFilter: React.FC<Props> = (props: Props) => {
         </Box>
     );
 };
-
-export default GroupFilter;

src/components/source/filters/HeaderFilter.tsx

@@ -13,10 +13,8 @@ interface Props {
     name: string;
 }
 
-const HeaderFilter: React.FC<Props> = ({ name }) => (
+export const HeaderFilter: React.FC<Props> = ({ name }) => (
     <Typography key={name} sx={{ mt: 2 }} variant="subtitle2">
         {name}
     </Typography>
 );
-
-export default HeaderFilter;

src/components/source/filters/SelectFilter.tsx

@@ -60,7 +60,5 @@ function noSelect(
     return null;
 }
 
-const SelectFilter: React.FC<Props> = ({ values, name, state, position, updateFilterValue, update, group }) =>
+export const SelectFilter: React.FC<Props> = ({ values, name, state, position, updateFilterValue, update, group }) =>
     noSelect(values, name, state, position, updateFilterValue, update, group);
-
-export default SelectFilter;

src/components/source/filters/SeparatorFilter.tsx

@@ -13,10 +13,8 @@ interface Props {
     name: string;
 }
 
-const SeparatorFilter: React.FC<Props> = ({ name }) => (
+export const SeparatorFilter: React.FC<Props> = ({ name }) => (
     <Divider key={name} sx={{ my: 1 }} textAlign="center">
         {name}
     </Divider>
 );
-
-export default SeparatorFilter;

src/components/source/filters/SortFilter.tsx

@@ -9,7 +9,7 @@
 import { ExpandLess, ExpandMore } from '@mui/icons-material';
 import { Collapse, ListItemButton, ListItemText, Stack, Box } from '@mui/material';
 import React from 'react';
-import SortRadioInput from '@/components/atoms/SortRadioInput';
+import { SortRadioInput } from '@/components/atoms/SortRadioInput';
 import { SortSelectionInput } from '@/lib/graphql/generated/graphql.ts';
 
 interface Props {
@@ -22,7 +22,7 @@ interface Props {
     update: any;
 }
 
-const SortFilter: React.FC<Props> = (props: Props) => {
+export const SortFilter: React.FC<Props> = (props: Props) => {
     const { values, name, state, position, group, updateFilterValue, update } = props;
     const [val, setval] = React.useState(state);
 
@@ -72,5 +72,3 @@ const SortFilter: React.FC<Props> = (props: Props) => {
     }
     return null;
 };
-
-export default SortFilter;

src/components/source/filters/TextFilter.tsx

@@ -20,7 +20,7 @@ interface Props {
     update: any;
 }
 
-const TextFilter: React.FC<Props> = (props) => {
+export const TextFilter: React.FC<Props> = (props) => {
     const { state, name, position, group, updateFilterValue, update } = props;
     const [Search, setsearch] = React.useState(state || '');
     const inputText = useDebounce(Search, 500);
@@ -51,5 +51,3 @@ const TextFilter: React.FC<Props> = (props) => {
     }
     return null;
 };
-
-export default TextFilter;

src/components/source/filters/TriStateFilter.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import ThreeStateCheckboxInput from '@/components/atoms/ThreeStateCheckboxInput';
+import { ThreeStateCheckboxInput } from '@/components/atoms/ThreeStateCheckboxInput';
 import { TriState } from '@/lib/graphql/generated/graphql.ts';
 
 interface Props {
@@ -45,7 +45,7 @@ const convertNumberToTriState = (state: number): TriState => {
     }
 };
 
-const TriStateFilter: React.FC<Props> = (props) => {
+export const TriStateFilter: React.FC<Props> = (props) => {
     const { state, name, position, group, updateFilterValue, update } = props;
     const [val, setval] = React.useState(convertTriStateToNumber(state));
 
@@ -78,5 +78,3 @@ const TriStateFilter: React.FC<Props> = (props) => {
     }
     return null;
 };
-
-export default TriStateFilter;

src/components/sourceConfiguration/EditTextPreference.tsx

@@ -19,7 +19,7 @@ import { useTranslation } from 'react-i18next';
 import { ListItemButton } from '@mui/material';
 import { EditTextPreferenceProps } from '@/typings';
 
-export default function EditTextPreference(props: EditTextPreferenceProps) {
+export function EditTextPreference(props: EditTextPreferenceProps) {
     const { t } = useTranslation();
 
     const {

src/components/sourceConfiguration/ListPreference.tsx

@@ -84,7 +84,7 @@ function ListDialog(props: IListDialogProps) {
     );
 }
 
-export default function ListPreference(props: ListPreferenceProps) {
+export function ListPreference(props: ListPreferenceProps) {
     const {
         ListPreferenceTitle: title,
         summary,

src/components/sourceConfiguration/MultiSelectListPreference.tsx

@@ -19,7 +19,7 @@ import Button from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
 import { ListItemButton } from '@mui/material';
 import { MultiSelectListPreferenceProps } from '@/typings';
-import cloneObject from '@/util/cloneObject';
+import { cloneObject } from '@/util/cloneObject';
 
 interface IListDialogProps {
     selectedValues: string[];
@@ -98,7 +98,7 @@ function ListDialog(props: IListDialogProps) {
     );
 }
 
-export default function MultiSelectListPreference(props: MultiSelectListPreferenceProps) {
+export function MultiSelectListPreference(props: MultiSelectListPreferenceProps) {
     const {
         MultiSelectListPreferenceTitle: title,
         summary,

src/components/sourceConfiguration/TwoStatePreference.tsx

@@ -80,5 +80,3 @@ export function CheckBoxPreference(props: CheckBoxPreferenceProps) {
 export function SwitchPreferenceCompat(props: SwitchPreferenceCompatProps) {
     return <TwoSatePreference {...props} twoStateType="Switch" />;
 }
-
-export default { CheckBoxPreference, SwitchPreferenceCompat };

src/components/util/AppbarSearch.tsx

@@ -20,7 +20,7 @@ const defaultProps = {
     autoOpen: false,
 };
 
-const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
+export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
     const { autoOpen } = props;
     const [query, setQuery] = useQueryParam('query', StringParam);
     const [searchOpen, setSearchOpen] = useState(!!query);
@@ -90,5 +90,3 @@ const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
 };
 
 AppbarSearch.defaultProps = defaultProps;
-
-export default AppbarSearch;

src/components/util/CustomExtensionOutlinedIcon.tsx

@@ -11,6 +11,4 @@ import createSvgIcon from '@mui/material/utils/createSvgIcon';
 const d =
     'M 11 1 C 9.3550302 1 8 2.3550302 8 4 L 4 4 C 2.9069372 4 2 4.9069372 2 6 L 2 12 L 4 12 C 4.5650302 12 5 12.43497 5 13 C 5 13.56503 4.5650302 14 4 14 L 2 14 L 2 20 C 2 21.093063 2.9069372 22 4 22 L 10 22 L 10 20 C 10 19.43497 10.43497 19 11 19 C 11.56503 19 12 19.43497 12 20 L 12 22 L 18 22 C 19.093063 22 20 21.093063 20 20 L 20 16 C 21.64497 16 23 14.64497 23 13 C 23 11.35503 21.64497 10 20 10 L 20 6 C 20 4.9069372 19.093063 4 18 4 L 14 4 C 14 2.3550302 12.64497 1 11 1 z M 11 3 C 11.56503 3 12 3.4349698 12 4 L 12 6 L 18 6 L 18 12 L 20 12 C 20.56503 12 21 12.43497 21 13 C 21 13.56503 20.56503 14 20 14 L 18 14 L 18 20 L 14 20 C 14 18.35503 12.64497 17 11 17 C 9.3550302 17 8 18.35503 8 20 L 4 20 L 4 16 C 5.6449698 16 7 14.64497 7 13 C 7 11.35503 5.6449698 10 4 10 L 4 6 L 10 6 L 10 4 C 10 3.4349698 10.43497 3 11 3 z';
 
-const icon = createSvgIcon(<path d={d} />, 'CustomExtensionOutlined');
-
-export default icon;
+export const ExtensionOutlinedIcon = createSvgIcon(<path d={d} />, 'CustomExtensionOutlined');

src/components/util/EmptyView.tsx

@@ -25,7 +25,7 @@ interface IProps {
     messageExtra?: JSX.Element | string;
 }
 
-export default function EmptyView({ message, messageExtra }: IProps) {
+export function EmptyView({ message, messageExtra }: IProps) {
     const theme = useTheme();
     const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
 

src/components/util/ListItemLink.tsx

@@ -9,7 +9,7 @@
 import { Link } from 'react-router-dom';
 import { ListItemButton, ListItemButtonProps } from '@mui/material';
 
-export default function ListItemLink(props: ListItemButtonProps<typeof Link, { directLink?: boolean }>) {
+export function ListItemLink(props: ListItemButtonProps<typeof Link, { directLink?: boolean }>) {
     const { directLink, to } = props;
     if (directLink) {
         if (typeof to !== 'string') {

src/components/util/LoadingPlaceholder.tsx

@@ -18,7 +18,7 @@ interface IProps {
     usePadding?: boolean;
 }
 
-export default function LoadingPlaceholder(props: IProps) {
+export function LoadingPlaceholder(props: IProps) {
     const { children, shouldRender, component, componentProps, usePadding } = props;
 
     let condition = true;

src/components/util/SpinnerImage.tsx

@@ -23,7 +23,7 @@ interface IProps {
     onImageLoad?: () => void;
 }
 
-export default function SpinnerImage(props: IProps) {
+export function SpinnerImage(props: IProps) {
     const { src, alt, onImageLoad, imgRef, spinnerStyle, imgStyle } = props;
     const [imageSrc, setImagsrc] = useState<string>('');
 

src/components/util/StyledFab.tsx

@@ -17,8 +17,6 @@ export const DEFAULT_FAB_STYLE = {
 
 export const DEFAULT_FULL_FAB_HEIGHT = `calc(${DEFAULT_FAB_STYLE.bottom} + ${DEFAULT_FAB_STYLE.height})`;
 
-const StyledFab = styled(Fab)({
+export const StyledFab = styled(Fab)({
     ...DEFAULT_FAB_STYLE,
 }) as typeof Fab;
-
-export default StyledFab;

src/components/util/TabPanel.tsx

@@ -14,7 +14,7 @@ interface IProps {
     currentIndex: any;
 }
 
-export default function TabPanel(props: IProps) {
+export function TabPanel(props: IProps) {
     const { children, index, currentIndex } = props;
 
     return (

src/components/util/Toast.tsx

@@ -48,7 +48,7 @@ export function Toast(props: IToastProps) {
     );
 }
 
-export default function makeToast(message: string, severity: Severity) {
+export function makeToast(message: string, severity: Severity) {
     const id = Math.floor(Math.random() * 1000);
     const container = document.createElement('div');
     container.id = `alert-${id}`;