From 9ba97ebe67d30aa694635694c41c268fa5d749e9 Mon Sep 17 00:00:00 2001
From: Marc Brooks <IDisposable@gmail.com>
Date: Fri, 11 Jul 2025 10:56:03 -0500
Subject: [PATCH] chore(ui): Clean new keyboard option (#495)

Fixed the Tailwind CSS syntax for `in` (nested) selector
Added missing React dependency for `useEffect`
---
 ui/src/routes/devices.$id.settings.keyboard.tsx | 2 +-
 ui/src/routes/devices.$id.settings.tsx          | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/ui/src/routes/devices.$id.settings.keyboard.tsx b/ui/src/routes/devices.$id.settings.keyboard.tsx
index e797ce7..57119ba 100644
--- a/ui/src/routes/devices.$id.settings.keyboard.tsx
+++ b/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>) => {
diff --git a/ui/src/routes/devices.$id.settings.tsx b/ui/src/routes/devices.$id.settings.tsx
index b729bf0..5075ab5 100644
--- a/ui/src/routes/devices.$id.settings.tsx
+++ b/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>