Screenly
diff --git a/‎src/anthias_server/app/helpers.py‎
Lines changed: 7 additions & 2 deletions b/‎src/anthias_server/app/helpers.py‎
Lines changed: 7 additions & 2 deletions
diff --git a/‎src/anthias_server/app/static/sass/_styles.scss‎
Lines changed: 145 additions & 9 deletions b/‎src/anthias_server/app/static/sass/_styles.scss‎
Lines changed: 145 additions & 9 deletions
diff --git a/‎src/anthias_server/app/static/src/home.ts‎
Lines changed: 129 additions & 0 deletions b/‎src/anthias_server/app/static/src/home.ts‎
Lines changed: 129 additions & 0 deletions
@@ -116,7 +116,7 @@ def remove_default_assets() -> None:
             asset.delete()
 
 
-def delete_asset_with_file(asset: Asset) -> None:
+def delete_asset_with_file(asset: Asset, *, nudge_viewer: bool = True) -> None:
     """Delete an ``Asset`` row, remove its on-disk file (if owned), and
     nudge the viewer to advance past it.
 
@@ -132,6 +132,10 @@ def delete_asset_with_file(asset: Asset) -> None:
     and a stray file is eventually cleaned up by the periodic
     ``cleanup()`` orphan sweep — letting an unlink error block the DB
     delete would leave the operator unable to remove the row at all.
+
+    ``nudge_viewer=False`` skips the per-row viewer reload so a bulk
+    delete can fire a single reload after the whole batch instead of
+    spamming the pub/sub channel once per asset (#3046).
     """
     if asset.uri and asset.uri.startswith(settings['assetdir']):
         try:
@@ -147,4 +151,5 @@ def delete_asset_with_file(asset: Asset) -> None:
     # screen instead of finishing its remaining ``duration`` (#2430).
     # The viewer's reload handler checks whether the currently-shown
     # asset is still active and advances if not.
-    ViewerPublisher.get_instance().send_to_viewer('reload')
+    if nudge_viewer:
+        ViewerPublisher.get_instance().send_to_viewer('reload')
@@ -477,23 +477,34 @@ label { text-align: left; }
       &[data-no-label]::before { display: none; }
     }
 
