Merge master into worktree-server-stopped-false-positive

Author: davegaeddert

example/app/users/admin.py

@@ -1,9 +1,11 @@
+from plain import postgres
 from plain.admin.views import (
     AdminModelDetailView,
     AdminModelListView,
     AdminViewset,
     register_viewset,
 )
+from plain.http import Response
 
 from .models import User
 
@@ -17,8 +19,21 @@ class ListView(AdminModelListView):
         title = "Users"
         fields = ["id", "email", "is_admin", "created_at"]
         search_fields = ["email"]
+        actions = ["Make admin", "Remove admin", "Export emails"]
         allow_global_search = True
         queryset_order = ["-created_at"]
 
+        def perform_action(
+            self, action: str, objects: postgres.QuerySet
+        ) -> Response | None:
+            if action == "Make admin":
+                objects.update(is_admin=True)
+            elif action == "Remove admin":
+                objects.update(is_admin=False)
+            elif action == "Export emails":
+                emails = objects.values_list("email", flat=True)
+                return Response("\n".join(emails), content_type="text/plain")
+            return None
+
     class DetailView(AdminModelDetailView):
         model = User

plain-admin/plain/admin/README.md

@@ -436,21 +436,19 @@ class ListView(AdminModelListView):
     fields = ["id", "email", "is_active"]
     actions = ["Activate", "Deactivate", "Delete selected"]
 
-    def perform_action(self, action, target_ids):
-        users = User.query.filter(id__in=target_ids)
-
+    def perform_action(self, action, objects):
         if action == "Activate":
-            users.update(is_active=True)
+            objects.update(is_active=True)
         elif action == "Deactivate":
-            users.update(is_active=False)
+            objects.update(is_active=False)
         elif action == "Delete selected":
