feat(web): Table view — client-side filter + server-side sortable headers

Two paired UX additions to the Table view (List | Table | Graph):

- Search input above the table (`<input data-search-input>` inside a
  `data-search-filter`/`data-search-scope` container) hooks into the
  existing v2-search-filter.js — no new JS needed. Each row carries
  `data-search-text` with CN, SAM, mail, DN concatenated so the
  substring filter matches both visible and adjacent attributes.
- Column headers are now anchor links that toggle the active sort.
  Server-side sort via ?sort=col&dir=asc|desc (URL captures state for
  back/forward + bookmarking). Clicking the active column flips dir;
  clicking another resets to asc. Active-column heading shows ↑ / ↓.

New helpers in internal/web/table_sort.go:
- normaliseSortDir, sortUsersTable, sortGroupsTable, sortComputersTable
- Status sort puts enabled rows first under asc — the more useful
  default than alphabetical "Disabled" / "Enabled".

Tests:
- TestNormaliseSortDir + per-entity sort tests cover ascending/
  descending, status semantics, unknown-key fallback to CN.
- TestHandleUsersV2_TableMode marker assertion updated to match the
  new sort-link / search-input markup.

The cookie-persisted view selection from the previous PR is unaffected
— sort/dir don't persist across views (they're meaningful only inside
Table view), and the existing filterQS stays threaded through the
header links so column clicks keep ?ou=, ?memberOf=, etc.

Signed-off-by: Sebastian Mendel <info@sebastianmendel.de>

Author: CybotTM

internal/web/computers_v2_handler.go

@@ -100,9 +100,13 @@ func (a *App) handleComputersV2(c *fiber.Ctx) error {
 	}
 
 	if currentView == "table" {
+		sortKey := c.Query("sort", "cn")
+		sortDir := normaliseSortDir(c.Query("dir", "asc"))
+		sortComputersTable(computers, sortKey, sortDir)
+
 		c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
 
-		return templates.ComputersListTableV2(computers, currentView, filterQS, a.takeFlash(c), a.paletteContextFor(viewerDN)).
+		return templates.ComputersListTableV2(computers, currentView, filterQS, sortKey, sortDir, a.takeFlash(c), a.paletteContextFor(viewerDN)).
 			Render(c.UserContext(), c.Response().BodyWriter())
 	}
 

internal/web/graph_v2_handler_test.go

