From 2ec061b3a8ba2659f55c6b5717b97d2ca5609e23 Mon Sep 17 00:00:00 2001
From: ariedel87 <127566745+ariedel87@users.noreply.github.com>
Date: Sun, 25 May 2025 11:09:48 +0200
Subject: [PATCH] feat(Keyboard): Hide Pressed Keys (#518)

---
 ui/src/components/InfoBar.tsx                 | 29 ++++++++++---------
 ui/src/hooks/stores.ts                        |  6 ++++
 .../routes/devices.$id.settings.keyboard.tsx  | 17 +++++++++++
 3 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/InfoBar.tsx b/ui/src/components/InfoBar.tsx
index b865985..7ce67a4 100644
--- a/ui/src/components/InfoBar.tsx
+++ b/ui/src/components/InfoBar.tsx
@@ -28,6 +28,7 @@ export default function InfoBar() {
   const rpcDataChannel = useRTCStore(state => state.rpcDataChannel);
 
   const settings = useSettingsStore();
+  const showPressedKeys = useSettingsStore(state => state.showPressedKeys);
 
   useEffect(() => {
     if (!rpcDataChannel) return;
@@ -97,19 +98,21 @@ export default function InfoBar() {
               </div>
             )}
 
-            <div className="flex items-center gap-x-1">
-              <span className="text-xs font-semibold">Keys:</span>
-              <h2 className="text-xs">
-                {[
-                  ...activeKeys.map(
-                    x => Object.entries(keys).filter(y => y[1] === x)[0][0],
-                  ),
-                  activeModifiers.map(
-                    x => Object.entries(modifiers).filter(y => y[1] === x)[0][0],
-                  ),
-                ].join(", ")}
-              </h2>
-            </div>
+            {showPressedKeys && (
+              <div className="flex items-center gap-x-1">
+                <span className="text-xs font-semibold">Keys:</span>
+                <h2 className="text-xs">
+                  {[
+                    ...activeKeys.map(
+                      x => Object.entries(keys).filter(y => y[1] === x)[0][0],
+                    ),
+                    activeModifiers.map(
+                      x => Object.entries(modifiers).filter(y => y[1] === x)[0][0],
+                    ),
+                  ].join(", ")}
+                </h2>
+              </div>
+            )}
           </div>
         </div>
         <div className="flex items-center divide-x first:divide-l divide-slate-800/20 dark:divide-slate-300/20">
diff --git a/ui/src/hooks/stores.ts b/ui/src/hooks/stores.ts
index 52ef89d..1c52572 100644
--- a/ui/src/hooks/stores.ts
+++ b/ui/src/hooks/stores.ts
@@ -310,6 +310,9 @@ interface SettingsState {
 
   keyboardLedSync: KeyboardLedSync;
   setKeyboardLedSync: (sync: KeyboardLedSync) => void;
+
+  showPressedKeys: boolean;
+  setShowPressedKeys: (show: boolean) => void;
 }
 
 export const useSettingsStore = create(
@@ -344,6 +347,9 @@ export const useSettingsStore = create(
 
       keyboardLedSync: "auto",
       setKeyboardLedSync: sync => set({ keyboardLedSync: sync }),
+
+      showPressedKeys: true,
+      setShowPressedKeys: show => set({ showPressedKeys: show }),
     }),
     {
       name: "settings",
diff --git a/ui/src/routes/devices.$id.settings.keyboard.tsx b/ui/src/routes/devices.$id.settings.keyboard.tsx
index 0f266e9..12ed6f2 100644
--- a/ui/src/routes/devices.$id.settings.keyboard.tsx
+++ b/ui/src/routes/devices.$id.settings.keyboard.tsx
@@ -5,6 +5,7 @@ import { useJsonRpc } from "@/hooks/useJsonRpc";
 import notifications from "@/notifications";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { layouts } from "@/keyboardLayouts";
+import { Checkbox } from "@/components/Checkbox";
 
 import { SelectMenuBasic } from "../components/SelectMenuBasic";
 
@@ -13,12 +14,16 @@ import { SettingsItem } from "./devices.$id.settings";
 export default function SettingsKeyboardRoute() {
   const keyboardLayout = useSettingsStore(state => state.keyboardLayout);
   const keyboardLedSync = useSettingsStore(state => state.keyboardLedSync);
+  const showPressedKeys = useSettingsStore(state => state.showPressedKeys);
   const setKeyboardLayout = useSettingsStore(
     state => state.setKeyboardLayout,
   );
   const setKeyboardLedSync = useSettingsStore(
     state => state.setKeyboardLedSync,
   );
+  const setShowPressedKeys = useSettingsStore(
+    state => state.setShowPressedKeys,
+  );
 
   // this ensures we always get the original en-US if it hasn't been set yet
   const safeKeyboardLayout = useMemo(() => {
@@ -102,6 +107,18 @@ export default function SettingsKeyboardRoute() {
           />
         </SettingsItem>
       </div>
+      
+      <div className="space-y-4">
+        <SettingsItem
+          title="Show Pressed Keys"
+          description="Display currently pressed keys in the status bar"
+        >
+          <Checkbox
+            checked={showPressedKeys}
+            onChange={e => setShowPressedKeys(e.target.checked)}
+          />
+        </SettingsItem>
+      </div>
     </div>
   );
 }