idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 08:49:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(web): headlessui v2 (#1570)

Browse source 
* refactor(web): fix build errors, SlideOver panels and forms

* refactor(web): fix build errors

* refactor(web): fix filter importer

* refactor(web): fix modals

* chore(web): bump pnpm

* refactor(web): pending component

* refactor(web): Dialog.Title to DialogTitle
This commit is contained in:
martylukyy 2024-06-18 14:51:04 +02:00 • committed by GitHub
parent 0841a1ce7c
commit 7821f7fb2f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 139 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/index.html
View file

@ -52,7 +52,7 @@
</head> </head>
<body class="bg-color"> <body class="bg-color">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" class="pattern"></div> <div id="root" class="pattern h-screen"></div>
<script type="module" src="./src/index.tsx"></script> <script type="module" src="./src/index.tsx"></script>
</body> </body>
</html> </html>

2
web/package.json
View file

@ -4,7 +4,7 @@
"type": "module", "type": "module",
"private": true, "private": true,
"homepage": ".", "homepage": ".",
"packageManager": "pnpm@9.0.2", "packageManager": "pnpm@9.1.4",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc && vite build", "build": "tsc && vite build",

56
web/src/components/modals/index.tsx
View file

@ -5,7 +5,7 @@
import { FC, Fragment, MutableRefObject, useState } from "react"; import { FC, Fragment, MutableRefObject, useState } from "react";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
import { ExclamationTriangleIcon } from "@heroicons/react/24/solid"; import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
import { RingResizeSpinner } from "@components/Icons"; import { RingResizeSpinner } from "@components/Icons";
@ -42,9 +42,9 @@ const ModalUpper = ({ title, text }: ModalUpperProps) => (
<div className="sm:flex sm:items-start"> <div className="sm:flex sm:items-start">
<ExclamationTriangleIcon className="h-16 w-16 text-red-500 dark:text-red-500" aria-hidden="true" /> <ExclamationTriangleIcon className="h-16 w-16 text-red-500 dark:text-red-500" aria-hidden="true" />
<div className="mt-3 text-left sm:mt-0 sm:ml-4 sm:pr-8 max-w-full"> <div className="mt-3 text-left sm:mt-0 sm:ml-4 sm:pr-8 max-w-full">
<Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900 dark:text-white break-words"> <DialogTitle as="h3" className="text-lg leading-6 font-medium text-gray-900 dark:text-white break-words">
{title} {title}
</Dialog.Title> </DialogTitle>
<div className="mt-2"> <div className="mt-2">
<p className="text-sm text-gray-500 dark:text-gray-300"> <p className="text-sm text-gray-500 dark:text-gray-300">
{text} {text}
@ -90,32 +90,20 @@ const ModalLower = ({ isOpen, isLoading, toggle, deleteAction }: ModalLowerProps
); );
export const DeleteModal: FC<DeleteModalProps> = (props: DeleteModalProps) => ( export const DeleteModal: FC<DeleteModalProps> = (props: DeleteModalProps) => (
<Transition.Root show={props.isOpen} as={Fragment}> <Transition show={props.isOpen} as={Fragment}>
<Dialog <Dialog
as="div" as="div"
static static
className="fixed z-10 inset-0 overflow-y-auto" className="fixed z-10 inset-0 overflow-y-auto bg-gray-700/60 dark:bg-black/60 transition-opacity"
initialFocus={props.buttonRef} initialFocus={props.buttonRef}
open={props.isOpen} open={props.isOpen}
onClose={props.toggle} onClose={props.toggle}
> >
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-700/60 dark:bg-black/60 transition-opacity" />
</Transition.Child>
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"> <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
&#8203; &#8203;
</span> </span>
<Transition.Child <TransitionChild
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@ -124,14 +112,14 @@ export const DeleteModal: FC<DeleteModalProps> = (props: DeleteModalProps) => (
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<div className="inline-block align-bottom rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> <DialogPanel className="inline-block align-bottom rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<ModalUpper {...props} /> <ModalUpper {...props} />
<ModalLower {...props} /> <ModalLower {...props} />
</div> </DialogPanel>
</Transition.Child> </TransitionChild>
</div> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition>
); );
export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps) => { export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps) => {
@ -170,7 +158,7 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
}; };
return ( return (
<Transition.Root show={props.isOpen} as={Fragment}> <Transition show={props.isOpen} as={Fragment}>
<Dialog <Dialog
as="div" as="div"
static static
@ -180,19 +168,7 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
onClose={handleClose} onClose={handleClose}
> >
<div className="grid place-items-center min-h-screen"> <div className="grid place-items-center min-h-screen">
<Transition.Child <TransitionChild
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-700/60 dark:bg-black/60 transition-opacity" />
</Transition.Child>
<Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@ -201,7 +177,7 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<div className="inline-block align-bottom border border-transparent dark:border-gray-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> <DialogPanel className="inline-block align-bottom border border-transparent dark:border-gray-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<ModalUpper title={props.title} text={props.text} /> <ModalUpper title={props.title} text={props.text} />
<div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 sm:px-6 flex justify-center"> <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 sm:px-6 flex justify-center">
@ -244,10 +220,10 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
</> </>
)} )}
</div> </div>
</div> </DialogPanel>
</Transition.Child> </TransitionChild>
</div> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition>
); );
}; };

