mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 08:49:13 +00:00
refactor(web): headlessui v2 (#1570)
* 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
GitHub
parent
0841a1ce7c
commit
7821f7fb2f
13 changed files with 139 additions and 180 deletions
|
|
@ -8,7 +8,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
|
|||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { toast } from "react-hot-toast";
|
||||
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 { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
|
||||
|
||||
|
|
@ -50,13 +50,11 @@ export function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
|
|||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" static className="fixed inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
|
||||
<Transition show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" static className="absolute inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<Dialog.Overlay className="absolute inset-0" />
|
||||
|
||||
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
|
||||
<Transition.Child
|
||||
<DialogPanel className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
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="flex items-start justify-between space-x-3">
|
||||
<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">
|
||||
Add new filter.
|
||||
</p>
|
||||
|
|
@ -165,10 +163,10 @@ export function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
|
|||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
</DialogPanel>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { Fragment } from "react";
|
|||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "react-hot-toast";
|
||||
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 { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
|
||||
|
||||
|
|
@ -45,13 +45,11 @@ export function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
|
|||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" static className="fixed inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
|
||||
<Transition show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" static className="absolute inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<Dialog.Overlay className="absolute inset-0"/>
|
||||
|
||||
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
|
||||
<Transition.Child
|
||||
<DialogPanel className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
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="flex items-start justify-between space-x-3">
|
||||
<div className="space-y-1">
|
||||
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Create API
|
||||
key</Dialog.Title>
|
||||
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Create API key</DialogTitle>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Add new API key.
|
||||
</p>
|
||||
|
|
@ -151,10 +148,10 @@ export function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
|
|||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
</DialogPanel>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
import { Fragment, useRef, useState, ReactElement } from "react";
|
||||
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 { Form, Formik, useFormikContext } from "formik";
|
||||
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="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">
|
||||
Manage max downloads.
|
||||
</p>
|
||||
|
|
@ -440,9 +440,9 @@ function FormFieldsRulesArr() {
|
|||
return (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2">
|
||||
<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
|
||||
</Dialog.Title>
|
||||
</DialogTitle>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Override download client to use. Can also be overridden per Filter Action.
|
||||
</p>
|
||||
|
|
@ -463,9 +463,9 @@ function FormFieldsRulesQbit() {
|
|||
return (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2">
|
||||
<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
|
||||
</Dialog.Title>
|
||||
</DialogTitle>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Manage max downloads etc.
|
||||
</p>
|
||||
|
|
@ -531,9 +531,9 @@ function FormFieldsRulesTransmission() {
|
|||
return (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2">
|
||||
<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
|
||||
</Dialog.Title>
|
||||
</DialogTitle>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Manage max downloads etc.
|
||||
</p>
|
||||
|
|
@ -750,7 +750,7 @@ export function DownloadClientAddForm({ isOpen, toggle }: formProps) {
|
|||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Transition show={isOpen} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
static
|
||||
|
|
@ -759,10 +759,8 @@ export function DownloadClientAddForm({ isOpen, toggle }: formProps) {
|
|||
onClose={toggle}
|
||||
>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<Dialog.Overlay className="absolute inset-0" />
|
||||
|
||||
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
|
||||
<Transition.Child
|
||||
<DialogPanel className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
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="flex items-start justify-between space-x-3">
|
||||
<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
|
||||
</Dialog.Title>
|
||||
</DialogTitle>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Add download client.
|
||||
</p>
|
||||
|
|
@ -837,11 +835,11 @@ export function DownloadClientAddForm({ isOpen, toggle }: formProps) {
|
|||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
</DialogPanel>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -934,11 +932,11 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: updateFormP
|
|||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Transition show={isOpen} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
static
|
||||
className="fixed inset-0 overflow-hidden"
|
||||
className="absolute inset-0 overflow-hidden"
|
||||
open={isOpen}
|
||||
onClose={toggle}
|
||||
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."
|
||||
/>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<Dialog.Overlay className="absolute inset-0" />
|
||||
|
||||
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
|
||||
<Transition.Child
|
||||
<DialogPanel className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
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="flex items-start justify-between space-x-3">
|
||||
<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
|
||||
</Dialog.Title>
|
||||
</DialogTitle>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Edit download client settings.
|
||||
</p>
|
||||
|
|
@ -1034,10 +1030,10 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: updateFormP
|
|||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
</DialogPanel>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Select from "react-select";
|
|||
import type { FieldProps } from "formik";
|
||||
import { Field, Form, Formik, FormikValues } from "formik";
|
||||
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 { DEBUG } from "@components/debug";
|
||||
|
|
@ -50,7 +50,7 @@ const IrcSettingFields = (ind: IndexerDefinition, indexer: string) => {
|
|||
{ind && ind.irc && ind.irc.settings && (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-5">
|
||||
<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">
|
||||
Networks and channels are configured automatically in the background.
|
||||
</p>
|
||||
|
|
@ -100,7 +100,7 @@ const TorznabFeedSettingFields = (ind: IndexerDefinition, indexer: string) => {
|
|||
{ind && ind.torznab && ind.torznab.settings && (
|
||||
<div className="">
|
||||
<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">
|
||||
Torznab feed
|
||||
</p>
|
||||
|
|
@ -141,7 +141,7 @@ const NewznabFeedSettingFields = (ind: IndexerDefinition, indexer: string) => {
|
|||
{ind && ind.newznab && ind.newznab.settings && (
|
||||
<div className="">
|
||||
<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">
|
||||
Newznab feed
|
||||
</p>
|
||||
|
|
@ -174,7 +174,7 @@ const RSSFeedSettingFields = (ind: IndexerDefinition, indexer: string) => {
|
|||
{ind && ind.rss && ind.rss.settings && (
|
||||
<div className="">
|
||||
<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">
|
||||
RSS feed
|
||||
</p>
|
||||
|
|
@ -422,13 +422,11 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
|
|||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" static className="fixed inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
|
||||
<Transition show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" static className="absolute inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<Dialog.Overlay className="absolute inset-0" />
|
||||
|
||||
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
|
||||
<Transition.Child
|
||||
<DialogPanel className="absolute inset-y-0 right-0 pl-10 sm:pl-0 max-w-full flex">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
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="flex items-start justify-between space-x-3">
|
||||
<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
|
||||
</Dialog.Title>
|
||||
</DialogTitle>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-200">
|
||||
Add indexer.
|
||||
</p>
|
||||
|
|
@ -594,12 +592,11 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
|
|||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
</DialogPanel>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import type { FieldArrayRenderProps } from "formik";
|
|||
import { Field, FieldArray, FormikErrors, FormikValues } from "formik";
|
||||
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
|
||||
import Select from "react-select";
|
||||
import { Dialog } from "@headlessui/react";
|
||||
import { DialogTitle } from "@headlessui/react";
|
||||
|
||||
import { IrcAuthMechanismTypeOptions, OptionBasicTyped } from "@domain/constants";
|
||||
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="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">
|
||||
Channels to join.
|
||||
</p>
|
||||
|
|
@ -390,7 +390,7 @@ export function IrcNetworkUpdateForm({
|
|||
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-5">
|
||||
<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">
|
||||
Identify with SASL or NickServ. Most networks support SASL but some don't.
|
||||
</p>
|
||||
|
|
@ -420,7 +420,7 @@ export function IrcNetworkUpdateForm({
|
|||
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-5">
|
||||
<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">
|
||||
Channels are added when you setup IRC indexers. Do not edit unless you know what you are doing.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* 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 type { FieldProps } from "formik";
|
||||
import { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
|
||||
|
|
@ -28,7 +28,9 @@ function FormFieldsDiscord() {
|
|||
return (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-4">
|
||||
<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">
|
||||
{"Create a "}
|
||||
<ExternalLink
|
||||
|
|
@ -55,7 +57,9 @@ function FormFieldsNotifiarr() {
|
|||
return (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-4">
|
||||
<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">
|
||||
Enable the autobrr integration and optionally create a new API Key.
|
||||
</p>
|
||||
|
|
@ -74,7 +78,9 @@ function FormFieldsLunaSea() {
|
|||
return (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-4">
|
||||
<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">
|
||||
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>
|
||||
|
|
@ -104,7 +110,9 @@ function FormFieldsTelegram() {
|
|||
return (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-4">
|
||||
<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">
|
||||
{"Read how to "}
|
||||
<ExternalLink
|
||||
|
|
@ -146,7 +154,9 @@ function FormFieldsPushover() {
|
|||
return (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-4">
|
||||
<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">
|
||||
{"Register a new "}
|
||||
<ExternalLink
|
||||
|
|
@ -183,7 +193,9 @@ function FormFieldsGotify() {
|
|||
return (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-4">
|
||||
<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>
|
||||
|
||||
<TextFieldWide
|
||||
|
|
@ -207,7 +219,9 @@ function FormFieldsNtfy() {
|
|||
return (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-4">
|
||||
<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>
|
||||
|
||||
<TextFieldWide
|
||||
|
|
@ -249,7 +263,9 @@ function FormFieldsShoutrrr() {
|
|||
return (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-4">
|
||||
<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>
|
||||
|
||||
<TextFieldWide
|
||||
|
|
@ -330,19 +346,19 @@ export function NotificationAddForm({ isOpen, toggle }: AddProps) {
|
|||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Transition show={isOpen} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
static
|
||||
className="fixed inset-0 overflow-hidden"
|
||||
className="absolute inset-0 overflow-hidden"
|
||||
open={isOpen}
|
||||
onClose={toggle}
|
||||
>
|
||||
<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">
|
||||
<Transition.Child
|
||||
<div className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
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="flex items-start justify-between space-x-3">
|
||||
<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
|
||||
</Dialog.Title>
|
||||
</DialogTitle>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-200">
|
||||
Trigger notifications on different events.
|
||||
</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="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
|
||||
</Dialog.Title>
|
||||
</DialogTitle>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Select what events to trigger on
|
||||
</p>
|
||||
|
|
@ -507,11 +523,11 @@ export function NotificationAddForm({ isOpen, toggle }: AddProps) {
|
|||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -684,8 +700,9 @@ export function NotificationUpdateForm({ isOpen, toggle, notification }: UpdateP
|
|||
<SwitchGroupWide name="enabled" label="Enabled"/>
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 py-4">
|
||||
<div className="px-4 space-y-1">
|
||||
<Dialog.Title
|
||||
className="text-lg font-medium text-gray-900 dark:text-white">Events</Dialog.Title>
|
||||
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
|
||||
Events
|
||||
</DialogTitle>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Select what events to trigger on
|
||||
</p>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue