Merge pull request #18473 from silentoplayz/hotkey-hints-sidebar

feat: add toggleable hotkey hints to sidebar buttons and refac ShortcutsModal
This commit is contained in:
Tim Baek
2025-10-22 16:50:24 -04:00
committed by GitHub
8 changed files with 492 additions and 471 deletions
+8 -4
View File
@@ -62,6 +62,7 @@
import PinnedModelList from './Sidebar/PinnedModelList.svelte';
import Note from '../icons/Note.svelte';
import { slide } from 'svelte/transition';
import HotkeyHint from '../common/HotkeyHint.svelte';
const BREAKPOINT = 768;
@@ -787,7 +788,7 @@
<div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200">
<a
id="sidebar-new-chat-button"
class="grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none"
class="group grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none"
href="/"
draggable="false"
on:click={newChatHandler}
@@ -797,16 +798,18 @@
<PencilSquare className=" size-4.5" strokeWidth="2" />
</div>
<div class="flex self-center translate-y-[0.5px]">
<div class="flex flex-1 self-center translate-y-[0.5px]">
<div class=" self-center text-sm font-primary">{$i18n.t('New Chat')}</div>
</div>
<HotkeyHint name="newChat" />
</a>
</div>
<div class="px-[7px] flex justify-center text-gray-800 dark:text-gray-200">
<button
id="sidebar-search-button"
class="grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none"
class="group grow flex items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none"
on:click={() => {
showSearch.set(true);
}}
@@ -817,9 +820,10 @@
<Search strokeWidth="2" className="size-4.5" />
</div>
<div class="flex self-center translate-y-[0.5px]">
<div class="flex flex-1 self-center translate-y-[0.5px]">
<div class=" self-center text-sm font-primary">{$i18n.t('Search')}</div>
</div>
<HotkeyHint name="search" />
</button>
</div>