-            users.delete()
+            objects.delete()
 
         # Return None to redirect back to the list, or return a Response
         return None
 ```
 
-The `target_ids` parameter contains the IDs of selected items. Users can select individual items or use "Select all" to target the entire filtered queryset.
+The `objects` parameter is the set of selected items, already narrowed to the current filtered view. On a model list it's a queryset, so you can run set-based `.update()`/`.delete()` directly without re-querying — and "Select all N" scales, because the whole page's worth of ids never has to be materialized. Users can select individual rows, use the header checkbox to select the whole current page, or click "Select all N" to target the entire filtered queryset across every page. Choosing an action from the **Actions** dropdown confirms before submitting.
 
 ## Toolbar
 

plain-admin/plain/admin/assets/admin/list.js

@@ -3,30 +3,92 @@ const SENTINEL_ALL = "__all__";
 let actionCheckboxes = [];
 let actionCheckboxHeader = null;
 let actionIdsInput = null;
+let actionNameInput = null;
 let actionForm = null;
+let selectionHeader = null;
+let selectionSummary = null;
+let selectAllButton = null;
+let actionMenuItems = [];
+
+// All-pages selection is an explicit mode, entered only via the "Select all N"
+// button. Any deselection exits it. When active, action_ids is the __all__
+// sentinel the backend expands to every object across every page.
+let selectAllPages = false;
+let lastActionCheckboxChecked = null;
 
 function refreshActionCache() {
   actionCheckboxes = [...document.querySelectorAll("[data-action-checkbox]")];
   actionCheckboxHeader = document.querySelector("[data-action-checkbox-all]");
-  actionIdsInput = document.querySelector('[name="action_ids"]');
   actionForm = document.querySelector("[data-actions-form]");
+  actionIdsInput = actionForm?.querySelector('[name="action_ids"]') ?? null;
+  actionNameInput = actionForm?.querySelector('[name="action_name"]') ?? null;
+  selectionHeader = actionForm?.closest("header") ?? null;
+  selectionSummary = document.querySelector("[data-selection-summary]");
+  selectAllButton = document.querySelector("[data-action-select-all]");
+  actionMenuItems = [...document.querySelectorAll("[data-action-name]")];
+  updateSelectionUI();
 }
 
 document.addEventListener("DOMContentLoaded", refreshActionCache);
-document.addEventListener("htmx:afterSwap", refreshActionCache);
+document.addEventListener("htmx:afterSwap", () => {
+  selectAllPages = false;
+  lastActionCheckboxChecked = null;
+  refreshActionCache();
+});
 
-let lastActionCheckboxChecked = null;
+function checkedCount() {
+  return actionCheckboxes.filter((cb) => cb.checked).length;
+}
 
-function updateActionIds() {
-  if (!actionIdsInput) return;
-  if (actionCheckboxHeader?.checked) {
-    actionIdsInput.value = SENTINEL_ALL;
-  } else {
-    const ids = [];
-    actionCheckboxes.forEach((cb) => {
-      if (cb.checked) ids.push(cb.getAttribute("name"));
-    });
-    actionIdsInput.value = ids.join(",");
+function totalCount() {
+  return parseInt(actionForm?.dataset.totalCount ?? "0", 10);
+}
+
+function updateSelectionUI() {
+  const totalOnPage = actionCheckboxes.length;
+  const checked = checkedCount();
+  const total = totalCount();
+  const fullPageSelected = totalOnPage > 0 && checked === totalOnPage;
+
+  // Header checkbox reflects the current page: checked when the whole page is
+  // selected, indeterminate when only some rows are.
+  if (actionCheckboxHeader) {
+    actionCheckboxHeader.checked = fullPageSelected;
+    actionCheckboxHeader.indeterminate = checked > 0 && checked < totalOnPage;
+  }
+
+  // Presence-based flag that swaps the results count for the selection bar.
+  if (selectionHeader) {
+    if (checked > 0) selectionHeader.setAttribute("data-selecting", "");
+    else selectionHeader.removeAttribute("data-selecting");
+  }
+
+  if (selectionSummary) {
+    selectionSummary.textContent = selectAllPages ? `All ${total} selected` : `${checked} selected`;
+  }
+
+  // The Actions dropdown is always visible, but its items only act when
+  // something is selected — disable them otherwise (CSS dims + blocks them,
+  // components.js drops them from keyboard nav, and the menu heading hints why).
+  actionMenuItems.forEach((item) => {
+    if (checked > 0) item.removeAttribute("aria-disabled");
+    else item.setAttribute("aria-disabled", "true");
+  });
+
+  // Offer "Select all N" only once the whole page is selected, we're not
+  // already in all-pages mode, and there's more than this page to select.
+  if (selectAllButton) {
+    const showSelectAll = fullPageSelected && !selectAllPages && total > totalOnPage;
+    selectAllButton.classList.toggle("hidden", !showSelectAll);
+  }
+
+  if (actionIdsInput) {
+    if (selectAllPages) {
+      actionIdsInput.value = SENTINEL_ALL;
+    } else {
+      const ids = actionCheckboxes.filter((cb) => cb.checked).map((cb) => cb.getAttribute("name"));
+      actionIdsInput.value = ids.join(",");
+    }
   }
 }
 
@@ -35,44 +97,54 @@ document.addEventListener("change", (e) => {
   if (!(target instanceof HTMLInputElement)) return;
 
   if (target.matches("[data-action-checkbox]")) {
-    if (actionCheckboxHeader?.checked) {
-      const checkedCount = actionCheckboxes.filter((cb) => cb.checked).length;
-      if (checkedCount !== actionCheckboxes.length) actionCheckboxHeader.checked = false;
-    }
-    updateActionIds();
+    if (!target.checked) selectAllPages = false;
+    updateSelectionUI();
     return;
   }
 
   if (target.matches("[data-action-checkbox-all]")) {
     actionCheckboxes.forEach((cb) => {
       cb.checked = target.checked;
     });
-    updateActionIds();
+    if (!target.checked) selectAllPages = false;
+    updateSelectionUI();
   }
 });
 
-document.addEventListener("change", (e) => {
-  const select = e.target;
-  if (!select.matches('[name="action_name"]')) return;
-  if (!select.value) return;
-
-  const actionName = select.value;
-  const ids = actionIdsInput?.value ?? "";
-  const count = ids && ids !== SENTINEL_ALL ? ids.split(",").length : 0;
-  const target =
-    ids === SENTINEL_ALL
-      ? "ALL items across all pages"
-      : count > 0
-        ? `${count} selected ${count === 1 ? "item" : "items"}`
-        : null;
-  const confirmMessage = target
-    ? `Are you sure you want to perform "${actionName}" on ${target}?`
-    : `Are you sure you want to perform "${actionName}"?`;
-
-  if (confirm(confirmMessage)) {
-    actionForm?.submit();
-  } else {
-    select.value = "";
+document.addEventListener("click", (e) => {
+  const target = e.target;
+  if (!(target instanceof Element)) return;
+
+  if (target.closest("[data-action-select-all]")) {
+    selectAllPages = true;
+    updateSelectionUI();
+    return;
+  }
+
+  if (target.closest("[data-action-clear]")) {
+    actionCheckboxes.forEach((cb) => {
+      cb.checked = false;
+    });
+    selectAllPages = false;
+    updateSelectionUI();
+    return;
+  }
+
+  const actionItem = target.closest("[data-action-name]");
+  if (actionItem) {
+    if (actionItem.getAttribute("aria-disabled") === "true") return;
+    const actionName = actionItem.getAttribute("data-action-name");
+    const checked = checkedCount();
+    const confirmMessage = selectAllPages
+      ? `Are you sure you want to perform "${actionName}" on all ${totalCount()} items across all pages?`
+      : `Are you sure you want to perform "${actionName}" on ${checked} selected item${checked === 1 ? "" : "s"}?`;
+
+    if (confirm(confirmMessage)) {
+      if (actionNameInput) actionNameInput.value = actionName;
+      actionForm?.submit();
+    }
+    // The dropdown-menu component closes itself on menuitem click, so a
+    // cancelled confirm just leaves the menu closed with the selection intact.
   }
 });
 
@@ -89,7 +161,8 @@ document.addEventListener("click", (e) => {
     const min = Math.min(thisIndex, lastIndex);
     const max = Math.max(thisIndex, lastIndex);
     for (let i = min; i <= max; i++) actionCheckboxes[i].checked = target.checked;
-    updateActionIds();
+    if (!target.checked) selectAllPages = false;
+    updateSelectionUI();
   } else {
     lastActionCheckboxChecked = target;
   }

plain-admin/plain/admin/assets/admin/menu.js

@@ -1,12 +1,13 @@
 /**
- * Admin menu — filter input inside the menu popover, plus drag-and-drop
- * reordering for pinned tabs in the header strip. The popover's
- * open/close behavior comes from basecoat (assets/admin/components/popover.js)
- * — this file only wires the filter and the tab DnD.
+ * Admin menu — the filter inside the menu popover (filtering + empty state),
+ * plus drag-and-drop reordering for pinned tabs in the header strip. The
+ * popover's open/close behavior comes from basecoat
+ * (assets/admin/components/popover.js).
  */
 document.addEventListener("DOMContentLoaded", () => {
   const filterInput = document.getElementById("menu-filter-input");
   const menuPopover = document.getElementById("admin-menu-popover");
+  const emptyState = document.getElementById("menu-empty-state");
 
   if (filterInput) {
     filterInput.addEventListener("input", (e) => {
@@ -67,14 +68,22 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     });
 
-    // Hide the App / Packages section entirely if nothing under it
+    // Hide a whole section (label, divider, and all) if nothing under it
     // matches.
     sections.forEach((section) => {
       const hasVisibleItems = Array.from(section.querySelectorAll(".menu-item")).some(
         (item) => !item.classList.contains("hidden"),
       );
       section.classList.toggle("hidden", !hasVisibleItems);
     });
+
+    // Show the empty state when the filter matched nothing.
+    if (emptyState) {
+      const anyVisible = Array.from(container.querySelectorAll(".menu-item")).some(
+        (item) => !item.classList.contains("hidden"),
+      );
+      emptyState.classList.toggle("hidden", anyVisible);
+    }
   }
 
   // Drag and drop for nav bar tabs (pinned items only)

plain-admin/plain/admin/styles/components/checkbox.css

@@ -2,12 +2,17 @@
 @layer components {
   :is(.form, .admin-field) input[type='checkbox']:not([role='switch']),
   .admin-input[type='checkbox']:not([role='switch']) {
-    @apply focus-control appearance-none border-admin-input dark:bg-admin-input/30 checked:bg-admin-primary dark:checked:bg-admin-primary checked:border-admin-primary size-4 shrink-0 border shadow-xs transition-shadow outline-none disabled:cursor-not-allowed disabled:opacity-50;
+    @apply focus-control appearance-none border-admin-input dark:bg-admin-input/30 checked:bg-admin-primary dark:checked:bg-admin-primary checked:border-admin-primary indeterminate:bg-admin-primary dark:indeterminate:bg-admin-primary indeterminate:border-admin-primary size-4 shrink-0 border shadow-xs transition-shadow outline-none disabled:cursor-not-allowed disabled:opacity-50;
     border-radius: var(--radius-checkbox);
-    
+
     &:checked:after {
       @apply content-[''] block size-3.5 bg-admin-primary-foreground;
       @apply mask-[image:var(--check-icon)] mask-size-[0.875rem] mask-no-repeat mask-center;
     }
+
+    &:indeterminate:after {
+      @apply content-[''] block size-3.5 bg-admin-primary-foreground;
+      @apply mask-[image:var(--minus-icon)] mask-size-[0.875rem] mask-no-repeat mask-center;
+    }
   }
 }

plain-admin/plain/admin/styles/components/hovercard.css

@@ -9,7 +9,14 @@
      <span class="admin-hovercard">
        <some-trigger />
        <div data-hovercard>…panel content…</div>
-     </span> */
+     </span>
+
+   Placement: defaults to opening below the trigger. Set
+   `data-hovercard-side="right|left|top|bottom"` on the panel — or on any
+   ancestor, e.g. a table column — to change the side. Setting it on an
+   ancestor lets a whole column of hovercards (including the auto-wrapped
+   <time> ones) open to one side, keeping the trigger column clear so you
+   can scan straight down it without the open panel covering the next row. */
 @layer components {
   .admin-hovercard {
     @apply relative inline-flex;
@@ -20,6 +27,7 @@
     border-radius: var(--radius-popover);
     --admin-overlay-fade: 100ms;
 
+    /* Default placement; overridden per-side below. */
     position-area: bottom span-right;
     position-try-fallbacks: flip-block, flip-inline;
     margin: 0.25rem 0;
@@ -41,4 +49,36 @@
       }
     }
   }
+
+  /* Placement overrides. Each side sets its own edge-flip order (flip toward
+     the opposite side first) and swaps the gap to the relevant axis. Matched
+     on the panel itself OR any ancestor carrying data-hovercard-side, so a
+     container (a table column, say) can steer every hovercard inside it. */
+  [data-hovercard][data-hovercard-side="right"],
+  [data-hovercard-side="right"] [data-hovercard] {
+    position-area: right span-bottom;
+    position-try-fallbacks: flip-inline, flip-block;
+    margin: 0 0.25rem;
+  }
+
+  [data-hovercard][data-hovercard-side="left"],
+  [data-hovercard-side="left"] [data-hovercard] {
+    position-area: left span-bottom;
+    position-try-fallbacks: flip-inline, flip-block;
+    margin: 0 0.25rem;
+  }
+
+  [data-hovercard][data-hovercard-side="top"],
+  [data-hovercard-side="top"] [data-hovercard] {
+    position-area: top span-right;
+    position-try-fallbacks: flip-block, flip-inline;
+    margin: 0.25rem 0;
+  }
+
+  [data-hovercard][data-hovercard-side="bottom"],
+  [data-hovercard-side="bottom"] [data-hovercard] {
+    position-area: bottom span-right;
+    position-try-fallbacks: flip-block, flip-inline;
+    margin: 0.25rem 0;
+  }
 }

plain-admin/plain/admin/styles/components/table.css

@@ -15,10 +15,10 @@
       @apply hover:bg-admin-muted/50 border-b transition-colors;
     }
     th {
-      @apply text-admin-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
+      @apply text-admin-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap;
     }
     td {
-      @apply p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
+      @apply p-2 align-middle whitespace-nowrap;
     }
     caption {
       @apply text-admin-muted-foreground mt-4 text-sm;