feat(Keyboard): Hide Pressed Keys (#518)

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">

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",

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>
   );
 }