18
web/src/components/panels/index.tsx
View file

@ -5,7 +5,7 @@
import { Fragment, useRef, ReactNode, ReactElement } from "react"; import { Fragment, useRef, ReactNode, ReactElement } from "react";
import { XMarkIcon } from "@heroicons/react/24/solid"; import { XMarkIcon } from "@heroicons/react/24/solid";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
import { Form, Formik } from "formik"; import { Form, Formik } from "formik";
import type { FormikValues, FormikProps } from "formik"; import type { FormikValues, FormikProps } from "formik";
@ -53,7 +53,7 @@ function SlideOver<DataType extends FormikValues>({
const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false); const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
return ( return (
<Transition.Root show={isOpen} as={Fragment}> <Transition show={isOpen} as={Fragment}>
<Dialog as="div" static className="fixed inset-0 overflow-hidden" open={isOpen} onClose={toggle}> <Dialog as="div" static className="fixed inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
{deleteAction && ( {deleteAction && (
<DeleteModal <DeleteModal
@ -68,16 +68,14 @@ function SlideOver<DataType extends FormikValues>({
)} )}
<div className="absolute inset-0 overflow-hidden"> <div className="absolute inset-0 overflow-hidden">
<Dialog.Overlay className="absolute inset-0" /> <DialogPanel
<div
className="fixed inset-y-0 right-0 max-w-full flex" className="fixed inset-y-0 right-0 max-w-full flex"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}} }}
> >
<Transition.Child <TransitionChild
as={Fragment} as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full" enterFrom="translate-x-full"
@ -107,7 +105,7 @@ function SlideOver<DataType extends FormikValues>({
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6"> <div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
<div className="flex items-start justify-between space-x-3"> <div className="flex items-start justify-between space-x-3">
<div className="space-y-1"> <div className="space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">{type === "CREATE" ? "Create" : "Update"} {title}</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">{type === "CREATE" ? "Create" : "Update"} {title}</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
{type === "CREATE" ? "Create" : "Update"} {title}. {type === "CREATE" ? "Create" : "Update"} {title}.
</p> </p>
@ -225,11 +223,11 @@ function SlideOver<DataType extends FormikValues>({
</Formik> </Formik>
</div> </div>
</Transition.Child> </TransitionChild>
</div> </DialogPanel>
</div> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition>
); );
} }

5
web/src/components/tooltips/Tooltip.tsx
View file

@ -116,11 +116,10 @@ export const Tooltip = ({
</div> </div>
<Transition <Transition
show={isTooltipVisible || visible} show={isTooltipVisible || visible}
className="z-10" enter="transition-opacity duration-200 ease-out"
enter="transition duration-200 ease-out"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
leave="transition duration-200 ease-in" leave="transition-opacity duration-200 ease-in"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >

20
web/src/forms/filters/FilterAddForm.tsx
View file

@ -8,7 +8,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useNavigate } from "@tanstack/react-router"; import { useNavigate } from "@tanstack/react-router";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { XMarkIcon } from "@heroicons/react/24/solid"; import { XMarkIcon } from "@heroicons/react/24/solid";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
import type { FieldProps } from "formik"; import type { FieldProps } from "formik";
import { Field, Form, Formik, FormikErrors, FormikValues } from "formik"; import { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
@ -50,13 +50,11 @@ export function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
}; };
return ( return (
<Transition.Root show={isOpen} as={Fragment}> <Transition show={isOpen} as={Fragment}>
<Dialog as="div" static className="fixed inset-0 overflow-hidden" open={isOpen} onClose={toggle}> <Dialog as="div" static className="absolute inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
<div className="absolute inset-0 overflow-hidden"> <div className="absolute inset-0 overflow-hidden">
<Dialog.Overlay className="absolute inset-0" /> <DialogPanel className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<TransitionChild
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<Transition.Child
as={Fragment} as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full" enterFrom="translate-x-full"
@ -86,7 +84,7 @@ export function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6"> <div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
<div className="flex items-start justify-between space-x-3"> <div className="flex items-start justify-between space-x-3">
<div className="space-y-1"> <div className="space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Create filter</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Create filter</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Add new filter. Add new filter.
</p> </p>
@ -165,10 +163,10 @@ export function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
)} )}
</Formik> </Formik>
</div> </div>
</Transition.Child> </TransitionChild>
</div> </DialogPanel>
</div> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition>
); );
} }

