fixes etc

src/renderer/globalShortcuts/ShortcutSettings.css

@@ -1,6 +1,13 @@
+.vcd-shortcuts-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    padding-block: 1em;
+}
+
 .vcd-shortcuts-group {
     display: grid;
-    gap: 0.25em 1em;
+    gap: 0.25em 0.5em;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
     align-items: center;
 }
@@ -21,7 +28,8 @@
     border-radius: var(--radius-sm);
     width: 100%;
     min-height: calc(var(--select-option-height) - 2px);
-    padding: 0.25em;
+    padding: 3px 4px 3px 12px;
+    box-sizing: border-box;
 }
 
 .vcd-shortcuts-record-input {

src/renderer/globalShortcuts/ShortcutSettings.tsx

@@ -6,10 +6,23 @@
 
 import "./ShortcutSettings.css";
 
-import { BaseText, Button, DeleteIcon, Switch } from "@vencord/types/components";
-import { classNameFactory, identity } from "@vencord/types/utils";
+import { BaseText, Button, Card, DeleteIcon, Switch } from "@vencord/types/components";
+import {
+    classNameFactory,
+    identity,
+    ModalCloseButton,
+    ModalContent,
+    ModalHeader,
+    ModalRoot,
+    ModalSize,
+    openModal
+} from "@vencord/types/utils";
 import { React, Select, useState } from "@vencord/types/webpack/common";
+import { SettingsComponent } from "renderer/components/settings/Settings";
+import { onIpcCommand } from "renderer/ipcCommands";
+import { reactiveValue } from "renderer/reactiveState";
 import { Settings } from "renderer/settings";
+import { IpcCommands } from "shared/IpcEvents";
 
 import { recordKeybind } from "./recordKeybind";
 
@@ -20,13 +33,14 @@ const ShortcutActions = {
     toggleMute: "Toggle Mute",
     toggleDeafen: "Toggle Deafen",
     toggleStreamerMode: "Toggle Streamer Mode",
-    toggleCamera: "Toggle Camera",
-    toggleScreenShare: "Toggle Screen Share",
-    disconnectFromVoiceChannel: "Disconnect from Voice Channel"
+    disconnectFromVoiceChannel: "Disconnect from VC"
 } as const;
 
 export type ShortcutAction = keyof typeof ShortcutActions;
 
+const shortcutStatus = reactiveValue(true);
+onIpcCommand(IpcCommands.KEY_BINDS_SET_STATUS, status => (shortcutStatus.value = status));
+
 export interface KeyBind {
     id: string;
     enabled: boolean;
@@ -109,9 +123,18 @@ function KeyBindGroup({
 
 export function KeyBindSettings() {
     const [keyBinds, setKeyBinds] = useState<KeyBind[]>(Settings.store.keyBinds ?? []);
+    const shortcutsStatus = shortcutStatus.use();
 
     return (
-        <div>
+        <div className={cl("container")}>
+            {shortcutsStatus === false && (
+                <Card variant="danger">
+                    <BaseText size="md" weight="medium">
+                        Some of your keybinds failed to register.
+                    </BaseText>
+                </Card>
+            )}
+
             {keyBinds.map((keyBind, index) => (
                 <KeyBindGroup
                     key={keyBind.id}
@@ -147,3 +170,24 @@ export function KeyBindSettings() {
         </div>
     );
 }
+
+export function openKeybindsModal() {
+    openModal(props => (
+        <ModalRoot {...props} size={ModalSize.MEDIUM}>
+            <ModalHeader>
+                <BaseText size="lg" weight="semibold" tag="h3" style={{ flexGrow: 1 }}>
+                    Keybinds
+                </BaseText>
+                <ModalCloseButton onClick={props.onClose} />
+            </ModalHeader>
+
+            <ModalContent>
+                <KeyBindSettings />
+            </ModalContent>
+        </ModalRoot>
+    ));
+}
+
+export const KeybindsButton: SettingsComponent = () => {
+    return <Button onClick={() => openKeybindsModal()}>Configure Keybinds</Button>;
+};

src/renderer/globalShortcuts/recordKeybind.ts

@@ -90,7 +90,7 @@ export async function recordKeybind(signal?: AbortSignal): Promise<string> {
         }
 
         function cleanup() {
-            document.removeEventListener("keydown", onKeyDown);
+            document.removeEventListener("keydown", onKeyDown, { capture: true });
             signal?.removeEventListener("abort", onAbort);
         }
 
@@ -101,6 +101,7 @@ export async function recordKeybind(signal?: AbortSignal): Promise<string> {
 
         function onKeyDown(event: KeyboardEvent) {
             event.preventDefault();
+            event.stopImmediatePropagation();
 
             if (MODIFIER_KEYS.has(event.key)) return;
 
@@ -120,6 +121,6 @@ export async function recordKeybind(signal?: AbortSignal): Promise<string> {
         }
 
         signal?.addEventListener("abort", onAbort, { once: true });
-        document.addEventListener("keydown", onKeyDown);
+        document.addEventListener("keydown", onKeyDown, { capture: true });
     });
 }