From e1f712e71544ed53c9d0b1d1e3dfac99000f8ae9 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Wed, 5 Jul 2023 19:18:52 +0800
Subject: [PATCH] :lipstick: fix
 https://github.com/siyuan-note/siyuan/issues/8685

---
 app/src/assets/scss/business/_config.scss | 47 ++++++++++++++---------
 app/src/config/index.ts                   |  5 +++
 app/src/dialog/message.ts                 |  3 ++
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/app/src/assets/scss/business/_config.scss b/app/src/assets/scss/business/_config.scss
index c12c18880..6fd9a20af 100644
--- a/app/src/assets/scss/business/_config.scss
+++ b/app/src/assets/scss/business/_config.scss
@@ -30,27 +30,38 @@
     }
   }
 
-  &__panel {
-    & > .b3-tab-bar {
-      user-select: none;
-      width: 200px;
-      overflow: auto;
-      padding: 8px 0;
-      box-sizing: border-box;
+  &__panel > .b3-tab-bar {
+    user-select: none;
+    width: 240px;
+    overflow: auto;
+    padding: 8px 0;
+    box-sizing: border-box;
 
-      .b3-form__icon {
-        margin: 0 8px 8px;
-      }
+    .config__tab-hr {
+      margin: 16px 0;
+      background: var(--b3-border-color);
+      height: 1px;
+    }
 
-      .b3-list-item {
-        line-height: 38px;
+    .config__tab-title {
+      display: flex;
+      align-items: center;
+      height: 40px;
+      padding: 0 12px;
+    }
 
-        &__graphic {
-          margin-right: 0;
-          padding: 0 10px 0 5px;
-          height: 16px;
-          width: 16px;
-        }
+    .b3-form__icon {
+      margin: 0 8px 8px;
+    }
+
+    .b3-list-item {
+      line-height: 38px;
+
+      &__graphic {
+        margin-right: 0;
+        padding: 0 10px 0 5px;
+        height: 16px;
+        width: 16px;
       }
     }
   }
diff --git a/app/src/config/index.ts b/app/src/config/index.ts
index 448f9d345..c3d08836f 100644
--- a/app/src/config/index.ts
+++ b/app/src/config/index.ts
@@ -95,7 +95,12 @@ export const openSetting = (app: App) => {
     const dialog = new Dialog({
         content: `<div class="fn__flex-1 fn__flex config__panel" style="overflow: hidden;position: relative">
   <ul class="b3-tab-bar b3-list b3-list--background">
+    <div class="config__tab-title">
+        <svg class="b3-list-item__graphic"><use xlink:href="#iconSettings"></use></svg>
+        <span class="b3-list-item__text">${window.siyuan.languages.config}</span>
+    </div>
     <div class="b3-form__icon"><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 class="config__tab-hr"></div>
     <li data-name="editor" class="b3-list-item--focus b3-list-item"><svg class="b3-list-item__graphic"><use xlink:href="#iconEdit"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.editor}</span></li>
     <li data-name="filetree" class="b3-list-item"><svg class="b3-list-item__graphic"><use xlink:href="#iconFiles"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.fileTree}</span></li>
     <li data-name="card" class="b3-list-item"><svg class="b3-list-item__graphic"><use xlink:href="#iconRiffCard"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.riffCard}</span></li>
diff --git a/app/src/dialog/message.ts b/app/src/dialog/message.ts
index 703200a35..95748ffaf 100644
--- a/app/src/dialog/message.ts
+++ b/app/src/dialog/message.ts
@@ -83,6 +83,9 @@ export const showMessage = (message: string, timeout = 6000, type = "info", mess
 
 export const hideMessage = (id?: string) => {
     const messagesElement = document.getElementById("message").firstElementChild;
+    if (!messagesElement) {
+        return;
+    }
     if (id) {
         const messageElement = messagesElement.querySelector(`[data-id="${id}"]`);
         if (messageElement) {