Fixed: fixed P2P bugs and and implement new UI

src/features/P2PSync/P2PReplicator/P2POpenReplicationModal.ts

@@ -0,0 +1,69 @@
+import { App, Modal } from "@/deps.ts";
+import P2POpenReplicationPane from "./P2POpenReplicationPane.svelte";
+import { mount, unmount } from "svelte";
+import type { LiveSyncTrysteroReplicator } from "@/lib/src/replication/trystero/LiveSyncTrysteroReplicator";
+
+export type P2POpenReplicationModalCallback = {
+    onSync: (peerId: string) => Promise<void>;
+    onSyncAndClose: (peerId: string) => Promise<void>;
+};
+
+export class P2POpenReplicationModal extends Modal {
+    liveSyncReplicator: LiveSyncTrysteroReplicator;
+    callback?: P2POpenReplicationModalCallback;
+    component?: ReturnType<typeof mount>;
+    showResult: boolean;
+
+    constructor(
+        app: App,
+        liveSyncReplicator: LiveSyncTrysteroReplicator,
+        callback?: P2POpenReplicationModalCallback,
+        showResult: boolean = false
+    ) {
+        super(app);
+        this.liveSyncReplicator = liveSyncReplicator;
+        this.callback = callback;
+        this.showResult = showResult;
+    }
+
+    async onSync(peerId: string) {
+        if (this.callback?.onSync) {
+            await this.callback.onSync(peerId);
+        }
+    }
+
+    async onSyncAndClose(peerId: string) {
+        if (this.callback?.onSyncAndClose) {
+            await this.callback.onSyncAndClose(peerId);
+        }
+        this.close();
+    }
+
+    override onOpen() {
+        const { contentEl } = this;
+        this.titleEl.setText("P2P Replication");
+        contentEl.empty();
+
+        if (this.component === undefined) {
+            this.component = mount(P2POpenReplicationPane, {
+                target: contentEl,
+                props: {
+                    liveSyncReplicator: this.liveSyncReplicator,
+                    onSync: (peerId: string) => this.onSync(peerId),
+                    onSyncAndClose: (peerId: string) => this.onSyncAndClose(peerId),
+                    onClose: () => this.close(),
+                    showResult: this.showResult,
+                },
+            });
+        }
+    }
+
+    override onClose() {
+        const { contentEl } = this;
+        contentEl.empty();
+        if (this.component !== undefined) {
+            void unmount(this.component);
+            this.component = undefined;
+        }
+    }
+}