🎛️ refactor: Add keyboard command toggles & only trigger for the 1st character (#3566)

* refactor: Improve handling of key up events in useHandleKeyUp hook to only trigger for first char and fix linter issues

* refactor: Update Beta component styling with theme twcss variables

* refactor: theming for Settings, add toggle enable/disable keyboard commands

client/src/components/Nav/SettingsTabs/Commands/AtCommandSwitch.tsx

@@ -0,0 +1,26 @@
+import { useRecoilState } from 'recoil';
+import { Switch } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+import store from '~/store';
+
+export default function AtCommandSwitch() {
+  const [atCommand, setAtCommand] = useRecoilState<boolean>(store.atCommand);
+  const localize = useLocalize();
+
+  const handleCheckedChange = (value: boolean) => {
+    setAtCommand(value);
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div>{localize('com_nav_at_command_description')}</div>
+      <Switch
+        id="atCommand"
+        checked={atCommand}
+        onCheckedChange={handleCheckedChange}
+        className="ml-4 mt-2"
+        data-testid="atCommand"
+      />
+    </div>
+  );
+}