admin page updates

internal/view/adminview/user_list.templ

@@ -5,9 +5,16 @@ import "fmt"
 import "time"
 
 templ UserList(users *db.List[db.User]) {
-	<div class="space-y-4">
+	<div
+		id="users-list-container"
+		x-data={ fmt.Sprintf("{ page: %d, perPage: %d, order: '%s', orderBy: '%s' }",
+			users.PageOpts.Page,
+			users.PageOpts.PerPage,
+			users.PageOpts.Order,
+			users.PageOpts.OrderBy) }
+	>
 		<!-- Header -->
-		<div class="flex justify-between items-center">
+		<div class="flex justify-between items-center mb-4">
 			<h1 class="text-2xl font-bold text-text">User Management</h1>
 		</div>
 		<!-- Users table -->
@@ -21,11 +28,11 @@ templ UserList(users *db.List[db.User]) {
 					<table class="w-full">
 						<thead class="bg-mantle border-b border-surface1">
 							<tr>
-								<th class="px-4 py-3 text-left text-sm font-semibold text-text">ID</th>
-								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Username</th>
+								@userTableHeader("id", "ID", users.PageOpts.OrderBy, string(users.PageOpts.Order))
+								@userTableHeader("username", "Username", users.PageOpts.OrderBy, string(users.PageOpts.Order))
 								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Discord ID</th>
 								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Roles</th>
-								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Created</th>
+								@userTableHeader("created_at", "Created", users.PageOpts.OrderBy, string(users.PageOpts.Order))
 								<th class="px-4 py-3 text-left text-sm font-semibold text-text">Actions</th>
 							</tr>
 						</thead>
@@ -64,10 +71,96 @@ templ UserList(users *db.List[db.User]) {
 					</table>
 				</div>
 			</div>
+			<!-- Pagination controls -->
+			<div class="mt-6 flex flex-col gap-4">
+				<!-- Page info and per-page selector -->
+				<div class="flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-subtext0">
+					<div>
+						if users.Total > 0 {
+							Showing { fmt.Sprintf("%d", users.PageOpts.StartItem()) } - { fmt.Sprintf("%d", users.PageOpts.EndItem(users.Total)) } of { fmt.Sprintf("%d", users.Total) } users
+						} else {
+							No users
+						}
+					</div>
+					<div class="flex items-center gap-2">
+						<label for="users-per-page-select">Per page:</label>
+						<select
+							id="users-per-page-select"
+							class="py-1 px-2 rounded-lg bg-surface0 border border-surface1 text-text focus:border-blue outline-none"
+							x-model.number="perPage"
+							@change="submitUsersPage(page, perPage, order, orderBy)"
+						>
+							<option value="10">10</option>
+							<option value="25">25</option>
+							<option value="50">50</option>
+							<option value="100">100</option>
+						</select>
+					</div>
+				</div>
+				<!-- Pagination buttons -->
+				if users.Total > 0 && users.PageOpts.TotalPages(users.Total) > 1 {
+					<div class="flex flex-wrap justify-center items-center gap-2">
+						@paginationButton("First", "<<", fmt.Sprintf("submitUsersPage(1, perPage, order, orderBy)"), !users.PageOpts.HasPrevPage())
+						@paginationButton("Previous", "<", fmt.Sprintf("submitUsersPage(%d, perPage, order, orderBy)", users.PageOpts.Page-1), !users.PageOpts.HasPrevPage())
+						for _, pageNum := range users.PageOpts.GetPageRange(users.Total, 7) {
+							@pageNumberButton(pageNum, users.PageOpts.Page, "submitUsersPage")
+						}
+						@paginationButton("Next", ">", fmt.Sprintf("submitUsersPage(%d, perPage, order, orderBy)", users.PageOpts.Page+1), !users.PageOpts.HasNextPage(users.Total))
+						@paginationButton("Last", ">>", fmt.Sprintf("submitUsersPage(%d, perPage, order, orderBy)", users.PageOpts.TotalPages(users.Total)), !users.PageOpts.HasNextPage(users.Total))
+					</div>
+				}
+			</div>
 		}
 	</div>
 }
 
+templ userTableHeader(field string, label string, currentField string, currentOrder string) {
+	{{
+		isActive := currentField == field
+		baseClasses := "px-4 py-3 text-left text-sm font-semibold text-text cursor-pointer select-none hover:text-blue transition-colors"
+		arrow := ""
+		if isActive {
+			if currentOrder == "ASC" {
+				arrow = " ↑"
+			} else {
+				arrow = " ↓"
+			}
+		}
+	}}
+	<th class={ baseClasses } @click={ fmt.Sprintf("sortUsersColumn('%s', order, orderBy)", field) }>
+		{ label }
+		if arrow != "" {
+			<span class="text-blue">{ arrow }</span>
+		}
+	</th>
+}
+
+templ paginationButton(longText string, shortText string, onClick string, disabled bool) {
+	<button
+		type="button"
+		@click={ onClick }
+		class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
+		:disabled={ fmt.Sprintf("%t", disabled) }
+		:class={ fmt.Sprintf("%t", disabled) + 
+			" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
+	>
+		<span class="hidden sm:inline">{ longText }</span>
+		<span class="sm:hidden">{ shortText }</span>
+	</button>
+}
+
+templ pageNumberButton(pageNum int, currentPage int, funcName string) {
+	<button
+		type="button"
+		@click={ fmt.Sprintf("%s(%d, perPage, order, orderBy)", funcName, pageNum) }
+		class={ "px-3 py-2 rounded-lg border transition", 
+			templ.KV("bg-blue border-blue text-mantle font-bold", pageNum == currentPage),
+			templ.KV("bg-mantle border-surface1 text-text hover:bg-surface0 hover:border-blue cursor-pointer", pageNum != currentPage) }
+	>
+		{ fmt.Sprintf("%d", pageNum) }
+	</button>
+}
+
 func formatTimestamp(unixTime int64) string {
 	t := time.Unix(unixTime, 0)
 	return t.Format("Jan 2, 2006")