ssb: Improve peer exchange wording.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&yw1a+Mxb3+vFtzEQijo6Ty0Z+HkBC36XpfZQRlJ2PaQ=.sha256"
+	"previous": "&Gic1e3jOZ7z5131jSCclbFXRpjyu8JlWJrjE7Fvn5dc=.sha256"
 }

apps/ssb/tf-tab-connections.js

@@ -15,6 +15,7 @@ class TfTabConnectionsElement extends LitElement {
 			connect_attempt: {type: Object},
 			connect_message: {type: String},
 			connect_success: {type: Boolean},
+			peer_exchange: {type: Boolean},
 		};
 	}
 
@@ -47,6 +48,20 @@ class TfTabConnectionsElement extends LitElement {
 		tfrpc.rpc.getServerIdentity().then(function (identity) {
 			self.server_identity = identity;
 		});
+		this.check_peer_exchange();
+	}
+
+	async check_peer_exchange() {
+		if (await tfrpc.rpc.isAdministrator()) {
+			this.peer_exchange = await tfrpc.rpc.globalSettingsGet('peer_exchange');
+		} else {
+			this.peer_exchange = undefined;
+		}
+	}
+
+	async enable_peer_exchange() {
+		await tfrpc.rpc.globalSettingsSet('peer_exchange', true);
+		await this.check_peer_exchange();
 	}
 
 	render_connection_summary(connection) {
@@ -255,6 +270,22 @@ class TfTabConnectionsElement extends LitElement {
 				${generate_theme()}
 			</style>
 			<div class="w3-container" style="box-sizing: border-box">
+				<div
+					class=${'w3-panel w3-padding w3-theme-l3' +
+					(this.peer_exchange !== false ? ' w3-hide' : '')}
+				>
+					<p>
+						Looking for connections? Enabling this option will include publicly
+						advertised rooms and pubs among the list of discovered connections
+						to help you replicate.
+					</p>
+					<button
+						class="w3-button w3-theme-d1"
+						@click=${this.enable_peer_exchange}
+					>
+						🔍🌐 Use publicly advertised peers
+					</button>
+				</div>
 				<h2>New Connection</h2>
 				<textarea class="w3-input w3-theme-d1" id="code"></textarea>
 				${this.render_message(this.renderRoot.getElementById('code')?.value)}

apps/ssb/tf-tab-news.js

@@ -322,11 +322,11 @@ class TfTabNewsElement extends LitElement {
 								${this.stay_connected ? 'Online mode' : 'Passive mode'}
 							</button>
 							<button
-								class=${'w3-bar-item w3-button' +
+								class=${'w3-bar-item w3-button w3-border w3-leftbar w3-rightbar' +
 								(this.peer_exchange !== false ? ' w3-hide' : '')}
 								@click=${this.enable_peer_exchange}
 							>
-								Enable peer exchange
+								🔍🌐 Use publicly advertised peers
 							</button>
 						`
 					: undefined}