### Fixed

- P2P Replication got more robust and stable.

### Breaking changes

- Send configuration via Peer-to-Peer connection is not compatible with older versions.

src/modules/features/SettingDialogue/InfoPanel.svelte

@@ -4,77 +4,12 @@
      * Mostly used in the Setting Dialogue
      */
     import { type SveltePanelProps } from "./SveltePanel";
+    import InfoTable from "@lib/ui/components/InfoTable.svelte";
     type Props = SveltePanelProps<{
         info: Record<string, any>;
     }>;
     const { port }: Props = $props();
     const info = $derived.by(() => $port?.info ?? {});
-    const infoEntries = $derived(Object.entries(info ?? {}));
 </script>
 
-<div class="info-panel">
-    <div class="info-grid" role="list">
-        {#each infoEntries as [key, value]}
-            <div class="info-entry info-key" role="listitem" aria-label={key}>
-                <div class="key">{key}</div>
-            </div>
-            <div class="info-entry info-item" role="listitem" aria-label={key}>
-                <div class="value">{value}</div>
-            </div>
-        {/each}
-    </div>
-</div>
-
-<style>
-    .info-panel {
-        padding: 0.6rem;
-        flex-grow: 1;
-    }
-
-    /* Main Grid (Info Items) 220px to 1fr, repeat */
-    .info-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-        gap: 0.6rem;
-        margin-top: 0.5rem;
-    }
-    .info-entry {
-        display: grid;
-        grid-template-columns: auto 1fr;
-        gap: 0.5rem;
-        border-radius: 6px;
-        box-sizing: border-box;
-        min-height: 1.2em;
-    }
-
-    .info-key {
-        font-weight: 600;
-        align-items: center;
-        border-top: 1px solid var(--background-modifier-hover);
-        border-bottom: 1px solid var(--background-modifier-hover);
-        /* color: var(--text-muted, #6b6b6b); */
-    }
-    .info-item {
-        align-items: start;
-        padding: 0.5rem;
-        background: var(--background-modifier-hover, rgba(0, 0, 0, 0.03));
-    }
-
-    .value {
-        white-space: pre-wrap;
-        word-break: break-word;
-        color: var(--text-normal, #e6e6e6);
-        min-height: 1em;
-    }
-
-    @media (max-width: 420px) {
-        .info-item {
-            grid-template-columns: 1fr;
-        }
-        /* .label {
-            order: -1;
-            white-space: normal;
-            padding-bottom: 0.25rem;
-        } */
-    }
-</style>
+<InfoTable {info} />

src/modules/features/SettingDialogue/PaneRemoteConfig.ts

@@ -8,7 +8,7 @@ import { $msg } from "../../../lib/src/common/i18n.ts";
 import { LiveSyncSetting as Setting } from "./LiveSyncSetting.ts";
 import type { ObsidianLiveSyncSettingTab } from "./ObsidianLiveSyncSettingTab.ts";
 import type { PageFunctions } from "./SettingPane.ts";
-import { visibleOnly } from "./SettingPane.ts";
+// import { visibleOnly } from "./SettingPane.ts";
 import InfoPanel from "./InfoPanel.svelte";
 import { writable } from "svelte/store";
 import { SveltePanel } from "./SveltePanel.ts";
@@ -19,7 +19,7 @@ import {
     getE2EEConfigSummary,
 } from "./settingUtils.ts";
 import { SETTING_KEY_P2P_DEVICE_NAME } from "../../../lib/src/common/types.ts";
-import { SetupManager, UserMode } from "../ModuleSetupObsidian.ts";
+import { SetupManager, UserMode } from "../SetupManager.ts";
 import { OnDialogSettingsDefault, type AllSettings } from "./settingConstants.ts";
 
 function getSettingsFromEditingSettings(editingSettings: AllSettings): ObsidianLiveSyncSettings {
@@ -30,6 +30,14 @@ function getSettingsFromEditingSettings(editingSettings: AllSettings): ObsidianL
     }
     return workObj;
 }
