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() { )} -
- Keys: -

- {[ - ...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(", ")} -

-
+ {showPressedKeys && ( +
+ Keys: +

+ {[ + ...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(", ")} +

+
+ )}
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() { />
+ +
+ + setShowPressedKeys(e.target.checked)} + /> + +
); }