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/routes/adopt.tsx

@@ -1,7 +1,9 @@
 import { LoaderFunctionArgs, redirect } from "react-router-dom";
-import api from "../api";
+
 import { DEVICE_API } from "@/ui.config";
 
+import api from "../api";
+
 export interface CloudState {
   connected: boolean;
   url: string;

ui/src/routes/devices.$id.deregister.tsx

@@ -6,6 +6,8 @@ import {
   useActionData,
   useLoaderData,
 } from "react-router-dom";
+import { ChevronLeftIcon } from "@heroicons/react/16/solid";
+
 import { Button, LinkButton } from "@components/Button";
 import Card from "@components/Card";
 import { CardHeader } from "@components/CardHeader";
@@ -13,7 +15,6 @@ import DashboardNavbar from "@components/Header";
 import { User } from "@/hooks/stores";
 import { checkAuth } from "@/main";
 import Fieldset from "@components/Fieldset";
-import { ChevronLeftIcon } from "@heroicons/react/16/solid";
 import { CLOUD_API } from "@/ui.config";
 
 interface LoaderData {
@@ -36,6 +37,7 @@ const action = async ({ request }: ActionFunctionArgs) => {
       return { message: "There was an error renaming your device. Please try again." };
     }
   } catch (e) {
+    console.error(e);
     return { message: "There was an error renaming your device. Please try again." };
   }
 

ui/src/routes/devices.$id.mount.tsx

@@ -1,15 +1,4 @@
-import Card, { GridCard } from "@/components/Card";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button } from "@components/Button";
-import LogoBlueIcon from "@/assets/logo-blue.svg";
-import LogoWhiteIcon from "@/assets/logo-white.svg";
-import {
-  MountMediaState,
-  RemoteVirtualMediaState,
-  useMountMediaStore,
-  useRTCStore,
-} from "../hooks/stores";
-import { cx } from "../cva.config";
 import {
   LuGlobe,
   LuLink,
@@ -18,8 +7,15 @@ import {
   LuCheck,
   LuUpload,
 } from "react-icons/lu";
+import { PlusCircleIcon , ExclamationTriangleIcon } from "@heroicons/react/20/solid";
+import { TrashIcon } from "@heroicons/react/16/solid";
+import { useNavigate } from "react-router-dom";
+
+import Card, { GridCard } from "@/components/Card";
+import { Button } from "@components/Button";
+import LogoBlueIcon from "@/assets/logo-blue.svg";
+import LogoWhiteIcon from "@/assets/logo-white.svg";
 import { formatters } from "@/utils";
-import { PlusCircleIcon } from "@heroicons/react/20/solid";
 import AutoHeight from "@components/AutoHeight";
 import { InputFieldWithLabel } from "@/components/InputField";
 import DebianIcon from "@/assets/debian-icon.png";
@@ -28,14 +24,20 @@ import FedoraIcon from "@/assets/fedora-icon.png";
 import OpenSUSEIcon from "@/assets/opensuse-icon.png";
 import ArchIcon from "@/assets/arch-icon.png";
 import NetBootIcon from "@/assets/netboot-icon.svg";
-import { TrashIcon } from "@heroicons/react/16/solid";
-import { useJsonRpc } from "../hooks/useJsonRpc";
-import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
-import notifications from "../notifications";
 import Fieldset from "@/components/Fieldset";
-import { isOnDevice } from "../main";
 import { DEVICE_API } from "@/ui.config";
-import { useNavigate } from "react-router-dom";
+
+import { useJsonRpc } from "../hooks/useJsonRpc";
+import notifications from "../notifications";
+import { isOnDevice } from "../main";
+import { cx } from "../cva.config";
+import {
+  MountMediaState,
+  RemoteVirtualMediaState,
+  useMountMediaStore,
+  useRTCStore,
+} from "../hooks/stores";
+
 
 export default function MountRoute() {
   const navigate = useNavigate();

ui/src/routes/devices.$id.other-session.tsx

@@ -1,4 +1,5 @@
 import { useNavigate, useOutletContext } from "react-router-dom";
+
 import { GridCard } from "@/components/Card";
 import { Button } from "@components/Button";
 import LogoBlue from "@/assets/logo-blue.svg";

ui/src/routes/devices.$id.rename.tsx

@@ -6,8 +6,9 @@ import {
   useActionData,
   useLoaderData,
 } from "react-router-dom";
-import { Button, LinkButton } from "@components/Button";
 import { ChevronLeftIcon } from "@heroicons/react/16/solid";
+
+import { Button, LinkButton } from "@components/Button";
 import Card from "@components/Card";
 import { CardHeader } from "@components/CardHeader";
 import { InputFieldWithLabel } from "@components/InputField";
@@ -15,9 +16,10 @@ import DashboardNavbar from "@components/Header";
 import { User } from "@/hooks/stores";
 import { checkAuth } from "@/main";
 import Fieldset from "@components/Fieldset";
-import api from "../api";
 import { CLOUD_API } from "@/ui.config";
 
+import api from "../api";
+
 interface LoaderData {
   device: { id: string; name: string; user: { googleId: string } };
   user: User;
@@ -39,6 +41,7 @@ const action = async ({ params, request }: ActionFunctionArgs) => {
       return { message: "There was an error renaming your device. Please try again." };
     }
   } catch (e) {
+    console.error(e);
     return { message: "There was an error renaming your device. Please try again." };
   }
 
@@ -80,9 +83,9 @@ export default function DeviceIdRename() {
         picture={user?.picture}
       />
 
-      <div className="w-full h-full">
+      <div className="h-full w-full">
         <div className="mt-4">
-          <div className="w-full h-full px-4 mx-auto space-y-6 sm:max-w-6xl sm:px-8 md:max-w-7xl md:px-12 lg:max-w-8xl">
+          <div className="mx-auto h-full w-full space-y-6 px-4 sm:max-w-6xl sm:px-8 md:max-w-7xl md:px-12 lg:max-w-8xl">
             <div className="space-y-4">
               <LinkButton
                 size="SM"
@@ -100,7 +103,7 @@ export default function DeviceIdRename() {
 
                   <Fieldset>
                     <Form method="POST" className="max-w-sm space-y-4">
-                      <div className="relative group">
+                      <div className="group relative">
                         <InputFieldWithLabel
                           label="New device name"
                           type="text"

ui/src/routes/devices.$id.settings._index.tsx

@@ -1,4 +1,5 @@
 import { LoaderFunctionArgs, redirect } from "react-router-dom";
+
 import { getDeviceUiPath } from "../hooks/useAppNavigation";
 
 export function loader({ params }: LoaderFunctionArgs) {

ui/src/routes/devices.$id.settings.access._index.tsx

@@ -1,20 +1,22 @@
-import { SettingsPageHeader } from "@components/SettingsPageheader";
-import { SettingsItem } from "./devices.$id.settings";
 import { useLoaderData, useNavigate } from "react-router-dom";
-import { Button, LinkButton } from "../components/Button";
-import { DEVICE_API } from "../ui.config";
-import api from "../api";
-import { LocalDevice } from "./devices.$id";
-import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
-import { GridCard } from "../components/Card";
 import { ShieldCheckIcon } from "@heroicons/react/24/outline";
-import notifications from "../notifications";
 import { useCallback, useEffect, useState } from "react";
-import { useJsonRpc } from "../hooks/useJsonRpc";
-import { InputFieldWithLabel } from "../components/InputField";
-import { SelectMenuBasic } from "../components/SelectMenuBasic";
-import { SettingsSectionHeader } from "../components/SettingsSectionHeader";
-import { isOnDevice } from "../main";
+
+import api from "@/api";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
+import { GridCard } from "@/components/Card";
+import { Button, LinkButton } from "@/components/Button";
+import { InputFieldWithLabel } from "@/components/InputField";
+import { SelectMenuBasic } from "@/components/SelectMenuBasic";
+import { SettingsSectionHeader } from "@/components/SettingsSectionHeader";
+import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
+import notifications from "@/notifications";
+import { DEVICE_API } from "@/ui.config";
+import { useJsonRpc } from "@/hooks/useJsonRpc";
+import { isOnDevice } from "@/main";
+
+import { LocalDevice } from "./devices.$id";
+import { SettingsItem } from "./devices.$id.settings";
 import { CloudState } from "./adopt";
 
 export const loader = async () => {

ui/src/routes/devices.$id.settings.access.local-auth.tsx

@@ -1,9 +1,10 @@
 import { useState, useEffect } from "react";
+import { useLocation, useRevalidator } from "react-router-dom";
+
 import { Button } from "@components/Button";
 import { InputFieldWithLabel } from "@/components/InputField";
 import api from "@/api";
 import { useLocalAuthModalStore } from "@/hooks/stores";
-import { useLocation, useRevalidator } from "react-router-dom";
 import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
 
 export default function SecurityAccessLocalAuthRoute() {
@@ -53,6 +54,7 @@ export function Dialog({ onClose }: { onClose: () => void }) {
         setError(data.error || "An error occurred while setting the password");
       }
     } catch (error) {
+      console.error(error);
       setError("An error occurred while setting the password");
     }
   };
@@ -92,6 +94,7 @@ export function Dialog({ onClose }: { onClose: () => void }) {
         setError(data.error || "An error occurred while changing the password");
       }
     } catch (error) {
+      console.error(error);
       setError("An error occurred while changing the password");
     }
   };
@@ -113,6 +116,7 @@ export function Dialog({ onClose }: { onClose: () => void }) {
         setError(data.error || "An error occurred while disabling the password");
       }
     } catch (error) {
+      console.error(error);
       setError("An error occurred while disabling the password");
     }
   };

ui/src/routes/devices.$id.settings.advanced.tsx

@@ -1,16 +1,19 @@
-import { SettingsItem } from "./devices.$id.settings";
+
+import { useCallback, useState, useEffect } from "react";
+
+import { GridCard } from "@components/Card";
 
 import { SettingsPageHeader } from "../components/SettingsPageheader";
 import Checkbox from "../components/Checkbox";
-
 import { useJsonRpc } from "../hooks/useJsonRpc";
-import { useCallback, useState, useEffect } from "react";
 import notifications from "../notifications";
 import { TextAreaWithLabel } from "../components/TextArea";
 import { isOnDevice } from "../main";
 import { Button } from "../components/Button";
 import { useSettingsStore } from "../hooks/stores";
-import { GridCard } from "@components/Card";
+
+
+import { SettingsItem } from "./devices.$id.settings";
 
 export default function SettingsAdvancedRoute() {
   const [send] = useJsonRpc();

ui/src/routes/devices.$id.settings.appearance.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useState } from "react";
+
 import { SettingsPageHeader } from "../components/SettingsPageheader";
 import { SelectMenuBasic } from "../components/SelectMenuBasic";
+
 import { SettingsItem } from "./devices.$id.settings";
 
 export default function SettingsAppearanceRoute() {

ui/src/routes/devices.$id.settings.general._index.tsx

@@ -1,15 +1,17 @@
-import { SettingsPageHeader } from "../components/SettingsPageheader";
 
-import { SettingsItem } from "./devices.$id.settings";
-import { useState } from "react";
-import { useEffect } from "react";
+import { useState , useEffect } from "react";
+
 import { useJsonRpc } from "@/hooks/useJsonRpc";
+
+import { SettingsPageHeader } from "../components/SettingsPageheader";
 import { Button } from "../components/Button";
 import notifications from "../notifications";
 import Checkbox from "../components/Checkbox";
 import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
 import { useDeviceStore } from "../hooks/stores";
 
+import { SettingsItem } from "./devices.$id.settings";
+
 export default function SettingsGeneralRoute() {
   const [send] = useJsonRpc();
   const { navigateTo } = useDeviceUiNavigation();

ui/src/routes/devices.$id.settings.general.update.tsx

@@ -1,11 +1,12 @@
 import { useLocation, useNavigate } from "react-router-dom";
-import Card from "@/components/Card";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { CheckCircleIcon } from "@heroicons/react/20/solid";
+
+import Card from "@/components/Card";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { Button } from "@components/Button";
 import { UpdateState, useDeviceStore, useUpdateStore } from "@/hooks/stores";
 import notifications from "@/notifications";
-import { CheckCircleIcon } from "@heroicons/react/20/solid";
 import LoadingSpinner from "@/components/LoadingSpinner";
 import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
 

ui/src/routes/devices.$id.settings.hardware.tsx

@@ -1,13 +1,14 @@
+import { useEffect } from "react";
+
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { SettingsItem } from "@routes/devices.$id.settings";
 import { BacklightSettings, useSettingsStore } from "@/hooks/stores";
-import { useEffect } from "react";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
+import { SelectMenuBasic } from "@components/SelectMenuBasic";
+import { UsbDeviceSetting } from "@components/UsbDeviceSetting";
 
 import notifications from "../notifications";
-import { SelectMenuBasic } from "@components/SelectMenuBasic";
 import { UsbInfoSetting } from "../components/UsbInfoSetting";
-import { UsbDeviceSetting } from "@components/UsbDeviceSetting";
 import { FeatureFlag } from "../components/FeatureFlag";
 
 export default function SettingsHardwareRoute() {

ui/src/routes/devices.$id.settings.mouse.tsx

@@ -1,3 +1,6 @@
+import { CheckCircleIcon } from "@heroicons/react/16/solid";
+import { useCallback, useEffect, useState } from "react";
+
 import MouseIcon from "@/assets/mouse-icon.svg";
 import PointingFinger from "@/assets/pointing-finger.svg";
 import { GridCard } from "@/components/Card";
@@ -6,11 +9,11 @@ import { useDeviceSettingsStore, useSettingsStore } from "@/hooks/stores";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import notifications from "@/notifications";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
-import { CheckCircleIcon } from "@heroicons/react/16/solid";
-import { useCallback, useEffect, useState } from "react";
+
 import { FeatureFlag } from "../components/FeatureFlag";
 import { SelectMenuBasic } from "../components/SelectMenuBasic";
 import { useFeatureFlag } from "../hooks/useFeatureFlag";
+
 import { SettingsItem } from "./devices.$id.settings";
 
 type ScrollSensitivity = "low" | "default" | "high";

ui/src/routes/devices.$id.settings.tsx

@@ -1,5 +1,4 @@
 import { NavLink, Outlet, useLocation } from "react-router-dom";
-import Card from "@/components/Card";
 import {
   LuSettings,
   LuKeyboard,
@@ -10,8 +9,11 @@ import {
   LuArrowLeft,
   LuPalette,
 } from "react-icons/lu";
-import { LinkButton } from "../components/Button";
 import React, { useEffect, useRef, useState } from "react";
+
+import Card from "@/components/Card";
+
+import { LinkButton } from "../components/Button";
 import { cx } from "../cva.config";
 import { useUiStore } from "../hooks/stores";
 import useKeyboard from "../hooks/useKeyboard";

ui/src/routes/devices.$id.settings.video.tsx

@@ -1,12 +1,14 @@
-import { SettingsPageHeader } from "@components/SettingsPageheader";
-import { SettingsItem } from "./devices.$id.settings";
+import { useState, useEffect } from "react";
+
 import { Button } from "@/components/Button";
 import { TextAreaWithLabel } from "@/components/TextArea";
-
 import { useJsonRpc } from "@/hooks/useJsonRpc";
-import { useState, useEffect } from "react";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
+
 import notifications from "../notifications";
 import { SelectMenuBasic } from "../components/SelectMenuBasic";
+
+import { SettingsItem } from "./devices.$id.settings";
 const defaultEdid =
   "00ffffffffffff0052620188008888881c150103800000780a0dc9a05747982712484c00000001010101010101010101010101010101023a801871382d40582c4500c48e2100001e011d007251d01e206e285500c48e2100001e000000fc00543734392d6648443732300a20000000fd00147801ff1d000a202020202020017b";
 const edids = [

ui/src/routes/devices.$id.setup.tsx

@@ -1,8 +1,3 @@
-import SimpleNavbar from "@components/SimpleNavbar";
-import GridBackground from "@components/GridBackground";
-import Container from "@components/Container";
-import StepCounter from "@components/StepCounter";
-import Fieldset from "@components/Fieldset";
 import {
   ActionFunctionArgs,
   Form,
@@ -12,12 +7,19 @@ import {
   useParams,
   useSearchParams,
 } from "react-router-dom";
+
+import SimpleNavbar from "@components/SimpleNavbar";
+import GridBackground from "@components/GridBackground";
+import Container from "@components/Container";
+import StepCounter from "@components/StepCounter";
+import Fieldset from "@components/Fieldset";
 import { InputFieldWithLabel } from "@components/InputField";
 import { Button } from "@components/Button";
 import { checkAuth } from "@/main";
-import api from "../api";
 import { CLOUD_API } from "@/ui.config";
 
+import api from "../api";
+
 const loader = async ({ params }: LoaderFunctionArgs) => {
   await checkAuth();
   const res = await fetch(`${CLOUD_API}/devices/${params.id}`, {

ui/src/routes/devices.$id.tsx

@@ -1,4 +1,20 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  LoaderFunctionArgs,
+  Outlet,
+  Params,
+  redirect,
+  useLoaderData,
+  useLocation,
+  useNavigate,
+  useOutlet,
+  useParams,
+  useSearchParams,
+} from "react-router-dom";
+import { useInterval } from "usehooks-ts";
+import FocusTrap from "focus-trap-react";
+import { motion, AnimatePresence } from "framer-motion";
+
 import { cx } from "@/cva.config";
 import {
   DeviceSettingsState,
@@ -16,36 +32,23 @@ import {
   VideoState,
 } from "@/hooks/stores";
 import WebRTCVideo from "@components/WebRTCVideo";
-import {
-  LoaderFunctionArgs,
-  Outlet,
-  Params,
-  redirect,
-  useLoaderData,
-  useLocation,
-  useNavigate,
-  useOutlet,
-  useParams,
-  useSearchParams,
-} from "react-router-dom";
 import { checkAuth, isInCloud, isOnDevice } from "@/main";
 import DashboardNavbar from "@components/Header";
-import { useInterval } from "usehooks-ts";
 import ConnectionStatsSidebar from "@/components/sidebar/connectionStats";
 import { JsonRpcRequest, useJsonRpc } from "@/hooks/useJsonRpc";
-import UpdateInProgressStatusCard from "../components/UpdateInProgressStatusCard";
-import api from "../api";
-import { DeviceStatus } from "./welcome-local";
-import FocusTrap from "focus-trap-react";
 import Terminal from "@components/Terminal";
 import { CLOUD_API, DEVICE_API } from "@/ui.config";
+
+import UpdateInProgressStatusCard from "../components/UpdateInProgressStatusCard";
+import api from "../api";
 import Modal from "../components/Modal";
-import { motion, AnimatePresence } from "motion/react";
 import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
 import { FeatureFlagProvider } from "../providers/FeatureFlagProvider";
-import { SystemVersionInfo } from "./devices.$id.settings.general.update";
 import notifications from "../notifications";
 
+import { SystemVersionInfo } from "./devices.$id.settings.general.update";
+import { DeviceStatus } from "./welcome-local";
+
 interface LocalLoaderResp {
   authMode: "password" | "noPassword" | null;
 }

ui/src/routes/devices.tsx

@@ -1,4 +1,6 @@
 import { useLoaderData, useRevalidator } from "react-router-dom";
+import { LuMonitorSmartphone } from "react-icons/lu";
+import { ArrowRightIcon } from "@heroicons/react/16/solid";
 
 import DashboardNavbar from "@components/Header";
 import { LinkButton } from "@components/Button";
@@ -7,8 +9,6 @@ import useInterval from "@/hooks/useInterval";
 import { checkAuth } from "@/main";
 import { User } from "@/hooks/stores";
 import EmptyCard from "@components/EmptyCard";
-import { LuMonitorSmartphone } from "react-icons/lu";
-import { ArrowRightIcon } from "@heroicons/react/16/solid";
 import { CLOUD_API } from "@/ui.config";
 
 interface LoaderData {
@@ -49,8 +49,8 @@ export default function DevicesRoute() {
         />
 
         <div className="flex h-full overflow-hidden">
-          <div className="w-full h-full px-4 mx-auto space-y-6 sm:max-w-6xl sm:px-8 md:max-w-7xl md:px-12 lg:max-w-8xl">
-            <div className="flex items-center justify-between pb-4 mt-8 border-b border-b-slate-800/20 dark:border-b-slate-300/20">
+          <div className="mx-auto h-full w-full space-y-6 px-4 sm:max-w-6xl sm:px-8 md:max-w-7xl md:px-12 lg:max-w-8xl">
+            <div className="mt-8 flex items-center justify-between border-b border-b-slate-800/20 pb-4 dark:border-b-slate-300/20">
               <div>
                 <h1 className="text-xl font-bold text-black dark:text-white">
                   Cloud KVMs

ui/src/routes/login-local.tsx

@@ -1,19 +1,22 @@
+import { ActionFunctionArgs, Form, redirect, useActionData } from "react-router-dom";
+import { useState } from "react";
+import { LuEye, LuEyeOff } from "react-icons/lu";
+
 import SimpleNavbar from "@components/SimpleNavbar";
 import GridBackground from "@components/GridBackground";
 import Container from "@components/Container";
 import Fieldset from "@components/Fieldset";
-import { ActionFunctionArgs, Form, redirect, useActionData } from "react-router-dom";
 import { InputFieldWithLabel } from "@components/InputField";
 import { Button } from "@components/Button";
-import { useState } from "react";
-import { LuEye, LuEyeOff } from "react-icons/lu";
 import LogoBlueIcon from "@/assets/logo-blue.png";
 import LogoWhiteIcon from "@/assets/logo-white.svg";
-import api from "../api";
-import { DeviceStatus } from "./welcome-local";
-import ExtLink from "../components/ExtLink";
 import { DEVICE_API } from "@/ui.config";
 
+import api from "../api";
+import ExtLink from "../components/ExtLink";
+
+import { DeviceStatus } from "./welcome-local";
+
 const loader = async () => {
   const res = await api
     .GET(`${DEVICE_API}/device/status`)
@@ -31,12 +34,9 @@ const action = async ({ request }: ActionFunctionArgs) => {
   const password = formData.get("password");
 
   try {
-    const response = await api.POST(
-      `${DEVICE_API}/auth/login-local`,
-      {
-        password,
-      },
-    );
+    const response = await api.POST(`${DEVICE_API}/auth/login-local`, {
+      password,
+    });
 
     if (response.ok) {
       return redirect("/");
@@ -44,6 +44,7 @@ const action = async ({ request }: ActionFunctionArgs) => {
       return { error: "Invalid password" };
     }
   } catch (error) {
+    console.error(error);
     return { error: "An error occurred while logging in" };
   }
 };
@@ -58,22 +59,28 @@ export default function LoginLocalRoute() {
       <div className="grid min-h-screen grid-rows-layout">
         <SimpleNavbar />
         <Container>
-          <div className="flex items-center justify-center w-full h-full isolate">
-            <div className="max-w-2xl -mt-32 space-y-8">
+          <div className="isolate flex h-full w-full items-center justify-center">
+            <div className="-mt-32 max-w-2xl space-y-8">
               <div className="flex items-center justify-center">
-                <img src={LogoWhiteIcon} alt="" className="-ml-4 h-[32px] hidden dark:block" />
+                <img
+                  src={LogoWhiteIcon}
+                  alt=""
+                  className="-ml-4 hidden h-[32px] dark:block"
+                />
                 <img src={LogoBlueIcon} alt="" className="-ml-4 h-[32px] dark:hidden" />
               </div>
 
               <div className="space-y-2 text-center">
-                <h1 className="text-4xl font-semibold text-black dark:text-white">Welcome back to JetKVM</h1>
+                <h1 className="text-4xl font-semibold text-black dark:text-white">
+                  Welcome back to JetKVM
+                </h1>
                 <p className="font-medium text-slate-600 dark:text-slate-400">
                   Enter your password to access your JetKVM.
                 </p>
               </div>
 
               <Fieldset className="space-y-12">
-                <Form method="POST" className="max-w-sm mx-auto space-y-4">
+                <Form method="POST" className="mx-auto max-w-sm space-y-4">
                   <div className="space-y-4">
                     <InputFieldWithLabel
                       label="Password"
@@ -88,14 +95,14 @@ export default function LoginLocalRoute() {
                             onClick={() => setShowPassword(false)}
                             className="pointer-events-auto"
                           >
-                            <LuEye className="w-4 h-4 cursor-pointer text-slate-500 dark:text-slate-400" />
+                            <LuEye className="h-4 w-4 cursor-pointer text-slate-500 dark:text-slate-400" />
                           </div>
                         ) : (
                           <div
                             onClick={() => setShowPassword(true)}
                             className="pointer-events-auto"
                           >
-                            <LuEyeOff className="w-4 h-4 cursor-pointer text-slate-500 dark:text-slate-400" />
+                            <LuEyeOff className="h-4 w-4 cursor-pointer text-slate-500 dark:text-slate-400" />
                           </div>
                         )
                       }
@@ -111,7 +118,7 @@ export default function LoginLocalRoute() {
                     textAlign="center"
                   />
 
-                  <div className="flex justify-start mt-4 text-xs text-slate-500 dark:text-slate-400">
+                  <div className="mt-4 flex justify-start text-xs text-slate-500 dark:text-slate-400">
                     <ExtLink
                       href="https://jetkvm.com/docs/networking/local-access#reset-password"
                       className="hover:underline"

ui/src/routes/login.tsx

@@ -1,6 +1,7 @@
-import AuthLayout from "@components/AuthLayout";
 import { useLocation, useSearchParams } from "react-router-dom";
 
+import AuthLayout from "@components/AuthLayout";
+
 export default function LoginRoute() {
   const [sq] = useSearchParams();
   const location = useLocation();

ui/src/routes/signup.tsx

@@ -1,6 +1,7 @@
-import AuthLayout from "@components/AuthLayout";
 import { useLocation, useSearchParams } from "react-router-dom";
 
+import AuthLayout from "@components/AuthLayout";
+
 export default function SignupRoute() {
   const [sq] = useSearchParams();
   const location = useLocation();

ui/src/routes/welcome-local.mode.tsx

@@ -1,15 +1,19 @@
+import { ActionFunctionArgs, Form, redirect, useActionData } from "react-router-dom";
+import { useState } from "react";
+
 import GridBackground from "@components/GridBackground";
 import Container from "@components/Container";
-import { ActionFunctionArgs, Form, redirect, useActionData } from "react-router-dom";
 import { Button } from "@components/Button";
-import { useState } from "react";
-import { GridCard } from "../components/Card";
 import LogoBlueIcon from "@/assets/logo-blue.png";
 import LogoWhiteIcon from "@/assets/logo-white.svg";
+import { DEVICE_API } from "@/ui.config";
+
+import { GridCard } from "../components/Card";
 import { cx } from "../cva.config";
 import api from "../api";
+
 import { DeviceStatus } from "./welcome-local";
-import { DEVICE_API } from "@/ui.config";
+
 
 const loader = async () => {
   const res = await api

ui/src/routes/welcome-local.password.tsx

@@ -1,17 +1,20 @@
+import { ActionFunctionArgs, Form, redirect, useActionData } from "react-router-dom";
+import { useState, useRef, useEffect } from "react";
+import { LuEye, LuEyeOff } from "react-icons/lu";
+
 import GridBackground from "@components/GridBackground";
 import Container from "@components/Container";
 import Fieldset from "@components/Fieldset";
-import { ActionFunctionArgs, Form, redirect, useActionData } from "react-router-dom";
 import { InputFieldWithLabel } from "@components/InputField";
 import { Button } from "@components/Button";
-import { useState, useRef, useEffect } from "react";
-import { LuEye, LuEyeOff } from "react-icons/lu";
 import LogoBlueIcon from "@/assets/logo-blue.png";
 import LogoWhiteIcon from "@/assets/logo-white.svg";
-import api from "../api";
-import { DeviceStatus } from "./welcome-local";
 import { DEVICE_API } from "@/ui.config";
 
+import api from "../api";
+
+import { DeviceStatus } from "./welcome-local";
+
 const loader = async () => {
   const res = await api
     .GET(`${DEVICE_API}/device/status`)

ui/src/routes/welcome-local.tsx

@@ -1,4 +1,7 @@
 import { useEffect, useState } from "react";
+import { cx } from "cva";
+import { redirect } from "react-router-dom";
+
 import GridBackground from "@components/GridBackground";
 import Container from "@components/Container";
 import { LinkButton } from "@components/Button";
@@ -6,11 +9,12 @@ import LogoBlueIcon from "@/assets/logo-blue.png";
 import LogoWhiteIcon from "@/assets/logo-white.svg";
 import DeviceImage from "@/assets/jetkvm-device-still.png";
 import LogoMark from "@/assets/logo-mark.png";
-import { cx } from "cva";
-import api from "../api";
-import { redirect } from "react-router-dom";
 import { DEVICE_API } from "@/ui.config";
 
+import api from "../api";
+
+
+
 export interface DeviceStatus {
   isSetup: boolean;
 }