P2P: Enhance status pane and card with active remote selection and replication features

- Added active P2P remote selector and creation option in the status pane.
- Introduced immediate replication action for accepted peers.
- Updated status control icons for clarity.
- Display stable Room ID suffix above Peer ID in the status card.
- Implemented dedicated active remote configuration for P2P features.
- Added migration support for P2P active remote selection.
- Improved unit test coverage for P2P settings.

src/features/P2PSync/P2PReplicator/P2PServerStatusCard.svelte

@@ -8,17 +8,22 @@
         EVENT_REQUEST_STATUS,
         EVENT_P2P_REPLICATOR_STATUS,
     } from "@lib/replication/trystero/TrysteroReplicatorP2PServer";
+    import { EVENT_SETTING_SAVED } from "@lib/events/coreEvents";
     import type { LiveSyncTrysteroReplicator } from "@/lib/src/replication/trystero/LiveSyncTrysteroReplicator";
     import type { P2PReplicatorStatus } from "@/lib/src/replication/trystero/TrysteroReplicator";
+    import { extractP2PRoomSuffix } from "@/lib/src/common/utils";
+    import type { LiveSyncBaseCore } from "@/LiveSyncBaseCore";
 
     interface Props {
         liveSyncReplicator: LiveSyncTrysteroReplicator;
         showBroadcastToggle?: boolean;
+        core?: LiveSyncBaseCore;
     }
 
-    let { liveSyncReplicator, showBroadcastToggle = true }: Props = $props();
+    let { liveSyncReplicator, showBroadcastToggle = true, core }: Props = $props();
     let serverInfo = $state<P2PServerInfo | undefined>(undefined);
     let replicatorStatus = $state<P2PReplicatorStatus | undefined>(undefined);
+    let roomSuffix = $state<string>(extractP2PRoomSuffix(core?.services.setting.currentSettings()?.P2P_roomID ?? ""));
 
     async function requestServerStatus() {
         await Promise.resolve(liveSyncReplicator.requestStatus());
@@ -46,10 +51,14 @@
     onMount(() => {
         const unsubscribe = eventHub.onEvent(EVENT_SERVER_STATUS, (status) => {
             serverInfo = status;
+            roomSuffix = extractP2PRoomSuffix(status?.roomId ?? "");
         });
         const unsubscribeStatus = eventHub.onEvent(EVENT_P2P_REPLICATOR_STATUS, (status) => {
             replicatorStatus = status;
         });
+        const unsubscribeSettings = eventHub.onEvent(EVENT_SETTING_SAVED, (settings) => {
+            roomSuffix = extractP2PRoomSuffix(settings?.P2P_roomID ?? "");
+        });
 
         fireAndForget(async () => {
             await delay(100);
@@ -59,6 +68,7 @@
         return () => {
             unsubscribe();
             unsubscribeStatus();
+            unsubscribeSettings();
         };
     });
 
@@ -85,6 +95,13 @@
     </div>
 
     {#if serverInfo}
+        <div class="status-item">
+            <span>Room ID suffix:</span>
+            <span class="room-suffix-display" title={roomSuffix || "Not configured"}>
+                {roomSuffix || "-"}
+            </span>
+        </div>
+
         <div class="status-item">
             <span>Peer ID:</span>
             <span class="peer-id-display" title={serverInfo.serverPeerId}>
@@ -162,6 +179,12 @@
         text-overflow: ellipsis;
     }
 
+    .room-suffix-display {
+        font-family: monospace;
+        font-size: 0.85rem;
+        font-weight: 600;
+    }
+
     .broadcast-row {
         align-items: center;
         margin-top: 0.25rem;