prettify the allow-list main page

web/handlers/admin/allow_list.go

@@ -65,6 +65,10 @@ func (h allowListH) overview(rw http.ResponseWriter, req *http.Request) (interfa
 	if err != nil {
 		return nil, err
 	}
+	// Reverse the slice to provide recent-to-oldest results
+	for i, j := 0, len(lst)-1; i < j; i, j = i+1, j-1 {
+		lst[i], lst[j] = lst[j], lst[i]
+	}
 
 	return map[string]interface{}{
 		csrf.TemplateTag: csrf.TemplateField(req),

web/i18n/defaults/active.en.toml

@@ -16,14 +16,19 @@ AuthSignOut = "Sign out"
 AdminDashboardWelcome = "Welcome to your dashboard"
 AdminDashboardTitle = "Room Admin Dashboard"
 
-AdminAllowListTitle = "List of room members"
-AdminAllowListWelcome = "Here you can see all the members of the room and ways to add new ones or remove exising ones."
-AdminAllowListAdd = "Add member"
+AdminAllowListTitle = "Members"
+AdminAllowListWelcome = "Here you can see all the members of the room and ways to add new ones (by their SSB ID) or remove exising ones."
+AdminAllowListAdd = "Add"
+AdminAllowListRemove = "Remove"
 AdminAllowListRemoveConfirmWelcome = "Just to verify that this is the member you want removed"
 AdminAllowListRemoveConfirmTitle = "Confirm member removal"
 
 NavAdminDashboard = "Admin Dasboard"
 
+[MemberCount]
+description = "Number of members"
+one = "1 member"
+other =  "{{.Count}} members"
 
 [ListCount]
 description = "generic list"

web/templates/admin/allow-list.tmpl

@@ -1,23 +1,21 @@
 {{ define "title" }}{{i18n "AdminAllowListTitle"}}{{ end }}
 {{ define "content" }}
-<div class="page-header">
-  <h1 id="welcome">{{i18n "AdminAllowListWelcome"}}</h1>
-</div>
-<div class="row">
-    <div class="col-md-12">
-    <p id="allowListCount">{{i18npl "ListCount" .Count}}</p>
-    <ul id="theList">
-    {{range .Entries}}
-      <li>{{.PubKey.Ref}} (<a href="{{urlTo "admin:allow-list:remove:confirm" "id" .ID}}">Remove</a>) </li>
-    {{end}}
-    </ul>
-    </div>
-    
-    <h3>{{i18n "AdminAllowListAdd"}}</h3>
+  <h1 class="text-3xl tracking-tight font-black text-black mt-2 mb-4">{{i18n "AdminAllowListTitle"}}</h1>
+  <p id="welcome" class="my-4">{{i18n "AdminAllowListWelcome"}}</p>
+  <p id="allowListCount" class="text-lg font-bold my-2">{{i18npl "MemberCount" .Count}}</p>
+  <ul id="theList" class="divide-y pb-4">
     <form id="add-entry" action="{{urlTo "admin:allow-list:add"}}" method="POST">
       {{ .csrfField }}
-      <input type="text" name="pub_key">
-      <input type="submit" value="{{i18n "AdminAllowListAdd"}}">
+      <div class="flex flex-row items-center h-12">
+        <input type="text" name="pub_key" class="font-mono truncate flex-auto tracking-wider h-12 text-black focus:outline-none focus:ring-1 focus:ring-green-500 focus:border-transparent placeholder-gray-300" placeholder="@                                            .ed25519">
+        <input type="submit" value="{{i18n "AdminAllowListAdd"}}" class="pl-4 w-20 py-2 text-center text-green-500 hover:text-green-600 font-bold bg-transparent cursor-pointer">
+      </div>
     </form>
-</div> <!-- /row -->
+{{range .Entries}}
+    <li class="flex flex-row items-center h-12">
+      <span class="font-mono truncate flex-auto text-gray-600 tracking-wider">{{.PubKey.Ref}}</span>
+      <a href="{{urlTo "admin:allow-list:remove:confirm" "id" .ID}}" class="pl-4 w-20 py-2 text-center text-gray-400 hover:text-red-600 font-bold cursor-pointer">{{i18n "AdminAllowListRemove"}}</a>
+    </li>
+{{end}}
+  </ul>
 {{end}}

web/templates/base.tmpl

@@ -28,7 +28,7 @@
       {{end}}
     </div>
 
-    <div class="bg-gray-50 rounded-2xl p-4 shadow-xl mb-16">
+    <div class="bg-gray-50 rounded-2xl py-4 px-4 sm:px-8 shadow-xl mb-16">
       {{ block "content" . }}{{end}}
     </div>
   </div>