feat: add toggleable hotkey hints to sidebar buttons and refac ShortcutsModal
- Add src/lib/shortcuts.ts as the single source of truth for every shortcut - Create HotkeyHint.svelte to show OS-aware key combos (⌘ on Mac, Ctrl elsewhere) - Make sidebar “New Chat” and “Search” buttons display their shortcuts on hover - Add user setting to toggle these sidebar hints - Refactor ShortcutsModal into categorized (Global, Chat, Message, Input), data-driven sections - Introduce ShortcutItem.svelte to render each row, dividers, and multi-line text - Fix “Focus text area” action and include “Close modal” shortcut - Wire everything through +layout.svelte and the shortcuts registry
This commit is contained in:
@@ -0,0 +1,41 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { shortcuts } from '$lib/shortcuts';
|
||||
import { settings } from '$lib/stores';
|
||||
|
||||
export let name: string;
|
||||
export let className = '';
|
||||
|
||||
let isMac = false;
|
||||
let mounted = false;
|
||||
let keys: string[] = [];
|
||||
let isVisible = true;
|
||||
|
||||
onMount(() => {
|
||||
isMac = /Mac/i.test(navigator.userAgent);
|
||||
keys = shortcuts[name]?.keys ?? [];
|
||||
mounted = true;
|
||||
});
|
||||
|
||||
$: if (name === 'newChat' || name === 'search') {
|
||||
isVisible = $settings?.showSidebarHotkeyHints !== false;
|
||||
}
|
||||
|
||||
function formatKey(key: string): string {
|
||||
const lowerKey = key.toLowerCase();
|
||||
|
||||
if (lowerKey === 'mod') return isMac ? '⌘' : 'Ctrl';
|
||||
if (lowerKey === 'shift') return isMac ? '⇧' : 'Shift';
|
||||
if (lowerKey.startsWith('key')) return key.slice(-1);
|
||||
|
||||
return key;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if mounted && isVisible}
|
||||
<div
|
||||
class="hidden md:flex items-center self-center text-xs text-gray-400 dark:text-gray-600 {className}"
|
||||
>
|
||||
<span>{keys.map(formatKey).join(isMac ? '' : '+')}</span>
|
||||
</div>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user