Feature/use alias for imports (#352)

* Use alias "@" for imports

* Use alias "@" for imports - Fix imports

* Use alias "@" for imports - Prevent faulty "import/extensions" linting issue

For some reason the rule throws an error for alias imports

* Use alias "@" for imports - Update "no-relative-imports" eslint rule

.eslintrc.js

@@ -38,11 +38,14 @@ module.exports = {
             },
         ],
 
+        // seems to be bugged for aliases
+        'import/extensions': ['error', 'ignorePackages', { '': 'never' }],
+
         'no-relative-import-paths/no-relative-import-paths': [
             'error',
             {
                 rootDir: 'src',
-                prefix: false,
+                prefix: '@',
             },
         ],
     },

src/App.tsx

@@ -8,28 +8,28 @@
 
 import { Container } from '@mui/material';
 import CssBaseline from '@mui/material/CssBaseline';
-import AppContext from 'components/context/AppContext';
-import DefaultNavBar from 'components/navbar/DefaultNavBar';
 import React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
-import Browse from 'screens/Browse';
+import AppContext from '@/components/context/AppContext';
-import DownloadQueue from 'screens/DownloadQueue';
+import Browse from '@/screens/Browse';
-import Extensions from 'screens/Extensions';
+import DownloadQueue from '@/screens/DownloadQueue';
-import Library from 'screens/Library';
+import Extensions from '@/screens/Extensions';
-import Manga from 'screens/Manga';
+import Library from '@/screens/Library';
-import Reader from 'screens/Reader';
+import Manga from '@/screens/Manga';
-import SearchAll from 'screens/SearchAll';
+import Reader from '@/screens/Reader';
-import Settings from 'screens/Settings';
+import SearchAll from '@/screens/SearchAll';
-import About from 'screens/settings/About';
+import Settings from '@/screens/Settings';
-import Backup from 'screens/settings/Backup';
+import About from '@/screens/settings/About';
-import Categories from 'screens/settings/Categories';
+import Backup from '@/screens/settings/Backup';
-import DefaultReaderSettings from 'screens/settings/DefaultReaderSettings';
+import Categories from '@/screens/settings/Categories';
-import SourceConfigure from 'screens/SourceConfigure';
+import DefaultReaderSettings from '@/screens/settings/DefaultReaderSettings';
-import SourceMangas from 'screens/SourceMangas';
+import SourceConfigure from '@/screens/SourceConfigure';
-import Sources from 'screens/Sources';
+import SourceMangas from '@/screens/SourceMangas';
-import Updates from 'screens/Updates';
+import Sources from '@/screens/Sources';
-import 'i18n';
+import Updates from '@/screens/Updates';
-import LibrarySettings from 'screens/settings/LibrarySettings';
+import '@/i18n';
+import LibrarySettings from '@/screens/settings/LibrarySettings';
+import DefaultNavBar from '@/components/navbar/DefaultNavBar';
 
 const App: React.FC = () => (
     <AppContext>

src/components/ExtensionCard.tsx

@@ -13,9 +13,9 @@ import Button from '@mui/material/Button';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import { Box } from '@mui/material';
-import { IExtension, TranslationKey } from 'typings';
 import { useTranslation } from 'react-i18next';
-import requestManager from 'lib/RequestManager';
+import { IExtension, TranslationKey } from '@/typings';
+import requestManager from '@/lib/RequestManager';
 
 interface IProps {
     extension: IExtension;

src/components/MangaCard.tsx

@@ -12,13 +12,13 @@ import CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
 import { Avatar, Box, CardContent, Grid, styled } from '@mui/material';
-import useLocalStorage from 'util/useLocalStorage';
-import SpinnerImage from 'components/util/SpinnerImage';
-import { GridLayout, useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
-import { BACK } from 'util/useBackTo';
-import { IMangaCard } from 'typings';
 import { useTranslation } from 'react-i18next';
-import requestManager from 'lib/RequestManager';
+import { IMangaCard } from '@/typings';
+import requestManager from '@/lib/RequestManager';
+import { BACK } from '@/util/useBackTo';
+import useLocalStorage from '@/util/useLocalStorage';
+import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
+import SpinnerImage from '@/components/util/SpinnerImage';
 
 const BottomGradient = styled('div')({
     position: 'absolute',

src/components/MangaGrid.tsx

@@ -8,12 +8,12 @@
 
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import Grid from '@mui/material/Grid';
-import EmptyView from 'components/util/EmptyView';
-import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
 import { Typography, Box } from '@mui/material';
-import MangaCard from 'components/MangaCard';
+import { IMangaCard } from '@/typings';
-import { GridLayout } from 'components/context/LibraryOptionsContext';
+import EmptyView from '@/components/util/EmptyView';
-import { IMangaCard } from 'typings';
+import LoadingPlaceholder from '@/components/util/LoadingPlaceholder';
+import MangaCard from '@/components/MangaCard';
+import { GridLayout } from '@/components/context/LibraryOptionsContext';
 
 export interface IMangaGridProps {
     mangas: IMangaCard[];

src/components/SourceCard.tsx

@@ -15,10 +15,10 @@ import Typography from '@mui/material/Typography';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { ISource } from 'typings';
+import { ISource } from '@/typings';
-import { translateExtensionLanguage } from 'screens/util/Extensions';
+import requestManager from '@/lib/RequestManager';
-import requestManager from 'lib/RequestManager';
+import { translateExtensionLanguage } from '@/screens/util/Extensions';
-import { SourceContentType } from 'screens/SourceMangas';
+import { SourceContentType } from '@/screens/SourceMangas';
 
 const MobileWidthButtons = styled('div')(({ theme }) => ({
     display: 'flex',

src/components/atoms/SortRadioInput.tsx

@@ -9,7 +9,7 @@
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
 import React from 'react';
-import RadioInput, { RadioInputProps } from 'components/atoms/RadioInput';
+import RadioInput, { RadioInputProps } from '@/components/atoms/RadioInput';
 
 interface IProps extends RadioInputProps {
     sortDescending?: boolean | null | undefined;

src/components/atoms/ThreeStateCheckboxInput.tsx

@@ -8,7 +8,7 @@
 
 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;

src/components/context/AppContext.tsx

@@ -7,16 +7,16 @@
  */
 
 import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
-import LibraryOptionsContextProvider from 'components/library/LibraryOptionsProvider';
-import NavBarContextProvider from 'components/navbar/NavBarContextProvider';
 import React, { useMemo } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { SWRConfig } from 'swr';
-import createTheme from 'theme';
 import { QueryParamProvider } from 'use-query-params';
-import useLocalStorage from 'util/useLocalStorage';
-import DarkTheme from 'components/context/DarkTheme';
 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';
 
 interface Props {
     children: React.ReactNode;

src/components/context/LibraryOptionsContext.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useContext } from 'react';
-import { LibraryOptions } from 'typings';
+import { LibraryOptions } from '@/typings';
 
 type ContextType = {
     options: LibraryOptions;

src/components/context/NavbarContext.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useContext, useEffect } from 'react';
-import { INavbarOverride } from 'typings';
+import { INavbarOverride } from '@/typings';
 
 type ContextType = {
     // Default back button url

src/components/library/LibraryMangaGrid.tsx

@@ -7,13 +7,13 @@
  */
 
 import React, { useEffect, useMemo, useState } from 'react';
-import MangaGrid from 'components/MangaGrid';
-import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { useMediaQuery, useTheme } from '@mui/material';
-import { IMangaCard, LibrarySortMode, NullAndUndefined } from 'typings';
-import { useSearchSettings } from 'util/searchSettings';
 import { useTranslation } from 'react-i18next';
+import { IMangaCard, LibrarySortMode, NullAndUndefined } from '@/typings';
+import { useSearchSettings } from '@/util/searchSettings';
+import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
+import MangaGrid from '@/components/MangaGrid';
 
 const unreadFilter = (unread: NullAndUndefined<boolean>, { unreadCount }: IMangaCard): boolean => {
     switch (unread) {

src/components/library/LibraryOptionsPanel.tsx

@@ -7,15 +7,15 @@
  */
 
 import { FormLabel, RadioGroup } from '@mui/material';
-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 React from 'react';
-import { LibraryOptions, LibrarySortMode, TranslationKey } from 'typings';
 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 { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
+import OptionsTabs from '@/components/molecules/OptionsTabs';
 
 const TITLES: { [key in 'filter' | 'sort' | 'display']: TranslationKey } = {
     filter: 'global.label.filter',

src/components/library/LibraryOptionsProvider.tsx

@@ -6,10 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import LibraryOptionsContext, { DefaultLibraryOptions } from 'components/context/LibraryOptionsContext';
 import React, { useMemo } from 'react';
-import useLocalStorage from 'util/useLocalStorage';
+import { LibraryOptions } from '@/typings';
-import { LibraryOptions } from 'typings';
+import useLocalStorage from '@/util/useLocalStorage';
+import LibraryOptionsContext, { DefaultLibraryOptions } from '@/components/context/LibraryOptionsContext';
 
 interface IProps {
     children: React.ReactNode;

src/components/library/LibraryToolbarMenu.tsx

@@ -8,9 +8,9 @@
 
 import FilterList from '@mui/icons-material/FilterList';
 import { IconButton } from '@mui/material';
-import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 import React, { useState } from 'react';
-import LibraryOptionsPanel from 'components/library/LibraryOptionsPanel';
+import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
+import LibraryOptionsPanel from '@/components/library/LibraryOptionsPanel';
 
 const LibraryToolbarMenu: React.FC = () => {
     const [open, setOpen] = useState(false);

src/components/library/UpdateChecker.tsx

@@ -12,10 +12,10 @@ import RefreshIcon from '@mui/icons-material/Refresh';
 import CircularProgress from '@mui/material/CircularProgress';
 import { Box } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import makeToast from 'components/util/Toast';
-import { IUpdateStatus } from 'typings';
 import { useTranslation } from 'react-i18next';
-import requestManager from 'lib/RequestManager';
+import { IUpdateStatus } from '@/typings';
+import requestManager from '@/lib/RequestManager';
+import makeToast from '@/components/util/Toast';
 
 interface IProgressProps {
     progress: number;

src/components/library/useSubscription.ts

@@ -7,7 +7,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import requestManager from 'lib/RequestManager';
+import requestManager from '@/lib/RequestManager';
 
 const useSubscription = <T>(path: string, callback?: (newValue: T) => boolean | void) => {
     const [state, setState] = useState<T | undefined>();

src/components/manga/ChapterCard.tsx

@@ -24,14 +24,14 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
-import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { BACK } from 'util/useBackTo';
-import { getUploadDateString } from 'util/date';
-import { IChapter, IDownloadChapter } from 'typings';
 import { useTranslation } from 'react-i18next';
-import requestManager from 'lib/RequestManager';
+import { IChapter, IDownloadChapter } from '@/typings';
+import requestManager from '@/lib/RequestManager';
+import { getUploadDateString } from '@/util/date';
+import { BACK } from '@/util/useBackTo';
+import DownloadStateIndicator from '@/components/molecules/DownloadStateIndicator';
 
 interface IProps {
     chapter: IChapter;

src/components/manga/ChapterList.tsx

@@ -8,20 +8,20 @@
 
 import { Button, CircularProgress, Stack, styled } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import useSubscription from 'components/library/useSubscription';
-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 React, { ComponentProps, useEffect, useMemo, useRef, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
-import ChaptersToolbarMenu from 'components/manga/ChaptersToolbarMenu';
-import SelectionFAB from 'components/manga/SelectionFAB';
-import { BatchChaptersChange, IChapter, IDownloadChapter, IQueue, TranslationKey } from 'typings';
 import { useTranslation } from 'react-i18next';
-import { DEFAULT_FULL_FAB_HEIGHT } from 'components/util/StyledFab';
+import { BatchChaptersChange, IChapter, IDownloadChapter, IQueue, TranslationKey } from '@/typings';
-import requestManager from 'lib/RequestManager';
+import requestManager from '@/lib/RequestManager';
+import useSubscription from '@/components/library/useSubscription';
+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 { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab';
 
 const StyledVirtuoso = styled(Virtuoso)(({ theme }) => ({
     listStyle: 'none',

src/components/manga/ChapterOptions.tsx

@@ -7,14 +7,14 @@
  */
 
 import { RadioGroup } from '@mui/material';
-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 React from 'react';
-import { SORT_OPTIONS } from 'components/manga/util';
-import { ChapterListOptions, ChapterOptionsReducerAction, TranslationKey } from 'typings';
 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 { SORT_OPTIONS } from '@/components/manga/util';
 
 interface IProps {
     open: boolean;

src/components/manga/ChaptersToolbarMenu.tsx

@@ -9,9 +9,9 @@
 import FilterList from '@mui/icons-material/FilterList';
 import { IconButton } from '@mui/material';
 import * as React from 'react';
-import ChapterOptions from 'components/manga/ChapterOptions';
+import { ChapterListOptions, ChapterOptionsReducerAction } from '@/typings';
-import { isFilterActive } from 'components/manga/util';
+import ChapterOptions from '@/components/manga/ChapterOptions';
-import { ChapterListOptions, ChapterOptionsReducerAction } from 'typings';
+import { isFilterActive } from '@/components/manga/util';
 
 interface IProps {
     options: ChapterListOptions;

src/components/manga/MangaDetails.tsx

@@ -15,10 +15,10 @@ import { styled } from '@mui/material/styles';
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { mutate } from 'swr';
-import { IManga, ISource } from 'typings';
 import { t as translate } from 'i18next';
-import makeToast from 'components/util/Toast';
+import { IManga, ISource } from '@/typings';
-import requestManager from 'lib/RequestManager';
+import requestManager from '@/lib/RequestManager';
+import makeToast from '@/components/util/Toast';
 
 const DetailsWrapper = styled('div')(({ theme }) => ({
     width: '100%',

src/components/manga/MangaToolbarMenu.tsx

@@ -19,10 +19,10 @@ import {
     useMediaQuery,
     useTheme,
 } from '@mui/material';
-import CategorySelect from 'components/navbar/action/CategorySelect';
 import React, { useState } from 'react';
-import { IManga } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { IManga } from '@/typings';
+import CategorySelect from '@/components/navbar/action/CategorySelect';
 
 interface IProps {
     manga: IManga;

src/components/manga/ResumeFAB.tsx

@@ -9,10 +9,10 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { PlayArrow } from '@mui/icons-material';
-import { BACK } from 'util/useBackTo';
-import { IChapter } from 'typings';
 import { useTranslation } from 'react-i18next';
-import StyledFab from 'components/util/StyledFab';
+import { IChapter } from '@/typings';
+import { BACK } from '@/util/useBackTo';
+import StyledFab from '@/components/util/StyledFab';
 
 interface ResumeFABProps {
     chapter: IChapter;

src/components/manga/SelectionFAB.tsx

@@ -9,10 +9,10 @@
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
 import { Fab, Menu, Box } from '@mui/material';
 import React, { useRef, useState } from 'react';
-import type { IChapterWithMeta } from 'components/manga/ChapterList';
-import SelectionFABActionItem from 'components/manga/SelectionFABActionItem';
 import { useTranslation } from 'react-i18next';
-import { DEFAULT_FAB_STYLE } from 'components/util/StyledFab';
+import type { IChapterWithMeta } from '@/components/manga/ChapterList';
+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';
 

src/components/manga/SelectionFABActionItem.tsx

@@ -14,8 +14,8 @@ import Download from '@mui/icons-material/Download';
 import RemoveDone from '@mui/icons-material/RemoveDone';
 import { ListItemIcon, ListItemText, MenuItem } from '@mui/material';
 import React from 'react';
-import type { IChapterWithMeta } from 'components/manga/ChapterList';
+import type { IChapterWithMeta } from '@/components/manga/ChapterList';
-import type { SelectionAction } from 'components/manga/SelectionFAB';
+import type { SelectionAction } from '@/components/manga/SelectionFAB';
 
 interface IProps {
     action: SelectionAction;

src/components/manga/hooks.ts

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

src/components/manga/util.tsx

@@ -7,7 +7,6 @@
  */
 
 import { t } from 'i18next';
-import { useReducerLocalStorage } from 'util/useLocalStorage';
 import {
     ChapterListOptions,
     ChapterOptionsReducerAction,
@@ -15,7 +14,8 @@ import {
     IChapter,
     NullAndUndefined,
     TranslationKey,
-} from 'typings';
+} from '@/typings';
+import { useReducerLocalStorage } from '@/util/useLocalStorage';
 
 const defaultChapterOptions: ChapterListOptions = {
     active: false,

src/components/molecules/DownloadStateIndicator.tsx

@@ -10,7 +10,7 @@ import { CircularProgress, Box } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { IDownloadChapter, TranslationKey } from 'typings';
+import { IDownloadChapter, TranslationKey } from '@/typings';
 
 interface DownloadStateIndicatorProps {
     download: IDownloadChapter;

src/components/molecules/OptionsTabs.tsx

@@ -7,9 +7,9 @@
  */
 
 import { Stack, Tab, Tabs } from '@mui/material';
-import TabPanel from 'components/util/TabPanel';
 import React, { useState } from 'react';
-import OptionsPanel from 'components/molecules/OptionsPanel';
+import TabPanel from '@/components/util/TabPanel';
+import OptionsPanel from '@/components/molecules/OptionsPanel';
 
 interface IProps<T = string> {
     open: boolean;

src/components/navbar/DefaultNavBar.tsx

@@ -25,13 +25,13 @@ import GetAppOutlinedIcon from '@mui/icons-material/GetAppOutlined';
 import SettingsIcon from '@mui/icons-material/Settings';
 import ArrowBack from '@mui/icons-material/ArrowBack';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
-import NavBarContext from 'components/context/NavbarContext';
-import ExtensionOutlinedIcon from 'components/util/CustomExtensionOutlinedIcon';
 import { createPortal } from 'react-dom';
-import useBackTo from 'util/useBackTo';
+import { NavbarItem } from '@/typings';
-import DesktopSideBar from 'components/navbar/navigation/DesktopSideBar';
+import useBackTo from '@/util/useBackTo';
-import MobileBottomBar from 'components/navbar/navigation/MobileBottomBar';
+import NavBarContext from '@/components/context/NavbarContext';
-import { NavbarItem } from 'typings';
+import ExtensionOutlinedIcon from '@/components/util/CustomExtensionOutlinedIcon';
+import DesktopSideBar from '@/components/navbar/navigation/DesktopSideBar';
+import MobileBottomBar from '@/components/navbar/navigation/MobileBottomBar';
 
 const navbarItems: Array<NavbarItem> = [
     {

src/components/navbar/NavBarContextProvider.tsx

@@ -7,8 +7,8 @@
  */
 
 import React, { useCallback, useMemo, useState } from 'react';
-import NavBarContext from 'components/context/NavbarContext';
+import { INavbarOverride } from '@/typings';
-import { INavbarOverride } from 'typings';
+import NavBarContext from '@/components/context/NavbarContext';
 
 interface IProps {
     children: React.ReactNode;

src/components/navbar/ReaderNavBar.tsx

@@ -23,10 +23,10 @@ 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 useBackTo from 'util/useBackTo';
-import ReaderSettingsOptions from 'components/reader/ReaderSettingsOptions';
-import { ChapterOffset, IChapter, IManga, IMangaCard, IReaderSettings } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { ChapterOffset, IChapter, IManga, IMangaCard, IReaderSettings } from '@/typings';
+import useBackTo from '@/util/useBackTo';
+import ReaderSettingsOptions from '@/components/reader/ReaderSettingsOptions';
 
 const Root = styled('div')(({ theme }) => ({
     top: 0,

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/RequestManager';
+import requestManager from '@/lib/RequestManager';
 
 interface IProps {
     open: boolean;

src/components/navbar/action/LangSelect.tsx

@@ -17,9 +17,9 @@ import IconButton from '@mui/material/IconButton';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import { List, ListItemSecondaryAction, ListItemText } from '@mui/material';
 import ListItem from '@mui/material/ListItem';
-import cloneObject from 'util/cloneObject';
 import { useTranslation } from 'react-i18next';
-import { translateExtensionLanguage } from 'screens/util/Extensions';
+import cloneObject from '@/util/cloneObject';
+import { translateExtensionLanguage } from '@/screens/util/Extensions';
 
 function removeAll(firstList: any[], secondList: any[]) {
     secondList.forEach((item) => {

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -10,8 +10,8 @@ import React from 'react';
 import { ListItemIcon, Tooltip, styled, ListItemButton } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
-import { NavbarItem } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { NavbarItem } from '@/typings';
 
 const SideNavBarContainer = styled('div')(({ theme }) => ({
     height: '100vh',

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -10,8 +10,8 @@ import React from 'react';
 import { styled, Box, ListItemButton } from '@mui/material';
 import { Link as RRDLink, useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
-import { NavbarItem } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { NavbarItem } from '@/typings';
 
 const BottomNavContainer = styled('div')(({ theme }) => ({
     bottom: 0,

src/components/reader/DoublePage.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { Box, styled } from '@mui/material';
-import { IReaderSettings } from 'typings';
+import { IReaderSettings } from '@/typings';
 
 const Image = styled('img')({
     marginBottom: 0,

src/components/reader/Page.tsx

@@ -7,9 +7,9 @@
  */
 
 import React, { useRef } from 'react';
-import SpinnerImage from 'components/util/SpinnerImage';
 import Box from '@mui/material/Box';
-import { IReaderSettings } from 'typings';
+import { IReaderSettings } from '@/typings';
+import SpinnerImage from '@/components/util/SpinnerImage';
 
 function imageStyle(settings: IReaderSettings): any {
     const [dimensions, setDimensions] = React.useState({

src/components/reader/PageNumber.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { Box } from '@mui/material';
-import { IReaderSettings } from 'typings';
+import { IReaderSettings } from '@/typings';
 
 interface IProps {
     settings: IReaderSettings;

src/components/reader/ReaderSettingsOptions.tsx

@@ -11,8 +11,8 @@ import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import React from 'react';
-import { IReaderSettings } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { IReaderSettings } from '@/typings';
 
 interface IProps extends IReaderSettings {
     setSettingValue: (key: keyof IReaderSettings, value: string | boolean) => void;

src/components/reader/pager/DoublePagedPager.tsx

@@ -8,10 +8,10 @@
 
 import React, { useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
-import Page from 'components/reader/Page';
-import DoublePage from 'components/reader/DoublePage';
-import { IReaderProps } from 'typings';
 import { createRoot } from 'react-dom/client';
+import { IReaderProps } from '@/typings';
+import Page from '@/components/reader/Page';
+import DoublePage from '@/components/reader/DoublePage';
 
 const isSpreadPage = (image: HTMLImageElement): boolean => {
     const aspectRatio = image.height / image.width;

src/components/reader/pager/HorizontalPager.tsx

@@ -8,8 +8,8 @@
 
 import React, { useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
-import Page from 'components/reader/Page';
+import { IReaderProps } from '@/typings';
-import { IReaderProps } from 'typings';
+import Page from '@/components/reader/Page';
 
 const findCurrentPageIndex = (wrapper: HTMLDivElement): number => {
     for (let i = 0; i < wrapper.children.length; i++) {

src/components/reader/pager/PagedPager.tsx

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

src/components/reader/pager/VerticalPager.tsx

@@ -8,8 +8,8 @@
 
 import React, { useCallback, useEffect, useRef } from 'react';
 import { Box } from '@mui/material';
-import Page from 'components/reader/Page';
+import { IReaderProps } from '@/typings';
-import { IReaderProps } from 'typings';
+import Page from '@/components/reader/Page';
 
 const findCurrentPageIndex = (wrapper: HTMLDivElement): number => {
     for (let i = 0; i < wrapper.children.length; i++) {

src/components/source/GridLayouts.tsx

@@ -9,8 +9,8 @@
 import { IconButton, Menu, MenuItem, FormControlLabel, Radio } from '@mui/material';
 import React from 'react';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
-import { GridLayout, useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 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() {

src/components/source/SourceMangaGrid.tsx

@@ -7,9 +7,9 @@
  */
 
 import React from 'react';
-import MangaGrid, { IMangaGridProps } from 'components/MangaGrid';
-import { IMangaCard } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { IMangaCard } from '@/typings';
+import MangaGrid, { IMangaGridProps } from '@/components/MangaGrid';
 
 function filterManga(mangas: IMangaCard[]): IMangaCard[] {
     return mangas;

src/components/source/SourceOptions.tsx

@@ -8,21 +8,21 @@
 
 import FilterListIcon from '@mui/icons-material/FilterList';
 import { Button, Stack, Box } from '@mui/material';
-import OptionsPanel from 'components/molecules/OptionsPanel';
 import React from 'react';
-import CheckBoxFilter from 'components/source/filters/CheckBoxFilter';
+import { useTranslation } from 'react-i18next';
-import HeaderFilter from 'components/source/filters/HeaderFilter';
+import { ISourceFilters, IState } from '@/typings';
-import SelectFilter from 'components/source/filters/SelectFilter';
+import OptionsPanel from '@/components/molecules/OptionsPanel';
-import SortFilter from 'components/source/filters/SortFilter';
+import CheckBoxFilter from '@/components/source/filters/CheckBoxFilter';
-import TextFilter from 'components/source/filters/TextFilter';
+import HeaderFilter from '@/components/source/filters/HeaderFilter';
-import TriStateFilter from 'components/source/filters/TriStateFilter';
+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 GroupFilter from '@/components/source/filters/GroupFilter';
-import SeperatorFilter from 'components/source/filters/SeparatorFilter';
+import SeperatorFilter from '@/components/source/filters/SeparatorFilter';
-import { ISourceFilters, IState } from 'typings';
+import StyledFab from '@/components/util/StyledFab';
-import { useTranslation } from 'react-i18next';
-import StyledFab from 'components/util/StyledFab';
 
 interface IFilters {
     sourceFilter: ISourceFilters[];

src/components/source/filters/CheckBoxFilter.tsx

@@ -6,8 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import CheckboxInput from 'components/atoms/CheckboxInput';
 import React from 'react';
+import CheckboxInput from '@/components/atoms/CheckboxInput';
 
 interface Props {
     state: boolean;

src/components/source/filters/GroupFilter.tsx

@@ -10,8 +10,8 @@ import { ExpandLess, ExpandMore } from '@mui/icons-material';
 import { Collapse, ListItemButton, ListItemText, Stack, Box } from '@mui/material';
 import React from 'react';
 // eslint-disable-next-line import/no-cycle
-import { Options } from 'components/source/SourceOptions';
+import { ISourceFilters } from '@/typings';
-import { ISourceFilters } from 'typings';
+import { Options } from '@/components/source/SourceOptions';
 
 interface Props {
     state: ISourceFilters[];

src/components/source/filters/SortFilter.tsx

@@ -8,9 +8,9 @@
 
 import { ExpandLess, ExpandMore } from '@mui/icons-material';
 import { Collapse, ListItemButton, ListItemText, Stack, Box } from '@mui/material';
-import SortRadioInput from 'components/atoms/SortRadioInput';
 import React from 'react';
-import { IState } from 'typings';
+import { IState } from '@/typings';
+import SortRadioInput from '@/components/atoms/SortRadioInput';
 
 interface Props {
     values: any;

src/components/source/filters/TextFilter.tsx

@@ -9,7 +9,7 @@
 import SearchIcon from '@mui/icons-material/Search';
 import { FormControl, Input, InputAdornment, InputLabel } from '@mui/material';
 import React, { useEffect } from 'react';
-import { useDebounce } from 'components/manga/hooks';
+import { useDebounce } from '@/components/manga/hooks';
 
 interface Props {
     state: string;

src/components/source/filters/TriStateFilter.tsx

@@ -6,8 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import ThreeStateCheckboxInput from 'components/atoms/ThreeStateCheckboxInput';
 import React from 'react';
+import ThreeStateCheckboxInput from '@/components/atoms/ThreeStateCheckboxInput';
 
 interface Props {
     state: number;

src/components/sourceConfiguration/EditTextPreference.tsx

@@ -15,9 +15,9 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogActions from '@mui/material/DialogActions';
 import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
-import { EditTextPreferenceProps } from 'typings';
 import { useTranslation } from 'react-i18next';
 import { ListItemButton } from '@mui/material';
+import { EditTextPreferenceProps } from '@/typings';
 
 export default function EditTextPreference(props: EditTextPreferenceProps) {
     const { t } = useTranslation();

src/components/sourceConfiguration/ListPreference.tsx

@@ -16,9 +16,9 @@ import RadioGroup from '@mui/material/RadioGroup';
 import Radio from '@mui/material/Radio';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Button from '@mui/material/Button';
-import { ListPreferenceProps } from 'typings';
 import { useTranslation } from 'react-i18next';
 import { ListItemButton } from '@mui/material';
+import { ListPreferenceProps } from '@/typings';
 
 interface IListDialogProps {
     value: string;

src/components/sourceConfiguration/MultiSelectListPreference.tsx

@@ -16,10 +16,10 @@ import FormGroup from '@mui/material/FormGroup';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Button from '@mui/material/Button';
-import cloneObject from 'util/cloneObject';
-import { MultiSelectListPreferenceProps } from 'typings';
 import { useTranslation } from 'react-i18next';
 import { ListItemButton } from '@mui/material';
+import { MultiSelectListPreferenceProps } from '@/typings';
+import cloneObject from '@/util/cloneObject';
 
 interface IListDialogProps {
     selectedValues: string[];

src/components/sourceConfiguration/TwoStatePreference.tsx

@@ -12,7 +12,7 @@ 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';
+import { CheckBoxPreferenceProps, SwitchPreferenceCompatProps, TwoStatePreferenceProps } from '@/typings';
 
 function getTwoStateType(type: 'Checkbox' | 'Switch') {
     if (type === 'Switch') {

src/i18n/i18next.d.ts

@@ -7,7 +7,7 @@
  */
 
 import 'i18next';
-import resources from 'i18n/translations';
+import resources from '@/i18n/translations';
 
 declare module 'i18next' {
     interface CustomTypeOptions {

src/i18n/index.ts

@@ -8,8 +8,8 @@
 
 import { use } from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import resources from 'i18n/translations';
 import LanguageDetector from 'i18next-browser-languagedetector';
+import resources from '@/i18n/translations';
 
 const i18n = use(initReactI18next)
     .use(LanguageDetector)

src/i18n/translations.ts

@@ -6,17 +6,17 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import en from 'i18n/locale/en.json';
+import en from '@/i18n/locale/en.json';
 
-import ar from 'i18n/locale/ar.json';
+import ar from '@/i18n/locale/ar.json';
-import de from 'i18n/locale/de.json';
+import de from '@/i18n/locale/de.json';
-import es from 'i18n/locale/es.json';
+import es from '@/i18n/locale/es.json';
-import fr from 'i18n/locale/fr.json';
+import fr from '@/i18n/locale/fr.json';
-import ja from 'i18n/locale/ja.json';
+import ja from '@/i18n/locale/ja.json';
-import pt from 'i18n/locale/pt.json';
+import pt from '@/i18n/locale/pt.json';
-import uk from 'i18n/locale/uk.json';
+import uk from '@/i18n/locale/uk.json';
-import zh_Hans from 'i18n/locale/zh_Hans.json';
+import zh_Hans from '@/i18n/locale/zh_Hans.json';
-import zh_Hant from 'i18n/locale/zh_Hant.json';
+import zh_Hant from '@/i18n/locale/zh_Hant.json';
 
 const translationHelper = <T>(lng: T) => ({
     translation: lng,

src/index.tsx

@@ -8,8 +8,8 @@
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import App from 'App';
+import App from '@/App';
-import 'index.css';
+import '@/index.css';
 // roboto font
 import '@fontsource/roboto';
 

src/lib/RequestManager.ts

@@ -28,9 +28,9 @@ import {
     SourcePreferences,
     SourceSearchResult,
     UpdateCheck,
-} from 'typings';
+} from '@/typings';
-import storage from 'util/localStorage';
+import { HttpMethod as DefaultHttpMethod, IRestClient, RestClient } from '@/lib/RestClient';
-import { HttpMethod as DefaultHttpMethod, IRestClient, RestClient } from 'lib/RestClient';
+import storage from '@/util/localStorage';
 
 enum SWRHttpMethod {
     SWR_GET,

src/lib/RestClient.ts

@@ -7,7 +7,7 @@
  */
 
 import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
-import storage from 'util/localStorage';
+import storage from '@/util/localStorage';
 
 export enum HttpMethod {
     GET = 'get',

src/screens/Browse.tsx

@@ -9,10 +9,10 @@
 import React, { useState } from 'react';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
-import TabPanel from 'components/util/TabPanel';
-import Sources from 'screens/Sources';
-import Extensions from 'screens/Extensions';
 import { useTranslation } from 'react-i18next';
+import Sources from '@/screens/Sources';
+import Extensions from '@/screens/Extensions';
+import TabPanel from '@/components/util/TabPanel';
 
 export default function Browse() {
     const { t } = useTranslation();

src/screens/DownloadQueue.tsx

@@ -12,22 +12,22 @@ import PauseIcon from '@mui/icons-material/Pause';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import { Card, CardActionArea, Stack, Box } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
-import NavbarContext from 'components/context/NavbarContext';
-import EmptyView from 'components/util/EmptyView';
 import React, { useContext, useEffect } from 'react';
 import { DragDropContext, Draggable } from 'react-beautiful-dnd';
 
 import Typography from '@mui/material/Typography';
-import useSubscription from 'components/library/useSubscription';
-import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
-import { NavbarToolbar } from 'components/navbar/DefaultNavBar';
 import { Link } from 'react-router-dom';
-import { BACK } from 'util/useBackTo';
 import { useTranslation } from 'react-i18next';
-import { IChapter, IQueue } from 'typings';
+import { IChapter, IQueue } from '@/typings';
-import makeToast from 'components/util/Toast';
+import requestManager from '@/lib/RequestManager';
-import requestManager from 'lib/RequestManager';
+import StrictModeDroppable from '@/lib/StrictModeDroppable';
-import StrictModeDroppable from 'lib/StrictModeDroppable';
+import { BACK } from '@/util/useBackTo';
+import makeToast from '@/components/util/Toast';
+import { NavbarToolbar } from '@/components/navbar/DefaultNavBar';
+import DownloadStateIndicator from '@/components/molecules/DownloadStateIndicator';
+import useSubscription from '@/components/library/useSubscription';
+import EmptyView from '@/components/util/EmptyView';
+import NavbarContext from '@/components/context/NavbarContext';
 
 const initialQueue = {
     status: 'Stopped',

src/screens/Extensions.tsx

@@ -10,27 +10,27 @@ import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { fromEvent } from 'file-selector';
 import IconButton from '@mui/material/IconButton';
 import AddIcon from '@mui/icons-material/Add';
-import ExtensionCard from 'components/ExtensionCard';
-import NavbarContext from 'components/context/NavbarContext';
-import useLocalStorage from 'util/useLocalStorage';
-import LangSelect from 'components/navbar/action/LangSelect';
-import { extensionDefaultLangs, DefaultLanguage, langSortCmp } from 'util/language';
-import { makeToaster } from 'components/util/Toast';
-import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
-import AppbarSearch from 'components/util/AppbarSearch';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { Virtuoso } from 'react-virtuoso';
 import { Typography, useMediaQuery, useTheme } from '@mui/material';
-import { IExtension } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { IExtension } from '@/typings';
+import requestManager from '@/lib/RequestManager';
+import { extensionDefaultLangs, DefaultLanguage, langSortCmp } from '@/util/language';
+import useLocalStorage from '@/util/useLocalStorage';
 import {
     ExtensionState,
     GroupedExtensions,
     GroupedExtensionsResult,
     isExtensionStateOrLanguage,
     translateExtensionLanguage,
-} from 'screens/util/Extensions';
+} from '@/screens/util/Extensions';
-import requestManager from 'lib/RequestManager';
+import AppbarSearch from '@/components/util/AppbarSearch';
+import LoadingPlaceholder from '@/components/util/LoadingPlaceholder';
+import { makeToaster } from '@/components/util/Toast';
+import LangSelect from '@/components/navbar/action/LangSelect';
+import NavbarContext from '@/components/context/NavbarContext';
+import ExtensionCard from '@/components/ExtensionCard';
 
 const LANGUAGE = 0;
 const EXTENSIONS = 1;

src/screens/Library.tsx

@@ -8,18 +8,18 @@
 
 import { Chip, Tab, Tabs, styled } from '@mui/material';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
-import NavbarContext from 'components/context/NavbarContext';
-import EmptyView from 'components/util/EmptyView';
-import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
-import TabPanel from 'components/util/TabPanel';
-import LibraryToolbarMenu from 'components/library/LibraryToolbarMenu';
-import LibraryMangaGrid from 'components/library/LibraryMangaGrid';
-import AppbarSearch from 'components/util/AppbarSearch';
 import { useQueryParam, NumberParam } from 'use-query-params';
-import UpdateChecker from 'components/library/UpdateChecker';
 import { useTranslation } from 'react-i18next';
-import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
+import requestManager from '@/lib/RequestManager';
-import requestManager from 'lib/RequestManager';
+import NavbarContext from '@/components/context/NavbarContext';
+import EmptyView from '@/components/util/EmptyView';
+import LoadingPlaceholder from '@/components/util/LoadingPlaceholder';
+import TabPanel from '@/components/util/TabPanel';
+import LibraryToolbarMenu from '@/components/library/LibraryToolbarMenu';
+import LibraryMangaGrid from '@/components/library/LibraryMangaGrid';
+import AppbarSearch from '@/components/util/AppbarSearch';
+import UpdateChecker from '@/components/library/UpdateChecker';
+import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
 
 const TitleWithSizeTag = styled('span')({
     display: 'flex',

src/screens/Manga.tsx

@@ -8,17 +8,17 @@
 
 import { Warning } from '@mui/icons-material';
 import { CircularProgress, IconButton, Stack, Tooltip, Box } from '@mui/material';
-import NavbarContext, { useSetDefaultBackTo } from 'components/context/NavbarContext';
-import ChapterList from 'components/manga/ChapterList';
-import { useRefreshManga } from 'components/manga/hooks';
-import MangaDetails from 'components/manga/MangaDetails';
-import MangaToolbarMenu from 'components/manga/MangaToolbarMenu';
-import EmptyView from 'components/util/EmptyView';
-import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
 import React, { useContext, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
-import requestManager from 'lib/RequestManager';
+import requestManager from '@/lib/RequestManager';
+import NavbarContext, { useSetDefaultBackTo } from '@/components/context/NavbarContext';
+import ChapterList from '@/components/manga/ChapterList';
+import { useRefreshManga } from '@/components/manga/hooks';
+import MangaDetails from '@/components/manga/MangaDetails';
+import MangaToolbarMenu from '@/components/manga/MangaToolbarMenu';
+import EmptyView from '@/components/util/EmptyView';
+import LoadingPlaceholder from '@/components/util/LoadingPlaceholder';
 
 const AUTOFETCH_AGE = 60 * 60 * 24; // 24 hours
 

src/screens/Reader.tsx

@@ -9,24 +9,24 @@
 import CircularProgress from '@mui/material/CircularProgress';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import HorizontalPager from 'components/reader/pager/HorizontalPager';
-import PageNumber from 'components/reader/PageNumber';
-import PagedPager from 'components/reader/pager/PagedPager';
-import DoublePagedPager from 'components/reader/pager/DoublePagedPager';
-import VerticalPager from 'components/reader/pager/VerticalPager';
-import ReaderNavBar from 'components/navbar/ReaderNavBar';
-import NavbarContext from 'components/context/NavbarContext';
 import { Box } from '@mui/material';
-import { requestUpdateMangaMetadata } from 'util/metadata';
+import { useTranslation } from 'react-i18next';
+import { ChapterOffset, IChapter, IManga, IMangaCard, IReaderSettings, ReaderType, TranslationKey } from '@/typings';
+import requestManager from '@/lib/RequestManager';
 import {
     checkAndHandleMissingStoredReaderSettings,
     getReaderSettingsFor,
     useDefaultReaderSettings,
-} from 'util/readerSettings';
+} from '@/util/readerSettings';
-import makeToast from 'components/util/Toast';
+import { requestUpdateMangaMetadata } from '@/util/metadata';
-import { ChapterOffset, IChapter, IManga, IMangaCard, IReaderSettings, ReaderType, TranslationKey } from 'typings';
+import HorizontalPager from '@/components/reader/pager/HorizontalPager';
-import { useTranslation } from 'react-i18next';
+import PageNumber from '@/components/reader/PageNumber';
-import requestManager from 'lib/RequestManager';
+import PagedPager from '@/components/reader/pager/PagedPager';
+import DoublePagedPager from '@/components/reader/pager/DoublePagedPager';
+import VerticalPager from '@/components/reader/pager/VerticalPager';
+import ReaderNavBar from '@/components/navbar/ReaderNavBar';
+import NavbarContext from '@/components/context/NavbarContext';
+import makeToast from '@/components/util/Toast';
 
 const isDupChapter = async (chapterIndex: number, currentChapter: IChapter) => {
     const nextChapter = await requestManager.getChapter(currentChapter.mangaId, chapterIndex).response;

src/screens/SearchAll.tsx

@@ -7,20 +7,20 @@
  */
 
 import { Card, CardActionArea, Typography } from '@mui/material';
-import NavbarContext from 'components/context/NavbarContext';
-import MangaGrid from 'components/MangaGrid';
-import LangSelect from 'components/navbar/action/LangSelect';
-import AppbarSearch from 'components/util/AppbarSearch';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { StringParam, useQueryParam } from 'use-query-params';
-import { langSortCmp, sourceDefualtLangs, sourceForcedDefaultLangs } from 'util/language';
-import useLocalStorage from 'util/useLocalStorage';
-import { ISource } from 'typings';
 import { useTranslation } from 'react-i18next';
-import { translateExtensionLanguage } from 'screens/util/Extensions';
+import { ISource } from '@/typings';
-import requestManager from 'lib/RequestManager';
+import requestManager from '@/lib/RequestManager';
-import { useDebounce } from 'components/manga/hooks';
+import useLocalStorage from '@/util/useLocalStorage';
+import { langSortCmp, sourceDefualtLangs, sourceForcedDefaultLangs } from '@/util/language';
+import { translateExtensionLanguage } from '@/screens/util/Extensions';
+import AppbarSearch from '@/components/util/AppbarSearch';
+import LangSelect from '@/components/navbar/action/LangSelect';
+import MangaGrid from '@/components/MangaGrid';
+import NavbarContext from '@/components/context/NavbarContext';
+import { useDebounce } from '@/components/manga/hooks';
 
 type SourceLoadingState = { isLoading: boolean; hasResults: boolean; emptySearch: boolean };
 type SourceToLoadingStateMap = Map<string, SourceLoadingState>;

src/screens/Settings.tsx

@@ -32,16 +32,16 @@ import FavoriteIcon from '@mui/icons-material/Favorite';
 import Slider from '@mui/material/Slider';
 import { DialogTitle, Link, ListItemButton, MenuItem, Select } from '@mui/material';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
-import NavbarContext from 'components/context/NavbarContext';
-import DarkTheme from 'components/context/DarkTheme';
-import useLocalStorage from 'util/useLocalStorage';
-import ListItemLink from 'components/util/ListItemLink';
-import SearchSettings from 'screens/settings/SearchSettings';
 import { useTranslation } from 'react-i18next';
 import LanguageIcon from '@mui/icons-material/Language';
-import { langCodeToName } from 'util/language';
 import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
-import requestManager from 'lib/RequestManager';
+import requestManager from '@/lib/RequestManager';
+import { langCodeToName } from '@/util/language';
+import useLocalStorage from '@/util/useLocalStorage';
+import SearchSettings from '@/screens/settings/SearchSettings';
+import ListItemLink from '@/components/util/ListItemLink';
+import DarkTheme from '@/components/context/DarkTheme';
+import NavbarContext from '@/components/context/NavbarContext';
 
 export default function Settings() {
     const { t, i18n } = useTranslation();

src/screens/SourceConfigure.tsx

@@ -7,16 +7,16 @@
  */
 
 import React, { useContext, useEffect } from 'react';
-import NavbarContext from 'components/context/NavbarContext';
 import { useParams } from 'react-router-dom';
-import { SwitchPreferenceCompat, CheckBoxPreference } from 'components/sourceConfiguration/TwoStatePreference';
-import ListPreference from 'components/sourceConfiguration/ListPreference';
-import EditTextPreference from 'components/sourceConfiguration/EditTextPreference';
-import MultiSelectListPreference from 'components/sourceConfiguration/MultiSelectListPreference';
 import List from '@mui/material/List';
-import cloneObject from 'util/cloneObject';
 import { useTranslation } from 'react-i18next';
-import requestManager from 'lib/RequestManager';
+import requestManager from '@/lib/RequestManager';
+import cloneObject from '@/util/cloneObject';
+import NavbarContext from '@/components/context/NavbarContext';
+import { SwitchPreferenceCompat, CheckBoxPreference } from '@/components/sourceConfiguration/TwoStatePreference';
+import ListPreference from '@/components/sourceConfiguration/ListPreference';
+import EditTextPreference from '@/components/sourceConfiguration/EditTextPreference';
+import MultiSelectListPreference from '@/components/sourceConfiguration/MultiSelectListPreference';
 
 function getPrefComponent(type: string) {
     switch (type) {

src/screens/SourceMangas.tsx

@@ -9,23 +9,23 @@
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import IconButton from '@mui/material/IconButton';
-import SourceMangaGrid from 'components/source/SourceMangaGrid';
-import NavbarContext from 'components/context/NavbarContext';
 import SettingsIcon from '@mui/icons-material/Settings';
-import SourceOptions from 'components/source/SourceOptions';
-import AppbarSearch from 'components/util/AppbarSearch';
 import { useQueryParam, StringParam } from 'use-query-params';
-import SourceGridLayout from 'components/source/GridLayouts';
-import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 import { useTranslation } from 'react-i18next';
 import Link from '@mui/material/Link';
-import requestManager, { AbortableSWRInfiniteResponse } from 'lib/RequestManager';
-import { useDebounce } from 'components/manga/hooks';
 import { Box, Button, styled } from '@mui/material';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import NewReleasesIcon from '@mui/icons-material/NewReleases';
 import FilterListIcon from '@mui/icons-material/FilterList';
-import { IManga, PaginatedMangaList, TranslationKey } from 'typings';
+import { IManga, PaginatedMangaList, TranslationKey } from '@/typings';
+import requestManager, { AbortableSWRInfiniteResponse } from '@/lib/RequestManager';
+import { useDebounce } from '@/components/manga/hooks';
+import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
+import SourceGridLayout from '@/components/source/GridLayouts';
+import AppbarSearch from '@/components/util/AppbarSearch';
+import SourceOptions from '@/components/source/SourceOptions';
+import NavbarContext from '@/components/context/NavbarContext';
+import SourceMangaGrid from '@/components/source/SourceMangaGrid';
 
 const ContentTypeMenu = styled('div')(({ theme }) => ({
     display: 'flex',

src/screens/Sources.tsx

@@ -7,19 +7,19 @@
  */
 
 import React, { useContext, useEffect } from 'react';
-import LangSelect from 'components/navbar/action/LangSelect';
-import SourceCard from 'components/SourceCard';
-import NavbarContext from 'components/context/NavbarContext';
-import { sourceDefualtLangs, sourceForcedDefaultLangs, langSortCmp } from 'util/language';
-import useLocalStorage from 'util/useLocalStorage';
-import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
 import { IconButton } from '@mui/material';
 import TravelExploreIcon from '@mui/icons-material/TravelExplore';
 import { useNavigate } from 'react-router-dom';
-import { ISource } from 'typings';
 import { useTranslation } from 'react-i18next';
-import { translateExtensionLanguage } from 'screens/util/Extensions';
+import { ISource } from '@/typings';
-import requestManager from 'lib/RequestManager';
+import requestManager from '@/lib/RequestManager';
+import useLocalStorage from '@/util/useLocalStorage';
+import { sourceDefualtLangs, sourceForcedDefaultLangs, langSortCmp } from '@/util/language';
+import { translateExtensionLanguage } from '@/screens/util/Extensions';
+import LoadingPlaceholder from '@/components/util/LoadingPlaceholder';
+import NavbarContext from '@/components/context/NavbarContext';
+import SourceCard from '@/components/SourceCard';
+import LangSelect from '@/components/navbar/action/LangSelect';
 
 function sourceToLangList(sources: ISource[]) {
     const result: string[] = [];

src/screens/Updates.tsx

@@ -13,17 +13,17 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
-import NavbarContext from 'components/context/NavbarContext';
-import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
-import EmptyView from 'components/util/EmptyView';
-import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { IChapter, IMangaChapter, IQueue } from 'typings';
 import { useTranslation } from 'react-i18next';
 import { t as translate } from 'i18next';
-import requestManager from 'lib/RequestManager';
 import { GroupedVirtuoso } from 'react-virtuoso';
+import { IChapter, IMangaChapter, IQueue } from '@/typings';
+import requestManager from '@/lib/RequestManager';
+import LoadingPlaceholder from '@/components/util/LoadingPlaceholder';
+import EmptyView from '@/components/util/EmptyView';
+import DownloadStateIndicator from '@/components/molecules/DownloadStateIndicator';
+import NavbarContext from '@/components/context/NavbarContext';
 
 const StyledGroupedVirtuoso = styled(GroupedVirtuoso)(({ theme }) => ({
     // 64px header

src/screens/settings/About.tsx

@@ -10,11 +10,11 @@ import React, { useContext, useEffect } from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
-import ListItemLink from 'components/util/ListItemLink';
-import NavbarContext from 'components/context/NavbarContext';
-import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
 import { useTranslation } from 'react-i18next';
-import requestManager from 'lib/RequestManager';
+import requestManager from '@/lib/RequestManager';
+import ListItemLink from '@/components/util/ListItemLink';
+import NavbarContext from '@/components/context/NavbarContext';
+import LoadingPlaceholder from '@/components/util/LoadingPlaceholder';
 
 export default function About() {
     const { t } = useTranslation();

src/screens/settings/Backup.tsx

@@ -10,12 +10,12 @@ import React, { useContext, useEffect } from 'react';
 import List from '@mui/material/List';
 import ListItemText from '@mui/material/ListItemText';
 import { fromEvent } from 'file-selector';
-import makeToast from 'components/util/Toast';
-import ListItemLink from 'components/util/ListItemLink';
-import NavbarContext from 'components/context/NavbarContext';
 import { useTranslation } from 'react-i18next';
-import requestManager from 'lib/RequestManager';
 import { ListItemButton } from '@mui/material';
+import requestManager from '@/lib/RequestManager';
+import makeToast from '@/components/util/Toast';
+import ListItemLink from '@/components/util/ListItemLink';
+import NavbarContext from '@/components/context/NavbarContext';
 
 export default function Backup() {
     const { t } = useTranslation();

src/screens/settings/Categories.tsx

@@ -23,12 +23,12 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import NavbarContext from 'components/context/NavbarContext';
-import { ICategory } from 'typings';
 import { useTranslation } from 'react-i18next';
-import { DEFAULT_FULL_FAB_HEIGHT } from 'components/util/StyledFab';
+import { ICategory } from '@/typings';
-import requestManager from 'lib/RequestManager';
+import requestManager from '@/lib/RequestManager';
-import StrictModeDroppable from 'lib/StrictModeDroppable';
+import StrictModeDroppable from '@/lib/StrictModeDroppable';
+import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab';
+import NavbarContext from '@/components/context/NavbarContext';
 
 const getItemStyle = (
     isDragging: boolean,

src/screens/settings/DefaultReaderSettings.tsx

@@ -7,19 +7,19 @@
  */
 
 import React, { useContext, useEffect } from 'react';
-import NavbarContext from 'components/context/NavbarContext';
 import { Box } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
-import { requestUpdateServerMetadata } from 'util/metadata';
+import { useTranslation } from 'react-i18next';
-import makeToast from 'components/util/Toast';
+import { IReaderSettings } from '@/typings';
+import { requestUpdateServerMetadata } from '@/util/metadata';
 import {
     checkAndHandleMissingStoredReaderSettings,
     getDefaultSettings,
     useDefaultReaderSettings,
-} from 'util/readerSettings';
+} from '@/util/readerSettings';
-import ReaderSettingsOptions from 'components/reader/ReaderSettingsOptions';
+import ReaderSettingsOptions from '@/components/reader/ReaderSettingsOptions';
-import { IReaderSettings } from 'typings';
+import makeToast from '@/components/util/Toast';
-import { useTranslation } from 'react-i18next';
+import NavbarContext from '@/components/context/NavbarContext';
 
 export default function DefaultReaderSettings() {
     const { t } = useTranslation();

src/screens/settings/LibrarySettings.tsx

@@ -9,22 +9,22 @@
 import React, { useContext, useEffect, useState } from 'react';
 import List from '@mui/material/List';
 import ListItemText from '@mui/material/ListItemText';
-import NavbarContext from 'components/context/NavbarContext';
 import ListSubheader from '@mui/material/ListSubheader';
-import { ICategory, IncludeInGlobalUpdate } from 'typings';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import ListItemButton from '@mui/material/ListItemButton';
-import ThreeStateCheckboxInput from 'components/atoms/ThreeStateCheckboxInput';
 import DialogTitle from '@mui/material/DialogTitle';
 import { styled } from '@mui/material';
-import makeToast from 'components/util/Toast';
 import { t as translate } from 'i18next';
 import { useTranslation } from 'react-i18next';
-import requestManager from 'lib/RequestManager';
+import { ICategory, IncludeInGlobalUpdate } from '@/typings';
+import requestManager from '@/lib/RequestManager';
+import makeToast from '@/components/util/Toast';
+import ThreeStateCheckboxInput from '@/components/atoms/ThreeStateCheckboxInput';
+import NavbarContext from '@/components/context/NavbarContext';
 
 const CategoriesDiv = styled('div')({
     display: 'flex',

src/screens/settings/SearchSettings.tsx

@@ -9,13 +9,13 @@
 import { ListItem, ListItemText, Switch } from '@mui/material';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import React from 'react';
-import { useSearchSettings } from 'util/searchSettings';
-import { requestUpdateServerMetadata } from 'util/metadata';
-import makeToast from 'components/util/Toast';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import SearchIcon from '@mui/icons-material/Search';
-import { SearchMetadataKeys } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { SearchMetadataKeys } from '@/typings';
+import { requestUpdateServerMetadata } from '@/util/metadata';
+import { useSearchSettings } from '@/util/searchSettings';
+import makeToast from '@/components/util/Toast';
 
 export default function SearchSettings() {
     const { t } = useTranslation();

src/screens/util/Extensions.ts

@@ -6,9 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { IExtension, TranslationKey } from 'typings';
-import { DefaultLanguage, langCodeToName } from 'util/language';
 import { t } from 'i18next';
+import { IExtension, TranslationKey } from '@/typings';
+import { DefaultLanguage, langCodeToName } from '@/util/language';
 
 export enum ExtensionState {
     INSTALLED = 'INSTALLED',

src/util/metadata.ts

@@ -18,8 +18,8 @@ import {
     Metadata,
     MetadataHolder,
     MetadataKeyValuePair,
-} from 'typings';
+} from '@/typings';
-import requestManager, { RequestManager } from 'lib/RequestManager';
+import requestManager, { RequestManager } from '@/lib/RequestManager';
 
 const APP_METADATA_KEY_PREFIX = 'webUI_';
 

src/util/readerSettings.ts

@@ -6,9 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { getMetadataFrom, requestUpdateMangaMetadata, requestUpdateServerMetadata } from 'util/metadata';
+import { IManga, Metadata, MetadataHolder, IReaderSettings, MetadataKeyValuePair } from '@/typings';
-import { IManga, Metadata, MetadataHolder, IReaderSettings, MetadataKeyValuePair } from 'typings';
+import requestManager from '@/lib/RequestManager';
-import requestManager from 'lib/RequestManager';
+import { getMetadataFrom, requestUpdateMangaMetadata, requestUpdateServerMetadata } from '@/util/metadata';
 
 type UndefinedReaderSettings = {
     [setting in keyof IReaderSettings]: IReaderSettings[setting] | undefined;

src/util/searchSettings.ts

@@ -6,9 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { getMetadataFrom } from 'util/metadata';
+import { Metadata, ISearchSettings } from '@/typings';
-import { Metadata, ISearchSettings } from 'typings';
+import requestManager from '@/lib/RequestManager';
-import requestManager from 'lib/RequestManager';
+import { getMetadataFrom } from '@/util/metadata';
 
 export const getDefaultSettings = (): ISearchSettings => ({
     ignoreFilters: false,

src/util/useBackTo.ts

@@ -6,8 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useNavBarContext } from 'components/context/NavbarContext';
 import { useLocation } from 'react-router-dom';
+import { useNavBarContext } from '@/components/context/NavbarContext';
 
 export const BACK = '__BACK__';
 

src/util/useLocalStorage.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useState, Dispatch, SetStateAction, useReducer, Reducer, useCallback } from 'react';
-import storage from 'util/localStorage';
+import storage from '@/util/localStorage';
 
 export default function useLocalStorage<T>(key: string, defaultValue: T | (() => T)): [T, Dispatch<SetStateAction<T>>] {
     const initialState = defaultValue instanceof Function ? defaultValue() : defaultValue;

tsconfig.json

@@ -1,6 +1,9 @@
 {
   "compilerOptions": {
-    "baseUrl": "./src",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "target": "ESNext",
     "lib": [
       "dom",