Remember problem listing

static/js/problems.mjs

@@ -7,6 +7,19 @@ export class UI {
 			list.classList.remove('hidden')
 		}
 			
+		const display = localStorage.getItem('problems_display')
+		if (display === null)
+			this.displayAreas()
+		else {
+			switch (display) {
+				case 'areas':
+					this.displayAreas()
+					break
+				case 'list':
+					this.displayList()
+					break
+			}
+		}
 	}
 
 	toggleAcknowledged(evt) {
@@ -24,9 +37,14 @@ export class UI {
 	displayList() {
 		document.querySelector('.display-list').classList.remove('hidden')
 		document.querySelector('.display-areas').classList.add('hidden')
+		localStorage.setItem('problems_display', 'list')
+		document.getElementById('display-list').setAttribute('checked', 'checked')
 	}
+
 	displayAreas() {
 		document.querySelector('.display-list').classList.add('hidden')
 		document.querySelector('.display-areas').classList.remove('hidden')
+		localStorage.setItem('problems_display', 'areas')
+		document.getElementById('display-table').setAttribute('checked', 'checked')
 	}
 }

views/pages/problems.gotmpl

@@ -11,7 +11,7 @@
 	{{ block "page_label" . }}{{end}}
 
 	<div>
-		<input type="radio" name="display" id="display-table" onclick="_ui.displayAreas()" checked> <label for="display-table">Areas</label>
+		<input type="radio" name="display" id="display-table" onclick="_ui.displayAreas()"> <label for="display-table">Areas</label>
 		<input type="radio" name="display" id="display-list" onclick="_ui.displayList()"> <label for="display-list">List</label>
 	</div>
 
@@ -68,7 +68,7 @@
 		</div>
 	</div>
 
-	<div class="display-areas">
+	<div class="display-areas hidden">
 		<div id="areas">
 			{{ range $areaName, $sections := .Data.ProblemsGrouped }}
 			<div class="area">