chore(web): relocations and cleanups (#957)

* delete manifest (vite-plugin-pwa generates it)

* fix upper case letter on screen components

* fix imports of screens components missing upper case

* remove default export from Base.tsx

* move RegexPlayground to settings import

* replace some relative path imports

* remove React and ununsed imports

* small alignments on vite.config.ts

* move Dashboard and Releases to screens

* move filters/index.tsx to filters/index.ts

* remove default export from APIKeyAddForm

* remove default export from FilterAddForm

* organize imports and exports for the router

* add .vscode workspace to gitignore

* some touchs on .gitignore file

* fix some eslint rules

.gitignore

@@ -1,25 +1,25 @@
-# Logs and databases #
+# Logs and databases
-######################
 *.log
 *.sql
 *.sqlite
-*.db
-*.db-shm
-*.db-wal
 *.db*
+log/
+logs/
 
-# OS generated files #
+# OS generated files
-######################
+.DS_Store*
-.DS_Store
-.DS_Store?
 ._*
 .Spotlight-V100
 .Trashes
 ehthumbs.db
 Thumbs.db
 
-# Other
+# IDE
 .idea
+.vscode
+
+# Package manager
+node_modules/
 .pnp.*
 .yarn/*
 !.yarn/patches
@@ -27,17 +27,17 @@ Thumbs.db
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
-node_modules/
+# Ditto for yarn, except we're using pnpm
+yarn.lock
+# If needed, package-lock.json shall be added manually using an explicit git add command
+package-lock.json
+
+# Others
 web/build
 bin/
-log/
+dist/
-#dist/
 .run/
 tmp/
-# If needed, package-lock.json shall be added
+
-# manually using an explicit git add command.
+# Preserve files
-package-lock.json
+!.gitkeep
-# Ditto for yarn, except we're using npm.
-yarn.lock
-dist/*
-!dist/.gitkeep

web/index.html

@@ -10,16 +10,12 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#141415" />
-    <meta
+    <meta name="description" content="autobrr" />
-      name="description"
-      content="autobrr"
-    />
     <link rel="apple-touch-icon" href="/logo192.png" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon-iphone-60x60.png">
+    <link rel="apple-touch-icon" href="/apple-touch-icon-iphone-60x60.png" />
-    <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-ipad-76x76.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-ipad-76x76.png" />
-    <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-iphone-retina-120x120.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-iphone-retina-120x120.png" />
-    <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-ipad-retina-152x152.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-ipad-retina-152x152.png" />
-<!--    <link crossorigin="use-credentials" rel="manifest" href="/manifest.json" />-->
     <title>autobrr</title>
     <base href="{{.BaseUrl}}">
     <script>

web/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "autobrr",
-  "name": "autobrr",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": "/",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

web/src/api/APIClient.ts

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import { baseUrl, sseBaseUrl } from "../utils";
+import { baseUrl, sseBaseUrl } from "@utils";
-import { AuthContext } from "../utils/Context";
+import { AuthContext } from "@utils/Context";
-import { GithubRelease } from "../types/Update";
+import { GithubRelease } from "@app/types/Update";
 
 interface ConfigType {
   body?: BodyInit | Record<string, unknown> | unknown;

web/src/components/data-table/Cells.tsx

@@ -9,10 +9,10 @@ import { ArrowPathIcon, CheckIcon } from "@heroicons/react/24/solid";
 import { ClockIcon, ExclamationCircleIcon, NoSymbolIcon } from "@heroicons/react/24/outline";
 
 import { classNames, simplifyDate } from "@utils";
-import { Tooltip } from "../tooltips/Tooltip";
+import { Tooltip } from "@components/tooltips/Tooltip";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { APIClient } from "@api/APIClient";
-import { filterKeys } from "@screens/filters/list";
+import { filterKeys } from "@screens/filters/List";
 import { toast } from "react-hot-toast";
 import Toast from "@components/notifications/Toast";
 import { RingResizeSpinner } from "@components/Icons";

web/src/components/inputs/select.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 import { Field, FieldProps } from "formik";
 import { Listbox, Transition } from "@headlessui/react";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/solid";

web/src/components/inputs/select_wide.tsx

@@ -8,7 +8,7 @@ import { Field } from "formik";
 import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
 import { OptionBasicTyped } from "@domain/constants";
 import CreatableSelect from "react-select/creatable";
-import { CustomTooltip } from "../tooltips/CustomTooltip";
+import { CustomTooltip } from "@components/tooltips/CustomTooltip";
 
 interface SelectFieldProps<T> {
   name: string;

web/src/components/inputs/switch.tsx

@@ -9,7 +9,7 @@ import { Field } from "formik";
 import { Switch as HeadlessSwitch } from "@headlessui/react";
 
 import { classNames } from "@utils";
-import { CustomTooltip } from "../tooltips/CustomTooltip";
+import { CustomTooltip } from "@components/tooltips/CustomTooltip";
 
 type SwitchProps<V = unknown> = {
     label?: string

web/src/components/inputs/text.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import React, { FC, forwardRef, ReactNode } from "react";
+import { FC, forwardRef, ReactNode } from "react";
 import { DeepMap, FieldError, Path, RegisterOptions, UseFormRegister } from "react-hook-form";
 import { classNames, get } from "@utils";
 import { useToggle } from "@hooks/hooks";
@@ -194,4 +194,3 @@ export const PasswordInput = <TFormValues extends Record<string, unknown>>({
     </div>
   );
 };
-

web/src/components/modals/index.tsx

@@ -3,13 +3,13 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import React, { FC, Fragment } from "react";
+import { FC, Fragment, MutableRefObject } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 
 interface DeleteModalProps {
     isOpen: boolean;
-    buttonRef: React.MutableRefObject<HTMLElement | null> | undefined;
+    buttonRef: MutableRefObject<HTMLElement | null> | undefined;
     toggle: () => void;
     deleteAction: () => void;
     title: string;

web/src/components/panels/index.tsx

@@ -3,15 +3,15 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import React, { Fragment, useRef } from "react";
+import { Fragment, useRef, ReactNode, ReactElement } from "react";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import { Dialog, Transition } from "@headlessui/react";
 import { Form, Formik } from "formik";
 import type { FormikValues } from "formik";
 
-import DEBUG from "../debug";
+import DEBUG from "@components/debug";
 import { useToggle } from "@hooks/hooks";
-import { DeleteModal } from "../modals";
+import { DeleteModal } from "@components/modals";
 import { classNames } from "@utils";
 
 interface SlideOverProps<DataType> {
@@ -21,14 +21,14 @@ interface SlideOverProps<DataType> {
   onSubmit: (values?: DataType) => void;
   isOpen: boolean;
   toggle: () => void;
-  children?: (values: DataType) => React.ReactNode;
+  children?: (values: DataType) => ReactNode;
   deleteAction?: () => void;
   type: "CREATE" | "UPDATE";
   testFn?: (data: unknown) => void;
   isTesting?: boolean;
   isTestSuccessful?: boolean;
   isTestError?: boolean;
-  extraButtons?: (values: DataType) => React.ReactNode;
+  extraButtons?: (values: DataType) => ReactNode;
 }
 
 function SlideOver<DataType>({
@@ -46,7 +46,7 @@ function SlideOver<DataType>({
   isTestSuccessful,
   isTestError,
   extraButtons
-}: SlideOverProps<DataType>): React.ReactElement {
+}: SlideOverProps<DataType>): ReactElement {
   const cancelModalButtonRef = useRef<HTMLInputElement | null>(null);
   const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
 

web/src/domain/routes.tsx

@@ -4,31 +4,18 @@
  */
 
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-
-import { Login } from "@screens/auth/login";
-import { Onboarding } from "@screens/auth/onboarding";
-import Base from "@screens/Base";
-import { Dashboard } from "@screens/dashboard";
-import { FilterDetails, Filters } from "@screens/filters";
-import { Logs } from "@screens/Logs";
-import { Releases } from "@screens/releases";
-import Settings from "@screens/Settings";
-import {
-  APISettings,
-  ApplicationSettings,
-  DownloadClientSettings,
-  FeedSettings,
-  IndexerSettings,
-  IrcSettings,
-  LogSettings,
-  NotificationSettings,
-  ReleaseSettings
-} from "@screens/settings/index";
-import { RegexPlayground } from "@screens/settings/RegexPlayground";
-import { NotFound } from "@components/alerts/NotFound";
-
 import { baseUrl } from "@utils";
 
+import { NotFound } from "@components/alerts/NotFound";
+import { Base } from "@screens/Base";
+import { Dashboard } from "@screens/Dashboard";
+import { Logs } from "@screens/Logs";
+import { Filters, FilterDetails } from "@screens/filters";
+import { Releases } from "@screens/Releases";
+import { Settings } from "@screens/Settings";
+import * as SettingsSubPage from "@screens/settings/index";
+import { Login, Onboarding } from "@screens/auth";
+
 export const LocalRouter = ({ isLoggedIn }: { isLoggedIn: boolean }) => (
   <BrowserRouter basename={baseUrl()}>
     {isLoggedIn ? (
@@ -43,16 +30,16 @@ export const LocalRouter = ({ isLoggedIn }: { isLoggedIn: boolean }) => (
             <Route path=":filterId/*" element={<FilterDetails />} />
           </Route>
           <Route path="settings" element={<Settings />}>
-            <Route index element={<ApplicationSettings />} />
+            <Route index element={<SettingsSubPage.Application />} />
-            <Route path="logs" element={<LogSettings />} />
+            <Route path="logs" element={<SettingsSubPage.Logs />} />
-            <Route path="api-keys" element={<APISettings />} />
+            <Route path="api-keys" element={<SettingsSubPage.Api />} />
-            <Route path="indexers" element={<IndexerSettings />} />
+            <Route path="indexers" element={<SettingsSubPage.Indexer />} />
-            <Route path="feeds" element={<FeedSettings />} />
+            <Route path="feeds" element={<SettingsSubPage.Feed />} />
-            <Route path="irc" element={<IrcSettings />} />
+            <Route path="irc" element={<SettingsSubPage.Irc />} />
-            <Route path="clients" element={<DownloadClientSettings />} />
+            <Route path="clients" element={<SettingsSubPage.DownloadClient />} />
-            <Route path="notifications" element={<NotificationSettings />} />
+            <Route path="notifications" element={<SettingsSubPage.Notification />} />
-            <Route path="releases" element={<ReleaseSettings />} />
+            <Route path="releases" element={<SettingsSubPage.Release />} />
-            <Route path="regex-playground" element={<RegexPlayground />} />
+            <Route path="regex-playground" element={<SettingsSubPage.RegexPlayground />} />
           </Route>
         </Route>
       </Routes>

web/src/forms/filters/FilterAddForm.tsx

@@ -15,14 +15,14 @@ import { useNavigate } from "react-router-dom";
 import { APIClient } from "@api/APIClient";
 import DEBUG from "@components/debug";
 import Toast from "@components/notifications/Toast";
-import { filterKeys } from "@screens/filters/list";
+import { filterKeys } from "@screens/filters/List";
 
 interface filterAddFormProps {
     isOpen: boolean;
     toggle: () => void;
 }
 
-function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
+export function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const mutation = useMutation({
@@ -169,5 +169,3 @@ function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
     </Transition.Root>
   );
 }
-
-export default FilterAddForm;

web/src/forms/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-export { default as FilterAddForm } from "./filters/FilterAddForm";
+export { FilterAddForm } from "./filters/FilterAddForm";
 
 export { DownloadClientAddForm, DownloadClientUpdateForm } from "./settings/DownloadClientForms";
 export { IndexerAddForm, IndexerUpdateForm } from "./settings/IndexerForms";

web/src/forms/settings/APIKeyAddForm.tsx

@@ -21,7 +21,7 @@ interface apiKeyAddFormProps {
   toggle: () => void;
 }
 
-function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
+export function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
   const queryClient = useQueryClient();
 
   const mutation = useMutation({
@@ -156,5 +156,3 @@ function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
     </Transition.Root>
   );
 }
-
-export default APIKeyAddForm;

web/src/forms/settings/DownloadClientForms.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import React, { Fragment, useRef, useState } from "react";
+import { Fragment, useRef, useState, ReactElement } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Dialog, Transition } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/solid";
@@ -24,7 +24,7 @@ import {
   SwitchGroupWide,
   TextFieldWide
 } from "@components/inputs";
-import DownloadClient, { clientKeys } from "@screens/settings/DownloadClient";
+import { clientKeys } from "@screens/settings/DownloadClient";
 import { SelectFieldWide } from "@components/inputs/input_wide";
 
 interface InitialValuesSettings {
@@ -322,7 +322,7 @@ function FormFieldsSabnzbd() {
 }
 
 export interface componentMapType {
-  [key: string]: React.ReactElement;
+  [key: string]: ReactElement;
 }
 
 export const componentMap: componentMapType = {

web/src/forms/settings/IndexerForms.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import React, { Fragment, useState } from "react";
+import { Fragment, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";

web/src/screens/Base.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 import { Link, NavLink, Outlet } from "react-router-dom";
 import { Disclosure, Menu, Transition } from "@headlessui/react";
 import { ArrowTopRightOnSquareIcon, UserIcon } from "@heroicons/react/24/solid";
@@ -30,7 +30,7 @@ const nav: Array<NavItem> = [
   { name: "Logs", path: "/logs" }
 ];
 
-export default function Base() {
+export const Base = () => {
   const authContext = AuthContext.useValue();
 
   const { data } = useQuery({
@@ -250,4 +250,4 @@ export default function Base() {
       <Outlet />
     </div>
   );
-}
+};

web/src/screens/Dashboard.tsx

@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import { Stats } from "./Stats";
+import { Stats } from "./dashboard/Stats";
-import { ActivityTable } from "./ActivityTable";
+import { ActivityTable } from "./dashboard/ActivityTable";
 
 export const Dashboard = () => (
   <main className="py-10">

web/src/screens/Logs.tsx

@@ -4,7 +4,6 @@
  */
 
 import { Fragment, useEffect, useRef, useState } from "react";
-import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 import format from "date-fns/format";
 import { DebounceInput } from "react-debounce-input";
 import {
@@ -49,7 +48,7 @@ export const Logs = () => {
 
   const [logs, setLogs] = useState<LogEvent[]>([]);
   const [searchFilter, setSearchFilter] = useState("");
-  const [regexPattern, setRegexPattern] = useState<RegExp | null>(null);
+  const [_regexPattern, setRegexPattern] = useState<RegExp | null>(null);
   const [filteredLogs, setFilteredLogs] = useState<LogEvent[]>([]);
   const [isInvalidRegex, setIsInvalidRegex] = useState(false);
 
@@ -170,7 +169,7 @@ export const Logs = () => {
 };
 
 export const LogFiles = () => {
-  const { isLoading, data } = useQuery({
+  const { data } = useQuery({
     queryKey: ["log-files"],
     queryFn: () => APIClient.logs.files(),
     retry: false,
@@ -323,7 +322,7 @@ const LogsDropdown = () => {
         >
           <div className="p-3">
             <Menu.Item>
-              {({ active }) => (
+              {() => (
                 <Checkbox
                   label="Scroll to bottom on new message"
                   value={settings.scrollOnNewLog}
@@ -332,7 +331,7 @@ const LogsDropdown = () => {
               )}
             </Menu.Item>
             <Menu.Item>
-              {({ active }) => (
+              {() => (
                 <Checkbox
                   label="Indent log lines"
                   description="Indent each log line according to their respective starting position."
@@ -342,7 +341,7 @@ const LogsDropdown = () => {
               )}
             </Menu.Item>
             <Menu.Item>
-              {({ active }) => (
+              {() => (
                 <Checkbox
                   label="Hide wrapped text"
                   description="Hides text that is meant to be wrapped."

web/src/screens/Releases.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import { ReleaseTable } from "./ReleaseTable";
+import { ReleaseTable } from "./releases/ReleaseTable";
 
 export const Releases = () => (
   <main>

web/src/screens/Settings.tsx

@@ -83,7 +83,7 @@ function SidebarNav({ subNavigation }: SidebarNavProps) {
   );
 }
 
-export default function Settings() {
+export function Settings() {
   return (
     <main>
       <header className="py-10">
@@ -103,4 +103,3 @@ export default function Settings() {
     </main>
   );
 }
-

web/src/screens/auth/Onboarding.tsx

@@ -83,4 +83,3 @@ export const Onboarding = () => {
     </div>
   );
 };
-

web/src/screens/auth/index.ts

@@ -3,5 +3,5 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-export { default as Filters } from "./list";
+export { Login } from "./Login";
-export { default as FilterDetails } from "./details";
+export { Onboarding } from "./Onboarding";

web/src/screens/filters/Action.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import React, { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Field, FieldArray, FieldProps, FormikValues, useFormikContext } from "formik";
 import { Dialog, Switch as SwitchBasic, Transition } from "@headlessui/react";
@@ -24,7 +24,7 @@ import { EmptyListState } from "@components/emptystates";
 import { useToggle } from "@hooks/hooks";
 import { classNames } from "@utils";
 import { DeleteModal } from "@components/modals";
-import { CollapsableSection } from "./details";
+import { CollapsableSection } from "./Details";
 import { TextArea } from "@components/inputs/input";
 import Toast from "@components/notifications/Toast";
 

web/src/screens/filters/Details.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef, ReactNode } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { NavLink, Route, Routes, useLocation, useNavigate, useParams } from "react-router-dom";
 import { toast } from "react-hot-toast";
@@ -11,7 +11,6 @@ import { Form, Formik, FormikValues, useFormikContext } from "formik";
 import { z } from "zod";
 import { toFormikValidationSchema } from "zod-formik-adapter";
 import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/24/solid";
-import TextareaAutosize from "react-textarea-autosize";
 
 import {
   CODECS_OPTIONS,
@@ -47,10 +46,9 @@ import DEBUG from "@components/debug";
 import Toast from "@components/notifications/Toast";
 import { DeleteModal } from "@components/modals";
 import { TitleSubtitle } from "@components/headings";
-import { RegexTextAreaField, TextArea } from "@components/inputs/input";
+import { RegexTextAreaField, TextArea, TextAreaAutoResize } from "@components/inputs/input";
-import { TextAreaAutoResize } from "../../components/inputs/input";
+import { FilterActions } from "./Action";
-import { FilterActions } from "./action";
+import { filterKeys } from "./List";
-import { filterKeys } from "./list";
 
 interface tabType {
   name: string;
@@ -214,7 +212,7 @@ const schema = z.object({
   actions: z.array(actionSchema)
 });
 
-export default function FilterDetails() {
+export function FilterDetails() {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const { filterId } = useParams<{ filterId: string }>();
@@ -223,6 +221,7 @@ export default function FilterDetails() {
     navigate("/filters");
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const id = parseInt(filterId!);
 
   const { isLoading, data: filter } = useQuery({
@@ -695,7 +694,7 @@ function WarningAlert({ text, alert, colors }: WarningAlertProps) {
 interface CollapsableSectionProps {
     title: string;
     subtitle: string;
-    children: React.ReactNode;
+    children: ReactNode;
     defaultOpen?: boolean;
 }
 
@@ -795,4 +794,3 @@ export function External() {
     </div>
   );
 }
-

web/src/screens/filters/List.tsx

@@ -77,7 +77,7 @@ const FilterListReducer = (state: FilterListState, action: Actions): FilterListS
   }
 };
 
-export default function Filters() {
+export function Filters() {
   const queryClient = useQueryClient();
 
   const [createFilterIsOpen, setCreateFilterIsOpen] = useState(false);

web/src/screens/filters/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2021 - 2023, Ludvig Lundgren and the autobrr contributors.
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+export { Filters } from "./List";
+export { FilterDetails } from "./Details";

web/src/screens/settings/Api.tsx

@@ -10,7 +10,7 @@ import { TrashIcon } from "@heroicons/react/24/outline";
 
 import { KeyField } from "@components/fields/text";
 import { DeleteModal } from "@components/modals";
-import APIKeyAddForm from "@forms/settings/APIKeyAddForm";
+import { APIKeyAddForm } from "@forms/settings/APIKeyAddForm";
 import Toast from "@components/notifications/Toast";
 import { APIClient } from "@api/APIClient";
 import { useToggle } from "@hooks/hooks";

web/src/screens/settings/Logs.tsx

@@ -11,7 +11,7 @@ import { APIClient } from "@api/APIClient";
 import { GithubRelease } from "@app/types/Update";
 import Toast from "@components/notifications/Toast";
 import { LogLevelOptions, SelectOption } from "@domain/constants";
-import { LogFiles } from "../Logs";
+import { LogFiles } from "@screens/Logs";
 
 interface RowItemProps {
   label: string;

web/src/screens/settings/RegexPlayground.tsx

@@ -5,7 +5,7 @@
 
 import { useRef, useState } from "react";
 
-export const RegexPlayground = () => {
+const RegexPlayground = () => {
   const regexRef = useRef<HTMLInputElement>(null);
   const [output, setOutput] = useState<Array<React.ReactElement>>();
 
@@ -108,3 +108,5 @@ export const RegexPlayground = () => {
     </div>
   );
 };
+
+export default RegexPlayground;

web/src/screens/settings/Releases.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import React, { useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { toast } from "react-hot-toast";
 

web/src/screens/settings/index.ts

@@ -3,12 +3,13 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-export { default as APISettings } from "./Api";
+export { default as Api } from "./Api";
-export { default as ApplicationSettings } from "./Application";
+export { default as Application } from "./Application";
-export { default as DownloadClientSettings } from "./DownloadClient";
+export { default as DownloadClient } from "./DownloadClient";
-export { default as FeedSettings } from "./Feed";
+export { default as Feed } from "./Feed";
-export { default as IndexerSettings } from "./Indexer";
+export { default as Indexer } from "./Indexer";
-export { default as IrcSettings } from "./Irc";
+export { default as Irc } from "./Irc";
-export { default as LogSettings } from "./Logs";
+export { default as Logs } from "./Logs";
-export { default as NotificationSettings } from "./Notifications";
+export { default as Notification } from "./Notifications";
-export { default as ReleaseSettings } from "./Releases";
+export { default as Release } from "./Releases";
+export { default as RegexPlayground } from "./RegexPlayground";

web/vite.config.ts

@@ -1,15 +1,14 @@
 import { fileURLToPath, URL } from "node:url";
-
+import { defineConfig, loadEnv, ConfigEnv } from "vite";
-import react from "@vitejs/plugin-react-swc";
 import { VitePWA } from "vite-plugin-pwa";
-import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react-swc";
 import svgr from "vite-plugin-svgr";
 
 // https://vitejs.dev/config/
-export default ({ mode }: { mode: any }) => {
+export default ({ mode }: ConfigEnv) => {
   // early load .env file
-  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
   // import.meta.env.VITE_NAME available here with: process.env.VITE_NAME
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
 
   return defineConfig({
     base: "",