From 63dd2fa5ab6746170193ec82f8517a559629ca5e Mon Sep 17 00:00:00 2001
From: lqdev <liquidev@tutanota.com>
Date: Fri, 18 Aug 2023 20:58:07 +0200
Subject: [PATCH] some more usability improvements

---
 content/tree/root.tree              |  2 ++
 crates/treehouse-format/src/ast.rs  |  4 ++--
 crates/treehouse-format/src/pull.rs | 16 ++++++++++++---
 static/css/main.css                 |  3 +++
 static/css/tree.css                 | 30 +++++++++++++++++++++++------
 static/js/usability.js              |  2 +-
 static/svg/expand.svg               |  2 +-
 7 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/content/tree/root.tree b/content/tree/root.tree
index f08b281..b86aed3 100644
--- a/content/tree/root.tree
+++ b/content/tree/root.tree
@@ -62,6 +62,8 @@
 
                         - ![ralsei with a hat](https://liquidev.net/syf/art/20230723_ralsei_hat.png)
 
+                        - wow he very beeg
+
                         - without a hat is also nice uwu
 
                     - also a block quote
diff --git a/crates/treehouse-format/src/ast.rs b/crates/treehouse-format/src/ast.rs
index 4c7e51e..1c8f13c 100644
--- a/crates/treehouse-format/src/ast.rs
+++ b/crates/treehouse-format/src/ast.rs
@@ -1,7 +1,7 @@
 use std::ops::Range;
 
 use crate::{
-    pull::{BranchEvent, BranchKind, Parser},
+    pull::{Attributes, BranchEvent, BranchKind, Parser},
     ParseError, ParseErrorKind,
 };
 
@@ -26,7 +26,7 @@ impl Roots {
 #[derive(Debug, Clone)]
 pub struct Branch {
     pub indent_level: usize,
-    pub attributes: Range<usize>,
+    pub attributes: Option<Attributes>,
     pub kind: BranchKind,
     pub kind_span: Range<usize>,
     pub content: Range<usize>,
diff --git a/crates/treehouse-format/src/pull.rs b/crates/treehouse-format/src/pull.rs
index e5e273d..16a3e68 100644
--- a/crates/treehouse-format/src/pull.rs
+++ b/crates/treehouse-format/src/pull.rs
@@ -25,7 +25,13 @@ pub struct BranchEvent {
     pub kind: BranchKind,
     pub kind_span: Range<usize>,
     pub content: Range<usize>,
-    pub attributes: Range<usize>,
+    pub attributes: Option<Attributes>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct Attributes {
+    pub percent: Range<usize>,
+    pub data: Range<usize>,
 }
 
 #[derive(Debug, Clone, PartialEq, Eq)]
@@ -100,11 +106,15 @@ impl<'a> Parser<'a> {
         let attributes = if self.current() == Some('%') {
             let start = self.position;
             self.advance();
+            let after_percent = self.position;
             self.eat_indented_lines_until(indent_level, |c| c == '-' || c == '+')?;
             let end = self.position;
-            start..end
+            Some(Attributes {
+                percent: start..after_percent,
+                data: after_percent..end,
+            })
         } else {
-            self.position..self.position
+            None
         };
 
         let kind_start = self.position;
diff --git a/static/css/main.css b/static/css/main.css
index 0ae4c35..bc3252c 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -137,6 +137,9 @@ blockquote {
 
 /* And tables. */
 
+table {
+    margin: 8px 0;
+}
 
 table,
 th,
diff --git a/static/css/tree.css b/static/css/tree.css
index 72192ce..6f11a8e 100644
--- a/static/css/tree.css
+++ b/static/css/tree.css
@@ -6,6 +6,14 @@
 
 /* Make the tree have + and - instead of the default details/summary arrow */
 
+.tree {
+    --tree-icon-position: 8px 50%;
+    --tree-icon-space: 28px;
+
+    /* I have no clue why this works, deal with it */
+    --tree-hover-expansion: 0.01px;
+}
+
 .tree details>summary {
     list-style: none;
     cursor: pointer;
@@ -18,17 +26,27 @@
 .tree details>summary {
     background-image: url('../svg/expand.svg');
     background-repeat: no-repeat;
-    background-position: 0px 50%;
-    padding-left: 24px;
-    margin-left: -24px;
+    background-position: var(--tree-icon-position);
+    padding-left: var(--tree-icon-space);
+    margin-left: calc(- var(--tree-icon-space));
+
+    padding-top: var(--tree-hover-expansion);
+    padding-bottom: var(--tree-hover-expansion);
+    border-radius: 8px;
+
+    background-color: rgba(0, 0, 0, 0%);
+}
+
+.tree details>summary:hover {
+    background-color: rgba(0, 0, 0, 5%);
 }
 
 .tree li.leaf {
     background-image: url('../svg/leaf.svg');
     background-repeat: no-repeat;
-    background-position: 0px 50%;
-    padding-left: 24px;
-    margin-left: -24px;
+    background-position: var(--tree-icon-position);
+    padding-left: var(--tree-icon-space);
+    margin-left: calc(- var(--tree-icon-space));
 }
 
 .tree details[open]>summary {
diff --git a/static/js/usability.js b/static/js/usability.js
index abb5404..46318e4 100644
--- a/static/js/usability.js
+++ b/static/js/usability.js
@@ -1,4 +1,4 @@
-// Bits and pieces to make vanilla HTML just a bit more usable.
+// Bits and pieces to make the treehouse just a bit more easy to explore.
 
 // We want to let the user have a selection on collapsible blocks without collapsing them when
 // the user finishes marking their selection.
diff --git a/static/svg/expand.svg b/static/svg/expand.svg
index 97e93e0..86734ba 100644
--- a/static/svg/expand.svg
+++ b/static/svg/expand.svg
@@ -1,4 +1,4 @@
 <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V3H5V5H3V7H5V9H7V7H9V5H7Z" fill="currentColor"
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V2H5V5H2V7H5V10H7V7H10V5H7Z" fill="currentColor"
         fill-opacity="0.3" />
 </svg>