Fixed: fixed P2P bugs and and implement new UI

src/features/P2PSync/P2PReplicator/P2PServerStatusPaneView.ts

@@ -0,0 +1,42 @@
+import { WorkspaceLeaf } from "@/deps.ts";
+import { mount } from "svelte";
+import { SvelteItemView } from "@/common/SvelteItemView.ts";
+import type { LiveSyncBaseCore } from "@/LiveSyncBaseCore.ts";
+import type { P2PPaneParams } from "@/lib/src/replication/trystero/UseP2PReplicatorResult";
+import P2PServerStatusPane from "./P2PServerStatusPane.svelte";
+
+export const VIEW_TYPE_P2P_SERVER_STATUS = "p2p-server-status";
+
+export class P2PServerStatusPaneView extends SvelteItemView {
+    core: LiveSyncBaseCore;
+    private _p2pResult: P2PPaneParams;
+    override icon = "waypoints";
+    override navigation = false;
+
+    constructor(leaf: WorkspaceLeaf, core: LiveSyncBaseCore, p2pResult: P2PPaneParams) {
+        super(leaf);
+        this.core = core;
+        this._p2pResult = p2pResult;
+    }
+
+    override getIcon(): string {
+        return "waypoints";
+    }
+
+    getViewType() {
+        return VIEW_TYPE_P2P_SERVER_STATUS;
+    }
+
+    getDisplayText() {
+        return "P2P Server Status";
+    }
+
+    instantiateComponent(target: HTMLElement) {
+        return mount(P2PServerStatusPane, {
+            target,
+            props: {
+                liveSyncReplicator: this._p2pResult.replicator,
+            },
+        });
+    }
+}