refactor(ui): shared browse layer with virtual grid, filter rail and bulk actions

Author: alexhb1

frontend/src/app/core/data/browse-response.ts

@@ -59,12 +59,11 @@ function mapBrowseLink(raw: RawLink): BrowseLink {
 }
 
 function mapBrowseFacetValue(raw: RawFacetLink): BrowseFacetValue {
-  const count = raw.properties?.numberOfItems;
   return {
     value: raw.value,
     title: raw.title,
+    count: raw.properties?.numberOfItems ?? 0,
     selected: normalizeRel(raw.rel).includes('self'),
-    ...(count === undefined ? {} : {count}),
   };
 }
 

frontend/src/app/core/data/browse.models.ts

@@ -21,7 +21,7 @@ export interface BrowsePage<T> {
 export interface BrowseFacetValue {
   value: string;
   title: string;
-  count?: number;
+  count: number;
   selected: boolean;
 }
 
@@ -46,3 +46,17 @@ export function findBrowsePageLink(
 ): BrowseLink | undefined {
   return page.links.find(link => link.rel.includes(rel));
 }
+
+export function flattenBrowsePages<T extends {id: number}>(
+  data: {pages: BrowsePage<T>[]} | undefined,
+): T[] {
+  const items = data?.pages.flatMap(page => page.content) ?? [];
+  const seen = new Set<number>();
+  return items.filter(item => {
+    if (seen.has(item.id)) {
+      return false;
+    }
+    seen.add(item.id);
+    return true;
+  });
+}

frontend/src/app/features/book/components/book-browser/book-browser.component.ts

@@ -301,7 +301,6 @@ export class BookBrowserComponent implements AfterViewInit {
     minimumCount: metrics => this.minimumLoadingGridItemCount(metrics),
     initialOffset: this.initialScrollOffset,
     fillItemWidth: true,
-    deferViewportUpdates: this.layoutService.sidebarTransitioning,
     estimateItemHeight: itemWidth => this.isMobile()
       ? this.mobileCardSizeForWidth(itemWidth).height
       : this.cardSizeForWidth(itemWidth).height,

frontend/src/app/features/book/data/book-query.models.spec.ts

@@ -1,21 +1,5 @@
-import {InfiniteData} from '@tanstack/angular-query-experimental';
-
 import {BrowseFacetGroup, BrowsePage} from '../../../core/data/browse.models';
 import {BookSummary} from './book-response.models';
 
 export type BookPage = BrowsePage<BookSummary>;
 export type BookFacetGroup = BrowseFacetGroup;
-
-export function flattenBookPages(
-  data: InfiniteData<BookPage> | undefined,
-): BookSummary[] {
-  const books = data?.pages.flatMap(page => page.content) ?? [];
-  const seen = new Set<number>();
-  return books.filter(book => {
-    if (seen.has(book.id)) {
-      return false;
-    }
-    seen.add(book.id);
-    return true;
-  });
-}

frontend/src/app/features/book/data/book-query.models.ts

@@ -0,0 +1,179 @@
+import {
+  Component,
+  Directive,
+  ElementRef,
+  afterRenderEffect,
+  computed,
+  contentChildren,
+  inject,
+  input,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import {TranslocoPipe} from '@jsverse/transloco';
+import {LucideEllipsis, LucideX} from '@lucide/angular';
+
+import {AppButtonComponent} from '../../ui/button/app-button.component';
+import {AppMenuComponent} from '../../ui/menu/app-menu.component';
+import {AppMenuTriggerDirective} from '../../ui/menu/app-menu-trigger.directive';
+import {LayoutService} from '../../layout/layout.service';
+
+const PILL_CHROME_WIDTH = 46;
+const ITEM_GAP = 4;
+const MORE_BUTTON_WIDTH = 40 + ITEM_GAP;
+
+@Component({
+  selector: 'app-browse-bulk-actions-divider',
+  template: `@if (!mobileShell()) {
+    <span class="mx-1.5 block h-6 w-px bg-border" aria-hidden="true"></span>
+  }`,
+  host: {class: 'contents'},
+})
+export class BrowseBulkActionsDividerComponent {
+  private readonly layout = inject(LayoutService);
+  protected readonly mobileShell = computed(() => !this.layout.isDesktop());
+}
+
+@Directive({
+  selector: '[appBrowseBulkActionsItem]',
+  host: {
+    '[class.invisible]': 'overflowed()',
+    '[class.absolute]': 'overflowed()',
+    '[class.left-0]': 'overflowed()',
+    '[class.top-0]': 'overflowed()',
+    '[attr.inert]': "overflowed() ? '' : null",
+  },
+})
+export class BrowseBulkActionsItemDirective {
+  readonly id = input.required<string>({alias: 'appBrowseBulkActionsItem'});
+  readonly element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+
+  private readonly bar = inject(BrowseBulkActionsBarComponent);
+  protected readonly overflowed = computed(() => this.bar.overflowed().has(this.id()));
+}
+
+@Component({
+  selector: 'app-browse-bulk-actions-bar',
+  imports: [TranslocoPipe, AppButtonComponent, AppMenuTriggerDirective, BrowseBulkActionsDividerComponent, LucideEllipsis, LucideX],
+  host: {class: 'contents'},
+  template: `
+    <div
+      #strip
+      class="pointer-events-none fixed inset-x-0 bottom-[max(1.25rem,env(safe-area-inset-bottom))] z-30 flex justify-center pl-[calc(var(--sidebar-width,0px)*(1-var(--mobile-shell-active,0)))]"
+    >
+      <div
+        class="pointer-events-auto relative flex h-12 max-w-[calc(100%-2rem)] items-center gap-1 overflow-hidden whitespace-nowrap rounded-xl border border-border bg-card px-1.5 text-sm shadow-float animate-in fade-in-0 slide-in-from-bottom-1 motion-reduce:animate-none"
+      >
+      @if (!mobileShell()) {
+        <span #leading class="flex items-center gap-1">
+          <app-button
+            variant="ghost"
+            size="md"
+            iconOnly
+            [ariaLabel]="'shared.ui.select.clearSelection' | transloco"
+            (clicked)="clearSelection.emit()"
+          >
+            <svg lucideX aria-hidden="true"></svg>
+          </app-button>
+          <span role="status" class="px-1 font-semibold tabular-nums text-text">
+            {{ 'shared.ui.select.selectedCount' | transloco: {count: countLabel()} }}
+          </span>
+          @if (showSelectAll()) {
+            <app-button
+              variant="ghost"
+              tone="primary"
+              size="md"
+              [label]="'shared.ui.bulkActions.selectAll' | transloco"
+              (clicked)="selectAll.emit()"
+            />
+          }
+          <app-browse-bulk-actions-divider />
+        </span>
+      }
+      <ng-content />
+      @if (moreMenu(); as menu) {
+        @if (moreShown()) {
+          <app-button
+            variant="ghost"
+            size="md"
+            iconOnly
+            [disabled]="moreDisabled()"
+            [ariaLabel]="'browse.moreActions' | transloco"
+            [appMenuTriggerFor]="menu"
+          >
+            <svg lucideEllipsis aria-hidden="true"></svg>
+          </app-button>
+        }
+      }
+      <ng-content select="[appBrowseBulkActionsTrailing]" />
+      </div>
+    </div>
+  `,
+})
+export class BrowseBulkActionsBarComponent {
+  readonly count = input.required<number>();
+  readonly total = input<number | null>(null);
+  readonly moreMenu = input<AppMenuComponent | null>(null);
+  readonly moreAlways = input(false);
+  readonly moreDisabled = input(false);
+
+  readonly clearSelection = output<void>();
+  readonly selectAll = output<void>();
+
+  private readonly overflowedIds = signal<ReadonlySet<string>>(new Set(), {equal: sameIds});
+  readonly overflowed = this.overflowedIds.asReadonly();
+
+  private readonly layout = inject(LayoutService);
+  private readonly strip = viewChild.required<ElementRef<HTMLElement>>('strip');
+  private readonly leading = viewChild<ElementRef<HTMLElement>>('leading');
+  private readonly items = contentChildren(BrowseBulkActionsItemDirective);
+  protected readonly mobileShell = computed(() => !this.layout.isDesktop());
+  protected readonly countLabel = computed(() => this.count().toLocaleString());
+  protected readonly showSelectAll = computed(() => {
+    const total = this.total();
+    return total !== null && this.count() < total;
+  });
+  protected readonly moreShown = computed(() => this.moreAlways() || this.overflowed().size > 0);
+
+  constructor() {
+    afterRenderEffect(onCleanup => {
+      const strip = this.strip().nativeElement;
+      const leading = this.leading()?.nativeElement;
+      const items = this.items().map(item => ({id: item.id(), element: item.element}));
+      const moreAlways = this.moreAlways();
+      let availableWidth = 0;
+      const observer = new ResizeObserver(entries => {
+        const stripEntry = entries.find(entry => entry.target === strip);
+        if (stripEntry) availableWidth = stripEntry.contentRect.width;
+        const capacity = availableWidth - PILL_CHROME_WIDTH - (leading ? leading.offsetWidth + ITEM_GAP : 0);
+        const widths = items.map(item => ({id: item.id, width: item.element.offsetWidth + ITEM_GAP}));
+        const withoutMoreButton = overflowingIds(widths, capacity);
+        this.overflowedIds.set(moreAlways || withoutMoreButton.size > 0
+          ? overflowingIds(widths, capacity - MORE_BUTTON_WIDTH)
+          : withoutMoreButton);
+      });
+      observer.observe(strip);
+      if (leading) observer.observe(leading);
+      for (const item of items) observer.observe(item.element);
+      onCleanup(() => observer.disconnect());
+    });
+  }
+}
+
+function overflowingIds(items: readonly {id: string; width: number}[], capacity: number): ReadonlySet<string> {
+  const overflowed = new Set<string>();
+  let used = 0;
+  for (const item of items) {
+    if (overflowed.size === 0 && used + item.width <= capacity) {
+      used += item.width;
+    } else {
+      overflowed.add(item.id);
+    }
+  }
+  return overflowed;
+}
+
+function sameIds(a: ReadonlySet<string>, b: ReadonlySet<string>): boolean {
+  return a.size === b.size && [...a].every(id => b.has(id));
+}

frontend/src/app/shared/browse/bulk-actions/bulk-actions-bar.component.ts

@@ -0,0 +1,40 @@
+import {Component, computed, input, output} from '@angular/core';
+import {TranslocoPipe} from '@jsverse/transloco';
+
+import {AppButtonComponent} from '../../ui/button/app-button.component';
+
+@Component({
+  selector: 'app-browse-select-mode-controls',
+  imports: [TranslocoPipe, AppButtonComponent],
+  host: {class: 'contents'},
+  template: `
+    <span role="status" class="px-1 text-sm font-semibold tabular-nums text-text">
+      {{ 'shared.ui.select.selectedCount' | transloco: {count: countLabel()} }}
+    </span>
+    @if (showSelectAll()) {
+      <app-button
+        class="ml-auto"
+        variant="soft"
+        [label]="'shared.ui.bulkActions.selectAll' | transloco"
+        (clicked)="selectAll.emit()" />
+    }
+    <app-button
+      [class]="showSelectAll() ? '' : 'ml-auto'"
+      variant="soft"
+      [label]="'common.cancel' | transloco"
+      (clicked)="cancelled.emit()" />
+  `,
+})
+export class BrowseSelectModeControlsComponent {
+  readonly count = input.required<number>();
+  readonly total = input<number | null>(null);
+
+  readonly selectAll = output<void>();
+  readonly cancelled = output<void>();
+
+  protected readonly countLabel = computed(() => this.count().toLocaleString());
+  protected readonly showSelectAll = computed(() => {
+    const total = this.total();
+    return total !== null && this.count() < total;
+  });
+}

frontend/src/app/shared/browse/bulk-actions/select-mode-controls.component.ts

@@ -0,0 +1,49 @@
+export interface BrowseFacetBucket {
+  readonly min?: number;
+  readonly max?: number;
+  readonly stars?: number;
+}
+
+export function formatRangeToken(
+  {min, max}: {readonly min?: number | null; readonly max?: number | null},
+): string | null {
+  if (min == null && max == null) {
+    return null;
+  }
+  return `${min ?? '*'}..${max ?? '*'}`;
+}
+
+export function formatRangeLabel(
+  {min, max}: {readonly min?: number | string | null; readonly max?: number | string | null},
+): string | null {
+  if (min == null && max == null) {
+    return null;
+  }
+  if (max == null) {
+    return `${min}+`;
+  }
+  if (min == null) {
+    return `-${max}`;
+  }
+  return min === max ? `${min}` : `${min}-${max}`;
+}
+
+export function parseRangeToken(token: string): {min: number | null; max: number | null} | null {
+  const match = /^(\*|-?\d+(?:\.\d+)?)\.\.(\*|-?\d+(?:\.\d+)?)$/.exec(token);
+  if (match) {
+    const min = match[1] === '*' ? null : Number(match[1]);
+    const max = match[2] === '*' ? null : Number(match[2]);
+    return min == null && max == null ? null : {min, max};
+  }
+  const exact = Number(token);
+  return token.trim() !== '' && Number.isFinite(exact) ? {min: exact, max: exact} : null;
+}
+
+export function bucketRangeTokens(
+  buckets: readonly BrowseFacetBucket[] | undefined,
+): ReadonlySet<string> {
+  return new Set((buckets ?? []).flatMap(bucket => {
+    const token = formatRangeToken(bucket);
+    return token == null ? [] : [token];
+  }));
+}