Lint fix pass with all rules enforced.

Bumped devcontainer
Bump more packages

Author: IDisposable

.devcontainer/docker/devcontainer.json

@@ -4,7 +4,7 @@
   "features": {
     "ghcr.io/devcontainers/features/node:1": {
       // Should match what is defined in ui/package.json
-      "version": "22.20.0"
+      "version": "22.21.1"
     }
   },
   "mounts": [

.devcontainer/podman/devcontainer.json

@@ -4,7 +4,7 @@
   "features": {
     "ghcr.io/devcontainers/features/node:1": {
       // Should match what is defined in ui/package.json
-      "version": "22.20.0"
+      "version": "22.21.1"
     }
   },
   "runArgs": [

ui/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "kvm-ui",
   "private": true,
-  "version": "2025.11.11.1900",
+  "version": "2025.11.20.0300",
   "type": "module",
   "engines": {
     "node": "^22.21.1"
@@ -47,11 +47,11 @@
     "react": "^19.2.0",
     "react-animate-height": "^3.2.3",
     "react-dom": "^19.2.0",
-    "react-hook-form": "^7.66.0",
+    "react-hook-form": "^7.66.1",
     "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0",
-    "react-router": "^7.9.5",
-    "react-simple-keyboard": "^3.8.133",
+    "react-router": "^7.9.6",
+    "react-simple-keyboard": "^3.8.136",
     "react-use-websocket": "^4.13.0",
     "react-xtermjs": "^1.0.10",
     "recharts": "^3.4.1",
@@ -61,25 +61,25 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.4.1",
+    "@eslint/compat": "^2.0.0",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.39.1",
     "@inlang/cli": "^3.0.12",
-    "@inlang/paraglide-js": "^2.4.0",
+    "@inlang/paraglide-js": "^2.5.0",
     "@inlang/plugin-m-function-matcher": "^2.1.0",
     "@inlang/plugin-message-format": "^4.0.0",
     "@inlang/sdk": "^2.4.9",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/postcss": "^4.1.17",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.17",
-    "@types/react": "^19.2.3",
-    "@types/react-dom": "^19.2.2",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
     "@types/semver": "^7.7.1",
-    "@types/validator": "^13.15.5",
-    "@typescript-eslint/eslint-plugin": "^8.46.4",
-    "@typescript-eslint/parser": "^8.46.4",
-    "@vitejs/plugin-react-swc": "^4.2.1",
+    "@types/validator": "^13.15.10",
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@typescript-eslint/parser": "^8.47.0",
+    "@vitejs/plugin-react-swc": "^4.2.2",
     "autoprefixer": "^10.4.22",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
@@ -95,7 +95,7 @@
     "prettier-plugin-tailwindcss": "^0.7.1",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.4",
+    "typescript-eslint": "^8.47.0",
     "vite": "^7.2.2",
     "vite-tsconfig-paths": "^5.1.4"
   }

ui/package.json

@@ -6,12 +6,7 @@ import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import { CommandLineIcon } from "@heroicons/react/20/solid";
 
 import { cx } from "@/cva.config";
-import {
-  useHidStore,
-  useMountMediaStore,
-  useSettingsStore,
-  useUiStore,
-} from "@hooks/stores";
+import { useHidStore, useMountMediaStore, useSettingsStore, useUiStore } from "@hooks/stores";
 import { useDeviceUiNavigation } from "@hooks/useAppNavigation";
 import { Button } from "@components/Button";
 import Container from "@components/Container";
@@ -28,7 +23,8 @@ export default function Actionbar({
 }) {
   const { navigateTo } = useDeviceUiNavigation();
   const { isVirtualKeyboardEnabled, setVirtualKeyboardEnabled } = useHidStore();
-  const { setDisableVideoFocusTrap, terminalType, setTerminalType, toggleSidebarView } = useUiStore();
+  const { setDisableVideoFocusTrap, terminalType, setTerminalType, toggleSidebarView } =
+    useUiStore();
   const { remoteVirtualMediaState } = useMountMediaStore();
   const { developerMode } = useSettingsStore();
 
@@ -246,10 +242,7 @@ export default function Actionbar({
               theme="light"
               text={m.action_bar_connection_stats()}
               LeadingIcon={({ className }) => (
-                <LuSignal
-                  className={cx(className, "mb-0.5 text-green-500")}
-                  strokeWidth={4}
-                />
+                <LuSignal className={cx(className, "mb-0.5 text-green-500")} strokeWidth={4} />
               )}
               onClick={() => {
                 toggleSidebarView("connection-stats");
@@ -264,7 +257,7 @@ export default function Actionbar({
               LeadingIcon={LuSettings}
               onClick={() => {
                 setDisableVideoFocusTrap(true);
-                navigateTo("/settings")
+                navigateTo("/settings");
               }}
             />
           </div>

ui/src/components/ActionBar.tsx

@@ -55,22 +55,16 @@ export default function AuthLayout({
                 </div>
               ) : null}
               <div className="space-y-2 text-center">
-                <h1 className="text-4xl font-semibold text-black dark:text-white">
-                  {title}
-                </h1>
+                <h1 className="text-4xl font-semibold text-black dark:text-white">{title}</h1>
                 <p className="text-slate-600 dark:text-slate-400">{description}</p>
               </div>
 
               <Fieldset className="space-y-12">
                 <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} />
-                    ) : null}
-                    {returnTo ? (
-                      <input type="hidden" name="returnTo" value={returnTo} />
-                    ) : null}
+                    {deviceId ? <input type="hidden" name="deviceId" value={deviceId} /> : null}
+                    {returnTo ? <input type="hidden" name="returnTo" value={returnTo} /> : null}
                     <Button
                       size="LG"
                       theme="light"
@@ -80,8 +74,7 @@ export default function AuthLayout({
                       textAlign="center"
                       type="submit"
                       loading={
-                        (navigation.state === "submitting" ||
-                          navigation.state === "loading") &&
+                        (navigation.state === "submitting" || navigation.state === "loading") &&
                         navigation.formMethod?.toLowerCase() === "post" &&
                         navigation.formAction?.includes("auth/google")
                       }

ui/src/components/AuthLayout.tsx

@@ -16,25 +16,25 @@ const sizes = {
 const themes = {
   primary: cx(
     // Base styles
-    "bg-blue-700 dark:border-blue-600 border border-blue-900/60 text-white shadow-sm",
+    "border border-blue-900/60 bg-blue-700 text-white shadow-sm dark:border-blue-600",
     // Hover states
     "group-hover:bg-blue-800",
     // Active states
     "group-active:bg-blue-900",
   ),
   danger: cx(
     // Base styles
-    "bg-red-600 text-white border-red-700 shadow-xs shadow-red-200/80 dark:border-red-600 dark:shadow-red-900/20",
+    "border-red-700 bg-red-600 text-white shadow-xs shadow-red-200/80 dark:border-red-600 dark:shadow-red-900/20",
     // Hover states
-    "group-hover:bg-red-700 group-hover:border-red-800 dark:group-hover:bg-red-700 dark:group-hover:border-red-600",
+    "group-hover:border-red-800 group-hover:bg-red-700 dark:group-hover:border-red-600 dark:group-hover:bg-red-700",
     // Active states
     "group-active:bg-red-800 dark:group-active:bg-red-800",
     // Focus states
     "group-focus:ring-red-700 dark:group-focus:ring-red-600",
   ),
   light: cx(
     // Base styles
-    "bg-white text-black border-slate-800/30 shadow-xs dark:bg-slate-800 dark:border-slate-300/20 dark:text-white",
+    "border-slate-800/30 bg-white text-black shadow-xs dark:border-slate-300/20 dark:bg-slate-800 dark:text-white",
     // Hover states
     "group-hover:bg-blue-50/80 dark:group-hover:bg-slate-700",
     // Active states
@@ -44,7 +44,7 @@ const themes = {
   ),
   lightDanger: cx(
     // Base styles
-    "bg-white text-black border-red-400/60 shadow-xs",
+    "border-red-400/60 bg-white text-black shadow-xs",
     // Hover states
     "group-hover:bg-red-50/80",
     // Active states
@@ -54,9 +54,9 @@ const themes = {
   ),
   blank: cx(
     // Base styles
-    "bg-white/0 text-black border-transparent dark:text-white",
+    "border-transparent bg-white/0 text-black dark:text-white",
     // Hover states
-    "group-hover:bg-white group-hover:border-slate-800/30 group-hover:shadow-sm dark:group-hover:bg-slate-700 dark:group-hover:border-slate-600",
+    "group-hover:border-slate-800/30 group-hover:bg-white group-hover:shadow-sm dark:group-hover:border-slate-600 dark:group-hover:bg-slate-700",
     // Active states
     "group-active:bg-slate-100/80",
   ),
@@ -65,16 +65,16 @@ const themes = {
 const btnVariants = cva({
   base: cx(
     // Base styles
-    "border rounded-sm select-none",
+    "rounded-sm border select-none",
     // Size classes
-    "justify-center items-center shrink-0",
+    "shrink-0 items-center justify-center",
     // Transition classes
     "outline-hidden transition-all duration-200",
     // Text classes
-    "font-display text-center font-medium leading-tight",
+    "text-center font-display leading-tight font-medium",
     // States
-    "group-focus:outline-hidden group-focus:ring-2 group-focus:ring-offset-2 group-focus:ring-blue-700",
-    "group-disabled:opacity-50 group-disabled:pointer-events-none",
+    "group-focus:ring-2 group-focus:ring-blue-700 group-focus:ring-offset-2 group-focus:outline-hidden",
+    "group-disabled:pointer-events-none group-disabled:opacity-50",
   ),
 
   variants: {
@@ -115,8 +115,7 @@ interface ButtonContentPropsType {
 }
 
 function ButtonContent(props: ButtonContentPropsType) {
-  const { text, LeadingIcon, TrailingIcon, fullWidth, className, textAlign, loading } =
-    props;
+  const { text, LeadingIcon, TrailingIcon, fullWidth, className, textAlign, loading } = props;
 
   // Based on the size prop, we'll use the corresponding variant classnames
   const iconClassName = iconVariants(props);
@@ -136,9 +135,7 @@ function ButtonContent(props: ButtonContentPropsType) {
             <LoadingSpinner className={cx(iconClassName, "animate-spin")} />
           </div>
         ) : (
-          LeadingIcon && (
-            <LeadingIcon className={cx(iconClassName, "shrink-0 justify-start")} />
-          )
+          LeadingIcon && <LeadingIcon className={cx(iconClassName, "shrink-0 justify-start")} />
         )}
 
         {text && typeof text === "string" ? (
@@ -147,9 +144,7 @@ function ButtonContent(props: ButtonContentPropsType) {
           text
         )}
 
-        {TrailingIcon && (
-          <TrailingIcon className={cx(iconClassName, "shrink-0 justify-end")} />
-        )}
+        {TrailingIcon && <TrailingIcon className={cx(iconClassName, "shrink-0 justify-end")} />}
       </div>
     </div>
   );
@@ -175,7 +170,7 @@ type ButtonPropsType = Pick<
 export const Button = React.forwardRef<HTMLButtonElement, ButtonPropsType>(
   ({ type, disabled, onClick, formNoValidate, loading, fetcher, ...props }, ref) => {
     const classes = cx(
-      "group outline-hidden cursor-pointer",
+      "group cursor-pointer outline-hidden",
       props.fullWidth ? "w-full" : "",
       loading ? "pointer-events-none" : "",
     );
@@ -212,7 +207,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonPropsType>(
 Button.displayName = "Button";
 
 type LinkPropsType = Pick<LinkProps, "to"> &
-  React.ComponentProps<typeof ButtonContent> & { disabled?: boolean, reloadDocument?: boolean };
+  React.ComponentProps<typeof ButtonContent> & { disabled?: boolean; reloadDocument?: boolean };
 export const LinkButton = ({ to, ...props }: LinkPropsType) => {
   const classes = cx(
     "group outline-hidden",
@@ -241,7 +236,7 @@ type LabelPropsType = Pick<HTMLLabelElement, "htmlFor"> &
   React.ComponentProps<typeof ButtonContent> & { disabled?: boolean };
 export const LabelButton = ({ htmlFor, ...props }: LabelPropsType) => {
   const classes = cx(
-    "group outline-hidden block cursor-pointer",
+    "group block cursor-pointer outline-hidden",
     props.disabled ? "pointer-events-none opacity-70!" : "",
     props.fullWidth ? "w-full" : "",
     props.loading ? "pointer-events-none" : "",

ui/src/components/Button.tsx

@@ -8,10 +8,12 @@ interface Props {
 
 export const CardHeader = ({ headline, description, Button }: Props) => {
   return (
-    <div className="flex items-center justify-between pb-0 gap-x-4">
-      <div className="space-y-1 grow">
-        <h3 className="text-lg font-bold leading-none text-black dark:text-white">{headline}</h3>
-        {description && <div className="text-sm text-slate-700 dark:text-slate-300">{description}</div>}
+    <div className="flex items-center justify-between gap-x-4 pb-0">
+      <div className="grow space-y-1">
+        <h3 className="text-lg leading-none font-bold text-black dark:text-white">{headline}</h3>
+        {description && (
+          <div className="text-sm text-slate-700 dark:text-slate-300">{description}</div>
+        )}
       </div>
       {Button && <div>{Button}</div>}
     </div>

ui/src/components/CardHeader.tsx

@@ -15,7 +15,7 @@ const checkboxVariants = cva({
     "form-checkbox block rounded",
 
     // Colors
-    "border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-800 checked:accent-blue-700 checked:dark:accent-blue-500 transition-colors",
+    "border-slate-300 bg-slate-50 transition-colors checked:accent-blue-700 dark:border-slate-600 dark:bg-slate-800 checked:dark:accent-blue-500",
 
     // Hover
     "hover:bg-slate-200/50 dark:hover:bg-slate-700/50",
@@ -24,7 +24,7 @@ const checkboxVariants = cva({
     "active:bg-slate-200 dark:active:bg-slate-700",
 
     // Focus
-    "focus:border-slate-300 dark:focus:border-slate-600 focus:outline-hidden focus:ring-2 focus:ring-blue-700 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900",
+    "focus:border-slate-300 focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 focus:outline-hidden dark:focus:border-slate-600 dark:focus:ring-blue-500 dark:focus:ring-offset-slate-900",
 
     // Disabled
     "disabled:pointer-events-none disabled:opacity-30",
@@ -41,9 +41,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckBoxProps>(function Checkbox(
   ref,
 ) {
   const classes = checkboxVariants({ size });
-  return (
-    <input ref={ref} {...props} type="checkbox" className={clsx(classes, className)} />
-  );
+  return <input ref={ref} {...props} type="checkbox" className={clsx(classes, className)} />;
 });
 Checkbox.displayName = "Checkbox";
 

ui/src/components/Checkbox.tsx

@@ -74,11 +74,11 @@ export function Combobox({
                 "dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700 dark:active:bg-slate-800/60",
 
                 // Focus
-                "focus:outline-blue-600 focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 dark:focus:outline-blue-500 dark:focus:ring-blue-500",
+                "focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 focus:outline-blue-600 dark:focus:ring-blue-500 dark:focus:outline-blue-500",
 
                 // Disabled
                 disabled &&
-                "pointer-events-none select-none bg-slate-50 text-slate-500/80 disabled:hover:bg-white dark:bg-slate-800 dark:text-slate-400/80 dark:disabled:hover:bg-slate-800",
+                  "pointer-events-none bg-slate-50 text-slate-500/80 select-none disabled:hover:bg-white dark:bg-slate-800 dark:text-slate-400/80 dark:disabled:hover:bg-slate-800",
               )}
               placeholder={disabled ? disabledMessage : placeholder}
               displayValue={displayValue}
@@ -95,7 +95,7 @@ export function Combobox({
                   value={option}
                   className={clsx(
                     // General styling
-                    "cursor-default select-none px-4 py-2",
+                    "cursor-default px-4 py-2 select-none",
 
                     // Hover and active states
                     "hover:bg-blue-50/80 ui-active:bg-blue-50/80 ui-active:text-blue-900",