@internetarchive/collection-browser 4.7.0 → 4.8.0

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/sort-filter-bar/alpha-bar.ts

@@ -1,252 +0,0 @@
-import { LitElement, html, css, nothing, TemplateResult } from 'lit';
-import { customElement, property, state, query } from 'lit/decorators.js';
-import type { PrefixFilterCounts } from '../models';
-
-import './alpha-bar-tooltip';
-import type { AlphaBarTooltip } from './alpha-bar-tooltip';
-
-@customElement('alpha-bar')
-export class AlphaBar extends LitElement {
-  @property({ type: String }) selectedLetter: string | null = null;
-
-  @property({ type: Object }) letterCounts?: PrefixFilterCounts;
-
-  @property({ type: String }) ariaLandmarkLabel?: string;
-
-  @state()
-  private tooltipShown: boolean = false;
-
-  @state()
-  private hoveredLetter?: string;
-
-  @query('alpha-bar-tooltip')
-  private tooltip?: AlphaBarTooltip;
-
-  private readonly alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
-
-  private get selectedUppercaseLetter(): string | undefined {
-    return this.selectedLetter?.toUpperCase();
-  }
-
-  render() {
-    return html`
-      <section id="container" aria-label=${this.ariaLandmarkLabel ?? nothing}>
-        <ul>
-          ${this.alphabet.map(
-            letter => html`
-              <li
-                class=${letter === this.selectedUppercaseLetter
-                  ? 'selected'
-                  : nothing}
-                @mousemove=${this.handleMouseMove}
-                @mouseleave=${this.handleMouseLeave}
-              >
-                ${this.letterButtonTemplate(letter)}
-                ${this.tooltipTemplate(letter)}
-              </li>
-            `,
-          )}
-        </ul>
-      </section>
-    `;
-  }
-
-  private letterButtonTemplate(letter: string) {
-    const ariaLabel = `${letter}: ${this.letterCounts?.[letter] ?? 0} results`;
-    return html`
-      <button
-        aria-label=${ariaLabel}
-        ?disabled=${!this.letterCounts?.[letter]}
-        @click=${() => {
-          this.letterClicked(letter);
-        }}
-      >
-        ${letter}
-      </button>
-    `;
-  }
-
-  private tooltipTemplate(letter: string): TemplateResult | typeof nothing {
-    if (this.hoveredLetter !== letter) return nothing;
-
-    return this.tooltipShown
-      ? html`<alpha-bar-tooltip
-          data-letter=${letter}
-          .numResults=${this.letterCounts?.[this.hoveredLetter] ?? 0}
-        ></alpha-bar-tooltip>`
-      : nothing;
-  }
-
-  private letterClicked(letter: string) {
-    if (letter === this.selectedUppercaseLetter) {
-      this.selectedLetter = null;
-    } else {
-      this.selectedLetter = letter;
-    }
-    this.dispatchEvent(
-      new CustomEvent('letterChanged', {
-        detail: { selectedLetter: this.selectedUppercaseLetter },
-      }),
-    );
-  }
-
-  private async handleMouseMove(e: MouseEvent) {
-    const target = e.target as HTMLLIElement;
-    if (target && !this.tooltipShown) {
-      const targetLetter = target.textContent?.trim() ?? undefined;
-      this.tooltipShown = true;
-      this.hoveredLetter = targetLetter;
-
-      await this.updateComplete;
-      await new Promise(resolve => {
-        setTimeout(resolve, 0);
-      });
-
-      if (this.tooltip && this.tooltip.dataset.letter === targetLetter) {
-        this.positionTooltip(target);
-      }
-    }
-  }
-
-  private handleMouseLeave() {
-    this.tooltipShown = false;
-    this.hoveredLetter = undefined;
-  }
-
-  private positionTooltip(targetElmt: HTMLElement) {
-    if (!this.tooltip) return;
-
-    // Basic positioning is just to center the whole tooltip on the letter box.
-    const tooltipWidth = this.tooltip.clientWidth;
-    const letterWidth = targetElmt.clientWidth;
-    let left = letterWidth / 2 - tooltipWidth / 2;
-
-    // But we also need to ensure the tooltip doesn't flow outside the viewport.
-    // First, calculate the full width of the document body, including margins
-    // (but not including any scrollbar).
-    const bodyStyle = getComputedStyle(document.body);
-    const bodyMarginLeft = parseFloat(
-      bodyStyle.getPropertyValue('margin-left'),
-    );
-    const bodyMarginRight = parseFloat(
-      bodyStyle.getPropertyValue('margin-right'),
-    );
-    const bodyWidthWithMargin =
-      document.body.clientWidth + bodyMarginLeft + bodyMarginRight;
-
-    // Calculate the positions of the tooltip's left/right edges, and determine
-    // how much they overflow the viewport by (if at all).
-    const targetRect = targetElmt.getBoundingClientRect();
-    const tooltipLeft = targetRect.left + left;
-    const tooltipRight = tooltipLeft + tooltipWidth;
-    const offset = 1; // How many pixels the tooltip must be offset from the left/right edges
-    let overflowAmt;
-    if (tooltipLeft < offset) {
-      // Tooltip overflows left edge of viewport
-      overflowAmt = tooltipLeft - offset;
-    } else if (tooltipRight > bodyWidthWithMargin - offset) {
-      // Tooltip overflows right edge of viewport
-      overflowAmt = tooltipRight - bodyWidthWithMargin + offset;
-    }
-
-    // Apply any needed adjustment to the tooltip and its arrow to keep it in the viewport
-    if (overflowAmt) {
-      left -= overflowAmt;
-      this.tooltip.style.setProperty(
-        '--tooltipArrowOffset',
-        `${overflowAmt}px`,
-      );
-    }
-
-    this.tooltip.style.left = `${left}px`;
-    this.tooltip.classList.add('fade-in');
-  }
-
-  static styles = css`
-    h1 {
-      font-size: 1.2rem;
-    }
-
-    #container {
-      background-color: #ddd;
-      color: #333;
-      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
-    }
-
-    ul {
-      list-style: none;
-      display: flex;
-      margin: 0;
-      padding: 0.5rem 1rem;
-      justify-content: space-between;
-    }
-
-    ul li {
-      position: relative;
-      flex: 1;
-      text-align: center;
-      max-width: 2.5rem;
-      border-radius: 4px;
-    }
-
-    li:hover:not(.selected) button:not(:disabled) {
-      background-color: #c0c0c0;
-    }
-
-    button {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      aspect-ratio: 1 / 1;
-    }
-
-    button {
-      width: 100%;
-      height: 100%;
-      color: #333;
-      appearance: none;
-      background: none;
-      border: none;
-      border-radius: 4px;
-      font-family: inherit;
-      font-size: 1.2rem;
-      cursor: pointer;
-    }
-
-    button:disabled {
-      color: #aaa;
-      cursor: default;
-    }
-
-    .selected {
-      background-color: #2c2c2c;
-    }
-
-    .selected button {
-      color: white;
-    }
-
-    alpha-bar-tooltip {
-      position: absolute;
-      top: 100%;
-      left: -9999px;
-      margin-top: 3px;
-      z-index: 1;
-
-      opacity: 0;
-      transition: opacity 0.2s ease;
-    }
-
-    alpha-bar-tooltip.fade-in {
-      opacity: 1;
-    }
-
-    /* Make alphabet bar a 2-row container in small screen widths */
-    @media screen and (max-width: 768px) {
-      ul {
-        display: grid;
-        grid-template-columns: repeat(13, 1fr);
-      }
-    }
-  `;
-}

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/sort-filter-bar/img/compact.ts

