mirror of
https://github.com/idanoo/autobrr
synced 2025-07-22 16:29:12 +00:00
2917a7d42d
* feat: show new update banner * feat(http): add request logger * refactor: updates checker * feat: make update check optional * fix: empty releases * add toggle switch for update checks * feat: toggle updates check from settings * feat: toggle updates check from settings * feat: check on toggle enabled --------- Co-authored-by: soup <soup@r4tio.dev>
246 lines
11 KiB
TypeScript
246 lines
11 KiB
TypeScript
import { Fragment } from "react";
|
|
import { Link, NavLink, Outlet } from "react-router-dom";
|
|
import { Disclosure, Menu, Transition } from "@headlessui/react";
|
|
import { BookOpenIcon, UserIcon } from "@heroicons/react/24/solid";
|
|
import { Bars3Icon, XMarkIcon, MegaphoneIcon } from "@heroicons/react/24/outline";
|
|
|
|
import { AuthContext } from "../utils/Context";
|
|
|
|
import logo from "../logo.png";
|
|
import { useQuery } from "react-query";
|
|
import { APIClient } from "../api/APIClient";
|
|
|
|
interface NavItem {
|
|
name: string;
|
|
path: string;
|
|
}
|
|
|
|
function classNames(...classes: string[]) {
|
|
return classes.filter(Boolean).join(" ");
|
|
}
|
|
|
|
export default function Base() {
|
|
const authContext = AuthContext.useValue();
|
|
const nav: Array<NavItem> = [
|
|
{ name: "Dashboard", path: "/" },
|
|
{ name: "Filters", path: "/filters" },
|
|
{ name: "Releases", path: "/releases" },
|
|
{ name: "Settings", path: "/settings" },
|
|
{ name: "Logs", path: "/logs" }
|
|
];
|
|
|
|
|
|
const { data } = useQuery(
|
|
["updates"],
|
|
() => APIClient.updates.getLatestRelease(),
|
|
{
|
|
retry: false,
|
|
refetchOnWindowFocus: false,
|
|
onError: err => console.log(err)
|
|
}
|
|
);
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
<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">
|
|
<div className="flex items-center">
|
|
<div className="flex-shrink-0 flex items-center">
|
|
<Link to="/">
|
|
<img
|
|
className="block lg:hidden h-10 w-auto"
|
|
src={logo}
|
|
alt="Logo"
|
|
/>
|
|
<img
|
|
className="hidden lg:block h-10 w-auto"
|
|
src={logo}
|
|
alt="Logo"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="sm:ml-3 hidden sm:block">
|
|
<div className="flex items-baseline space-x-4">
|
|
{nav.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
|
|
<BookOpenIcon
|
|
className="inline ml-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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 }) => (
|
|
<Link
|
|
to="/logout"
|
|
className={classNames(
|
|
active
|
|
? "bg-gray-100 dark:bg-gray-600"
|
|
: "",
|
|
"block px-4 py-2 text-sm text-gray-900 dark:text-gray-200"
|
|
)}
|
|
>
|
|
Logout
|
|
</Link>
|
|
)}
|
|
</Menu.Item>
|
|
</Menu.Items>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Menu>
|
|
</div>
|
|
</div>
|
|
<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">
|
|
<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>
|
|
|
|
<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.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>
|
|
))}
|
|
<Link
|
|
to="/logout"
|
|
className="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"
|
|
>
|
|
Logout
|
|
</Link>
|
|
</div>
|
|
</Disclosure.Panel>
|
|
</>
|
|
)}
|
|
</Disclosure>
|
|
<Outlet />
|
|
</div>
|
|
);
|
|
}
|