@@ -345,7 +345,8 @@ func TestHandleUsersV2_TableMode(t *testing.T) {
 
 	for _, marker := range []string{
 		`class="list-table"`,
-		`<th scope="col">CN</th>`,
+		`list-table__sort-link`, // sortable column-header anchor
+		`data-search-input`,     // client-side filter input
 		"bob",
 		`graph-segmented`,
 	} {

internal/web/groups_v2_handler.go

@@ -327,9 +327,13 @@ func (a *App) handleGroupsV2(c *fiber.Ctx) error {
 	}
 
 	if currentView == "table" {
+		sortKey := c.Query("sort", "cn")
+		sortDir := normaliseSortDir(c.Query("dir", "asc"))
+		sortGroupsTable(groups, sortKey, sortDir)
+
 		c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
 
-		return templates.GroupsListTableV2(groups, currentView, filterQS, a.takeFlash(c), a.paletteContextFor(viewerDN)).
+		return templates.GroupsListTableV2(groups, currentView, filterQS, sortKey, sortDir, a.takeFlash(c), a.paletteContextFor(viewerDN)).
 			Render(c.UserContext(), c.Response().BodyWriter())
 	}
 

internal/web/static/app.css

@@ -2786,3 +2786,38 @@ button.kv-edit__save {
 .list-table__link:hover { text-decoration: underline; }
 .list-table__num { font-variant-numeric: tabular-nums; text-align: right; }
 .list-table__dn { color: var(--fg-muted); font-family: var(--font-mono, monospace); font-size: 0.85rem; word-break: break-all; }
+
+/* Search input directly above the table — same data-search-filter
+   wiring as the list view, so v2-search-filter.js handles row-hide
+   without further JS. */
+.list-table-filter { display: flex; flex-direction: column; gap: 0.75rem; }
+.list-table-filter__input {
+  width: 100%;
+  padding: 0.45rem 0.75rem;
+  font: inherit;
+  color: var(--fg);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+.list-table-filter__input:focus-visible {
+  outline: 2px solid var(--border-strong);
+  outline-offset: 2px;
+}
+
+/* Sortable column headers — anchor links so click-navigation works
+   without JS, indicator arrows show the active sort + direction. */
+.list-table__sort-th { padding: 0; }
+.list-table__sort-link {
+  display: block;
+  padding: 0.5rem 0.8rem;
+  color: var(--fg);
+  text-decoration: none;
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  letter-spacing: 0.03em;
+  font-weight: 600;
+}
+.list-table__sort-link:hover { background: var(--border); }
+.list-table__sort-link:focus-visible { outline: 2px solid var(--border-strong); outline-offset: -2px; }
+.list-table__sort-indicator { color: var(--fg-muted); font-weight: 400; }

internal/web/table_sort.go

@@ -0,0 +1,156 @@
+// internal/web/table_sort.go — sort helpers for the Table view
+// (List | Table | Graph). Sort key + direction are server-side
+// query params (?sort=col&dir=asc|desc), so the URL captures the
+// sort state and back/forward navigation works without JS.
+package web
+
+import (
+	"sort"
+	"strings"
+
+	ldap "github.com/netresearch/simple-ldap-go"
+)
+
+// normaliseSortDir clamps an unknown direction to "asc". Used so an
+// arbitrary ?dir=foo doesn't turn into a bug downstream.
+func normaliseSortDir(d string) string {
+	if d == "desc" {
+		return "desc"
+	}
+
+	return "asc"
+}
+
+// sortUsersTable sorts users in place by the requested column. Unknown
+// sort keys fall back to CN — the default column the table is
+// initially shown in.
+func sortUsersTable(users []ldap.User, key, dir string) {
+	dir = normaliseSortDir(dir)
+
+	less := func(i, j int) bool {
+		var a, b string
+
+		switch key {
+		case "sam":
+			a, b = users[i].SAMAccountName, users[j].SAMAccountName
+		case "mail":
+			if users[i].Mail != nil {
+				a = *users[i].Mail
+			}
+			if users[j].Mail != nil {
+				b = *users[j].Mail
+			}
+		case "status":
+			a, b = userStatusForSort(users[i]), userStatusForSort(users[j])
+		default: // "cn"
+			a, b = users[i].CN(), users[j].CN()
+		}
+
+		if a == b {
+			// Stable secondary key on DN so otherwise-equal rows have a
+			// deterministic order across renders.
+			return users[i].DN() < users[j].DN()
+		}
+
+		if dir == "desc" {
+			return strings.ToLower(a) > strings.ToLower(b)
+		}
+
+		return strings.ToLower(a) < strings.ToLower(b)
+	}
+
+	sort.SliceStable(users, less)
+}
+
+// sortGroupsTable sorts groups by the requested column.
+func sortGroupsTable(groups []ldap.Group, key, dir string) {
+	dir = normaliseSortDir(dir)
+
+	less := func(i, j int) bool {
+		switch key {
+		case "members":
+			a, b := len(groups[i].Members), len(groups[j].Members)
+			if a == b {
+				return groups[i].DN() < groups[j].DN()
+			}
+
+			if dir == "desc" {
+				return a > b
+			}
+
+			return a < b
+		case "dn":
+			a, b := groups[i].DN(), groups[j].DN()
+			if dir == "desc" {
+				return strings.ToLower(a) > strings.ToLower(b)
+			}
+
+			return strings.ToLower(a) < strings.ToLower(b)
+		default: // "cn"
+			a, b := groups[i].CN(), groups[j].CN()
+			if a == b {
+				return groups[i].DN() < groups[j].DN()
+			}
+
+			if dir == "desc" {
+				return strings.ToLower(a) > strings.ToLower(b)
+			}
+
+			return strings.ToLower(a) < strings.ToLower(b)
+		}
+	}
+
+	sort.SliceStable(groups, less)
+}
+
+// sortComputersTable sorts computers by the requested column.
+func sortComputersTable(computers []ldap.Computer, key, dir string) {
+	dir = normaliseSortDir(dir)
+
+	less := func(i, j int) bool {
+		var a, b string
+
+		switch key {
+		case "sam":
+			a, b = computers[i].SAMAccountName, computers[j].SAMAccountName
+		case "status":
+			a, b = computerStatusForSort(computers[i]), computerStatusForSort(computers[j])
+		case "dn":
+			a, b = computers[i].DN(), computers[j].DN()
+		default: // "cn"
+			a, b = computers[i].CN(), computers[j].CN()
+		}
+
+		if a == b {
+			return computers[i].DN() < computers[j].DN()
+		}
+
+		if dir == "desc" {
+			return strings.ToLower(a) > strings.ToLower(b)
+		}
+
+		return strings.ToLower(a) < strings.ToLower(b)
+	}
+
+	sort.SliceStable(computers, less)
+}
+
+// userStatusForSort maps Enabled→"a" / Disabled→"b" so an asc sort
+// puts enabled rows on top — the more useful default than alphabetical
+// "Disabled" / "Enabled".
+func userStatusForSort(u ldap.User) string {
+	if u.Enabled {
+		return "a"
+	}
+
+	return "b"
+}
+
+// computerStatusForSort mirrors userStatusForSort.
+func computerStatusForSort(c ldap.Computer) string {
+	if c.Enabled {
+		return "a"
+	}
+
+	return "b"
+}

internal/web/table_sort_test.go

@@ -0,0 +1,82 @@
+// internal/web/table_sort_test.go — unit coverage for the Table-view
+// server-side sort helpers. Stays in the web package so the test sees
+// the unexported sortUsersTable / sortGroupsTable / sortComputersTable
+// directly.
+package web
+
+import (
+	"testing"
+
+	ldap "github.com/netresearch/simple-ldap-go"
+	"github.com/stretchr/testify/require"
+
+	"github.com/netresearch/ldap-manager/internal/ldap_cache/cachetest"
+)
+
+func TestNormaliseSortDir(t *testing.T) {
+	require.Equal(t, "asc", normaliseSortDir(""))
+	require.Equal(t, "asc", normaliseSortDir("foo"))
+	require.Equal(t, "asc", normaliseSortDir("ASC")) // case-sensitive: only literal "desc" wins
+	require.Equal(t, "desc", normaliseSortDir("desc"))
+}
+
+func TestSortUsersTable_ByCNAscDesc(t *testing.T) {
+	users := []ldap.User{
+		cachetest.NewUserWithDN("cn=charlie,dc=ex,dc=com", "charlie", "csam", true, nil),
+		cachetest.NewUserWithDN("cn=alice,dc=ex,dc=com", "alice", "asam", true, nil),
+		cachetest.NewUserWithDN("cn=bob,dc=ex,dc=com", "bob", "bsam", false, nil),
+	}
+
+	sortUsersTable(users, "cn", "asc")
+	require.Equal(t, "alice", users[0].CN())
+	require.Equal(t, "bob", users[1].CN())
+	require.Equal(t, "charlie", users[2].CN())
+
+	sortUsersTable(users, "cn", "desc")
+	require.Equal(t, "charlie", users[0].CN())
+	require.Equal(t, "bob", users[1].CN())
+	require.Equal(t, "alice", users[2].CN())
+}
+
+func TestSortUsersTable_ByStatusEnabledFirst(t *testing.T) {
+	users := []ldap.User{
+		cachetest.NewUserWithDN("cn=disabled,dc=ex,dc=com", "disabled", "d", false, nil),
+		cachetest.NewUserWithDN("cn=enabled,dc=ex,dc=com", "enabled", "e", true, nil),
+	}
+	sortUsersTable(users, "status", "asc")
+	// "Enabled" (key "a") < "Disabled" (key "b") so enabled rows come
+	// first under asc — the documented contract for the status sort.
+	require.True(t, users[0].Enabled, "first row should be enabled under asc status sort")
+	require.False(t, users[1].Enabled)
+}
+
+func TestSortUsersTable_UnknownKeyFallsBackToCN(t *testing.T) {
+	users := []ldap.User{
+		cachetest.NewUserWithDN("cn=zed,dc=ex,dc=com", "zed", "z", true, nil),
+		cachetest.NewUserWithDN("cn=ann,dc=ex,dc=com", "ann", "a", true, nil),
+	}
+	sortUsersTable(users, "lol-not-a-column", "asc")
+	require.Equal(t, "ann", users[0].CN(), "unknown sort key should fall back to CN")
+}
+
+func TestSortGroupsTable_ByMembersDesc(t *testing.T) {
+	groups := []ldap.Group{
+		cachetest.NewGroupWithDN("cn=small,dc=ex,dc=com", "small", []string{"a"}),
+		cachetest.NewGroupWithDN("cn=big,dc=ex,dc=com", "big", []string{"a", "b", "c"}),
+		cachetest.NewGroupWithDN("cn=mid,dc=ex,dc=com", "mid", []string{"a", "b"}),
+	}
+	sortGroupsTable(groups, "members", "desc")
+	require.Equal(t, "big", groups[0].CN())
+	require.Equal(t, "mid", groups[1].CN())
+	require.Equal(t, "small", groups[2].CN())
+}
+
+func TestSortComputersTable_BySAM(t *testing.T) {
+	computers := []ldap.Computer{
+		cachetest.NewComputerWithDN("cn=ws03,dc=ex,dc=com", "ws03", "ws03$", true, nil),
+		cachetest.NewComputerWithDN("cn=ws01,dc=ex,dc=com", "ws01", "ws01$", true, nil),
+	}
+	sortComputersTable(computers, "sam", "asc")
+	require.Equal(t, "ws01$", computers[0].SAMAccountName)
+	require.Equal(t, "ws03$", computers[1].SAMAccountName)
+}