web: Show the little graphs if the Tilde Friends verison thingy is expanded. I want to be able to optionally see these on mobile.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&tL1A9Kt6d8wGwBFPAq5V5GtMqOatVCzuLIG6wwJhdyI=.sha256"
+	"previous": "&FhsefvQQwZ9T4+HoInU3di3T+7B7CVC3xyjpLtGqyr8=.sha256"
 }

apps/ssb/script.js

@@ -15,3 +15,10 @@ import * as tf_tab_search from './tf-tab-search.js';
 import * as tf_tab_connections from './tf-tab-connections.js';
 import * as tf_tab_query from './tf-tab-query.js';
 import * as tf_tag from './tf-tag.js';
+import * as tf_styles from './tf-styles.js';
+
+window.addEventListener('load', function() {
+	let style = document.createElement('style');
+	style.innerText = tf_styles.styles;
+	document.body.appendChild(style);
+});

apps/ssb/tf-tab-connections.js

@@ -211,7 +211,7 @@ class TfTabConnectionsElement extends LitElement {
 					class="w3-button w3-theme-l3 w3-circle w3-ripple w3-large"
 					@click=${this.refresh}
 				>
-					🔃
+					↻
 				</button>
 				<h2>New Connection</h2>
 				<textarea class="w3-input w3-theme-d1" id="code"></textarea>

core/client.js

@@ -56,7 +56,7 @@ class TfNavigationElement extends LitElement {
 			status: {type: Object},
 			spark_lines: {type: Object},
 			version: {type: Object},
-			show_version: {type: Boolean},
+			show_expanded: {type: Boolean},
 			identity: {type: String},
 			identities: {type: Array},
 			names: {type: Object},
@@ -105,7 +105,6 @@ class TfNavigationElement extends LitElement {
 			let spark_line = document.createElement('tf-sparkline');
 			spark_line.title = key;
 			spark_line.classList.add('w3-bar-item');
-			spark_line.classList.add('w3-hide-small');
 			spark_line.style.paddingRight = '0';
 			if (options) {
 				if (options.max) {
@@ -315,13 +314,13 @@ class TfNavigationElement extends LitElement {
 				<span
 					class="w3-bar-item"
 					style="cursor: pointer"
-					@click=${() => (this.show_version = !this.show_version)}
+					@click=${() => (this.show_expanded = !this.show_expanded)}
 					>😎</span
 				>
 				<span
 					class="w3-bar-item"
 					style=${'white-space: nowrap' +
-					(this.show_version ? '' : '; display: none')}
+					(this.show_expanded ? '' : '; display: none')}
 					title=${this.version?.name +
 					' ' +
 					Object.entries(this.version || {})
@@ -376,9 +375,11 @@ class TfNavigationElement extends LitElement {
 							</div>
 						`
 					: undefined}
-				${Object.keys(this.spark_lines)
+				<span class=${this.show_expanded ? '' : 'w3-hide-small'}>
-					.sort()
+					${Object.keys(this.spark_lines)
-					.map((x) => this.spark_lines[x])}
+						.sort()
+						.map((x) => this.spark_lines[x])}
+				</span>
 				${this.render_identity()}
 			</div>
 			${this.status?.is_error

core/index.html

@@ -6,6 +6,14 @@
 		<link type="text/css" rel="stylesheet" href="/static/w3.css" />
 		<link type="image/svg+xml" rel="icon" href="/static/tildefriends.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="title" content="Tilde Friends - Make friends and apps from your web browser." />
+		<meta name="description" content="Tilde Friends is a Secure Scuttlebutt client and a platform for building, running, and sharing web applications. " />
+		<meta property="og:type" content="website" />
+		<meta property="og:url" content="https://metatags.io/" />
+		<meta property="og:title" content="Tilde Friends - Make friends and apps from your web browser." />
+		<meta property="og:description" content="Tilde Friends is a Secure Scuttlebutt client and a platform for building, running, and sharing web applications. " />
+		<meta property="og:image" content="/static/tildefriends.svg" />
+
 		<script>
 			function set_access_key_title(event) {
 				if (!event.srcElement.title) {