chore: Upgrade UI vite and tailwind packages #443

IDisposable · 2025-05-14T01:01:03Z

Vite 5.2.0 -> 6.3.5
@vitejs/plugin-basic-ssl 1.2.0 -> 2.0.0
cva: 1.0.0-beta.1 -> 1.0.0-beta.3
focus-trap-react 10.2.3 -> 11.0.3
framer-motion 11.15.0 -> 12.11.0
@tailwindcss/postcss 4.1.6
@tailwindcss/vite 4.1.6
tailwind 3.4.17 -> 4.1.6
tailwind-merge 2.5.5 -> 3.3.0

Minor updates:
@headlessui/react 2.2.2 -> 2.2.3
@types/react 19.1.3 -> 19.1.4
@types/react-dom 19.1.3 -> 19.1.5
@typescript-eslint/eslint-plugin 8.32.0 -> 8.32.1
@typescript-eslint/parser 8.32.0 -> 8.32.1
react-simple-keyboard 3.8.71 -> 3.8.72

The new version of vite required an Node 22.15 (since that's current LTS and node 21.x is EOL)

The changes to css due to the tailwind 3 to 4 upgrade were done following the upgrade guide

Done in this order (important):
shadow-sm -> shadow-xs
shadow -> shadown-sm
rounded -> rounded-sm
outline-none -> outline-hidden
32rem_32rem_at_center -> center_at_32rem_32rem (revised order of gradient props)
ring-1 ring-black ring-opacity-5 -> ring-1 ring-black/50
flex-shrink-0 -> shrink-0
outline outline-1 -> outline-1

ALSO removed the extra opacity-0 on the any element that animates into view as that trips up latest tailwind causing the element to be invisible (also holds for the remote video)

FocusTrap is now not exported as the default, so change those imports

headlessui's Menu completely changed, so upgrade to the new syntax which necessitated a reorganization of the Header.tsx to enable the "menu" to still work

IDisposable · 2025-05-14T01:03:20Z

This gets us current for everything except:

react-router-dom (6.22.3 -> 7.6.0) which looks like it might break stuff so holding for a bit
zustand (4.5.2 -> 5.0.4) really not sure how this is used, so don't want to risk it right now

Vite 5.2.0 -> 6.3.5 @vitejs/plugin-basic-ssl 1.2.0 -> 2.0.0 cva: 1.0.0-beta.1 -> 1.0.0-beta.3 focus-trap-react 10.2.3 -> 11.0.3 framer-motion 11.15.0 -> 12.11.0 @tailwindcss/postcss 4.1.6 @tailwindcss/vite 4.1.6 tailwind 3.4.17 -> 4.1.6 tailwind-merge 2.5.5 -> 3.3.0 Minor updates: @headlessui/react 2.2.2 -> 2.2.3 @types/react 19.1.3 -> 19.1.4 @types/react-dom 19.1.3 -> 19.1.5 @typescript-eslint/eslint-plugin 8.32.0 -> 8.32.1 @typescript-eslint/parser 8.32.0 -> 8.32.1 react-simple-keyboard 3.8.71 -> 3.8.72 The new version of vite required an Node 22.15 (since that's current LTS and node 21.x is EOL) The changes to css due to the tailwind 3 to 4 upgrade were done following [the upgrade guide](https://tailwindcss.com/docs/upgrade-guide#changes-from-v3) Done in this order (important): `shadow-sm` -> `shadow-xs` `shadow` -> `shadown-sm` `rounded` -> `rounded-sm` `outline-none` -> `outline-hidden` `32rem_32rem_at_center` -> `center_at_32rem_32rem` (revised order of gradient props) `ring-1 ring-black ring-opacity-5` -> `ring-1 ring-black/50` `flex-shrink-0` -> `shrink-0` `flex-grow-0` -> `grow-0` `outline outline-1` -> `outline-1` ALSO removed the **extra** `opacity-0` on the video element (trips up latest tailwind causing the video to be invisible) FocusTrap is now not exported as the default, so change those imports headlessui's Menu completely changed, so upgrade to the new syntax which necessitated a reorganization of the Header.tsx to enable the "menu" to still work

IDisposable · 2025-05-14T06:30:19Z

ui/package.json

  "type": "module",
  "engines": {
-    "node": "21.1.0"
+    "node": "22.15.0"


This is required for current vite since node 21.1.0 is EoL
Jump to current LTS version of 22.x, current release is 22.15.0

IDisposable · 2025-05-14T06:30:56Z

ui/package.json

    "@headlessui/tailwindcss": "^0.2.2",
    "@heroicons/react": "^2.2.0",
-    "@vitejs/plugin-basic-ssl": "^1.2.0",
+    "@vitejs/plugin-basic-ssl": "^2.0.0",


This has to be upgraded for vite 6.x

IDisposable · 2025-05-14T06:31:43Z

ui/package.json

    "@xterm/addon-webgl": "^0.18.0",
    "@xterm/xterm": "^5.5.0",
-    "cva": "^1.0.0-beta.1",
+    "cva": "^1.0.0-beta.3",


... odd there seems to be no tag on the cva repo for the old beta.1 release we referenced.

IDisposable · 2025-05-14T06:31:54Z

ui/package.json

  },
  "dependencies": {
-    "@headlessui/react": "^2.2.2",
+    "@headlessui/react": "^2.2.3",


IDisposable · 2025-05-14T06:32:40Z

ui/package.json

    "eslint-import-resolver-alias": "^1.1.2",
-    "focus-trap-react": "^10.2.3",
-    "framer-motion": "^11.15.0",
+    "focus-trap-react": "^11.0.3",


This causes the syntax for importing FocusTrap to change (no longer exported as the module default), but trivial change.

IDisposable · 2025-05-14T06:33:20Z

ui/package.json

-    "focus-trap-react": "^10.2.3",
-    "framer-motion": "^11.15.0",
+    "focus-trap-react": "^11.0.3",
+    "framer-motion": "^12.11.0",


This is a pretty large change, but review shows it to be safe and tests works fine

IDisposable · 2025-05-14T06:33:27Z

ui/package.json

    "react-icons": "^5.5.0",
    "react-router-dom": "^6.22.3",
-    "react-simple-keyboard": "^3.8.71",
+    "react-simple-keyboard": "^3.8.72",


IDisposable · 2025-05-14T06:33:53Z

ui/package.json

    "react-xtermjs": "^1.0.10",
    "recharts": "^2.15.3",
-    "tailwind-merge": "^2.5.5",
+    "tailwind-merge": "^3.3.0",


This is a medium change, but required no code churn and works fine.

IDisposable · 2025-05-14T06:34:24Z

ui/package.json

  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/postcss": "^4.1.6",


Now required because vite+tailwind+postcss is done differently now.

IDisposable · 2025-05-14T06:35:36Z

ui/package.json

    "@tailwindcss/typography": "^0.5.16",
-    "@types/react": "^19.1.3",
-    "@types/react-dom": "^19.1.3",
+    "@tailwindcss/vite": "^4.1.6",


Now required because vite+tailwind+postcss is done differently now.

IDisposable · 2025-05-14T06:36:03Z

ui/package.json

-    "@types/react": "^19.1.3",
-    "@types/react-dom": "^19.1.3",
+    "@tailwindcss/vite": "^4.1.6",
+    "@types/react": "^19.1.4",


IDisposable · 2025-05-14T06:36:16Z

ui/package.json

    "@types/validator": "^13.15.0",
-    "@typescript-eslint/eslint-plugin": "^8.32.0",
-    "@typescript-eslint/parser": "^8.32.0",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",


IDisposable · 2025-05-14T06:38:31Z

ui/package.json

    "prettier": "^3.5.3",
    "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.6",


Major upgrade, changed the Menu
Menu.Button -> MenuButton
Menu.Items -> MenuItems
Menu.Item -> MenuItem

Additionally the menu no longer works with Card embedded as the parent for the items, so restructured the Header.tsx

IDisposable · 2025-05-14T06:39:00Z

ui/package.json

+    "tailwindcss": "^4.1.6",
    "typescript": "^5.8.3",
-    "vite": "^5.2.0",
+    "vite": "^6.3.5",


Major update, followed the upgrade process.

IDisposable · 2025-05-14T06:41:16Z

ui/src/components/Header.tsx

 import { useNavigate } from "react-router-dom";
 import { ArrowLeftEndOnRectangleIcon, ChevronDownIcon } from "@heroicons/react/16/solid";
-import { Menu, MenuButton } from "@headlessui/react";
+import { Button, Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";


Restructured due to the new Menu code. Using the headlessui's version of Button because it works more reliably with their MenuItem(s)

IDisposable · 2025-05-14T06:41:49Z

ui/src/components/Header.tsx


  const usbState = useHidStore(state => state.usbState);

+  // for testing


I can delete this if desired, but helpful when testing to be able to "fake" the cloud login information.

IDisposable · 2025-05-14T06:42:37Z

ui/src/components/Header.tsx

-                  <div className="hidden w-[159px] md:block">
-                    <USBStateStatus
-                      state={usbState}
+              <div className="hidden items-center gap-x-2 md:flex">


First big change here is putting the three right-side things in a single row so the heights line up.

IDisposable · 2025-05-14T06:45:09Z

ui/src/components/Header.tsx

+                          anchor="bottom end"
+                          className="right-0 mt-1 w-56 origin-top-right data-closed:opacity-0 focus:outline-hidden">
+                          <MenuItem>
+                            <Card className="overflow-hidden">


Big change here is putting the Card inside the MenuItem (of which there is now only one) because trying to wrap the Menu.Items in theCard completely breaks this version of headlessui.

IDisposable · 2025-05-14T06:47:01Z

ui/src/components/GridBackground.tsx

    <div className="absolute w-screen h-screen overflow-hidden isolate opacity-60">
      <svg
-        className="absolute inset-x-0 top-0 -z-10 h-[64rem] w-full stroke-gray-300 [mask-image:radial-gradient(32rem_32rem_at_center,white,transparent)] dark:stroke-slate-300/20"
+        className="absolute inset-x-0 top-0 -z-10 h-[64rem] w-full stroke-gray-300 [mask-image:radial-gradient(center_at_32rem_32rem,white,transparent)] dark:stroke-slate-300/20"


The gradient syntax is now whined about unless it is in attachment then offset order...

IDisposable · 2025-05-14T06:49:35Z

ui/src/components/WebRTCVideo.tsx

                                hdmiError ||
                                peerConnectionState !== "connected",
                              "!opacity-60": showPointerLockBar,
-                              "animate-slideUpFade border border-slate-800/30 opacity-0 shadow dark:border-slate-300/20":


Note that we no longer can or should declare the opacity-0 in the source, as the slideUpFade or fadeIn implies and enforces it. If you leave it in here, the contents of the all the little dialog boxes never appears when clicking.

This change happens a lot of places, and is required.

IDisposable · 2025-05-14T06:50:34Z

ui/src/index.css

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";


New syntax for tailwind 4.x

IDisposable · 2025-05-14T09:01:12Z

ui/eslint.config.cjs

@@ -0,0 +1,93 @@
+const {


Converted the .eslintrc.cjs to the new format. Followed the migration instructions

IDisposable · 2025-05-14T09:27:45Z

ui/package.json

    "zustand": "^4.5.2"
  },
  "devDependencies": {
+    "@eslint/compat": "^1.2.9",


These are for new eslint

IDisposable · 2025-05-14T09:27:59Z

ui/package.json

    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.1.0",


For new eslint

IDisposable · 2025-05-14T09:29:09Z

ui/src/main.tsx

 import LoginRoute from "@routes/login";
 import SetupRoute from "@routes/devices.$id.setup";
-import DevicesRoute, { loader as DeviceListLoader } from "@routes/devices";
+import DevicesRoute from "@routes/devices";


Fixing the eslint warning about the export const loader requires a change here to follow the same pattern as other routes.

IDisposable · 2025-05-14T09:29:16Z

ui/src/main.tsx

 import * as SettingsIndexRoute from "./routes/devices.$id.settings._index";
 import SettingsAdvancedRoute from "./routes/devices.$id.settings.advanced";
-import * as SettingsAccessIndexRoute from "./routes/devices.$id.settings.access._index";
+import SettingsAccessIndexRoute from "./routes/devices.$id.settings.access._index";


Fixing the eslint warning about the export const loader requires a change here to follow the same pattern as other routes.

IDisposable · 2025-05-14T09:29:26Z

ui/src/main.tsx

+            { 
+              path: "devices", 
+              element: <DevicesRoute />,
+              loader: DevicesRoute.loader },


Fixing the eslint warning about the export const loader requires a change here to follow the same pattern as other routes.

IDisposable · 2025-05-14T09:29:32Z

ui/src/main.tsx

                        {
                          index: true,
-                          element: <SettingsAccessIndexRoute.default />,
+                          element: <SettingsAccessIndexRoute />,


Fixing the eslint warning about the export const loader requires a change here to follow the same pattern as other routes.

IDisposable · 2025-05-14T09:29:43Z

ui/src/main.tsx

                {
                  index: true,
-                  element: <SettingsAccessIndexRoute.default />,
+                  element: <SettingsAccessIndexRoute />,


Fixing the eslint warning about the export const loader requires a change here to follow the same pattern as other routes.

IDisposable · 2025-05-14T09:30:08Z

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

  );
 }
+
+SettingsAccessIndexRoute.loader = loader;


Fixing the eslint warning about the export const loader requires a change here to follow the same pattern as other routes.

IDisposable · 2025-05-14T09:30:24Z

ui/src/routes/devices.tsx

  );
 }
+
+DevicesRoute.loader = loader;


Fixing the eslint warning about the export const loader requires a change here to follow the same pattern as other routes.

IDisposable · 2025-05-14T16:18:33Z

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

        primaryLinks={[{ title: "Cloud Devices", to: "/devices" }]}
        userEmail={user?.email}
        picture={user?.picture}
+        kvmName={device?.name}


This ensures we have the device's name in the deregister screen

IDisposable · 2025-05-14T16:19:29Z

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

        primaryLinks={[{ title: "Cloud Devices", to: "/devices" }]}
        userEmail={user?.email}
        picture={user?.picture}
+        kvmName={device?.name}


This ensures we have the device's name in the rename screen

IDisposable · 2025-05-14T16:20:55Z

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

 } from "react-router-dom";
 import { useInterval } from "usehooks-ts";
-import FocusTrap from "focus-trap-react";
+import { FocusTrap } from "focus-trap-react";


FocusTrap no longer exported as the default

IDisposable · 2025-05-14T16:24:14Z

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

      <div className="relative flex select-none items-center gap-x-3">
        <div
-          className={cx("opacity-0  transition-opacity duration-200", {
+          className={cx("opacity-0 transition-opacity duration-200", {


This is a unique animation pattern, I think this one stays.

IDisposable · 2025-05-14T16:25:40Z

Resolved merge conflicts, ready for review @ym @adamshiervani

adamshiervani

A great PR as usual! Thanks, @IDisposable

* chore: Upgrade UI vite and tailwind packages Vite 5.2.0 -> 6.3.5 @vitejs/plugin-basic-ssl 1.2.0 -> 2.0.0 cva: 1.0.0-beta.1 -> 1.0.0-beta.3 focus-trap-react 10.2.3 -> 11.0.3 framer-motion 11.15.0 -> 12.11.0 @tailwindcss/postcss 4.1.6 @tailwindcss/vite 4.1.6 tailwind 3.4.17 -> 4.1.6 tailwind-merge 2.5.5 -> 3.3.0 Minor updates: @headlessui/react 2.2.2 -> 2.2.3 @types/react 19.1.3 -> 19.1.4 @types/react-dom 19.1.3 -> 19.1.5 @typescript-eslint/eslint-plugin 8.32.0 -> 8.32.1 @typescript-eslint/parser 8.32.0 -> 8.32.1 react-simple-keyboard 3.8.71 -> 3.8.72 The new version of vite required an Node 22.15 (since that's current LTS and node 21.x is EOL) The changes to css due to the tailwind 3 to 4 upgrade were done following [the upgrade guide](https://tailwindcss.com/docs/upgrade-guide#changes-from-v3) Done in this order (important): `shadow-sm` -> `shadow-xs` `shadow` -> `shadown-sm` `rounded` -> `rounded-sm` `outline-none` -> `outline-hidden` `32rem_32rem_at_center` -> `center_at_32rem_32rem` (revised order of gradient props) `ring-1 ring-black ring-opacity-5` -> `ring-1 ring-black/50` `flex-shrink-0` -> `shrink-0` `flex-grow-0` -> `grow-0` `outline outline-1` -> `outline-1` ALSO removed the **extra** `opacity-0` on the video element (trips up latest tailwind causing the video to be invisible) FocusTrap is now not exported as the default, so change those imports headlessui's Menu completely changed, so upgrade to the new syntax which necessitated a reorganization of the Header.tsx to enable the "menu" to still work * Update eslint config and fix errors

IDisposable marked this pull request as draft May 14, 2025 01:04

IDisposable force-pushed the upgrade-vite-tailwind branch 4 times, most recently from 2ef0ee7 to 883e55b Compare May 14, 2025 06:14

IDisposable force-pushed the upgrade-vite-tailwind branch from 883e55b to 7616730 Compare May 14, 2025 06:17

IDisposable marked this pull request as ready for review May 14, 2025 06:18

IDisposable changed the title ~~Upgrade UI vite and tailwind packages~~ chore: Upgrade UI vite and tailwind packages May 14, 2025