UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-06-26 18:26:38 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Bug fix for the Keyboard Shortcuts

Browse Source 
MAC OS SHORTCUTS:
- Toggle Terminal: ⌘ + `
- Toggle Theme: ⌘ + ⌥ + ⇧ + D
- Toggle Chat: ⌘ + ⌥ + J
- Toggle Settings: ⌘ + ⌥ + S

WINDOWS/LINUX SHORTCUTS:
- Toggle Terminal: Ctrl + `
- Toggle Theme: Win + Alt + Shift + D
- Toggle Chat: Ctrl + Alt + J
- Toggle Settings: Ctrl + Alt + S
This commit is contained in:
Stijnus
2025-02-02 15:51:56 +01:00
parent 84f45dd041
commit 8035a76429
4 changed files with 95 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
app/components/@settings/tabs/settings/SettingsTab.tsx
View File

@@ -7,6 +7,32 @@ import { themeStore, kTheme } from '~/lib/stores/theme';
import type { UserProfile } from '~/components/@settings/core/types';
import { useStore } from '@nanostores/react';
import { shortcutsStore } from '~/lib/stores/settings';
import { isMac } from '~/utils/os';
// Helper to format shortcut key display
const formatShortcutKey = (key: string) => {
if (key === '`') {
return '`';
}
return key.toUpperCase();
};
// Helper to get modifier key symbols/text
const getModifierSymbol = (modifier: string): string => {
switch (modifier) {
case 'meta':
return isMac ? '⌘' : 'Win';
case 'alt':
return isMac ? '⌥' : 'Alt';
case 'ctrl':
return isMac ? '⌃' : 'Ctrl';
case 'shift':
return '⇧';
default:
return modifier;
}
};
export default function SettingsTab() {
const [currentTimezone, setCurrentTimezone] = useState('');
@@ -237,37 +263,42 @@ export default function SettingsTab() {
key={name}
className="flex items-center justify-between p-2 rounded-lg bg-[#FAFAFA] dark:bg-[#1A1A1A] hover:bg-purple-50 dark:hover:bg-purple-500/10 transition-colors"
>
<span className="text-sm text-bolt-elements-textPrimary capitalize">
{name.replace(/([A-Z])/g, ' $1').toLowerCase()}
</span>
<div className="flex flex-col">
<span className="text-sm text-bolt-elements-textPrimary capitalize">
{name.replace(/([A-Z])/g, ' $1').toLowerCase()}
</span>
{shortcut.description && (
<span className="text-xs text-bolt-elements-textSecondary">{shortcut.description}</span>
)}
</div>
<div className="flex items-center gap-1">
{shortcut.ctrlOrMetaKey && (
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
{navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'}
{getModifierSymbol(isMac ? 'meta' : 'ctrl')}
</kbd>
)}
{shortcut.ctrlKey && (
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
Ctrl
{getModifierSymbol('ctrl')}
</kbd>
)}
{shortcut.metaKey && (
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
⌘
{getModifierSymbol('meta')}
</kbd>
)}
{shortcut.altKey && (
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
{navigator.platform.includes('Mac') ? '⌥' : 'Alt'}
{getModifierSymbol('alt')}
</kbd>
)}
{shortcut.shiftKey && (
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
⇧
{getModifierSymbol('shift')}
</kbd>
)}
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
{shortcut.key.toUpperCase()}
{formatShortcutKey(shortcut.key)}
</kbd>
</div>
</div>