Update groups page layout + show activity stats

This replaces the groups page with a new list style that doesn't include
the ability to subscribe/unsubscribe directly on the page, and also
shows approximate activity statistics (daily topics/comments) for each
group.

tildes/scss/modules/_group.scss

@@ -2,29 +2,24 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 .group-list {
-  .link-group {
-    font-weight: bold;
-  }
+  margin: 1rem 0;
 
-  .group-subscription {
-    flex-direction: column;
-    margin: 0;
+  ol {
+    margin-left: 1rem;
   }
 
-  .group-subscription-count {
-    margin-bottom: 0.2rem;
+  li {
+    text-indent: -1rem;
+    margin-left: 1rem;
   }
 
-  @for $indent-level from 1 through 4 {
-    tr.group-level-#{$indent-level} td:first-child {
-      padding-left: #{$indent-level}rem;
-    }
+  .link-group {
+    font-weight: bold;
   }
 }
 
-.group-list-description {
+.group-list-activity {
   font-style: italic;
-  margin-left: 1rem;
   font-size: 0.6rem;
   line-height: 0.8rem;
 }

tildes/scss/themes/_theme_base.scss

@@ -374,6 +374,12 @@
     background-color: map-get($theme, "background-input");
   }
 
+  .group-list-item-not-subscribed {
+    a.link-group {
+      color: map-get($theme, "warning");
+    }
+  }
+
   .input-group-addon {
     background-color: map-get($theme, "background-secondary");
     color: map-get($theme, "foreground-highlight");
@@ -482,6 +488,10 @@
     color: map-get($theme, "error");
   }
 
+  .text-link {
+    color: map-get($theme, "link");
+  }
+
   .text-secondary {
     color: map-get($theme, "foreground-secondary");
   }

tildes/tildes/templates/groups.jinja2

@@ -5,6 +5,7 @@
 
 {% from 'macros/groups.jinja2' import render_group_subscription_box with context %}
 {% from 'macros/links.jinja2' import link_to_group with context %}
+{% from 'macros/utils.jinja2' import pluralize %}
 
 {% block title %}Browse groups{% endblock %}
 
@@ -13,25 +14,49 @@
 {% endblock %}
 
 {% block content %}
-  <table class="table group-list">
-    <thead>
-      <tr>
-        <th>Group</th>
-        <th class="text-center">Subscribe</th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for group in groups %}
-        <tr class="group-level-{{ group.path|length - 1 }}">
-          <td>
-            {{ link_to_group(group) }}
-            {% if group.short_description %}
-              <p class="group-list-description">{{ group.short_description }}</p>
-            {% endif %}
-          </td>
-          <td>{{ render_group_subscription_box(group) }}</td>
-        </tr>
+{% if request.user %}
+  <small>Group name colors: <span class="text-link">subscribed</span> / <span class="text-warning">not subscribed</span>. You can change your subscription status to a group in its sidebar when you are viewing it directly.</small>
+{% endif %}
+
+<div class="divider"></div>
+
+<ol class="group-list">
+  {% for group in groups %}
+    {# nest a list if it's a sub-group #}
+    {% if loop.previtem and group.path|length > loop.previtem.path|length %}<ol>{% endif %}
+
+    {# check in this order so logged-out users get the "subscribed" style #}
+    {% if request.user and not group.user_subscribed %}
+      <li class="group-list-item-not-subscribed">
+    {% else %}
+      <li class="group-list-item-subscribed">
+    {% endif %}
+
+      {{ link_to_group(group) }}
+      {% if group.short_description %}
+        - <span class="group-list-description">{{ group.short_description }}</span>
+      {% endif %}
+
+      {% if group.path in daily_topic_counts and group.path in daily_comment_counts %}
+        <br>
+        <span class="group-list-activity">Approx. daily activity:
+          {{ pluralize(daily_topic_counts[group.path], "topic") }},
+          {{ pluralize(daily_comment_counts[group.path], "comment") }}
+        </span>
+      {% endif %}
+    </li>
+
+    {# close any nested lists #}
+    {% if loop.nextitem and group.path|length > loop.nextitem.path|length %}
+      </ol>
+    {% elif not loop.nextitem %}
+      {% for _ in range(group.path|length - 1) %}
+        </ol>
       {% endfor %}
-    </tbody>
-  </table>
+    {% endif %}
+  {% endfor %}
+</ol>
+
+<div class="divider"></div>
+<small class="text-secondary">Activity numbers are based on posts in the group over the last week, and only update once per day, shortly after 00:00 UTC.</small>
 {% endblock %}

tildes/tildes/views/group.py

@@ -6,6 +6,7 @@
 from pyramid.request import Request
 from pyramid.view import view_config
 
+from tildes.enums import GroupStatType
 from tildes.models.group import Group
 
 
@@ -14,4 +15,32 @@ def get_list_groups(request: Request) -> dict:
     """Show a list of all groups."""
     groups = request.query(Group).order_by(Group.path).all()
 
-    return {"groups": groups}
+    # converting this to SQLAlchemy seems like way more trouble than it's worth
+    posting_stats = request.db_session.execute(
+        """
+        select path, stat, ceil(sum(value) / count(*))
+        from group_stats
+            left join groups using (group_id)
+        where period && tstzrange(now() - interval '7 days', now())
+        group by path, stat
+        order by path, stat;
+    """
+    ).fetchall()
+
+    daily_comment_counts = {
+        row[0]: int(row[2])
+        for row in posting_stats
+        if row[1] == GroupStatType.COMMENTS_POSTED.name
+    }
+
+    daily_topic_counts = {
+        row[0]: int(row[2])
+        for row in posting_stats
+        if row[1] == GroupStatType.TOPICS_POSTED.name
+    }
+
+    return {
+        "groups": groups,
+        "daily_comment_counts": daily_comment_counts,
+        "daily_topic_counts": daily_topic_counts,
+    }