:art: fix https://github.com/siyuan-note/siyuan/issues/9663

app/src/assets/scss/base.scss

@@ -392,6 +392,10 @@ html {
   max-width: 100%;
   min-width: 426px;
 
+  .b3-list {
+    padding: 8px 0;
+  }
+
   .b3-list:last-child {
     border-left: 1px solid var(--b3-theme-surface-lighter);
   }

app/src/boot/globalEvent/keydown.ts

@@ -120,11 +120,16 @@ const dialogArrow = (app: App, element: HTMLElement, event: KeyboardEvent) => {
                 currentLiElement.parentElement.firstElementChild.classList.add("b3-list-item--focus");
             }
         } else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-            if (isWindow()) {
-                currentLiElement.classList.add("b3-list-item--focus");
+            const sideElement = currentLiElement.parentElement.previousElementSibling || currentLiElement.parentElement.nextElementSibling;
+            if (sideElement) {
+                const tempLiElement = sideElement.querySelector(`[data-index="${currentLiElement.getAttribute("data-index")}"]`) || sideElement.lastElementChild;
+                if (tempLiElement) {
+                    tempLiElement.classList.add("b3-list-item--focus")
+                } else {
+                    currentLiElement.classList.add("b3-list-item--focus");
+                }
             } else {
-                const sideElement = currentLiElement.parentElement.previousElementSibling || currentLiElement.parentElement.nextElementSibling;
-                (sideElement.querySelector(`[data-index="${currentLiElement.getAttribute("data-index")}"]`) || sideElement.lastElementChild).classList.add("b3-list-item--focus");
+                currentLiElement.classList.add("b3-list-item--focus");
             }
         } else if (event.key === "Enter") {
             const currentType = currentLiElement.getAttribute("data-type");
@@ -146,14 +151,15 @@ const dialogArrow = (app: App, element: HTMLElement, event: KeyboardEvent) => {
         }
         currentLiElement = element.querySelector(".b3-list-item--focus");
         const rootId = currentLiElement.getAttribute("data-node-id");
+        const pathElement = element.querySelector(".switch-doc__path")
         if (rootId) {
             fetchPost("/api/filetree/getFullHPathByID", {
                 id: rootId
             }, (response) => {
-                currentLiElement.parentElement.parentElement.nextElementSibling.innerHTML = escapeHtml(response.data);
+                pathElement.innerHTML = escapeHtml(response.data);
             });
         } else {
-            currentLiElement.parentElement.parentElement.nextElementSibling.innerHTML = currentLiElement.querySelector(".b3-list-item__text").innerHTML;
+            pathElement.innerHTML = currentLiElement.querySelector(".b3-list-item__text").innerHTML;
         }
         const currentRect = currentLiElement.getBoundingClientRect();
         const currentParentRect = currentLiElement.parentElement.getBoundingClientRect();
@@ -1122,7 +1128,7 @@ export const windowKeyDown = (app: App, event: KeyboardEvent) => {
         switchDialog = new Dialog({
             title: window.siyuan.languages.switchTab,
             content: `<div class="fn__flex-column switch-doc">
-    <div class="fn__hr"><input style="opacity: 0;height: 1px;box-sizing: border-box"></div>
+    <input style="opacity: 0;height: 0.1px;box-sizing: border-box;margin: 0;padding: 0;border: 0;">
     <div class="fn__flex" style="overflow:auto;">${dockHtml}
         <ul${!isTabWindow ? "" : ' style="border-left:0"'} class="b3-list b3-list--background fn__flex-1">${tabHtml}</ul>
     </div>

app/src/business/openRecentDocs.ts

@@ -1,4 +1,4 @@
-import {fetchPost} from "../util/fetch";
+import {fetchPost, fetchSyncPost} from "../util/fetch";
 import {unicode2Emoji} from "../emoji";
 import {Constants} from "../constants";
 import {escapeHtml} from "../util/escape";
@@ -10,6 +10,63 @@ import {focusByRange} from "../protyle/util/selection";
 import {hasClosestByClassName} from "../protyle/util/hasClosest";
 import {hideElements} from "../protyle/ui/hideElements";
 
+const getHTML = async (data: { rootID: string, icon: string, title: string }[], element: Element, key?: string) => {
+    let tabHtml = "";
+    let index = 0
+    data.forEach((item) => {
+        if (!key || item.title.toLowerCase().includes(key.toLowerCase())) {
+            tabHtml += `<li data-index="${index}" data-node-id="${item.rootID}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">
+${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, "b3-list-item__graphic", true)}
+<span class="b3-list-item__text">${escapeHtml(item.title)}</span>
+</li>`;
+            index++;
+        }
+    });
+    let switchPath = "";
+    if (tabHtml) {
+        const pathResponse = await fetchSyncPost("/api/filetree/getFullHPathByID", {
+            id: data[0].rootID
+        });
+        switchPath = escapeHtml(pathResponse.data);
+    }
+    let dockHtml = "";
+    if (!isWindow()) {
+        dockHtml = `<ul class="b3-list b3-list--background" style="overflow: auto;width: 200px;">`;
+        if (!key || window.siyuan.languages.riffCard.toLowerCase().includes(key.toLowerCase())) {
+            dockHtml += `<li data-type="riffCard" data-index="0" class="b3-list-item${!switchPath ? " b3-list-item--focus" : ""}">
+    <svg class="b3-list-item__graphic"><use xlink:href="#iconRiffCard"></use></svg>
+    <span class="b3-list-item__text">${window.siyuan.languages.riffCard}</span>
+    <span class="b3-list-item__meta">${updateHotkeyTip(window.siyuan.config.keymap.general.riffCard.custom)}</span>
+</li>`
+            if (!switchPath) {
+                switchPath = window.siyuan.languages.riffCard;
+            }
+        }
+        let docIndex = 1
+        getAllDocks().forEach((item) => {
+            if (!key || item.title.toLowerCase().includes(key.toLowerCase())) {
+                dockHtml += `<li data-type="${item.type}" data-index="${docIndex}" class="b3-list-item${!switchPath ? " b3-list-item--focus" : ""}">
+    <svg class="b3-list-item__graphic"><use xlink:href="#${item.icon}"></use></svg>
+    <span class="b3-list-item__text">${item.title}</span>
+    <span class="b3-list-item__meta">${updateHotkeyTip(item.hotkey || "")}</span>
+</li>`;
+                docIndex++;
+                if (!switchPath) {
+                    switchPath = window.siyuan.languages.riffCard;
+                }
+            }
+        });
+        dockHtml = dockHtml + "</ul>";
+    }
+
+    const pathElement = element.querySelector(".switch-doc__path")
+    pathElement.innerHTML = switchPath;
+    pathElement.previousElementSibling.innerHTML = `<div class="fn__flex fn__flex-1" style="overflow:auto;">
+        ${dockHtml}
+        <ul${!isWindow() ? "" : ' style="border-left:0"'} class="b3-list b3-list--background fn__flex-1">${tabHtml}</ul>
+    </div>`;
+}
+
 export const openRecentDocs = () => {
     const openRecentDocsDialog = window.siyuan.dialogs.find(item => {
         if (item.element.getAttribute("data-key") === window.siyuan.config.keymap.general.recentDocs.custom) {
@@ -25,55 +82,37 @@ export const openRecentDocs = () => {
         if (getSelection().rangeCount > 0) {
             range = getSelection().getRangeAt(0);
         }
-        let tabHtml = "";
-        response.data.forEach((item: any, index: number) => {
-            tabHtml += `<li data-index="${index}" data-node-id="${item.rootID}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">
-${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, "b3-list-item__graphic", true)}
-<span class="b3-list-item__text">${escapeHtml(item.title)}</span>
-</li>`;
-        });
-        let dockHtml = "";
-        if (!isWindow()) {
-            dockHtml = `<ul class="b3-list b3-list--background" style="overflow: auto;width: 200px;">
-<li data-type="riffCard" data-index="0" class="b3-list-item${!tabHtml ? " b3-list-item--focus" : ""}">
-    <svg class="b3-list-item__graphic"><use xlink:href="#iconRiffCard"></use></svg>
-    <span class="b3-list-item__text">${window.siyuan.languages.riffCard}</span>
-    <span class="b3-list-item__meta">${updateHotkeyTip(window.siyuan.config.keymap.general.riffCard.custom)}</span>
-</li>`;
-            getAllDocks().forEach((item, index) => {
-                dockHtml += `<li data-type="${item.type}" data-index="${index + 1}" class="b3-list-item">
-    <svg class="b3-list-item__graphic"><use xlink:href="#${item.icon}"></use></svg>
-    <span class="b3-list-item__text">${item.title}</span>
-    <span class="b3-list-item__meta">${updateHotkeyTip(item.hotkey || "")}</span>
-</li>`;
-            });
-            dockHtml = dockHtml + "</ul>";
-        }
         const dialog = new Dialog({
-            title: window.siyuan.languages.recentDocs,
+            title: `<div class="fn__flex">
+<div class="fn__flex-center">${window.siyuan.languages.recentDocs}</div>
+<div class="fn__flex-1"></div>
+<div class="b3-form__icon fn__size200">
+    <svg class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg>
+    <input placeholder="${window.siyuan.languages.search}" class="b3-text-field fn__block b3-form__icon-input">
+</div>
+</div>`,
             content: `<div class="fn__flex-column switch-doc">
-    <div class="fn__hr"><input style="opacity: 0;height: 1px;box-sizing: border-box"></div>
-    <div class="fn__flex" style="overflow:auto;">${dockHtml}
-        <ul${!isWindow() ? "" : ' style="border-left:0"'} class="b3-list b3-list--background fn__flex-1">${tabHtml}</ul>
-    </div>
+    <div class="fn__flex fn__flex-1" style="overflow:auto;"></div>
     <div class="switch-doc__path"></div>
 </div>`,
+            height: "80vh",
             destroyCallback: () => {
                 if (range && range.getBoundingClientRect().height !== 0) {
                     focusByRange(range);
                 }
             }
         });
-        if (response.data.length > 0) {
-            fetchPost("/api/filetree/getFullHPathByID", {
-                id: response.data[0].rootID
-            }, (response) => {
-                dialog.element.querySelector(".switch-doc__path").innerHTML = escapeHtml(response.data);
-            });
-        } else {
-            dialog.element.querySelector(".switch-doc__path").innerHTML = dialog.element.querySelector(".b3-list-item--focus").textContent;
-        }
-        dialog.element.querySelector("input").focus();
+        const searchElement = dialog.element.querySelector("input")
+        searchElement.focus();
+        searchElement.addEventListener("compositionend", () => {
+            getHTML(response.data, dialog.element, searchElement.value);
+        });
+        searchElement.addEventListener("input", (event: InputEvent) => {
+            if (event.isComposing) {
+                return
+            }
+            getHTML(response.data, dialog.element, searchElement.value)
+        });
         dialog.element.setAttribute("data-key", window.siyuan.config.keymap.general.recentDocs.custom);
         dialog.element.addEventListener("click", (event) => {
             const liElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item");
@@ -85,5 +124,6 @@ ${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, "b3-list-item__graphic
                 event.preventDefault();
             }
         });
+        getHTML(response.data, dialog.element);
     });
 };