From c7f29c1cd41c422aab2afd5c3179f26b008e2751 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lera=20Elvo=C3=A9?= <yagich@poto.cafe>
Date: Mon, 4 Aug 2025 02:17:27 +0300
Subject: [PATCH] add accordion macro, new user list view

---
 app/__init__.py                  |  1 +
 app/templates/common/macros.html | 15 ++++++++
 app/templates/mod/user-list.html | 61 ++++++++++++++++++++++++++++----
 data/static/style.css            | 22 ++++++++++++
 sass/style.scss                  | 22 ++++++++++++
 5 files changed, 115 insertions(+), 6 deletions(-)

diff --git a/app/__init__.py b/app/__init__.py
index f577408..1057711 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -103,6 +103,7 @@ def create_app():
             "InfoboxIcons": InfoboxIcons,
             "InfoboxHTMLClass": InfoboxHTMLClass,
             "InfoboxKind": InfoboxKind,
+            "PermissionLevel": PermissionLevel,
             "__commit": commit,
             "__emoji": EMOJI,
         }
diff --git a/app/templates/common/macros.html b/app/templates/common/macros.html
index bf2d52c..960f2eb 100644
--- a/app/templates/common/macros.html
+++ b/app/templates/common/macros.html
@@ -171,3 +171,18 @@
   </div>
 </div>
 {% endmacro %}
+
+{% macro accordion(hidden=false, style="", disabled=false) %}
+{% if disabled %}
+{% set hidden = true %}
+{% endif %}
+<div class="accordion {{ "hidden" if hidden else ""}}" style="{{style}}">
+  <div class="accordion-header">
+    <button type="button" class="accordion-toggle" {{"disabled" if disabled else ""}}>{{ "►" if hidden else "▼" }}</button>
+    {{ caller('header') }}
+  </div>
+  <div class="accordion-content {{ "hidden" if hidden else "" }}">
+    {{ caller('content') }}
+  </div>
+</div>
+{% endmacro %}
diff --git a/app/templates/mod/user-list.html b/app/templates/mod/user-list.html
index e8e7f07..79ae6ec 100644
--- a/app/templates/mod/user-list.html
+++ b/app/templates/mod/user-list.html
@@ -1,10 +1,59 @@
+{% from "common/macros.html" import timestamp, accordion %}
 {% extends "base.html" %}
 {% block content %}
-<div class="darkbg settings-container">
-  <ul>
-    {% for user in users %}
-      <li><a href="{{url_for("users.page", username=user['username'])}}">{{user['username']}}</a>
-    {% endfor %}
-  </ul>
+<div class="darkbg inbox-container">
+  {% set guests = (users | selectattr('permission', 'eq', PermissionLevel.GUEST.value) | list) %}
+  {% set not_guests = (users | selectattr('permission', 'gt', PermissionLevel.GUEST.value) | list) %}
+  {% call(section) accordion(disabled=(guests | count==0)) %}
+    {% if section == "header" %}
+      <span>Unconfirmed guests</span>
+    {% elif section == "content" %}
+      <table class="users-table">
+        <thead>
+          <th>Username</th>
+          <th class="small">Signed up on</th>
+        </thead>
+        {% for user in guests %}
+          <tr>
+            <td>
+              <a href="{{url_for("users.page", username=user['username'])}}">{{user['username']}}
+              </a>
+            </td>
+            <td>
+              {{ timestamp(user.created_at) }}
+            </td>
+          </tr>
+        {% endfor %}
+      </table>
+    {% endif %}
+  {% endcall %}
+
+  {% call(section) accordion() %}
+    {% if section == "header" %}
+      <span>Other users</span>
+    {% elif section == "content" %}
+      <table class="users-table">
+        <thead>
+          <th>Username</th>
+          <th class="small">Permission</th>
+          <th class="small">Signed up on</th>
+        </thead>
+        {% for user in not_guests %}
+          <tr>
+            <td>
+              <a href="{{url_for("users.page", username=user['username'])}}">{{user['username']}}
+              </a>
+            </td>
+            <td>
+              {{ user.permission | permission_string }}
+            </td>
+            <td>
+              {{ timestamp(user.created_at) }}
+            </td>
+          </tr>
+        {% endfor %}
+      </table>
+    {% endif %}
+  {% endcall %}
 </div>
 {% endblock %}
diff --git a/data/static/style.css b/data/static/style.css
index 2f533f7..dabab5b 100644
--- a/data/static/style.css
+++ b/data/static/style.css
@@ -570,6 +570,28 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   border-collapse: collapse;
 }
 
+.users-table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 10px 0;
+  overflow: hidden;
+}
+
+.users-table tr th {
+  background-color: #beb1ce;
+  padding: 5px 0;
+}
+
+.users-table tr td {
+  background-color: rgb(177, 206, 204.5);
+  padding: 5px 0;
+  text-align: center;
+}
+
+.users-table .small {
+  width: 250px;
+}
+
 .topic {
   display: grid;
   grid-template-columns: 1.5fr 96px;
diff --git a/sass/style.scss b/sass/style.scss
index 0f598b3..fd73e55 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -567,6 +567,28 @@ input[type="text"], input[type="password"], textarea, select {
   border-collapse: collapse;
 }
 
+.users-table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 10px 0;
+  overflow: hidden;
+}
+
+.users-table tr th {
+  background-color: $button_color2;
+  padding: 5px 0;
+}
+
+.users-table tr td {
+  background-color: $button_color;
+  padding: 5px 0;
+  text-align: center;
+}
+
+.users-table .small {
+  width: 250px;
+}
+
 .topic {
   display: grid;
   grid-template-columns: 1.5fr 96px;