theme picker: preselect the saved theme

apps/user_settings/app.js

@@ -21,7 +21,7 @@ tfrpc.register(async function getThemes() {
 });
 tfrpc.register(async function getTheme() {
 	// TODO
-	return 'solarized';
+	return 'gruvbox';
 });
 tfrpc.register(async function setTheme() {
 	// TODO

apps/user_settings/tf-identity-manager.js

@@ -35,7 +35,7 @@ class TfIdentityManagerElement extends LitElement {
 		try {
 			const newID = await tfrpc.rpc.addID(words);
 
-			if (newID) alert('Successfully imported a new identity');
+			if (newID) alert('Successfully imported a new identity.');
 			else alert('This identity already exists or is invalid.');
 			await tfrpc.rpc.reload();
 		} catch (err) {

apps/user_settings/tf-theme-picker.js

@@ -1,4 +1,4 @@
-import {LitElement, html} from './lit-all.min.js';
+import {LitElement, html, nothing} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 
 class TfThemePickerElement extends LitElement {
@@ -16,6 +16,10 @@ class TfThemePickerElement extends LitElement {
 
 	async load() {
 		this.themes = await tfrpc.rpc.getThemes();
+		this.selected = await tfrpc.rpc.getTheme();
+
+		let select = this.renderRoot?.querySelector('#theme-select');
+		select.value = this.selected;
 	}
 
 	changed(event) {
@@ -32,11 +36,12 @@ class TfThemePickerElement extends LitElement {
 
 			<select
 				name="theme"
+				id="theme-select"
 				?hidden=${!this.themes?.length}
 				@change=${this.changed}
 			>
 				${(this.themes ?? []).map(
-					(id) => html`<option value=${id}>${id}</option>`
+					(name) => html`<option value=${name}>${name}</option>`
 				)}
 			</select>
 		`;