21
web/src/forms/settings/APIKeyAddForm.tsx
View file

@ -7,7 +7,7 @@ import { Fragment } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { XMarkIcon } from "@heroicons/react/24/solid"; import { XMarkIcon } from "@heroicons/react/24/solid";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
import type { FieldProps } from "formik"; import type { FieldProps } from "formik";
import { Field, Form, Formik, FormikErrors, FormikValues } from "formik"; import { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
@ -45,13 +45,11 @@ export function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
}; };
return ( return (
<Transition.Root show={isOpen} as={Fragment}> <Transition show={isOpen} as={Fragment}>
<Dialog as="div" static className="fixed inset-0 overflow-hidden" open={isOpen} onClose={toggle}> <Dialog as="div" static className="absolute inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
<div className="absolute inset-0 overflow-hidden"> <div className="absolute inset-0 overflow-hidden">
<Dialog.Overlay className="absolute inset-0"/> <DialogPanel className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<TransitionChild
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<Transition.Child
as={Fragment} as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full" enterFrom="translate-x-full"
@ -75,8 +73,7 @@ export function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6"> <div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
<div className="flex items-start justify-between space-x-3"> <div className="flex items-start justify-between space-x-3">
<div className="space-y-1"> <div className="space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Create API <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Create API key</DialogTitle>
key</Dialog.Title>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Add new API key. Add new API key.
</p> </p>
@ -151,10 +148,10 @@ export function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
)} )}
</Formik> </Formik>
</div> </div>
</Transition.Child> </TransitionChild>
</div> </DialogPanel>
</div> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition>
); );
} }

54
web/src/forms/settings/DownloadClientForms.tsx
View file

