@internetarchive/collection-browser 4.5.2 → 4.6.0

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/src/sort-filter-bar/alpha-bar.ts

@@ -0,0 +1,252 @@
+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-9119-migrate-to-pnpm/src/sort-filter-bar/img/compact.ts

@@ -0,0 +1,5 @@
+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-9119-migrate-to-pnpm/src/sort-filter-bar/img/list.ts

@@ -0,0 +1,5 @@
+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-9119-migrate-to-pnpm/src/sort-filter-bar/img/sort-toggle-disabled.ts

@@ -0,0 +1,15 @@
+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-9119-migrate-to-pnpm/src/sort-filter-bar/img/sort-toggle-down.ts

@@ -0,0 +1,17 @@
+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-9119-migrate-to-pnpm/src/sort-filter-bar/img/sort-toggle-up.ts

@@ -0,0 +1,17 @@
+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-9119-migrate-to-pnpm/src/sort-filter-bar/img/sort-triangle.ts

@@ -0,0 +1,5 @@
+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-9119-migrate-to-pnpm/src/sort-filter-bar/img/tile.ts

@@ -0,0 +1,5 @@
+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>
+`;