From 60af80ba9d1568d8149e12b71827b6762a9e549a Mon Sep 17 00:00:00 2001
From: Abdo <abdo@abdnh.net>
Date: Sun, 26 Oct 2025 18:59:49 +0300
Subject: [PATCH] Scroll selected deck/notetype into view

---
 ts/lib/components/ItemChooser.svelte | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/ts/lib/components/ItemChooser.svelte b/ts/lib/components/ItemChooser.svelte
index 4ee9bb5ff..0b24e8352 100644
--- a/ts/lib/components/ItemChooser.svelte
+++ b/ts/lib/components/ItemChooser.svelte
@@ -42,6 +42,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                   item.name.toLowerCase().includes(searchQuery.toLowerCase()),
               ),
     );
+    const filteredElements: HTMLButtonElement[] = $state([]);
 
     function onSelect(item: Item) {
         selectedItem = item;
@@ -69,6 +70,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
+    function onShown() {
+        searchInput?.focus();
+        for(const element of filteredElements) {
+            if(element.classList.contains("selected")) {
+                element.scrollIntoView({block: "start"});
+            }
+        }
+    }
+
     $effect(() => {
         if (!selectedItem && items.length > 0) {
             selectedItem = items[0];
@@ -81,7 +91,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </LabelButton>
 
 <Shortcut {keyCombination} on:action={toggleModal} />
-<Modal bind:this={modal} onShown={() => searchInput?.focus()} dialogClass="modal-lg">
+<Modal bind:this={modal} onShown={onShown} dialogClass="modal-lg">
     <div slot="header" class="modal-header">
         <IconConstrain iconSize={90}>
             <Icon {icon} />
@@ -125,8 +135,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </div>
         </div>
         <div class="item-grid">
-            {#each filteredItems as item (item.id)}
+            {#each filteredItems as item, i (item.id)}
                 <button
+                    bind:this={filteredElements[i]}
                     class="item-card"
                     class:selected={selectedItem?.id === item.id}
                     onclick={() => onSelect(item)}