From e263b806c643341d8d64238dcd0fe2b9111c55a6 Mon Sep 17 00:00:00 2001
From: "Riley L." <riley@e926.de>
Date: Wed, 13 Nov 2024 22:27:59 +0100
Subject: [PATCH] merge

---
 abrechenbarkeit.lua | 34 +++++++++++++++++++++++++++++++++-
 locale/en.ini       |  1 +
 style.css           | 45 +++++++++++++++++++++++++++++++++++++++------
 3 files changed, 73 insertions(+), 7 deletions(-)

diff --git a/abrechenbarkeit.lua b/abrechenbarkeit.lua
index f02e888..12514d2 100755
--- a/abrechenbarkeit.lua
+++ b/abrechenbarkeit.lua
@@ -532,6 +532,8 @@ end
 
 local function r_users(show_special)
     return respond(200, "Abrechenbarkeit", function()
+		local users = get_active_users()
+    
         if not show_special then
             print(format([[
                 <form action="/" method="GET" id="user_creation">
@@ -541,9 +543,39 @@ local function r_users(show_special)
                     <input type="submit" value="{+index.form.create_user.submit}" class="button amount-ntr" />
                 </form>
             ]]))
+
+			-- get first letters
+			local firstletters = {}
+			local function contains(char)
+				for _, firstchar in ipairs(firstletters) do
+					if firstchar == char then
+						return true
+					end
+				end
+
+				return false
+			end
+			
+	        for _, user in ipairs(users) do
+	        	user.firstchar = user.name:sub(1,1):lower()
+				if user.firstchar ~= "@" and not contains(user.firstchar) then
+					table.insert(firstletters, user.firstchar)
+				end
+    		end
+
+    		table.sort(firstletters)
+
+            print(format([[<section class="firstletterlist"><h3>{+users.filter}</h3><ul>]]))
+    		for k, letter in ipairs(firstletters) do
+    			print(format([[<li><a href="?users&prefix={letter}">{letter}</a></li>]], {
+    				letter = letter,
+    			}))
+    		end
+    		print([[</ul></section>]])
         end
         print([[<div class="userlist"></div>]]) -- for printing
         print([[<ul class="userlist">]])
+
         local show_user = function(user)
             local is_spu = user.name:sub(1, 1) == "@"
             local filter_out = query.prefix ~= nil and user.name:sub(1,1):lower() ~= query.prefix
@@ -566,7 +598,7 @@ local function r_users(show_special)
         end
         print("</ul>")
         print(format([[<details><summary>{+users.inactive_list}</summary><ul class="userlist">]]))
-        for _, user in ipairs(get_active_users()) do
+        for _, user in ipairs(users) do
             if user.time <= inactive_cutoff then show_user(user) end
         end
         print([[</ul></details>]])
diff --git a/locale/en.ini b/locale/en.ini
index 44cf1e7..e12704c 100644
--- a/locale/en.ini
+++ b/locale/en.ini
@@ -53,6 +53,7 @@ user.form.transaction.success=Transaction successful
 spus=SPUs
 users=Users
 user.special=This is a special user.
+users.filter=Filter
 error.unknown_product=Unknown product
 error.invalid_amount=Amount invalid
 error.invalid_comment=Comment invalid
diff --git a/style.css b/style.css
index 35e0058..6c11cf9 100644
--- a/style.css
+++ b/style.css
@@ -123,31 +123,64 @@ form#user_creation>* {
     margin-right: 1.5em;
 }
 
-ul.userlist>li a {
+ul.userlist>li a, .firstletterlist>ul>li a {
     text-decoration: none;
 }
 
-ul.userlist {
+.firstletterlist>h3 {
+    margin: 5px;
+    margin-right: 2em;
+}
+
+ul.userlist, .firstletterlist {
+    padding: 1em;
+    padding-top: 0;
+    margin-top: 2em;
+    border-radius: 4px;
+}
+
+ul.userlist, .firstletterlist>ul {
     display: grid;
     justify-content: left;
     grid-auto-rows: minmax(5em, auto);
     gap: 1em;
     grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
     list-style-type: none;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 1em;
 }
 
-.userlist>li>a {
+.firstletterlist {
+    background-color: var(--b2);
+    padding: 1em;
+	border-radius: 4px;
+}
+
+.firstletterlist>ul {
+    grid-auto-rows: minmax(2em, auto);
+    grid-template-columns: repeat(auto-fill, minmax(3em, 1fr));
+    padding-left: 1em;
+}
+
+ul.userlist>li a, .firstletterlist>ul>li a {
     border-radius: 4px;
     background-color: var(--b2);
+	border-radius: 4px;
     padding: 1em;
     display: inline-block;
     width: 6em;
     height: 3.5em;
 }
 
+.firstletterlist>ul>li a {
+	border-radius: 4px;
+	background-color: var(--b0);
+	padding: .2em;
+	display: inline-block;
+	text-align: center;
+	width: 1.6em;
+	height: 1.6em;
+	font-size: 1.2em;
+}
+
 .name {
     display: block;
     overflow: hidden;