From ca0a9d4ba40b5879dab1a1837fcabf158b2083d8 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Tue, 20 Sep 2022 22:30:41 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/5913

---
 app/src/assets/scss/_menu.scss | 20 ++++++++++++++++++++
 app/src/layout/Wnd.ts          | 22 +++++++++++++++++++---
 app/src/menus/Menu.ts          |  3 +++
 app/src/types/index.d.ts       |  1 +
 4 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/app/src/assets/scss/_menu.scss b/app/src/assets/scss/_menu.scss
index 0cff922c9..9a038d42a 100644
--- a/app/src/assets/scss/_menu.scss
+++ b/app/src/assets/scss/_menu.scss
@@ -76,6 +76,10 @@
 
     &--current {
       background-color: var(--b3-list-hover);
+
+      .b3-menu__action {
+        opacity: 1;
+      }
     }
 
     &--readonly {
@@ -95,6 +99,22 @@
     }
   }
 
+  &__action {
+    opacity: 0;
+    color: var(--b3-theme-on-surface);
+    width: 8px;
+    height: 8px;
+    align-self: center;
+    margin-left: 8px;
+    padding: 4px;
+    border-radius: 8px;
+
+    &:hover {
+      color: var(--b3-theme-on-background);
+      background: var(--b3-theme-background-light);
+    }
+  }
+
   &__label {
     flex: 1;
     min-width: 84px;
diff --git a/app/src/layout/Wnd.ts b/app/src/layout/Wnd.ts
index 1727e7a51..40d2f7aea 100644
--- a/app/src/layout/Wnd.ts
+++ b/app/src/layout/Wnd.ts
@@ -28,6 +28,7 @@ import {saveScroll} from "../protyle/scroll/saveScroll";
 import {Asset} from "../asset";
 import {newFile} from "../util/newFile";
 import {MenuItem} from "../menus/Menu";
+import {escapeHtml} from "../util/escape";
 
 export class Wnd {
     public id: string;
@@ -463,11 +464,26 @@ export class Wnd {
             const iconElement = item.querySelector(".item__icon");
             const graphicElement = item.querySelector(".item__graphic");
             window.siyuan.menus.menu.append(new MenuItem({
-                label: item.querySelector(".item__text").textContent,
+                label: escapeHtml(item.querySelector(".item__text").textContent),
+                action: "iconClose",
                 iconHTML: iconElement ? `<span class="b3-menu__icon">${iconElement.innerHTML}</span>` : "",
                 icon: graphicElement ? graphicElement.firstElementChild.getAttribute("xlink:href").substring(1) : "",
-                click: () => {
-                    this.switchTab(item, true);
+                bind: (element) => {
+                    element.addEventListener("click", (event) => {
+                        if (hasClosestByTag(event.target as Element, "svg")) {
+                            this.removeTab(item.getAttribute("data-id"));
+                            if (element.previousElementSibling || element.nextElementSibling) {
+                                element.remove();
+                            } else {
+                                window.siyuan.menus.menu.remove();
+                            }
+                        } else {
+                            this.switchTab(item, true);
+                            window.siyuan.menus.menu.remove();
+                        }
+                        event.preventDefault()
+                        event.stopPropagation();
+                    });
                 },
                 current: item.classList.contains("item--focus")
             }).element);
diff --git a/app/src/menus/Menu.ts b/app/src/menus/Menu.ts
index 6711032c8..e7ff930f1 100644
--- a/app/src/menus/Menu.ts
+++ b/app/src/menus/Menu.ts
@@ -136,6 +136,9 @@ export class MenuItem {
         if (options.accelerator) {
             html += `<span class="b3-menu__accelerator">${updateHotkeyTip(options.accelerator)}</span>`;
         }
+        if (options.action) {
+            html += `<svg class="b3-menu__action"><use xlink:href="#${options.action}"></use></svg>`;
+        }
         if (options.id) {
             this.element.setAttribute("data-id", options.id);
         }
diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts
index 778cf1a8b..2dc6372cc 100644
--- a/app/src/types/index.d.ts
+++ b/app/src/types/index.d.ts
@@ -484,6 +484,7 @@ declare interface IMenu {
     click?: (element: HTMLElement) => void,
     type?: "separator" | "submenu" | "readonly",
     accelerator?: string,
+    action?: string,
     id?: string,
     submenu?: IMenu[]
     disabled?: boolean