chore(ui): Clean new keyboard option (jetkvm#495)

Fixed the Tailwind CSS syntax for `in` (nested) selector
Added missing React dependency for `useEffect`

Author: IDisposable

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

@@ -46,7 +46,7 @@ export default function SettingsKeyboardRoute() {
       if ("error" in resp) return;
       setKeyboardLayout(resp.result as string);
     });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [send, setKeyboardLayout]);
 
   const onKeyboardLayoutChange = useCallback(
     (e: React.ChangeEvent<HTMLSelectElement>) => {

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

@@ -151,7 +151,6 @@ export default function SettingsRoute() {
                     className={({ isActive }) => (isActive ? "active" : "")}
                   >
                     <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
-
                       <LuMouse className="h-4 w-4 shrink-0" />
                       <h1>Mouse</h1>
                     </div>
@@ -163,7 +162,7 @@ export default function SettingsRoute() {
                       to="keyboard"
                       className={({ isActive }) => (isActive ? "active" : "")}
                     >
-                      <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
+                      <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                         <LuKeyboard className="h-4 w-4 shrink-0" />
                         <h1>Keyboard</h1>
                       </div>