chore(ui): Clean new keyboard option

 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

@@ -25,7 +25,7 @@ export default function SettingsKeyboardRoute() {
       if ("error" in resp) return;
       setKeyboardLayout(resp.result as string);
     });
-  }, []);
+  }, [send, setKeyboardLayout]);
 
   const onKeyboardLayoutChange = useCallback(
     (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -51,7 +51,6 @@ export default function SettingsKeyboardRoute() {
       />
 
       <div className="space-y-4">
-        { /* this menu item could be renamed to plain "Keyboard layout" in the future, when also the virtual keyboard layout mappings are being implemented */ }
         <SettingsItem
           title="Paste text"
           description="Keyboard layout of target operating system"

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>