Improve UI

This commit is contained in:
vorotamoroz
2026-05-16 23:09:11 +09:00
parent d5e2f57781
commit f0628a0d2c
6 changed files with 9 additions and 9 deletions
+2 -2
View File
@@ -6,11 +6,11 @@ Peer-to-Peer (P2P) synchronisation has evolved significantly. This guide covers
P2P synchronisation allows your devices to talk directly to each other using WebRTC. A central server is not required for data storage, ensuring maximum privacy and "freedom." P2P synchronisation allows your devices to talk directly to each other using WebRTC. A central server is not required for data storage, ensuring maximum privacy and "freedom."
## 2. Setting Up via P2P Status Pane ## 2. Setting Up via P2P Status Pane
You no longer need to navigate through complex menus. Simply open the **P2P Server Status** (via the ribbon icon or command palette) and click the **⚙ (Cog)** icon. You no longer need to navigate through complex menus. Simply open the **P2P Status** (via the ribbon icon or command palette) and click the **⚙ (Cog)** icon.
This opens the **P2P Setup** dialogue where you can configure the essentials: This opens the **P2P Setup** dialogue where you can configure the essentials:
- **Room ID:** A unique identifier for your synchronisation group. - **Room ID:** A unique identifier for your synchronisation group.
- **Password:** Your encryption key. Ensure all your devices use the exact same password. - **Passphrase:** Your encryption key. Ensure all your devices use the exact same passphrase.
- **Device Name:** A recognisable name for the current device (e.g., `iphone-16`). - **Device Name:** A recognisable name for the current device (e.g., `iphone-16`).
Once you have saved the settings, return to the **P2P Status Pane** and click the **Connect** button to join the network. Once you have saved the settings, return to the **P2P Status Pane** and click the **Connect** button to join the network.
@@ -21,7 +21,7 @@
let replicatorStatus = $state<P2PReplicatorStatus | undefined>(undefined); let replicatorStatus = $state<P2PReplicatorStatus | undefined>(undefined);
async function requestServerStatus() { async function requestServerStatus() {
await liveSyncReplicator.requestStatus(); await Promise.resolve(liveSyncReplicator.requestStatus());
eventHub.emitEvent(EVENT_REQUEST_STATUS); eventHub.emitEvent(EVENT_REQUEST_STATUS);
} }
@@ -149,7 +149,7 @@
<div class="p2p-container"> <div class="p2p-container">
<div class="pane-header"> <div class="pane-header">
<h2>P2P Host</h2> <h2>P2P Status</h2>
<button <button
class="icon-button" class="icon-button"
onclick={openConnectionSettings} onclick={openConnectionSettings}
@@ -164,7 +164,7 @@
<div class="peers-section"> <div class="peers-section">
<div class="peers-header"> <div class="peers-header">
<h3>Known Devices</h3> <h3>Detected Peers</h3>
<button class="refresh" onclick={requestServerStatus}>Refresh</button> <button class="refresh" onclick={requestServerStatus}>Refresh</button>
</div> </div>
@@ -28,7 +28,7 @@ export class P2PServerStatusPaneView extends SvelteItemView {
} }
getDisplayText() { getDisplayText() {
return "P2P Server Status"; return "P2P Status";
} }
instantiateComponent(target: HTMLElement) { instantiateComponent(target: HTMLElement) {
+1 -1
Submodule src/lib updated: 2868aae6fd...bf060df091
+2 -2
View File
@@ -100,7 +100,7 @@ export function useP2PReplicatorUI(
api.addCommand({ api.addCommand({
id: "open-p2p-server-status", id: "open-p2p-server-status",
name: "P2P Sync : Open P2P Server Status", name: "P2P Sync : Open P2P Status",
callback: () => { callback: () => {
void openStatusPane(); void openStatusPane();
}, },
@@ -110,7 +110,7 @@ export function useP2PReplicatorUI(
// void openPane(); // void openPane();
// })?.addClass?.("livesync-ribbon-replicate-p2p"); // })?.addClass?.("livesync-ribbon-replicate-p2p");
api.addRibbonIcon("waypoints", "P2P Server Status", () => { api.addRibbonIcon("waypoints", "P2P Status", () => {
void openStatusPane(); void openStatusPane();
})?.addClass?.("livesync-ribbon-p2p-server-status"); })?.addClass?.("livesync-ribbon-p2p-server-status");