no log: Apply style linter (#2516)

frontend/.eslintrc.json

@@ -2,6 +2,13 @@
   "rules": {
     "no-console": "error",
     "camelcase": "warn",
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": ["..*"]
+      }
+    ],
+    "simple-import-sort/imports": "error",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-empty-function": "warn",
     "@typescript-eslint/no-empty-interface": "off",
@@ -13,7 +20,7 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended"
   ],
-  "plugins": ["testing-library"],
+  "plugins": ["testing-library", "simple-import-sort"],
   "overrides": [
     {
       "files": [
@@ -21,6 +28,43 @@
         "**/?(*.)+(spec|test).[jt]s?(x)"
       ],
       "extends": ["plugin:testing-library/react"]
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "simple-import-sort/imports": [
+          "error",
+          {
+            "groups": [
+              [
+                // React Packages
+                "^react",
+                // Mantine Packages
+                "^@mantine/",
+                // Vendor Packages
+                "^(\\w|@\\w)",
+                // Side Effect Imports
+                "^\\u0000",
+                // Internal Packages
+                "^@/\\w",
+                // Parent Imports
+                "^\\.\\.(?!/?$)",
+                "^\\.\\./?$",
+                // Relative Imports
+                "^\\./(?=.*/)(?!/?$)",
+                "^\\.(?!/?$)",
+                "^\\./?$",
+                // Style Imports
+                "^.+\\.?(css)$"
+              ]
+            ]
+          }
+        ]
+      }
     }
-  ]
+  ],
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": "latest"
+  }
 }

frontend/package-lock.json

@@ -45,6 +45,7 @@
         "eslint": "^8.57.0",
         "eslint-config-react-app": "^7.0.1",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-simple-import-sort": "^12.1.0",
         "eslint-plugin-testing-library": "^6.2.0",
         "husky": "^9.0.11",
         "jsdom": "^24.0.0",
@@ -6101,6 +6102,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/eslint-plugin-simple-import-sort": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-12.1.0.tgz",
+      "integrity": "sha512-Y2fqAfC11TcG/WP3TrI1Gi3p3nc8XJyEOJYHyEPEGI/UAgNx6akxxlX74p7SbAQdLcgASKhj8M0GKvH3vq/+ig==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=5.0.0"
+      }
+    },
     "node_modules/eslint-plugin-testing-library": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-6.2.0.tgz",

frontend/package.json

@@ -49,6 +49,7 @@
     "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
     "eslint-plugin-testing-library": "^6.2.0",
     "husky": "^9.0.11",
     "jsdom": "^24.0.0",
@@ -72,6 +73,7 @@
     "build": "vite build",
     "build:ci": "vite build -m development",
     "check": "eslint --ext .ts,.tsx src",
+    "check:fix": "eslint --ext .ts,.tsx src --fix",
     "check:ts": "tsc --noEmit --incremental false",
     "check:fmt": "prettier -c .",
     "test": "vitest",

frontend/src/App/Header.tsx

