From b28a4f5b9a52b5f8243130a3cb43e537c0c07673 Mon Sep 17 00:00:00 2001
From: lqdev <liquidev@tutanota.com>
Date: Sun, 20 Aug 2023 13:46:54 +0200
Subject: [PATCH] added permalinks (pain pain go away)

---
 crates/treehouse/src/html/tree.rs | 15 +++++++++
 static/css/tree.css               | 54 +++++++++++++++++++++++++++++++
 static/svg/go.svg                 |  5 +++
 static/svg/link.svg               |  5 +++
 4 files changed, 79 insertions(+)
 create mode 100644 static/svg/go.svg
 create mode 100644 static/svg/link.svg

diff --git a/crates/treehouse/src/html/tree.rs b/crates/treehouse/src/html/tree.rs
index 14cf661..831c0d5 100644
--- a/crates/treehouse/src/html/tree.rs
+++ b/crates/treehouse/src/html/tree.rs
@@ -83,6 +83,8 @@ pub fn branch_to_html(s: &mut String, treehouse: &mut Treehouse, file_id: FileId
                 BranchKind::Collapsed => "<details>",
             });
             s.push_str("<summary>");
+        } else {
+            s.push_str("<div>");
         }
 
         let raw_block_content = &source[branch.content.clone()];
@@ -108,10 +110,23 @@ pub fn branch_to_html(s: &mut String, treehouse: &mut Treehouse, file_id: FileId
         });
         markdown::push_html(s, markdown_parser);
 
+        s.push_str("<th-bb>");
+        {
+            write!(
+                s,
+                "<a class=\"branch-link\" href=\"#{}\" title=\"permalink\"></a>",
+                EscapeAttribute(&attributes.id)
+            )
+            .unwrap();
+        }
+        s.push_str("</th-bb>");
+
         if !branch.children.is_empty() {
             s.push_str("</summary>");
             branches_to_html(s, treehouse, file_id, &branch.children);
             s.push_str("</details>");
+        } else {
+            s.push_str("</div>");
         }
     }
     s.push_str("</li>");
diff --git a/static/css/tree.css b/static/css/tree.css
index 6f11a8e..14dc5fd 100644
--- a/static/css/tree.css
+++ b/static/css/tree.css
@@ -12,6 +12,8 @@
 
     /* I have no clue why this works, deal with it */
     --tree-hover-expansion: 0.01px;
+
+    position: relative;
 }
 
 .tree details>summary {
@@ -21,6 +23,29 @@
 
 .tree li {
     list-style: none;
+
+    display: flex;
+    flex-direction: row;
+
+    position: relative;
+}
+
+.tree li>*:first-child {
+    width: 100%;
+}
+
+.tree li>div:first-child {
+    box-sizing: border-box;
+}
+
+.tree li>div:first-child,
+.tree li>details>summary:first-child {
+    padding-right: 32px;
+}
+
+.tree li>div:first-child:hover {
+    border-bottom: 1px solid rgba(0, 0, 0, 15%);
+    margin-bottom: -1px;
 }
 
 .tree details>summary {
@@ -52,3 +77,32 @@
 .tree details[open]>summary {
     background-image: url('../svg/collapse.svg');
 }
+
+.tree th-bb {
+    height: 24px;
+    margin: 4px;
+
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    display: flex;
+    flex-direction: row;
+
+    opacity: 0%;
+}
+
+.tree li>details>summary:hover>th-bb,
+.tree li>div:hover>th-bb {
+    opacity: 100%;
+}
+
+.tree .branch-link {
+    background-image: url("../svg/link.svg");
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    opacity: 35%;
+
+    width: 24px;
+    height: 24px;
+}
diff --git a/static/svg/go.svg b/static/svg/go.svg
new file mode 100644
index 0000000..729d94e
--- /dev/null
+++ b/static/svg/go.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M10.5858 7L8.29291 4.70711L9.70712 3.29289L14.4142 8L9.70712 12.7071L8.29291 11.2929L10.5858 9H3V7H10.5858Z"
+        fill="currentColor" />
+</svg>
diff --git a/static/svg/link.svg b/static/svg/link.svg
new file mode 100644
index 0000000..ccb7598
--- /dev/null
+++ b/static/svg/link.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd"
+        d="M7.65686 2L9.07107 3.41422C9.75158 4.09473 10.1356 4.95943 10.2232 5.84784C11.1116 5.93544 11.9763 6.31949 12.6569 7L14.0711 8.41422C15.6332 9.97631 15.6332 12.509 14.0711 14.0711C12.509 15.6332 9.97631 15.6332 8.41422 14.0711L7 12.6569C6.31949 11.9763 5.93544 11.1116 5.84784 10.2232C4.95943 10.1356 4.09473 9.75158 3.41422 9.07107L2 7.65686C0.437906 6.09476 0.437906 3.5621 2 2C3.5621 0.437906 6.09476 0.437906 7.65686 2ZM8.27486 9.68907C8.13056 9.77429 7.98205 9.84968 7.83031 9.91523C7.85114 10.3978 8.04577 10.8742 8.41422 11.2426L9.82843 12.6569C10.6095 13.4379 11.8758 13.4379 12.6569 12.6569C13.4379 11.8758 13.4379 10.6095 12.6569 9.82843L11.2426 8.41422C10.8742 8.04577 10.3978 7.85114 9.91523 7.83031C9.84968 7.98204 9.7743 8.13055 9.68907 8.27485L11.5355 10.1213L10.1213 11.5355L8.27486 9.68907ZM7.65686 4.82843C8.0253 5.19688 8.21994 5.67331 8.24077 6.15585C8.08903 6.22139 7.94053 6.29678 7.79623 6.382L5.87869 4.46447L4.46448 5.87868L6.38201 7.79621C6.29678 7.94052 6.2214 8.08903 6.15585 8.24077C5.67331 8.21994 5.19688 8.0253 4.82843 7.65686L3.41422 6.24264C2.63317 5.46159 2.63317 4.19527 3.41422 3.41422C4.19527 2.63317 5.46159 2.63317 6.24264 3.41422L7.65686 4.82843Z"
+        fill="currentColor" />
+</svg>