feat(ssb): show the name of the tab if the screen is large enough

apps/admin/index.html

@@ -4,8 +4,7 @@
 		<script>
 			const g_data = $data;
 		</script>
-		<link rel="stylesheet" href="w3.css" />
+		<link rel="stylesheet" href="w3.css"></link>
-		<!-- prettier-ignore -->
 		<style>
 			/* 2018 Valiant Poppy */
 			.w3-theme-l5 {color:#000 !important; background-color:#fbf3f3 !important}

apps/admin/script.js

@@ -42,27 +42,10 @@ window.addEventListener('load', function () {
 		} else if (description.type === 'textarea') {
 			return html`
 				<li class="w3-row">
-					<label class="w3-quarter" for=${'gs_' + key} style="font-weight: bold"
+					<label class="w3-quarter" for=${'gs_' + key} style="font-weight: bold">${key}</label>
-						>${key}</label
-					>
 					<div class="w3-rest w3-padding">${description.description}</div>
-					<textarea
+					<textarea class="w3-input" style="vertical-align: top; resize: vertical" id=${'gs_' + key}>${description.value}</textarea>
-						class="w3-input"
+					<button class="w3-button w3-right w3-quarter w3-theme-action" @click=${(e) => global_settings_set(key, e.srcElement.previousElementSibling.value)}>Set</button>
-						style="vertical-align: top; resize: vertical"
-						id=${'gs_' + key}
-					>
-${description.value}</textarea
-					>
-					<button
-						class="w3-button w3-right w3-quarter w3-theme-action"
-						@click=${(e) =>
-							global_settings_set(
-								key,
-								e.srcElement.previousElementSibling.value
-							)}
-					>
-						Set
-					</button>
 				</li>
 			`;
 		} else {
@@ -78,17 +61,13 @@ ${description.value}</textarea
 	}
 	const user_template = (user, permissions) => html`
 		<li class="w3-card w3-margin">
-			<button
+			<button class="w3-button w3-theme-action" @click=${(e) => delete_user(user)}>Delete</button>
-				class="w3-button w3-theme-action"
-				@click=${(e) => delete_user(user)}
-			>
-				Delete
-			</button>
 			${user}: ${permissions.map((x) => permission_template(x))}
 		</li>
 	`;
 	const users_template = (users) =>
-		html` <header class="w3-container w3-theme-l2"><h2>Users</h2></header>
+		html`
+			<header class="w3-container w3-theme-l2"><h2>Users</h2></header>
 			<ul class="w3-ul">
 				${Object.entries(users).map((u) => user_template(u[0], u[1]))}
 			</ul>`;

apps/identity/app.js

@@ -116,18 +116,16 @@ async function main() {
 		<div class="w3-card-4 w3-margin">
 			<header class="w3-container w3-theme-l2"><h2>Identities</h2></header>
 			<ul class="w3-ul">` +
-			ids
+				ids
-				.map(
+					.map(
-					(
+						(id) => `<li style="overflow: hidden; text-wrap: nowrap; text-overflow: ellipsis">
-						id
-					) => `<li style="overflow: hidden; text-wrap: nowrap; text-overflow: ellipsis">
 				<button onclick="handler.export_id(event)" data-id="${id}" class="w3-button w3-theme">Export Identity</button>
 				<button onclick="handler.delete_id(event)" data-id="${id}" class="w3-button w3-theme">Delete Identity</button>
 				${id}
 			</li>`
-				)
+					)
-				.join('\n') +
+					.join('\n') +
-			`	</ul>
+				`	</ul>
 		</div>
 	</body>`
 	);

apps/ssb/tf-app.js

@@ -340,6 +340,13 @@ class TfElement extends LitElement {
 		};
 
 		let tabs = html`
+			<style>
+				@media only screen and (max-width: 650px) {
+					.hide-on-small-screens {
+						display: none;
+					}
+				}
+			</style>
 			<div class="w3-bar w3-theme-l1">
 				${Object.entries(k_tabs).map(
 					([k, v]) => html`
@@ -352,6 +359,7 @@ class TfElement extends LitElement {
 							@click=${() => self.set_tab(v)}
 						>
 							${k}
+							<span class="hide-on-small-screens">${v}</span>
 						</button>
 					`
 				)}
@@ -359,12 +367,10 @@ class TfElement extends LitElement {
 		`;
 		let contents = !this.loaded
 			? this.loading
-				? html`<div
+				? html`<div class="w3-panel w3-theme-l5 w3-card-4 w3-padding-large w3-round-xlarge">
-							class="w3-panel w3-theme-l5 w3-card-4 w3-padding-large w3-round-xlarge"
+					Loading...
-						>
+				</div>
-							Loading...
+				${this.render_tab()}`
-						</div>
-						${this.render_tab()}`
 				: html`<div>Select or create an identity.</div>`
 			: this.render_tab();
 		return html`

apps/ssb/tf-compose.js

@@ -295,18 +295,14 @@ class TfComposeElement extends LitElement {
 				{
 					values: values,
 					selectTemplate: function (item) {
-						return item
+						return item ? `[@${item.original.key}](${item.original.value})` : undefined;
-							? `[@${item.original.key}](${item.original.value})`
-							: undefined;
 					},
 				},
 				{
 					trigger: '&',
 					values: this.autocomplete,
 					selectTemplate: function (item) {
-						return item
+						return item ? `![${item.original.key}](${item.original.value})` : undefined;
-							? `![${item.original.key}](${item.original.value})`
-							: undefined;
 					},
 				},
 			],
@@ -548,7 +544,7 @@ class TfComposeElement extends LitElement {
 							@paste=${this.paste}
 							contenteditable
 							.innerText=${live(draft.text ?? '')}
-						></span>
+							></span>
 					</div>
 					<div class="w3-half w3-padding">
 						${content_warning}

apps/ssb/tf-message.js

@@ -247,7 +247,9 @@ ${JSON.stringify(mention, null, 2)}</pre
 		if (mentions.length) {
 			let self = this;
 			return html`
-				<fieldset style="padding: 0.5em; border: 1px solid black">
+				<fieldset
+					style="padding: 0.5em; border: 1px solid black"
+				>
 					<legend>Mentions</legend>
 					${mentions.map((x) => self.render_mention(x))}
 				</fieldset>

apps/ssb/tf-tab-connections.js

@@ -116,15 +116,9 @@ class TfTabConnectionsElement extends LitElement {
 			${connection.tunnel !== undefined
 				? '🚇'
 				: html`(${connection.host}:${connection.port})`}
-			<div>
+			<div>${connection.requests.map(x => html`
-				${connection.requests.map(
+				<span class="w3-tag w3-small">${x.request_number > 0 ? '🟩' : '🟥'} ${x.name}</span>
-					(x) => html`
+			`)}</div>
-						<span class="w3-tag w3-small"
-							>${x.request_number > 0 ? '🟩' : '🟥'} ${x.name}</span
-						>
-					`
-				)}
-			</div>
 			<ul>
 				${this.connections
 					.filter((x) => x.tunnel === this.connections.indexOf(connection))