-    // Home rows: 2-column grid. Name spans both, schedule + duration
-    // share row 2, toggle + actions share row 3. Right-aligned cells
-    // align their labels to match.
+    // Home rows: 2-column grid. The select checkbox (child 1) is
+    // lifted out of flow into the top-left corner; name (child 2)
+    // spans both columns, schedule + duration share row 2, toggle +
+    // actions share row 3. Right-aligned cells align their labels to
+    // match.
     tbody tr[data-asset-id] {
       display: grid;
       grid-template-columns: 1fr auto;
       gap: var(--space-2) var(--space-3);
-
-      td:nth-child(1) { grid-column: 1 / -1; }
-      td:nth-child(2) { grid-column: 1 / 2; }
-      td:nth-child(3) {
+      position: relative;
+      padding-left: 1.9rem;
+
+      td.asset-select-col {
+        position: absolute;
+        left: 0;
+        top: var(--space-3);
+        padding: 0;
+        &::before { display: none; }
+      }
+      td:nth-child(2) { grid-column: 1 / -1; }
+      td:nth-child(3) { grid-column: 1 / 2; }
+      td:nth-child(4) {
         grid-column: 2 / 3;
         text-align: right;
         &::before { text-align: right; }
       }
-      td:nth-child(4) { grid-column: 1 / 2; align-self: center; }
-      td:nth-child(5) {
+      td:nth-child(5) { grid-column: 1 / 2; align-self: center; }
+      td:nth-child(6) {
         grid-column: 2 / 3;
         align-self: center;
         &::before { text-align: right; }
@@ -506,6 +517,39 @@ label { text-align: left; }
   }
 }
 
+// Bulk-selection chrome (#3046): the leading checkbox column, the
+// per-section select-all in the surface header, and the selected-row
+// highlight. The checkbox itself reuses .app-check-input from the
+// forms section; .asset-select is just the clickable hit-area wrapper.
+.asset-select-col {
+  width: 2.75rem;
+  text-align: center;
+}
+
+.asset-select {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0;
+
+  .app-check-input { margin: 0; cursor: pointer; }
+}
+
+.surface__header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.asset-table tbody tr.is-selected td {
+  background: var(--color-accent-wash);
+}
+.asset-table tbody tr.is-selected:hover td {
+  background: var(--color-accent-wash);
+}
+
 .asset-cell-name {
   display: flex;
   align-items: center;
@@ -1206,6 +1250,16 @@ label { text-align: left; }
     background-position: center;
     background-repeat: no-repeat;
   }
+  // Partial selection (the section select-all when only some rows are
+  // ticked). Mirrors :checked but draws a dash instead of a tick.
+  &:indeterminate {
+    background-color: var(--color-link);
+    border-color: var(--color-link);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3' d='M4 8h8'/%3e%3c/svg%3e");
+    background-size: 0.85rem 0.85rem;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
   &:focus-visible {
     outline: none;
     box-shadow: 0 0 0 var(--ring-width) var(--color-focus-ring);
@@ -2335,3 +2389,85 @@ body.auth-body {
   align-items: center;
   text-decoration: none;
 }
+
+// -----------------------------------------------------------------------------
+// Bulk asset actions (#3046)
+// -----------------------------------------------------------------------------
+// Floating bar pinned to the bottom of the viewport while a selection
+// is active. Sits below the modal overlays (z 1050+) so the bulk-edit
+// and bulk-delete dialogs render over it. The inner card carries the
+// dark elevated look the navbar/footer use so it stands clear of the
+// page surfaces.
+.bulk-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: var(--space-5);
+  z-index: 1040;
+  display: flex;
+  justify-content: center;
+  padding-inline: var(--space-4);
+  pointer-events: none;
+}
+.bulk-bar__inner {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 720px;
+  padding: var(--space-3) var(--space-4);
+  background: var(--color-bg-elevated);
+  color: var(--color-text-on-dark);
+  border: 1px solid var(--color-border-on-dark);
+  border-radius: var(--radius-pill);
+  box-shadow: var(--shadow-lg);
+}
+.bulk-bar__count {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: 0.9rem;
+  white-space: nowrap;
+  i { font-size: 1.1rem; opacity: 0.85; }
+  strong { font-variant-numeric: tabular-nums; }
+}
+.bulk-bar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+.bulk-bar__clear {
+  color: var(--color-text-on-dark);
+  background: transparent;
+  border-color: var(--color-border-on-dark);
+}
+
+@media (max-width: 640px) {
+  .bulk-bar__inner {
+    flex-direction: column;
+    align-items: stretch;
+    border-radius: var(--radius-lg);
+  }
+  .bulk-bar__actions { justify-content: center; }
+}
+
+// Bulk-edit modal: each schedule field group is a card whose body is
+// only revealed once its "Change …" toggle is on. The is-on class
+// lifts the card so the active groups read as the ones being written.
+.bulk-field {
+  padding: var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--space-3);
+  transition: border-color var(--t-fast), background var(--t-fast);
+
+  &.is-on {
+    border-color: var(--color-accent-edge);
+    background: var(--color-accent-wash);
+  }
+}
+.bulk-field__toggle { cursor: pointer; }
@@ -12,6 +12,7 @@ declare global {
     flatpickr: typeof flatpickrLib
     homeApp: () => HomeAppData
     fallbackCopyToClipboard: (text: string) => boolean
+    bulkSucceeded: (event: Event) => boolean
   }
 }
 
@@ -37,6 +38,8 @@ interface ToastStoreLike {
   push(kind: 'success' | 'error' | 'info', message: string): number
 }
 
+type SectionKey = 'active' | 'inactive'
+
 interface HomeAppData {
   mode: 'add' | 'edit' | null
   editAsset: AssetEdit | null
@@ -48,6 +51,11 @@ interface HomeAppData {
   uploadFileName: string
   uploadIndex: number
   uploadTotal: number
+  // Bulk selection / actions (#3046)
+  selectedIds: string[]
+  visibleIds: Record<SectionKey, string[]>
+  bulkEditOpen: boolean
+  bulkDeleteOpen: boolean
   init(): void
   openAdd(): void
   openEdit(asset: AssetEdit): void
@@ -58,6 +66,17 @@ interface HomeAppData {
   bindFlatpickr(): void
   uploadFiles(input: HTMLInputElement): Promise<void>
   uploadOne(url: string, csrf: string, file: File): Promise<UploadResult>
+  // Bulk selection helpers
+  isSelected(id: string): boolean
+  toggleSelect(id: string): void
+  syncVisibleIds(activeIds: string[], inactiveIds: string[]): void
+  sectionAllSelected(section: SectionKey): boolean
+  sectionSomeSelected(section: SectionKey): boolean
+  toggleSection(section: SectionKey, checked: boolean): void
+  clearSelection(): void
+  openBulkEdit(): void
+  closeBulkEdit(): void
+  onBulkDone(event: Event): void
 }
 
 // 'ok'       — file accepted and the asset row was created.
@@ -107,6 +126,10 @@ function homeApp(): HomeAppData {
     uploadFileName: '',
     uploadIndex: 0,
     uploadTotal: 0,
+    selectedIds: [],
+    visibleIds: { active: [], inactive: [] },
+    bulkEditOpen: false,
+    bulkDeleteOpen: false,
 
     init(this: HomeAppData & { $watch: (k: string, cb: () => void) => void }) {
       // Re-bind Flatpickr every time the edit modal opens. The
@@ -117,6 +140,11 @@ function homeApp(): HomeAppData {
       this.$watch('editAsset', () =>
         requestAnimationFrame(() => this.bindFlatpickr()),
       )
+      // The bulk-edit modal reuses the same .js-flatpickr-* inputs and
+      // is also gated behind an x-if, so bind on open the same way.
+      this.$watch('bulkEditOpen', () =>
+        requestAnimationFrame(() => this.bindFlatpickr()),
+      )
     },
 
     bindFlatpickr() {
@@ -222,6 +250,83 @@ function homeApp(): HomeAppData {
       this.previewAsset = null
     },
 
+    // --- Bulk selection (#3046) ---------------------------------------
+    // selectedIds is the source of truth; row checkboxes bind their
+    // :checked to isSelected() so the selection survives the table's
+    // 5s HTMX swap (the swapped rows re-evaluate against this state).
+    isSelected(id) {
+      return this.selectedIds.includes(id)
+    },
+    toggleSelect(id) {
+      if (this.selectedIds.includes(id)) {
+        this.selectedIds = this.selectedIds.filter((x) => x !== id)
+      } else {
+        this.selectedIds = [...this.selectedIds, id]
+      }
+    },
+    // Called once from each rendered table partial (x-init re-fires
+    // after every swap) so Alpine always knows the ids currently on
+    // screen. Both sections are passed together and pruning happens
+    // once against their union — pruning per-section would drop the
+    // selection for a row that moved between sections (e.g. an enabled
+    // asset just disabled), because the other section's list would
+    // still be stale at that moment.
+    syncVisibleIds(activeIds, inactiveIds) {
+      this.visibleIds.active = activeIds
+      this.visibleIds.inactive = inactiveIds
+      const all = new Set([...activeIds, ...inactiveIds])
+      this.selectedIds = this.selectedIds.filter((id) => all.has(id))
+    },
+    // Build a Set for membership so these stay O(visible + selected)
+    // rather than O(visible × selected) — a selection of thousands (the
+    // point of bulk editing) would otherwise lag on every reactive
+    // re-evaluation.
+    sectionAllSelected(section) {
+      const ids = this.visibleIds[section]
+      if (!ids.length) return false
+      const sel = new Set(this.selectedIds)
+      return ids.every((id) => sel.has(id))
+    },
+    sectionSomeSelected(section) {
+      const ids = this.visibleIds[section]
+      const sel = new Set(this.selectedIds)
+      const n = ids.reduce((acc, id) => acc + (sel.has(id) ? 1 : 0), 0)
+      return n > 0 && n < ids.length
+    },
+    toggleSection(section, checked) {
+      const ids = this.visibleIds[section]
+      if (checked) {
+        const merged = new Set([...this.selectedIds, ...ids])
+        this.selectedIds = [...merged]
+      } else {
+        const drop = new Set(ids)
+        this.selectedIds = this.selectedIds.filter((id) => !drop.has(id))
+      }
+    },
+    clearSelection() {
+      this.selectedIds = []
+    },
+    openBulkEdit() {
+      this.bulkEditOpen = true
+    },
+    closeBulkEdit() {
+      this.bulkEditOpen = false
+    },
+    // Bridged from the bulk forms' hx-on::after-request via a global
+    // window 'bulk-done' CustomEvent (hx-on runs in global scope and
+    // can't reach Alpine methods — same dispatch-to-window bridge the
+    // Add modal uses for 'asset-saved'). Only fires on a real success
+    // (window.bulkSucceeded gates it), so a rejected edit leaves the
+    // selection and modal intact. detail flags say which modal to close.
+    onBulkDone(event) {
+      const detail =
+        (event as CustomEvent<{ closeDelete?: boolean; closeEdit?: boolean }>)
+          .detail || {}
+      this.clearSelection()
+      if (detail.closeDelete) this.bulkDeleteOpen = false
+      if (detail.closeEdit) this.closeBulkEdit()
+    },
+
     // Multi-file upload (issue #3045). The server's assets_upload
     // endpoint reads exactly one file per request
     // (request.FILES.get('file_upload')), so a single htmx form POST —
@@ -585,6 +690,30 @@ function fallbackCopyToClipboard(text: string): boolean {
 }
 window.fallbackCopyToClipboard = fallbackCopyToClipboard
 
+// Did a bulk request actually succeed? The bulk endpoints return 200
+// even when they refuse the input (bad date, partial window, blank
+// duration, "nothing to change", empty/stale selection) and just ride
+// an error/info toast on the HX-Trigger header. The bulk forms call
+// this from hx-on::after-request — which runs in GLOBAL scope, not
+// Alpine's — so it lives on window rather than as a component method.
+// True only on a 2xx whose toast is absent or kind 'success'.
+function bulkSucceeded(event: Event): boolean {
+  const detail = (
+    event as CustomEvent<{ successful?: boolean; xhr?: XMLHttpRequest }>
+  ).detail
+  if (!detail?.successful || !detail.xhr) return false
+  const header = detail.xhr.getResponseHeader('HX-Trigger')
+  if (!header) return true
+  try {
+    const kind = (JSON.parse(header) as { toast?: { kind?: string } })?.toast
+      ?.kind
+    return kind === undefined || kind === 'success'
+  } catch {
+    return true
+  }
+}
+window.bulkSucceeded = bulkSucceeded
+
 window.homeApp = homeApp
 
 function bootHomePage(): void {