html: Add a sidebar to quickly jump to messages.

2 files changed, 46 insertions, 2 deletions

diff --git a/assets/css/screen.css b/assets/css/screen.css
index deb4ce0..ba043ce 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -172,10 +172,35 @@ table {
     display: block;
 }
 
+a.message-anchor {
+    display: block;
+    position: relative;
+    top: -80px;
+    visibility: hidden;
+}
+
+#sidebar {
+    display: none;
+    position: fixed;
+    right: 10px;
+    top: 30%;
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    padding: .5em;
+}
+
+@media (min-width: 1200px) {
+    #sidebar {
+        display: block;
+    }
+}
+
 .conversation .avatar {
     display: none;
 }
 
+#sidebar .avatar,
 .message .from .avatar {
     width: 1.2em;
     height: 1.2em;
diff --git a/mumi/web/view/html.scm b/mumi/web/view/html.scm
index 4026489..b5300ae 100644
--- a/mumi/web/view/html.scm
+++ b/mumi/web/view/html.scm
@@ -71,7 +71,7 @@
        (@ (rel "stylesheet")
           (media "screen")
           (type "text/css")
-          (href "/css/screen.css?20200507"))))
+          (href "/css/screen.css?202005070001"))))
      (body ,@body
            (footer (@ (class "text-center"))
                    (p "Copyright © 2016—2020 by the GNU Guix community."
@@ -311,6 +311,23 @@ failed to process associated messages.")
                         (lambda (a b)
                           (string< (extract-email a)
                                    (extract-email b)))))
+  (define sidebar
+    `(ul (@ (id "sidebar")
+             (class "sticky-top flex-column"))
+         ,(map (lambda (message message-number)
+                 `(li
+                   (div
+                    (@ (class "avatar")
+                       (style ,(string-append "background-color:"
+                                              (avatar-color (sender-email message)
+                                                            (map extract-email parties)))))
+                    ,(string-upcase (string-take (sender-name message) 1)))
+                   (span (@ (class "date"))
+                         (a (@ (href ,(string-append "#" (number->string
+                                                          message-number))))
+                            ,(date->string (date message))))))
+               messages
+               (iota (length messages)))))
   (define issue-details
     `(span (@ (class "details"))
            ,(status-tag bug)
@@ -451,7 +468,8 @@ supported.  To comment on this conversation "
                                        (number->string id) "@" (%config 'debbugs-domain)))))))))))
   (define (show-message message-number message previous-subject)
     `((div (@ (class "mb-5"))
-           (a (@ (id ,(number->string message-number))))
+           (a (@ (class "message-anchor")
+                 (id ,(number->string message-number))))
            (div
             (@ (class "avatar")
                (style ,(string-append "background-color:"
@@ -521,6 +539,7 @@ supported.  To comment on this conversation "
                          (role "alert"))
                       ,text)))
               (_ '()))
+          ,sidebar
           (div
            (@ (class "title col-12"))
            (h1 (@ (class "h3")) ,(bug-subject* bug))