linting and cleanup

src/components/bookmarks/item.jsx

@@ -2,20 +2,22 @@ export default function Item({ bookmark }) {
   const { hostname } = new URL(bookmark.href);
 
   return (
-    <li
-      onClick={() => {
-        window.open(bookmark.href, "_blank").focus();
-      }}
-      key={bookmark.name}
-      className="mb-3 cursor-pointer flex rounded-md font-medium text-theme-700 hover:text-theme-800 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/50 bg-white/50 hover:bg-theme-300/10 dark:bg-white/5 dark:hover:bg-white/10"
-    >
-      <div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md">
-        {bookmark.abbr}
-      </div>
-      <div className="flex-1 flex items-center justify-between rounded-r-md ">
-        <div className="flex-1 grow pl-3 py-2 text-xs">{bookmark.name}</div>
-        <div className="px-2 py-2 truncate text-theme-500 dark:text-theme-400 opacity-50 text-xs">{hostname}</div>
-      </div>
+    <li key={bookmark.name}>
+      <button
+        type="button"
+        onClick={() => window.open(bookmark.href, "_blank").focus()}
+        className="w-full text-left mb-3 cursor-pointer rounded-md font-medium text-theme-700 hover:text-theme-800 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/50 bg-white/50 hover:bg-theme-300/10 dark:bg-white/5 dark:hover:bg-white/10"
+      >
+        <div className="flex">
+          <div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md">
+            {bookmark.abbr}
+          </div>
+          <div className="flex-1 flex items-center justify-between rounded-r-md ">
+            <div className="flex-1 grow pl-3 py-2 text-xs">{bookmark.name}</div>
+            <div className="px-2 py-2 truncate text-theme-500 dark:text-theme-400 opacity-50 text-xs">{hostname}</div>
+          </div>
+        </div>
+      </button>
     </li>
   );
 }

src/components/bookmarks/list.jsx

