🎨 https://github.com/siyuan-note/siyuan/issues/14176

app/src/menus/workspace.ts

@@ -7,7 +7,14 @@ import {getOpenNotebookCount, originalPath, pathPosix, showFileInFolder} from ".
 import {fetchNewDailyNote, mountHelp, newDailyNote} from "../util/mount";
 import {fetchPost} from "../util/fetch";
 import {Constants} from "../constants";
-import {isInAndroid, isInHarmony, isInIOS, isIPad, setStorageVal, writeText} from "../protyle/util/compatibility";
+import {
+    isInAndroid,
+    isInHarmony,
+    isInIOS,
+    isIPad,
+    setStorageVal,
+    writeText
+} from "../protyle/util/compatibility";
 import {openCard} from "../card/openCard";
 import {openSetting} from "../config";
 import {getAllDocks} from "../layout/getAll";
@@ -26,6 +33,7 @@ import {App} from "../index";
 import {isBrowser} from "../util/functions";
 import {openRecentDocs} from "../business/openRecentDocs";
 import * as dayjs from "dayjs";
+import {upDownHint} from "../util/upDownHint";
 
 const editLayout = (layoutName?: string) => {
     const dialog = new Dialog({
@@ -337,30 +345,82 @@ export const workspaceMenu = (app: App, rect: DOMRect) => {
         }];
         if (window.siyuan.storage[Constants.LOCAL_LAYOUTS].length > 0) {
             layoutSubMenu.push({id: "separator_1", type: "separator"});
-        }
-        window.siyuan.storage[Constants.LOCAL_LAYOUTS].sort((a: { name: string }, b: { name: string }) => {
-            return b.name > a.name ? -1 : 1;
-        }).forEach((item: ISaveLayout) => {
             layoutSubMenu.push({
                 iconHTML: "",
-                action: "iconEdit",
+                type: "empty",
-                label: `${item.name} <span class="ft__smaller ft__on-surface">${item.time ? dayjs(item.time).format("YYYY-MM-DD HH:mm") : ""}</span>`,
+                label: `<input class="b3-text-field fn__block" style="margin: 4px 0" placeholder="${window.siyuan.languages.search}">
+<div class="b3-list b3-list--background" style="max-width: 50vw"></div>`,
                 bind(menuElement) {
-                    menuElement.addEventListener("click", (event) => {
+                    const genListHTML = () => {
-                        if (hasClosestByClassName(event.target as Element, "b3-menu__action")) {
+                        let html = "";
+                        window.siyuan.storage[Constants.LOCAL_LAYOUTS].sort((a: ISaveLayout, b: ISaveLayout) => {
+                            return b.name > a.name ? -1 : 1;
+                        }).forEach((item: ISaveLayout) => {
+                            if (inputElement.value === "" || item.name.toLowerCase().indexOf(inputElement.value.toLowerCase()) > -1) {
+                                html += `<div data-name="${item.name}" class="b3-list-item b3-list-item--narrow b3-list-item--hide-action ${html ? "" : "b3-list-item--focus"}">
+    <div class="b3-list-item__text">${item.name}</div>
+    <span class="b3-list-item__meta">${item.time ? dayjs(item.time).format("YYYY-MM-DD HH:mm") : ""}</span>
+    <span class="b3-list-item__action">
+        <svg><use xlink:href="#iconEdit"></use></svg>
+    </span>
+</div>`;
+                            }
+                        });
+                        return html;
+                    };
+                    const inputElement = menuElement.querySelector(".b3-text-field") as HTMLInputElement;
+                    const listElement = menuElement.querySelector(".b3-list");
+                    inputElement.addEventListener("keydown", (event) => {
+                        event.stopPropagation();
+                        if (event.isComposing) {
+                            return;
+                        }
+                        upDownHint(listElement, event);
+                        if (event.key === "Escape") {
+                            window.siyuan.menus.menu.remove();
+                        } else if (event.key === "Enter") {
+                            const currentElement = listElement.querySelector(".b3-list-item--focus");
+                            if (currentElement) {
+                                listElement.dispatchEvent(new CustomEvent("click", {detail: currentElement.getAttribute("data-name")}));
+                            }
+                        }
+                    });
+                    inputElement.addEventListener("compositionend", () => {
+                        listElement.innerHTML = genListHTML();
+                    });
+                    inputElement.addEventListener("input", (event: InputEvent) => {
+                        if (event.isComposing) {
+                            return;
+                        }
+                        event.stopPropagation();
+                        listElement.innerHTML = genListHTML();
+                    });
+                    listElement.addEventListener("click", (event: MouseEvent) => {
+                        if (window.siyuan.config.readonly) {
+                            return;
+                        }
+                        const actionElement = hasClosestByClassName(event.target as Element, "b3-list-item__action");
+                        if (actionElement) {
                             event.preventDefault();
                             event.stopPropagation();
-                            editLayout(item.name);
+                            editLayout(actionElement.parentElement.dataset.name);
                             window.siyuan.menus.menu.remove();
                             return;
                         }
-                        if (window.siyuan.config.readonly) {
+                        const liElement = hasClosestByClassName(event.target as Element, "b3-list-item");
-                            window.location.reload();
+                        if (liElement || event.detail) {
-                        } else {
+                            const itemData: ISaveLayout = window.siyuan.storage[Constants.LOCAL_LAYOUTS].find((item: ISaveLayout) => {
-                            fetchPost("/api/system/setUILayout", {layout: item.layout}, () => {
+                                if (typeof event.detail === "string") {
-                                if (item.filesPaths) {
+                                    return item.name === event.detail;
-                                    window.siyuan.storage[Constants.LOCAL_FILESPATHS] = item.filesPaths;
+                                } else if (liElement) {
-                                    setStorageVal(Constants.LOCAL_FILESPATHS, item.filesPaths, () => {
+                                    return item.name === liElement.dataset.name;
+                                }
+                            });
+                            if (itemData) {
+                                fetchPost("/api/system/setUILayout", {layout: itemData.layout}, () => {
+                                    if (itemData.filesPaths) {
+                                        window.siyuan.storage[Constants.LOCAL_FILESPATHS] = itemData.filesPaths;
+                                        setStorageVal(Constants.LOCAL_FILESPATHS, itemData.filesPaths, () => {
                                             window.location.reload();
                                         });
                                     } else {
@@ -368,10 +428,15 @@ export const workspaceMenu = (app: App, rect: DOMRect) => {
                                     }
                                 });
                             }
-                    });
+                            event.preventDefault();
+                            event.stopPropagation();
                         }
                     });
+                    listElement.innerHTML = genListHTML();
+                }
             });
+        }
+        if (!window.siyuan.config.readonly) {
             window.siyuan.menus.menu.append(new MenuItem({
                 id: "layout",
                 label: window.siyuan.languages.layout,
@@ -379,6 +444,7 @@ export const workspaceMenu = (app: App, rect: DOMRect) => {
                 type: "submenu",
                 submenu: layoutSubMenu
             }).element);
+        }
         window.siyuan.menus.menu.append(new MenuItem({id: "separator_1", type: "separator"}).element);
         if (!window.siyuan.config.readonly) {
             if (getOpenNotebookCount() < 2) {