@@ -1,14 +1,4 @@
-import { useSystem, useSystemSettings } from "@/apis/hooks";
-import { Action, Search } from "@/components";
-import { useNavbar } from "@/contexts/Navbar";
-import { useIsOnline } from "@/contexts/Online";
-import { Environment, useGotoHomepage } from "@/utilities";
-import {
-  faArrowRotateLeft,
-  faGear,
-  faPowerOff,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FunctionComponent } from "react";
 import {
   Anchor,
   AppShell,
@@ -19,7 +9,17 @@ import {
   Group,
   Menu,
 } from "@mantine/core";
-import { FunctionComponent } from "react";
+import {
+  faArrowRotateLeft,
+  faGear,
+  faPowerOff,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useSystem, useSystemSettings } from "@/apis/hooks";
+import { Action, Search } from "@/components";
+import { useNavbar } from "@/contexts/Navbar";
+import { useIsOnline } from "@/contexts/Online";
+import { Environment, useGotoHomepage } from "@/utilities";
 import styles from "./Header.module.scss";
 
 const AppHeader: FunctionComponent = () => {

frontend/src/App/Navbar.tsx

@@ -1,16 +1,12 @@
-import { Action } from "@/components";
-import { useNavbar } from "@/contexts/Navbar";
-import { useRouteItems } from "@/Router";
-import { CustomRouteObject, Route } from "@/Router/type";
-import { BuildKey, pathJoin } from "@/utilities";
-import { LOG } from "@/utilities/console";
-import {
-  faHeart,
-  faMoon,
-  faSun,
-  IconDefinition,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, {
+  createContext,
+  FunctionComponent,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { matchPath, NavLink, RouteObject, useLocation } from "react-router-dom";
 import {
   Anchor,
   AppShell,
@@ -24,16 +20,20 @@ import {
   useMantineColorScheme,
 } from "@mantine/core";
 import { useHover } from "@mantine/hooks";
+import {
+  faHeart,
+  faMoon,
+  faSun,
+  IconDefinition,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import clsx from "clsx";
-import React, {
-  createContext,
-  FunctionComponent,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { matchPath, NavLink, RouteObject, useLocation } from "react-router-dom";
+import { Action } from "@/components";
+import { useNavbar } from "@/contexts/Navbar";
+import { useRouteItems } from "@/Router";
+import { CustomRouteObject, Route } from "@/Router/type";
+import { BuildKey, pathJoin } from "@/utilities";
+import { LOG } from "@/utilities/console";
 import styles from "./Navbar.module.scss";
 
 const Selection = createContext<{

frontend/src/App/ThemeProvider.tsx

@@ -1,3 +1,4 @@
+import { FunctionComponent, PropsWithChildren } from "react";
 import {
   ActionIcon,
   AppShell,
@@ -6,15 +7,14 @@ import {
   createTheme,
   MantineProvider,
 } from "@mantine/core";
-import { FunctionComponent, PropsWithChildren } from "react";
 import ThemeLoader from "@/App/ThemeLoader";
 import "@mantine/core/styles.layer.css";
 import "@mantine/notifications/styles.layer.css";
 import styleVars from "@/assets/_variables.module.scss";
-import buttonClasses from "@/assets/button.module.scss";
 import actionIconClasses from "@/assets/action_icon.module.scss";
 import appShellClasses from "@/assets/app_shell.module.scss";
 import badgeClasses from "@/assets/badge.module.scss";
+import buttonClasses from "@/assets/button.module.scss";
 
 const themeProvider = createTheme({
   fontFamily: "Roboto, open sans, Helvetica Neue, Helvetica, Arial, sans-serif",

frontend/src/App/app.test.tsx

@@ -1,5 +1,5 @@
-import { render } from "@/tests";
 import { describe, it } from "vitest";
+import { render } from "@/tests";
 import App from ".";
 
 describe("App", () => {

frontend/src/App/index.tsx

@@ -1,16 +1,16 @@
+import { FunctionComponent, useEffect, useState } from "react";
+import { Outlet, useNavigate } from "react-router-dom";
+import { AppShell } from "@mantine/core";
+import { useWindowEvent } from "@mantine/hooks";
+import { showNotification } from "@mantine/notifications";
 import AppNavbar from "@/App/Navbar";
-import { RouterNames } from "@/Router/RouterNames";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import NavbarProvider from "@/contexts/Navbar";
 import OnlineProvider from "@/contexts/Online";
 import { notification } from "@/modules/task";
 import CriticalError from "@/pages/errors/CriticalError";
+import { RouterNames } from "@/Router/RouterNames";
 import { Environment } from "@/utilities";
-import { AppShell } from "@mantine/core";
-import { useWindowEvent } from "@mantine/hooks";
-import { showNotification } from "@mantine/notifications";
-import { FunctionComponent, useEffect, useState } from "react";
-import { Outlet, useNavigate } from "react-router-dom";
 import AppHeader from "./Header";
 import styleVars from "@/assets/_variables.module.scss";
 

frontend/src/Router/Redirector.tsx

@@ -1,7 +1,7 @@
-import { useSystemSettings } from "@/apis/hooks";
-import { LoadingOverlay } from "@mantine/core";
 import { FunctionComponent, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { LoadingOverlay } from "@mantine/core";
+import { useSystemSettings } from "@/apis/hooks";
 
 const Redirector: FunctionComponent = () => {
   const { data } = useSystemSettings();

frontend/src/Router/index.tsx

@@ -1,11 +1,29 @@
-import App from "@/App";
+import {
+  createContext,
+  FunctionComponent,
+  lazy,
+  useContext,
+  useMemo,
+} from "react";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import {
+  faClock,
+  faCogs,
+  faExclamationTriangle,
+  faFileExcel,
+  faFilm,
+  faLaptop,
+  faPlay,
+} from "@fortawesome/free-solid-svg-icons";
 import { useBadges } from "@/apis/hooks";
 import { useEnabledStatus } from "@/apis/hooks/site";
+import App from "@/App";
 import { Lazy } from "@/components/async";
 import Authentication from "@/pages/Authentication";
 import BlacklistMoviesView from "@/pages/Blacklist/Movies";
 import BlacklistSeriesView from "@/pages/Blacklist/Series";
 import Episodes from "@/pages/Episodes";
+import NotFound from "@/pages/errors/NotFound";
 import MoviesHistoryView from "@/pages/History/Movies";
 import SeriesHistoryView from "@/pages/History/Series";
 import MovieView from "@/pages/Movies";
@@ -30,25 +48,7 @@ import SystemReleasesView from "@/pages/System/Releases";
 import SystemTasksView from "@/pages/System/Tasks";
 import WantedMoviesView from "@/pages/Wanted/Movies";
 import WantedSeriesView from "@/pages/Wanted/Series";
-import NotFound from "@/pages/errors/NotFound";
 import { Environment } from "@/utilities";
-import {
-  faClock,
-  faCogs,
-  faExclamationTriangle,
-  faFileExcel,
-  faFilm,
-  faLaptop,
-  faPlay,
-} from "@fortawesome/free-solid-svg-icons";
-import {
-  FunctionComponent,
-  createContext,
-  lazy,
-  useContext,
-  useMemo,
-} from "react";
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import Redirector from "./Redirector";
 import { RouterNames } from "./RouterNames";
 import { CustomRouteObject } from "./type";

frontend/src/Router/type.d.ts

@@ -1,5 +1,5 @@
-import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import { RouteObject } from "react-router-dom";
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 
 declare namespace Route {
   export type Item = {

frontend/src/apis/hooks/episodes.ts

@@ -4,9 +4,9 @@ import {
   useQuery,
   useQueryClient,
 } from "react-query";
-import { usePaginationQuery } from "../queries/hooks";
-import { QueryKeys } from "../queries/keys";
-import api from "../raw";
+import { usePaginationQuery } from "@/apis/queries/hooks";
+import { QueryKeys } from "@/apis/queries/keys";
+import api from "@/apis/raw";
 
 const cacheEpisodes = (client: QueryClient, episodes: Item.Episode[]) => {
   episodes.forEach((item) => {

frontend/src/apis/hooks/histories.ts

@@ -1,6 +1,6 @@
 import { useQuery } from "react-query";
-import { QueryKeys } from "../queries/keys";
-import api from "../raw";
+import { QueryKeys } from "@/apis/queries/keys";
+import api from "@/apis/raw";
 
 export function useHistoryStats(
   time: History.TimeFrameOptions,

frontend/src/apis/hooks/languages.ts

@@ -1,6 +1,6 @@
 import { useQuery } from "react-query";
-import { QueryKeys } from "../queries/keys";
-import api from "../raw";
+import { QueryKeys } from "@/apis/queries/keys";
+import api from "@/apis/raw";
 
 export function useLanguages(history?: boolean) {
   return useQuery(

frontend/src/apis/hooks/movies.ts

@@ -4,9 +4,9 @@ import {
   useQuery,
   useQueryClient,
 } from "react-query";
-import { usePaginationQuery } from "../queries/hooks";
-import { QueryKeys } from "../queries/keys";
-import api from "../raw";
+import { usePaginationQuery } from "@/apis/queries/hooks";
+import { QueryKeys } from "@/apis/queries/keys";
+import api from "@/apis/raw";
 
 const cacheMovies = (client: QueryClient, movies: Item.Movie[]) => {
   movies.forEach((item) => {

frontend/src/apis/hooks/providers.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "react-query";
-import { QueryKeys } from "../queries/keys";
-import api from "../raw";
+import { QueryKeys } from "@/apis/queries/keys";
+import api from "@/apis/raw";
 
 export function useSystemProviders(history?: boolean) {
   return useQuery(

frontend/src/apis/hooks/series.ts

@@ -4,9 +4,9 @@ import {
   useQuery,
   useQueryClient,
 } from "react-query";
-import { usePaginationQuery } from "../queries/hooks";
-import { QueryKeys } from "../queries/keys";
-import api from "../raw";
+import { usePaginationQuery } from "@/apis/queries/hooks";
+import { QueryKeys } from "@/apis/queries/keys";
+import api from "@/apis/raw";
 
 function cacheSeries(client: QueryClient, series: Item.Series[]) {
   series.forEach((item) => {

frontend/src/apis/hooks/status.ts

@@ -1,5 +1,5 @@
 import { useIsMutating } from "react-query";
-import { QueryKeys } from "../queries/keys";
+import { QueryKeys } from "@/apis/queries/keys";
 
 export function useIsAnyActionRunning() {
   return useIsMutating([QueryKeys.Actions]) > 0;

frontend/src/apis/hooks/subtitles.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "react-query";
-import { QueryKeys } from "../queries/keys";
-import api from "../raw";
+import { QueryKeys } from "@/apis/queries/keys";
+import api from "@/apis/raw";
 
 export function useSubtitleAction() {
   const client = useQueryClient();

frontend/src/apis/hooks/system.ts

@@ -1,9 +1,9 @@
-import { Environment } from "@/utilities";
-import { setAuthenticated } from "@/utilities/event";
 import { useMemo } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
-import { QueryKeys } from "../queries/keys";
-import api from "../raw";
+import { QueryKeys } from "@/apis/queries/keys";
+import api from "@/apis/raw";
+import { Environment } from "@/utilities";
+import { setAuthenticated } from "@/utilities/event";
 
 export function useBadges() {
   return useQuery(

frontend/src/apis/queries/hooks.ts

@@ -1,12 +1,12 @@
-import { GetItemId, useOnValueChange } from "@/utilities";
-import { usePageSize } from "@/utilities/storage";
 import { useCallback, useEffect, useState } from "react";
 import {
   QueryKey,
-  UseQueryResult,
   useQuery,
   useQueryClient,
+  UseQueryResult,
 } from "react-query";
+import { GetItemId, useOnValueChange } from "@/utilities";
+import { usePageSize } from "@/utilities/storage";
 import { QueryKeys } from "./keys";
 
 export type UsePaginationQueryResult<T extends object> = UseQueryResult<

frontend/src/apis/raw/client.ts

@@ -1,10 +1,10 @@
+import { showNotification } from "@mantine/notifications";
+import Axios, { AxiosError, AxiosInstance, CancelTokenSource } from "axios";
 import socketio from "@/modules/socketio";
 import { notification } from "@/modules/task";
+import { Environment } from "@/utilities";
 import { LOG } from "@/utilities/console";
 import { setAuthenticated } from "@/utilities/event";
-import { showNotification } from "@mantine/notifications";
-import Axios, { AxiosError, AxiosInstance, CancelTokenSource } from "axios";
-import { Environment } from "../../utilities";
 
 function GetErrorMessage(data: unknown, defaultMsg = "Unknown error"): string {
   if (typeof data === "string") {

frontend/src/components/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
-import UIError from "@/pages/errors/UIError";
 import { Component, PropsWithChildren } from "react";
+import UIError from "@/pages/errors/UIError";
 
 interface State {
   error: Error | null;

frontend/src/components/Search.tsx

@@ -1,15 +1,15 @@
-import { useServerSearch } from "@/apis/hooks";
-import { useDebouncedValue } from "@/utilities";
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FunctionComponent, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
 import {
   Anchor,
   Autocomplete,
   ComboboxItem,
   OptionsFilter,
 } from "@mantine/core";
-import { FunctionComponent, useMemo, useState } from "react";
-import { Link } from "react-router-dom";
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useServerSearch } from "@/apis/hooks";
+import { useDebouncedValue } from "@/utilities";
 import styles from "./Search.module.scss";
 
 type SearchResultItem = {

frontend/src/components/StateIcon.tsx

@@ -1,4 +1,6 @@
-import { BuildKey } from "@/utilities";
+import { FunctionComponent } from "react";
+import { Group, List, Popover, Stack, Text } from "@mantine/core";
+import { useHover } from "@mantine/hooks";
 import {
   faCheck,
   faCheckCircle,
@@ -7,9 +9,7 @@ import {
   faTimes,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Group, List, Popover, Stack, Text } from "@mantine/core";
-import { useHover } from "@mantine/hooks";
-import { FunctionComponent } from "react";
+import { BuildKey } from "@/utilities";
 
 interface StateIconProps {
   matches: string[];

frontend/src/components/SubtitleToolsMenu.tsx

@@ -1,11 +1,5 @@
-import { useSubtitleAction } from "@/apis/hooks";
-import { ColorToolModal } from "@/components/forms/ColorToolForm";
-import { FrameRateModal } from "@/components/forms/FrameRateForm";
-import { TimeOffsetModal } from "@/components/forms/TimeOffsetForm";
-import { TranslationModal } from "@/components/forms/TranslationForm";
-import { useModals } from "@/modules/modals";
-import { ModalComponent } from "@/modules/modals/WithModal";
-import { task } from "@/modules/task";
+import { FunctionComponent, ReactElement, useCallback, useMemo } from "react";
+import { Divider, List, Menu, MenuProps, ScrollArea } from "@mantine/core";
 import {
   faClock,
   faCode,
@@ -23,8 +17,14 @@ import {
   IconDefinition,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Divider, List, Menu, MenuProps, ScrollArea } from "@mantine/core";
-import { FunctionComponent, ReactElement, useCallback, useMemo } from "react";
+import { useSubtitleAction } from "@/apis/hooks";
+import { ColorToolModal } from "@/components/forms/ColorToolForm";
+import { FrameRateModal } from "@/components/forms/FrameRateForm";
+import { TimeOffsetModal } from "@/components/forms/TimeOffsetForm";
+import { TranslationModal } from "@/components/forms/TranslationForm";
+import { useModals } from "@/modules/modals";
+import { ModalComponent } from "@/modules/modals/WithModal";
+import { task } from "@/modules/task";
 import { SyncSubtitleModal } from "./forms/SyncSubtitleForm";
 
 export interface ToolOptions {

frontend/src/components/TextPopover.tsx

@@ -1,7 +1,7 @@
+import { FunctionComponent, ReactElement } from "react";
 import { Tooltip, TooltipProps } from "@mantine/core";
 import { useHover } from "@mantine/hooks";
 import { isNull, isUndefined } from "lodash";
-import { FunctionComponent, ReactElement } from "react";
 
 interface TextPopoverProps {
   children: ReactElement;

frontend/src/components/async/Lazy.tsx

@@ -1,5 +1,5 @@
-import { LoadingOverlay } from "@mantine/core";
 import { FunctionComponent, PropsWithChildren, Suspense } from "react";
+import { LoadingOverlay } from "@mantine/core";
 
 const Lazy: FunctionComponent<PropsWithChildren> = ({ children }) => {
   return <Suspense fallback={<LoadingOverlay visible />}>{children}</Suspense>;

frontend/src/components/async/MutateAction.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 import { UseMutationResult } from "react-query";
-import { Action } from "../inputs";
-import { ActionProps } from "../inputs/Action";
+import { Action } from "@/components/inputs";
+import { ActionProps } from "@/components/inputs/Action";
 
 type MutateActionProps<DATA, VAR> = Omit<
   ActionProps,

frontend/src/components/async/MutateButton.tsx

@@ -1,6 +1,6 @@
-import { Button, ButtonProps } from "@mantine/core";
 import { useCallback, useState } from "react";
 import { UseMutationResult } from "react-query";
+import { Button, ButtonProps } from "@mantine/core";
 
 type MutateButtonProps<DATA, VAR> = Omit<
   ButtonProps,

frontend/src/components/async/QueryOverlay.tsx

@@ -1,7 +1,7 @@
-import { LoadingProvider } from "@/contexts";
-import { LoadingOverlay } from "@mantine/core";
 import { FunctionComponent, ReactNode } from "react";
 import { UseQueryResult } from "react-query";
+import { LoadingOverlay } from "@mantine/core";
+import { LoadingProvider } from "@/contexts";
 
 interface QueryOverlayProps {
   result: UseQueryResult<unknown, unknown>;

frontend/src/components/bazarr/AudioList.tsx

@@ -1,6 +1,6 @@
-import { BuildKey } from "@/utilities";
-import { Badge, BadgeProps, Group, GroupProps } from "@mantine/core";
 import { FunctionComponent } from "react";
+import { Badge, BadgeProps, Group, GroupProps } from "@mantine/core";
+import { BuildKey } from "@/utilities";
 
 export type AudioListProps = GroupProps & {
   audios: Language.Info[];

frontend/src/components/bazarr/HistoryIcon.tsx

@@ -1,3 +1,5 @@
+import { FunctionComponent } from "react";
+import { Tooltip } from "@mantine/core";
 import {
   faClock,
   faClosedCaptioning,
@@ -9,8 +11,6 @@ import {
   faUser,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Tooltip } from "@mantine/core";
-import { FunctionComponent } from "react";
 
 enum HistoryAction {
   Delete = 0,

frontend/src/components/bazarr/Language.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from "@/tests";
 import { describe, it } from "vitest";
+import { render, screen } from "@/tests";
 import { Language } from ".";
 
 describe("Language text", () => {

frontend/src/components/bazarr/Language.tsx

@@ -1,6 +1,6 @@
-import { BuildKey } from "@/utilities";
-import { Badge, Group, Text, TextProps } from "@mantine/core";
 import { FunctionComponent, useMemo } from "react";
+import { Badge, Group, Text, TextProps } from "@mantine/core";
+import { BuildKey } from "@/utilities";
 
 type LanguageTextProps = TextProps & {
   value: Language.Info;

frontend/src/components/bazarr/LanguageProfile.tsx

@@ -1,5 +1,5 @@
-import { useLanguageProfiles } from "@/apis/hooks";
 import { FunctionComponent, useMemo } from "react";
+import { useLanguageProfiles } from "@/apis/hooks";
 
 interface Props {
   index: number | null;

frontend/src/components/bazarr/LanguageSelector.tsx

@@ -1,7 +1,7 @@
+import { FunctionComponent, useMemo } from "react";
 import { useLanguages } from "@/apis/hooks";
 import { Selector, SelectorProps } from "@/components/inputs";
 import { useSelectorOptions } from "@/utilities";
-import { FunctionComponent, useMemo } from "react";
 
 interface LanguageSelectorProps
   extends Omit<SelectorProps<Language.Server>, "options" | "getkey"> {

frontend/src/components/forms/ColorToolForm.tsx

@@ -1,11 +1,11 @@
+import { FunctionComponent } from "react";
+import { Button, Divider, Stack } from "@mantine/core";
+import { useForm } from "@mantine/form";
 import { useSubtitleAction } from "@/apis/hooks";
 import { Selector, SelectorOption } from "@/components";
 import { useModals, withModal } from "@/modules/modals";
 import { task } from "@/modules/task";
 import FormUtils from "@/utilities/form";
-import { Button, Divider, Stack } from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { FunctionComponent } from "react";
 
 const TaskName = "Changing Color";
 

frontend/src/components/forms/FrameRateForm.tsx

@@ -1,10 +1,10 @@
+import { FunctionComponent } from "react";
+import { Button, Divider, Group, NumberInput, Stack } from "@mantine/core";
+import { useForm } from "@mantine/form";
 import { useSubtitleAction } from "@/apis/hooks";
 import { useModals, withModal } from "@/modules/modals";
 import { task } from "@/modules/task";
 import FormUtils from "@/utilities/form";
-import { Button, Divider, Group, NumberInput, Stack } from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { FunctionComponent } from "react";
 
 const TaskName = "Changing Frame Rate";
 

frontend/src/components/forms/ItemEditForm.tsx

@@ -1,11 +1,11 @@
+import { FunctionComponent, useMemo } from "react";
+import { UseMutationResult } from "react-query";
+import { Button, Divider, Group, LoadingOverlay, Stack } from "@mantine/core";
+import { useForm } from "@mantine/form";
 import { useLanguageProfiles } from "@/apis/hooks";
 import { MultiSelector, Selector } from "@/components/inputs";
 import { useModals, withModal } from "@/modules/modals";
 import { GetItemId, useSelectorOptions } from "@/utilities";
-import { Button, Divider, Group, LoadingOverlay, Stack } from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { FunctionComponent, useMemo } from "react";
-import { UseMutationResult } from "react-query";
 
 interface Props {
   mutation: UseMutationResult<void, unknown, FormType.ModifyItem, unknown>;

frontend/src/components/forms/MovieUploadForm.tsx

@@ -1,20 +1,5 @@
-import { useMovieSubtitleModification } from "@/apis/hooks";
-import { useModals, withModal } from "@/modules/modals";
-import { TaskGroup, task } from "@/modules/task";
-import { useArrayAction, useSelectorOptions } from "@/utilities";
-import FormUtils from "@/utilities/form";
-import {
-  useLanguageProfileBy,
-  useProfileItemsToLanguages,
-} from "@/utilities/languages";
-import {
-  faCheck,
-  faCircleNotch,
-  faInfoCircle,
-  faTimes,
-  faTrash,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FunctionComponent, useEffect, useMemo } from "react";
+import { Column } from "react-table";
 import {
   Button,
   Checkbox,
@@ -24,12 +9,27 @@ import {
   Text,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
+import {
+  faCheck,
+  faCircleNotch,
+  faInfoCircle,
+  faTimes,
+  faTrash,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { isString } from "lodash";
-import { FunctionComponent, useEffect, useMemo } from "react";
-import { Column } from "react-table";
-import TextPopover from "../TextPopover";
-import { Action, Selector } from "../inputs";
-import { SimpleTable } from "../tables";
+import { useMovieSubtitleModification } from "@/apis/hooks";
+import { Action, Selector } from "@/components/inputs";
+import { SimpleTable } from "@/components/tables";
+import TextPopover from "@/components/TextPopover";
+import { useModals, withModal } from "@/modules/modals";
+import { task, TaskGroup } from "@/modules/task";
+import { useArrayAction, useSelectorOptions } from "@/utilities";
+import FormUtils from "@/utilities/form";
+import {
+  useLanguageProfileBy,
+  useProfileItemsToLanguages,
+} from "@/utilities/languages";
 
 type SubtitleFile = {
   file: File;

frontend/src/components/forms/ProfileEditForm.tsx

@@ -1,9 +1,5 @@
-import { Action, Selector, SelectorOption, SimpleTable } from "@/components";
-import { useModals, withModal } from "@/modules/modals";
-import { useArrayAction, useSelectorOptions } from "@/utilities";
-import { LOG } from "@/utilities/console";
-import FormUtils from "@/utilities/form";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FunctionComponent, useCallback, useMemo } from "react";
+import { Column } from "react-table";
 import {
   Accordion,
   Button,
@@ -15,9 +11,13 @@ import {
   TextInput,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import { FunctionComponent, useCallback, useMemo } from "react";
-import { Column } from "react-table";
-import ChipInput from "../inputs/ChipInput";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { Action, Selector, SelectorOption, SimpleTable } from "@/components";
+import ChipInput from "@/components/inputs/ChipInput";
+import { useModals, withModal } from "@/modules/modals";
+import { useArrayAction, useSelectorOptions } from "@/utilities";
+import { LOG } from "@/utilities/console";
+import FormUtils from "@/utilities/form";
 import styles from "./ProfileEditForm.module.scss";
 
 export const anyCutoff = 65535;

frontend/src/components/forms/SeriesUploadForm.tsx

@@ -1,8 +1,31 @@
+import { FunctionComponent, useEffect, useMemo } from "react";
+import { Column } from "react-table";
+import {
+  Button,
+  Checkbox,
+  Divider,
+  MantineColor,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { useForm } from "@mantine/form";
+import {
+  faCheck,
+  faCircleNotch,
+  faInfoCircle,
+  faTimes,
+  faTrash,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { isString } from "lodash";
 import {
   useEpisodesBySeriesId,
   useEpisodeSubtitleModification,
   useSubtitleInfos,
 } from "@/apis/hooks";
+import { Action, Selector } from "@/components/inputs";
+import { SimpleTable } from "@/components/tables";
+import TextPopover from "@/components/TextPopover";
 import { useModals, withModal } from "@/modules/modals";
 import { task, TaskGroup } from "@/modules/task";
 import { useArrayAction, useSelectorOptions } from "@/utilities";
@@ -11,29 +34,6 @@ import {
   useLanguageProfileBy,
   useProfileItemsToLanguages,
 } from "@/utilities/languages";
-import {
-  faCheck,
-  faCircleNotch,
-  faInfoCircle,
-  faTimes,
-  faTrash,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  Button,
-  Checkbox,
-  Divider,
-  MantineColor,
-  Stack,
-  Text,
-} from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { isString } from "lodash";
-import { FunctionComponent, useEffect, useMemo } from "react";
-import { Column } from "react-table";
-import { Action, Selector } from "../inputs";
-import { SimpleTable } from "../tables";
-import TextPopover from "../TextPopover";
 
 type SubtitleFile = {
   file: File;

frontend/src/components/forms/SyncSubtitleForm.tsx

@@ -1,20 +1,19 @@
 /* eslint-disable camelcase */
-
+import { FunctionComponent } from "react";
+import { Alert, Button, Checkbox, Divider, Stack, Text } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   useRefTracksByEpisodeId,
   useRefTracksByMovieId,
   useSubtitleAction,
 } from "@/apis/hooks";
+import { GroupedSelector, Selector } from "@/components/inputs";
 import { useModals, withModal } from "@/modules/modals";
 import { task } from "@/modules/task";
 import { syncMaxOffsetSecondsOptions } from "@/pages/Settings/Subtitles/options";
 import { toPython } from "@/utilities";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Alert, Button, Checkbox, Divider, Stack, Text } from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { FunctionComponent } from "react";
-import { GroupedSelector, Selector } from "../inputs";
 
 const TaskName = "Syncing Subtitle";
 

frontend/src/components/forms/TimeOffsetForm.tsx

@@ -1,12 +1,12 @@
+import { FunctionComponent } from "react";
+import { Button, Divider, Group, NumberInput, Stack } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSubtitleAction } from "@/apis/hooks";
 import { useModals, withModal } from "@/modules/modals";
 import { task } from "@/modules/task";
 import FormUtils from "@/utilities/form";
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Button, Divider, Group, NumberInput, Stack } from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { FunctionComponent } from "react";
 
 const TaskName = "Changing Time";
 

frontend/src/components/forms/TranslationForm.tsx

@@ -1,14 +1,14 @@
+import { FunctionComponent, useMemo } from "react";
+import { Alert, Button, Divider, Stack } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { isObject } from "lodash";
 import { useSubtitleAction } from "@/apis/hooks";
+import { Selector } from "@/components/inputs";
 import { useModals, withModal } from "@/modules/modals";
 import { task } from "@/modules/task";
 import { useSelectorOptions } from "@/utilities";
 import FormUtils from "@/utilities/form";
 import { useEnabledLanguages } from "@/utilities/languages";
-import { Alert, Button, Divider, Stack } from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { isObject } from "lodash";
-import { FunctionComponent, useMemo } from "react";
-import { Selector } from "../inputs";
 
 const TaskName = "Translating Subtitles";
 

frontend/src/components/inputs/Action.test.tsx

@@ -1,7 +1,7 @@
-import { render, screen } from "@/tests";
 import { faStickyNote } from "@fortawesome/free-regular-svg-icons";
 import userEvent from "@testing-library/user-event";
 import { describe, it, vitest } from "vitest";
+import { render, screen } from "@/tests";
 import Action from "./Action";
 
 const testLabel = "Test Label";

frontend/src/components/inputs/Action.tsx

@@ -1,15 +1,15 @@
-import { IconDefinition } from "@fortawesome/fontawesome-common-types";
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconProps,
-} from "@fortawesome/react-fontawesome";
+import { forwardRef } from "react";
 import {
   ActionIcon,
   ActionIconProps,
   Tooltip,
   TooltipProps,
 } from "@mantine/core";
-import { forwardRef } from "react";
+import { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconProps,
+} from "@fortawesome/react-fontawesome";
 
 export type ActionProps = MantineComp<ActionIconProps, "button"> & {
   icon: IconDefinition;

frontend/src/components/inputs/ChipInput.test.tsx

@@ -1,6 +1,6 @@
-import { render, screen } from "@/tests";
 import userEvent from "@testing-library/user-event";
 import { describe, it, vitest } from "vitest";
+import { render, screen } from "@/tests";
 import ChipInput from "./ChipInput";
 
 describe("ChipInput", () => {

frontend/src/components/inputs/DropContent.tsx

@@ -1,12 +1,12 @@
+import { FunctionComponent } from "react";
+import { Group, Stack, Text } from "@mantine/core";
+import { Dropzone } from "@mantine/dropzone";
 import {
   faArrowUp,
   faFileCirclePlus,
   faXmark,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Group, Stack, Text } from "@mantine/core";
-import { Dropzone } from "@mantine/dropzone";
-import { FunctionComponent } from "react";
 import styles from "./DropContent.module.scss";
 
 export const DropContent: FunctionComponent = () => {

frontend/src/components/inputs/FileBrowser.tsx

@@ -1,13 +1,13 @@
-import { useFileSystem } from "@/apis/hooks";
-import { faFolder } from "@fortawesome/free-regular-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FunctionComponent, useEffect, useMemo, useRef, useState } from "react";
 import {
   Autocomplete,
   AutocompleteProps,
   ComboboxItem,
   OptionsFilter,
 } from "@mantine/core";
-import { FunctionComponent, useEffect, useMemo, useRef, useState } from "react";
+import { faFolder } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useFileSystem } from "@/apis/hooks";
 
 // TODO: use fortawesome icons
 const backKey = "⏎ Back";

frontend/src/components/inputs/Selector.test.tsx

@@ -1,6 +1,6 @@
-import { render, screen } from "@/tests";
 import userEvent from "@testing-library/user-event";
 import { describe, it, vitest } from "vitest";
+import { render, screen } from "@/tests";
 import { Selector, SelectorOption } from "./Selector";
 
 const selectorName = "Test Selections";

frontend/src/components/inputs/Selector.tsx

@@ -1,4 +1,4 @@
-import { LOG } from "@/utilities/console";
+import { useCallback, useMemo, useRef } from "react";
 import {
   ComboboxItem,
   ComboboxParsedItemGroup,
@@ -8,7 +8,7 @@ import {
   SelectProps,
 } from "@mantine/core";
 import { isNull, isUndefined } from "lodash";
-import { useCallback, useMemo, useRef } from "react";
+import { LOG } from "@/utilities/console";
 
 export type SelectorOption<T> = Override<
   {

frontend/src/components/modals/HistoryModal.tsx

@@ -1,23 +1,23 @@
 /* eslint-disable camelcase */
+import { FunctionComponent, useMemo } from "react";
+import { Column } from "react-table";
+import { Badge, Center, Text } from "@mantine/core";
+import { faFileExcel, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   useEpisodeAddBlacklist,
   useEpisodeHistory,
   useMovieAddBlacklist,
   useMovieHistory,
 } from "@/apis/hooks";
+import { PageTable } from "@/components";
+import MutateAction from "@/components/async/MutateAction";
+import QueryOverlay from "@/components/async/QueryOverlay";
+import { HistoryIcon } from "@/components/bazarr";
+import Language from "@/components/bazarr/Language";
 import StateIcon from "@/components/StateIcon";
+import TextPopover from "@/components/TextPopover";
 import { withModal } from "@/modules/modals";
-import { faFileExcel, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Badge, Center, Text } from "@mantine/core";
-import { FunctionComponent, useMemo } from "react";
-import { Column } from "react-table";
-import { PageTable } from "..";
-import TextPopover from "../TextPopover";
-import MutateAction from "../async/MutateAction";
-import QueryOverlay from "../async/QueryOverlay";
-import { HistoryIcon } from "../bazarr";
-import Language from "../bazarr/Language";
 
 interface MovieHistoryViewProps {
   movie: Item.Movie;

frontend/src/components/modals/ManualSearchModal.tsx

@@ -1,12 +1,6 @@
-import { withModal } from "@/modules/modals";
-import { task, TaskGroup } from "@/modules/task";
-import { GetItemId } from "@/utilities";
-import {
-  faCaretDown,
-  faDownload,
-  faInfoCircle,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useCallback, useMemo, useState } from "react";
+import { UseQueryResult } from "react-query";
+import { Column } from "react-table";
 import {
   Alert,
   Anchor,
@@ -18,13 +12,19 @@ import {
   Stack,
   Text,
 } from "@mantine/core";
+import {
+  faCaretDown,
+  faDownload,
+  faInfoCircle,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { isString } from "lodash";
-import { useCallback, useMemo, useState } from "react";
-import { UseQueryResult } from "react-query";
-import { Column } from "react-table";
-import { Action, PageTable } from "..";
-import Language from "../bazarr/Language";
-import StateIcon from "../StateIcon";
+import { Action, PageTable } from "@/components";
+import Language from "@/components/bazarr/Language";
+import StateIcon from "@/components/StateIcon";
+import { withModal } from "@/modules/modals";
+import { task, TaskGroup } from "@/modules/task";
+import { GetItemId } from "@/utilities";
 
 type SupportType = Item.Movie | Item.Episode;
 

frontend/src/components/modals/SubtitleToolsModal.tsx

@@ -1,12 +1,12 @@
+import { FunctionComponent, useMemo, useState } from "react";
+import { Column, useRowSelect } from "react-table";
+import { Badge, Button, Divider, Group, Stack, Text } from "@mantine/core";
 import Language from "@/components/bazarr/Language";
 import SubtitleToolsMenu from "@/components/SubtitleToolsMenu";
 import { SimpleTable } from "@/components/tables";
 import { useCustomSelection } from "@/components/tables/plugins";
 import { withModal } from "@/modules/modals";
 import { isMovie } from "@/utilities";
-import { Badge, Button, Divider, Group, Stack, Text } from "@mantine/core";
-import { FunctionComponent, useMemo, useState } from "react";
-import { Column, useRowSelect } from "react-table";
 
 type SupportType = Item.Episode | Item.Movie;
 

frontend/src/components/tables/BaseTable.tsx

@@ -1,8 +1,8 @@
-import { useIsLoading } from "@/contexts";
-import { usePageSize } from "@/utilities/storage";
-import { Box, Skeleton, Table, Text } from "@mantine/core";
 import { ReactNode, useMemo } from "react";
 import { HeaderGroup, Row, TableInstance } from "react-table";
+import { Box, Skeleton, Table, Text } from "@mantine/core";
+import { useIsLoading } from "@/contexts";
+import { usePageSize } from "@/utilities/storage";
 import styles from "./BaseTable.module.scss";
 
 export type BaseTableProps<T extends object> = TableInstance<T> & {

frontend/src/components/tables/GroupTable.tsx

@@ -1,6 +1,3 @@
-import { faChevronCircleRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Box, Text, Table } from "@mantine/core";
 import {
   Cell,
   HeaderGroup,
@@ -9,6 +6,9 @@ import {
   useGroupBy,
   useSortBy,
 } from "react-table";
+import { Box, Table, Text } from "@mantine/core";
+import { faChevronCircleRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import SimpleTable, { SimpleTableProps } from "./SimpleTable";
 
 function renderCell<T extends object = object>(cell: Cell<T>, row: Row<T>) {

frontend/src/components/tables/PageControl.tsx

@@ -1,6 +1,6 @@
-import { useIsLoading } from "@/contexts";
-import { Group, Pagination, Text } from "@mantine/core";
 import { FunctionComponent, useEffect } from "react";
+import { Group, Pagination, Text } from "@mantine/core";
+import { useIsLoading } from "@/contexts";
 interface Props {
   count: number;
   index: number;

frontend/src/components/tables/PageTable.tsx

@@ -1,11 +1,11 @@
-import { ScrollToTop } from "@/utilities";
-import { usePageSize } from "@/utilities/storage";
 import { useEffect } from "react";
 import { usePagination, useTable } from "react-table";
+import { ScrollToTop } from "@/utilities";
+import { usePageSize } from "@/utilities/storage";
 import BaseTable from "./BaseTable";
 import PageControl from "./PageControl";
-import { SimpleTableProps } from "./SimpleTable";
 import { useDefaultSettings } from "./plugins";
+import { SimpleTableProps } from "./SimpleTable";
 
 type Props<T extends object> = SimpleTableProps<T> & {
   autoScroll?: boolean;

frontend/src/components/tables/QueryPageTable.tsx

@@ -1,7 +1,7 @@
+import { useEffect } from "react";
 import { UsePaginationQueryResult } from "@/apis/queries/hooks";
 import { LoadingProvider } from "@/contexts";
 import { ScrollToTop } from "@/utilities";
-import { useEffect } from "react";
 import PageControl from "./PageControl";
 import SimpleTable, { SimpleTableProps } from "./SimpleTable";
 

frontend/src/components/tables/plugins/useCustomSelection.tsx

@@ -1,16 +1,16 @@
-import { Checkbox as MantineCheckbox } from "@mantine/core";
 import { forwardRef, useEffect, useRef } from "react";
 import {
   CellProps,
   Column,
   ColumnInstance,
+  ensurePluginOrder,
   HeaderProps,
   Hooks,
   MetaBase,
   TableInstance,
   TableToggleCommonProps,
-  ensurePluginOrder,
 } from "react-table";
+import { Checkbox as MantineCheckbox } from "@mantine/core";
 
 const pluginName = "useCustomSelection";
 

frontend/src/components/tables/plugins/useDefaultSettings.tsx

@@ -1,5 +1,5 @@
-import { usePageSize } from "@/utilities/storage";
 import { Hooks, TableOptions } from "react-table";
+import { usePageSize } from "@/utilities/storage";
 
 const pluginName = "useLocalSettings";
 

frontend/src/components/toolbox/Button.tsx

@@ -1,6 +1,3 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Button, ButtonProps, Text } from "@mantine/core";
 import {
   ComponentProps,
   FunctionComponent,
@@ -8,6 +5,9 @@ import {
   useCallback,
   useState,
 } from "react";
+import { Button, ButtonProps, Text } from "@mantine/core";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type ToolboxButtonProps = Omit<ButtonProps, "color" | "variant" | "leftIcon"> &
   Omit<ComponentProps<"button">, "ref"> & {

frontend/src/components/toolbox/Toolbox.tsx

@@ -1,5 +1,5 @@
-import { Group } from "@mantine/core";
 import { FunctionComponent, PropsWithChildren } from "react";
+import { Group } from "@mantine/core";
 import ToolboxButton, { ToolboxMutateButton } from "./Button";
 import styles from "./Toolbox.module.scss";
 

frontend/src/dom.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { Router } from "./Router";
 import { AllProviders } from "./providers";
+import { Router } from "./Router";
 
 const container = document.getElementById("root");
 

frontend/src/modules/modals/ModalsProvider.tsx

@@ -1,8 +1,8 @@
+import { FunctionComponent, PropsWithChildren, useMemo } from "react";
 import {
   ModalsProvider as MantineModalsProvider,
   ModalsProviderProps as MantineModalsProviderProps,
 } from "@mantine/modals";
-import { FunctionComponent, PropsWithChildren, useMemo } from "react";
 import { ModalComponent, StaticModals } from "./WithModal";
 
 const DefaultModalProps: MantineModalsProviderProps["modalProps"] = {

frontend/src/modules/modals/WithModal.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/ban-types */
 
+import { createContext, FunctionComponent } from "react";
 import { ContextModalProps } from "@mantine/modals";
 import { ModalSettings } from "@mantine/modals/lib/context";
-import { createContext, FunctionComponent } from "react";
 
 export type ModalComponent<P extends Record<string, unknown> = {}> =
   FunctionComponent<ContextModalProps<P>> & {

frontend/src/modules/modals/hooks.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-types */
+import { useCallback, useContext, useMemo } from "react";
 import { useModals as useMantineModals } from "@mantine/modals";
 import { ModalSettings } from "@mantine/modals/lib/context";
-import { useCallback, useContext, useMemo } from "react";
 import { ModalComponent, ModalIdContext } from "./WithModal";
 
 export function useModals() {

frontend/src/modules/socketio/hooks.ts

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
+import { LOG } from "@/utilities/console";
 import Socketio from ".";
-import { LOG } from "../../utilities/console";
 
 export function useSocketIOReducer(reducer: SocketIO.Reducer) {
   useEffect(() => {

frontend/src/modules/socketio/index.ts

@@ -1,8 +1,8 @@
-import { debounce, forIn, remove, uniq } from "lodash";
 import { onlineManager } from "react-query";
-import { Socket, io } from "socket.io-client";
-import { Environment, isDevEnv, isTestEnv } from "../../utilities";
-import { ENSURE, GROUP, LOG } from "../../utilities/console";
+import { debounce, forIn, remove, uniq } from "lodash";
+import { io, Socket } from "socket.io-client";
+import { Environment, isDevEnv, isTestEnv } from "@/utilities";
+import { ENSURE, GROUP, LOG } from "@/utilities/console";
 import { createDefaultReducer } from "./reducer";
 
 class SocketIOClient {

frontend/src/modules/socketio/reducer.ts

@@ -1,9 +1,9 @@
+import { cleanNotifications, showNotification } from "@mantine/notifications";
 import queryClient from "@/apis/queries";
 import { QueryKeys } from "@/apis/queries/keys";
+import { notification, task } from "@/modules/task";
 import { LOG } from "@/utilities/console";
 import { setCriticalError, setOnlineStatus } from "@/utilities/event";
-import { cleanNotifications, showNotification } from "@mantine/notifications";
-import { notification, task } from "../task";
 
 export function createDefaultReducer(): SocketIO.Reducer[] {
   return [

frontend/src/modules/task/index.ts

@@ -1,10 +1,10 @@
-import { LOG } from "@/utilities/console";
 import {
   hideNotification,
   showNotification,
   updateNotification,
 } from "@mantine/notifications";
 import { uniqueId } from "lodash";
+import { LOG } from "@/utilities/console";
 import { notification } from "./notification";
 
 class TaskDispatcher {

frontend/src/pages/Authentication.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from "@/tests";
 import { describe, it } from "vitest";
+import { render, screen } from "@/tests";
 import Authentication from "./Authentication";
 
 describe("Authentication", () => {

frontend/src/pages/Authentication.tsx

@@ -1,5 +1,4 @@
-import { useSystem } from "@/apis/hooks";
-import { Environment } from "@/utilities";
+import { FunctionComponent } from "react";
 import {
   Avatar,
   Button,
@@ -11,7 +10,8 @@ import {
   TextInput,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import { FunctionComponent } from "react";
+import { useSystem } from "@/apis/hooks";
+import { Environment } from "@/utilities";
 
 const Authentication: FunctionComponent = () => {
   const { login } = useSystem();

frontend/src/pages/Blacklist/Movies/index.tsx

@@ -1,13 +1,13 @@
+import { FunctionComponent } from "react";
+import { Container, Stack } from "@mantine/core";
+import { useDocumentTitle } from "@mantine/hooks";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import {
   useMovieBlacklist,
   useMovieDeleteBlacklist,
 } from "@/apis/hooks/movies";
 import { Toolbox } from "@/components";
 import { QueryOverlay } from "@/components/async";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
-import { Container, Stack } from "@mantine/core";
-import { useDocumentTitle } from "@mantine/hooks";
-import { FunctionComponent } from "react";
 import Table from "./table";
 
 const BlacklistMoviesView: FunctionComponent = () => {

frontend/src/pages/Blacklist/Movies/table.tsx

@@ -1,13 +1,13 @@
+import { FunctionComponent, useMemo } from "react";
+import { Link } from "react-router-dom";
+import { Column } from "react-table";
+import { Anchor, Text } from "@mantine/core";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { useMovieDeleteBlacklist } from "@/apis/hooks";
 import { PageTable } from "@/components";
 import MutateAction from "@/components/async/MutateAction";
 import Language from "@/components/bazarr/Language";
 import TextPopover from "@/components/TextPopover";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
-import { Anchor, Text } from "@mantine/core";
-import { FunctionComponent, useMemo } from "react";
-import { Link } from "react-router-dom";
-import { Column } from "react-table";
 
 interface Props {
   blacklist: readonly Blacklist.Movie[];

frontend/src/pages/Blacklist/Series/index.tsx

@@ -1,10 +1,10 @@
+import { FunctionComponent } from "react";
+import { Container, Stack } from "@mantine/core";
+import { useDocumentTitle } from "@mantine/hooks";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { useEpisodeBlacklist, useEpisodeDeleteBlacklist } from "@/apis/hooks";
 import { Toolbox } from "@/components";
 import { QueryOverlay } from "@/components/async";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
-import { Container, Stack } from "@mantine/core";
-import { useDocumentTitle } from "@mantine/hooks";
-import { FunctionComponent } from "react";
 import Table from "./table";
 
 const BlacklistSeriesView: FunctionComponent = () => {

frontend/src/pages/Blacklist/Series/table.tsx

@@ -1,13 +1,13 @@
+import { FunctionComponent, useMemo } from "react";
+import { Link } from "react-router-dom";
+import { Column } from "react-table";
+import { Anchor, Text } from "@mantine/core";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { useEpisodeDeleteBlacklist } from "@/apis/hooks";
 import { PageTable } from "@/components";
 import MutateAction from "@/components/async/MutateAction";
 import Language from "@/components/bazarr/Language";
 import TextPopover from "@/components/TextPopover";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
-import { Anchor, Text } from "@mantine/core";
-import { FunctionComponent, useMemo } from "react";
-import { Link } from "react-router-dom";
-import { Column } from "react-table";
 
 interface Props {
   blacklist: readonly Blacklist.Episode[];

frontend/src/pages/Episodes/components.tsx

@@ -1,9 +1,9 @@
+import { FunctionComponent, useMemo, useState } from "react";
+import { Badge, MantineColor, Tooltip } from "@mantine/core";
 import { useEpisodeSubtitleModification } from "@/apis/hooks";
 import Language from "@/components/bazarr/Language";
 import SubtitleToolsMenu from "@/components/SubtitleToolsMenu";
 import { task, TaskGroup } from "@/modules/task";
-import { Badge, MantineColor, Tooltip } from "@mantine/core";
-import { FunctionComponent, useMemo, useState } from "react";
 
 interface Props {
   seriesId: number;

frontend/src/pages/Episodes/index.tsx

@@ -1,4 +1,26 @@
-import { RouterNames } from "@/Router/RouterNames";
+import {
+  FunctionComponent,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Navigate, useParams } from "react-router-dom";
+import { Container, Group, Stack } from "@mantine/core";
+import { Dropzone } from "@mantine/dropzone";
+import { useDocumentTitle } from "@mantine/hooks";
+import { showNotification } from "@mantine/notifications";
+import {
+  faAdjust,
+  faBriefcase,
+  faCircleChevronDown,
+  faCircleChevronRight,
+  faCloudUploadAlt,
+  faHdd,
+  faSearch,
+  faSync,
+  faWrench,
+} from "@fortawesome/free-solid-svg-icons";
 import {
   useEpisodesBySeriesId,
   useIsAnyActionRunning,
@@ -12,32 +34,10 @@ import { ItemEditModal } from "@/components/forms/ItemEditForm";
 import { SeriesUploadModal } from "@/components/forms/SeriesUploadForm";
 import { SubtitleToolsModal } from "@/components/modals";
 import { useModals } from "@/modules/modals";
-import { TaskGroup, notification, task } from "@/modules/task";
+import { notification, task, TaskGroup } from "@/modules/task";
 import ItemOverview from "@/pages/views/ItemOverview";
+import { RouterNames } from "@/Router/RouterNames";
 import { useLanguageProfileBy } from "@/utilities/languages";
-import {
-  faAdjust,
-  faBriefcase,
-  faCircleChevronDown,
-  faCircleChevronRight,
-  faCloudUploadAlt,
-  faHdd,
-  faSearch,
-  faSync,
-  faWrench,
-} from "@fortawesome/free-solid-svg-icons";
-import { Container, Group, Stack } from "@mantine/core";
-import { Dropzone } from "@mantine/dropzone";
-import { useDocumentTitle } from "@mantine/hooks";
-import { showNotification } from "@mantine/notifications";
-import {
-  FunctionComponent,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { Navigate, useParams } from "react-router-dom";
 import Table from "./table";
 
 const SeriesEpisodesView: FunctionComponent = () => {

frontend/src/pages/Episodes/table.tsx

@@ -1,29 +1,29 @@
+import {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { Column, TableInstance } from "react-table";
+import { Group, Text } from "@mantine/core";
+import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";
+import {
+  faBookmark,
+  faHistory,
+  faUser,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useDownloadEpisodeSubtitles, useEpisodesProvider } from "@/apis/hooks";
 import { useShowOnlyDesired } from "@/apis/hooks/site";
 import { Action, GroupTable } from "@/components";
-import TextPopover from "@/components/TextPopover";
 import { AudioList } from "@/components/bazarr";
 import { EpisodeHistoryModal } from "@/components/modals";
 import { EpisodeSearchModal } from "@/components/modals/ManualSearchModal";
+import TextPopover from "@/components/TextPopover";
 import { useModals } from "@/modules/modals";
 import { BuildKey, filterSubtitleBy } from "@/utilities";
 import { useProfileItemsToLanguages } from "@/utilities/languages";
-import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";
-import {
-  faBookmark,
-  faHistory,
-  faUser,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Group, Text } from "@mantine/core";
-import {
-  FunctionComponent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from "react";
-import { Column, TableInstance } from "react-table";
 import { Subtitle } from "./components";
 
 interface Props {

frontend/src/pages/History/Movies/index.tsx

@@ -1,4 +1,14 @@
 /* eslint-disable camelcase */
+import { FunctionComponent, useMemo } from "react";
+import { Link } from "react-router-dom";
+import { Column } from "react-table";
+import { Anchor, Badge, Text } from "@mantine/core";
+import {
+  faFileExcel,
+  faInfoCircle,
+  faRecycle,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useMovieAddBlacklist, useMovieHistoryPagination } from "@/apis/hooks";
 import { MutateAction } from "@/components/async";
 import { HistoryIcon } from "@/components/bazarr";
@@ -6,16 +16,6 @@ import Language from "@/components/bazarr/Language";
 import StateIcon from "@/components/StateIcon";
 import TextPopover from "@/components/TextPopover";
 import HistoryView from "@/pages/views/HistoryView";
-import {
-  faFileExcel,
-  faInfoCircle,
-  faRecycle,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Anchor, Badge, Text } from "@mantine/core";
-import { FunctionComponent, useMemo } from "react";
-import { Link } from "react-router-dom";
-import { Column } from "react-table";
 
 const MoviesHistoryView: FunctionComponent = () => {
   const columns: Column<History.Movie>[] = useMemo<Column<History.Movie>[]>(

frontend/src/pages/History/Series/index.tsx

@@ -1,4 +1,14 @@
 /* eslint-disable camelcase */
+import { FunctionComponent, useMemo } from "react";
+import { Link } from "react-router-dom";
+import { Column } from "react-table";
+import { Anchor, Badge, Text } from "@mantine/core";
+import {
+  faFileExcel,
+  faInfoCircle,
+  faRecycle,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   useEpisodeAddBlacklist,
   useEpisodeHistoryPagination,
@@ -9,16 +19,6 @@ import Language from "@/components/bazarr/Language";
 import StateIcon from "@/components/StateIcon";
 import TextPopover from "@/components/TextPopover";
 import HistoryView from "@/pages/views/HistoryView";
-import {
-  faFileExcel,
-  faInfoCircle,
-  faRecycle,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Anchor, Badge, Text } from "@mantine/core";
-import { FunctionComponent, useMemo } from "react";
-import { Link } from "react-router-dom";
-import { Column } from "react-table";
 
 const SeriesHistoryView: FunctionComponent = () => {
   const columns: Column<History.Episode>[] = useMemo<Column<History.Episode>[]>(

frontend/src/pages/History/Statistics/HistoryStats.tsx

@@ -1,15 +1,7 @@
-import {
-  useHistoryStats,
-  useLanguages,
-  useSystemProviders,
-} from "@/apis/hooks";
-import { Selector, Toolbox } from "@/components";
-import { QueryOverlay } from "@/components/async";
-import { useSelectorOptions } from "@/utilities";
+import { FunctionComponent, useMemo, useState } from "react";
 import { Box, Container, SimpleGrid, useMantineTheme } from "@mantine/core";
 import { useDocumentTitle } from "@mantine/hooks";
 import { merge } from "lodash";
-import { FunctionComponent, useMemo, useState } from "react";
 import {
   Bar,
   BarChart,
@@ -20,6 +12,14 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
+import {
+  useHistoryStats,
+  useLanguages,
+  useSystemProviders,
+} from "@/apis/hooks";
+import { Selector, Toolbox } from "@/components";
+import { QueryOverlay } from "@/components/async";
+import { useSelectorOptions } from "@/utilities";
 import { actionOptions, timeFrameOptions } from "./options";
 import styles from "./HistoryStats.module.scss";
 

frontend/src/pages/History/history.test.tsx

@@ -1,7 +1,7 @@
 import { renderTest, RenderTestCase } from "@/tests/render";
+import HistoryStats from "./Statistics/HistoryStats";
 import MoviesHistoryView from "./Movies";
 import SeriesHistoryView from "./Series";
-import HistoryStats from "./Statistics/HistoryStats";
 
 const cases: RenderTestCase[] = [
   {

frontend/src/pages/Movies/Details/index.tsx

@@ -1,4 +1,21 @@
-import { RouterNames } from "@/Router/RouterNames";
+import { FunctionComponent, useCallback, useRef } from "react";
+import { Navigate, useParams } from "react-router-dom";
+import { Container, Group, Menu, Stack } from "@mantine/core";
+import { Dropzone } from "@mantine/dropzone";
+import { useDocumentTitle } from "@mantine/hooks";
+import { showNotification } from "@mantine/notifications";
+import {
+  faCloudUploadAlt,
+  faEllipsis,
+  faHistory,
+  faSearch,
+  faSync,
+  faToolbox,
+  faUser,
+  faWrench,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { isNumber } from "lodash";
 import {
   useDownloadMovieSubtitles,
   useIsMovieActionRunning,
@@ -16,27 +33,10 @@ import { MovieUploadModal } from "@/components/forms/MovieUploadForm";
 import { MovieHistoryModal, SubtitleToolsModal } from "@/components/modals";
 import { MovieSearchModal } from "@/components/modals/ManualSearchModal";
 import { useModals } from "@/modules/modals";
-import { TaskGroup, notification, task } from "@/modules/task";
+import { notification, task, TaskGroup } from "@/modules/task";
 import ItemOverview from "@/pages/views/ItemOverview";
+import { RouterNames } from "@/Router/RouterNames";
 import { useLanguageProfileBy } from "@/utilities/languages";
-import {
-  faCloudUploadAlt,
-  faEllipsis,
-  faHistory,
-  faSearch,
-  faSync,
-  faToolbox,
-  faUser,
-  faWrench,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Container, Group, Menu, Stack } from "@mantine/core";
-import { Dropzone } from "@mantine/dropzone";
-import { useDocumentTitle } from "@mantine/hooks";
-import { showNotification } from "@mantine/notifications";
-import { isNumber } from "lodash";
-import { FunctionComponent, useCallback, useRef } from "react";
-import { Navigate, useParams } from "react-router-dom";
 import Table from "./table";
 
 const MovieDetailView: FunctionComponent = () => {

frontend/src/pages/Movies/Details/table.tsx

@@ -1,3 +1,8 @@
+import { FunctionComponent, useMemo } from "react";
+import { Column } from "react-table";
+import { Badge, Text, TextProps } from "@mantine/core";
+import { faEllipsis, faSearch } from "@fortawesome/free-solid-svg-icons";
+import { isString } from "lodash";
 import { useMovieSubtitleModification } from "@/apis/hooks";
 import { useShowOnlyDesired } from "@/apis/hooks/site";
 import { Action, SimpleTable } from "@/components";
@@ -6,11 +11,6 @@ import SubtitleToolsMenu from "@/components/SubtitleToolsMenu";
 import { task, TaskGroup } from "@/modules/task";
 import { filterSubtitleBy } from "@/utilities";
 import { useProfileItemsToLanguages } from "@/utilities/languages";
-import { faEllipsis, faSearch } from "@fortawesome/free-solid-svg-icons";
-import { Badge, Text, TextProps } from "@mantine/core";
-import { isString } from "lodash";
-import { FunctionComponent, useMemo } from "react";
-import { Column } from "react-table";
 
 const missingText = "Missing Subtitles";
 

frontend/src/pages/Movies/Editor.tsx

@@ -1,11 +1,11 @@
+import { FunctionComponent, useMemo } from "react";
+import { Column } from "react-table";
+import { useDocumentTitle } from "@mantine/hooks";
 import { useMovieModification, useMovies } from "@/apis/hooks";
 import { QueryOverlay } from "@/components/async";
 import { AudioList } from "@/components/bazarr";
 import LanguageProfileName from "@/components/bazarr/LanguageProfile";
 import MassEditor from "@/pages/views/MassEditor";
-import { useDocumentTitle } from "@mantine/hooks";
-import { FunctionComponent, useMemo } from "react";
-import { Column } from "react-table";
 
 const MovieMassEditor: FunctionComponent = () => {
   const query = useMovies();

frontend/src/pages/Movies/index.tsx

@@ -1,3 +1,11 @@
+import { FunctionComponent, useMemo } from "react";
+import { Link } from "react-router-dom";
+import { Column } from "react-table";
+import { Anchor, Badge, Container } from "@mantine/core";
+import { useDocumentTitle } from "@mantine/hooks";
+import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";
+import { faBookmark, faWrench } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useMovieModification, useMoviesPagination } from "@/apis/hooks";
 import { Action } from "@/components";
 import { AudioList } from "@/components/bazarr";
@@ -7,14 +15,6 @@ import { ItemEditModal } from "@/components/forms/ItemEditForm";
 import { useModals } from "@/modules/modals";
 import ItemView from "@/pages/views/ItemView";
 import { BuildKey } from "@/utilities";
-import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";
-import { faBookmark, faWrench } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Anchor, Badge, Container } from "@mantine/core";
-import { useDocumentTitle } from "@mantine/hooks";
-import { FunctionComponent, useMemo } from "react";
-import { Link } from "react-router-dom";
-import { Column } from "react-table";
 
 const MovieView: FunctionComponent = () => {
   const query = useMoviesPagination();

frontend/src/pages/Movies/movies.test.tsx

@@ -1,7 +1,7 @@
-import { render } from "@/tests";
 import { describe } from "vitest";
-import MovieView from ".";
+import { render } from "@/tests";
 import MovieMassEditor from "./Editor";
+import MovieView from ".";
 
 describe("Movies page", () => {
   it("should render", () => {

frontend/src/pages/Series/Editor.tsx

@@ -1,11 +1,11 @@
+import { FunctionComponent, useMemo } from "react";
+import { Column } from "react-table";
+import { useDocumentTitle } from "@mantine/hooks";
 import { useSeries, useSeriesModification } from "@/apis/hooks";
 import { QueryOverlay } from "@/components/async";
 import { AudioList } from "@/components/bazarr";
 import LanguageProfileName from "@/components/bazarr/LanguageProfile";
 import MassEditor from "@/pages/views/MassEditor";
-import { useDocumentTitle } from "@mantine/hooks";
-import { FunctionComponent, useMemo } from "react";
-import { Column } from "react-table";
 
 const SeriesMassEditor: FunctionComponent = () => {
   const query = useSeries();

frontend/src/pages/Series/index.tsx

@@ -1,17 +1,17 @@
+import { FunctionComponent, useMemo } from "react";
+import { Link } from "react-router-dom";
+import { Column } from "react-table";
+import { Anchor, Container, Progress } from "@mantine/core";
+import { useDocumentTitle } from "@mantine/hooks";
+import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";
+import { faBookmark, faWrench } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSeriesModification, useSeriesPagination } from "@/apis/hooks";
 import { Action } from "@/components";
 import LanguageProfileName from "@/components/bazarr/LanguageProfile";
 import { ItemEditModal } from "@/components/forms/ItemEditForm";
 import { useModals } from "@/modules/modals";
 import ItemView from "@/pages/views/ItemView";
-import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";
-import { faBookmark, faWrench } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Anchor, Container, Progress } from "@mantine/core";
-import { useDocumentTitle } from "@mantine/hooks";
-import { FunctionComponent, useMemo } from "react";
-import { Link } from "react-router-dom";
-import { Column } from "react-table";
 
 const SeriesView: FunctionComponent = () => {
   const mutation = useSeriesModification();

frontend/src/pages/Series/series.test.tsx

@@ -1,7 +1,7 @@
-import { render } from "@/tests";
 import { describe } from "vitest";
-import SeriesView from ".";
+import { render } from "@/tests";
 import SeriesMassEditor from "./Editor";
+import SeriesView from ".";
 
 describe("Series page", () => {
   it("should render", () => {

frontend/src/pages/Settings/General/index.tsx

@@ -1,12 +1,11 @@
-import { Environment, toggleState } from "@/utilities";
+import { FunctionComponent, useState } from "react";
+import { Box, Group as MantineGroup, Text as MantineText } from "@mantine/core";
+import { useClipboard } from "@mantine/hooks";
 import {
   faCheck,
   faClipboard,
   faSync,
 } from "@fortawesome/free-solid-svg-icons";
-import { Box, Group as MantineGroup, Text as MantineText } from "@mantine/core";
-import { useClipboard } from "@mantine/hooks";
-import { FunctionComponent, useState } from "react";
 import {
   Action,
   Check,
@@ -20,7 +19,8 @@ import {
   Section,
   Selector,
   Text,
-} from "../components";
+} from "@/pages/Settings/components";
+import { Environment, toggleState } from "@/utilities";
 import { branchOptions, proxyOptions, securityOptions } from "./options";
 
 const characters = "abcdef0123456789";

frontend/src/pages/Settings/Languages/components.tsx

@@ -1,16 +1,15 @@
+import { FunctionComponent, useMemo } from "react";
+import { Input } from "@mantine/core";
 import {
   MultiSelector,
   MultiSelectorProps,
   SelectorOption,
 } from "@/components";
-import { Language } from "@/components/bazarr";
+import { Selector, SelectorProps } from "@/pages/Settings/components";
+import { useFormActions } from "@/pages/Settings/utilities/FormValues";
+import { BaseInput } from "@/pages/Settings/utilities/hooks";
 import { useSelectorOptions } from "@/utilities";
-import { Input } from "@mantine/core";
-import { FunctionComponent, useMemo } from "react";
 import { useLatestEnabledLanguages, useLatestProfiles } from ".";
-import { Selector, SelectorProps } from "../components";
-import { useFormActions } from "../utilities/FormValues";
-import { BaseInput } from "../utilities/hooks";
 
 type LanguageSelectorProps = Omit<
   MultiSelectorProps<Language.Info>,

frontend/src/pages/Settings/Languages/equals.test.ts

@@ -1,10 +1,10 @@
+import { describe, expect, it } from "vitest";
 import {
   decodeEqualData,
   encodeEqualData,
   LanguageEqualData,
   LanguageEqualImmediateData,
 } from "@/pages/Settings/Languages/equals";
-import { describe, expect, it } from "vitest";
 
 describe("Equals Parser", () => {
   it("should parse from string correctly", () => {

frontend/src/pages/Settings/Languages/equals.tsx

@@ -1,3 +1,8 @@
+import { FunctionComponent, useCallback, useMemo } from "react";
+import { Column } from "react-table";
+import { Button, Checkbox } from "@mantine/core";
+import { faEquals, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useLanguages } from "@/apis/hooks";
 import { Action, SimpleTable } from "@/components";
 import LanguageSelector from "@/components/bazarr/LanguageSelector";
@@ -5,11 +10,6 @@ import { languageEqualsKey } from "@/pages/Settings/keys";
 import { useFormActions } from "@/pages/Settings/utilities/FormValues";
 import { useSettingValue } from "@/pages/Settings/utilities/hooks";
 import { LOG } from "@/utilities/console";
-import { faEquals, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Button, Checkbox } from "@mantine/core";
-import { FunctionComponent, useCallback, useMemo } from "react";
-import { Column } from "react-table";
 
 interface GenericEqualTarget<T> {
   content: T;

frontend/src/pages/Settings/Languages/index.tsx

@@ -1,6 +1,5 @@
-import { useLanguageProfiles, useLanguages } from "@/apis/hooks";
-import { useEnabledLanguages } from "@/utilities/languages";
 import { FunctionComponent } from "react";
+import { useLanguageProfiles, useLanguages } from "@/apis/hooks";
 import {
   Check,
   CollapseBox,
@@ -8,14 +7,15 @@ import {
   Message,
   Section,
   Selector,
-} from "../components";
+} from "@/pages/Settings/components";
 import {
   defaultUndAudioLang,
   defaultUndEmbeddedSubtitlesLang,
   enabledLanguageKey,
   languageProfileKey,
-} from "../keys";
-import { useSettingValue } from "../utilities/hooks";
+} from "@/pages/Settings/keys";
+import { useSettingValue } from "@/pages/Settings/utilities/hooks";
+import { useEnabledLanguages } from "@/utilities/languages";
 import { LanguageSelector, ProfileSelector } from "./components";
 import EqualsTable from "./equals";
 import Table from "./table";

frontend/src/pages/Settings/Languages/table.tsx

@@ -1,18 +1,18 @@
+import { FunctionComponent, useCallback, useMemo } from "react";
+import { Column } from "react-table";
+import { Badge, Button, Group } from "@mantine/core";
+import { faTrash, faWrench } from "@fortawesome/free-solid-svg-icons";
+import { cloneDeep } from "lodash";
 import { Action, SimpleTable } from "@/components";
 import {
-  ProfileEditModal,
   anyCutoff,
+  ProfileEditModal,
 } from "@/components/forms/ProfileEditForm";
 import { useModals } from "@/modules/modals";
+import { languageProfileKey } from "@/pages/Settings/keys";
+import { useFormActions } from "@/pages/Settings/utilities/FormValues";
 import { BuildKey, useArrayAction } from "@/utilities";
-import { faTrash, faWrench } from "@fortawesome/free-solid-svg-icons";
-import { Badge, Button, Group } from "@mantine/core";
-import { cloneDeep } from "lodash";
-import { FunctionComponent, useCallback, useMemo } from "react";
-import { Column } from "react-table";
 import { useLatestEnabledLanguages, useLatestProfiles } from ".";
-import { languageProfileKey } from "../keys";
-import { useFormActions } from "../utilities/FormValues";
 
 const Table: FunctionComponent = () => {
   const profiles = useLatestProfiles();