:art: https://github.com/siyuan-note/siyuan/issues/10908

app/appearance/langs/en_US.json

@@ -1,4 +1,5 @@
 {
+  "showTitle": "Show database title",
   "fillCreated": "Default fill created time",
   "removeCard": "Remove flashcard",
   "updateLayout": "Update layout",

app/appearance/langs/es_ES.json

@@ -1,4 +1,5 @@
 {
+  "showTitle": "Mostrar título de la base de datos",
   "fillCreated": "Hora de creación del relleno predeterminado",
   "removeCard": "Eliminar tarjeta flash",
   "updateLayout": "Actualizar diseño",

app/appearance/langs/fr_FR.json

@@ -1,4 +1,5 @@
 {
+  "showTitle": "Afficher le titre de la base de données",
   "fillCreated": "Heure de création de remplissage par défaut",
   "removeCard": "Supprimer la flashcard",
   "updateLayout": "Mettre à jour la mise en page",

app/appearance/langs/zh_CHT.json

@@ -1,4 +1,5 @@
 {
+  "showTitle": "顯示資料庫標題",
   "fillCreated": "Default fill creation time",
   "removeCard": "移除閃卡",
   "updateLayout": "更新版面配置",

app/appearance/langs/zh_CN.json

@@ -1,4 +1,5 @@
 {
+  "showTitle": "显示数据库标题",
   "fillCreated": "默认填充创建时间",
   "removeCard": "移除闪卡",
   "updateLayout": "更新布局",

app/src/protyle/render/av/openMenuPanel.ts

@@ -164,7 +164,7 @@ export const openMenuPanel = (options: {
             } else if (options.type === "edit") {
                 bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr});
             } else if (options.type === "config") {
-                bindViewEvent({protyle: options.protyle, data, menuElement});
+                bindViewEvent({protyle: options.protyle, data, menuElement, blockElement: options.blockElement});
             }
         }
         if (options.cb) {
@@ -479,7 +479,7 @@ export const openMenuPanel = (options: {
                 } else if (type === "go-config") {
                     menuElement.innerHTML = getViewHTML(data.view);
                     setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
-                    bindViewEvent({protyle: options.protyle, data, menuElement});
+                    bindViewEvent({protyle: options.protyle, data, menuElement, blockElement: options.blockElement});
                     event.preventDefault();
                     event.stopPropagation();
                     break;
@@ -690,39 +690,6 @@ export const openMenuPanel = (options: {
                     event.preventDefault();
                     event.stopPropagation();
                     break;
-                } else if (type === "toggle-view-title") {
-                    if (target.firstElementChild.getAttribute("xlink:href") === "#iconEyeoff") {
-                        // hide
-                        transaction(options.protyle, [{
-                            action: "hideAttrViewName",
-                            avID,
-                            blockID,
-                            data: true
-                        }], [{
-                            action: "hideAttrViewName",
-                            avID,
-                            blockID,
-                            data: false
-                        }]);
-                        options.blockElement.querySelector(".av__title").classList.add("av__title--hide");
-                    } else {
-                        transaction(options.protyle, [{
-                            action: "hideAttrViewName",
-                            avID,
-                            blockID,
-                            data: false
-                        }], [{
-                            action: "hideAttrViewName",
-                            avID,
-                            blockID,
-                            data: true
-                        }]);
-                        options.blockElement.querySelector(".av__title").classList.remove("av__title--hide");
-                    }
-                    avPanelElement.remove();
-                    event.preventDefault();
-                    event.stopPropagation();
-                    break;
                 } else if (type === "duplicate-view") {
                     const id = Lute.NewNodeID();
                     transaction(options.protyle, [{

app/src/protyle/render/av/view.ts

@@ -88,6 +88,7 @@ export const bindViewEvent = (options: {
     protyle: IProtyle,
     data: IAV,
     menuElement: HTMLElement
+    blockElement: Element
 }) => {
     const inputElement = options.menuElement.querySelector('.b3-text-field[data-type="name"]') as HTMLInputElement;
     inputElement.addEventListener("blur", () => {
@@ -117,6 +118,39 @@ export const bindViewEvent = (options: {
         }
     });
     inputElement.select();
+    const toggleTitleElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-view-title"]') as HTMLInputElement;
+    toggleTitleElement.addEventListener("change", () => {
+        const avID = options.blockElement.getAttribute("data-av-id");
+        const blockID = options.blockElement.getAttribute("data-node-id");
+        if (!toggleTitleElement.checked) {
+            // hide
+            transaction(options.protyle, [{
+                action: "hideAttrViewName",
+                avID,
+                blockID,
+                data: true
+            }], [{
+                action: "hideAttrViewName",
+                avID,
+                blockID,
+                data: false
+            }]);
+            options.blockElement.querySelector(".av__title").classList.add("av__title--hide");
+        } else {
+            transaction(options.protyle, [{
+                action: "hideAttrViewName",
+                avID,
+                blockID,
+                data: false
+            }], [{
+                action: "hideAttrViewName",
+                avID,
+                blockID,
+                data: true
+            }]);
+            options.blockElement.querySelector(".av__title").classList.remove("av__title--hide");
+        }
+    })
 };
 
 export const getViewHTML = (data: IAVTable) => {
@@ -154,13 +188,12 @@ export const getViewHTML = (data: IAVTable) => {
     <span class="b3-menu__accelerator">${data.pageSize}</span>
     <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>
-<button class="b3-menu__item">
-    <div class="b3-menu__label fn__flex">
-        <svg class="b3-menu__icon"></svg>
-        <span class="b3-menu__label">${window.siyuan.languages.title}</span>
-    </div>
-    <svg class="b3-menu__action" data-type="toggle-view-title"><use xlink:href="#iconEye${data.hideAttrViewName ? "" : "off"}"></use></svg>
-</button>
+<label class="b3-menu__item">
+    <svg class="b3-menu__icon"></svg>
+    <span class="fn__flex-center">${window.siyuan.languages.showTitle}</span>
+    <span class="fn__space fn__flex-1"></span>
+    <input data-type="toggle-view-title" type="checkbox" class="b3-switch b3-switch--menu" ${data.hideAttrViewName ? "" : "checked"}>
+</label>
 <button class="b3-menu__separator"></button>
 <button class="b3-menu__item" data-type="duplicate-view">
     <svg class="b3-menu__icon">