Apply and Upgrade Eslint (#288)

* Upgrade ESLINT and fix issues

* feat: add frontend linting job to GitHub Actions workflow

* Move UI linting to separate file

* More linting fixes

* Remove pull_request trigger from UI linting workflow

* Update UI linting workflow

* Rename frontend-lint workflow to ui-lint for clarity

ui/src/components/ActionBar.tsx

@@ -1,3 +1,10 @@
+import { MdOutlineContentPasteGo } from "react-icons/md";
+import { LuCable, LuHardDrive, LuMaximize, LuSettings, LuSignal } from "react-icons/lu";
+import { FaKeyboard } from "react-icons/fa6";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import { Fragment, useCallback, useRef } from "react";
+import { CommandLineIcon } from "@heroicons/react/20/solid";
+
 import { Button } from "@components/Button";
 import {
   useHidStore,
@@ -5,19 +12,13 @@ import {
   useSettingsStore,
   useUiStore,
 } from "@/hooks/stores";
-import { MdOutlineContentPasteGo } from "react-icons/md";
 import Container from "@components/Container";
-import { LuCable, LuHardDrive, LuMaximize, LuSettings, LuSignal } from "react-icons/lu";
 import { cx } from "@/cva.config";
 import PasteModal from "@/components/popovers/PasteModal";
-import { FaKeyboard } from "react-icons/fa6";
 import WakeOnLanModal from "@/components/popovers/WakeOnLan/Index";
-import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
-import MountPopopover from "./popovers/MountPopover";
-import { Fragment, useCallback, useRef } from "react";
-import { CommandLineIcon } from "@heroicons/react/20/solid";
-import ExtensionPopover from "./popovers/ExtensionPopover";
-import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
+import MountPopopover from "@/components/popovers/MountPopover";
+import ExtensionPopover from "@/components/popovers/ExtensionPopover";
+import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
 
 export default function Actionbar({
   requestFullscreen,

ui/src/components/AuthLayout.tsx

@@ -1,21 +1,22 @@
+import { useLocation, useNavigation, useSearchParams } from "react-router-dom";
+
 import { Button, LinkButton } from "@components/Button";
 import { GoogleIcon } from "@components/Icons";
 import SimpleNavbar from "@components/SimpleNavbar";
 import Container from "@components/Container";
-import { useLocation, useNavigation, useSearchParams } from "react-router-dom";
 import Fieldset from "@components/Fieldset";
 import GridBackground from "@components/GridBackground";
 import StepCounter from "@components/StepCounter";
 import { CLOUD_API } from "@/ui.config";
 
-type AuthLayoutProps = {
+interface AuthLayoutProps {
   title: string;
   description: string;
   action: string;
   cta: string;
   ctaHref: string;
   showCounter?: boolean;
-};
+}
 
 export default function AuthLayout({
   title,
@@ -46,8 +47,8 @@ export default function AuthLayout({
           }
         />
         <Container>
-          <div className="flex items-center justify-center w-full h-full isolate">
-            <div className="max-w-2xl -mt-16 space-y-8">
+          <div className="isolate flex h-full w-full items-center justify-center">
+            <div className="-mt-16 max-w-2xl space-y-8">
               {showCounter ? (
                 <div className="text-center">
                   <StepCounter currStepIdx={0} nSteps={2} />
@@ -61,11 +62,8 @@ export default function AuthLayout({
               </div>
 
               <Fieldset className="space-y-12">
-                <div className="max-w-sm mx-auto space-y-4">
-                  <form
-                    action={`${CLOUD_API}/oidc/google`}
-                    method="POST"
-                  >
+                <div className="mx-auto max-w-sm space-y-4">
+                  <form action={`${CLOUD_API}/oidc/google`} method="POST">
                     {/*This could be the KVM ID*/}
                     {deviceId ? (
                       <input type="hidden" name="deviceId" value={deviceId} />

ui/src/components/Button.tsx

@@ -1,8 +1,9 @@
 import React from "react";
+import { FetcherWithComponents, Link, LinkProps, useNavigation } from "react-router-dom";
+
 import ExtLink from "@/components/ExtLink";
 import LoadingSpinner from "@/components/LoadingSpinner";
 import { cva, cx } from "@/cva.config";
-import { FetcherWithComponents, Link, LinkProps, useNavigation } from "react-router-dom";
 
 const sizes = {
   XS: "h-[28px] px-2 text-xs",
@@ -101,7 +102,7 @@ const iconVariants = cva({
   },
 });
 
-type ButtonContentPropsType = {
+interface ButtonContentPropsType {
   text?: string | React.ReactNode;
   LeadingIcon?: React.FC<{ className: string | undefined }> | null;
   TrailingIcon?: React.FC<{ className: string | undefined }> | null;
@@ -111,7 +112,7 @@ type ButtonContentPropsType = {
   size: keyof typeof sizes;
   theme: keyof typeof themes;
   loading?: boolean;
-};
+}
 
 function ButtonContent(props: ButtonContentPropsType) {
   const { text, LeadingIcon, TrailingIcon, fullWidth, className, textAlign, loading } =

ui/src/components/Card.tsx

@@ -1,10 +1,11 @@
 import React, { forwardRef } from "react";
+
 import { cx } from "@/cva.config";
 
-type CardPropsType = {
+interface CardPropsType {
   children: React.ReactNode;
   className?: string;
-};
+}
 
 export const GridCard = ({
   children,

ui/src/components/CardHeader.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-type Props = {
+interface Props {
   headline: string;
   description?: string | React.ReactNode;
   Button?: React.ReactNode;
-};
+}
 
 export const CardHeader = ({ headline, description, Button }: Props) => {
   return (

ui/src/components/Checkbox.tsx

@@ -1,7 +1,8 @@
 import type { Ref } from "react";
 import React, { forwardRef } from "react";
-import FieldLabel from "@/components/FieldLabel";
 import clsx from "clsx";
+
+import FieldLabel from "@/components/FieldLabel";
 import { cva, cx } from "@/cva.config";
 
 const sizes = {
@@ -52,7 +53,7 @@ type CheckboxWithLabelProps = React.ComponentProps<typeof FieldLabel> &
 
 const CheckboxWithLabel = forwardRef<HTMLInputElement, CheckboxWithLabelProps>(
   function CheckboxWithLabel(
-    { label, id, description, as, fullWidth, readOnly, ...props },
+    { label, id, description, fullWidth, readOnly, ...props },
     ref: Ref<HTMLInputElement>,
   ) {
     return (

ui/src/components/Container.tsx

@@ -1,4 +1,6 @@
+/* eslint-disable react-refresh/only-export-components */
 import React, { ReactNode } from "react";
+
 import { cx } from "@/cva.config";
 
 function Container({ children, className }: { children: ReactNode; className?: string }) {

ui/src/components/CustomTooltip.tsx

@@ -1,8 +1,8 @@
 import Card from "@components/Card";
 
-export type CustomTooltipProps = {
+export interface CustomTooltipProps {
   payload: { payload: { date: number; stat: number }; unit: string }[];
-};
+}
 
 export default function CustomTooltip({ payload }: CustomTooltipProps) {
   if (payload?.length) {

ui/src/components/EmptyCard.tsx

@@ -1,14 +1,16 @@
-import { GridCard } from "@/components/Card";
 import React from "react";
+
+import { GridCard } from "@/components/Card";
+
 import { cx } from "../cva.config";
 
-type Props = {
-  IconElm?: React.FC<any>;
+interface Props {
+  IconElm?: React.FC<{ className: string | undefined }>;
   headline: string;
   description?: string | React.ReactNode;
   BtnElm?: React.ReactNode;
   className?: string;
-};
+}
 
 export default function EmptyCard({
   IconElm,
@@ -27,10 +29,16 @@ export default function EmptyCard({
       >
         <div className="max-w-[90%] space-y-1.5 text-center md:max-w-[60%]">
           <div className="space-y-2">
-            {IconElm && <IconElm className="w-6 h-6 mx-auto text-blue-600 dark:text-blue-400" />}
-            <h4 className="text-base font-bold leading-none text-black dark:text-white">{headline}</h4>
+            {IconElm && (
+              <IconElm className="mx-auto h-6 w-6 text-blue-600 dark:text-blue-400" />
+            )}
+            <h4 className="text-base font-bold leading-none text-black dark:text-white">
+              {headline}
+            </h4>
           </div>
-          <p className="mx-auto text-sm text-slate-600 dark:text-slate-400">{description}</p>
+          <p className="mx-auto text-sm text-slate-600 dark:text-slate-400">
+            {description}
+          </p>
         </div>
         {BtnElm}
       </div>

ui/src/components/ExtLink.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { cx } from "@/cva.config";
 
 export default function ExtLink({

ui/src/components/FeatureFlag.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+
 import { useFeatureFlag } from "../hooks/useFeatureFlag";
 
 export function FeatureFlag({

ui/src/components/FieldLabel.tsx

@@ -1,13 +1,14 @@
 import React from "react";
+
 import { cx } from "@/cva.config";
 
-type Props = {
+interface Props {
   label: string | React.ReactNode;
   id?: string;
   as?: "label" | "span";
   description?: string | React.ReactNode | null;
   disabled?: boolean;
-};
+}
 export default function FieldLabel({
   label,
   id,

ui/src/components/Fieldset.tsx

@@ -9,7 +9,7 @@ export default function Fieldset({
   disabled,
 }: {
   children: React.ReactNode;
-  fetcher?: FetcherWithComponents<any>;
+  fetcher?: FetcherWithComponents<unknown>;
   className?: string;
   disabled?: boolean;
 }) {

ui/src/components/Header.tsx

@@ -2,19 +2,22 @@ import { Fragment, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { ArrowLeftEndOnRectangleIcon, ChevronDownIcon } from "@heroicons/react/16/solid";
 import { Menu, MenuButton } from "@headlessui/react";
+import { LuMonitorSmartphone } from "react-icons/lu";
+
 import Container from "@/components/Container";
 import Card from "@/components/Card";
-import { LuMonitorSmartphone } from "react-icons/lu";
 import { cx } from "@/cva.config";
 import { useHidStore, useRTCStore, useUserStore } from "@/hooks/stores";
 import LogoBlueIcon from "@/assets/logo-blue.svg";
 import LogoWhiteIcon from "@/assets/logo-white.svg";
 import USBStateStatus from "@components/USBStateStatus";
 import PeerConnectionStatusCard from "@components/PeerConnectionStatusCard";
+import { CLOUD_API, DEVICE_API } from "@/ui.config";
+
 import api from "../api";
 import { isOnDevice } from "../main";
+
 import { Button, LinkButton } from "./Button";
-import { CLOUD_API, DEVICE_API } from "@/ui.config";
 
 interface NavbarProps {
   isLoggedIn: boolean;

ui/src/components/InfoBar.tsx

@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+
 import { cx } from "@/cva.config";
 import {
   useHidStore,
@@ -6,7 +8,6 @@ import {
   useSettingsStore,
   useVideoStore,
 } from "@/hooks/stores";
-import { useEffect } from "react";
 import { keys, modifiers } from "@/keyboardMappings";
 
 export default function InfoBar() {

ui/src/components/InputField.tsx

@@ -1,7 +1,8 @@
 import type { Ref } from "react";
 import React, { forwardRef } from "react";
-import FieldLabel from "@/components/FieldLabel";
 import clsx from "clsx";
+
+import FieldLabel from "@/components/FieldLabel";
 import Card from "@/components/Card";
 import { cva } from "@/cva.config";
 
@@ -84,7 +85,7 @@ const InputFieldWithLabel = forwardRef<HTMLInputElement, InputFieldWithLabelProp
         {(label || description) && (
           <FieldLabel label={label} id={id} description={description} />
         )}
-        <InputField ref={ref as any} id={id} {...props} />
+        <InputField ref={ref as never} id={id} {...props} />
       </div>
     );
   },

ui/src/components/KvmCard.tsx

@@ -1,10 +1,11 @@
-import { Button, LinkButton } from "@components/Button";
-import Card from "@components/Card";
 import { MdConnectWithoutContact } from "react-icons/md";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import { Link } from "react-router-dom";
 import { LuEllipsisVertical } from "react-icons/lu";
 
+import Card from "@components/Card";
+import { Button, LinkButton } from "@components/Button";
+
 function getRelativeTimeString(date: Date | number, lang = navigator.language): string {
   // Allow dates or times to be passed
   const timeMs = typeof date === "number" ? date : date.getTime();

ui/src/components/Modal.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Dialog, DialogBackdrop, DialogPanel } from "@headlessui/react";
+
 import { cx } from "@/cva.config";
 
 const Modal = React.memo(function Modal({

ui/src/components/NotFoundPage.tsx

@@ -1,4 +1,5 @@
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+
 import EmptyCard from "@/components/EmptyCard";
 
 export default function NotFoundPage() {

ui/src/components/PeerConnectionStatusCard.tsx

@@ -13,11 +13,9 @@ const PeerConnectionStatusMap = {
 
 export type PeerConnections = keyof typeof PeerConnectionStatusMap;
 
-type StatusProps = {
-  [key in PeerConnections]: {
+type StatusProps = Record<PeerConnections, {
     statusIndicatorClassName: string;
-  };
-};
+  }>;
 
 export default function PeerConnectionStatusCard({
   state,

ui/src/components/SelectMenuBasic.tsx

@@ -1,9 +1,12 @@
 import React from "react";
-import FieldLabel from "@/components/FieldLabel";
 import clsx from "clsx";
-import Card from "./Card";
+
+import FieldLabel from "@/components/FieldLabel";
 import { cva } from "@/cva.config";
 
+import Card from "./Card";
+
+
 type SelectMenuProps = Pick<
   JSX.IntrinsicElements["select"],
   "disabled" | "onChange" | "name" | "value"

ui/src/components/SimpleNavbar.tsx

@@ -1,10 +1,11 @@
-import Container from "@/components/Container";
 import { Link } from "react-router-dom";
 import React from "react";
+
+import Container from "@/components/Container";
 import LogoBlueIcon from "@/assets/logo-blue.png";
 import LogoWhiteIcon from "@/assets/logo-white.svg";
 
-type Props = { logoHref?: string; actionElement?: React.ReactNode };
+interface Props { logoHref?: string; actionElement?: React.ReactNode }
 
 export default function SimpleNavbar({ logoHref, actionElement }: Props) {
   return (

ui/src/components/StatChart.tsx

@@ -9,6 +9,7 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
+
 import CustomTooltip, { CustomTooltipProps } from "@components/CustomTooltip";
 
 export default function StatChart({

ui/src/components/StatusCards.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { cx } from "@/cva.config";
 
 interface Props {

ui/src/components/StepCounter.tsx

@@ -1,12 +1,13 @@
 import { CheckIcon } from "@heroicons/react/16/solid";
+
 import { cva, cx } from "@/cva.config";
 import Card from "@/components/Card";
 
-type Props = {
+interface Props {
   nSteps: number;
   currStepIdx: number;
   size?: keyof typeof sizes;
-};
+}
 
 const sizes = {
   SM: "text-xs leading-[12px]",

ui/src/components/Terminal.tsx

@@ -1,8 +1,5 @@
 import "react-simple-keyboard/build/css/index.css";
-import { AvailableTerminalTypes, useUiStore } from "@/hooks/stores";
-import { Button } from "./Button";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
-import { cx } from "@/cva.config";
 import { useEffect } from "react";
 import { useXTerm } from "react-xtermjs";
 import { FitAddon } from "@xterm/addon-fit";
@@ -11,6 +8,11 @@ import { WebglAddon } from "@xterm/addon-webgl";
 import { Unicode11Addon } from "@xterm/addon-unicode11";
 import { ClipboardAddon } from "@xterm/addon-clipboard";
 
+import { cx } from "@/cva.config";
+import { AvailableTerminalTypes, useUiStore } from "@/hooks/stores";
+
+import { Button } from "./Button";
+
 const isWebGl2Supported = !!document.createElement("canvas").getContext("webgl2");
 
 // Terminal theme configuration

ui/src/components/TextArea.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import FieldLabel from "@/components/FieldLabel";
 import clsx from "clsx";
+
+import FieldLabel from "@/components/FieldLabel";
 import { FieldError } from "@/components/InputField";
 import Card from "@/components/Card";
 import { cx } from "@/cva.config";

ui/src/components/USBStateStatus.tsx

@@ -1,23 +1,20 @@
+import React from "react";
+
 import { cx } from "@/cva.config";
 import KeyboardAndMouseConnectedIcon from "@/assets/keyboard-and-mouse-connected.png";
-import React from "react";
 import LoadingSpinner from "@components/LoadingSpinner";
 import StatusCard from "@components/StatusCards";
 import { HidState } from "@/hooks/stores";
 
 type USBStates = HidState["usbState"];
 
-type StatusProps = {
-  [key in USBStates]: {
+type StatusProps = Record<USBStates, {
     icon: React.FC<{ className: string | undefined }>;
     iconClassName: string;
     statusIndicatorClassName: string;
-  };
-};
+  }>;
 
-const USBStateMap: {
-  [key in USBStates]: string;
-} = {
+const USBStateMap: Record<USBStates, string> = {
   configured: "Connected",
   attached: "Connecting",
   addressed: "Connecting",

ui/src/components/UpdateInProgressStatusCard.tsx

@@ -1,8 +1,10 @@
 import { cx } from "@/cva.config";
+
+import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
+
 import { Button } from "./Button";
 import { GridCard } from "./Card";
 import LoadingSpinner from "./LoadingSpinner";
-import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
 
 export default function UpdateInProgressStatusCard() {
   const { navigateTo } = useDeviceUiNavigation();

ui/src/components/UsbDeviceSetting.tsx

@@ -1,9 +1,9 @@
-import { useCallback } from "react";
+import { useCallback , useEffect, useState } from "react";
 
-import { useEffect, useState } from "react";
 import { useJsonRpc } from "../hooks/useJsonRpc";
 import notifications from "../notifications";
 import { SettingsItem } from "../routes/devices.$id.settings";
+
 import Checkbox from "./Checkbox";
 import { Button } from "./Button";
 import { SelectMenuBasic } from "./SelectMenuBasic";

ui/src/components/UsbInfoSetting.tsx

@@ -1,14 +1,14 @@
-import { useMemo } from "react";
+import { useMemo , useCallback , useEffect, useState } from "react";
 
-import { useCallback } from "react";
 import { Button } from "@components/Button";
-import { InputFieldWithLabel } from "./InputField";
 
-import { useEffect, useState } from "react";
+
 import { UsbConfigState } from "../hooks/stores";
 import { useJsonRpc } from "../hooks/useJsonRpc";
 import notifications from "../notifications";
 import { SettingsItem } from "../routes/devices.$id.settings";
+
+import { InputFieldWithLabel } from "./InputField";
 import { SelectMenuBasic } from "./SelectMenuBasic";
 import Fieldset from "./Fieldset";
 

ui/src/components/VideoOverlay.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 import { ArrowRightIcon } from "@heroicons/react/16/solid";
+import { motion, AnimatePresence } from "framer-motion";
+import { LuPlay } from "react-icons/lu";
+
 import { Button, LinkButton } from "@components/Button";
 import LoadingSpinner from "@components/LoadingSpinner";
 import { GridCard } from "@components/Card";
-import { motion, AnimatePresence } from "motion/react";
-import { LuPlay } from "react-icons/lu";
 
 interface OverlayContentProps {
   children: React.ReactNode;

ui/src/components/VirtualKeyboard.tsx

@@ -1,11 +1,15 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import Keyboard from "react-simple-keyboard";
-import { Button } from "@components/Button";
-import Card from "@components/Card";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
+import { motion, AnimatePresence } from "framer-motion";
+
+import Card from "@components/Card";
+// eslint-disable-next-line import/order
+import { Button } from "@components/Button";
+
 import "react-simple-keyboard/build/css/index.css";
+
 import { useHidStore, useUiStore } from "@/hooks/stores";
-import { motion, AnimatePresence } from "motion/react";
 import { cx } from "@/cva.config";
 import { keys, modifiers } from "@/keyboardMappings";
 import useKeyboard from "@/hooks/useKeyboard";

ui/src/components/WebRTCVideo.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
 import {
   useDeviceSettingsStore,
   useHidStore,
@@ -15,9 +16,13 @@ import Actionbar from "@components/ActionBar";
 import InfoBar from "@components/InfoBar";
 import useKeyboard from "@/hooks/useKeyboard";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
-import { HDMIErrorOverlay, NoAutoplayPermissionsOverlay } from "./VideoOverlay";
-import { ConnectionErrorOverlay } from "./VideoOverlay";
-import { LoadingOverlay } from "./VideoOverlay";
+
+import {
+  HDMIErrorOverlay,
+  NoAutoplayPermissionsOverlay,
+  ConnectionErrorOverlay,
+  LoadingOverlay,
+} from "./VideoOverlay";
 
 export default function WebRTCVideo() {
   // Video and stream related refs and states
@@ -82,13 +87,13 @@ export default function WebRTCVideo() {
 
   const onVideoPlaying = useCallback(() => {
     setIsPlaying(true);
-    videoElm.current && updateVideoSizeStore(videoElm.current);
+    if (videoElm.current) updateVideoSizeStore(videoElm.current);
   }, [updateVideoSizeStore]);
 
   // On mount, get the video size
   useEffect(
     function updateVideoSizeOnMount() {
-      videoElm.current && updateVideoSizeStore(videoElm.current);
+      if (videoElm.current) updateVideoSizeStore(videoElm.current);
     },
     [setVideoClientSize, updateVideoSizeStore, setVideoSize],
   );

ui/src/components/extensions/ATXPowerControl.tsx

@@ -1,11 +1,13 @@
-import { Button } from "@components/Button";
 import { LuHardDrive, LuPower, LuRotateCcw } from "react-icons/lu";
+import { useEffect, useState } from "react";
+
+import { Button } from "@components/Button";
 import Card from "@components/Card";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
-import { useEffect, useState } from "react";
 import notifications from "@/notifications";
+import LoadingSpinner from "@/components/LoadingSpinner";
+
 import { useJsonRpc } from "../../hooks/useJsonRpc";
-import LoadingSpinner from "../LoadingSpinner";
 
 const LONG_PRESS_DURATION = 3000; // 3 seconds for long press
 
@@ -102,11 +104,11 @@ export function ATXPowerControl() {
 
       {atxState === null ? (
         <Card className="flex h-[120px] items-center justify-center p-3">
-          <LoadingSpinner className="w-6 h-6 text-blue-500 dark:text-blue-400" />
+          <LoadingSpinner className="h-6 w-6 text-blue-500 dark:text-blue-400" />
         </Card>
       ) : (
         <Card className="h-[120px] animate-fadeIn opacity-0">
-          <div className="p-3 space-y-4">
+          <div className="space-y-4 p-3">
             {/* Control Buttons */}
             <div className="flex items-center space-x-2">
               <Button

ui/src/components/extensions/DCPowerControl.tsx

@@ -1,12 +1,13 @@
-import { Button } from "@components/Button";
 import { LuPower } from "react-icons/lu";
+import { useCallback, useEffect, useState } from "react";
+
+import { Button } from "@components/Button";
 import Card from "@components/Card";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
-import FieldLabel from "../FieldLabel";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
-import { useCallback, useEffect, useState } from "react";
 import notifications from "@/notifications";
-import LoadingSpinner from "../LoadingSpinner";
+import FieldLabel from "@components/FieldLabel";
+import LoadingSpinner from "@components/LoadingSpinner";
 
 interface DCPowerState {
   isOn: boolean;
@@ -59,11 +60,11 @@ export function DCPowerControl() {
 
       {powerState === null ? (
         <Card className="flex h-[160px] justify-center p-3">
-          <LoadingSpinner className="w-6 h-6 text-blue-500 dark:text-blue-400" />
+          <LoadingSpinner className="h-6 w-6 text-blue-500 dark:text-blue-400" />
         </Card>
       ) : (
         <Card className="h-[160px] animate-fadeIn opacity-0">
-          <div className="p-3 space-y-4">
+          <div className="space-y-4 p-3">
             {/* Power Controls */}
             <div className="flex items-center space-x-2">
               <Button

ui/src/components/extensions/SerialConsole.tsx

@@ -1,12 +1,13 @@
-import { Button } from "@components/Button";
 import { LuTerminal } from "react-icons/lu";
+import { useEffect, useState } from "react";
+
+import { Button } from "@components/Button";
 import Card from "@components/Card";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
-import { SelectMenuBasic } from "../SelectMenuBasic";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
-import { useEffect, useState } from "react";
 import notifications from "@/notifications";
 import { useUiStore } from "@/hooks/stores";
+import { SelectMenuBasic } from "@components/SelectMenuBasic";
 
 interface SerialSettings {
   baudRate: string;

ui/src/components/popovers/ExtensionPopover.tsx

@@ -1,19 +1,20 @@
 import { useEffect, useState } from "react";
+import { LuPower, LuTerminal, LuPlugZap } from "react-icons/lu";
+
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import Card, { GridCard } from "@components/Card";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
-import { Button } from "../Button";
-import { LuPower, LuTerminal, LuPlugZap } from "react-icons/lu";
 import { ATXPowerControl } from "@components/extensions/ATXPowerControl";
 import { DCPowerControl } from "@components/extensions/DCPowerControl";
 import { SerialConsole } from "@components/extensions/SerialConsole";
-import notifications from "../../notifications";
+import { Button } from "@components/Button";
+import notifications from "@/notifications";
 
 interface Extension {
   id: string;
   name: string;
   description: string;
-  icon: any;
+  icon: React.ElementType;
 }
 
 const AVAILABLE_EXTENSIONS: Extension[] = [
@@ -58,7 +59,9 @@ export default function ExtensionPopover() {
   const handleSetActiveExtension = (extension: Extension | null) => {
     send("setActiveExtension", { extensionId: extension?.id || "" }, resp => {
       if ("error" in resp) {
-        notifications.error(`Failed to set active extension: ${resp.error.data || "Unknown error"}`);
+        notifications.error(
+          `Failed to set active extension: ${resp.error.data || "Unknown error"}`,
+        );
         return;
       }
       setActiveExtension(extension);
@@ -80,7 +83,7 @@ export default function ExtensionPopover() {
 
   return (
     <GridCard>
-      <div className="p-4 py-3 space-y-4">
+      <div className="space-y-4 p-4 py-3">
         <div className="grid h-full grid-rows-headerBody">
           <div className="space-y-4">
             {activeExtension ? (
@@ -89,7 +92,7 @@ export default function ExtensionPopover() {
                 {renderActiveExtension()}
 
                 <div
-                  className="flex items-center justify-end space-x-2 opacity-0 animate-fadeIn"
+                  className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
                   style={{
                     animationDuration: "0.7s",
                     animationDelay: "0.2s",
@@ -110,7 +113,7 @@ export default function ExtensionPopover() {
                   title="Extensions"
                   description="Load and manage your extensions"
                 />
-                <Card className="opacity-0 animate-fadeIn">
+                <Card className="animate-fadeIn opacity-0">
                   <div className="w-full divide-y divide-slate-700/30 dark:divide-slate-600/30">
                     {AVAILABLE_EXTENSIONS.map(extension => (
                       <div

ui/src/components/popovers/MountPopover.tsx

@@ -1,11 +1,6 @@
-import { Button } from "@components/Button";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-import Card, { GridCard } from "@components/Card";
 import { PlusCircleIcon } from "@heroicons/react/20/solid";
 import { useMemo, forwardRef, useEffect, useCallback } from "react";
-import { formatters } from "@/utils";
-import { RemoteVirtualMediaState, useMountMediaStore, useRTCStore } from "@/hooks/stores";
-import { SettingsPageHeader } from "@components/SettingsPageheader";
 import {
   LuArrowUpFromLine,
   LuCheckCheck,
@@ -13,11 +8,17 @@ import {
   LuPlus,
   LuRadioReceiver,
 } from "react-icons/lu";
-import { useJsonRpc } from "@/hooks/useJsonRpc";
-import notifications from "../../notifications";
 import { useClose } from "@headlessui/react";
 import { useLocation } from "react-router-dom";
+
+import { Button } from "@components/Button";
+import Card, { GridCard } from "@components/Card";
+import { formatters } from "@/utils";
+import { RemoteVirtualMediaState, useMountMediaStore, useRTCStore } from "@/hooks/stores";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
+import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
+import notifications from "@/notifications";
 
 const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
   const diskDataChannelStats = useRTCStore(state => state.diskDataChannelStats);
@@ -194,7 +195,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
     <GridCard>
       <div className="space-y-4 p-4 py-3">
         <div ref={ref} className="grid h-full grid-rows-headerBody">
-          <div className="h-full space-y-4 ">
+          <div className="h-full space-y-4">
             <div className="space-y-4">
               <SettingsPageHeader
                 title="Virtual Media"

ui/src/components/popovers/PasteModal.tsx

@@ -1,15 +1,16 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { LuCornerDownLeft } from "react-icons/lu";
+import { ExclamationCircleIcon } from "@heroicons/react/16/solid";
+import { useClose } from "@headlessui/react";
+
 import { Button } from "@components/Button";
 import { GridCard } from "@components/Card";
 import { TextAreaWithLabel } from "@components/TextArea";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { useHidStore, useRTCStore, useUiStore } from "@/hooks/stores";
-import notifications from "../../notifications";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { LuCornerDownLeft } from "react-icons/lu";
-import { ExclamationCircleIcon } from "@heroicons/react/16/solid";
-import { useClose } from "@headlessui/react";
 import { chars, keys, modifiers } from "@/keyboardMappings";
+import notifications from "@/notifications";
 
 const hidKeyboardPayload = (keys: number[], modifier: number) => {
   return { keys, modifier };
@@ -59,6 +60,7 @@ export default function PasteModal() {
         });
       }
     } catch (error) {
+      console.error(error);
       notifications.error("Failed to paste text");
     }
   }, [rpcDataChannel?.readyState, send, setDisableVideoFocusTrap, setPasteMode]);
@@ -71,7 +73,7 @@ export default function PasteModal() {
 
   return (
     <GridCard>
-      <div className="p-4 py-3 space-y-4">
+      <div className="space-y-4 p-4 py-3">
         <div className="grid h-full grid-rows-headerBody">
           <div className="h-full space-y-4">
             <div className="space-y-4">
@@ -81,7 +83,7 @@ export default function PasteModal() {
               />
 
               <div
-                className="space-y-2 opacity-0 animate-fadeIn"
+                className="animate-fadeIn space-y-2 opacity-0"
                 style={{
                   animationDuration: "0.7s",
                   animationDelay: "0.1s",
@@ -120,8 +122,8 @@ export default function PasteModal() {
                     />
 
                     {invalidChars.length > 0 && (
-                      <div className="flex items-center mt-2 gap-x-2">
-                        <ExclamationCircleIcon className="w-4 h-4 text-red-500 dark:text-red-400" />
+                      <div className="mt-2 flex items-center gap-x-2">
+                        <ExclamationCircleIcon className="h-4 w-4 text-red-500 dark:text-red-400" />
                         <span className="text-xs text-red-500 dark:text-red-400">
                           The following characters won&apos;t be pasted:{" "}
                           {invalidChars.join(", ")}
@@ -135,7 +137,7 @@ export default function PasteModal() {
           </div>
         </div>
         <div
-          className="flex items-center justify-end opacity-0 animate-fadeIn gap-x-2"
+          className="flex animate-fadeIn items-center justify-end gap-x-2 opacity-0"
           style={{
             animationDuration: "0.7s",
             animationDelay: "0.2s",

ui/src/components/popovers/WakeOnLan/AddDeviceForm.tsx

@@ -1,8 +1,8 @@
-import { InputFieldWithLabel } from "@components/InputField";
 import { useState, useRef } from "react";
-import { LuPlus } from "react-icons/lu";
-import { Button } from "../../Button";
-import { LuArrowLeft } from "react-icons/lu";
+import { LuPlus, LuArrowLeft } from "react-icons/lu";
+
+import { InputFieldWithLabel } from "@/components/InputField";
+import { Button } from "@/components/Button";
 
 interface AddDeviceFormProps {
   onAddDevice: (name: string, macAddress: string) => void;
@@ -26,7 +26,7 @@ export default function AddDeviceForm({
   return (
     <div className="space-y-4">
       <div
-        className="space-y-4 opacity-0 animate-fadeIn"
+        className="animate-fadeIn space-y-4 opacity-0"
         style={{
           animationDuration: "0.5s",
           animationFillMode: "forwards",
@@ -73,7 +73,7 @@ export default function AddDeviceForm({
         />
       </div>
       <div
-        className="flex items-center justify-end space-x-2 opacity-0 animate-fadeIn"
+        className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.2s",

ui/src/components/popovers/WakeOnLan/DeviceList.tsx

@@ -1,8 +1,9 @@
-import { Button } from "@components/Button";
-import Card from "@components/Card";
-import { FieldError } from "@components/InputField";
 import { LuPlus, LuSend, LuTrash2 } from "react-icons/lu";
 
+import { Button } from "@/components/Button";
+import Card from "@/components/Card";
+import { FieldError } from "@/components/InputField";
+
 export interface StoredDevice {
   name: string;
   macAddress: string;
@@ -27,12 +28,14 @@ export default function DeviceList({
 }: DeviceListProps) {
   return (
     <div className="space-y-4">
-      <Card className="opacity-0 animate-fadeIn">
+      <Card className="animate-fadeIn opacity-0">
         <div className="w-full divide-y divide-slate-700/30 dark:divide-slate-600/30">
           {storedDevices.map((device, index) => (
-            <div key={index} className="flex items-center justify-between p-3 gap-x-2">
+            <div key={index} className="flex items-center justify-between gap-x-2 p-3">
               <div className="space-y-0.5">
-                <p className="text-sm font-semibold leading-none text-slate-900 dark:text-slate-100">{device?.name}</p>
+                <p className="text-sm font-semibold leading-none text-slate-900 dark:text-slate-100">
+                  {device?.name}
+                </p>
                 <p className="text-sm text-slate-600 dark:text-slate-400">
                   {device.macAddress?.toLowerCase()}
                 </p>
@@ -60,18 +63,13 @@ export default function DeviceList({
         </div>
       </Card>
       <div
-        className="flex items-center justify-end space-x-2 opacity-0 animate-fadeIn"
+        className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.2s",
         }}
       >
-        <Button
-          size="SM"
-          theme="blank"
-          text="Close"
-          onClick={onCancelWakeOnLanModal}
-        />
+        <Button size="SM" theme="blank" text="Close" onClick={onCancelWakeOnLanModal} />
         <Button
           size="SM"
           theme="primary"

ui/src/components/popovers/WakeOnLan/EmptyStateCard.tsx

@@ -1,7 +1,8 @@
-import Card from "@components/Card";
 import { PlusCircleIcon } from "@heroicons/react/16/solid";
 import { LuPlus } from "react-icons/lu";
-import { Button } from "../../Button";
+
+import Card from "@/components/Card";
+import { Button } from "@/components/Button";
 
 export default function EmptyStateCard({
   onCancelWakeOnLanModal,
@@ -11,15 +12,15 @@ export default function EmptyStateCard({
   setShowAddForm: (show: boolean) => void;
 }) {
   return (
-    <div className="space-y-4 select-none">
-      <Card className="opacity-0 animate-fadeIn">
+    <div className="select-none space-y-4">
+      <Card className="animate-fadeIn opacity-0">
         <div className="flex items-center justify-center py-8 text-center">
           <div className="space-y-3">
             <div className="space-y-1">
               <div className="inline-block">
                 <Card>
                   <div className="p-1">
-                    <PlusCircleIcon className="w-4 h-4 text-blue-700 shrink-0 dark:text-white" />
+                    <PlusCircleIcon className="h-4 w-4 shrink-0 text-blue-700 dark:text-white" />
                   </div>
                 </Card>
               </div>
@@ -34,7 +35,7 @@ export default function EmptyStateCard({
         </div>
       </Card>
       <div
-        className="flex items-center justify-end space-x-2 opacity-0 animate-fadeIn"
+        className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.2s",

ui/src/components/popovers/WakeOnLan/Index.tsx

@@ -1,10 +1,12 @@
+import { useCallback, useEffect, useState } from "react";
+import { useClose } from "@headlessui/react";
+
 import { GridCard } from "@components/Card";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { useRTCStore, useUiStore } from "@/hooks/stores";
 import notifications from "@/notifications";
-import { useCallback, useEffect, useState } from "react";
-import { useClose } from "@headlessui/react";
+
 import EmptyStateCard from "./EmptyStateCard";
 import DeviceList, { StoredDevice } from "./DeviceList";
 import AddDeviceForm from "./AddDeviceForm";
@@ -99,7 +101,7 @@ export default function WakeOnLanModal() {
 
   return (
     <GridCard>
-      <div className="p-4 py-3 space-y-4">
+      <div className="space-y-4 p-4 py-3">
         <div className="grid h-full grid-rows-headerBody">
           <div className="space-y-4">
             <SettingsPageHeader

ui/src/components/sidebar/connectionStats.tsx

@@ -1,9 +1,10 @@
-import SidebarHeader from "@components/SidebarHeader";
-import { GridCard } from "@components/Card";
-import { useRTCStore, useUiStore } from "@/hooks/stores";
-import StatChart from "@components/StatChart";
 import { useInterval } from "usehooks-ts";
 
+import SidebarHeader from "@/components/SidebarHeader";
+import { GridCard } from "@/components/Card";
+import { useRTCStore, useUiStore } from "@/hooks/stores";
+import StatChart from "@/components/StatChart";
+
 function createChartArray<T, K extends keyof T>(
   stream: Map<number, T>,
   metric: K,
@@ -120,7 +121,7 @@ export default function ConnectionStatsSidebar() {
                 <GridCard>
                   <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
                     {inboundRtpStats.size === 0 ? (
-                      <div className="flex flex-col items-center space-y-1 ">
+                      <div className="flex flex-col items-center space-y-1">
                         <p className="text-slate-700">Waiting for data...</p>
                       </div>
                     ) : isMetricSupported(inboundRtpStats, "packetsLost") ? (
@@ -130,7 +131,7 @@ export default function ConnectionStatsSidebar() {
                         unit=" packets"
                       />
                     ) : (
-                      <div className="flex flex-col items-center space-y-1 ">
+                      <div className="flex flex-col items-center space-y-1">
                         <p className="text-black">Metric not supported</p>
                       </div>
                     )}
@@ -149,7 +150,7 @@ export default function ConnectionStatsSidebar() {
                 <GridCard>
                   <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
                     {inboundRtpStats.size === 0 ? (
-                      <div className="flex flex-col items-center space-y-1 ">
+                      <div className="flex flex-col items-center space-y-1">
                         <p className="text-slate-700">Waiting for data...</p>
                       </div>
                     ) : isMetricSupported(candidatePairStats, "currentRoundTripTime") ? (
@@ -167,7 +168,7 @@ export default function ConnectionStatsSidebar() {
                         unit=" ms"
                       />
                     ) : (
-                      <div className="flex flex-col items-center space-y-1 ">
+                      <div className="flex flex-col items-center space-y-1">
                         <p className="text-black">Metric not supported</p>
                       </div>
                     )}
@@ -186,7 +187,7 @@ export default function ConnectionStatsSidebar() {
                 <GridCard>
                   <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
                     {inboundRtpStats.size === 0 ? (
-                      <div className="flex flex-col items-center space-y-1 ">
+                      <div className="flex flex-col items-center space-y-1">
                         <p className="text-slate-700">Waiting for data...</p>
                       </div>
                     ) : (
@@ -216,7 +217,7 @@ export default function ConnectionStatsSidebar() {
                 <GridCard>
                   <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
                     {inboundRtpStats.size === 0 ? (
-                      <div className="flex flex-col items-center space-y-1 ">
+                      <div className="flex flex-col items-center space-y-1">
                         <p className="text-slate-700">Waiting for data...</p>
                       </div>
                     ) : (