@@ -1,5 +0,0 @@
-import { svg } from 'lit';
-
-export const compactIcon = svg`
-<svg viewBox="0 0 100 100" xmlns = "http://www.w3.org/2000/svg" > <path d="m96.9964435 6h-93.90621462c-.91561615 0-1.65899868-.29021372-2.23014758-.87064117-.57114891-.58042745-.85783455-1.3048369-.86005692-2.17322835 0-.81214848.28668564-1.50731158.86005692-2.08548931.57337127-.57817773 1.3167538-.86839145 2.23014758-.87064117h93.90621462c.800053 0 1.5012105.29021372 2.1034726.87064117.602262.58042745.9022819 1.27559055.9000718 2.08548931 0 .86839145-.3000321 1.5928009-.9000718 2.17322835-.6000398.58042745-1.3011973.87064117-2.1034726.87064117zm-93.90621462 9.6666667h93.90621462c.800053 0 1.5012105.2861891 2.1034726.8585673.602262.5723782.9022819 1.2579009.9000718 2.0565682 0 .8563487-.3000321 1.5851326-.9000718 2.1863516-.6000398.6012189-1.3011973.9007192-2.1034726.8985129h-93.90621462c-.91561615 0-1.65899868-.2995125-2.23014758-.8985129-.57114891-.5990005-.85783455-1.3277843-.86005692-2.1863516 0-.8008858.28668564-1.4864086.86005692-2.0565682.57337127-.5701597 1.3167538-.8563488 2.23014758-.8585673zm0 15.6700431h93.90621462c.800053 0 1.5012105.303883 2.1034726.9116489.602262.6077659.9022819 1.2886888.9000718 2.0427687-.0022346.7540799-.3022545 1.4496342-.9000718 2.0866629-.5978174.6370287-1.2989749.955543-2.1034726.955543h-93.90621462c-.85783454 0-1.58788286-.3038829-2.19014494-.9116488s-.90228193-1.3179516-.90007182-2.1305571c.00223463-.8126055.30225448-1.5081599.90007182-2.0866629.59781734-.5785031 1.32786566-.8688802 2.19014494-.8711312zm0 15.6632902h93.90621462c.800053 0 1.5012105.2861892 2.1034726.8585675.602262.5723783.9022819 1.2290603.9000718 1.9700462 0 .7986674-.3144775 1.5274514-.943408 2.186352-.6289306.6589006-1.3156427.9872417-2.0601364.9850343h-93.90621462c-.85783454 0-1.58788286-.3139318-2.19014494-.9417731-.60226208-.6278414-.90228193-1.3699365-.90007182-2.2262854 0-.7986674.2866979-1.4697699.86006918-2.0133074.57337127-.5435376 1.3167538-.8153063 2.23014758-.8153063zm0 15.6666667h93.90621462c.800053 0 1.5012105.3038947 2.1034726.9116593.602262.6077647.9022819 1.3472117.9000718 2.218341 0 .7540783-.3000321 1.4203685-.9000718 1.9988703-.6000398.5785019-1.3011973.8688784-2.1034726.8711294h-93.90621462c-.91561615 0-1.65899868-.2757451-2.23014758-.8272352-.57114891-.5514902-.85783455-1.2324117-.86005692-2.0427645 0-.8688784.28668564-1.6083253.86005692-2.218341.57337127-.6100156 1.3167538-.9138979 2.23014758-.9116593zm0 15.6666666h93.90621462c.800053 0 1.5012105.3038948 2.1034726.9116594.602262.6077646.9022819 1.3472116.9000718 2.2183409 0 .7540784-.3000321 1.4203685-.9000718 1.9988704-.6000398.5785019-1.3011973.8688784-2.1034726.8711293h-93.90621462c-.91561615 0-1.65899868-.275745-2.23014758-.8272352-.57114891-.5514901-.85783455-1.2324116-.86005692-2.0427645 0-.8688783.28668564-1.6083253.86005692-2.2183409.57337127-.6100156 1.3167538-.9138979 2.23014758-.9116594zm0 15.6666667h93.90621462c.800053 0 1.5012105.3038947 2.1034726.9116594.602262.6077646.9022819 1.3472116.9000718 2.2183409 0 .7540784-.3000321 1.4203685-.9000718 1.9988704-.6000398.5785019-1.3011973.8688783-2.1034726.8711293h-93.90621462c-.91561615 0-1.65899868-.2757451-2.23014758-.8272352-.57114891-.5514901-.85783455-1.2324116-.86005692-2.0427645 0-.8688783.28668564-1.6083253.86005692-2.2183409.57337127-.6100156 1.3167538-.913898 2.23014758-.9116594z" /> </svg>
-`;

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/sort-filter-bar/img/list.ts

