* chore(ui): Patch bump in tailwind related packages and framer-motion
tailwind: [4.1.6 -> 4.1.7](https://github.com/tailwindlabs/tailwindcss/compare/v4.1.6...v4.1.7)
@tailwindcss/postcss: 4.1.6 -> 4.1.7
@tailwindcss/vite: 4.1.6 -> 4.1.7
Also patch-bump of:
framer-motion: [12.11.0 -> 12.11.4](https://github.com/motiondivision/motion/compare/v12.11.0...v12.11.4)
No source changes seemingly needed, have not rerun the migrate.
* chore(ui): Run tailwind upgrade and review changes
Ran the `npx @tailwindcss/upgrade` and accepted the changes that seemed safe.
They're things like:
- `data-[closed]:translate-y-9` -> `data-closed:translate-y-8` ()swaps the square bracket syntax to a `-` modifier)
- `bg-gradient-to-*` -> `bg-linear-to-*`
- `/[*%]` -> `/*` (swap square bracket syntax for inline)
- `theme(*.*)` -> `var(--*-*)` (theme styles are exposed as variables with hyphens for dots now)
- `[background-size:*]` -> `bg-size[*]` (move the square brackets inside tag)
- `[.active_&]:` -> `in[.active]:` (new syntax for parent query)
- `!class` -> `class!` (e.g. _!overflow-visible_ to _overflow-visible!_, for [important flag](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-flag style)
- `w-[1px]` -> `w-px` (that's a new syntax for a 1px width)
- `h-[1px]` -> `h-px` (that's a new syntax for a 1px height)
- moved `html` and `html, body` global settings in the _index.css_
Also killed off an unused `import` and blank css class.
Also picked up the two `flex-grow` -> `grow` that I missed last pass, oops.
* refactor: Migrate from tailwind.js config to Tailwind CSS configuration and improve component styling
- Removed extensive theme and animation configurations from tailwind.config.js, migrating them to index.css for better organization.
- Updated components to utilize CSS variables for grid layouts and animations, enhancing maintainability.
- Adjusted various components to reflect the new CSS structure, ensuring consistent styling across the application.
- Improved accessibility and responsiveness in several UI components, including headers and popovers.
- Fixed minor styling issues and optimized class usage for better performance.
* style: use default tailwindcss/forms options
* refactor(Header): remove unused LuUser icon import
* 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
* feat(network): enhance network settings UI with domain management and improved layout
- Added custom domain input and selection options for DHCP and local domains.
- Improved layout for displaying network settings, including DHCP lease information and IPv6 addresses.
- Refactored state management for network settings and added handlers for hostname and domain changes.
- Updated the display of network settings to enhance user experience and accessibility.
* Re-add save button
* fix: add ConfirmDialog for renewing DHCP lease and improve network settings layout
- Integrated ConfirmDialog component to confirm DHCP lease renewal.
- Enhanced the layout of network settings, including better organization of IPv4 and IPv6 information.
- Updated state management for displaying network settings and lease information.
- Improved user experience with clearer descriptions and structured UI elements.
* Fix lint errors
* fix: useRef TS2554
---------
Co-authored-by: Siyuan Miao <i@xswan.net>
Upgraded most packages to current as of 2025-05-09 for almost everything.
Remove the erroneous extra dependency to old xterm package since the correct @xterm/xterm package was already included (suspect a bad merge) and it was causing issues with react 19.1.
Switched to using the hooks exposed in the usehooks-ts package (this package was already referenced, suspect a bad merge) removing our private copies of useInterval, useIsMounted, useResizeObserver which are identical.
Added import of JSX from react now needed because NPX is not in global scope in react 19.x.
Explicitly cast the ref of included elements due to change in react 19.x
* Fix: Alt-Gr not recognized
* Proper fix for Alt-Gr not being recognized
* Add comment on codes and modifiers
* Add comment on paste box
* Remove comment
* Improve description
* Wording...
* Formatting...
* Improve description again
* feat: implement pointer-lock and keyboard-lock
* feat: Add Pointer lock functionality and SSL support in dev mode
- Introduced @vitejs/plugin-basic-ssl for enabling SSL in development.
- Added a new script `dev:ssl` to run the development server with SSL.
- Implemented pointer lock feature in the WebRTCVideo component, enhancing user interaction.
- Added a PointerLockBar component to guide users on enabling mouse control.
- Cleaned up the VideoOverlay and WebRTCVideo components for better readability and functionality.
---------
Co-authored-by: Adam Shiervani <adam.shiervani@gmail.com>
* feat(cloud): Use Websocket signaling in cloud mode
* refactor: Enhance WebRTC signaling and connection handling
* refactor: Improve WebRTC connection management and logging in KvmIdRoute
* refactor: Update PeerConnectionDisconnectedOverlay to use Card component for better UI structure
* refactor: Standardize metric naming and improve websocket logging
* refactor: Rename WebRTC signaling functions and update deployment script for debug version
* fix: Handle error when writing new ICE candidate to WebRTC signaling channel
* refactor: Rename signaling handler function for clarity
* refactor: Remove old http local http endpoint
* refactor: Improve metric help text and standardize comparison operator in KvmIdRoute
* chore(websocket): use MetricVec instead of Metric to store metrics
* fix conflicts
* fix: use wss when the page is served over https
* feat: Add app version header and update WebRTC signaling endpoint
* fix: Handle error when writing device metadata to WebRTC signaling channel
---------
Co-authored-by: Siyuan Miao <i@xswan.net>
* feat(WebRTC): enhance connection management with connection failures after X attempts or a certain time
* refactor(WebRTC): simplify WebRTCVideo component and enhance connection error handling
* fix(WebRTC): extend connection timeout from 1 second to 60 seconds for improved error handling
* feat(VideoOverlay): add NoAutoplayPermissionsOverlay component and improve HDMIErrorOverlay content
* feat(VideoOverlay): update NoAutoplayPermissionsOverlay styling and improve user instructions
* Remove unused PlayIcon import to clean up code
* feat(WebRTC): enhance connection management with connection failures after X attempts or a certain time
* refactor(WebRTC): simplify WebRTCVideo component and enhance connection error handling
* fix(WebRTC): extend connection timeout from 1 second to 60 seconds for improved error handling
- Implement scroll sensitivity settings with low, default, and high modes
- Add RPC methods for getting and setting scroll sensitivity
- Enhance wheel event handling with device-specific sensitivity and clamping
- Create a new device settings store for managing scroll and trackpad parameters
- Update mouse settings route to include scroll sensitivity selection
* feat(ui): Add other session handling route and modal
* feat(ui): Add dedicated update route and refactor update dialog state management
* feat(ui): Add local authentication route
* refactor(ui): Remove LocalAuthPasswordDialog component and clean up related code
* refactor(ui): Remove OtherSessionConnectedModal component
* feat(ui): Add dedicated mount route and refactor mount media dialog
* refactor(ui): Simplify Escape key navigation in device route
* refactor(ui): Add TODO comments for future URL-based state migration
* refactor(ui): Migrate settings and update routes to dedicated routes
This commit introduces a comprehensive refactoring of the UI routing and state management:
- Removed sidebar-based settings view
- Replaced global modal state with URL-based routing
- Added dedicated routes for settings, including general, security, and update sections
- Simplified modal and sidebar interactions
- Improved animation and transition handling using motion library
- Removed deprecated components and simplified route structure
* fix(ui): Add TODO comment for modal session interaction
* refactor(ui): Move USB configuration to new settings setup
This commit introduces several improvements to the USB configuration workflow:
- Refactored USB configuration dialog component
- Simplified USB config state management
- Moved USB configuration to hardware settings route
- Updated JSON-RPC type definitions
- Cleaned up unused imports and components
- Improved error handling and notifications
* refactor(ui): Replace react-router-dom navigation with custom navigation hook
This commit introduces a new custom navigation hook `useDeviceUiNavigation` to replace direct usage of `useNavigate` across multiple components:
- Removed direct `useNavigate` imports in various components
- Added `navigateTo` method from new navigation hook
- Updated navigation calls in ActionBar, MountPopover, UpdateInProgressStatusCard, and other routes
- Simplified navigation logic and prepared for potential future navigation enhancements
- Removed console logs and unnecessary comments
* refactor(ui): Remove unused react-router-dom import
Clean up unnecessary import of `useNavigate` from react-router-dom in device settings route
* feat(ui): Improve mobile navigation and scrolling in device settings
* refactor(ui): Reorganize device access and security settings
This commit introduces several changes to the device access and security settings:
- Renamed "Security" section to "Access" in settings navigation
- Moved local authentication routes from security to access
- Removed deprecated security settings route
- Added new route for device access settings with cloud and local authentication management
- Updated cloud URL and adoption logic to be part of the access settings
- Simplified routing and component structure for better user experience
* fix(ui): Update logout button hover state color
* fix(ui): Adjust device de-registration button size to small
* fix(ui): Update appearance settings section header and description
* refactor(ui): Replace SectionHeader with new SettingsPageHeader and SettingsSectionHeader components
This commit introduces two new header components for settings pages:
- Created SettingsPageHeader for main page headers
- Created SettingsSectionHeader for subsection headers
- Replaced all existing SectionHeader imports with new components
- Updated styling and type definitions to support more flexible header rendering
* feat(ui): Add dev channel toggle to advanced settings
Move dev channel update option from general settings to advanced settings
- Introduced new state and handler for dev channel toggle
- Removed dev channel option from general settings route
- Added dev channel toggle in advanced settings with error handling
Marc Brooks
Adam Shiervani
Daniel Lorch
Aveline
Andrew Davis
Brandon Tuttle