Make it look nice

TODO.txt

@@ -1,3 +1,5 @@
+Check that the selected DB exists and is a valid Peachy DB
+	Set application_id and user_version when creating DB
 Use pattern matching (https://github.com/silentbicycle/tamale) for parsed sexps
 Write schema management package
 Unceremoniously dump a rudimentary schema management UI on index

assets/static/css/filepicker.css

@@ -1,26 +1,35 @@
 .filepicker {
-
 	details:has(input[type=radio]:checked)>summary,
 	label:has(input[type=radio]:checked) {
 		background-color: lightblue;
 	}
-
-	.directories {
-		margin-left: 0.7em;
-	}
-
-	.files>li {
-		list-style-type: none;
-	}
-
-	.directories+.files {
-		margin-top: 0;
-	}
-
-	.directories:has(+ .files) {
+	.files, .directories {
 		margin-bottom: 0;
+		margin-top: 0.3em;
+	}
+	input[type="radio"] {
+		display: none;
+	}
+	details {
+		margin: 0 0 0.3em;
+	}
+	li {
+		list-style-type: "📄";
+	}
+	summary {
+		display: list-item;
+		list-style-position: outside;
+		details[open] > & {
+			list-style-type: "📂";
+		}
+		details:not([open]) > & {
+			list-style-type: "📁";
+		}
+	}
+	li, summary {
+		padding-left: 0.5em;
+		cursor: pointer;
 	}
-
 	max-height: 30em;
 	overflow-y: scroll;
 }

assets/tmpl/layout.tmpl

@@ -4,6 +4,7 @@
 		<script src="/static/js/htmx.min.js"></script>
 		<script src="/static/js/_hyperscript.min.js"></script>
 		<title>Everything is Peachy</title>
+		<link rel="stylesheet" href="/static/css/picnic.css">
 		<link rel="stylesheet" href="/static/css/site.css">
 		{% if block.styles then for _, style in ipairs(block.styles) do %}
 			<link rel="stylesheet" href="{%& style %}">

assets/tmpl/opendb.tmpl

@@ -6,7 +6,7 @@
 	<input type="submit">
 </form>
 <div
-	class="filepicker"
+	class="filepicker card"
 	hx-get="/dirlist?dirpath=/"
 	hx-trigger="load"
 	_="on change(target)[target.type=='radio'] set #filename-input.value to target.value">