admin page updates

internal/view/adminview/roles_list.templ

@@ -1,14 +1,82 @@
 package adminview
 
-templ RolesList() {
+import (
+	"fmt"
+	"git.haelnorr.com/h/oslstats/internal/db"
+)
+
+templ RolesList(roles []*db.Role) {
 	<div class="space-y-4">
-		<!-- Header -->
+		<!-- Header with Create Button -->
 		<div class="flex justify-between items-center">
 			<h1 class="text-2xl font-bold text-text">Role Management</h1>
+			<button
+				class="px-4 py-2 bg-blue text-mantle rounded-lg font-semibold hover:bg-sky transition"
+				hx-get="/admin/roles/create"
+				hx-target="#role-modal"
+				hx-swap="innerHTML"
+			>
+				+ Create Role
+			</button>
 		</div>
-		<!-- Placeholder content -->
-		<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
-			<p class="text-subtext0 text-lg">Roles management coming soon...</p>
+		<!-- Roles Table -->
+		<div class="bg-surface0 border border-surface1 rounded-lg overflow-hidden">
+			<table class="w-full">
+				<thead class="bg-surface1">
+					<tr>
+						<th class="px-6 py-3 text-left text-sm font-semibold text-text">Name</th>
+						<th class="px-6 py-3 text-left text-sm font-semibold text-text">Description</th>
+						<th class="px-6 py-3 text-left text-sm font-semibold text-text">Type</th>
+						<th class="px-6 py-3 text-right text-sm font-semibold text-text">Actions</th>
+					</tr>
+				</thead>
+				<tbody class="divide-y divide-surface1">
+					if len(roles) == 0 {
+						<tr>
+							<td colspan="4" class="px-6 py-8 text-center text-subtext0">No roles found</td>
+						</tr>
+					} else {
+						for _, role := range roles {
+							@roleRow(role)
+						}
+					}
+				</tbody>
+			</table>
+		</div>
+	</div>
+	<!-- Modal Container -->
+	<div id="role-modal"></div>
+	<!-- Confirmation Dialog Container -->
+	<div id="confirm-dialog"></div>
+	<!-- Loading Indicator -->
+	<div id="loading-indicator" class="htmx-indicator fixed inset-0 bg-crust/80 flex items-center justify-center z-50">
+		<div class="bg-surface0 border border-surface1 rounded-lg p-6 text-center">
+			<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue mx-auto mb-4"></div>
+			<p class="text-text font-semibold">Loading preview...</p>
 		</div>
 	</div>
 }
+
+templ roleRow(role *db.Role) {
+	<tr class="hover:bg-surface1/50 transition">
+		<td class="px-6 py-4 text-sm text-text font-semibold">{ role.DisplayName }</td>
+		<td class="px-6 py-4 text-sm text-subtext0">{ role.Description }</td>
+		<td class="px-6 py-4 text-sm">
+			if role.IsSystem {
+				<span class="px-2 py-1 bg-yellow/20 text-yellow rounded text-xs font-semibold">SYSTEM</span>
+			} else {
+				<span class="px-2 py-1 bg-surface2 text-subtext0 rounded text-xs">Custom</span>
+			}
+		</td>
+		<td class="px-6 py-4 text-sm text-right">
+			<button
+				class="px-4 py-2 bg-blue text-mantle rounded-lg hover:bg-sky transition text-sm font-semibold"
+				hx-get={ fmt.Sprintf("/admin/roles/%d/manage", role.ID) }
+				hx-target="#role-modal"
+				hx-swap="innerHTML"
+			>
+				Manage
+			</button>
+		</td>
+	</tr>
+}