@@ -2,7 +2,7 @@ import Item from "components/bookmarks/item";
 
 export default function List({ bookmarks }) {
   return (
-    <ul role="list" className="mt-3 flex flex-col">
+    <ul className="mt-3 flex flex-col">
       {bookmarks.map((bookmark) => (
         <Item key={bookmark.name} bookmark={bookmark} />
       ))}

src/components/color-toggle.jsx

@@ -1,7 +1,7 @@
-import { useContext } from "react";
+import { useContext, Fragment } from "react";
 import { IoColorPalette } from "react-icons/io5";
 import { Popover, Transition } from "@headlessui/react";
-import { Fragment } from "react";
+import classNames from "classnames";
 
 import { ColorContext } from "utils/color-context";
 
@@ -39,42 +39,38 @@ export default function ColorToggle() {
   return (
     <div className="w-full self-center">
       <Popover className="relative flex items-center">
-        {({ open }) => (
-          <>
-            <Popover.Button className="outline-none">
-              <IoColorPalette
-                className="h-5 w-5 text-theme-800 dark:text-theme-200 transition duration-150 ease-in-out"
-                aria-hidden="true"
-              />
-            </Popover.Button>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-200"
-              enterFrom="opacity-0 translate-y-1"
-              enterTo="opacity-100 translate-y-0"
-              leave="transition ease-in duration-150"
-              leaveFrom="opacity-100 translate-y-0"
-              leaveTo="opacity-0 translate-y-1"
-            >
-              <Popover.Panel className="absolute -top-[75px] left-0">
-                <div className="rounded-md shadow-lg ring-1 ring-black ring-opacity-5">
-                  <div className="relative grid gap-2 p-2 grid-cols-11 shadow-theme-900/10 dark:shadow-theme-900 rounded-md shadow-md">
-                    {colors.map((color) => (
-                      <button role="button" onClick={() => setColor(color)} key={color}>
-                        <div
-                          className={
-                            (active == color ? "border-2" : "border-0") +
-                            ` rounded-md w-5 h-5 border-black/50 dark:border-white/50 theme-${color} bg-theme-500`
-                          }
-                        />
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              </Popover.Panel>
-            </Transition>
-          </>
-        )}
+        <Popover.Button className="outline-none">
+          <IoColorPalette
+            className="h-5 w-5 text-theme-800 dark:text-theme-200 transition duration-150 ease-in-out"
+            aria-hidden="true"
+          />
+        </Popover.Button>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-200"
+          enterFrom="opacity-0 translate-y-1"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease-in duration-150"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 translate-y-1"
+        >
+          <Popover.Panel className="absolute -top-[75px] left-0">
+            <div className="rounded-md shadow-lg ring-1 ring-black ring-opacity-5">
+              <div className="relative grid gap-2 p-2 grid-cols-11 shadow-theme-900/10 dark:shadow-theme-900 rounded-md shadow-md">
+                {colors.map((color) => (
+                  <button type="button" onClick={() => setColor(color)} key={color}>
+                    <div
+                      className={classNames(
+                        active === color ? "border-2" : "border-0",
+                        `rounded-md w-5 h-5 border-black/50 dark:border-white/50 theme-${color} bg-theme-500`
+                      )}
+                    />
+                  </button>
+                ))}
+              </div>
+            </div>
+          </Popover.Panel>
+        </Transition>
       </Popover>
     </div>
   );

src/components/greeting.jsx

@@ -1,5 +1,4 @@
 export default function Greeting() {
-  const name = process.env.NEXT_PUBLIC_DISPLAY_NAME;
   const hour = new Date().getHours();
 
   let day = "day";
@@ -12,9 +11,5 @@ export default function Greeting() {
     day = "evening";
   }
 
-  return (
-    <div className="self-end grow text-2xl font-thin text-theme-800 dark:text-theme-200">
-      Good {day}
-    </div>
-  );
+  return <div className="self-end grow text-2xl font-thin text-theme-800 dark:text-theme-200">Good {day}</div>;
 }

src/components/modal.jsx

@@ -1,68 +0,0 @@
-import { Fragment, useRef, useState, Children } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-
-function classNames(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-
-const Modal = ({ Toggle, Content }) => {
-  const [open, setOpen] = useState(false);
-  const cancelButtonRef = useRef(null);
-
-  return (
-    <>
-      <Toggle open={open} setOpen={setOpen} />
-      <Transition.Root show={open} as={Fragment}>
-        <Dialog
-          as="div"
-          className="relative z-10"
-          initialFocus={cancelButtonRef}
-          onClose={setOpen}
-        >
-          <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"
-          >
-            <div className="fixed inset-0 bg-theme-900/90 transition-opacity" />
-          </Transition.Child>
-
-          <div className="fixed z-10 inset-0 overflow-y-auto">
-            <div className="flex items-center justify-center min-h-full">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="relative rounded-lg shadow-xl transform transition-all my-8 max-w-lg w-full">
-                  <Content open={open} setOpen={setOpen} />
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition.Root>
-    </>
-  );
-};
-
-const ModalToggle = ({ open, setOpen, children }) => (
-  <div onClick={() => setOpen(!open)}>{children}</div>
-);
-
-const ModalContent = ({ open, setOpen, children }) => (
-  <div className="body">{children}</div>
-);
-
-Modal.Toggle = ModalToggle;
-Modal.Content = ModalContent;
-
-export default Modal;

src/components/services/item.jsx

@@ -8,28 +8,32 @@ import Docker from "./widgets/service/docker";
 function resolveIcon(icon) {
   if (icon.startsWith("http")) {
     return `/api/proxy?url=${encodeURIComponent(icon)}`;
-  } else if (icon.startsWith("/")) {
-    return icon;
-  } else {
-    if (icon.endsWith(".png")) {
-      return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}`;
-    } else {
-      return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`;
-    }
   }
+
+  if (icon.startsWith("/")) {
+    return icon;
+  }
+
+  if (icon.endsWith(".png")) {
+    return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}`;
+  }
+
+  return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`;
 }
 
 export default function Item({ service }) {
   return (
     <li key={service.name}>
       <Disclosure>
-        <div className={
-          (service.href && service.href !== "#" ? 'cursor-pointer ' : 'cursor-default ') +
-          'transition-all h-15 overflow-hidden mb-3 p-1 rounded-md font-medium text-theme-700 hover:text-theme-800 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/40 bg-white/50 hover:bg-theme-300/10 dark:bg-white/5 dark:hover:bg-white/10'
-          }>
+        <div
+          className={`${
+            service.href && service.href !== "#" ? "cursor-pointer " : "cursor-default "
+          }transition-all h-15 overflow-hidden mb-3 p-1 rounded-md font-medium text-theme-700 hover:text-theme-800 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/40 bg-white/50 hover:bg-theme-300/10 dark:bg-white/5 dark:hover:bg-white/10`}
+        >
           <div className="flex">
             {service.icon && (
-              <div
+              <button
+                type="button"
                 onClick={() => {
                   if (service.href && service.href !== "#") {
                     window.open(service.href, "_blank").focus();
@@ -38,10 +42,11 @@ export default function Item({ service }) {
                 className="flex-shrink-0 flex items-center justify-center w-12 "
               >
                 <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
-              </div>
+              </button>
             )}
 
-            <div
+            <button
+              type="button"
               onClick={() => {
                 if (service.href && service.href !== "#") {
                   window.open(service.href, "_blank").focus();
@@ -53,9 +58,12 @@ export default function Item({ service }) {
                 {service.name}
                 <p className="text-theme-500 dark:text-theme-400 text-xs font-extralight">{service.description}</p>
               </div>
-            </div>
+            </button>
             {service.container && (
-              <Disclosure.Button as="div" className="flex-shrink-0 flex items-center justify-center w-12 cursor-pointer">
+              <Disclosure.Button
+                as="div"
+                className="flex-shrink-0 flex items-center justify-center w-12 cursor-pointer"
+              >
                 <Status service={service} />
               </Disclosure.Button>
             )}

src/components/services/list.jsx

@@ -2,7 +2,7 @@ import Item from "components/services/item";
 
 export default function List({ services }) {
   return (
-    <ul role="list" className="mt-3 flex flex-col">
+    <ul className="mt-3 flex flex-col">
       {services.map((service) => (
         <Item key={service.name} service={service} />
       ))}

src/components/services/status.jsx

@@ -1,28 +1,18 @@
 import useSWR from "swr";
 
 export default function Status({ service }) {
-  const { data, error } = useSWR(
-    `/api/docker/status/${service.container}/${service.server || ""}`
-  );
+  const { data, error } = useSWR(`/api/docker/status/${service.container}/${service.server || ""}`);
 
   if (error) {
-    return (
-      <div className="w-3 h-3 bg-rose-300 dark:bg-rose-500 rounded-full" />
-    );
+    return <div className="w-3 h-3 bg-rose-300 dark:bg-rose-500 rounded-full" />;
   }
 
   if (data && data.status === "running") {
-    return (
-      <div className="w-3 h-3 bg-emerald-300 dark:bg-emerald-500 rounded-full" />
-    );
+    return <div className="w-3 h-3 bg-emerald-300 dark:bg-emerald-500 rounded-full" />;
   }
 
   if (data && data.status === "not found") {
-    return (
-      <>
-        <div className="h-2.5 w-2.5 bg-orange-400/50 dark:bg-yellow-200/40 -rotate-45"></div>
-      </>
-    );
+    return <div className="h-2.5 w-2.5 bg-orange-400/50 dark:bg-yellow-200/40 -rotate-45" />;
   }
 
   return <div className="w-3 h-3 bg-black/20 dark:bg-white/40 rounded-full" />;

src/components/services/widgets/service/emby.jsx

@@ -24,9 +24,9 @@ export default function Emby({ service, title = "Emby" }) {
     );
   }
 
-  const playing = sessionsData.filter((session) => session.hasOwnProperty("NowPlayingItem"));
+  const playing = sessionsData.filter((session) => session?.NowPlayingItem);
   const transcoding = sessionsData.filter(
-    (session) => session.hasOwnProperty("PlayState") && session.PlayState.PlayMethod === "Transcode"
+    (session) => session?.PlayState && session.PlayState.PlayMethod === "Transcode"
   );
   const bitrate = playing.reduce((acc, session) => acc + session.NowPlayingItem.Bitrate, 0);
 

src/components/services/widgets/service/rutorrent.jsx

@@ -25,13 +25,9 @@ export default function Rutorrent({ service }) {
     );
   }
 
-  const upload = statusData.reduce((acc, torrent) => {
-    return acc + parseInt(torrent["d.get_up_rate"]);
-  }, 0);
+  const upload = statusData.reduce((acc, torrent) => acc + parseInt(torrent["d.get_up_rate"], 10), 0);
 
-  const download = statusData.reduce((acc, torrent) => {
-    return acc + parseInt(torrent["d.get_down_rate"]);
-  }, 0);
+  const download = statusData.reduce((acc, torrent) => acc + parseInt(torrent["d.get_down_rate"], 10), 0);
 
   const active = statusData.filter((torrent) => torrent["d.get_state"] === "1");
 

src/components/services/widgets/service/tautulli.jsx

@@ -24,7 +24,7 @@ export default function Tautulli({ service }) {
     );
   }
 
-  const data = statsData.response.data;
+  const { data } = statsData.response;
 
   return (
     <Widget>

src/components/widgets/openweathermap/icon.jsx

@@ -1,7 +1,7 @@
 import mapIcon from "utils/owm-condition-map";
 
 export default function Icon({ condition, timeOfDay }) {
-  const Icon = mapIcon(condition, timeOfDay);
+  const IconComponent = mapIcon(condition, timeOfDay);
 
-  return <Icon className="w-10 h-10 text-theme-800 dark:text-theme-200"></Icon>;
+  return <IconComponent className="w-10 h-10 text-theme-800 dark:text-theme-200" />;
 }

src/components/widgets/openweathermap/weather.jsx

@@ -6,7 +6,7 @@ import Icon from "./icon";
 export default function OpenWeatherMap({ options }) {
   const { data, error } = useSWR(`/api/widgets/openweathermap?${new URLSearchParams(options).toString()}`);
 
-  if (error || data?.cod == 401) {
+  if (error || data?.cod === 401) {
     return (
       <div className="flex flex-col">
         <div className="flex flex-row items-center justify-end">
@@ -23,11 +23,11 @@ export default function OpenWeatherMap({ options }) {
   }
 
   if (!data) {
-    return <div className="flex flex-row items-center"></div>;
+    return <div className="flex flex-row items-center" />;
   }
 
   if (data.error) {
-    return <div className="flex flex-row items-center"></div>;
+    return <div className="flex flex-row items-center" />;
   }
 
   return (

src/components/widgets/resources/disk.jsx

@@ -1,6 +1,7 @@
 import useSWR from "swr";
 import { FiHardDrive } from "react-icons/fi";
 import { BiError } from "react-icons/bi";
+
 import { formatBytes } from "utils/stats-helpers";
 
 export default function Disk({ options }) {

src/components/widgets/resources/memory.jsx

@@ -1,6 +1,7 @@
 import useSWR from "swr";
 import { FaMemory } from "react-icons/fa";
 import { BiError } from "react-icons/bi";
+
 import { formatBytes } from "utils/stats-helpers";
 
 export default function Memory() {

src/components/widgets/resources/resources.jsx

@@ -4,19 +4,17 @@ import Memory from "./memory";
 
 export default function Resources({ options }) {
   return (
-    <>
-      <div className="flex flex-col max-w:full basis-1/2 sm:basis-auto self-center">
-        <div className="flex flex-row space-x-4 self-center">
-          {options.cpu && <Cpu />}
-          {options.memory && <Memory />}
-          {options.disk && <Disk options={options} />}
-        </div>
-        {options.label && (
-          <div className="border-t-2 border-theme-800 dark:border-theme-200 mt-1 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">
-            {options.label}
-          </div>
-        )}
+    <div className="flex flex-col max-w:full basis-1/2 sm:basis-auto self-center">
+      <div className="flex flex-row space-x-4 self-center">
+        {options.cpu && <Cpu />}
+        {options.memory && <Memory />}
+        {options.disk && <Disk options={options} />}
       </div>
-    </>
+      {options.label && (
+        <div className="border-t-2 border-theme-800 dark:border-theme-200 mt-1 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">
+          {options.label}
+        </div>
+      )}
+    </div>
   );
 }

src/components/widgets/search/search.jsx

@@ -30,7 +30,7 @@ export default function Search({ options }) {
   const [query, setQuery] = useState("");
 
   if (!provider) {
-    return <></>;
+    return null;
   }
 
   function handleSubmit(event) {
@@ -49,11 +49,10 @@ export default function Search({ options }) {
 
   return (
     <form className="flex-col relative h-8 my-4 min-w-full md:min-w-fit grow" onSubmit={handleSubmit}>
-      <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-theme-200"></div>
+      <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-theme-200" />
       <input
         type="search"
-        autoFocus
-        className={`overflow-hidden w-full placeholder-theme-900 text-xs text-theme-900 bg-theme-50 rounded-md border border-theme-300 focus:ring-theme-500 focus:border-theme-500 dark:bg-theme-800 dark:border-theme-600 dark:placeholder-theme-400 dark:text-white dark:focus:ring-theme-500 dark:focus:border-theme-500 h-full`}
+        className="overflow-hidden w-full placeholder-theme-900 text-xs text-theme-900 bg-theme-50 rounded-md border border-theme-300 focus:ring-theme-500 focus:border-theme-500 dark:bg-theme-800 dark:border-theme-600 dark:placeholder-theme-400 dark:text-white dark:focus:ring-theme-500 dark:focus:border-theme-500 h-full"
         placeholder="Search..."
         onChange={(s) => setQuery(s.currentTarget.value)}
         required

src/components/widgets/weather/icon.jsx

@@ -1,7 +1,7 @@
 import mapIcon from "utils/condition-map";
 
 export default function Icon({ condition, timeOfDay }) {
-  const Icon = mapIcon(condition, timeOfDay);
+  const IconComponent = mapIcon(condition, timeOfDay);
 
-  return <Icon className="w-10 h-10 text-theme-800 dark:text-theme-200"></Icon>;
+  return <IconComponent className="w-10 h-10 text-theme-800 dark:text-theme-200" />;
 }

src/components/widgets/weather/weather.jsx

@@ -4,7 +4,6 @@ import { BiError } from "react-icons/bi";
 import Icon from "./icon";
 
 export default function WeatherApi({ options }) {
-  console.log(options);
   const { data, error } = useSWR(`/api/widgets/weather?${new URLSearchParams(options).toString()}`);
 
   if (error) {
@@ -24,11 +23,11 @@ export default function WeatherApi({ options }) {
   }
 
   if (!data) {
-    return <div className="flex flex-row items-center justify-end"></div>;
+    return <div className="flex flex-row items-center justify-end" />;
   }
 
   if (data.error) {
-    return <div className="flex flex-row items-center justify-end"></div>;
+    return <div className="flex flex-row items-center justify-end" />;
   }
 
   return (