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

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,20 +21,20 @@ interface apiKeyAddFormProps {
   toggle: () => void;
 }
 
-function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
+export function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
   const queryClient = useQueryClient();
 
   const mutation = useMutation({
     mutationFn: (apikey: APIKey) => APIClient.apikeys.create(apikey),
     onSuccess: (_, key) => {
       queryClient.invalidateQueries({ queryKey: apiKeys.lists() });
-      
+
       toast.custom((t) => <Toast type="success" body={`API key ${key.name} was added`} t={t}/>);
 
       toggle();
     }
   });
-  
+
   const handleSubmit = (data: unknown) => mutation.mutate(data as APIKey);
   const validate = (values: FormikValues) => {
     const errors = {} as FormikErrors<FormikValues>;
@@ -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 {
@@ -181,7 +181,7 @@ function FormFieldsPorla() {
         required={true}
       />
 
-      
+
       <SwitchGroupWide name="tls" label="TLS" />
 
       <PasswordFieldWide name="settings.apikey" label="Auth token" required={true}/>
@@ -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";
@@ -25,8 +25,8 @@ import { feedKeys } from "@screens/settings/Feed";
 import { indexerKeys } from "@screens/settings/Indexer";
 
 const Input = (props: InputProps) => (
-  <components.Input 
-    {...props} 
+  <components.Input
+    {...props}
     inputClassName="outline-none border-none shadow-none focus:ring-transparent"
     className="text-gray-400 dark:text-gray-100"
     children={props.children}
@@ -34,15 +34,15 @@ const Input = (props: InputProps) => (
 );
 
 const Control = (props: ControlProps) => (
-  <components.Control 
-    {...props} 
+  <components.Control
+    {...props}
     className="p-1 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
     children={props.children}
   />
 );
 
 const Menu = (props: MenuProps) => (
-  <components.Menu 
+  <components.Menu
     {...props}
     className="dark:bg-gray-800 border border-gray-300 dark:border-gray-700 dark:text-gray-400 rounded-md shadow-sm cursor-pointer"
     children={props.children}
@@ -50,7 +50,7 @@ const Menu = (props: MenuProps) => (
 );
 
 const Option = (props: OptionProps) => (
-  <components.Option 
+  <components.Option
     {...props}
     className="dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-900 dark:focus:bg-gray-900 cursor-pointer"
     children={props.children}
@@ -521,7 +521,7 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
                                     options={data && data.sort((a, b) => a.name.localeCompare(b.name)).map(v => ({
                                       label: v.name,
                                       value: v.identifier
-                                    }))} 
+                                    }))}
                                   />
                                 )}
                               </Field>
@@ -634,7 +634,7 @@ function TestApiButton({ values, show }: TestApiButtonProps) {
       id: values.id,
       api_key: values.settings.api_key
     };
-    
+
     if (values.settings.api_user) {
       req.api_user = values.settings.api_user;
     }
@@ -833,4 +833,4 @@ export function IndexerUpdateForm({ isOpen, toggle, indexer }: UpdateProps) {
       )}
     </SlideOver>
   );
-}
+}