+const toggleActiveSyncClass = (el: HTMLElement, isActive: () => boolean) => {
+    if (isActive()) {
+        el.addClass("active-pane");
+    } else {
+        el.removeClass("active-pane");
+    }
+    return {};
+};
 
 export function paneRemoteConfig(
     this: ObsidianLiveSyncSettingTab,
@@ -56,39 +64,46 @@ export function paneRemoteConfig(
         void addPanel(paneEl, "E2EE Configuration", () => {}).then((paneEl) => {
             new SveltePanel(InfoPanel, paneEl, E2EESummaryWritable);
             const setupButton = new Setting(paneEl).setName("Configure E2EE");
-            setupButton.addButton((button) =>
-                button
-                    .onClick(async () => {
-                        const setupManager = this.plugin.getModule(SetupManager);
-                        const originalSettings = getSettingsFromEditingSettings(this.editingSettings);
-                        await setupManager.onlyE2EEConfiguration(UserMode.Update, originalSettings);
-                        updateE2EESummary();
-                    })
-                    .setButtonText("Configure")
-                    .setWarning()
-            );
+            setupButton
+                .addButton((button) =>
+                    button
+                        .onClick(async () => {
+                            const setupManager = this.plugin.getModule(SetupManager);
+                            const originalSettings = getSettingsFromEditingSettings(this.editingSettings);
+                            await setupManager.onlyE2EEConfiguration(UserMode.Update, originalSettings);
+                            updateE2EESummary();
+                        })
+                        .setButtonText("Configure")
+                        .setWarning()
+                )
+                .addButton((button) =>
+                    button
+                        .onClick(async () => {
+                            const setupManager = this.plugin.getModule(SetupManager);
+                            const originalSettings = getSettingsFromEditingSettings(this.editingSettings);
+                            await setupManager.onConfigureManually(originalSettings, UserMode.Update);
+                            updateE2EESummary();
+                        })
+                        .setButtonText("Configure And Change Remote")
+                        .setWarning()
+                );
             updateE2EESummary();
         });
     }
     {
-        void addPanel(
-            paneEl,
-            $msg("obsidianLiveSyncSettingTab.titleRemoteServer"),
-            () => {},
-            () => ({ classes: this.editingSettings.remoteType === REMOTE_COUCHDB ? ["active-sync"] : [] })
-        ).then((paneEl) => {
-            const nSetting = new Setting(paneEl).setName("Active Remote Configuration");
+        void addPanel(paneEl, $msg("obsidianLiveSyncSettingTab.titleRemoteServer"), () => {}).then((paneEl) => {
+            const setting = new Setting(paneEl).setName("Active Remote Configuration");
 
-            const el = nSetting.controlEl.createDiv({});
+            const el = setting.controlEl.createDiv({});
             el.setText(`${remoteNameMap[this.editingSettings.remoteType] || " - "}`);
-            nSetting.addButton((button) =>
+            setting.addButton((button) =>
                 button
                     .setButtonText("Change Remote and Setup")
                     .setCta()
                     .onClick(async () => {
                         const setupManager = this.plugin.getModule(SetupManager);
                         const originalSettings = getSettingsFromEditingSettings(this.editingSettings);
-                        await setupManager.selectServer(originalSettings, UserMode.Update);
+                        await setupManager.onSelectServer(originalSettings, UserMode.Update);
                     })
             );
         });
@@ -103,30 +118,29 @@ export function paneRemoteConfig(
                 info: getCouchDBConfigSummary(this.editingSettings),
             });
         };
-        void addPanel(
-            paneEl,
-            $msg("obsidianLiveSyncSettingTab.titleCouchDB"),
-            () => {},
-            () => ({ classes: this.editingSettings.remoteType === REMOTE_COUCHDB ? ["active-sync"] : [] })
-        ).then((paneEl) => {
+        void addPanel(paneEl, $msg("obsidianLiveSyncSettingTab.titleCouchDB"), () => {}).then((paneEl) => {
             new SveltePanel(InfoPanel, paneEl, summaryWritable);
             const setupButton = new Setting(paneEl).setName("Configure Remote");
-            setupButton.addButton((button) =>
-                button
-                    .setButtonText("Configure")
-                    .setCta()
-                    .onClick(async () => {
-                        const setupManager = this.plugin.getModule(SetupManager);
-                        const originalSettings = getSettingsFromEditingSettings(this.editingSettings);
-                        await setupManager.onCouchDBManualSetup(
-                            UserMode.Update,
-                            originalSettings,
-                            this.editingSettings.remoteType === REMOTE_COUCHDB
-                        );
+            setupButton
+                .addButton((button) =>
+                    button
+                        .setButtonText("Configure")
+                        .setCta()
+                        .onClick(async () => {
+                            const setupManager = this.plugin.getModule(SetupManager);
+                            const originalSettings = getSettingsFromEditingSettings(this.editingSettings);
+                            await setupManager.onCouchDBManualSetup(
+                                UserMode.Update,
+                                originalSettings,
+                                this.editingSettings.remoteType === REMOTE_COUCHDB
+                            );
 
-                        updateSummary();
-                    })
-            );
+                            updateSummary();
+                        })
+                )
+                .addOnUpdate(() =>
+                    toggleActiveSyncClass(paneEl, () => this.editingSettings.remoteType === REMOTE_COUCHDB)
+                );
         });
     }
     {
@@ -139,30 +153,29 @@ export function paneRemoteConfig(
                 info: getBucketConfigSummary(this.editingSettings),
             });
         };
-        void addPanel(
-            paneEl,
-            $msg("obsidianLiveSyncSettingTab.titleMinioS3R2"),
-            () => {},
-            () => ({ classes: this.editingSettings.remoteType === REMOTE_MINIO ? ["active-sync"] : [] })
-        ).then((paneEl) => {
+        void addPanel(paneEl, $msg("obsidianLiveSyncSettingTab.titleMinioS3R2"), () => {}).then((paneEl) => {
             new SveltePanel(InfoPanel, paneEl, summaryWritable);
             const setupButton = new Setting(paneEl).setName("Configure Remote");
-            setupButton.addButton((button) =>
-                button
-                    .setButtonText("Configure")
-                    .setCta()
-                    .onClick(async () => {
-                        const setupManager = this.plugin.getModule(SetupManager);
-                        const originalSettings = getSettingsFromEditingSettings(this.editingSettings);
-                        await setupManager.onBucketManualSetup(
-                            UserMode.Update,
-                            originalSettings,
-                            this.editingSettings.remoteType === REMOTE_MINIO
-                        );
-                        //TODO
-                        updateSummary();
-                    })
-            );
+            setupButton
+                .addButton((button) =>
+                    button
+                        .setButtonText("Configure")
+                        .setCta()
+                        .onClick(async () => {
+                            const setupManager = this.plugin.getModule(SetupManager);
+                            const originalSettings = getSettingsFromEditingSettings(this.editingSettings);
+                            await setupManager.onBucketManualSetup(
+                                UserMode.Update,
+                                originalSettings,
+                                this.editingSettings.remoteType === REMOTE_MINIO
+                            );
+                            //TODO
+                            updateSummary();
+                        })
+                )
+                .addOnUpdate(() =>
+                    toggleActiveSyncClass(paneEl, () => this.editingSettings.remoteType === REMOTE_MINIO)
+                );
         });
     }
     {
@@ -180,54 +193,35 @@ export function paneRemoteConfig(
                 }),
             });
         };
-        void addPanel(
-            paneEl,
-            "Peer-to-Peer Synchronisation",
-            () => {},
-            () => ({ classes: this.editingSettings.remoteType === REMOTE_P2P ? ["active-sync"] : [] })
-        ).then((paneEl) => {
+        void addPanel(paneEl, "Peer-to-Peer Synchronisation", () => {}).then((paneEl) => {
             new SveltePanel(InfoPanel, paneEl, summaryWritable);
             const setupButton = new Setting(paneEl).setName("Configure Remote");
-            setupButton.addButton((button) =>
-                button
-                    .setButtonText("Configure")
-                    .setCta()
-                    .onClick(async () => {
-                        const setupManager = this.plugin.getModule(SetupManager);
-                        const originalSettings = getSettingsFromEditingSettings(this.editingSettings);
-                        await setupManager.onP2PManualSetup(
-                            UserMode.Update,
-                            originalSettings,
-                            this.editingSettings.remoteType === REMOTE_P2P
-                        );
-                        //TODO
-                        updateSummary();
-                    })
-            );
+            setupButton
+                .addButton((button) =>
+                    button
+                        .setButtonText("Configure")
+                        .setCta()
+                        .onClick(async () => {
+                            const setupManager = this.plugin.getModule(SetupManager);
+                            const originalSettings = getSettingsFromEditingSettings(this.editingSettings);
+                            await setupManager.onP2PManualSetup(
+                                UserMode.Update,
+                                originalSettings,
+                                this.editingSettings.remoteType === REMOTE_P2P
+                            );
+                            //TODO
+                            updateSummary();
+                        })
+                )
+                .addOnUpdate(() =>
+                    toggleActiveSyncClass(
+                        paneEl,
+                        () => this.editingSettings.remoteType === REMOTE_P2P || this.editingSettings.P2P_Enabled
+                    )
+                );
         });
     }
 
-    void addPanel(paneEl, $msg("obsidianLiveSyncSettingTab.titleActiveRemoteServer")).then((paneEl) => {
-        // const containerRemoteDatabaseEl = containerEl.createDiv();
-        this.createEl(
-            paneEl,
-            "div",
-            {
-                text: $msg("obsidianLiveSyncSettingTab.msgSettingsUnchangeableDuringSync"),
-            },
-            undefined,
-            visibleOnly(() => this.isAnySyncEnabled())
-        ).addClass("op-warn-info");
-
-        new Setting(paneEl)
-            .autoWireDropDown("remoteType", {
-                holdValue: true,
-                options: remoteNameMap,
-                onUpdate: this.enableOnlySyncDisabled,
-            })
-            .addApplyButton(["remoteType"]);
-    });
-
     // new Setting(paneEl)
     //     .setDesc("Generate ES256 Keypair for testing")
     //     .addButton((button) =>

src/modules/features/SettingDialogue/PaneSetup.ts

@@ -13,7 +13,7 @@ import type { PageFunctions } from "./SettingPane.ts";
 import { visibleOnly } from "./SettingPane.ts";
 import { DEFAULT_SETTINGS } from "../../../lib/src/common/types.ts";
 import { request } from "obsidian";
-import { SetupManager, UserMode } from "../ModuleSetupObsidian.ts";
+import { SetupManager, UserMode } from "../SetupManager.ts";
 export function paneSetup(
     this: ObsidianLiveSyncSettingTab,
     paneEl: HTMLElement,
@@ -36,7 +36,7 @@ export function paneSetup(
             .addButton((text) => {
                 text.setButtonText("Rerun Wizard").onClick(async () => {
                     const setupManager = this.plugin.getModule(SetupManager);
-                    await setupManager.onBoard(UserMode.ExistingUser);
+                    await setupManager.onOnboard(UserMode.ExistingUser);
                     // await this.plugin.moduleSetupObsidian.onBoardingWizard(true);
                 });
             });