enhancement(web): add react suspense and improve DX (#1089)

* add react suspense, fix broken stuff, clean up code, improve DX

enhancement: added react suspense + spinner to show loading (still can be added in certain places)
chore: cleaned up Header/NavBar code
chore: cleaned up DeleteModal code
chore: cleaned up other relevant code
enhancement: changed remove button style to be much more pleasant (see e.g. filter tabs)
fix: made active tab on filters page to be blue (as it should've been) when active
fix: fixed ghost delimiter which was only visible when DeleteModal was active in FormButtonGroup
chore: removed most of linter warnings/errors
fix: fixed incorrect/double modal transition in FilterExternalItem
fix: fixed incorrect z-height on Options popover in Settings/IRC (would've been visible when Add new was clicked)
enhancement: improved robustness of all Context classes to support seamless new-feature expansion (#866)
enhancement: improved expand logic (see #994 comments)

* reverted irc expand view to previous design

* forgot to propagate previous z-height fix

* jinxed it

* add license header to new files

---------

Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>
Co-authored-by: Kyle Sanderson <kyle.leet@gmail.com>

web/src/components/SectionLoader.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 - 2023, Ludvig Lundgren and the autobrr contributors.
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import { RingResizeSpinner } from "@components/Icons";
+import { classNames } from "@utils";
+
+const SIZE = {
+  small: "w-6 h-6",
+  medium: "w-8 h-8",
+  large: "w-12 h-12",
+  xlarge: "w-24 h-24"
+} as const;
+
+interface SectionLoaderProps {
+  $size: keyof typeof SIZE;
+}
+
+export const SectionLoader = ({ $size }: SectionLoaderProps) => {
+  if ($size === "xlarge") {
+    return (
+      <div className="max-w-screen-xl mx-auto pb-6 px-4 sm:px-6 lg:pb-16 lg:px-8">
+        <RingResizeSpinner className={classNames(SIZE[$size], "mx-auto my-36 text-blue-500")} />
+      </div>
+    );
+  } else {
+    return (
+      <RingResizeSpinner className={classNames(SIZE[$size], "text-blue-500")} />
+    );
+  }
+}

web/src/components/header/Header.tsx

@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) 2021 - 2023, Ludvig Lundgren and the autobrr contributors.
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import toast from "react-hot-toast";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Disclosure } from "@headlessui/react";
+import { Bars3Icon, XMarkIcon, MegaphoneIcon } from "@heroicons/react/24/outline";
+
+import { APIClient } from "@api/APIClient";
+import { AuthContext } from "@utils/Context";
+import Toast from "@components/notifications/Toast";
+
+import { LeftNav } from "./LeftNav";
+import { RightNav } from "./RightNav";
+import { MobileNav } from "./MobileNav";
+
+export const Header = () => {
+  const { data } = useQuery({
+    queryKey: ["updates"],
+    queryFn: () => APIClient.updates.getLatestRelease(),
+    retry: false,
+    refetchOnWindowFocus: false,
+    onError: err => console.log(err)
+  });
+
+  const logoutMutation = useMutation({
+    mutationFn: APIClient.auth.logout,
+    onSuccess: () => {
+      AuthContext.reset();
+      toast.custom((t) => (
+        <Toast type="success" body="You have been logged out. Goodbye!" t={t} />
+      ));
+    }
+  });
+
+  return (
+    <Disclosure
+      as="nav"
+      className="bg-gradient-to-b from-gray-100 dark:from-[#141414]"
+    >
+      {({ open }) => (
+        <>
+          <div className="max-w-screen-xl mx-auto sm:px-6 lg:px-8">
+            <div className="border-b border-gray-300 dark:border-gray-700">
+              <div className="flex items-center justify-between h-16 px-4 sm:px-0">
+                <LeftNav />
+                <RightNav logoutMutation={logoutMutation.mutate} />
+                <div className="-mr-2 flex sm:hidden">
+                  {/* Mobile menu button */}
+                  <Disclosure.Button className="bg-gray-200 dark:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-400 hover:text-white hover:bg-gray-700">
+                    <span className="sr-only">Open main menu</span>
+                    {open ? (
+                      <XMarkIcon
+                        className="block h-6 w-6"
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <Bars3Icon
+                        className="block h-6 w-6"
+                        aria-hidden="true"
+                      />
+                    )}
+                  </Disclosure.Button>
+                </div>
+              </div>
+            </div>
+
+            {data && data.html_url && (
+              <a href={data.html_url} target="_blank" rel="noopener noreferrer">
+                <div className="flex mt-4 py-2 bg-blue-500 rounded justify-center">
+                  <MegaphoneIcon className="h-6 w-6 text-blue-100" />
+                  <span className="text-blue-100 font-medium mx-3">New update available!</span>
+                  <span className="inline-flex items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-sm font-medium text-blue-800">{data?.name}</span>
+                </div>
+              </a>
+            )}
+          </div>
+
+          <MobileNav logoutMutation={logoutMutation.mutate} />
+        </>
+      )}
+    </Disclosure>
+  )
+}

web/src/components/header/LeftNav.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2021 - 2023, Ludvig Lundgren and the autobrr contributors.
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import { Link, NavLink } from "react-router-dom";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+
+import { classNames } from "@utils";
+import { ReactComponent as Logo } from "@app/logo.svg";
+
+import { NAV_ROUTES } from "./_shared";
+
+export const LeftNav = () => (
+  <div className="flex items-center">
+    <div className="flex-shrink-0 flex items-center">
+      <Link to="/">
+        <Logo className="h-10" />
+      </Link>
+    </div>
+    <div className="sm:ml-3 hidden sm:block">
+      <div className="flex items-baseline space-x-4">
+        {NAV_ROUTES.map((item, itemIdx) => (
+          <NavLink
+            key={item.name + itemIdx}
+            to={item.path}
+            className={({ isActive }) =>
+              classNames(
+                "hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-2xl text-sm font-medium",
+                "transition-colors duration-200",
+                isActive
+                  ? "text-black dark:text-gray-50 font-bold"
+                  : "text-gray-600 dark:text-gray-500"
+              )
+            }
+            end={item.path === "/"}
+          >
+            {item.name}
+          </NavLink>
+        ))}
+        <a
+          rel="noopener noreferrer"
+          target="_blank"
+          href="https://autobrr.com"
+          className={classNames(
+            "text-gray-600 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-2xl text-sm font-medium",
+            "transition-colors duration-200 flex items-center justify-center"
+          )}
+        >
+          Docs
+          <ArrowTopRightOnSquareIcon
+            className="inline ml-1 h-5 w-5"
+            aria-hidden="true"
+          />
+        </a>
+      </div>
+    </div>
+  </div>
+);

web/src/components/header/MobileNav.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 - 2023, Ludvig Lundgren and the autobrr contributors.
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import { NavLink } from "react-router-dom";
+import { Disclosure } from "@headlessui/react";
+
+import { classNames } from "@utils";
+
+import { NAV_ROUTES } from "./_shared";
+import type { RightNavProps } from "./_shared";
+
+export const MobileNav = (props: RightNavProps) => (
+  <Disclosure.Panel className="border-b border-gray-300 dark:border-gray-700 md:hidden">
+    <div className="px-2 py-3 space-y-1 sm:px-3">
+      {NAV_ROUTES.map((item) => (
+        <NavLink
+          key={item.path}
+          to={item.path}
+          className={({ isActive }) =>
+            classNames(
+              "shadow-sm border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base",
+              isActive
+                ? "underline underline-offset-2 decoration-2 decoration-sky-500 font-bold text-black"
+                : "font-medium"
+            )
+          }
+          end={item.path === "/"}
+        >
+          {item.name}
+        </NavLink>
+      ))}
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          props.logoutMutation();
+        }}
+        className="w-full shadow-sm border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium text-left"
+      >
+        Logout
+      </button>
+    </div>
+  </Disclosure.Panel>
+);

web/src/components/header/RightNav.tsx

@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) 2021 - 2023, Ludvig Lundgren and the autobrr contributors.
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import { Fragment } from "react";
+import { Link } from "react-router-dom";
+import { UserIcon } from "@heroicons/react/24/solid";
+import { Menu, Transition } from "@headlessui/react";
+
+import { classNames } from "@utils";
+import { AuthContext } from "@utils/Context";
+
+import { RightNavProps } from "./_shared";
+
+export const RightNav = (props: RightNavProps) => {
+  const authContext = AuthContext.useValue();
+  return (
+    <div className="hidden sm:block">
+      <div className="ml-4 flex items-center sm:ml-6">
+        <Menu as="div" className="ml-3 relative">
+          {({ open }) => (
+            <>
+              <Menu.Button
+                className={classNames(
+                  open ? "bg-gray-200 dark:bg-gray-800" : "",
+                  "text-gray-600 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-2xl text-sm font-medium",
+                  "max-w-xs rounded-full flex items-center text-sm px-3 py-2",
+                  "transition-colors duration-200"
+                )}
+              >
+                <span className="hidden text-sm font-medium sm:block">
+                  <span className="sr-only">
+                    Open user menu for{" "}
+                  </span>
+                  {authContext.username}
+                </span>
+                <UserIcon
+                  className="inline ml-1 h-5 w-5"
+                  aria-hidden="true"
+                />
+              </Menu.Button>
+              <Transition
+                show={open}
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+              >
+                <Menu.Items
+                  static
+                  className="origin-top-right absolute right-0 mt-2 w-48 z-10 rounded-md shadow-lg py-1 bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none"
+                >
+                  <Menu.Item>
+                    {({ active }) => (
+                      <Link
+                        to="/settings"
+                        className={classNames(
+                          active
+                            ? "bg-gray-100 dark:bg-gray-600"
+                            : "",
+                          "block px-4 py-2 text-sm text-gray-900 dark:text-gray-200"
+                        )}
+                      >
+                        Settings
+                      </Link>
+                    )}
+                  </Menu.Item>
+                  <Menu.Item>
+                    {({ active }) => (
+                      <button
+                        onClick={(e) => {
+                          e.preventDefault();
+                          props.logoutMutation();
+                        }}
+                        className={classNames(
+                          active
+                            ? "bg-gray-100 dark:bg-gray-600"
+                            : "",
+                          "block w-full px-4 py-2 text-sm text-gray-900 dark:text-gray-200 text-left"
+                        )}
+                      >
+                        Log out
+                      </button>
+                    )}
+                  </Menu.Item>
+                </Menu.Items>
+              </Transition>
+            </>
+          )}
+        </Menu>
+      </div>
+    </div>
+  );
+}