@@ -1,5 +0,0 @@
-import { svg } from 'lit';
-
-export const listIcon = svg`
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero"><path d="m97.8975061 6h-65.7343743c-.6409315 0-1.1612995-.29021372-1.5611039-.87064117-.3998043-.58042745-.6004844-1.3048369-.60204-2.17322835 0-.81214848.20068-1.50731158.60204-2.08548931.4013601-.57817773.921728-.86839145 1.5611039-.87064117h65.7343743c.5600372 0 1.0508477.29021372 1.4724313.87064117s.6315976 1.27559055.6300505 2.08548931c0 .86839145-.2100226 1.5928009-.6300505 2.17322835-.420028.58042745-.9108384.87064117-1.4724313.87064117z"/><path d="m97.8975061 61h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 19h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 74h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 32h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 87h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 45h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 100h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m0 0h25v25h-25z"/><path d="m0 55h25v25h-25z"/></g></svg>
-`;

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/sort-filter-bar/img/sort-toggle-disabled.ts

@@ -1,15 +0,0 @@
-import { html } from 'lit';
-
-export const sortDisabledIcon = html`
-  <svg viewBox="0 0 64 100" xmlns="http://www.w3.org/2000/svg">
-    <g fill="#bbb" fill-rule="evenodd">
-      <path
-        d="m0 35.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
-      />
-      <path
-        d="m21 78.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
-        transform="matrix(1 0 0 -1 0 143)"
-      />
-    </g>
-  </svg>
-`;

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/sort-filter-bar/img/sort-toggle-down.ts

