static: hack tree view prototype into file browser

static/treeview.css

@@ -0,0 +1,100 @@
+/* https://iamkate.com/code/tree-views/ */
+
+/* Custom properties */
+
+.tree {
+  --spacing : 1.0rem;
+  --radius  : 10px;
+}
+
+/* Padding */
+
+.tree li {
+  display      : block;
+  position     : relative;
+  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px + 10px);
+}
+
+.tree ul {
+  margin-left  : calc(var(--radius) - var(--spacing));
+  padding-left : 0;
+}
+
+/* Vertical lines */
+
+.tree ul li {
+  border-left : 2px solid #ddd;
+}
+
+.tree ul li:last-child {
+  border-color : transparent;
+}
+
+/* Horizontal lines */
+
+.tree ul::before {
+  content      : '';
+  display      : block;
+  position     : absolute;
+  top          : calc(var(--spacing) - 8px);
+  left         : 6px;
+  width        : calc(var(--spacing) + 2px);
+  border       : solid #ddd;
+  border-width : 0 0 2px 2px;
+}
+
+.tree ul li::before {
+  content      : '';
+  display      : block;
+  position     : absolute;
+  top          : calc(var(--spacing) - 22px);
+  left         : -2px;
+  width        : calc(var(--spacing) + 2px);
+  height       : calc(var(--spacing) - 2px);
+  border       : solid #ddd;
+  border-width : 0 0 2px 2px;
+}
+
+/* Summaries */
+
+.tree summary {
+  display : block;
+  cursor  : pointer;
+}
+
+.tree summary::marker,
+.tree summary::-webkit-details-marker {
+  display : none;
+}
+
+.tree summary:focus {
+  outline : none;
+}
+
+.tree summary:focus-visible {
+  outline : 1px dotted #000;
+}
+
+/* Markers */
+
+.tree li::after,
+.tree summary::before {
+  content       : '\1F4C1';
+  display       : block;
+  position      : absolute;
+  top           : calc(var(--spacing) / 1.5 - var(--radius));
+  left          : calc(var(--spacing) - var(--radius) - 1px);
+  width         : calc(2 * var(--radius));
+  height        : calc(2 * var(--radius));
+}u
+
+/* Expand and collapse buttons */
+
+.tree summary::before {
+  z-index: 1;
+  content: '\1F4C1';
+}
+
+.tree details[open] > summary::before {
+  content: '\1F4C2';
+}