web/src/components/header/_shared.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021 - 2023, Ludvig Lundgren and the autobrr contributors.
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+interface NavItem {
+  name: string;
+  path: string;
+}
+
+export interface RightNavProps {
+  logoutMutation: () => void;
+}
+
+export const NAV_ROUTES: Array<NavItem> = [
+  { name: "Dashboard", path: "/" },
+  { name: "Filters", path: "/filters" },
+  { name: "Releases", path: "/releases" },
+  { name: "Settings", path: "/settings" },
+  { name: "Logs", path: "/logs" }
+];

web/src/components/header/index.tsx

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

web/src/components/modals/index.tsx

@@ -7,24 +7,85 @@ import { FC, Fragment, MutableRefObject } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 
-interface DeleteModalProps {
-    isOpen: boolean;
-    buttonRef: MutableRefObject<HTMLElement | null> | undefined;
-    toggle: () => void;
-    deleteAction: () => void;
-    title: string;
-    text: string;
+import { SectionLoader } from "@components/SectionLoader";
+
+interface ModalUpperProps {
+  title: string;
+  text: string;
 }
 
-export const DeleteModal: FC<DeleteModalProps> = ({ isOpen, buttonRef, toggle, deleteAction, title, text }) => (
-  <Transition.Root show={isOpen} as={Fragment}>
+interface ModalLowerProps {
+  isOpen: boolean;
+  isLoading: boolean;
+  toggle: () => void;
+  deleteAction: () => void;
+}
+
+interface DeleteModalProps extends ModalUpperProps, ModalLowerProps {
+  buttonRef: MutableRefObject<HTMLElement | null> | undefined;
+}
+
+const ModalUpper = ({ title, text }: ModalUpperProps) => (
+  <div className="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+    <div className="sm:flex sm:items-start">
+      <ExclamationTriangleIcon className="h-16 w-16 text-red-500 dark:text-red-500" aria-hidden="true" />
+      <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:pr-8 sm:text-left max-w-full">
+        <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900 dark:text-white break-words">
+          {title}
+        </Dialog.Title>
+        <div className="mt-2">
+          <p className="text-sm text-gray-500 dark:text-gray-300">
+            {text}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+const ModalLower = ({ isOpen, isLoading, toggle, deleteAction }: ModalLowerProps) => (
+  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+    {isLoading ? (
+      <SectionLoader $size="small" />
+    ) : (
+      <>
+        <button
+          type="button"
+          className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+          onClick={(e) => {
+            e.preventDefault();
+            if (isOpen) {
+              deleteAction();
+              toggle();
+            }
+          }}
+        >
+          Remove
+        </button>
+        <button
+          type="button"
+          className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+          onClick={(e) => {
+            e.preventDefault();
+            toggle();
+          }}
+        >
+          Cancel
+        </button>
+      </>
+    )}
+  </div>
+);
+
+export const DeleteModal: FC<DeleteModalProps> = (props: DeleteModalProps) => (
+  <Transition.Root show={props.isOpen} as={Fragment}>
     <Dialog
       as="div"
       static
       className="fixed z-10 inset-0 overflow-y-auto"
-      initialFocus={buttonRef}
-      open={isOpen}
-      onClose={toggle}
+      initialFocus={props.buttonRef}
+      open={props.isOpen}
+      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">
         <Transition.Child
@@ -52,43 +113,8 @@ export const DeleteModal: FC<DeleteModalProps> = ({ isOpen, buttonRef, toggle, d
           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">
-            <div className="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-              <div className="sm:flex sm:items-start">
-                <ExclamationTriangleIcon className="h-16 w-16 text-red-500 dark:text-red-500" aria-hidden="true" />
-                <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:pr-8 sm:text-left max-w-full">
-                  <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900 dark:text-white break-words">
-                    {title}
-                  </Dialog.Title>
-                  <div className="mt-2">
-                    <p className="text-sm text-gray-500 dark:text-gray-300">
-                      {text}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-              <button
-                type="button"
-                className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
-                onClick={() => {
-                  if (isOpen) {
-                    deleteAction();
-                    toggle();
-                  }
-                }}
-              >
-                Remove
-              </button>
-              <button
-                type="button"
-                className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-                onClick={toggle}
-                // ref={buttonRef}
-              >
-                Cancel
-              </button>
-            </div>
+            <ModalUpper {...props} />
+            <ModalLower {...props} />
           </div>
         </Transition.Child>
       </div>

web/src/components/panels/index.tsx

@@ -62,6 +62,7 @@ function SlideOver<DataType>({
         {deleteAction && (
           <DeleteModal
             isOpen={deleteModalIsOpen}
+            isLoading={isTesting || false}
             toggle={toggleDeleteModal}
             buttonRef={cancelModalButtonRef}
             deleteAction={deleteAction}