@ -5,7 +5,7 @@
import { Fragment, useRef, useState, ReactElement } from "react"; import { Fragment, useRef, useState, ReactElement } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
import { XMarkIcon } from "@heroicons/react/24/solid"; import { XMarkIcon } from "@heroicons/react/24/solid";
import { Form, Formik, useFormikContext } from "formik"; import { Form, Formik, useFormikContext } from "formik";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
@ -405,7 +405,7 @@ function FormFieldsRulesBasic() {
<div className="border-t border-gray-200 dark:border-gray-700 py-5"> <div className="border-t border-gray-200 dark:border-gray-700 py-5">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Rules</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Rules</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Manage max downloads. Manage max downloads.
</p> </p>
@ -440,9 +440,9 @@ function FormFieldsRulesArr() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2"> <div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Download Client Download Client
</Dialog.Title> </DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Override download client to use. Can also be overridden per Filter Action. Override download client to use. Can also be overridden per Filter Action.
</p> </p>
@ -463,9 +463,9 @@ function FormFieldsRulesQbit() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2"> <div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Rules Rules
</Dialog.Title> </DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Manage max downloads etc. Manage max downloads etc.
</p> </p>
@ -531,9 +531,9 @@ function FormFieldsRulesTransmission() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2"> <div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Rules Rules
</Dialog.Title> </DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Manage max downloads etc. Manage max downloads etc.
</p> </p>
@ -750,7 +750,7 @@ export function DownloadClientAddForm({ isOpen, toggle }: formProps) {
}; };
return ( return (
<Transition.Root show={isOpen} as={Fragment}> <Transition show={isOpen} as={Fragment}>
<Dialog <Dialog
as="div" as="div"
static static
@ -759,10 +759,8 @@ export function DownloadClientAddForm({ isOpen, toggle }: formProps) {
onClose={toggle} onClose={toggle}
> >
<div className="absolute inset-0 overflow-hidden"> <div className="absolute inset-0 overflow-hidden">
<Dialog.Overlay className="absolute inset-0" /> <DialogPanel className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<TransitionChild
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<Transition.Child
as={Fragment} as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full" enterFrom="translate-x-full"
@ -785,9 +783,9 @@ export function DownloadClientAddForm({ isOpen, toggle }: formProps) {
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6"> <div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
<div className="flex items-start justify-between space-x-3"> <div className="flex items-start justify-between space-x-3">
<div className="space-y-1"> <div className="space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Add client Add client
</Dialog.Title> </DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Add download client. Add download client.
</p> </p>
@ -837,11 +835,11 @@ export function DownloadClientAddForm({ isOpen, toggle }: formProps) {
)} )}
</Formik> </Formik>
</div> </div>
</Transition.Child> </TransitionChild>
</div> </DialogPanel>
</div> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition>
); );
} }
@ -934,11 +932,11 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: updateFormP
}; };
return ( return (
<Transition.Root show={isOpen} as={Fragment}> <Transition show={isOpen} as={Fragment}>
<Dialog <Dialog
as="div" as="div"
static static
className="fixed inset-0 overflow-hidden" className="absolute inset-0 overflow-hidden"
open={isOpen} open={isOpen}
onClose={toggle} onClose={toggle}
initialFocus={cancelButtonRef} initialFocus={cancelButtonRef}
@ -953,10 +951,8 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: updateFormP
text="Are you sure you want to remove this download client? This action cannot be undone." text="Are you sure you want to remove this download client? This action cannot be undone."
/> />
<div className="absolute inset-0 overflow-hidden"> <div className="absolute inset-0 overflow-hidden">
<Dialog.Overlay className="absolute inset-0" /> <DialogPanel className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<TransitionChild
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<Transition.Child
as={Fragment} as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full" enterFrom="translate-x-full"
@ -980,9 +976,9 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: updateFormP
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6"> <div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
<div className="flex items-start justify-between space-x-3"> <div className="flex items-start justify-between space-x-3">
<div className="space-y-1"> <div className="space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Edit client Edit client
</Dialog.Title> </DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Edit download client settings. Edit download client settings.
</p> </p>
@ -1034,10 +1030,10 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: updateFormP
}} }}
</Formik> </Formik>
</div> </div>
</Transition.Child> </TransitionChild>
</div> </DialogPanel>
</div> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition>
); );
} }

31
web/src/forms/settings/IndexerForms.tsx
View file

