Refactor:

- Files have been categorised for clarity. The deliverables are not affected.

src/ui/ConflictResolveModal.ts

@@ -0,0 +1,93 @@
+import { App, Modal } from "../deps.ts";
+import { DIFF_DELETE, DIFF_EQUAL, DIFF_INSERT } from "diff-match-patch";
+import { CANCELLED, LEAVE_TO_SUBSEQUENT, RESULT_TIMED_OUT, type diff_result } from "../lib/src/common/types.ts";
+import { escapeStringToHTML } from "../lib/src/string_and_binary/strbin.ts";
+import { delay, sendValue, waitForValue } from "../lib/src/common/utils.ts";
+
+export type MergeDialogResult = typeof LEAVE_TO_SUBSEQUENT | typeof CANCELLED | string;
+export class ConflictResolveModal extends Modal {
+    result: diff_result;
+    filename: string;
+
+    response: MergeDialogResult = CANCELLED;
+    isClosed = false;
+    consumed = false;
+
+    constructor(app: App, filename: string, diff: diff_result) {
+        super(app);
+        this.result = diff;
+        this.filename = filename;
+        // Send cancel signal for the previous merge dialogue
+        // if not there, simply be ignored.
+        // sendValue("close-resolve-conflict:" + this.filename, false);
+        sendValue("cancel-resolve-conflict:" + this.filename, true);
+    }
+
+    onOpen() {
+        const { contentEl } = this;
+        // Send cancel signal for the previous merge dialogue
+        // if not there, simply be ignored.
+        sendValue("cancel-resolve-conflict:" + this.filename, true);
+        setTimeout(async () => {
+            const forceClose = await waitForValue("cancel-resolve-conflict:" + this.filename);
+            // debugger;
+            if (forceClose) {
+                this.sendResponse(CANCELLED);
+            }
+        }, 10)
+        // sendValue("close-resolve-conflict:" + this.filename, false);
+        this.titleEl.setText("Conflicting changes");
+        contentEl.empty();
+        contentEl.createEl("span", { text: this.filename });
+        const div = contentEl.createDiv("");
+        div.addClass("op-scrollable");
+        let diff = "";
+        for (const v of this.result.diff) {
+            const x1 = v[0];
+            const x2 = v[1];
+            if (x1 == DIFF_DELETE) {
+                diff += "<span class='deleted'>" + escapeStringToHTML(x2).replace(/\n/g, "<span class='ls-mark-cr'></span>\n") + "</span>";
+            } else if (x1 == DIFF_EQUAL) {
+                diff += "<span class='normal'>" + escapeStringToHTML(x2).replace(/\n/g, "<span class='ls-mark-cr'></span>\n") + "</span>";
+            } else if (x1 == DIFF_INSERT) {
+                diff += "<span class='added'>" + escapeStringToHTML(x2).replace(/\n/g, "<span class='ls-mark-cr'></span>\n") + "</span>";
+            }
+        }
+
+        diff = diff.replace(/\n/g, "<br>");
+        div.innerHTML = diff;
+        const div2 = contentEl.createDiv("");
+        const date1 = 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'>A:${date1}</span><br /><span class='added'>B:${date2}</span><br> 
+        `;
+        contentEl.createEl("button", { text: "Keep A" }, (e) => e.addEventListener("click", () => this.sendResponse(this.result.right.rev)));
+        contentEl.createEl("button", { text: "Keep B" }, (e) => e.addEventListener("click", () => this.sendResponse(this.result.left.rev)));
+        contentEl.createEl("button", { text: "Concat both" }, (e) => e.addEventListener("click", () => this.sendResponse(LEAVE_TO_SUBSEQUENT)));
+        contentEl.createEl("button", { text: "Not now" }, (e) => e.addEventListener("click", () => this.sendResponse(CANCELLED)));
+    }
+
+    sendResponse(result: MergeDialogResult) {
+        this.response = result;
+        this.close();
+    }
+
+    onClose() {
+        const { contentEl } = this;
+        contentEl.empty();
+        if (this.consumed) {
+            return;
+        }
+        this.consumed = true;
+        sendValue("close-resolve-conflict:" + this.filename, this.response);
+        sendValue("cancel-resolve-conflict:" + this.filename, false);
+    }
+
+    async waitForResult(): Promise<MergeDialogResult> {
+        await delay(100);
+        const r = await waitForValue<MergeDialogResult>("close-resolve-conflict:" + this.filename);
+        if (r === RESULT_TIMED_OUT) return CANCELLED;
+        return r;
+    }
+}

src/ui/DocumentHistoryModal.ts

@@ -0,0 +1,287 @@
+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/strbin.ts";
+import ObsidianLiveSyncPlugin from "../main.ts";
+import { type DocumentID, type FilePathWithPrefix, type LoadedEntry, LOG_LEVEL_INFO, LOG_LEVEL_NOTICE, LOG_LEVEL_VERBOSE } from "../lib/src/common/types.ts";
+import { Logger } from "../lib/src/common/logger.ts";
+import { isErrorOfMissingDoc } from "../lib/src/pouchdb/utils_couchdb.ts";
+import { getDocData, readContent } from "../lib/src/common/utils.ts";
+import { isPlainText, stripPrefix } from "../lib/src/string_and_binary/path.ts";
+
+function isImage(path: string) {
+    const ext = path.split(".").splice(-1)[0].toLowerCase();
+    return ["png", "jpg", "jpeg", "gif", "bmp", "webp"].includes(ext);
+}
+function isComparableText(path: string) {
+    const ext = path.split(".").splice(-1)[0].toLowerCase();
+    return isPlainText(path) || ["md", "mdx", "txt", "json"].includes(ext);
+}
+function isComparableTextDecode(path: string) {
+    const ext = path.split(".").splice(-1)[0].toLowerCase();
+    return ["json"].includes(ext)
+}
+function readDocument(w: LoadedEntry) {
+    if (w.data.length == 0) return "";
+    if (isImage(w.path)) {
+        return new Uint8Array(decodeBinary(w.data));
+    }
+    if (w.type == "plain" || w.datatype == "plain") return getDocData(w.data);
+    if (isComparableTextDecode(w.path)) return readString(new Uint8Array(decodeBinary(w.data)));
+    if (isComparableText(w.path)) return getDocData(w.data);
+    try {
+        return readString(new Uint8Array(decodeBinary(w.data)));
+    } catch (ex) {
+        // NO OP.
+    }
+    return getDocData(w.data);
+}
+export class DocumentHistoryModal extends Modal {
+    plugin: ObsidianLiveSyncPlugin;
+    range!: HTMLInputElement;
+    contentView!: HTMLDivElement;
+    info!: HTMLDivElement;
+    fileInfo!: HTMLDivElement;
+    showDiff = false;
+    id?: DocumentID;
+
+    file: FilePathWithPrefix;
+
+    revs_info: PouchDB.Core.RevisionInfo[] = [];
+    currentDoc?: LoadedEntry;
+    currentText = "";
+    currentDeleted = false;
+    initialRev?: string;
+
+    constructor(app: App, plugin: ObsidianLiveSyncPlugin, file: TFile | FilePathWithPrefix, id?: DocumentID, revision?: string) {
+        super(app);
+        this.plugin = plugin;
+        this.file = (file instanceof TFile) ? getPathFromTFile(file) : file;
+        this.id = id;
+        this.initialRev = revision;
+        if (!file && id) {
+            this.file = this.plugin.id2path(id);
+        }
+        if (localStorage.getItem("ols-history-highlightdiff") == "1") {
+            this.showDiff = true;
+        }
+    }
+
+    async loadFile(initialRev?: string) {
+        if (!this.id) {
+            this.id = await this.plugin.path2id(this.file);
+        }
+        const db = this.plugin.localDatabase;
+        try {
+            const w = await db.getRaw(this.id, { revs_info: true });
+            this.revs_info = w._revs_info?.filter((e) => e?.status == "available") ?? [];
+            this.range.max = `${Math.max(this.revs_info.length - 1, 0)}`;
+            this.range.value = this.range.max;
+            this.fileInfo.setText(`${this.file} / ${this.revs_info.length} revisions`);
+            await this.loadRevs(initialRev);
+        } catch (ex) {
+            if (isErrorOfMissingDoc(ex)) {
+                this.range.max = "0";
+                this.range.value = "";
+                this.range.disabled = true;
+                this.contentView.setText(`History of this file was not recorded.`);
+            } else {
+                this.contentView.setText(`Error occurred.`);
+                Logger(ex, LOG_LEVEL_VERBOSE);
+            }
+        }
+    }
+    async loadRevs(initialRev?: string) {
+        if (this.revs_info.length == 0) return;
+        if (initialRev) {
+            const rIndex = this.revs_info.findIndex(e => e.rev == initialRev);
+            if (rIndex >= 0) {
+                this.range.value = `${this.revs_info.length - 1 - rIndex}`;
+            }
+        }
+        const index = this.revs_info.length - 1 - (this.range.value as any) / 1;
+        const rev = this.revs_info[index];
+        await this.showExactRev(rev.rev);
+    }
+    BlobURLs = new Map<string, string>();
+
+    revokeURL(key: string) {
+        const v = this.BlobURLs.get(key);
+        if (v) {
+            URL.revokeObjectURL(v);
+        }
+        this.BlobURLs.delete(key);
+    }
+    generateBlobURL(key: string, data: Uint8Array) {
+        this.revokeURL(key);
+        const v = URL.createObjectURL(new Blob([data], { endings: "transparent", type: "application/octet-stream" }));
+        this.BlobURLs.set(key, v);
+        return v;
+    }
+
+    async showExactRev(rev: string) {
+        const db = this.plugin.localDatabase;
+        const w = await db.getDBEntry(this.file, { rev: rev }, false, false, true);
+        this.currentText = "";
+        this.currentDeleted = false;
+        if (w === false) {
+            this.currentDeleted = true;
+            this.info.innerHTML = "";
+            this.contentView.innerHTML = `Could not read this revision<br>(${rev})`;
+        } else {
+            this.currentDoc = w;
+            this.info.innerHTML = `Modified:${new Date(w.mtime).toLocaleString()}`;
+            let result = undefined;
+            const w1data = readDocument(w);
+            this.currentDeleted = !!w.deleted;
+            // this.currentText = w1data;
+            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) {
+                    const oldRev = this.revs_info[prevRevIdx].rev;
+                    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>";
+                                }
+                            }
+                            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);
+                            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");
+                        }
+                    }
+                }
+
+            }
+            if (result == undefined) {
+                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");
+                    }
+                } else {
+                    result = escapeStringToHTML(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;
+        }
+    }
+
+    onOpen() {
+        const { contentEl } = this;
+        this.titleEl.setText("Document History");
+        contentEl.empty();
+        this.fileInfo = contentEl.createDiv("");
+        this.fileInfo.addClass("op-info");
+        const divView = contentEl.createDiv("");
+        divView.addClass("op-flex");
+
+        divView.createEl("input", { type: "range" }, (e) => {
+            this.range = e;
+            e.addEventListener("change", (e) => {
+                this.loadRevs();
+            });
+            e.addEventListener("input", (e) => {
+                this.loadRevs();
+            });
+        });
+        contentEl
+            .createDiv("", (e) => {
+                e.createEl("label", {}, (label) => {
+                    label.appendChild(
+                        createEl("input", { type: "checkbox" }, (checkbox) => {
+                            if (this.showDiff) {
+                                checkbox.checked = true;
+                            }
+                            checkbox.addEventListener("input", (evt: any) => {
+                                this.showDiff = checkbox.checked;
+                                localStorage.setItem("ols-history-highlightdiff", this.showDiff == true ? "1" : "");
+                                this.loadRevs();
+                            });
+                        })
+                    );
+                    label.appendText("Highlight diff");
+                });
+            })
+            .addClass("op-info");
+        this.info = contentEl.createDiv("");
+        this.info.addClass("op-info");
+        this.loadFile(this.initialRev);
+        const div = contentEl.createDiv({ text: "Loading old revisions..." });
+        this.contentView = div;
+        div.addClass("op-scrollable");
+        div.addClass("op-pre");
+        const buttons = contentEl.createDiv("");
+        buttons.createEl("button", { text: "Copy to clipboard" }, (e) => {
+            e.addClass("mod-cta");
+            e.addEventListener("click", async () => {
+                await navigator.clipboard.writeText(this.currentText);
+                Logger(`Old content copied to clipboard`, LOG_LEVEL_NOTICE);
+            });
+        });
+        const focusFile = async (path: string) => {
+            const targetFile = this.plugin.app.vault.getFileByPath(path);
+            if (targetFile) {
+                const leaf = this.plugin.app.workspace.getLeaf(false);
+                await leaf.openFile(targetFile);
+            } else {
+                Logger("The file could not view on the editor", LOG_LEVEL_NOTICE)
+            }
+        }
+        buttons.createEl("button", { text: "Back to this revision" }, (e) => {
+            e.addClass("mod-cta");
+            e.addEventListener("click", async () => {
+                // const pathToWrite = this.plugin.id2path(this.id, true);
+                const pathToWrite = stripPrefix(this.file);
+                if (!isValidPath(pathToWrite)) {
+                    Logger("Path is not valid to write content.", LOG_LEVEL_INFO);
+                    return;
+                }
+                if (!this.currentDoc) {
+                    Logger("No active file loaded.", LOG_LEVEL_INFO);
+                    return;
+                }
+                const d = readContent(this.currentDoc);
+                await this.plugin.vaultAccess.adapterWrite(pathToWrite, d);
+                await focusFile(pathToWrite);
+                this.close();
+            });
+        });
+    }
+    onClose() {
+        const { contentEl } = this;
+        contentEl.empty();
+        this.BlobURLs.forEach(value => {
+            console.log(value);
+            if (value) URL.revokeObjectURL(value);
+        })
+    }
+}

src/ui/GlobalHistory.svelte

@@ -0,0 +1,318 @@
+<script lang="ts">
+    import ObsidianLiveSyncPlugin from "../main";
+    import { onDestroy, onMount } from "svelte";
+    import type { AnyEntry, FilePathWithPrefix } from "../lib/src/common/types";
+    import { getDocData, isAnyNote, isDocContentSame, readAsBlob } from "../lib/src/common/utils";
+    import { diff_match_patch } from "../deps";
+    import { DocumentHistoryModal } from "./DocumentHistoryModal";
+    import { isPlainText, stripAllPrefixes } from "../lib/src/string_and_binary/path";
+    import { TFile } from "../deps";
+    export let plugin: ObsidianLiveSyncPlugin;
+
+    let showDiffInfo = false;
+    let showChunkCorrected = false;
+    let checkStorageDiff = false;
+
+    let range_from_epoch = Date.now() - 3600000 * 24 * 7;
+    let range_to_epoch = Date.now() + 3600000 * 24 * 2;
+    const timezoneOffset = new Date().getTimezoneOffset();
+    let dispDateFrom = new Date(range_from_epoch - timezoneOffset).toISOString().split("T")[0];
+    let dispDateTo = new Date(range_to_epoch - timezoneOffset).toISOString().split("T")[0];
+    $: {
+        range_from_epoch = new Date(dispDateFrom).getTime() + timezoneOffset;
+        range_to_epoch = new Date(dispDateTo).getTime() + timezoneOffset;
+
+        getHistory(showDiffInfo, showChunkCorrected, checkStorageDiff);
+    }
+    function mtimeToDate(mtime: number) {
+        return new Date(mtime).toLocaleString();
+    }
+
+    type HistoryData = {
+        id: string;
+        rev?: string;
+        path: string;
+        dirname: string;
+        filename: string;
+        mtime: number;
+        mtimeDisp: string;
+        isDeleted: boolean;
+        size: number;
+        changes: string;
+        chunks: string;
+        isPlain: boolean;
+    };
+    let history = [] as HistoryData[];
+    let loading = false;
+
+    async function fetchChanges(): Promise<HistoryData[]> {
+        try {
+            const db = plugin.localDatabase;
+            let result = [] as typeof history;
+            for await (const docA of db.findAllNormalDocs()) {
+                if (docA.mtime < range_from_epoch) {
+                    continue;
+                }
+                if (!isAnyNote(docA)) continue;
+                const path = plugin.getPath(docA as AnyEntry);
+                const isPlain = isPlainText(docA.path);
+                const revs = await db.getRaw(docA._id, { revs_info: true });
+                let p: string | undefined = undefined;
+                const reversedRevs = (revs._revs_info ?? []).reverse();
+                const DIFF_DELETE = -1;
+
+                const DIFF_EQUAL = 0;
+                const DIFF_INSERT = 1;
+
+                for (const revInfo of reversedRevs) {
+                    if (revInfo.status == "available") {
+                        const doc = (!isPlain && showDiffInfo) || (checkStorageDiff && revInfo.rev == docA._rev) ? await db.getDBEntry(path, { rev: revInfo.rev }, false, false, true) : await db.getDBEntryMeta(path, { rev: revInfo.rev }, true);
+                        if (doc === false) continue;
+                        const rev = revInfo.rev;
+
+                        const mtime = "mtime" in doc ? doc.mtime : 0;
+                        if (range_from_epoch > mtime) {
+                            continue;
+                        }
+                        if (range_to_epoch < mtime) {
+                            continue;
+                        }
+
+                        let diffDetail = "";
+                        if (showDiffInfo && !isPlain) {
+                            const data = getDocData(doc.data);
+                            if (p === undefined) {
+                                p = data;
+                            }
+                            if (p != data) {
+                                const dmp = new diff_match_patch();
+                                const diff = dmp.diff_main(p, data);
+                                dmp.diff_cleanupSemantic(diff);
+                                p = data;
+                                const pxinit = {
+                                    [DIFF_DELETE]: 0,
+                                    [DIFF_EQUAL]: 0,
+                                    [DIFF_INSERT]: 0,
+                                } as { [key: number]: number };
+                                const px = diff.reduce((p, c) => ({ ...p, [c[0]]: (p[c[0]] ?? 0) + c[1].length }), pxinit);
+                                diffDetail = `-${px[DIFF_DELETE]}, +${px[DIFF_INSERT]}`;
+                            }
+                        }
+                        const isDeleted = doc._deleted || (doc as any)?.deleted || false;
+                        if (isDeleted) {
+                            diffDetail += " 🗑️";
+                        }
+                        if (rev == docA._rev) {
+                            if (checkStorageDiff) {
+                                const abs = plugin.vaultAccess.getAbstractFileByPath(stripAllPrefixes(plugin.getPath(docA)));
+                                if (abs instanceof TFile) {
+                                    const data = await plugin.vaultAccess.adapterReadAuto(abs);
+                                    const d = readAsBlob(doc);
+                                    const result = await isDocContentSame(data, d);
+                                    if (result) {
+                                        diffDetail += " ⚖️";
+                                    } else {
+                                        diffDetail += " ⚠️";
+                                    }
+                                }
+                            }
+                        }
+                        const docPath = plugin.getPath(doc as AnyEntry);
+                        const [filename, ...pathItems] = docPath.split("/").reverse();
+
+                        let chunksStatus = "";
+                        if (showChunkCorrected) {
+                            const chunks = (doc as any)?.children ?? [];
+                            const loadedChunks = await db.allDocsRaw({ keys: [...chunks] });
+                            const totalCount = loadedChunks.rows.length;
+                            const errorCount = loadedChunks.rows.filter((e) => "error" in e).length;
+                            if (errorCount == 0) {
+                                chunksStatus = `✅ ${totalCount}`;
+                            } else {
+                                chunksStatus = `🔎 ${errorCount} ✅ ${totalCount}`;
+                            }
+                        }
+
+                        result.push({
+                            id: doc._id,
+                            rev: doc._rev,
+                            path: docPath,
+                            dirname: pathItems.reverse().join("/"),
+                            filename: filename,
+                            mtime: mtime,
+                            mtimeDisp: mtimeToDate(mtime),
+                            size: (doc as any)?.size ?? 0,
+                            isDeleted: isDeleted,
+                            changes: diffDetail,
+                            chunks: chunksStatus,
+                            isPlain: isPlain,
+                        });
+                    }
+                }
+            }
+
+            return [...result].sort((a, b) => b.mtime - a.mtime);
+        } finally {
+            loading = false;
+        }
+    }
+    async function getHistory(showDiffInfo: boolean, showChunkCorrected: boolean, checkStorageDiff: boolean) {
+        loading = true;
+        const newDisplay = [];
+        const page = await fetchChanges();
+        newDisplay.push(...page);
+        history = [...newDisplay];
+    }
+
+    function nextWeek() {
+        dispDateTo = new Date(range_to_epoch - timezoneOffset + 3600 * 1000 * 24 * 7).toISOString().split("T")[0];
+    }
+    function prevWeek() {
+        dispDateFrom = new Date(range_from_epoch - timezoneOffset - 3600 * 1000 * 24 * 7).toISOString().split("T")[0];
+    }
+
+    onMount(async () => {
+        await getHistory(showDiffInfo, showChunkCorrected, checkStorageDiff);
+    });
+    onDestroy(() => {});
+
+    function showHistory(file: string, rev: string) {
+        new DocumentHistoryModal(plugin.app, plugin, file as unknown as FilePathWithPrefix, undefined, rev).open();
+    }
+    function openFile(file: string) {
+        plugin.app.workspace.openLinkText(file, file);
+    }
+</script>
+
+<div class="globalhistory">
+    <h1>Vault history</h1>
+    <div class="control">
+        <div class="row"><label for="">From:</label><input type="date" bind:value={dispDateFrom} disabled={loading} /></div>
+        <div class="row"><label for="">To:</label><input type="date" bind:value={dispDateTo} disabled={loading} /></div>
+        <div class="row">
+            <label for="">Info:</label>
+            <label><input type="checkbox" bind:checked={showDiffInfo} disabled={loading} /><span>Diff</span></label>
+            <label><input type="checkbox" bind:checked={showChunkCorrected} disabled={loading} /><span>Chunks</span></label>
+            <label><input type="checkbox" bind:checked={checkStorageDiff} disabled={loading} /><span>File integrity</span></label>
+        </div>
+    </div>
+    {#if loading}
+        <div class="">Gathering information...</div>
+    {/if}
+    <table>
+        <tr>
+            <th> Date </th>
+            <th> Path </th>
+            <th> Rev </th>
+            <th> Stat </th>
+            {#if showChunkCorrected}
+                <th> Chunks </th>
+            {/if}
+        </tr>
+        <tr>
+            <td colspan="5" class="more">
+                {#if loading}
+                    <div class="" />
+                {:else}
+                    <div><button on:click={() => nextWeek()}>+1 week</button></div>
+                {/if}
+            </td>
+        </tr>
+        {#each history as entry}
+            <tr>
+                <td class="mtime">
+                    {entry.mtimeDisp}
+                </td>
+                <td class="path">
+                    <div class="filenames">
+                        <span class="path">/{entry.dirname.split("/").join(`​/`)}</span>
+                        <span class="filename"><a on:click={() => openFile(entry.path)}>{entry.filename}</a></span>
+                    </div>
+                </td>
+                <td>
+                    <span class="rev">
+                        {#if entry.isPlain}
+                            <a on:click={() => showHistory(entry.path, entry?.rev || "")}>{entry.rev}</a>
+                        {:else}
+                            {entry.rev}
+                        {/if}
+                    </span>
+                </td>
+                <td>
+                    {entry.changes}
+                </td>
+                {#if showChunkCorrected}
+                    <td>
+                        {entry.chunks}
+                    </td>
+                {/if}
+            </tr>
+        {/each}
+        <tr>
+            <td colspan="5" class="more">
+                {#if loading}
+                    <div class="" />
+                {:else}
+                    <div><button on:click={() => prevWeek()}>+1 week</button></div>
+                {/if}
+            </td>
+        </tr>
+    </table>
+</div>
+
+<style>
+    * {
+        box-sizing: border-box;
+    }
+    .globalhistory {
+        margin-bottom: 2em;
+    }
+    table {
+        width: 100%;
+    }
+    .more > div {
+        display: flex;
+    }
+    .more > div > button {
+        flex-grow: 1;
+    }
+    th {
+        position: sticky;
+        top: 0;
+        backdrop-filter: blur(10px);
+    }
+    td.mtime {
+        white-space: break-spaces;
+    }
+    td.path {
+        word-break: break-word;
+    }
+    .row {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+    .row > label {
+        display: flex;
+        align-items: center;
+        min-width: 5em;
+    }
+    .row > input {
+        flex-grow: 1;
+    }
+
+    .filenames {
+        display: flex;
+        flex-direction: column;
+    }
+    .filenames > .path {
+        font-size: 70%;
+    }
+    .rev {
+        text-overflow: ellipsis;
+        max-width: 3em;
+        display: inline-block;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+</style>

src/ui/GlobalHistoryView.ts

@@ -0,0 +1,49 @@
+import {
+    ItemView,
+    WorkspaceLeaf
+} from "../deps.ts";
+import GlobalHistoryComponent from "./GlobalHistory.svelte";
+import type ObsidianLiveSyncPlugin from "../main.ts";
+
+export const VIEW_TYPE_GLOBAL_HISTORY = "global-history";
+export class GlobalHistoryView extends ItemView {
+
+    component: GlobalHistoryComponent;
+    plugin: ObsidianLiveSyncPlugin;
+    icon: "clock";
+    title: string;
+    navigation: true;
+
+    getIcon(): string {
+        return "clock";
+    }
+
+    constructor(leaf: WorkspaceLeaf, plugin: ObsidianLiveSyncPlugin) {
+        super(leaf);
+        this.plugin = plugin;
+    }
+
+
+    getViewType() {
+        return VIEW_TYPE_GLOBAL_HISTORY;
+    }
+
+    getDisplayText() {
+        return "Vault history";
+    }
+
+    // eslint-disable-next-line require-await
+    async onOpen() {
+        this.component = new GlobalHistoryComponent({
+            target: this.contentEl,
+            props: {
+                plugin: this.plugin,
+            },
+        });
+    }
+
+    // eslint-disable-next-line require-await
+    async onClose() {
+        this.component.$destroy();
+    }
+}

src/ui/JsonResolveModal.ts

@@ -0,0 +1,66 @@
+import { App, Modal } from "../deps.ts";
+import { type FilePath, type LoadedEntry } from "../lib/src/common/types.ts";
+import JsonResolvePane from "./JsonResolvePane.svelte";
+import { waitForSignal } from "../lib/src/common/utils.ts";
+
+export class JsonResolveModal extends Modal {
+    // result: Array<[number, string]>;
+    filename: FilePath;
+    callback: (keepRev: string, mergedStr?: string) => Promise<void>;
+    docs: LoadedEntry[];
+    component: JsonResolvePane;
+    nameA: string;
+    nameB: string;
+    defaultSelect: string;
+
+    constructor(app: App, filename: FilePath, docs: LoadedEntry[], callback: (keepRev: string, mergedStr?: string) => Promise<void>, nameA?: string, nameB?: string, defaultSelect?: string) {
+        super(app);
+        this.callback = callback;
+        this.filename = filename;
+        this.docs = docs;
+        this.nameA = nameA;
+        this.nameB = nameB;
+        this.defaultSelect = defaultSelect;
+        waitForSignal(`cancel-internal-conflict:${filename}`).then(() => this.close());
+    }
+    async UICallback(keepRev: string, mergedStr?: string) {
+        this.close();
+        await this.callback(keepRev, mergedStr);
+        this.callback = null;
+    }
+
+    onOpen() {
+        const { contentEl } = this;
+        this.titleEl.setText("Conflicted Setting");
+        contentEl.empty();
+
+        if (this.component == null) {
+            this.component = new JsonResolvePane({
+                target: contentEl,
+                props: {
+                    docs: this.docs,
+                    filename: this.filename,
+                    nameA: this.nameA,
+                    nameB: this.nameB,
+                    defaultSelect: this.defaultSelect,
+                    callback: (keepRev: string, mergedStr: string) => this.UICallback(keepRev, mergedStr),
+                },
+            });
+        }
+        return;
+    }
+
+
+    onClose() {
+        const { contentEl } = this;
+        contentEl.empty();
+        // contentEl.empty();
+        if (this.callback != null) {
+            this.callback(null);
+        }
+        if (this.component != null) {
+            this.component.$destroy();
+            this.component = null;
+        }
+    }
+}

src/ui/JsonResolvePane.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+    import { type Diff, DIFF_DELETE, DIFF_INSERT, diff_match_patch } from "../deps";
+    import type { FilePath, LoadedEntry } from "../lib/src/common/types";
+    import { decodeBinary, readString } from "../lib/src/string_and_binary/strbin";
+    import { getDocData } from "../lib/src/common/utils";
+    import { mergeObject } from "../common/utils";
+
+    export let docs: LoadedEntry[] = [];
+    export let callback: (keepRev?: string, mergedStr?: string) => Promise<void> = async (_, __) => {
+        Promise.resolve();
+    };
+    export let filename: FilePath = "" as FilePath;
+    export let nameA: string = "A";
+    export let nameB: string = "B";
+    export let defaultSelect: string = "";
+    let docA: LoadedEntry;
+    let docB: LoadedEntry;
+    let docAContent = "";
+    let docBContent = "";
+    let objA: any = {};
+    let objB: any = {};
+    let objAB: any = {};
+    let objBA: any = {};
+    let diffs: Diff[];
+    type SelectModes = "" | "A" | "B" | "AB" | "BA";
+    let mode: SelectModes = defaultSelect as SelectModes;
+
+    function docToString(doc: LoadedEntry) {
+        return doc.datatype == "plain" ? getDocData(doc.data) : readString(new Uint8Array(decodeBinary(doc.data)));
+    }
+    function revStringToRevNumber(rev?: string) {
+        if (!rev) return "";
+        return rev.split("-")[0];
+    }
+
+    function getDiff(left: string, right: string) {
+        const dmp = new diff_match_patch();
+        const mapLeft = dmp.diff_linesToChars_(left, right);
+        const diffLeftSrc = dmp.diff_main(mapLeft.chars1, mapLeft.chars2, false);
+        dmp.diff_charsToLines_(diffLeftSrc, mapLeft.lineArray);
+        return diffLeftSrc;
+    }
+    function getJsonDiff(a: object, b: object) {
+        return getDiff(JSON.stringify(a, null, 2), JSON.stringify(b, null, 2));
+    }
+    function apply() {
+        if (docA._id == docB._id) {
+            if (mode == "A") return callback(docA._rev!, undefined);
+            if (mode == "B") return callback(docB._rev!, undefined);
+        } else {
+            if (mode == "A") return callback(undefined, docToString(docA));
+            if (mode == "B") return callback(undefined, docToString(docB));
+        }
+        if (mode == "BA") return callback(undefined, JSON.stringify(objBA, null, 2));
+        if (mode == "AB") return callback(undefined, JSON.stringify(objAB, null, 2));
+        callback(undefined, undefined);
+    }
+    $: {
+        if (docs && docs.length >= 1) {
+            if (docs[0].mtime < docs[1].mtime) {
+                docA = docs[0];
+                docB = docs[1];
+            } else {
+                docA = docs[1];
+                docB = docs[0];
+            }
+            docAContent = docToString(docA);
+            docBContent = docToString(docB);
+
+            try {
+                objA = false;
+                objB = false;
+                objA = JSON.parse(docAContent);
+                objB = JSON.parse(docBContent);
+                objAB = mergeObject(objA, objB);
+                objBA = mergeObject(objB, objA);
+                if (JSON.stringify(objAB) == JSON.stringify(objBA)) {
+                    objBA = false;
+                }
+            } catch (ex) {
+                objBA = false;
+                objAB = false;
+            }
+        }
+    }
+    $: mergedObjs = {
+        "": false,
+        A: objA,
+        B: objB,
+        AB: objAB,
+        BA: objBA,
+    };
+
+    $: selectedObj = mode in mergedObjs ? mergedObjs[mode] : {};
+    $: {
+        diffs = getJsonDiff(objA, selectedObj);
+    }
+
+    $: modes = [
+        ["", "Not now"],
+        ["A", nameA || "A"],
+        ["B", nameB || "B"],
+        ["AB", `${nameA || "A"} + ${nameB || "B"}`],
+        ["BA", `${nameB || "B"} + ${nameA || "A"}`],
+    ] as ["" | "A" | "B" | "AB" | "BA", string][];
+</script>
+
+<h2>{filename}</h2>
+{#if !docA || !docB}
+    <div class="message">Just for a minute, please!</div>
+    <div class="buttons">
+        <button on:click={apply}>Dismiss</button>
+    </div>
+{:else}
+    <div class="options">
+        {#each modes as m}
+            {#if m[0] == "" || mergedObjs[m[0]] != false}
+                <label class={`sls-setting-label ${m[0] == mode ? "selected" : ""}`}
+                    ><input type="radio" name="disp" bind:group={mode} value={m[0]} class="sls-setting-tab" />
+                    <div class="sls-setting-menu-btn">{m[1]}</div></label
+                >
+            {/if}
+        {/each}
+    </div>
+
+    {#if selectedObj != false}
+        <div class="op-scrollable json-source">
+            {#each diffs as diff}
+                <span class={diff[0] == DIFF_DELETE ? "deleted" : diff[0] == DIFF_INSERT ? "added" : "normal"}>{diff[1]}</span>
+            {/each}
+        </div>
+    {:else}
+        NO PREVIEW
+    {/if}
+    <div>
+        {nameA}
+        {#if docA._id == docB._id}
+            Rev:{revStringToRevNumber(docA._rev)}
+        {/if} ,{new Date(docA.mtime).toLocaleString()}
+        {docAContent.length} letters
+    </div>
+
+    <div>
+        {nameB}
+        {#if docA._id == docB._id}
+            Rev:{revStringToRevNumber(docB._rev)}
+        {/if} ,{new Date(docB.mtime).toLocaleString()}
+        {docBContent.length} letters
+    </div>
+
+    <div class="buttons">
+        <button on:click={apply}>Apply</button>
+    </div>
+{/if}
+
+<style>
+    .deleted {
+        text-decoration: line-through;
+    }
+    * {
+        box-sizing: border-box;
+    }
+
+    .scroller {
+        display: flex;
+        flex-direction: column;
+        overflow-y: scroll;
+        max-height: 60vh;
+        user-select: text;
+    }
+    .json-source {
+        white-space: pre;
+        height: auto;
+        overflow: auto;
+        min-height: var(--font-ui-medium);
+        flex-grow: 1;
+    }
+</style>

src/ui/LogDisplayModal.ts

@@ -0,0 +1,41 @@
+import { App, Modal } from "../deps.ts";
+import type { ReactiveInstance, } from "../lib/src/dataobject/reactive.ts";
+import { logMessages } from "../lib/src/mock_and_interop/stores.ts";
+import { escapeStringToHTML } from "../lib/src/string_and_binary/strbin.ts";
+import ObsidianLiveSyncPlugin from "../main.ts";
+
+export class LogDisplayModal extends Modal {
+    plugin: ObsidianLiveSyncPlugin;
+    logEl: HTMLDivElement;
+    unsubscribe: () => void;
+    constructor(app: App, plugin: ObsidianLiveSyncPlugin) {
+        super(app);
+        this.plugin = plugin;
+    }
+
+    onOpen() {
+        const { contentEl } = this;
+        this.titleEl.setText("Sync status");
+
+        contentEl.empty();
+        const div = contentEl.createDiv("");
+        div.addClass("op-scrollable");
+        div.addClass("op-pre");
+        this.logEl = div;
+        function updateLog(logs: ReactiveInstance<string[]>) {
+            const e = logs.value;
+            let msg = "";
+            for (const v of e) {
+                msg += escapeStringToHTML(v) + "<br>";
+            }
+            this.logEl.innerHTML = msg;
+        }
+        logMessages.onChanged(updateLog);
+        this.unsubscribe = () => logMessages.offChanged(updateLog);
+    }
+    onClose() {
+        const { contentEl } = this;
+        contentEl.empty();
+        if (this.unsubscribe) this.unsubscribe();
+    }
+}

src/ui/LogPane.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    import { onDestroy, onMount } from "svelte";
+    import { logMessages } from "../lib/src/mock_and_interop/stores";
+    import type { ReactiveInstance } from "../lib/src/dataobject/reactive";
+    import { Logger } from "../lib/src/common/logger";
+
+    let unsubscribe: () => void;
+    let messages = [] as string[];
+    let wrapRight = false;
+    let autoScroll = true;
+    let suspended = false;
+    function updateLog(logs: ReactiveInstance<string[]>) {
+        const e = logs.value;
+        if (!suspended) {
+            messages = [...e];
+            setTimeout(() => {
+                if (scroll) scroll.scrollTop = scroll.scrollHeight;
+            }, 10);
+        }
+    }
+    onMount(async () => {
+        logMessages.onChanged(updateLog);
+        Logger("Log window opened");
+        unsubscribe = () => logMessages.offChanged(updateLog);
+    });
+    onDestroy(() => {
+        if (unsubscribe) unsubscribe();
+    });
+    let scroll: HTMLDivElement;
+</script>
+
+<div class="logpane">
+    <!-- <h1>Self-hosted LiveSync Log</h1> -->
+    <div class="control">
+        <div class="row">
+            <label><input type="checkbox" bind:checked={wrapRight} /><span>Wrap</span></label>
+            <label><input type="checkbox" bind:checked={autoScroll} /><span>Auto scroll</span></label>
+            <label><input type="checkbox" bind:checked={suspended} /><span>Pause</span></label>
+        </div>
+    </div>
+    <div class="log" bind:this={scroll}>
+        {#each messages as line}
+            <pre class:wrap-right={wrapRight}>{line}</pre>
+        {/each}
+    </div>
+</div>
+
+<style>
+    * {
+        box-sizing: border-box;
+    }
+    .logpane {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+    }
+    .log {
+        overflow-y: scroll;
+        user-select: text;
+        padding-bottom: 2em;
+    }
+    .log > pre {
+        margin: 0;
+    }
+    .log > pre.wrap-right {
+        word-break: break-all;
+        max-width: 100%;
+        width: 100%;
+        white-space: normal;
+    }
+    .row {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+    }
+    .row > label {
+        display: flex;
+        align-items: center;
+        min-width: 5em;
+        margin-right: 1em;
+    }
+</style>

src/ui/LogPaneView.ts

@@ -0,0 +1,48 @@
+import {
+    ItemView,
+    WorkspaceLeaf
+} from "obsidian";
+import LogPaneComponent from "./LogPane.svelte";
+import type ObsidianLiveSyncPlugin from "../main.ts";
+export const VIEW_TYPE_LOG = "log-log";
+//Log view
+export class LogPaneView extends ItemView {
+
+    component: LogPaneComponent;
+    plugin: ObsidianLiveSyncPlugin;
+    icon: "view-log";
+    title: string;
+    navigation: true;
+
+    getIcon(): string {
+        return "view-log";
+    }
+
+    constructor(leaf: WorkspaceLeaf, plugin: ObsidianLiveSyncPlugin) {
+        super(leaf);
+        this.plugin = plugin;
+    }
+
+
+    getViewType() {
+        return VIEW_TYPE_LOG;
+    }
+
+    getDisplayText() {
+        return "Self-hosted LiveSync Log";
+    }
+
+    // eslint-disable-next-line require-await
+    async onOpen() {
+        this.component = new LogPaneComponent({
+            target: this.contentEl,
+            props: {
+            },
+        });
+    }
+
+    // eslint-disable-next-line require-await
+    async onClose() {
+        this.component.$destroy();
+    }
+}

src/ui/PluginPane.svelte

@@ -0,0 +1,470 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import ObsidianLiveSyncPlugin from "../main";
+    import { type PluginDataExDisplay, pluginIsEnumerating, pluginList } from "../features/CmdConfigSync";
+    import PluginCombo from "./components/PluginCombo.svelte";
+    import { Menu } from "obsidian";
+    import { unique } from "../lib/src/common/utils";
+    import { MODE_SELECTIVE, MODE_AUTOMATIC, MODE_PAUSED, type SYNC_MODE, type PluginSyncSettingEntry } from "../lib/src/common/types";
+    import { normalizePath } from "../deps";
+    export let plugin: ObsidianLiveSyncPlugin;
+
+    $: hideNotApplicable = false;
+    $: thisTerm = plugin.deviceAndVaultName;
+
+    const addOn = plugin.addOnConfigSync;
+
+    let list: PluginDataExDisplay[] = [];
+
+    let selectNewestPulse = 0;
+    let hideEven = false;
+    let loading = false;
+    let applyAllPluse = 0;
+    let isMaintenanceMode = false;
+    async function requestUpdate() {
+        await addOn.updatePluginList(true);
+    }
+    async function requestReload() {
+        await addOn.reloadPluginList(true);
+    }
+    let allTerms = [] as string[];
+    pluginList.subscribe((e) => {
+        list = e;
+        allTerms = unique(list.map((e) => e.term));
+    });
+    pluginIsEnumerating.subscribe((e) => {
+        loading = e;
+    });
+    onMount(async () => {
+        requestUpdate();
+    });
+
+    function filterList(list: PluginDataExDisplay[], categories: string[]) {
+        const w = list.filter((e) => categories.indexOf(e.category) !== -1);
+        return w.sort((a, b) => `${a.category}-${a.name}`.localeCompare(`${b.category}-${b.name}`));
+    }
+
+    function groupBy(items: PluginDataExDisplay[], key: string) {
+        let ret = {} as Record<string, PluginDataExDisplay[]>;
+        for (const v of items) {
+            //@ts-ignore
+            const k = (key in v ? v[key] : "") as string;
+            ret[k] = ret[k] || [];
+            ret[k].push(v);
+        }
+        for (const k in ret) {
+            ret[k] = ret[k].sort((a, b) => `${a.category}-${a.name}`.localeCompare(`${b.category}-${b.name}`));
+        }
+        const w = Object.entries(ret);
+        return w.sort(([a], [b]) => `${a}`.localeCompare(`${b}`));
+    }
+
+    const displays = {
+        CONFIG: "Configuration",
+        THEME: "Themes",
+        SNIPPET: "Snippets",
+    };
+    async function scanAgain() {
+        await addOn.scanAllConfigFiles(true);
+        await requestUpdate();
+    }
+    async function replicate() {
+        await plugin.replicate(true);
+    }
+    function selectAllNewest() {
+        selectNewestPulse++;
+    }
+    function applyAll() {
+        applyAllPluse++;
+    }
+    async function applyData(data: PluginDataExDisplay): Promise<boolean> {
+        return await addOn.applyData(data);
+    }
+    async function compareData(docA: PluginDataExDisplay, docB: PluginDataExDisplay): Promise<boolean> {
+        return await addOn.compareUsingDisplayData(docA, docB);
+    }
+    async function deleteData(data: PluginDataExDisplay): Promise<boolean> {
+        return await addOn.deleteData(data);
+    }
+    function askMode(evt: MouseEvent, title: string, key: string) {
+        const menu = new Menu();
+        menu.addItem((item) => item.setTitle(title).setIsLabel(true));
+        menu.addSeparator();
+        const prevMode = automaticList.get(key) ?? MODE_SELECTIVE;
+        for (const mode of [MODE_SELECTIVE, MODE_AUTOMATIC, MODE_PAUSED]) {
+            menu.addItem((item) => {
+                item.setTitle(`${getIcon(mode as SYNC_MODE)}:${TITLES[mode]}`)
+                    .onClick((e) => {
+                        if (mode === MODE_AUTOMATIC) {
+                            askOverwriteModeForAutomatic(evt, key);
+                        } else {
+                            setMode(key, mode as SYNC_MODE);
+                        }
+                    })
+                    .setChecked(prevMode == mode)
+                    .setDisabled(prevMode == mode);
+            });
+        }
+        menu.showAtMouseEvent(evt);
+    }
+    function applyAutomaticSync(key: string, direction: "pushForce" | "pullForce" | "safe") {
+        setMode(key, MODE_AUTOMATIC);
+        const configDir = normalizePath(plugin.app.vault.configDir);
+        const files = (plugin.settings.pluginSyncExtendedSetting[key]?.files ?? []).map((e) => `${configDir}/${e}`);
+        plugin.addOnHiddenFileSync.syncInternalFilesAndDatabase(direction, true, false, files);
+    }
+    function askOverwriteModeForAutomatic(evt: MouseEvent, key: string) {
+        const menu = new Menu();
+        menu.addItem((item) => item.setTitle("Initial Action").setIsLabel(true));
+        menu.addSeparator();
+        menu.addItem((item) => {
+            item.setTitle(`↑: Overwrite Remote`).onClick((e) => {
+                applyAutomaticSync(key, "pushForce");
+            });
+        })
+            .addItem((item) => {
+                item.setTitle(`↓: Overwrite Local`).onClick((e) => {
+                    applyAutomaticSync(key, "pullForce");
+                });
+            })
+            .addItem((item) => {
+                item.setTitle(`⇅: Use newer`).onClick((e) => {
+                    applyAutomaticSync(key, "safe");
+                });
+            });
+        menu.showAtMouseEvent(evt);
+    }
+
+    $: options = {
+        thisTerm,
+        hideNotApplicable,
+        selectNewest: selectNewestPulse,
+        applyAllPluse,
+        applyData,
+        compareData,
+        deleteData,
+        plugin,
+        isMaintenanceMode,
+    };
+
+    const ICON_EMOJI_PAUSED = `⛔`;
+    const ICON_EMOJI_AUTOMATIC = `✨`;
+    const ICON_EMOJI_SELECTIVE = `🔀`;
+
+    const ICONS: { [key: number]: string } = {
+        [MODE_SELECTIVE]: ICON_EMOJI_SELECTIVE,
+        [MODE_PAUSED]: ICON_EMOJI_PAUSED,
+        [MODE_AUTOMATIC]: ICON_EMOJI_AUTOMATIC,
+    };
+    const TITLES: { [key: number]: string } = {
+        [MODE_SELECTIVE]: "Selective",
+        [MODE_PAUSED]: "Ignore",
+        [MODE_AUTOMATIC]: "Automatic",
+    };
+    const PREFIX_PLUGIN_ALL = "PLUGIN_ALL";
+    const PREFIX_PLUGIN_DATA = "PLUGIN_DATA";
+    const PREFIX_PLUGIN_MAIN = "PLUGIN_MAIN";
+    function setMode(key: string, mode: SYNC_MODE) {
+        if (key.startsWith(PREFIX_PLUGIN_ALL + "/")) {
+            setMode(PREFIX_PLUGIN_DATA + key.substring(PREFIX_PLUGIN_ALL.length), mode);
+            setMode(PREFIX_PLUGIN_MAIN + key.substring(PREFIX_PLUGIN_ALL.length), mode);
+        }
+        const files = unique(
+            list
+                .filter((e) => `${e.category}/${e.name}` == key)
+                .map((e) => e.files)
+                .flat()
+                .map((e) => e.filename),
+        );
+        automaticList.set(key, mode);
+        automaticListDisp = automaticList;
+        if (!(key in plugin.settings.pluginSyncExtendedSetting)) {
+            plugin.settings.pluginSyncExtendedSetting[key] = {
+                key,
+                mode,
+                files: [],
+            };
+        }
+        plugin.settings.pluginSyncExtendedSetting[key].files = files;
+        plugin.settings.pluginSyncExtendedSetting[key].mode = mode;
+        plugin.saveSettingData();
+    }
+    function getIcon(mode: SYNC_MODE) {
+        if (mode in ICONS) {
+            return ICONS[mode];
+        } else {
+            ("");
+        }
+    }
+    let automaticList = new Map<string, SYNC_MODE>();
+    let automaticListDisp = new Map<string, SYNC_MODE>();
+
+    // apply current configuration to the dialogue
+    for (const { key, mode } of Object.values(plugin.settings.pluginSyncExtendedSetting)) {
+        automaticList.set(key, mode);
+    }
+
+    automaticListDisp = automaticList;
+
+    let displayKeys: Record<string, string[]> = {};
+
+    $: {
+        const extraKeys = Object.keys(plugin.settings.pluginSyncExtendedSetting);
+        displayKeys = [
+            ...list,
+            ...extraKeys
+                .map((e) => `${e}///`.split("/"))
+                .filter((e) => e[0] && e[1])
+                .map((e) => ({ category: e[0], name: e[1], displayName: e[1] })),
+        ]
+            .sort((a, b) => (a.displayName ?? a.name).localeCompare(b.displayName ?? b.name))
+            .reduce((p, c) => ({ ...p, [c.category]: unique(c.category in p ? [...p[c.category], c.displayName ?? c.name] : [c.displayName ?? c.name]) }), {} as Record<string, string[]>);
+    }
+
+    let deleteTerm = "";
+
+    async function deleteAllItems(term: string) {
+        const deleteItems = list.filter((e) => e.term == term);
+        for (const item of deleteItems) {
+            await deleteData(item);
+        }
+        addOn.reloadPluginList(true);
+    }
+</script>
+
+<div>
+    <div>
+        <div class="buttons">
+            <button on:click={() => scanAgain()}>Scan changes</button>
+            <button on:click={() => replicate()}>Sync once</button>
+            <button on:click={() => requestUpdate()}>Refresh</button>
+            {#if isMaintenanceMode}
+                <button on:click={() => requestReload()}>Reload</button>
+            {/if}
+            <button on:click={() => selectAllNewest()}>Select All Shiny</button>
+        </div>
+        <div class="buttons">
+            <button on:click={() => applyAll()}>Apply All</button>
+        </div>
+    </div>
+    {#if loading}
+        <div>
+            <span>Updating list...</span>
+        </div>
+    {/if}
+    <div class="list">
+        {#if list.length == 0}
+            <div class="center">No Items.</div>
+        {:else}
+            {#each Object.entries(displays).filter(([key, _]) => key in displayKeys) as [key, label]}
+                <div>
+                    <h3>{label}</h3>
+                    {#each displayKeys[key] as name}
+                        {@const bindKey = `${key}/${name}`}
+                        {@const mode = automaticListDisp.get(bindKey) ?? MODE_SELECTIVE}
+                        <div class="labelrow {hideEven ? 'hideeven' : ''}">
+                            <div class="title">
+                                <button class="status" on:click={(evt) => askMode(evt, `${key}/${name}`, bindKey)}>
+                                    {getIcon(mode)}
+                                </button>
+                                <span class="name">{name}</span>
+                            </div>
+                            {#if mode == MODE_SELECTIVE}
+                                <PluginCombo {...options} list={list.filter((e) => e.category == key && e.name == name)} hidden={false} />
+                            {:else}
+                                <div class="statusnote">{TITLES[mode]}</div>
+                            {/if}
+                        </div>
+                    {/each}
+                </div>
+            {/each}
+            <div>
+                <h3>Plugins</h3>
+                {#each groupBy(filterList(list, ["PLUGIN_MAIN", "PLUGIN_DATA", "PLUGIN_ETC"]), "name") as [name, listX]}
+                    {@const bindKeyAll = `${PREFIX_PLUGIN_ALL}/${name}`}
+                    {@const modeAll = automaticListDisp.get(bindKeyAll) ?? MODE_SELECTIVE}
+                    {@const bindKeyMain = `${PREFIX_PLUGIN_MAIN}/${name}`}
+                    {@const modeMain = automaticListDisp.get(bindKeyMain) ?? MODE_SELECTIVE}
+                    {@const bindKeyData = `${PREFIX_PLUGIN_DATA}/${name}`}
+                    {@const modeData = automaticListDisp.get(bindKeyData) ?? MODE_SELECTIVE}
+                    <div class="labelrow {hideEven ? 'hideeven' : ''}">
+                        <div class="title">
+                            <button class="status" on:click={(evt) => askMode(evt, `${PREFIX_PLUGIN_ALL}/${name}`, bindKeyAll)}>
+                                {getIcon(modeAll)}
+                            </button>
+                            <span class="name">{name}</span>
+                        </div>
+                        {#if modeAll == MODE_SELECTIVE}
+                            <PluginCombo {...options} list={listX} hidden={true} />
+                        {/if}
+                    </div>
+                    {#if modeAll == MODE_SELECTIVE}
+                        <div class="filerow {hideEven ? 'hideeven' : ''}">
+                            <div class="filetitle">
+                                <button class="status" on:click={(evt) => askMode(evt, `${PREFIX_PLUGIN_MAIN}/${name}/MAIN`, bindKeyMain)}>
+                                    {getIcon(modeMain)}
+                                </button>
+                                <span class="name">MAIN</span>
+                            </div>
+                            {#if modeMain == MODE_SELECTIVE}
+                                <PluginCombo {...options} list={filterList(listX, ["PLUGIN_MAIN"])} hidden={false} />
+                            {:else}
+                                <div class="statusnote">{TITLES[modeMain]}</div>
+                            {/if}
+                        </div>
+                        <div class="filerow {hideEven ? 'hideeven' : ''}">
+                            <div class="filetitle">
+                                <button class="status" on:click={(evt) => askMode(evt, `${PREFIX_PLUGIN_DATA}/${name}`, bindKeyData)}>
+                                    {getIcon(modeData)}
+                                </button>
+                                <span class="name">DATA</span>
+                            </div>
+                            {#if modeData == MODE_SELECTIVE}
+                                <PluginCombo {...options} list={filterList(listX, ["PLUGIN_DATA"])} hidden={false} />
+                            {:else}
+                                <div class="statusnote">{TITLES[modeData]}</div>
+                            {/if}
+                        </div>
+                    {:else}
+                        <div class="noterow">
+                            <div class="statusnote">{TITLES[modeAll]}</div>
+                        </div>
+                    {/if}
+                {/each}
+            </div>
+        {/if}
+    </div>
+    {#if isMaintenanceMode}
+        <div class="list">
+            <div>
+                <h3>Maintenance Commands</h3>
+                <div class="maintenancerow">
+                    <label for="">Delete All of </label>
+                    <select bind:value={deleteTerm}>
+                        {#each allTerms as term}
+                            <option value={term}>{term}</option>
+                        {/each}
+                    </select>
+                    <button
+                        class="status"
+                        on:click={(evt) => {
+                            deleteAllItems(deleteTerm);
+                        }}
+                    >
+                        🗑️
+                    </button>
+                </div>
+            </div>
+        </div>
+    {/if}
+    <div class="buttons">
+        <label><span>Hide not applicable items</span><input type="checkbox" bind:checked={hideEven} /></label>
+    </div>
+    <div class="buttons">
+        <label><span>Maintenance mode</span><input type="checkbox" bind:checked={isMaintenanceMode} /></label>
+    </div>
+</div>
+
+<style>
+    span.spacer {
+        min-width: 1px;
+        flex-grow: 1;
+    }
+    h3 {
+        position: sticky;
+        top: 0;
+        background-color: var(--modal-background);
+    }
+    .labelrow {
+        margin-left: 0.4em;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        border-top: 1px solid var(--background-modifier-border);
+        padding: 4px;
+        flex-wrap: wrap;
+    }
+    .filerow {
+        margin-left: 1.25em;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        padding-right: 4px;
+        flex-wrap: wrap;
+    }
+    .filerow.hideeven:has(.even),
+    .labelrow.hideeven:has(.even) {
+        display: none;
+    }
+    .noterow {
+        min-height: 2em;
+        display: flex;
+    }
+    button.status {
+        flex-grow: 0;
+        margin: 2px 4px;
+        min-width: 3em;
+        max-width: 4em;
+    }
+    .statusnote {
+        display: flex;
+        justify-content: flex-end;
+        padding-right: var(--size-4-12);
+        align-items: center;
+        min-width: 10em;
+        flex-grow: 1;
+    }
+
+    .title {
+        color: var(--text-normal);
+        font-size: var(--font-ui-medium);
+        line-height: var(--line-height-tight);
+        margin-right: auto;
+    }
+    .filetitle {
+        color: var(--text-normal);
+        font-size: var(--font-ui-medium);
+        line-height: var(--line-height-tight);
+        margin-right: auto;
+    }
+    .buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        margin-top: 8px;
+        flex-wrap: wrap;
+    }
+    .buttons > button {
+        margin-left: 4px;
+        width: auto;
+    }
+
+    label {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    label > span {
+        margin-right: 0.25em;
+    }
+    :global(.is-mobile) .title,
+    :global(.is-mobile) .filetitle {
+        width: 100%;
+    }
+
+    .center {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 3em;
+    }
+    .maintenancerow {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+    .maintenancerow label {
+        margin-right: 0.5em;
+        margin-left: 0.5em;
+    }
+</style>

src/ui/components/MultipleRegExpControl.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    export let patterns = [] as string[];
+    export let originals = [] as string[];
+
+    export let apply: (args: string[]) => Promise<void> = (_: string[]) => Promise.resolve();
+    function revert() {
+        patterns = [...originals];
+    }
+    const CHECK_OK = "✔";
+    const CHECK_NG = "⚠";
+    const MARK_MODIFIED = "✏ ";
+    function checkRegExp(pattern: string) {
+        if (pattern.trim() == "") return "";
+        try {
+            const _ = new RegExp(pattern);
+            return CHECK_OK;
+        } catch (ex) {
+            return CHECK_NG;
+        }
+    }
+    $: status = patterns.map((e) => checkRegExp(e));
+    $: modified = patterns.map((e, i) => (e != originals?.[i] ?? "" ? MARK_MODIFIED : ""));
+
+    function remove(idx: number) {
+        patterns[idx] = "";
+    }
+    function add() {
+        patterns = [...patterns, ""];
+    }
+</script>
+
+<ul>
+    {#each patterns as pattern, idx}
+        <li><label>{modified[idx]}{status[idx]}</label><input type="text" bind:value={pattern} class={modified[idx]} /><button class="iconbutton" on:click={() => remove(idx)}>🗑</button></li>
+    {/each}
+    <li>
+        <label><button on:click={() => add()}>Add</button></label>
+    </li>
+    <li class="buttons">
+        <button on:click={() => apply(patterns)} disabled={status.some((e) => e == CHECK_NG) || modified.every((e) => e == "")}>Apply</button>
+        <button on:click={() => revert()} disabled={status.some((e) => e == CHECK_NG) || modified.every((e) => e == "")}>Revert</button>
+    </li>
+</ul>
+
+<style>
+    label {
+        min-width: 4em;
+        width: 4em;
+        display: inline-flex;
+        flex-direction: row;
+        justify-content: flex-end;
+    }
+    ul {
+        flex-grow: 1;
+        display: inline-flex;
+        flex-direction: column;
+        list-style-type: none;
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: 0px;
+        margin-inline-end: 0px;
+        padding-inline-start: 0;
+    }
+    li {
+        padding: var(--size-2-1) var(--size-4-1);
+        display: inline-flex;
+        flex-grow: 1;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--size-4-2);
+    }
+    li input {
+        min-width: 10em;
+    }
+    li.buttons {
+    }
+    button.iconbutton {
+        max-width: 4em;
+    }
+    span.spacer {
+        flex-grow: 1;
+    }
+</style>

src/ui/components/PluginCombo.svelte

@@ -0,0 +1,318 @@
+<script lang="ts">
+    import type { PluginDataExDisplay } from "../../features/CmdConfigSync";
+    import { Logger } from "../../lib/src/common/logger";
+    import { versionNumberString2Number } from "../../lib/src/string_and_binary/strbin";
+    import { type FilePath, LOG_LEVEL_NOTICE } from "../../lib/src/common/types";
+    import { getDocData } from "../../lib/src/common/utils";
+    import type ObsidianLiveSyncPlugin from "../../main";
+    import { askString, scheduleTask } from "../../common/utils";
+
+    export let list: PluginDataExDisplay[] = [];
+    export let thisTerm = "";
+    export let hideNotApplicable = false;
+    export let selectNewest = 0;
+    export let applyAllPluse = 0;
+
+    export let applyData: (data: PluginDataExDisplay) => Promise<boolean>;
+    export let compareData: (dataA: PluginDataExDisplay, dataB: PluginDataExDisplay) => Promise<boolean>;
+    export let deleteData: (data: PluginDataExDisplay) => Promise<boolean>;
+    export let hidden: boolean;
+    export let plugin: ObsidianLiveSyncPlugin;
+    export let isMaintenanceMode: boolean = false;
+    const addOn = plugin.addOnConfigSync;
+
+    let selected = "";
+    let freshness = "";
+    let equivalency = "";
+    let version = "";
+    let canApply: boolean = false;
+    let canCompare: boolean = false;
+    let currentSelectNewest = 0;
+    let currentApplyAll = 0;
+
+    // Selectable terminals
+    let terms = [] as string[];
+
+    async function comparePlugin(local: PluginDataExDisplay, remote: PluginDataExDisplay) {
+        let freshness = "";
+        let equivalency = "";
+        let version = "";
+        let contentCheck = false;
+        let canApply: boolean = false;
+        let canCompare = false;
+        if (!local && !remote) {
+            // NO OP. whats happened?
+            freshness = "";
+        } else if (local && !remote) {
+            freshness = "⚠ Local only";
+        } else if (remote && !local) {
+            freshness = "✓ Remote only";
+            canApply = true;
+        } else {
+            const dtDiff = (local?.mtime ?? 0) - (remote?.mtime ?? 0);
+            if (dtDiff / 1000 < -10) {
+                freshness = "✓ Newer";
+                canApply = true;
+                contentCheck = true;
+            } else if (dtDiff / 1000 > 10) {
+                freshness = "⚠ Older";
+                canApply = true;
+                contentCheck = true;
+            } else {
+                freshness = "⚖️ Same old";
+                canApply = false;
+                contentCheck = true;
+            }
+        }
+        const localVersionStr = local?.version || "0.0.0";
+        const remoteVersionStr = remote?.version || "0.0.0";
+        if (local?.version || remote?.version) {
+            const localVersion = versionNumberString2Number(localVersionStr);
+            const remoteVersion = versionNumberString2Number(remoteVersionStr);
+            if (localVersion == remoteVersion) {
+                version = "⚖️ Same ver.";
+            } else if (localVersion > remoteVersion) {
+                version = `⚠ Lower ${localVersionStr} > ${remoteVersionStr}`;
+            } else if (localVersion < remoteVersion) {
+                version = `✓ Higher ${localVersionStr} < ${remoteVersionStr}`;
+            }
+        }
+
+        if (contentCheck) {
+            const { canApply, equivalency, canCompare } = await checkEquivalency(local, remote);
+            return { canApply, freshness, equivalency, version, canCompare };
+        }
+        return { canApply, freshness, equivalency, version, canCompare };
+    }
+
+    async function checkEquivalency(local: PluginDataExDisplay, remote: PluginDataExDisplay) {
+        let equivalency = "";
+        let canApply = false;
+        let canCompare = false;
+        const filenames = [...new Set([...local.files.map((e) => e.filename), ...remote.files.map((e) => e.filename)])];
+        const matchingStatus = filenames
+            .map((filename) => {
+                const localFile = local.files.find((e) => e.filename == filename);
+                const remoteFile = remote.files.find((e) => e.filename == filename);
+                if (!localFile && !remoteFile) {
+                    return 0b0000000;
+                } else if (localFile && !remoteFile) {
+                    return 0b0000010; //"LOCAL_ONLY";
+                } else if (!localFile && remoteFile) {
+                    return 0b0001000; //"REMOTE ONLY"
+                } else {
+                    if (getDocData(localFile.data) == getDocData(remoteFile.data)) {
+                        return 0b0000100; //"EVEN"
+                    } else {
+                        return 0b0010000; //"DIFFERENT";
+                    }
+                }
+            })
+            .reduce((p, c) => p | (c as number), 0 as number);
+        if (matchingStatus == 0b0000100) {
+            equivalency = "⚖️ Same";
+            canApply = false;
+        } else if (matchingStatus <= 0b0000100) {
+            equivalency = "Same or local only";
+            canApply = false;
+        } else if (matchingStatus == 0b0010000) {
+            canApply = true;
+            canCompare = true;
+            equivalency = "≠ Different";
+        } else {
+            canApply = true;
+            canCompare = true;
+            equivalency = "≠ Different";
+        }
+        return { equivalency, canApply, canCompare };
+    }
+
+    async function performCompare(local: PluginDataExDisplay, remote: PluginDataExDisplay) {
+        const result = await comparePlugin(local, remote);
+        canApply = result.canApply;
+        freshness = result.freshness;
+        equivalency = result.equivalency;
+        version = result.version;
+        canCompare = result.canCompare;
+        if (local?.files.length != 1 || !local?.files?.first()?.filename?.endsWith(".json")) {
+            canCompare = false;
+        }
+    }
+
+    async function updateTerms(list: PluginDataExDisplay[], selectNewest: boolean, isMaintenanceMode: boolean) {
+        const local = list.find((e) => e.term == thisTerm);
+        selected = "";
+        if (isMaintenanceMode) {
+            terms = [...new Set(list.map((e) => e.term))];
+        } else if (hideNotApplicable) {
+            const termsTmp = [];
+            const wk = [...new Set(list.map((e) => e.term))];
+            for (const termName of wk) {
+                const remote = list.find((e) => e.term == termName);
+                if ((await comparePlugin(local, remote)).canApply) {
+                    termsTmp.push(termName);
+                }
+            }
+            terms = [...termsTmp];
+        } else {
+            terms = [...new Set(list.map((e) => e.term))].filter((e) => e != thisTerm);
+        }
+        let newest: PluginDataExDisplay = local;
+        if (selectNewest) {
+            for (const term of terms) {
+                const remote = list.find((e) => e.term == term);
+                if (remote && remote.mtime && (newest?.mtime || 0) < remote.mtime) {
+                    newest = remote;
+                }
+            }
+            if (newest && newest.term != thisTerm) {
+                selected = newest.term;
+            }
+            // selectNewest = false;
+        }
+    }
+    $: {
+        // React pulse and select
+        const doSelectNewest = selectNewest != currentSelectNewest;
+        currentSelectNewest = selectNewest;
+        updateTerms(list, doSelectNewest, isMaintenanceMode);
+    }
+    $: {
+        // React pulse and apply
+        const doApply = applyAllPluse != currentApplyAll;
+        currentApplyAll = applyAllPluse;
+        if (doApply && selected) {
+            if (!hidden) {
+                applySelected();
+            }
+        }
+    }
+    $: {
+        freshness = "";
+        equivalency = "";
+        version = "";
+        canApply = false;
+        if (selected == "") {
+            // NO OP.
+        } else if (selected == thisTerm) {
+            freshness = "This device";
+            canApply = false;
+        } else {
+            const local = list.find((e) => e.term == thisTerm);
+            const remote = list.find((e) => e.term == selected);
+            performCompare(local, remote);
+        }
+    }
+    async function applySelected() {
+        const local = list.find((e) => e.term == thisTerm);
+        const selectedItem = list.find((e) => e.term == selected);
+        if (selectedItem && (await applyData(selectedItem))) {
+            addOn.updatePluginList(true, local?.documentPath);
+        }
+    }
+    async function compareSelected() {
+        const local = list.find((e) => e.term == thisTerm);
+        const selectedItem = list.find((e) => e.term == selected);
+        if (local && selectedItem && (await compareData(local, selectedItem))) {
+            addOn.updatePluginList(true, local.documentPath);
+        }
+    }
+    async function deleteSelected() {
+        const selectedItem = list.find((e) => e.term == selected);
+        // const deletedPath = selectedItem.documentPath;
+        if (selectedItem && (await deleteData(selectedItem))) {
+            addOn.reloadPluginList(true);
+        }
+    }
+    async function duplicateItem() {
+        const local = list.find((e) => e.term == thisTerm);
+        const duplicateTermName = await askString(plugin.app, "Duplicate", "device name", "");
+        if (duplicateTermName) {
+            if (duplicateTermName.contains("/")) {
+                Logger(`We can not use "/" to the device name`, LOG_LEVEL_NOTICE);
+                return;
+            }
+            const key = `${plugin.app.vault.configDir}/${local.files[0].filename}`;
+            await addOn.storeCustomizationFiles(key as FilePath, duplicateTermName);
+            await addOn.updatePluginList(false, addOn.filenameToUnifiedKey(key, duplicateTermName));
+        }
+    }
+</script>
+
+{#if terms.length > 0}
+    <span class="spacer" />
+    {#if !hidden}
+        <span class="messages">
+            <span class="message">{freshness}</span>
+            <span class="message">{equivalency}</span>
+            <span class="message">{version}</span>
+        </span>
+        <select bind:value={selected}>
+            <option value={""}>-</option>
+            {#each terms as term}
+                <option value={term}>{term}</option>
+            {/each}
+        </select>
+        {#if canApply || (isMaintenanceMode && selected != "")}
+            {#if canCompare}
+                <button on:click={compareSelected}>🔍</button>
+            {:else}
+                <button disabled />
+            {/if}
+            <button on:click={applySelected}>✓</button>
+        {:else}
+            <button disabled />
+            <button disabled />
+        {/if}
+        {#if isMaintenanceMode}
+            {#if selected != ""}
+                <button on:click={deleteSelected}>🗑️</button>
+            {:else}
+                <button on:click={duplicateItem}>📑</button>
+            {/if}
+        {/if}
+    {/if}
+{:else}
+    <span class="spacer" />
+    <span class="message even">All the same or non-existent</span>
+    <button disabled />
+    <button disabled />
+{/if}
+
+<style>
+    .spacer {
+        min-width: 1px;
+        flex-grow: 1;
+    }
+    button {
+        margin: 2px 4px;
+        min-width: 3em;
+        max-width: 4em;
+    }
+    button:disabled {
+        border: none;
+        box-shadow: none;
+        background-color: transparent;
+        visibility: collapse;
+    }
+    button:disabled:hover {
+        border: none;
+        box-shadow: none;
+        background-color: transparent;
+        visibility: collapse;
+    }
+    span.message {
+        color: var(--text-muted);
+        font-size: var(--font-ui-smaller);
+        padding: 0 1em;
+        line-height: var(--line-height-tight);
+    }
+    span.messages {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    :global(.is-mobile) .spacer {
+        margin-left: auto;
+    }
+</style>