ssb: Use img title=, not alt= for more browser support.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&9egAArMLNHQzp1yniwnxD41e4T7qXWAfLNJdH4LrXS8=.sha256"
+	"previous": "&fAgPjWyRwHxcKiSV3T8OE7UyAUUgHE02YnA7e+sm3lo=.sha256"
 }

apps/ssb/tf-app.js

@@ -601,9 +601,13 @@ class TfElement extends LitElement {
 					.channels_latest=${this.channels_latest}
 					.channels_unread=${this.channels_unread}
 					@channelsetunread=${this.channel_set_unread}
+					@refresh=${this.refresh}
+					@toggle_stay_connected=${this.toggle_stay_connected}
 					.connections=${this.connections}
 					.private_messages=${this.private_messages}
 					.recent_reactions=${this.recent_reactions}
+					?is_administrator=${this.is_administrator}
+					?stay_connected=${this.stay_connected}
 				></tf-tab-news>
 			`;
 		} else if (this.tab === 'connections') {

apps/ssb/tf-tab-news.js

@@ -26,6 +26,8 @@ class TfTabNewsElement extends LitElement {
 			private_messages: {type: Array},
 			recent_reactions: {type: Array},
 			peer_exchange: {type: Boolean},
+			is_administrator: {type: Boolean},
+			stay_connected: {type: Boolean},
 		};
 	}
 
@@ -174,10 +176,6 @@ class TfTabNewsElement extends LitElement {
 			.map((x) => x[0]);
 	}
 
-	refresh() {
-		tfrpc.rpc.sync();
-	}
-
 	async enable_peer_exchange() {
 		await tfrpc.rpc.globalSettingsSet('peer_exchange', true);
 		await this.check_peer_exchange();
@@ -196,6 +194,32 @@ class TfTabNewsElement extends LitElement {
 				>
 					×
 				</div>
+				${this.is_administrator
+					? html`
+							<button
+								class="w3-bar-item w3-button"
+								@click=${() =>
+									this.dispatchEvent(
+										new Event('refresh', {bubbles: true, composed: true})
+									)}
+							>
+								<span style="width: 1.5em; height: 1.5em; padding: 8px">↻</span>
+								Sync now
+							</button>
+							<button
+								class="w3-bar-item w3-button w3-ripple"
+								@click=${() =>
+									this.dispatchEvent(
+										new Event('toggle_stay_connected', {
+											bubbles: true,
+											composed: true,
+										})
+									)}
+							>
+								${this.stay_connected ? '🔗 Online mode' : '⛓️‍💥 Passive mode'}
+							</button>
+						`
+					: undefined}
 				${this.hash.startsWith('##') &&
 				this.channels.indexOf(this.hash.substring(2)) == -1
 					? html`
@@ -266,7 +290,10 @@ class TfTabNewsElement extends LitElement {
 								(this.connections?.some((x) => x.flags.one_shot)
 									? ' w3-spin'
 									: '')}
-								@click=${this.refresh}
+								@click=${() =>
+									this.dispatchEvent(
+										new Event('refresh', {bubbles: true, composed: true})
+									)}
 							>
 								↻ Sync now
 							</button>

apps/ssb/tf-user.js

@@ -34,11 +34,10 @@ class TfUserElement extends LitElement {
 			>😎</span
 		>`;
 		let name = this.users?.[this.id]?.name;
+		let name_string = name ?? this.fallback_name ?? this.id;
 		name = this.icon_only
 			? undefined
-			: html`<a target="_top" href=${'#' + this.id}
+			: html`<a target="_top" href=${'#' + this.id}>${name_string}</a>`;
-					>${name ?? this.fallback_name ?? this.id}</a
-				>`;
 
 		if (user) {
 			let image_link = user.image;
@@ -52,7 +51,7 @@ class TfUserElement extends LitElement {
 					class=${'w3-theme-l4 ' + shape}
 					style="width: 2em; height: 2em; vertical-align: middle; object-fit: cover"
 					src="/${image_link}/view"
-					alt=${name ?? this.fallback_name ?? this.id}
+					title=${name_string + ' (' + this.id + ')'}
 				/>`;
 			}
 		}

apps/ssb/tf-utils.js

@@ -50,9 +50,9 @@ function image(node, entering) {
 						'</div>'
 				);
 				if (this.options.safe && potentiallyUnsafe(node.destination)) {
-					this.lit('<img src="" alt="');
+					this.lit('<img src="" title="');
 				} else {
-					this.lit('<img src="' + this.esc(node.destination) + '" alt="');
+					this.lit('<img src="' + this.esc(node.destination) + '" title="');
 				}
 			}
 			this.disableTags += 1;