Member list filter

internal/core/templates/org.html

@@ -106,11 +106,23 @@
       {{end}}
     </div>
 
-    <div class="card mt-3">
-      <div class="card-header"><h3 class="card-title">Members</h3></div>
-      <div class="list-group list-group-flush">
+    <div class="card mt-3 member-card">
+      <div class="card-header">
+        <h3 class="card-title">Members</h3>
+        <div class="card-actions">
+          <div class="btn-group" role="group" aria-label="Filter members">
+            <input type="radio" class="btn-check" name="member-filter" id="mf-all" value="all" autocomplete="off" checked>
+            <label for="mf-all" class="btn btn-sm">All</label>
+            <input type="radio" class="btn-check" name="member-filter" id="mf-member" value="member" autocomplete="off">
+            <label for="mf-member" class="btn btn-sm">Members</label>
+            <input type="radio" class="btn-check" name="member-filter" id="mf-admin" value="admin" autocomplete="off">
+            <label for="mf-admin" class="btn btn-sm">Admins</label>
+          </div>
+        </div>
+      </div>
+      <div class="list-group list-group-flush" id="member-list">
         {{range .Members}}
-        <div class="list-group-item d-flex align-items-center flex-wrap gap-2">
+        <div class="list-group-item d-flex align-items-center flex-wrap gap-2" data-role="{{.Role}}">
           <div class="flex-fill text-truncate">
             <span class="fw-bold">{{.Name}}</span>
             <span class="text-secondary">@{{.Username}}</span>
@@ -134,15 +146,21 @@
 
   <!-- Right column -->
   <div class="col-lg-4">
-    {{if .Org.Description}}
+    {{if not .IsAdmin}}
     <div class="card">
       <div class="card-header"><h3 class="card-title">About</h3></div>
-      <div class="card-body"><p class="mb-0">{{.Org.Description}}</p></div>
+      <div class="card-body">
+        {{if .Org.Description}}
+        <p class="mb-0">{{.Org.Description}}</p>
+        {{else}}
+        <p class="text-secondary mb-0">No description yet.</p>
+        {{end}}
+      </div>
     </div>
     {{end}}
 
     {{if .IsAdmin}}
-    <div class="card {{if .Org.Description}}mt-3{{end}}">
+    <div class="card">
       <div class="card-header"><h3 class="card-title">Organization profile <span class="text-secondary">(public)</span></h3></div>
       <div class="card-body">
         <form method="post" action="/orgs/{{.Org.Slug}}/edit">

internal/web/static/app.css

@@ -75,6 +75,16 @@ code.pubkey {
 .badge.bg-purple-lt { color: #d98fe6 !important; }
 .badge.bg-secondary-lt { color: var(--tblr-secondary-text-emphasis) !important; }
 
+/* ---------- Members role filter (org page) ----------
+   The All/Members/Admins button group filters the members list purely in CSS:
+   the checked radio in the card header drives which rows show via :has(). Rows
+   carry `.d-flex` (display:flex !important), so the hide must be `!important`
+   and specific enough to win — which this selector easily is. */
+.member-card:has(#mf-admin:checked) #member-list [data-role="member"],
+.member-card:has(#mf-member:checked) #member-list [data-role="admin"] {
+  display: none !important;
+}
+
 /* ---------- Step indicator (.steps) ----------
    Tabler ships two unrelated components under the same `.steps` class: the
    horizontal step indicator (ul.steps > li.step-item) we use on the add/added