@ -10,7 +10,7 @@ import Select from "react-select";
import type { FieldProps } from "formik"; import type { FieldProps } from "formik";
import { Field, Form, Formik, FormikValues } from "formik"; import { Field, Form, Formik, FormikValues } from "formik";
import { XMarkIcon } from "@heroicons/react/24/solid"; import { XMarkIcon } from "@heroicons/react/24/solid";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
import { classNames, sleep } from "@utils"; import { classNames, sleep } from "@utils";
import { DEBUG } from "@components/debug"; import { DEBUG } from "@components/debug";
@ -50,7 +50,7 @@ const IrcSettingFields = (ind: IndexerDefinition, indexer: string) => {
{ind && ind.irc && ind.irc.settings && ( {ind && ind.irc && ind.irc.settings && (
<div className="border-t border-gray-200 dark:border-gray-700 py-5"> <div className="border-t border-gray-200 dark:border-gray-700 py-5">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">IRC</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">IRC</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-200"> <p className="text-sm text-gray-500 dark:text-gray-200">
Networks and channels are configured automatically in the background. Networks and channels are configured automatically in the background.
</p> </p>
@ -100,7 +100,7 @@ const TorznabFeedSettingFields = (ind: IndexerDefinition, indexer: string) => {
{ind && ind.torznab && ind.torznab.settings && ( {ind && ind.torznab && ind.torznab.settings && (
<div className=""> <div className="">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Torznab</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Torznab</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-200"> <p className="text-sm text-gray-500 dark:text-gray-200">
Torznab feed Torznab feed
</p> </p>
@ -141,7 +141,7 @@ const NewznabFeedSettingFields = (ind: IndexerDefinition, indexer: string) => {
{ind && ind.newznab && ind.newznab.settings && ( {ind && ind.newznab && ind.newznab.settings && (
<div className=""> <div className="">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Newznab</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Newznab</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-200"> <p className="text-sm text-gray-500 dark:text-gray-200">
Newznab feed Newznab feed
</p> </p>
@ -174,7 +174,7 @@ const RSSFeedSettingFields = (ind: IndexerDefinition, indexer: string) => {
{ind && ind.rss && ind.rss.settings && ( {ind && ind.rss && ind.rss.settings && (
<div className=""> <div className="">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">RSS</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">RSS</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-200"> <p className="text-sm text-gray-500 dark:text-gray-200">
RSS feed RSS feed
</p> </p>
@ -422,13 +422,11 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
}; };
return ( return (
<Transition.Root show={isOpen} as={Fragment}> <Transition show={isOpen} as={Fragment}>
<Dialog as="div" static className="fixed inset-0 overflow-hidden" open={isOpen} onClose={toggle}> <Dialog as="div" static className="absolute inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
<div className="absolute inset-0 overflow-hidden"> <div className="absolute inset-0 overflow-hidden">
<Dialog.Overlay className="absolute inset-0" /> <DialogPanel className="absolute inset-y-0 right-0 pl-10 sm:pl-0 max-w-full flex">
<TransitionChild
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<Transition.Child
as={Fragment} as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full" enterFrom="translate-x-full"
@ -456,9 +454,9 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6"> <div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
<div className="flex items-start justify-between space-x-3"> <div className="flex items-start justify-between space-x-3">
<div className="space-y-1"> <div className="space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Add indexer Add indexer
</Dialog.Title> </DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-200"> <p className="text-sm text-gray-500 dark:text-gray-200">
Add indexer. Add indexer.
</p> </p>
@ -594,12 +592,11 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
)} )}
</Formik> </Formik>
</div> </div>
</TransitionChild>
</Transition.Child> </DialogPanel>
</div>
</div> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition>
); );
} }

8
web/src/forms/settings/IrcForms.tsx
View file

@ -11,7 +11,7 @@ import type { FieldArrayRenderProps } from "formik";
import { Field, FieldArray, FormikErrors, FormikValues } from "formik"; import { Field, FieldArray, FormikErrors, FormikValues } from "formik";
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import Select from "react-select"; import Select from "react-select";
import { Dialog } from "@headlessui/react"; import { DialogTitle } from "@headlessui/react";
import { IrcAuthMechanismTypeOptions, OptionBasicTyped } from "@domain/constants"; import { IrcAuthMechanismTypeOptions, OptionBasicTyped } from "@domain/constants";
import { APIClient } from "@api/APIClient"; import { APIClient } from "@api/APIClient";
@ -219,7 +219,7 @@ export function IrcNetworkAddForm({ isOpen, toggle }: AddFormProps) {
<div className="border-t border-gray-200 dark:border-gray-700 py-5"> <div className="border-t border-gray-200 dark:border-gray-700 py-5">
<div className="px-4 space-y-1 mb-8"> <div className="px-4 space-y-1 mb-8">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Channels</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Channels</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Channels to join. Channels to join.
</p> </p>
@ -390,7 +390,7 @@ export function IrcNetworkUpdateForm({
<div className="border-t border-gray-200 dark:border-gray-700 py-5"> <div className="border-t border-gray-200 dark:border-gray-700 py-5">
<div className="px-4 space-y-1 mb-8"> <div className="px-4 space-y-1 mb-8">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Identification</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Identification</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Identify with SASL or NickServ. Most networks support SASL but some don't. Identify with SASL or NickServ. Most networks support SASL but some don't.
</p> </p>
@ -420,7 +420,7 @@ export function IrcNetworkUpdateForm({
<div className="border-t border-gray-200 dark:border-gray-700 py-5"> <div className="border-t border-gray-200 dark:border-gray-700 py-5">
<div className="px-4 space-y-1 mb-8"> <div className="px-4 space-y-1 mb-8">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Channels</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Channels</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Channels are added when you setup IRC indexers. Do not edit unless you know what you are doing. Channels are added when you setup IRC indexers. Do not edit unless you know what you are doing.
</p> </p>

61
web/src/forms/settings/NotificationForms.tsx
View file

@ -3,7 +3,7 @@
* SPDX-License-Identifier: GPL-2.0-or-later * SPDX-License-Identifier: GPL-2.0-or-later
*/ */
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
import { Fragment } from "react"; import { Fragment } from "react";
import type { FieldProps } from "formik"; import type { FieldProps } from "formik";
import { Field, Form, Formik, FormikErrors, FormikValues } from "formik"; import { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
@ -28,7 +28,9 @@ function FormFieldsDiscord() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Settings</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings
</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
{"Create a "} {"Create a "}
<ExternalLink <ExternalLink
@ -55,7 +57,9 @@ function FormFieldsNotifiarr() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Settings</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings
</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Enable the autobrr integration and optionally create a new API Key. Enable the autobrr integration and optionally create a new API Key.
</p> </p>
@ -74,7 +78,9 @@ function FormFieldsLunaSea() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Settings</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings
</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
LunaSea offers notifications across all devices linked to your account (User-Based) or to a single device without an account, using a unique webhook per device (Device-Based). LunaSea offers notifications across all devices linked to your account (User-Based) or to a single device without an account, using a unique webhook per device (Device-Based).
</p> </p>
@ -104,7 +110,9 @@ function FormFieldsTelegram() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Settings</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings
</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
{"Read how to "} {"Read how to "}
<ExternalLink <ExternalLink
@ -146,7 +154,9 @@ function FormFieldsPushover() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Settings</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings
</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
{"Register a new "} {"Register a new "}
<ExternalLink <ExternalLink
@ -183,7 +193,9 @@ function FormFieldsGotify() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Settings</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings
</DialogTitle>
</div> </div>
<TextFieldWide <TextFieldWide
@ -207,7 +219,9 @@ function FormFieldsNtfy() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Settings</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings
</DialogTitle>
</div> </div>
<TextFieldWide <TextFieldWide
@ -249,7 +263,9 @@ function FormFieldsShoutrrr() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Settings</Dialog.Title> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings
</DialogTitle>
</div> </div>
<TextFieldWide <TextFieldWide
@ -330,19 +346,19 @@ export function NotificationAddForm({ isOpen, toggle }: AddProps) {
}; };
return ( return (
<Transition.Root show={isOpen} as={Fragment}> <Transition show={isOpen} as={Fragment}>
<Dialog <Dialog
as="div" as="div"
static static
className="fixed inset-0 overflow-hidden" className="absolute inset-0 overflow-hidden"
open={isOpen} open={isOpen}
onClose={toggle} onClose={toggle}
> >
<div className="absolute inset-0 overflow-hidden"> <div className="absolute inset-0 overflow-hidden">
<Dialog.Overlay className="absolute inset-0" /> <DialogPanel className="absolute inset-0" />
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16"> <div className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<Transition.Child <TransitionChild
as={Fragment} as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full" enterFrom="translate-x-full"
@ -370,9 +386,9 @@ export function NotificationAddForm({ isOpen, toggle }: AddProps) {
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6"> <div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
<div className="flex items-start justify-between space-x-3"> <div className="flex items-start justify-between space-x-3">
<div className="space-y-1"> <div className="space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Add Notifications Add Notifications
</Dialog.Title> </DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-200"> <p className="text-sm text-gray-500 dark:text-gray-200">
Trigger notifications on different events. Trigger notifications on different events.
</p> </p>
@ -461,9 +477,9 @@ export function NotificationAddForm({ isOpen, toggle }: AddProps) {
<div className="border-t mt-2 border-gray-200 dark:border-gray-700 py-4"> <div className="border-t mt-2 border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Events Events
</Dialog.Title> </DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Select what events to trigger on Select what events to trigger on
</p> </p>
@ -507,11 +523,11 @@ export function NotificationAddForm({ isOpen, toggle }: AddProps) {
)} )}
</Formik> </Formik>
</div> </div>
</Transition.Child> </TransitionChild>
</div> </div>
</div> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition>
); );
} }
@ -684,8 +700,9 @@ export function NotificationUpdateForm({ isOpen, toggle, notification }: UpdateP
<SwitchGroupWide name="enabled" label="Enabled"/> <SwitchGroupWide name="enabled" label="Enabled"/>
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4 space-y-1">
<Dialog.Title <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
className="text-lg font-medium text-gray-900 dark:text-white">Events</Dialog.Title> Events
</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Select what events to trigger on Select what events to trigger on
</p> </p>

9
web/src/routes.tsx
View file

@ -336,13 +336,6 @@ export const RootRoute = createRootRouteWithContext<{
}>()({ }>()({
component: RootComponent, component: RootComponent,
notFoundComponent: NotFound, notFoundComponent: NotFound,
pendingComponent: () => (
<div className="h-screen">
<div className="flex flex-grow items-center justify-center h-screen sm:h-3/5">
<RingResizeSpinner className="text-blue-500 size-24"/>
</div>
</div>
),
}); });
const filterRouteTree = FiltersRoute.addChildren([FilterIndexRoute, FilterGetByIdRoute.addChildren([FilterGeneralRoute, FilterMoviesTvRoute, FilterMusicRoute, FilterAdvancedRoute, FilterExternalRoute, FilterActionsRoute])]) const filterRouteTree = FiltersRoute.addChildren([FilterIndexRoute, FilterGetByIdRoute.addChildren([FilterGeneralRoute, FilterMoviesTvRoute, FilterMusicRoute, FilterAdvancedRoute, FilterExternalRoute, FilterActionsRoute])])
@ -357,7 +350,7 @@ const routeTree = RootRoute.addChildren([
export const Router = createRouter({ export const Router = createRouter({
routeTree, routeTree,
defaultPendingComponent: () => ( defaultPendingComponent: () => (
<div className="flex flex-grow items-center justify-center col-span-9"> <div className="flex flex-grow items-center justify-center col-span-9 h-full">
<RingResizeSpinner className="text-blue-500 size-24"/> <RingResizeSpinner className="text-blue-500 size-24"/>
</div> </div>
), ),

32
web/src/screens/filters/Importer.tsx
View file

@ -4,7 +4,7 @@
*/ */
import { Fragment, useRef, useState } from "react"; import { Fragment, useRef, useState } from "react";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
@ -27,9 +27,9 @@ interface ModalLowerProps extends ImporterProps {
const ModalUpper = ({ children }: { children: React.ReactNode; }) => ( const ModalUpper = ({ children }: { children: React.ReactNode; }) => (
<div className="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:py-6 sm:px-4 sm:pb-4"> <div className="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:py-6 sm:px-4 sm:pb-4">
<div className="mt-3 text-left sm:mt-0 max-w-full"> <div className="mt-3 text-left sm:mt-0 max-w-full">
<Dialog.Title as="h3" className="mb-3 text-lg leading-6 font-medium text-gray-900 dark:text-white break-words"> <DialogTitle as="h3" className="mb-3 text-lg leading-6 font-medium text-gray-900 dark:text-white break-words">
Import filter (in JSON or autodl-irssi format) Import filter (in JSON or autodl-irssi format)
</Dialog.Title> </DialogTitle>
{children} {children}
</div> </div>
</div> </div>
@ -221,32 +221,20 @@ export const Importer = ({
}; };
return ( return (
<Transition.Root show={isOpen} as={Fragment}> <Transition show={isOpen} as={Fragment}>
<Dialog <Dialog
as="div" as="div"
static static
className="fixed z-10 inset-0 overflow-y-auto" className="fixed z-10 inset-0 overflow-y-auto bg-gray-700/60 dark:bg-black/60 transition-opacity"
initialFocus={textAreaRef} initialFocus={textAreaRef}
open={isOpen} open={isOpen}
onClose={() => setIsOpen(false)} onClose={() => setIsOpen(false)}
> >
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-700/60 dark:bg-black/60 transition-opacity" />
</Transition.Child>
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"> <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
&#8203; &#8203;
</span> </span>
<Transition.Child <TransitionChild
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@ -255,7 +243,7 @@ export const Importer = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<div className="inline-block align-bottom border border-transparent dark:border-gray-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle w-full sm:max-w-6xl"> <DialogPanel className="inline-block align-bottom border border-transparent dark:border-gray-700 rounded-lg text-left overflow-hidden shadow-xl transform transition sm:my-8 sm:align-middle w-full sm:max-w-6xl">
<ModalUpper> <ModalUpper>
<textarea <textarea
className="form-input resize-y block w-full shadow-sm sm:text-sm rounded-md border py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100" className="form-input resize-y block w-full shadow-sm sm:text-sm rounded-md border py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100"
@ -287,10 +275,10 @@ export const Importer = ({
) : null} ) : null}
</ModalUpper> </ModalUpper>
<ModalLower isOpen={isOpen} setIsOpen={setIsOpen} onImportClick={handleImportJson} /> <ModalLower isOpen={isOpen} setIsOpen={setIsOpen} onImportClick={handleImportJson} />
</div> </DialogPanel>
</Transition.Child> </TransitionChild>
</div> </div>
</Dialog> </Dialog>
</Transition.Root> </Transition>
); );
}; };