From 3e67ce6e8e5367466a60bb67e34e5241215df948 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 18 Jul 2025 12:47:22 +0400
Subject: [PATCH] refac/fix: shortcut modal

---
 src/lib/components/layout/Sidebar/UserMenu.svelte | 8 +++-----
 src/lib/stores/index.ts                           | 1 +
 src/routes/(app)/+layout.svelte                   | 5 +++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/layout/Sidebar/UserMenu.svelte b/src/lib/components/layout/Sidebar/UserMenu.svelte
index f77e915c51..7b1cbd58da 100644
--- a/src/lib/components/layout/Sidebar/UserMenu.svelte
+++ b/src/lib/components/layout/Sidebar/UserMenu.svelte
@@ -9,7 +9,7 @@
 	import { getUsage } from '$lib/apis';
 	import { userSignOut } from '$lib/apis/auths';
 
-	import { showSettings, mobile, showSidebar, user } from '$lib/stores';
+	import { showSettings, mobile, showSidebar, showShortcuts, user } from '$lib/stores';
 
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
@@ -29,8 +29,6 @@
 	export let help = false;
 	export let className = 'max-w-[240px]';
 
-	let showShortcuts = false;
-
 	const dispatch = createEventDispatcher();
 
 	let usage = null;
@@ -51,7 +49,7 @@
 	}
 </script>
 
-<ShortcutsModal bind:show={showShortcuts} />
+<ShortcutsModal bind:show={$showShortcuts} />
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <DropdownMenu.Root
@@ -173,7 +171,7 @@
 					class="flex gap-2 items-center py-1.5 px-3 text-sm select-none w-full cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition"
 					id="chat-share-button"
 					on:click={() => {
-						showShortcuts = !showShortcuts;
+						showShortcuts.set(!$showShortcuts);
 						show = false;
 					}}
 				>
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index e813c5c834..a2c72e55ac 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -69,6 +69,7 @@ export const settings: Writable<Settings> = writable({});
 export const showSidebar = writable(false);
 export const showSearch = writable(false);
 export const showSettings = writable(false);
+export const showShortcuts = writable(false);
 export const showArchivedChats = writable(false);
 export const showChangelog = writable(false);
 
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 9cc8f9fe90..a9f4047651 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -34,6 +34,7 @@
 		tags,
 		banners,
 		showSettings,
+		showShortcuts,
 		showChangelog,
 		temporaryChatEnabled,
 		toolServers,
@@ -185,8 +186,8 @@
 				// Check if Ctrl + / is pressed
 				if (isCtrlPressed && event.key === '/') {
 					event.preventDefault();
-					console.log('showShortcuts');
-					document.getElementById('show-shortcuts-button')?.click();
+
+					showShortcuts.set(!$showShortcuts);
 				}
 
 				// Check if Ctrl + Shift + ' is pressed