bugfix/setting-panel-hierarchy: Updated styling to improve consistency. Updated various setting panes (Fixed hierarchy issues that caused some titles to overlap rather then bump and whitespace formatting)

src/modules/features/SettingDialogue/PaneCustomisationSync.ts

@@ -21,7 +21,7 @@ export function paneCustomisationSync(
                 text: "Please set device name to identify this device. This name should be unique among your devices. While not configured, we cannot enable this feature.",
                 cls: "op-warn",
             },
-            (c) => {},
+            (c) => { },
             visibleOnly(() => this.isConfiguredAs("deviceAndVaultName", ""))
         );
         this.createEl(
@@ -31,7 +31,7 @@ export function paneCustomisationSync(
                 text: "We cannot change the device name while this feature is enabled. Please disable this feature to change the device name.",
                 cls: "op-warn-info",
             },
-            (c) => {},
+            (c) => { },
             visibleOnly(() => this.isConfiguredAs("usePluginSync", true))
         );
 

src/modules/features/SettingDialogue/PaneHatch.ts

@@ -119,8 +119,8 @@ export function paneHatch(this: ObsidianLiveSyncSettingTab, paneEl: HTMLElement,
                     const scheme = pluginConfig.couchDB_URI.startsWith("http:")
                         ? "(HTTP)"
                         : pluginConfig.couchDB_URI.startsWith("https:")
-                          ? "(HTTPS)"
-                          : "";
+                            ? "(HTTPS)"
+                            : "";
                     pluginConfig.couchDB_URI = isCloudantURI(pluginConfig.couchDB_URI)
                         ? "cloudant"
                         : `self-hosted${scheme}`;
@@ -150,8 +150,8 @@ export function paneHatch(this: ObsidianLiveSyncSettingTab, paneEl: HTMLElement,
                         const endpointScheme = pluginConfig.endpoint.startsWith("http:")
                             ? "(HTTP)"
                             : pluginConfig.endpoint.startsWith("https:")
-                              ? "(HTTPS)"
-                              : "";
+                                ? "(HTTPS)"
+                                : "";
                         pluginConfig.endpoint = `${endpoint.indexOf(".r2.cloudflarestorage.") !== -1 ? "R2" : "self-hosted?"}(${endpointScheme})`;
                     }
                     const obsidianInfo = {
@@ -166,9 +166,9 @@ ${stringifyYaml(responseConfig)}
 ---
 # ---- Plug-in config ----
 ${stringifyYaml({
-    version: this.manifestVersion,
-    ...pluginConfig,
-})}`;
+                        version: this.manifestVersion,
+                        ...pluginConfig,
+                    })}`;
                     console.log(msgConfig);
                     await navigator.clipboard.writeText(msgConfig);
                     Logger(

src/modules/features/SettingDialogue/PaneMaintenance.ts

@@ -98,7 +98,7 @@ export function paneMaintenance(
             );
     });
 
-    void addPanel(paneEl, "Syncing", () => {}, this.onlyOnCouchDBOrMinIO).then((paneEl) => {
+    void addPanel(paneEl, "Syncing", () => { }, this.onlyOnCouchDBOrMinIO).then((paneEl) => {
         new Setting(paneEl)
             .setName("Resend")
             .setDesc("Resend all chunks to the remote.")
@@ -283,7 +283,7 @@ export function paneMaintenance(
             .addOnUpdate(this.onlyOnCouchDB);
     });
 
-    void addPanel(paneEl, "Total Overhaul", () => {}, this.onlyOnCouchDBOrMinIO).then((paneEl) => {
+    void addPanel(paneEl, "Total Overhaul", () => { }, this.onlyOnCouchDBOrMinIO).then((paneEl) => {
         new Setting(paneEl)
             .setName("Rebuild everything")
             .setDesc("Rebuild local and remote database with local files.")
@@ -307,7 +307,7 @@ export function paneMaintenance(
                     })
             );
     });
-    void addPanel(paneEl, "Rebuilding Operations (Remote Only)", () => {}, this.onlyOnCouchDBOrMinIO).then((paneEl) => {
+    void addPanel(paneEl, "Rebuilding Operations (Remote Only)", () => { }, this.onlyOnCouchDBOrMinIO).then((paneEl) => {
         new Setting(paneEl)
             .setName("Perform cleanup")
             .setDesc(

src/modules/features/SettingDialogue/PaneRemoteConfig.ts

@@ -321,282 +321,283 @@ export function paneRemoteConfig(
             },
             onUpdate: this.enableOnlySyncDisabled,
         });
-        void addPanel(paneEl, "Peer-to-Peer", undefined, this.onlyOnOnlyP2P).then((paneEl) => {
-            const syncWarnP2P = this.createEl(paneEl, "div", {
-                text: "",
-            });
-            const p2pMessage = `This feature is a Work In Progress, and configurable on \`P2P Replicator\` Pane.
+    });
+    
+    void addPanel(paneEl, "Peer-to-Peer", undefined, this.onlyOnOnlyP2P).then((paneEl) => {
+        const syncWarnP2P = this.createEl(paneEl, "div", {
+            text: "",
+        });
+        const p2pMessage = `This feature is a Work In Progress, and configurable on \`P2P Replicator\` Pane.
 The pane also can be launched by \`P2P Replicator\` command from the Command Palette.
 `;
 
-            void MarkdownRenderer.render(this.plugin.app, p2pMessage, syncWarnP2P, "/", this.plugin);
-            syncWarnP2P.addClass("op-warn-info");
-            new Setting(paneEl).setName("Apply Settings").setClass("wizardHidden").addApplyButton(["remoteType"]);
-            // .addOnUpdate(onlyOnMinIO);
-            // new Setting(paneEl).addButton((button) =>
-            //     button
-            //         .setButtonText("Open P2P Replicator")
-            //         .onClick(() => {
-            //             const addOn = this.plugin.getAddOn<P2PReplicator>(P2PReplicator.name);
-            //             void addOn?.openPane();
-            //             this.closeSetting();
-            //         })
-            // );
-        });
-        void addPanel(paneEl, $msg("obsidianLiveSyncSettingTab.titleMinioS3R2"), undefined, this.onlyOnMinIO).then(
-            (paneEl) => {
-                const syncWarnMinio = this.createEl(paneEl, "div", {
-                    text: "",
-                });
-                const ObjectStorageMessage = $msg("obsidianLiveSyncSettingTab.msgObjectStorageWarning");
+        void MarkdownRenderer.render(this.plugin.app, p2pMessage, syncWarnP2P, "/", this.plugin);
+        syncWarnP2P.addClass("op-warn-info");
+        new Setting(paneEl).setName("Apply Settings").setClass("wizardHidden").addApplyButton(["remoteType"]);
+        // .addOnUpdate(onlyOnMinIO);
+        // new Setting(paneEl).addButton((button) =>
+        //     button
+        //         .setButtonText("Open P2P Replicator")
+        //         .onClick(() => {
+        //             const addOn = this.plugin.getAddOn<P2PReplicator>(P2PReplicator.name);
+        //             void addOn?.openPane();
+        //             this.closeSetting();
+        //         })
+        // );
+    });
+    void addPanel(paneEl, $msg("obsidianLiveSyncSettingTab.titleMinioS3R2"), undefined, this.onlyOnMinIO).then(
+        (paneEl) => {
+            const syncWarnMinio = this.createEl(paneEl, "div", {
+                text: "",
+            });
+            const ObjectStorageMessage = $msg("obsidianLiveSyncSettingTab.msgObjectStorageWarning");
 
-                void MarkdownRenderer.render(this.plugin.app, ObjectStorageMessage, syncWarnMinio, "/", this.plugin);
-                syncWarnMinio.addClass("op-warn-info");
+            void MarkdownRenderer.render(this.plugin.app, ObjectStorageMessage, syncWarnMinio, "/", this.plugin);
+            syncWarnMinio.addClass("op-warn-info");
 
-                new Setting(paneEl).autoWireText("endpoint", { holdValue: true });
-                new Setting(paneEl).autoWireToggle("forcePathStyle", { holdValue: true });
-                new Setting(paneEl).autoWireText("accessKey", { holdValue: true });
+            new Setting(paneEl).autoWireText("endpoint", { holdValue: true });
+            new Setting(paneEl).autoWireToggle("forcePathStyle", { holdValue: true });
+            new Setting(paneEl).autoWireText("accessKey", { holdValue: true });
 
-                new Setting(paneEl).autoWireText("secretKey", {
-                    holdValue: true,
-                    isPassword: true,
-                });
+            new Setting(paneEl).autoWireText("secretKey", {
+                holdValue: true,
+                isPassword: true,
+            });
 
-                new Setting(paneEl).autoWireText("region", { holdValue: true });
+            new Setting(paneEl).autoWireText("region", { holdValue: true });
 
-                new Setting(paneEl).autoWireText("bucket", { holdValue: true });
-                new Setting(paneEl).autoWireText("bucketPrefix", {
-                    holdValue: true,
-                    placeHolder: "vaultname/",
-                });
+            new Setting(paneEl).autoWireText("bucket", { holdValue: true });
+            new Setting(paneEl).autoWireText("bucketPrefix", {
+                holdValue: true,
+                placeHolder: "vaultname/",
+            });
 
-                new Setting(paneEl).autoWireToggle("useCustomRequestHandler", { holdValue: true });
-                new Setting(paneEl).autoWireTextArea("bucketCustomHeaders", {
-                    holdValue: true,
-                    placeHolder: "x-custom-header: value\n x-custom-header2: value2",
-                });
-                new Setting(paneEl).setName($msg("obsidianLiveSyncSettingTab.nameTestConnection")).addButton((button) =>
+            new Setting(paneEl).autoWireToggle("useCustomRequestHandler", { holdValue: true });
+            new Setting(paneEl).autoWireTextArea("bucketCustomHeaders", {
+                holdValue: true,
+                placeHolder: "x-custom-header: value\n x-custom-header2: value2",
+            });
+            new Setting(paneEl).setName($msg("obsidianLiveSyncSettingTab.nameTestConnection")).addButton((button) =>
+                button
+                    .setButtonText($msg("obsidianLiveSyncSettingTab.btnTest"))
+                    .setDisabled(false)
+                    .onClick(async () => {
+                        await this.testConnection(this.editingSettings);
+                    })
+            );
+            new Setting(paneEl)
+                .setName($msg("obsidianLiveSyncSettingTab.nameApplySettings"))
+                .setClass("wizardHidden")
+                .addApplyButton([
+                    "remoteType",
+                    "endpoint",
+                    "region",
+                    "accessKey",
+                    "secretKey",
+                    "bucket",
+                    "useCustomRequestHandler",
+                    "bucketCustomHeaders",
+                    "bucketPrefix",
+                ])
+                .addOnUpdate(this.onlyOnMinIO);
+        }
+    );
+
+    void addPanel(paneEl, $msg("obsidianLiveSyncSettingTab.titleCouchDB"), undefined, this.onlyOnCouchDB).then(
+        (paneEl) => {
+            if (this.plugin.$$isMobile()) {
+                this.createEl(
+                    paneEl,
+                    "div",
+                    {
+                        text: $msg("obsidianLiveSyncSettingTab.msgNonHTTPSWarning"),
+                    },
+                    undefined,
+                    visibleOnly(() => !this.editingSettings.couchDB_URI.startsWith("https://"))
+                ).addClass("op-warn");
+            } else {
+                this.createEl(
+                    paneEl,
+                    "div",
+                    {
+                        text: $msg("obsidianLiveSyncSettingTab.msgNonHTTPSInfo"),
+                    },
+                    undefined,
+                    visibleOnly(() => !this.editingSettings.couchDB_URI.startsWith("https://"))
+                ).addClass("op-warn-info");
+            }
+
+            new Setting(paneEl).autoWireText("couchDB_URI", {
+                holdValue: true,
+                onUpdate: this.enableOnlySyncDisabled,
+            });
+            new Setting(paneEl).autoWireToggle("useJWT", {
+                holdValue: true,
+                onUpdate: this.enableOnlySyncDisabled,
+            });
+            new Setting(paneEl).autoWireText("couchDB_USER", {
+                holdValue: true,
+                onUpdate: combineOnUpdate(
+                    this.enableOnlySyncDisabled,
+                    visibleOnly(() => !this.editingSettings.useJWT)
+                ),
+            });
+            new Setting(paneEl).autoWireText("couchDB_PASSWORD", {
+                holdValue: true,
+                isPassword: true,
+                onUpdate: combineOnUpdate(
+                    this.enableOnlySyncDisabled,
+                    visibleOnly(() => !this.editingSettings.useJWT)
+                ),
+            });
+            const algorithms = {
+                ["HS256"]: "HS256",
+                ["HS512"]: "HS512",
+                ["ES256"]: "ES256",
+                ["ES512"]: "ES512",
+            } as const;
+            new Setting(paneEl).autoWireDropDown("jwtAlgorithm", {
+                options: algorithms,
+                onUpdate: combineOnUpdate(
+                    this.enableOnlySyncDisabled,
+                    visibleOnly(() => this.editingSettings.useJWT)
+                ),
+            });
+            new Setting(paneEl).autoWireTextArea("jwtKey", {
+                holdValue: true,
+                onUpdate: combineOnUpdate(
+                    this.enableOnlySyncDisabled,
+                    visibleOnly(() => this.editingSettings.useJWT)
+                ),
+            });
+            // eslint-disable-next-line prefer-const
+            let generatedKeyDivEl: HTMLDivElement;
+            new Setting(paneEl)
+                .setDesc("Generate ES256 Keypair for testing")
+                .addButton((button) =>
+                    button.setButtonText("Generate").onClick(async () => {
+                        const crypto = await getWebCrypto();
+                        const keyPair = await crypto.subtle.generateKey(
+                            { name: "ECDSA", namedCurve: "P-256" },
+                            true,
+                            ["sign", "verify"]
+                        );
+                        const pubKey = await crypto.subtle.exportKey("spki", keyPair.publicKey);
+                        const privateKey = await crypto.subtle.exportKey("pkcs8", keyPair.privateKey);
+                        const encodedPublicKey = await arrayBufferToBase64Single(pubKey);
+                        const encodedPrivateKey = await arrayBufferToBase64Single(privateKey);
+
+                        const privateKeyPem = `> -----BEGIN PRIVATE KEY-----\n> ${encodedPrivateKey}\n> -----END PRIVATE KEY-----`;
+                        const publicKeyPem = `> -----BEGIN PUBLIC KEY-----\\n${encodedPublicKey}\\n-----END PUBLIC KEY-----`;
+
+                        const title = $msg("Setting.GenerateKeyPair.Title");
+                        const msg = $msg("Setting.GenerateKeyPair.Desc", {
+                            public_key: publicKeyPem,
+                            private_key: privateKeyPem,
+                        });
+                        await MarkdownRenderer.render(
+                            this.plugin.app,
+                            "## " + title + "\n\n" + msg,
+                            generatedKeyDivEl,
+                            "/",
+                            this.plugin
+                        );
+                    })
+                )
+                .addOnUpdate(
+                    combineOnUpdate(
+                        this.enableOnlySyncDisabled,
+                        visibleOnly(() => this.editingSettings.useJWT)
+                    )
+                );
+            generatedKeyDivEl = this.createEl(
+                paneEl,
+                "div",
+                { text: "" },
+                (el) => { },
+                visibleOnly(() => this.editingSettings.useJWT)
+            );
+
+            new Setting(paneEl).autoWireText("jwtKid", {
+                holdValue: true,
+                onUpdate: combineOnUpdate(
+                    this.enableOnlySyncDisabled,
+                    visibleOnly(() => this.editingSettings.useJWT)
+                ),
+            });
+            new Setting(paneEl).autoWireText("jwtSub", {
+                holdValue: true,
+                onUpdate: combineOnUpdate(
+                    this.enableOnlySyncDisabled,
+                    visibleOnly(() => this.editingSettings.useJWT)
+                ),
+            });
+            new Setting(paneEl).autoWireNumeric("jwtExpDuration", {
+                holdValue: true,
+                onUpdate: combineOnUpdate(
+                    this.enableOnlySyncDisabled,
+                    visibleOnly(() => this.editingSettings.useJWT)
+                ),
+            });
+            new Setting(paneEl).autoWireText("couchDB_DBNAME", {
+                holdValue: true,
+                onUpdate: this.enableOnlySyncDisabled,
+            });
+            new Setting(paneEl).autoWireTextArea("couchDB_CustomHeaders", { holdValue: true });
+            new Setting(paneEl).autoWireToggle("useRequestAPI", {
+                holdValue: true,
+                onUpdate: this.enableOnlySyncDisabled,
+            });
+            new Setting(paneEl)
+                .setName($msg("obsidianLiveSyncSettingTab.nameTestDatabaseConnection"))
+                .setClass("wizardHidden")
+                .setDesc($msg("obsidianLiveSyncSettingTab.descTestDatabaseConnection"))
+                .addButton((button) =>
                     button
                         .setButtonText($msg("obsidianLiveSyncSettingTab.btnTest"))
                         .setDisabled(false)
                         .onClick(async () => {
-                            await this.testConnection(this.editingSettings);
+                            await this.testConnection();
                         })
                 );
-                new Setting(paneEl)
-                    .setName($msg("obsidianLiveSyncSettingTab.nameApplySettings"))
-                    .setClass("wizardHidden")
-                    .addApplyButton([
-                        "remoteType",
-                        "endpoint",
-                        "region",
-                        "accessKey",
-                        "secretKey",
-                        "bucket",
-                        "useCustomRequestHandler",
-                        "bucketCustomHeaders",
-                        "bucketPrefix",
-                    ])
-                    .addOnUpdate(this.onlyOnMinIO);
-            }
-        );
 
-        void addPanel(paneEl, $msg("obsidianLiveSyncSettingTab.titleCouchDB"), undefined, this.onlyOnCouchDB).then(
-            (paneEl) => {
-                if (this.plugin.$$isMobile()) {
-                    this.createEl(
-                        paneEl,
-                        "div",
-                        {
-                            text: $msg("obsidianLiveSyncSettingTab.msgNonHTTPSWarning"),
-                        },
-                        undefined,
-                        visibleOnly(() => !this.editingSettings.couchDB_URI.startsWith("https://"))
-                    ).addClass("op-warn");
-                } else {
-                    this.createEl(
-                        paneEl,
-                        "div",
-                        {
-                            text: $msg("obsidianLiveSyncSettingTab.msgNonHTTPSInfo"),
-                        },
-                        undefined,
-                        visibleOnly(() => !this.editingSettings.couchDB_URI.startsWith("https://"))
-                    ).addClass("op-warn-info");
-                }
-
-                new Setting(paneEl).autoWireText("couchDB_URI", {
-                    holdValue: true,
-                    onUpdate: this.enableOnlySyncDisabled,
-                });
-                new Setting(paneEl).autoWireToggle("useJWT", {
-                    holdValue: true,
-                    onUpdate: this.enableOnlySyncDisabled,
-                });
-                new Setting(paneEl).autoWireText("couchDB_USER", {
-                    holdValue: true,
-                    onUpdate: combineOnUpdate(
-                        this.enableOnlySyncDisabled,
-                        visibleOnly(() => !this.editingSettings.useJWT)
-                    ),
-                });
-                new Setting(paneEl).autoWireText("couchDB_PASSWORD", {
-                    holdValue: true,
-                    isPassword: true,
-                    onUpdate: combineOnUpdate(
-                        this.enableOnlySyncDisabled,
-                        visibleOnly(() => !this.editingSettings.useJWT)
-                    ),
-                });
-                const algorithms = {
-                    ["HS256"]: "HS256",
-                    ["HS512"]: "HS512",
-                    ["ES256"]: "ES256",
-                    ["ES512"]: "ES512",
-                } as const;
-                new Setting(paneEl).autoWireDropDown("jwtAlgorithm", {
-                    options: algorithms,
-                    onUpdate: combineOnUpdate(
-                        this.enableOnlySyncDisabled,
-                        visibleOnly(() => this.editingSettings.useJWT)
-                    ),
-                });
-                new Setting(paneEl).autoWireTextArea("jwtKey", {
-                    holdValue: true,
-                    onUpdate: combineOnUpdate(
-                        this.enableOnlySyncDisabled,
-                        visibleOnly(() => this.editingSettings.useJWT)
-                    ),
-                });
-                // eslint-disable-next-line prefer-const
-                let generatedKeyDivEl: HTMLDivElement;
-                new Setting(paneEl)
-                    .setDesc("Generate ES256 Keypair for testing")
-                    .addButton((button) =>
-                        button.setButtonText("Generate").onClick(async () => {
-                            const crypto = await getWebCrypto();
-                            const keyPair = await crypto.subtle.generateKey(
-                                { name: "ECDSA", namedCurve: "P-256" },
-                                true,
-                                ["sign", "verify"]
-                            );
-                            const pubKey = await crypto.subtle.exportKey("spki", keyPair.publicKey);
-                            const privateKey = await crypto.subtle.exportKey("pkcs8", keyPair.privateKey);
-                            const encodedPublicKey = await arrayBufferToBase64Single(pubKey);
-                            const encodedPrivateKey = await arrayBufferToBase64Single(privateKey);
-
-                            const privateKeyPem = `> -----BEGIN PRIVATE KEY-----\n> ${encodedPrivateKey}\n> -----END PRIVATE KEY-----`;
-                            const publicKeyPem = `> -----BEGIN PUBLIC KEY-----\\n${encodedPublicKey}\\n-----END PUBLIC KEY-----`;
-
-                            const title = $msg("Setting.GenerateKeyPair.Title");
-                            const msg = $msg("Setting.GenerateKeyPair.Desc", {
-                                public_key: publicKeyPem,
-                                private_key: privateKeyPem,
-                            });
-                            await MarkdownRenderer.render(
-                                this.plugin.app,
-                                "## " + title + "\n\n" + msg,
-                                generatedKeyDivEl,
-                                "/",
-                                this.plugin
-                            );
+            new Setting(paneEl)
+                .setName($msg("obsidianLiveSyncSettingTab.nameValidateDatabaseConfig"))
+                .setDesc($msg("obsidianLiveSyncSettingTab.descValidateDatabaseConfig"))
+                .addButton((button) =>
+                    button
+                        .setButtonText($msg("obsidianLiveSyncSettingTab.btnCheck"))
+                        .setDisabled(false)
+                        .onClick(async () => {
+                            await checkConfig(checkResultDiv);
                         })
-                    )
-                    .addOnUpdate(
-                        combineOnUpdate(
-                            this.enableOnlySyncDisabled,
-                            visibleOnly(() => this.editingSettings.useJWT)
-                        )
-                    );
-                generatedKeyDivEl = this.createEl(
-                    paneEl,
-                    "div",
-                    { text: "" },
-                    (el) => {},
-                    visibleOnly(() => this.editingSettings.useJWT)
                 );
+            checkResultDiv = this.createEl(paneEl, "div", {
+                text: "",
+            });
 
-                new Setting(paneEl).autoWireText("jwtKid", {
-                    holdValue: true,
-                    onUpdate: combineOnUpdate(
-                        this.enableOnlySyncDisabled,
-                        visibleOnly(() => this.editingSettings.useJWT)
-                    ),
-                });
-                new Setting(paneEl).autoWireText("jwtSub", {
-                    holdValue: true,
-                    onUpdate: combineOnUpdate(
-                        this.enableOnlySyncDisabled,
-                        visibleOnly(() => this.editingSettings.useJWT)
-                    ),
-                });
-                new Setting(paneEl).autoWireNumeric("jwtExpDuration", {
-                    holdValue: true,
-                    onUpdate: combineOnUpdate(
-                        this.enableOnlySyncDisabled,
-                        visibleOnly(() => this.editingSettings.useJWT)
-                    ),
-                });
-                new Setting(paneEl).autoWireText("couchDB_DBNAME", {
-                    holdValue: true,
-                    onUpdate: this.enableOnlySyncDisabled,
-                });
-                new Setting(paneEl).autoWireTextArea("couchDB_CustomHeaders", { holdValue: true });
-                new Setting(paneEl).autoWireToggle("useRequestAPI", {
-                    holdValue: true,
-                    onUpdate: this.enableOnlySyncDisabled,
-                });
-                new Setting(paneEl)
-                    .setName($msg("obsidianLiveSyncSettingTab.nameTestDatabaseConnection"))
-                    .setClass("wizardHidden")
-                    .setDesc($msg("obsidianLiveSyncSettingTab.descTestDatabaseConnection"))
-                    .addButton((button) =>
-                        button
-                            .setButtonText($msg("obsidianLiveSyncSettingTab.btnTest"))
-                            .setDisabled(false)
-                            .onClick(async () => {
-                                await this.testConnection();
-                            })
-                    );
-
-                new Setting(paneEl)
-                    .setName($msg("obsidianLiveSyncSettingTab.nameValidateDatabaseConfig"))
-                    .setDesc($msg("obsidianLiveSyncSettingTab.descValidateDatabaseConfig"))
-                    .addButton((button) =>
-                        button
-                            .setButtonText($msg("obsidianLiveSyncSettingTab.btnCheck"))
-                            .setDisabled(false)
-                            .onClick(async () => {
-                                await checkConfig(checkResultDiv);
-                            })
-                    );
-                checkResultDiv = this.createEl(paneEl, "div", {
-                    text: "",
-                });
-
-                new Setting(paneEl)
-                    .setName($msg("obsidianLiveSyncSettingTab.nameApplySettings"))
-                    .setClass("wizardHidden")
-                    .addApplyButton([
-                        "remoteType",
-                        "couchDB_URI",
-                        "couchDB_USER",
-                        "couchDB_PASSWORD",
-                        "couchDB_DBNAME",
-                        "jwtAlgorithm",
-                        "jwtExpDuration",
-                        "jwtKey",
-                        "jwtSub",
-                        "jwtKid",
-                        "useJWT",
-                        "couchDB_CustomHeaders",
-                        "useRequestAPI",
-                    ])
-                    .addOnUpdate(this.onlyOnCouchDB);
-            }
-        );
-    });
-    void addPanel(paneEl, $msg("obsidianLiveSyncSettingTab.titleNotification"), () => {}, this.onlyOnCouchDB).then(
+            new Setting(paneEl)
+                .setName($msg("obsidianLiveSyncSettingTab.nameApplySettings"))
+                .setClass("wizardHidden")
+                .addApplyButton([
+                    "remoteType",
+                    "couchDB_URI",
+                    "couchDB_USER",
+                    "couchDB_PASSWORD",
+                    "couchDB_DBNAME",
+                    "jwtAlgorithm",
+                    "jwtExpDuration",
+                    "jwtKey",
+                    "jwtSub",
+                    "jwtKid",
+                    "useJWT",
+                    "couchDB_CustomHeaders",
+                    "useRequestAPI",
+                ])
+                .addOnUpdate(this.onlyOnCouchDB);
+        }
+    );
+    void addPanel(paneEl, $msg("obsidianLiveSyncSettingTab.titleNotification"), () => { }, this.onlyOnCouchDB).then(
         (paneEl) => {
             paneEl.addClass("wizardHidden");
             new Setting(paneEl).autoWireNumeric("notifyThresholdOfRemoteStorageSize", {}).setClass("wizardHidden");

src/modules/features/SettingDialogue/PaneSyncSettings.ts

@@ -25,16 +25,16 @@ export function paneSyncSettings(
         const options: Record<string, string> =
             this.editingSettings.remoteType == REMOTE_COUCHDB
                 ? {
-                      NONE: "",
-                      LIVESYNC: $msg("obsidianLiveSyncSettingTab.optionLiveSync"),
-                      PERIODIC: $msg("obsidianLiveSyncSettingTab.optionPeriodicWithBatch"),
-                      DISABLE: $msg("obsidianLiveSyncSettingTab.optionDisableAllAutomatic"),
-                  }
+                    NONE: "",
+                    LIVESYNC: $msg("obsidianLiveSyncSettingTab.optionLiveSync"),
+                    PERIODIC: $msg("obsidianLiveSyncSettingTab.optionPeriodicWithBatch"),
+                    DISABLE: $msg("obsidianLiveSyncSettingTab.optionDisableAllAutomatic"),
+                }
                 : {
-                      NONE: "",
-                      PERIODIC: $msg("obsidianLiveSyncSettingTab.optionPeriodicWithBatch"),
-                      DISABLE: $msg("obsidianLiveSyncSettingTab.optionDisableAllAutomatic"),
-                  };
+                    NONE: "",
+                    PERIODIC: $msg("obsidianLiveSyncSettingTab.optionPeriodicWithBatch"),
+                    DISABLE: $msg("obsidianLiveSyncSettingTab.optionDisableAllAutomatic"),
+                };
 
         new Setting(paneEl)
             .autoWireDropDown("preset", {
@@ -144,14 +144,14 @@ export function paneSyncSettings(
         const optionsSyncMode =
             this.editingSettings.remoteType == REMOTE_COUCHDB
                 ? {
-                      ONEVENTS: $msg("obsidianLiveSyncSettingTab.optionOnEvents"),
-                      PERIODIC: $msg("obsidianLiveSyncSettingTab.optionPeriodicAndEvents"),
-                      LIVESYNC: $msg("obsidianLiveSyncSettingTab.optionLiveSync"),
-                  }
+                    ONEVENTS: $msg("obsidianLiveSyncSettingTab.optionOnEvents"),
+                    PERIODIC: $msg("obsidianLiveSyncSettingTab.optionPeriodicAndEvents"),
+                    LIVESYNC: $msg("obsidianLiveSyncSettingTab.optionLiveSync"),
+                }
                 : {
-                      ONEVENTS: $msg("obsidianLiveSyncSettingTab.optionOnEvents"),
-                      PERIODIC: $msg("obsidianLiveSyncSettingTab.optionPeriodicAndEvents"),
-                  };
+                    ONEVENTS: $msg("obsidianLiveSyncSettingTab.optionOnEvents"),
+                    PERIODIC: $msg("obsidianLiveSyncSettingTab.optionPeriodicAndEvents"),
+                };
 
         new Setting(paneEl)
             .autoWireDropDown("syncMode", {

styles.css

@@ -110,10 +110,10 @@
 div.sls-setting-menu-btn {
     color: var(--text-normal);
     background-color: var(--background-secondary-alt);
-    border-radius: 4px 4px 0 0;
+    border-radius: 8px;
     padding: 6px 10px;
     cursor: pointer;
-    margin-right: 12px;
+    margin-right: 2px;
     font-family: "Inter", sans-serif;
     outline: none;
     user-select: none;
@@ -140,9 +140,9 @@ div.sls-setting-menu-btn {
     flex-grow: 1;
     position: sticky;
     top: 0;
-    background-color: rgba(var(--background-primary), 0.3);
-    backdrop-filter: blur(4px);
-    border-radius: 4px;
+    backdrop-filter: blur(15px);
+    padding: 4px;
+    border-radius: 10px;
     z-index: 10;
 }
 
@@ -437,13 +437,11 @@ div.workspace-leaf-content[data-type=bases]  .livesync-status {
 
 .sls-setting-panel-title {
     position: sticky;
-}
-
-.sls-setting-panel-title {
-    top: 2em;
-    background-color: rgba(var(--background-primary), 0.3);
-    backdrop-filter: blur(4px);
-    border-radius: 30%;
+    font-size: medium;
+    top: 2.5em;
+    background-color: var(--background-secondary-alt);
+    border-radius: 10px;
+    padding: 0.5em 1.0em;
 }
 
 .sls-dialogue-note-wrapper {