From 4f4bceec948a04900d096ed3175d80647bf74d57 Mon Sep 17 00:00:00 2001
From: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
Date: Mon, 8 Apr 2024 19:20:24 +0200
Subject: [PATCH] feat(web): add search bar shortcuts (#8630)

add search bar shortcuts
---
 .../search-bar/search-bar.svelte              | 23 ++++++++-----------
 .../shared-components/show-shortcuts.svelte   |  9 ++++----
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/web/src/lib/components/shared-components/search-bar/search-bar.svelte b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
index 6c057483d4..8b88dfdbb6 100644
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
@@ -11,7 +11,7 @@
   import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
   import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
   import { handlePromiseError } from '$lib/utils';
-  import { shortcut } from '$lib/utils/shortcut';
+  import { shortcuts } from '$lib/utils/shortcut';
   import { focusOutside } from '$lib/utils/focus-outside';
 
   export let value = '';
@@ -87,12 +87,11 @@
 </script>
 
 <svelte:window
-  use:shortcut={{
-    shortcut: { key: 'Escape' },
-    onShortcut: () => {
-      onFocusOut();
-    },
-  }}
+  use:shortcuts={[
+    { shortcut: { key: 'Escape' }, onShortcut: onFocusOut },
+    { shortcut: { ctrl: true, key: 'k' }, onShortcut: () => input.focus() },
+    { shortcut: { ctrl: true, shift: true, key: 'k' }, onShortcut: onFilterClick },
+  ]}
 />
 
 <div class="w-full relative" use:clickOutside={{ onOutclick: onFocusOut }} use:focusOutside={{ onFocusOut }}>
@@ -130,12 +129,10 @@
         on:click={onFocusIn}
         on:focus={onFocusIn}
         disabled={showFilter}
-        use:shortcut={{
-          shortcut: { key: 'Escape' },
-          onShortcut: () => {
-            onFocusOut();
-          },
-        }}
+        use:shortcuts={[
+          { shortcut: { key: 'Escape' }, onShortcut: onFocusOut },
+          { shortcut: { ctrl: true, shift: true, key: 'k' }, onShortcut: onFilterClick },
+        ]}
       />
 
       <div class="absolute inset-y-0 {showClearIcon ? 'right-14' : 'right-5'} flex items-center pl-6 transition-all">
diff --git a/web/src/lib/components/shared-components/show-shortcuts.svelte b/web/src/lib/components/shared-components/show-shortcuts.svelte
index a1a8576a69..66ec349013 100644
--- a/web/src/lib/components/shared-components/show-shortcuts.svelte
+++ b/web/src/lib/components/shared-components/show-shortcuts.svelte
@@ -20,7 +20,8 @@
     general: [
       { key: ['←', '→'], action: 'Previous or next photo' },
       { key: ['Esc'], action: 'Back, close, or deselect' },
-      { key: ['/'], action: 'Search your photos' },
+      { key: ['Ctrl', 'k'], action: 'Search your photos' },
+      { key: ['Ctrl', '⇧', 'k'], action: 'Open the search filters' },
     ],
     actions: [
       { key: ['f'], action: 'Favorite or unfavorite photo' },
@@ -40,7 +41,7 @@
 <FullScreenModal onClose={() => dispatch('close')}>
   <div class="flex h-full w-full place-content-center place-items-center overflow-hidden">
     <div
-      class="w-[400px] max-w-[125vw] rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg md:w-[650px]"
+      class="rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
     >
       <div class="relative px-4 pt-4">
         <h1 class="px-4 py-4 font-medium text-immich-primary dark:text-immich-dark-primary">Keyboard Shortcuts</h1>
@@ -54,7 +55,7 @@
           <h2>General</h2>
           <div class="text-sm">
             {#each shortcuts.general as shortcut}
-              <div class="grid grid-cols-[20%_80%] items-center gap-4 pt-4 text-sm">
+              <div class="grid grid-cols-[30%_70%] items-center gap-4 pt-4 text-sm">
                 <div class="flex justify-self-end">
                   {#each shortcut.key as key}
                     <p
@@ -74,7 +75,7 @@
           <h2>Actions</h2>
           <div class="text-sm">
             {#each shortcuts.actions as shortcut}
-              <div class="grid grid-cols-[20%_80%] items-center gap-4 pt-4 text-sm">
+              <div class="grid grid-cols-[30%_70%] items-center gap-4 pt-4 text-sm">
                 <div class="flex justify-self-end">
                   {#each shortcut.key as key}
                     <p