Remember last device, open all folders on search

static/css/index.css

@@ -1,5 +1,6 @@
 :root {
 	--header-background: #acbb78;
+	--header-border: 1px solid #869a41;
 
 	--line-color: #ccc;
 	--line-color-record: #eee;
@@ -22,7 +23,7 @@
 	--record-NXDOMAIN: #aa0000;
 	--record-other: #888;
 
-	--record-hover: #fffff4;
+	--record-hover: #fafafa;
 }
 
 html {
@@ -34,6 +35,9 @@ html {
 *:after {
 	box-sizing: inherit;
 }
+*:focus {
+	outline: none;
+}
 
 [onClick] {
 	cursor: pointer;
@@ -103,18 +107,21 @@ select,
 button {
 	font-size: 1em;
 	padding: 4px 8px;
+	border-radius: 4px;
+	border: 1px solid #444;
 }
 
 #application-header {
 	display: grid;
-	grid-template-columns: min-content 1fr min-content min-content;
+	grid-template-columns: min-content min-content 1fr min-content;
 	align-items: center;
-	border-bottom: 1px solid #a4bc52;
+	justify-items: end;
+	border-bottom: var(--header-border);
 	background-color: var(--header-background);
 
-
 	.device-select {
-		padding: 16px 16px 16px 32px;
+		padding: 16px;
+		border-right: var(--header-border);
 
 		.device-name {
 			font-weight: bold;
@@ -127,11 +134,13 @@ button {
 		grid-template-columns: min-content min-content;
 		grid-gap: 0px 8px;
 
+
 		&>* {
 			display: none;
 		}
 
 		&.show {
+			border-right: var(--header-border);
 			&>* {
 				display: initial;
 			}
@@ -269,6 +278,10 @@ button {
 				padding-left: 8px;
 				border-bottom: 1px solid var(--header-line);
 
+				&.mouse-over {
+					background-color: var(--record-hover);
+				}
+
 				img {
 					display: block;
 					padding-left: 4px;
@@ -332,6 +345,8 @@ button {
 				border-left: 1px solid var(--header-line);
 				align-content: center;
 				cursor: pointer;
+				display: grid;
+				justify-items: center;
 
 				&.mouse-over {
 					background-color: var(--record-hover);

static/js/dns.mjs

@@ -71,6 +71,7 @@ export class Application {
 	async connectDevice(devName) {// {{{
 		this.resetDeviceState()
 		if (devName == '-') {
+			this.settings.set('last_device', '')
 			return
 		}
 
@@ -84,6 +85,9 @@ export class Application {
 
 			const records = await this.currentDevice.retrieveRecords()
 			this.records = this.parseRecords(records)
+
+			this.settings.set('last_device', this.currentDevice.name())
+
 			this.createFolders()
 			this.renderDevice()
 		} catch (err) {
@@ -184,6 +188,9 @@ export class Application {
 		}
 
 		this.deviceSelector.render()
+		const lastDevice = this.settings.get('last_device')
+		if (lastDevice !== '')
+			this.deviceSelector.selectDevice(lastDevice)
 	}// }}}
 
 	// renderDevice creates the device specific elements and also updates them.
@@ -293,7 +300,7 @@ export class Application {
 				break
 
 			case 'f':
-				this.searchField.focus()
+				this.searchWidget.searchField.focus()
 				break
 
 			default:
@@ -317,7 +324,6 @@ export class Application {
 			document.body.classList.remove('boxed-folders')
 	}// }}}
 
-
 	// search sets the search filter and re-renders the records tree.
 	search() {// {{{
 		this.recordsTree.remove()
@@ -325,6 +331,7 @@ export class Application {
 		this.recordsTree = null
 
 		this.createFolders()
+		this.topFolder.openFolder(true)
 		this.renderDevice()
 	}// }}}
 }
@@ -435,6 +442,10 @@ class DeviceSelectWidget {
 		this.currentlySelected = devName
 		_mbus.dispatch('device_selected', { devName })
 	}// }}}
+	selectDevice(devname) {// {{{
+		this.elDeviceSelect.value = devname
+		this.notifyDeviceSelect()
+	}// }}}
 }
 
 class Folder {
@@ -742,6 +753,7 @@ class Record {
 		return [this.imgIcon, this.divFQDN, this.divType, this.divValue, this.divTTL, this.divActions]
 	}// }}}
 	mouseEnter() {// {{{
+		this.imgIcon.classList.add('mouse-over')
 		this.divFQDN.classList.add('mouse-over')
 		this.divType.classList.add('mouse-over')
 		this.divValue.classList.add('mouse-over')
@@ -749,6 +761,7 @@ class Record {
 		this.divActions.classList.add('mouse-over')
 	}// }}}
 	mouseLeave() {// {{{
+		this.imgIcon.classList.remove('mouse-over')
 		this.divFQDN.classList.remove('mouse-over')
 		this.divType.classList.remove('mouse-over')
 		this.divValue.classList.remove('mouse-over')
@@ -899,6 +912,7 @@ class Settings {
 		this.settings = new Map([
 			['boxed_folders', false],
 			['toplevel_open', false],
+			['last_device', ''],
 		])
 
 		// Read any configured settings from local storage, but keeping default value