Improvements for admin user listing view

snikket_web/scss/app.scss

@@ -1206,6 +1206,13 @@ pre.guru-meditation {
 	p.form-desc.weak, p.field-desc.weak {
 		color: $gray-700;
 	}
+
+	.user-badge-icon {
+		color: $gray-900 !important;
+		background-color: $gray-100 !important;
+		border-color: $gray-300 !important;
+		box-shadow: black 0 0 2px !important;
+	}
 }
 
 /* tooltip magic */
@@ -1256,3 +1263,42 @@ pre.guru-meditation {
 .with-tooltip:hover:before, .with-tooltip:hover:after {
 	display: block;
 }
+
+.username-with-avatar {
+	display: flex;
+	align-items: center;
+
+	.avatar-container {
+		position: relative;
+	}
+
+	.user-badge-icon {
+		position: absolute;
+		bottom: -10px;
+		right: 0px;
+		background: white;
+		border-radius: 50%;
+		width: 1.2em;
+		height: 1.2em;
+		border-color: $gray-500;
+		border-width: 1px;
+		border-style: solid;
+		text-align: center;
+		margin: 0;
+		padding: 0;
+		margin: 0;
+		padding: 0;
+		box-shadow: $gray-500 0px 0px 2px;
+
+		line-height: 1;
+		.icon {
+			/* vertical-align: text-bottom; */
+			padding: 0.1em;
+		}
+	}
+
+	.user-info-container {
+		margin-left: 0.5em;
+	}
+
+}

snikket_web/templates/admin_users.html

@@ -1,12 +1,12 @@
 {% extends "admin_app.html" %}
-{% from "library.j2" import action_button, icon, value_or_hint, custom_form_button %}
+{% from "library.j2" import action_button, avatar, icon, render_user, value_or_hint, custom_form_button with context %}
 {% block content %}
 <h1>{% trans %}Manage users{% endtrans %}</h1>
 <div class="elevated el-2"><table>
 	<thead>
 		<tr>
-			<th>{% trans %}Login name{% endtrans %}</th>
-			<th>{% trans %}Display name{% endtrans %}</th>
+			<th>{% trans %}User{% endtrans %}</th>
+			<th>{% trans %}Last active{% endtrans %}</th>
 			<th>{% trans %}Actions{% endtrans %}</th>
 		</tr>
 	</thead>
@@ -14,15 +14,15 @@
 {% for user in users %}
 		<tr>
 			<td>
-				{{- user.localpart -}}
-				{%- if user.has_admin_role -%}
-					<span class="with-tooltip above" data-tooltip="{% trans %}The user is an administrator.{% endtrans %}">{% call icon("admin") %}{% trans %} (Administrator){% endtrans %}{% endcall %}</span>
-				{%- endif -%}
-				{%- if user.has_restricted_role -%}
-					<span class="with-tooltip above" data-tooltip="{% trans %}The user is restricted.{% endtrans %}">{% call icon("lock") %}{% trans %} (Restricted){% endtrans %}{% endcall %}</span>
-				{%- endif -%}
+				{%- call render_user(user) -%}{%- endcall -%}
 			</td>
-			<td>{% call value_or_hint(user.display_name) %}{% endcall %}</td>
+			{% if user.enabled %}
+			<td>{{ user.last_active | format_last_activity }}</td>
+			{% elif user.deletion_request %}
+			<td>{% trans %}Deleted{% endtrans %}</td>
+			{% else %}
+			<td>{% trans %}Locked{% endtrans %}</td>
+			{% endif %}
 			<td class="nowrap">
 				{%- call action_button("edit", url_for(".edit_user", localpart=user.localpart), class="primary") -%}
 					{% trans user_name=user.localpart %}Edit user {{ user_name }}{% endtrans %}

snikket_web/templates/library.j2

@@ -10,6 +10,29 @@
 {%- endif -%}
 {%- endmacro %}
 
+{% macro render_user(user, caller=None) -%}
+<div class="username-with-avatar">
+	<div class="avatar-container">
+		{%- call avatar(user.localpart+"@"+config["SNIKKET_DOMAIN"], user.avatar_info[0].hash if user.avatar_info | length > 0 else None ) %}{% endcall -%}
+		{%- if user.has_admin_role -%}
+		<div class="user-badge-icon">
+			<span class="with-tooltip above" data-tooltip="{% trans %}The user is an administrator.{% endtrans %}">{% call icon("admin") %}{% trans %} (Administrator){% endtrans %}{% endcall %}</span>
+		</div>
+		{%- elif user.has_restricted_role -%}
+		<div class="user-badge-icon">
+			<span class="with-tooltip above" data-tooltip="{% trans %}The user is restricted.{% endtrans %}">{% call icon("lock") %}{% trans %} (Restricted){% endtrans %}{% endcall %}</span>
+		</div>
+		{%- endif -%}
+	</div>
+	<div class="user-info-container">
+		<div class="user-localpart">{{- user.localpart -}}</div>
+		{%- if user.display_name %}
+		<div class="user-display-name">{{- user.display_name -}}</div>
+		{%- endif %}
+	</div>
+</div>
+{%- endmacro -%}
+
 {% macro showuri(uri, caller=None, id_=None) %}
 {%- if uri is none -%}
 <em>—</em>