Merge remote-tracking branch 'origin/main' into feat/conflict-diff-jump

# Conflicts:
#	src/modules/features/InteractiveConflictResolving/ConflictResolveModal.ts

src/modules/features/DocumentHistory/DocumentHistoryModal.ts

@@ -1,6 +1,6 @@
 import { TFile, Modal, App, DIFF_DELETE, DIFF_EQUAL, DIFF_INSERT, diff_match_patch } from "../../../deps.ts";
 import { getPathFromTFile, isValidPath } from "../../../common/utils.ts";
-import { decodeBinary, escapeStringToHTML, readString } from "../../../lib/src/string_and_binary/convert.ts";
+import { decodeBinary, readString } from "../../../lib/src/string_and_binary/convert.ts";
 import ObsidianLiveSyncPlugin from "../../../main.ts";
 import {
     type DocumentID,
@@ -145,22 +145,66 @@ export class DocumentHistoryModal extends Modal {
         return v;
     }
 
+    prepareContentView(usePreformatted = true) {
+        this.contentView.empty();
+        this.contentView.toggleClass("op-pre", usePreformatted);
+    }
+
+    appendTextDiff(diff: [number, string][]) {
+        for (const [operation, text] of diff) {
+            if (operation == DIFF_DELETE) {
+                this.contentView.createSpan({ text, cls: "history-deleted" });
+            } else if (operation == DIFF_EQUAL) {
+                this.contentView.createSpan({ text, cls: "history-normal" });
+            } else if (operation == DIFF_INSERT) {
+                this.contentView.createSpan({ text, cls: "history-added" });
+            }
+        }
+    }
+
+    appendImageDiff(baseSrc: string, overlaySrc?: string) {
+        const wrap = this.contentView.createDiv({ cls: "ls-imgdiff-wrap" });
+        const overlay = wrap.createDiv({ cls: "overlay" });
+        overlay.createEl("img", { cls: "img-base" }, (img) => {
+            img.src = baseSrc;
+        });
+        if (overlaySrc) {
+            overlay.createEl("img", { cls: "img-overlay" }, (img) => {
+                img.src = overlaySrc;
+            });
+        }
+    }
+
+    appendDeletedNotice(usePreformatted = true) {
+        const notice = "(At this revision, the file has been deleted)";
+        if (usePreformatted) {
+            this.contentView.appendText(`${notice}\n`);
+        } else {
+            this.contentView.createDiv({ text: notice });
+        }
+    }
+
     async showExactRev(rev: string) {
         const db = this.core.localDatabase;
         const w = await db.getDBEntry(this.file, { rev: rev }, false, false, true);
         this.currentText = "";
         this.currentDeleted = false;
+        this.prepareContentView();
         if (w === false) {
             this.currentDeleted = true;
-            this.info.innerHTML = "";
-            this.contentView.innerHTML = `Could not read this revision<br>(${rev})`;
+            this.info.empty();
+            this.contentView.appendText("Could not read this revision");
+            this.contentView.createEl("br");
+            this.contentView.appendText(`(${rev})`);
         } else {
             this.currentDoc = w;
-            this.info.innerHTML = `Modified:${new Date(w.mtime).toLocaleString()}`;
-            let result = undefined;
+            this.info.setText(`Modified:${new Date(w.mtime).toLocaleString()}`);
             const w1data = readDocument(w);
             this.currentDeleted = !!w.deleted;
-            // this.currentText = w1data;
+            if (typeof w1data == "string") {
+                this.currentText = w1data;
+            }
+            let rendered = false;
             if (this.showDiff) {
                 const prevRevIdx = this.revs_info.length - 1 - ((this.range.value as any) / 1 - 1);
                 if (prevRevIdx >= 0 && prevRevIdx < this.revs_info.length) {
@@ -168,58 +212,55 @@ export class DocumentHistoryModal extends Modal {
                     const w2 = await db.getDBEntry(this.file, { rev: oldRev }, false, false, true);
                     if (w2 != false) {
                         if (typeof w1data == "string") {
-                            result = "";
-                            const dmp = new diff_match_patch();
-                            const w2data = readDocument(w2) as string;
-                            const diff = dmp.diff_main(w2data, w1data);
-                            dmp.diff_cleanupSemantic(diff);
-                            for (const v of diff) {
-                                const x1 = v[0];
-                                const x2 = v[1];
-                                if (x1 == DIFF_DELETE) {
-                                    result += "<span class='history-deleted'>" + escapeStringToHTML(x2) + "</span>";
-                                } else if (x1 == DIFF_EQUAL) {
-                                    result += "<span class='history-normal'>" + escapeStringToHTML(x2) + "</span>";
-                                } else if (x1 == DIFF_INSERT) {
-                                    result += "<span class='history-added'>" + escapeStringToHTML(x2) + "</span>";
+                            const w2data = readDocument(w2);
+                            if (typeof w2data == "string") {
+                                const dmp = new diff_match_patch();
+                                const diff = dmp.diff_main(w2data, w1data);
+                                dmp.diff_cleanupSemantic(diff);
+                                if (this.currentDeleted) {
+                                    this.appendDeletedNotice();
                                 }
+                                this.appendTextDiff(diff);
+                                rendered = true;
                             }
-                            result = result.replace(/\n/g, "<br>");
                         } else if (isImage(this.file)) {
                             const src = this.generateBlobURL("base", w1data);
                             const overlay = this.generateBlobURL(
                                 "overlay",
                                 readDocument(w2) as Uint8Array<ArrayBuffer>
                             );
-                            result = `<div class='ls-imgdiff-wrap'>
-    <div class='overlay'>
-        <img class='img-base' src="${src}">
-        <img class='img-overlay' src='${overlay}'>
-    </div>
-</div>`;
-                            this.contentView.removeClass("op-pre");
+                            this.prepareContentView(false);
+                            if (this.currentDeleted) {
+                                this.appendDeletedNotice(false);
+                            }
+                            this.appendImageDiff(src, overlay);
+                            rendered = true;
                         }
                     }
                 }
             }
-            if (result == undefined) {
+            if (!rendered) {
                 if (typeof w1data != "string") {
                     if (isImage(this.file)) {
                         const src = this.generateBlobURL("base", w1data);
-                        result = `<div class='ls-imgdiff-wrap'>
-<div class='overlay'>
-<img class='img-base' src="${src}">
-</div>
-</div>`;
-                        this.contentView.removeClass("op-pre");
+                        this.prepareContentView(false);
+                        if (this.currentDeleted) {
+                            this.appendDeletedNotice(false);
+                        }
+                        this.appendImageDiff(src);
+                    } else {
+                        if (this.currentDeleted) {
+                            this.appendDeletedNotice();
+                        }
+                        this.contentView.appendText("Binary file");
                     }
                 } else {
-                    result = escapeStringToHTML(w1data);
+                    if (this.currentDeleted) {
+                        this.appendDeletedNotice();
+                    }
+                    this.contentView.appendText(w1data);
                 }
             }
-            if (result == undefined) result = typeof w1data == "string" ? escapeStringToHTML(w1data) : "Binary file";
-            this.contentView.innerHTML =
-                (this.currentDeleted ? "(At this revision, the file has been deleted)\n" : "") + result;
         }
         // Reset diff navigation after content changes
         this.resetDiffNavigation();
@@ -245,8 +286,7 @@ export class DocumentHistoryModal extends Modal {
         if (direction === "next") {
             this.currentDiffIndex = (this.currentDiffIndex + 1) % diffElements.length;
         } else {
-            this.currentDiffIndex =
-                this.currentDiffIndex <= 0 ? diffElements.length - 1 : this.currentDiffIndex - 1;
+            this.currentDiffIndex = this.currentDiffIndex <= 0 ? diffElements.length - 1 : this.currentDiffIndex - 1;
         }
 
         const target = diffElements[this.currentDiffIndex];

src/modules/features/InteractiveConflictResolving/ConflictResolveModal.ts

@@ -1,7 +1,6 @@
 import { App, Modal } from "../../../deps.ts";
 import { DIFF_DELETE, DIFF_EQUAL, DIFF_INSERT } from "diff-match-patch";
 import { CANCELLED, LEAVE_TO_SUBSEQUENT, type diff_result } from "../../../lib/src/common/types.ts";
-import { escapeStringToHTML } from "../../../lib/src/string_and_binary/convert.ts";
 import { delay } from "../../../lib/src/common/utils.ts";
 import { eventHub } from "../../../common/events.ts";
 import { globalSlipBoard } from "../../../lib/src/bureau/bureau.ts";
@@ -47,6 +46,25 @@ export class ConflictResolveModal extends Modal {
         // sendValue("close-resolve-conflict:" + this.filename, false);
     }
 
+    appendDiffFragment(container: HTMLDivElement, text: string, cls: string) {
+        const lines = text.split("\n");
+        lines.forEach((line, index) => {
+            const span = container.createSpan({ cls });
+            span.setText(line);
+            if (index < lines.length - 1) {
+                container.createSpan({ cls: "ls-mark-cr" });
+                container.createEl("br");
+            }
+        });
+    }
+
+    appendVersionInfo(container: HTMLDivElement, cls: string, name: string, date: string) {
+        const line = container.createSpan({ cls });
+        line.createSpan({ text: name, cls: "conflict-dev-name" });
+        line.appendText(`: ${date}`);
+        container.createEl("br");
+    }
+
     navigateDiff(direction: "prev" | "next") {
         const diffElements = this.diffView.querySelectorAll(".added, .deleted");
         if (diffElements.length === 0) return;
@@ -59,20 +77,19 @@ export class ConflictResolveModal extends Modal {
         if (direction === "next") {
             this.currentDiffIndex = (this.currentDiffIndex + 1) % diffElements.length;
         } else {
-            this.currentDiffIndex =
-                this.currentDiffIndex <= 0 ? diffElements.length - 1 : this.currentDiffIndex - 1;
+            this.currentDiffIndex = this.currentDiffIndex <= 0 ? diffElements.length - 1 : this.currentDiffIndex - 1;
         }
 
         const target = diffElements[this.currentDiffIndex];
         target.classList.add("diff-focused");
         target.scrollIntoView({ behavior: "smooth", block: "center" });
-        this.diffNavIndicator.textContent = `${this.currentDiffIndex + 1}/${diffElements.length}`;
+        this.diffNavIndicator.setText(`${this.currentDiffIndex + 1}/${diffElements.length}`);
     }
 
     resetDiffNavigation() {
         this.currentDiffIndex = -1;
         const diffElements = this.diffView.querySelectorAll(".added, .deleted");
-        this.diffNavIndicator.textContent = diffElements.length > 0 ? `0/${diffElements.length}` : "\u2014";
+        this.diffNavIndicator.setText(diffElements.length > 0 ? `0/${diffElements.length}` : "\u2014");
     }
 
     override onOpen() {
@@ -111,25 +128,20 @@ export class ConflictResolveModal extends Modal {
         this.diffView = contentEl.createDiv("");
         this.diffView.addClass("op-scrollable");
         this.diffView.addClass("ls-dialog");
-        let diff = "";
+        let diffLength = 0;
         for (const v of this.result.diff) {
             const x1 = v[0];
             const x2 = v[1];
+            diffLength += x2.length;
+            if (diffLength > 100 * 1024) {
+                continue;
+            }
             if (x1 == DIFF_DELETE) {
-                diff +=
-                    "<span class='deleted'>" +
-                    escapeStringToHTML(x2).replace(/\n/g, "<span class='ls-mark-cr'></span>\n") +
-                    "</span>";
+                this.appendDiffFragment(this.diffView, x2, "deleted");
             } else if (x1 == DIFF_EQUAL) {
-                diff +=
-                    "<span class='normal'>" +
-                    escapeStringToHTML(x2).replace(/\n/g, "<span class='ls-mark-cr'></span>\n") +
-                    "</span>";
+                this.appendDiffFragment(this.diffView, x2, "normal");
             } else if (x1 == DIFF_INSERT) {
-                diff +=
-                    "<span class='added'>" +
-                    escapeStringToHTML(x2).replace(/\n/g, "<span class='ls-mark-cr'></span>\n") +
-                    "</span>";
+                this.appendDiffFragment(this.diffView, x2, "added");
             }
         }
 
@@ -139,27 +151,29 @@ export class ConflictResolveModal extends Modal {
             new Date(this.result.left.mtime).toLocaleString() + (this.result.left.deleted ? " (Deleted)" : "");
         const date2 =
             new Date(this.result.right.mtime).toLocaleString() + (this.result.right.deleted ? " (Deleted)" : "");
-        div2.innerHTML = `<span class='deleted'><span class='conflict-dev-name'>${this.localName}</span>: ${date1}</span><br>
-<span class='added'><span class='conflict-dev-name'>${this.remoteName}</span>: ${date2}</span><br>`;
-        contentEl.createEl("button", { text: `Use ${this.localName}` }, (e) =>
-            e.addEventListener("click", () => this.sendResponse(this.result.right.rev))
-        ).style.marginRight = "4px";
-        contentEl.createEl("button", { text: `Use ${this.remoteName}` }, (e) =>
-            e.addEventListener("click", () => this.sendResponse(this.result.left.rev))
-        ).style.marginRight = "4px";
+        this.appendVersionInfo(div2, "deleted", this.localName, date1);
+        this.appendVersionInfo(div2, "added", this.remoteName, date2);
+        contentEl.createEl("button", { text: `Use ${this.localName}` }, (e) => {
+            e.addClass("conflict-action-button");
+            e.addEventListener("click", () => this.sendResponse(this.result.right.rev));
+        });
+        contentEl.createEl("button", { text: `Use ${this.remoteName}` }, (e) => {
+            e.addClass("conflict-action-button");
+            e.addEventListener("click", () => this.sendResponse(this.result.left.rev));
+        });
         if (!this.pluginPickMode) {
-            contentEl.createEl("button", { text: "Concat both" }, (e) =>
-                e.addEventListener("click", () => this.sendResponse(LEAVE_TO_SUBSEQUENT))
-            ).style.marginRight = "4px";
+            contentEl.createEl("button", { text: "Concat both" }, (e) => {
+                e.addClass("conflict-action-button");
+                e.addEventListener("click", () => this.sendResponse(LEAVE_TO_SUBSEQUENT));
+            });
         }
-        contentEl.createEl("button", { text: !this.pluginPickMode ? "Not now" : "Cancel" }, (e) =>
-            e.addEventListener("click", () => this.sendResponse(CANCELLED))
-        ).style.marginRight = "4px";
-        diff = diff.replace(/\n/g, "<br>");
-        if (diff.length > 100 * 1024) {
-            this.diffView.innerText = "(Too large diff to display)";
-        } else {
-            this.diffView.innerHTML = diff;
+        contentEl.createEl("button", { text: !this.pluginPickMode ? "Not now" : "Cancel" }, (e) => {
+            e.addClass("conflict-action-button");
+            e.addEventListener("click", () => this.sendResponse(CANCELLED));
+        });
+        if (diffLength > 100 * 1024) {
+            this.diffView.empty();
+            this.diffView.setText("(Too large diff to display)");
         }
         this.resetDiffNavigation();
         this.navigateDiff("next");

src/modules/features/ModuleLog.ts

@@ -25,7 +25,7 @@ import {
     EVENT_ON_UNRESOLVED_ERROR,
 } from "../../common/events.ts";
 import { AbstractObsidianModule } from "../AbstractObsidianModule.ts";
-import { addIcon, normalizePath, Notice } from "../../deps.ts";
+import { addIcon, debounce, normalizePath, Notice, stringifyYaml, type WorkspaceLeaf } from "../../deps.ts";
 import { LOG_LEVEL_NOTICE, setGlobalLogFunction } from "octagonal-wheels/common/logger";
 import { LogPaneView, VIEW_TYPE_LOG } from "./Log/LogPaneView.ts";
 import { serialized } from "octagonal-wheels/concurrency/lock";
@@ -41,6 +41,8 @@ import {
 } from "@lib/string_and_binary/path.ts";
 import { MARK_LOG_NETWORK_ERROR, MARK_LOG_SEPARATOR } from "@lib/services/lib/logUtils.ts";
 import { NetworkWarningStyles } from "@lib/common/models/setting.const.ts";
+import { compatGlobal } from "@lib/common/coreEnvFunctions.ts";
+import { generateReport } from "@/common/reportTool.ts";
 
 // This module cannot be a core module because it depends on the Obsidian UI.
 
@@ -50,18 +52,51 @@ const globalLogFunction = (message: any, level?: number, key?: string) => {
     const messageX =
         message instanceof Error
             ? new LiveSyncError("[Error Logged]: " + message.message, { cause: message })
-            : message;
+            : typeof message === "string"
+              ? message
+              : JSON.stringify(message);
     const entry = { message: messageX, level, key } as LogEntry;
     recentLogEntries.value = [...recentLogEntries.value, entry];
 };
 
 setGlobalLogFunction(globalLogFunction);
-let recentLogs = [] as string[];
+// Keep the recent logs in memory for display, but also keep a longer history in logForDump for when the user wants to see more logs.
+// logForDump is not reactive and is only used for dumping logs when requested, while recentLogs is reactive and is used for displaying logs in the UI.
+const logForDump = [] as string[];
 
 function addLog(log: string) {
-    recentLogs = [...recentLogs, log].splice(-200);
-    logMessages.value = recentLogs;
+    logForDump.push(log);
+    while (logForDump.length > 1000) {
+        logForDump.shift();
+    }
 }
+
+// Display log is kept separate from the full log history to optimize performance and memory usage.
+// And debounce the updates to the display log to avoid excessive UI updates when there are many log entries in a short time.
+const logForDisplay = [] as string[];
+
+const updateLogMessage = debounce(() => {
+    logMessages.value = [...logForDisplay];
+}, 25);
+function addDisplayLog(log: string) {
+    logForDisplay.push(log);
+    while (logForDisplay.length > 200) {
+        logForDisplay.shift();
+    }
+    updateLogMessage();
+}
+
+const redactPatterns = [/PBKDF2 salt \(Security Seed\):.*$/];
+function redactLog(log: string) {
+    let redactedLog = log;
+    for (const pattern of redactPatterns) {
+        redactedLog = redactedLog.replace(pattern, (match) => {
+            return match.split(":")[0] + ": [REDACTED]";
+        });
+    }
+    return redactedLog;
+}
+
 // logStore.intercept(e => e.slice(Math.min(e.length - 200, 0)));
 
 const showDebugLog = false;
@@ -86,15 +121,15 @@ export class ModuleLog extends AbstractObsidianModule {
         // const emptyMark = `\u{2003}`;
         function padLeftSpComputed(numI: ReactiveValue<number>, mark: string) {
             const formatted = reactiveSource("");
-            let timer: ReturnType<typeof setTimeout> | undefined = undefined;
+            let timer: number | undefined = undefined;
             let maxLen = 1;
             numI.onChanged((numX) => {
                 const num = numX.value;
                 const numLen = `${Math.abs(num)}`.length + 1;
                 maxLen = maxLen < numLen ? numLen : maxLen;
-                if (timer) clearTimeout(timer);
+                if (timer) compatGlobal.clearTimeout(timer);
                 if (num == 0) {
-                    timer = setTimeout(() => {
+                    timer = compatGlobal.setTimeout(() => {
                         formatted.value = "";
                         maxLen = 1;
                     }, 3000);
@@ -323,7 +358,7 @@ export class ModuleLog extends AbstractObsidianModule {
         if (this.nextFrameQueue) {
             return;
         }
-        this.nextFrameQueue = requestAnimationFrame(() => {
+        this.nextFrameQueue = compatGlobal.requestAnimationFrame(() => {
             this.nextFrameQueue = undefined;
             const { message, status } = this.statusBarLabels.value;
             // const recent = logMessages.value;
@@ -346,7 +381,8 @@ export class ModuleLog extends AbstractObsidianModule {
                         (a, b) => (a < b.ttl ? a : b.ttl),
                         Number.MAX_SAFE_INTEGER
                     );
-                    if (this.logLines.length > 0) setTimeout(() => this.applyStatusBarText(), minimumNext - now);
+                    if (this.logLines.length > 0)
+                        compatGlobal.setTimeout(() => this.applyStatusBarText(), minimumNext - now);
                     const recent = this.logLines.map((e) => e.message);
                     const recentLogs = recent.reverse().join("\n");
                     if (isDirty("recentLogs", recentLogs)) this.logHistory!.innerText = recentLogs;
@@ -368,7 +404,7 @@ export class ModuleLog extends AbstractObsidianModule {
         if (this.statusDiv) {
             this.statusDiv.remove();
         }
-        document.querySelectorAll(`.livesync-status`)?.forEach((e) => e.remove());
+        compatGlobal.document.querySelectorAll(`.livesync-status`)?.forEach((e) => e.remove());
         return Promise.resolve(true);
     }
     _everyOnloadStart(): Promise<boolean> {
@@ -390,7 +426,28 @@ export class ModuleLog extends AbstractObsidianModule {
                 void this.services.API.showWindow(VIEW_TYPE_LOG);
             },
         });
-        this.registerView(VIEW_TYPE_LOG, (leaf) => new LogPaneView(leaf, this.plugin));
+        this.addCommand({
+            id: "dump-debug-info",
+            name: "Generate full report for opening the issue with debug info",
+            callback: async () => {
+                const recentLog = [...logForDump];
+                const report = await generateReport(this.services.setting.currentSettings(), this.core);
+                const info = {
+                    ...report,
+                    recentLog: recentLog.map(redactLog),
+                };
+                const yaml = `\`\`\`\`
+# ---- Debug Info Dump ----
+${stringifyYaml(info)}
+\`\`\`\``;
+                if (await this.services.UI.promptCopyToClipboard("Debug info", yaml)) {
+                    new Notice(
+                        "Debug info copied to clipboard. You can paste it in the issue. Be careful as it may contain sensitive information, review it before sharing."
+                    );
+                }
+            },
+        });
+        this.registerView(VIEW_TYPE_LOG, (leaf: WorkspaceLeaf) => new LogPaneView(leaf, this.plugin));
         return Promise.resolve(true);
     }
     private _everyOnloadAfterLoadSettings(): Promise<boolean> {
@@ -404,7 +461,7 @@ export class ModuleLog extends AbstractObsidianModule {
             void this.setFileStatus();
         });
 
-        const w = document.querySelectorAll(`.livesync-status`);
+        const w = compatGlobal.document.querySelectorAll(`.livesync-status`);
         w.forEach((e) => e.remove());
 
         this.observeForLogs();
@@ -421,6 +478,8 @@ export class ModuleLog extends AbstractObsidianModule {
             this.statusBar?.addClass("syncstatusbar");
         }
         this.adjustStatusDivPosition();
+        this._log("Log module loaded", LOG_LEVEL_INFO);
+        this._log("Verbose log", LOG_LEVEL_VERBOSE);
         return Promise.resolve(true);
     }
 
@@ -444,11 +503,12 @@ export class ModuleLog extends AbstractObsidianModule {
         if (level == LOG_LEVEL_DEBUG && !showDebugLog) {
             return;
         }
+        let memoOnly = false;
         if (level <= LOG_LEVEL_INFO && this.settings && this.settings.lessInformationInLog) {
-            return;
+            memoOnly = true;
         }
         if (this.settings && !this.settings.showVerboseLog && level == LOG_LEVEL_VERBOSE) {
-            return;
+            memoOnly = true;
         }
         const vaultName = this.services.vault.getVaultName();
         const now = new Date();
@@ -469,6 +529,15 @@ export class ModuleLog extends AbstractObsidianModule {
                   ? `${errorInfo}`
                   : JSON.stringify(message, null, 2);
         const newMessage = timestamp + "->" + messageContent;
+
+        if (this.settings?.writeLogToTheFile) {
+            this.writeLogToTheFile(now, vaultName, newMessage);
+        }
+        addLog(newMessage);
+        if (memoOnly) {
+            return;
+        }
+        addDisplayLog(newMessage);
         if (message instanceof Error) {
             console.error(vaultName + ":" + newMessage);
         } else if (level >= LOG_LEVEL_INFO) {
@@ -479,10 +548,6 @@ export class ModuleLog extends AbstractObsidianModule {
         if (!this.settings?.showOnlyIconsOnEditor) {
             this.statusLog.value = messageContent;
         }
-        if (this.settings?.writeLogToTheFile) {
-            this.writeLogToTheFile(now, vaultName, newMessage);
-        }
-        addLog(newMessage);
         this.logLines.push({ ttl: now.getTime() + 3000, message: newMessage });
 
         if (level >= LOG_LEVEL_NOTICE) {

src/modules/features/SettingDialogue/PaneAdvanced.ts

@@ -35,6 +35,7 @@ export function paneAdvanced(this: ObsidianLiveSyncSettingTab, paneEl: HTMLEleme
             clampMin: 10,
             onUpdate: this.onlyOnCouchDB,
         });
+        new Setting(paneEl).setClass("wizardHidden").autoWireToggle("autoAcceptCompatibleTweak");
         // new Setting(paneEl)
         //     .setClass("wizardHidden")
         //     .autoWireToggle("sendChunksBulk", { onUpdate: onlyOnCouchDB })

src/modules/features/SettingDialogue/PaneChangeLog.ts

@@ -43,10 +43,13 @@ export function paneChangeLog(this: ObsidianLiveSyncSettingTab, paneEl: HTMLElem
     // tmpDiv.addClass("sls-header-button");
     tmpDiv.addClass("op-warn-info");
 
-    tmpDiv.innerHTML = `<p>${$msg("obsidianLiveSyncSettingTab.msgNewVersionNote")}</p><button>${$msg("obsidianLiveSyncSettingTab.optionOkReadEverything")}</button>`;
+    tmpDiv.createEl("p", { text: $msg("obsidianLiveSyncSettingTab.msgNewVersionNote") });
+    const readEverythingButton = tmpDiv.createEl("button", {
+        text: $msg("obsidianLiveSyncSettingTab.optionOkReadEverything"),
+    });
     if (lastVersion > (this.editingSettings?.lastReadUpdates || 0)) {
         const informationButtonDiv = informationDivEl.appendChild(tmpDiv);
-        informationButtonDiv.querySelector("button")?.addEventListener("click", () => {
+        readEverythingButton.addEventListener("click", () => {
             fireAndForget(async () => {
                 this.editingSettings.lastReadUpdates = lastVersion;
                 await this.saveAllDirtySettings();

src/modules/features/SettingDialogue/PaneHatch.ts

@@ -39,6 +39,7 @@ import { EVENT_REQUEST_SHOW_HISTORY } from "../../../common/obsidianEvents.ts";
 import { generateCredentialObject } from "../../../lib/src/replication/httplib.ts";
 import type { ObsidianLiveSyncSettingTab } from "./ObsidianLiveSyncSettingTab.ts";
 import type { PageFunctions } from "./SettingPane.ts";
+import { generateReport } from "@/common/reportTool.ts";
 export function paneHatch(this: ObsidianLiveSyncSettingTab, paneEl: HTMLElement, { addPanel }: PageFunctions): void {
     // const hatchWarn = this.createEl(paneEl, "div", { text: `To stop the boot up sequence for fixing problems on databases, you can put redflag.md on top of your vault (Rebooting obsidian is required).` });
     // hatchWarn.addClass("op-warn-info");
@@ -69,140 +70,14 @@ export function paneHatch(this: ObsidianLiveSyncSettingTab, paneEl: HTMLElement,
                         eventHub.emitEvent(EVENT_REQUEST_RUN_FIX_INCOMPLETE);
                     })
             );
+
         new Setting(paneEl).setName($msg("Prepare the 'report' to create an issue")).addButton((button) =>
             button
                 .setButtonText($msg("Copy Report to clipboard"))
                 .setCta()
                 .setDisabled(false)
                 .onClick(async () => {
-                    let responseConfig: any = {};
-                    const REDACTED = "𝑅𝐸𝐷𝐴𝐶𝑇𝐸𝐷";
-                    if (this.editingSettings.remoteType == REMOTE_COUCHDB) {
-                        try {
-                            const credential = generateCredentialObject(this.editingSettings);
-                            const customHeaders = parseHeaderValues(this.editingSettings.couchDB_CustomHeaders);
-                            const r = await requestToCouchDBWithCredentials(
-                                this.editingSettings.couchDB_URI,
-                                credential,
-                                window.origin,
-                                undefined,
-                                undefined,
-                                undefined,
-                                customHeaders
-                            );
-
-                            Logger(JSON.stringify(r.json, null, 2));
-
-                            responseConfig = r.json;
-                            responseConfig["couch_httpd_auth"].secret = REDACTED;
-                            responseConfig["couch_httpd_auth"].authentication_db = REDACTED;
-                            responseConfig["couch_httpd_auth"].authentication_redirect = REDACTED;
-                            responseConfig["couchdb"].uuid = REDACTED;
-                            responseConfig["admins"] = REDACTED;
-                            delete responseConfig["jwt_keys"];
-                            if ("secret" in responseConfig["chttpd_auth"])
-                                responseConfig["chttpd_auth"].secret = REDACTED;
-                        } catch (ex) {
-                            Logger(ex, LOG_LEVEL_VERBOSE);
-                            responseConfig = {
-                                error: "Requesting information from the remote CouchDB has failed. If you are using IBM Cloudant, this is normal behaviour.",
-                            };
-                        }
-                    } else if (this.editingSettings.remoteType == REMOTE_MINIO) {
-                        responseConfig = { error: "Object Storage Synchronisation" };
-                        //
-                    }
-                    const defaultKeys = Object.keys(DEFAULT_SETTINGS) as (keyof ObsidianLiveSyncSettings)[];
-                    const pluginConfig = JSON.parse(JSON.stringify(this.editingSettings)) as ObsidianLiveSyncSettings;
-                    const pluginKeys = Object.keys(pluginConfig);
-                    for (const key of pluginKeys) {
-                        if (defaultKeys.includes(key as any)) continue;
-                        delete pluginConfig[key as keyof ObsidianLiveSyncSettings];
-                    }
-
-                    pluginConfig.couchDB_DBNAME = REDACTED;
-                    pluginConfig.couchDB_PASSWORD = REDACTED;
-                    const scheme = pluginConfig.couchDB_URI.startsWith("http:")
-                        ? "(HTTP)"
-                        : pluginConfig.couchDB_URI.startsWith("https:")
-                          ? "(HTTPS)"
-                          : "";
-                    pluginConfig.couchDB_URI = isCloudantURI(pluginConfig.couchDB_URI)
-                        ? "cloudant"
-                        : `self-hosted${scheme}`;
-                    pluginConfig.couchDB_USER = REDACTED;
-                    pluginConfig.passphrase = REDACTED;
-                    pluginConfig.encryptedPassphrase = REDACTED;
-                    pluginConfig.encryptedCouchDBConnection = REDACTED;
-                    pluginConfig.accessKey = REDACTED;
-                    pluginConfig.secretKey = REDACTED;
-                    const redact = (source: string) => `${REDACTED}(${source.length} letters)`;
-                    const toSchemeOnly = (uri: string) => {
-                        try {
-                            return `${new URL(uri).protocol}//`;
-                        } catch {
-                            const matched = uri.match(/^[A-Za-z][A-Za-z0-9+.-]*:\/\//);
-                            return matched?.[0] ?? REDACTED;
-                        }
-                    };
-                    pluginConfig.remoteConfigurations = Object.fromEntries(
-                        Object.entries(pluginConfig.remoteConfigurations || {}).map(([id, config]) => [
-                            id,
-                            {
-                                ...config,
-                                uri: toSchemeOnly(config.uri),
-                            },
-                        ])
-                    );
-                    pluginConfig.region = redact(pluginConfig.region);
-                    pluginConfig.bucket = redact(pluginConfig.bucket);
-                    pluginConfig.pluginSyncExtendedSetting = {};
-                    pluginConfig.P2P_AppID = redact(pluginConfig.P2P_AppID);
-                    pluginConfig.P2P_passphrase = redact(pluginConfig.P2P_passphrase);
-                    pluginConfig.P2P_roomID = redact(pluginConfig.P2P_roomID);
-                    pluginConfig.P2P_relays = redact(pluginConfig.P2P_relays);
-                    pluginConfig.jwtKey = redact(pluginConfig.jwtKey);
-                    pluginConfig.jwtSub = redact(pluginConfig.jwtSub);
-                    pluginConfig.jwtKid = redact(pluginConfig.jwtKid);
-                    pluginConfig.bucketCustomHeaders = redact(pluginConfig.bucketCustomHeaders);
-                    pluginConfig.couchDB_CustomHeaders = redact(pluginConfig.couchDB_CustomHeaders);
-                    pluginConfig.P2P_turnCredential = redact(pluginConfig.P2P_turnCredential);
-                    pluginConfig.P2P_turnUsername = redact(pluginConfig.P2P_turnUsername);
-                    pluginConfig.P2P_turnServers = `(${pluginConfig.P2P_turnServers.split(",").length} servers configured)`;
-                    const endpoint = pluginConfig.endpoint;
-                    if (endpoint == "") {
-                        pluginConfig.endpoint = "Not configured or AWS";
-                    } else {
-                        const endpointScheme = pluginConfig.endpoint.startsWith("http:")
-                            ? "(HTTP)"
-                            : pluginConfig.endpoint.startsWith("https:")
-                              ? "(HTTPS)"
-                              : "";
-                        pluginConfig.endpoint = `${endpoint.indexOf(".r2.cloudflarestorage.") !== -1 ? "R2" : "self-hosted?"}(${endpointScheme})`;
-                    }
-                    const obsidianInfo = {
-                        navigator: navigator.userAgent,
-                        fileSystem: this.core.services.vault.isStorageInsensitive() ? "insensitive" : "sensitive",
-                    };
-                    const msgConfig = `# ---- Obsidian info ----
-${stringifyYaml(obsidianInfo)}
----
-# ---- remote config ----
-${stringifyYaml(responseConfig)}
----
-# ---- Plug-in config ----
-${stringifyYaml({
-    version: this.manifestVersion,
-    ...pluginConfig,
-})}`;
-                    console.log(msgConfig);
-                    if ((await this.services.UI.promptCopyToClipboard("Generated report", msgConfig)) == true) {
-                        // await navigator.clipboard.writeText(msgConfig);
-                        // Logger(
-                        //     `Generated report has been copied to clipboard. Please report the issue with this! Thank you for your cooperation!`,
-                        //     LOG_LEVEL_NOTICE
-                        // );
-                    }
+                    await this.app.commands.executeCommandById("obsidian-livesync:dump-debug-info");
                 })
         );
         new Setting(paneEl)

src/modules/features/SettingDialogue/PaneSetup.ts

@@ -121,13 +121,13 @@ export function paneSetup(
         const repo = "vrtmrz/obsidian-livesync";
         const topPath = $msg("obsidianLiveSyncSettingTab.linkTroubleshooting");
         const rawRepoURI = `https://raw.githubusercontent.com/${repo}/main`;
-        this.createEl(
-            paneEl,
-            "div",
-            "",
-            (el) =>
-                (el.innerHTML = `<a href='https://github.com/${repo}/blob/main${topPath}' target="_blank">${$msg("obsidianLiveSyncSettingTab.linkOpenInBrowser")}</a>`)
-        );
+        this.createEl(paneEl, "div", "", (el) => {
+            el.createEl("a", { text: $msg("obsidianLiveSyncSettingTab.linkOpenInBrowser") }, (anchor) => {
+                anchor.href = `https://github.com/${repo}/blob/main${topPath}`;
+                anchor.target = "_blank";
+                anchor.rel = "noopener";
+            });
+        });
         const troubleShootEl = this.createEl(paneEl, "div", {
             text: "",
             cls: "sls-troubleshoot-preview",

src/modules/features/SettingDialogue/utilFixCouchDBSetting.ts

@@ -13,7 +13,7 @@ export const checkConfig = async (
     Logger($msg("obsidianLiveSyncSettingTab.logCheckingDbConfig"), LOG_LEVEL_INFO);
     let isSuccessful = true;
     const emptyDiv = createDiv();
-    emptyDiv.innerHTML = "<span></span>";
+    emptyDiv.createSpan();
     checkResultDiv?.replaceChildren(...[emptyDiv]);
     const addResult = (msg: string, classes?: string[]) => {
         const tmpDiv = createDiv();
@@ -21,7 +21,7 @@ export const checkConfig = async (
         if (classes) {
             tmpDiv.addClasses(classes);
         }
-        tmpDiv.innerHTML = `${msg}`;
+        tmpDiv.textContent = msg;
         checkResultDiv?.appendChild(tmpDiv);
     };
     try {
@@ -47,9 +47,10 @@ export const checkConfig = async (
             if (!checkResultDiv) return;
             const tmpDiv = createDiv();
             tmpDiv.addClass("ob-btn-config-fix");
-            tmpDiv.innerHTML = `<label>${title}</label><button>${$msg("obsidianLiveSyncSettingTab.btnFix")}</button>`;
+            tmpDiv.createEl("label", { text: title });
+            const fixButton = tmpDiv.createEl("button", { text: $msg("obsidianLiveSyncSettingTab.btnFix") });
             const x = checkResultDiv.appendChild(tmpDiv);
-            x.querySelector("button")?.addEventListener("click", () => {
+            fixButton.addEventListener("click", () => {
                 fireAndForget(async () => {
                     Logger($msg("obsidianLiveSyncSettingTab.logCouchDbConfigSet", { title, key, value }));
                     const res = await requestToCouchDBWithCredentials(

src/modules/features/SetupManager.ts

@@ -7,7 +7,7 @@ import {
     REMOTE_MINIO,
     REMOTE_P2P,
 } from "../../lib/src/common/types.ts";
-import { generatePatchObj, isObjectDifferent } from "../../lib/src/common/utils.ts";
+import { isObjectDifferent } from "@lib/common/utils.ts";
 import Intro from "./SetupWizard/dialogs/Intro.svelte";
 import SelectMethodNewUser from "./SetupWizard/dialogs/SelectMethodNewUser.svelte";
 import SelectMethodExisting from "./SetupWizard/dialogs/SelectMethodExisting.svelte";
@@ -23,6 +23,7 @@ import SetupRemoteP2P from "./SetupWizard/dialogs/SetupRemoteP2P.svelte";
 import SetupRemoteE2EE from "./SetupWizard/dialogs/SetupRemoteE2EE.svelte";
 import { decodeSettingsFromQRCodeData } from "../../lib/src/API/processSetting.ts";
 import { AbstractModule } from "../AbstractModule.ts";
+import { ConnectionStringParser } from "@lib/common/ConnectionString.ts";
 
 /**
  * User modes for onboarding and setup
@@ -194,8 +195,24 @@ export class SetupManager extends AbstractModule {
             return await this.onOnboard(userMode);
         }
         const newSetting = { ...currentSetting, ...p2pConf } as ObsidianLiveSyncSettings;
+        // Apply remoteConfigurations
+        if (newSetting.P2P_ActiveRemoteConfigurationId) {
+            const id = newSetting.P2P_ActiveRemoteConfigurationId;
+            const merged = {
+                ...newSetting,
+                ...p2pConf,
+            } as ObsidianLiveSyncSettings;
+            const uri = ConnectionStringParser.serialize({ type: "p2p", settings: merged });
+            newSetting.remoteConfigurations[id] = {
+                ...newSetting.remoteConfigurations[id],
+                uri,
+                isEncrypted: false,
+            };
+            newSetting.P2P_ActiveRemoteConfigurationId = id;
+        }
         if (activate) {
             newSetting.remoteType = REMOTE_P2P;
+            newSetting.activeConfigurationId = newSetting.P2P_ActiveRemoteConfigurationId;
         }
         return await this.onConfirmApplySettingsFromWizard(newSetting, userMode, activate);
     }
@@ -285,9 +302,9 @@ export class SetupManager extends AbstractModule {
                 this._log("No changes in settings detected. Skipping applying settings from wizard.", LOG_LEVEL_NOTICE);
                 return true;
             }
-            const patch = generatePatchObj(this.settings, newConf);
-            console.log(`Changes:`);
-            console.dir(patch);
+            // const patch = generatePatchObj(this.settings, newConf);
+            // console.log(`Changes:`);
+            // console.dir(patch);
             if (!activate) {
                 extra();
                 await this.applySetting(newConf, UserMode.ExistingUser);

src/modules/features/SetupWizard/dialogs/ScanQRCode.svelte

@@ -4,10 +4,10 @@
     import Decision from "@/lib/src/UI/components/Decision.svelte";
     import Instruction from "@/lib/src/UI/components/Instruction.svelte";
     import UserDecisions from "@/lib/src/UI/components/UserDecisions.svelte";
-        const TYPE_CLOSE = "close";
+    const TYPE_CLOSE = "close";
     type ResultType = typeof TYPE_CLOSE;
     type Props = {
-        setResult: (result: ResultType) => void;
+        setResult: (_result: ResultType) => void;
     };
     const { setResult }: Props = $props();
 </script>

src/modules/features/SetupWizard/dialogs/SelectMethodNewUser.svelte

@@ -48,6 +48,8 @@
             bind:value={userType}
         >
             This is an advanced option for users who do not have a URI or who wish to configure detailed settings.
+            You can also select this option if you intend to use <strong>P2P (Peer-to-Peer) synchronisation</strong>
+            instead of a CouchDB/S3 server — P2P requires no server setup at all.
         </Option>
     </Options>
 </Instruction>

src/modules/features/SetupWizard/dialogs/SetupRemoteP2P.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
     // import { delay } from "octagonal-wheels/promises";
-    import DialogHeader from "@/lib/src/UI/components/DialogHeader.svelte";
-    import Guidance from "@/lib/src/UI/components/Guidance.svelte";
-    import Decision from "@/lib/src/UI/components/Decision.svelte";
-    import UserDecisions from "@/lib/src/UI/components/UserDecisions.svelte";
-    import InfoNote from "@/lib/src/UI/components/InfoNote.svelte";
-    import InputRow from "@/lib/src/UI/components/InputRow.svelte";
-    import Password from "@/lib/src/UI/components/Password.svelte";
-    import { PouchDB } from "../../../../lib/src/pouchdb/pouchdb-browser";
+    import DialogHeader from "@lib/UI/components/DialogHeader.svelte";
+    import Guidance from "@lib/UI/components/Guidance.svelte";
+    import Decision from "@lib/UI/components/Decision.svelte";
+    import UserDecisions from "@lib/UI/components/UserDecisions.svelte";
+    import InfoNote from "@lib/UI/components/InfoNote.svelte";
+    import InputRow from "@lib/UI/components/InputRow.svelte";
+    import Password from "@lib/UI/components/Password.svelte";
+    import { PouchDB } from "@lib/pouchdb/pouchdb-browser";
     import {
         DEFAULT_SETTINGS,
         P2P_DEFAULT_SETTINGS,
@@ -17,15 +17,15 @@
         type ObsidianLiveSyncSettings,
         type P2PConnectionInfo,
         type P2PSyncSetting,
-    } from "../../../../lib/src/common/types";
+    } from "@lib/common/types";
 
-    import { TrysteroReplicator } from "../../../../lib/src/replication/trystero/TrysteroReplicator";
-    import type { ReplicatorHostEnv } from "../../../../lib/src/replication/trystero/types";
-    import { copyTo, pickP2PSyncSettings, type SimpleStore } from "../../../../lib/src/common/utils";
+    import { TrysteroReplicator } from "@lib/replication/trystero/TrysteroReplicator";
+    import type { ReplicatorHostEnv } from "@lib/replication/trystero/types";
+    import { copyTo, pickP2PSyncSettings, type SimpleStore } from "@lib/common/utils";
     import { onMount } from "svelte";
-    import { getDialogContext, type GuestDialogProps } from "../../../../lib/src/UI/svelteDialog";
-    import { SETTING_KEY_P2P_DEVICE_NAME } from "../../../../lib/src/common/types";
-    import ExtraItems from "../../../../lib/src/UI/components/ExtraItems.svelte";
+    import { getDialogContext, type GuestDialogProps } from "@lib/UI/svelteDialog";
+    import { SETTING_KEY_P2P_DEVICE_NAME } from "@lib/common/types";
+    import ExtraItems from "@lib/UI/components/ExtraItems.svelte";
 
     const default_setting = pickP2PSyncSettings(DEFAULT_SETTINGS);
     let syncSetting = $state<P2PConnectionInfo>({ ...default_setting });
@@ -39,18 +39,20 @@
 
     const { setResult, getInitialData }: Props = $props();
     onMount(() => {
+        let initialData: P2PSyncSetting | undefined = undefined;
         if (getInitialData) {
-            const initialData = getInitialData();
+            initialData = getInitialData();
             if (initialData) {
                 copyTo(initialData, syncSetting);
             }
-            if (context.services.config.getSmallConfig(SETTING_KEY_P2P_DEVICE_NAME)) {
-                syncSetting.P2P_DevicePeerName = context.services.config.getSmallConfig(
-                    SETTING_KEY_P2P_DEVICE_NAME
-                ) as string;
-            } else {
-                syncSetting.P2P_DevicePeerName = "";
-            }
+        }
+        const initialPeerName = (initialData?.P2P_DevicePeerName ?? "").trim();
+        if (initialPeerName !== "") {
+            return;
+        }
+        const cachedPeerName = context.services.config.getSmallConfig(SETTING_KEY_P2P_DEVICE_NAME);
+        if (cachedPeerName) {
+            syncSetting.P2P_DevicePeerName = cachedPeerName as string;
         }
     });
     function generateSetting() {
@@ -100,7 +102,7 @@
             const dummyPouch = new PouchDB<EntryDoc>("dummy");
             const env: ReplicatorHostEnv = {
                 settings: trialRemoteSetting,
-                processReplicatedDocs: async (docs: any[]) => {
+                processReplicatedDocs: async (_docs: any[]) => {
                     return;
                 },
                 confirm: context.services.confirm,
@@ -116,7 +118,7 @@
                 await replicator.open();
                 for (let i = 0; i < 10; i++) {
                     // await delay(1000);
-                    await new Promise((resolve) => setTimeout(resolve, 1000));
+                    await new Promise((resolve) => window.setTimeout(resolve, 1000));
                     // Logger(`Checking known advertisements... (${i})`, LOG_LEVEL_INFO);
                     if (replicator.knownAdvertisements.length > 0) {
                         break;