web: Fix some list listing CSS

web/src/templates/css.html

@@ -763,6 +763,21 @@
 
     dl.lists dt {
         font-weight: bold;
+        font-size: 1.2rem;
+        padding-bottom: .3em;
+        background: #88929d36;
+        padding: .2rem .2rem;
+        border-radius: .2rem;
+    }
+
+    dl.lists dd > * + * {
+        margin-top: 1rem;
+    }
+
+    dl.lists dd .list-topics,
+    dl.lists dd .list-posts-dates {
+        display: block;
+        width: 100%;
     }
 
     dl.lists dl,
@@ -775,9 +790,10 @@
         margin-bottom: 1rem;
         margin-block-start: 0.3rem;
         margin-block-end: 1rem;
+        line-height: 1.5;
     }
 
-    dl.lists dd.no-description {
+    dl.lists .no-description {
         color: var(--text-faded);
     }
 
@@ -1061,4 +1077,9 @@
         border-inline-start: 1px solid var(--graphical-fg);
         color: var(--muted-fg);
     }
+
+    time, .tabular-nums {
+        font-family: var(--grotesque-system-stack);
+        font-variant-numeric: tabular-nums slashed-zero;
+    }
 </style>

web/src/templates/lists.html

@@ -5,7 +5,7 @@
         <dl class="lists" aria-label="list of mailing lists">
             {% for l in lists %}
                 <dt aria-label="mailing list name"><a href="{{ list_path(l.list.id) }}">{{ l.list.name }}</a></dt>
-                <dd><span aria-label="mailing list description"{% if not l.list.description %} class="no-description"{% endif %}>{{ l.list.description if l.list.description else "<p>no description</p>"|safe }}</span><br />{{ l.posts|length }} post{{ l.posts|length|pluralize("","s") }}{% if l.newest %} | <time datetime="{{ l.newest }}">{{ l.newest }}</time>{% endif %}{% if l.list.topics|length > 0 %}<br aria-hidden="true"><br aria-hidden="true"><span><em>Topics</em>:</span>&nbsp;{{ l.list.topics() }}{% endif %}</dd>
+                <dd><span aria-label="mailing list description"{% if not l.list.description %} class="no-description"{% endif %}>{{ l.list.description if l.list.description else "<p>no description</p>"|safe }}</span><span class="list-posts-dates tabular-nums">{{ l.posts|length }} post{{ l.posts|length|pluralize("","s") }}{% if l.newest %} | <time datetime="{{ l.newest }}">{{ l.newest }}</time>{% endif %}</span>{% if l.list.topics|length > 0 %}<span class="list-topics"><span>Topics:</span>&nbsp;{{ l.list.topics() }}</span>{% endif %}</dd>
             {% endfor %}
         </dl>
     </div>

web/src/templates/topics.html

@@ -1,12 +1,13 @@
 {% include "header.html" %}
 <div class="body">
-  <p>Results for <em>{{ term }}</em></p>
+  <p style="margin-block-end: 1rem;">Results for <em>{{ term }}</em></p>
   <div class="entry">
-    <ul>
-      {% for r in results %}
-        <li><a href="{{ list_path(r.pk) }}">{{ r.id }}</a>. {% if r.topics|length > 0 %}<br aria-hidden="true"><br aria-hidden="true"><span><em>Topics</em>:</span>&nbsp;{{ r.topics_html() }}{% endif %}
+    <dl class="lists" aria-label="list of mailing lists">
+      {% for list in results %}
+        <dt aria-label="mailing list name"><a href="{{ list_path(list.id) }}">{{ list.id }}</a></dt>
+        <dd><span aria-label="mailing list description"{% if not list.description %} class="no-description"{% endif %}>{{ list.description if list.description else "<p>no description</p>"|safe }}</span>{% if list.topics|length > 0 %}<span class="list-topics"><span>Topics:</span>&nbsp;{{ list.topics_html() }}</span>{% endif %}</dd>
       {% endfor %}
-    </ul>
+    </dl>
   </div>
 </div>
 {% include "footer.html" %}

web/src/topics.rs

@@ -28,6 +28,7 @@ pub struct SearchTerm {
 pub struct SearchResult {
     pk: i64,
     id: String,
+    description: Option<String>,
     topics: Vec<String>,
 }
 
@@ -63,13 +64,19 @@ impl minijinja::value::StructObject for SearchResult {
         match name {
             "pk" => Some(Value::from_serializable(&self.pk)),
             "id" => Some(Value::from_serializable(&self.id)),
+            "description" => Some(
+                self.description
+                    .clone()
+                    .map(Value::from_safe_string)
+                    .unwrap_or_else(|| Value::from_serializable(&self.description)),
+            ),
             "topics" => Some(Value::from_serializable(&self.topics)),
             _ => None,
         }
     }
 
     fn static_fields(&self) -> Option<&'static [&'static str]> {
-        Some(&["pk", "id", "topics"][..])
+        Some(&["pk", "id", "description", "topics"][..])
     }
 }
 pub async fn list_topics(
@@ -84,14 +91,20 @@ pub async fn list_topics(
     let results: Vec<Value> = {
         if let Some(term) = term.as_ref() {
             let mut stmt = db.connection.prepare(
-                "SELECT DISTINCT list.pk, list.id, list.topics FROM list, json_each(list.topics) \
-                 WHERE json_each.value IS ?;",
+                "SELECT DISTINCT list.pk, list.id, list.description, list.topics FROM list, \
+                 json_each(list.topics) WHERE json_each.value IS ?;",
             )?;
             let iter = stmt.query_map([&term], |row| {
                 let pk = row.get(0)?;
                 let id = row.get(1)?;
-                let topics = mailpot::models::MailingList::topics_from_json_value(row.get(2)?)?;
-                Ok(Value::from_object(SearchResult { pk, id, topics }))
+                let description = row.get(2)?;
+                let topics = mailpot::models::MailingList::topics_from_json_value(row.get(3)?)?;
+                Ok(Value::from_object(SearchResult {
+                    pk,
+                    id,
+                    description,
+                    topics,
+                }))
             })?;
             let mut ret = vec![];
             for el in iter {
@@ -106,6 +119,7 @@ pub async fn list_topics(
                 .map(|l| SearchResult {
                     pk: l.pk,
                     id: l.id,
+                    description: l.description,
                     topics: l.topics,
                 })
                 .map(Value::from_object)