devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 28 Packages Projects Releases 1 Wiki Activity

feat(keybinds): add KeybindsPanel settings UI with recorder and conflict detection

Browse Source
This commit is contained in:
Jannis Braun
2026-03-22 20:42:48 +01:00
parent 895f665da9
commit 11d802f86c
2 changed files with 378 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/modals/UserSettings.tsx
+6 -2
View File
@@ -9,10 +9,11 @@ import { PrivacyPanel } from './settingsPanels/PrivacyPanel';
import { ConnectionsPanel } from './settingsPanels/ConnectionsPanel';
import { DesktopPanel } from './settingsPanels/DesktopPanel';
import { InstancePanel } from './settingsPanels/InstancePanel';
import { KeybindsPanel } from './settingsPanels/KeybindsPanel';
import { isElectron } from '../../platform/platform';
import { SettingsSectionsProvider, useSettingsSectionsContext } from './SettingsSectionsContext';
type SettingsTab = 'account' | 'voice' | 'privacy' | 'connections' | 'desktop' | 'instance';
type SettingsTab = 'account' | 'voice' | 'privacy' | 'connections' | 'keybinds' | 'desktop' | 'instance';
function SidebarSubLinks() {
const ctx = useSettingsSectionsContext();
@@ -65,7 +66,7 @@ export function UserSettingsModal() {
useEffect(() => {
if (isOpen) {
const requested = modalData.tab as SettingsTab | undefined;
if (requested && ['account', 'voice', 'privacy', 'connections', 'instance'].includes(requested)) {
if (requested && ['account', 'voice', 'privacy', 'connections', 'keybinds', 'instance'].includes(requested)) {
// Only allow instance tab for admins
if (requested === 'instance' && !isAdmin) {
setTab('account');
@@ -125,6 +126,7 @@ export function UserSettingsModal() {
<div className="border-t border-white/[0.04] my-2 mx-2" />
<div className="text-[10px] font-semibold text-txt-tertiary uppercase tracking-wider px-3 py-1">App Settings</div>
<button onClick={() => handleTabClick('connections')} className={tabClass('connections')}>Connections</button>
<button onClick={() => handleTabClick('keybinds')} className={tabClass('keybinds')}>Keybinds</button>
{isElectron() && <button onClick={() => handleTabClick('desktop')} className={tabClass('desktop')}>Desktop</button>}
{isAdmin && (
@@ -174,6 +176,7 @@ export function UserSettingsModal() {
<div className="border-t border-white/[0.04] my-2 mx-2" />
<div className="text-[10px] font-semibold text-txt-tertiary uppercase tracking-wider px-3 py-1">App Settings</div>
<button onClick={() => handleTabClick('connections')} className={tabClass('connections')}>Connections</button>
<button onClick={() => handleTabClick('keybinds')} className={tabClass('keybinds')}>Keybinds</button>
{isElectron() && <button onClick={() => handleTabClick('desktop')} className={tabClass('desktop')}>Desktop</button>}
{isAdmin && (
@@ -216,6 +219,7 @@ export function UserSettingsModal() {
{tab === 'voice' && <VoicePanel />}
{tab === 'privacy' && <PrivacyPanel />}
{tab === 'connections' && <ConnectionsPanel />}
{tab === 'keybinds' && <KeybindsPanel />}
{tab === 'desktop' && <DesktopPanel />}
{tab === 'instance' && isAdmin && <InstancePanel />}
</div>