@@ -1,17 +0,0 @@
-import { html } from 'lit';
-
-export const sortDownIcon = html`
-  <svg viewBox="0 0 64 100" xmlns="http://www.w3.org/2000/svg">
-    <g fill-rule="evenodd">
-      <path
-        d="m0 35.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
-        fill="#bbb"
-      />
-      <path
-        d="m21 78.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
-        fill="#2c2c2c"
-        transform="matrix(1 0 0 -1 0 143)"
-      />
-    </g>
-  </svg>
-`;

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/sort-filter-bar/img/sort-toggle-up.ts

@@ -1,17 +0,0 @@
-import { html } from 'lit';
-
-export const sortUpIcon = html`
-  <svg viewBox="0 0 64 100" xmlns="http://www.w3.org/2000/svg">
-    <g fill-rule="evenodd">
-      <path
-        d="m0 35.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
-        fill="#2c2c2c"
-      />
-      <path
-        d="m21 78.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
-        fill="#bbb"
-        transform="matrix(1 0 0 -1 0 143)"
-      />
-    </g>
-  </svg>
-`;

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/sort-filter-bar/img/sort-triangle.ts

@@ -1,5 +0,0 @@
-import { svg } from 'lit';
-
-export const sortIcon = svg`
-<svg viewBox="0 0 100 55" xmlns="http://www.w3.org/2000/svg"><path d="m50 0 50 55h-100z"/></svg>
-`;

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/sort-filter-bar/img/tile.ts

@@ -1,5 +0,0 @@
-import { svg } from 'lit';
-
-export const tileIcon = svg`
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m64 54v46h-28v-46zm36 0v46h-28v-46zm-72 0v46h-28v-46zm36-54v46h-28v-46zm36 0v46h-28v-46zm-72 0v46h-28v-46z"/></svg>
-`;