@internetarchive/collection-browser 4.5.2 → 4.7.0

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/manage/manage-bar.ts

@@ -0,0 +1,276 @@
+import { msg, str } from '@lit/localize';
+import { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import {
+  ModalConfig,
+  type ModalManagerInterface,
+} from '@internetarchive/modal-manager';
+import type { ManageableItem } from '../models';
+import { PageElementName } from '@internetarchive/search-service';
+import iaButtonStyle from '../styles/ia-button';
+import './remove-items-modal-content';
+
+@customElement('manage-bar')
+export class ManageBar extends LitElement {
+  /**
+   * The label displayed in front of the management buttons
+   */
+  @property({ type: String }) label = msg('Select items to remove');
+
+  /**
+   * The shared modal manager component for displaying modal dialogs on this page
+   */
+  @property({ type: Object }) modalManager?: ModalManagerInterface;
+
+  /**
+   * Array of items that have been selected for management
+   */
+  @property({ type: Array }) selectedItems: Array<ManageableItem> = [];
+
+  /**
+   * Which section of the profile page searches are for (e.g., uploads, reviews, ...)
+   */
+  @property({ type: String }) profileElement?: PageElementName;
+
+  /**
+   * Whether to show the "Select All" button (default false)
+   */
+  @property({ type: Boolean }) showSelectAll = false;
+
+  /**
+   * Whether to show the "Unselect All" button (default false)
+   */
+  @property({ type: Boolean }) showUnselectAll = false;
+
+  /**
+   * Whether to show "Item Manager the items" button (default false)
+   */
+  @property({ type: Boolean }) showItemManageButton = false;
+
+  /**
+   * Whether to active delete button for selectable items
+   */
+  @property({ type: Boolean }) removeAllowed = false;
+
+  render(): TemplateResult {
+    return html`
+      <div class="manage-container">
+        <span class="manage-label">${this.label}</span>
+        <div class="manage-buttons">
+          <button class="ia-button dark" @click=${this.cancelClicked}>
+            ${msg('Cancel')}
+          </button>
+          <button
+            class="ia-button danger"
+            ?disabled=${!this.removeAllowed}
+            @click=${this.showRemoveItemsModal}
+          >
+            ${msg('Remove selected items')} (${this.selectedItems.length})...
+          </button>
+          ${when(
+            this.showItemManageButton,
+            () =>
+              html` <button
+                class="ia-button warning"
+                ?disabled=${!this.removeAllowed}
+                @click=${this.manageItemsClicked}
+              >
+                ${msg('Item Manager the items')} (${this.selectedItems.length})
+              </button>`,
+          )}
+          <div class="selection-buttons">
+            ${when(
+              this.showSelectAll,
+              () =>
+                html` <button
+                  class="ia-button link select-all-btn"
+                  @click=${this.selectAllClicked}
+                >
+                  ${msg('Select all')}
+                </button>`,
+            )}
+            ${when(
+              this.showUnselectAll,
+              () =>
+                html` <button
+                  class="ia-button link unselect-all-btn"
+                  @click=${this.unselectAllClicked}
+                >
+                  ${msg('Unselect all')}
+                </button>`,
+            )}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * Message to show in the manage view modal, depending on context.
+   */
+  private get manageViewModalMsg(): string {
+    const pluralize = this.selectedItems.length > 1;
+    const subject = pluralize ? 'these items' : 'this item';
+
+    let listName = '';
+
+    switch (this.profileElement) {
+      case 'uploads':
+        listName = 'uploads list';
+        break;
+      case 'web_archives':
+        listName = 'web archives list';
+        break;
+      case 'favorites':
+        listName = 'favorites list';
+        break;
+      default:
+        return '';
+    }
+
+    return msg(
+      str`Note: It may take a few minutes for ${subject} to stop appearing in your ${listName}.`,
+    );
+  }
+
+  private cancelClicked(): void {
+    this.dispatchEvent(new CustomEvent('cancel'));
+  }
+
+  private removeItemsClicked(): void {
+    this.dispatchEvent(new CustomEvent('removeItems'));
+  }
+
+  private manageItemsClicked(): void {
+    this.dispatchEvent(new CustomEvent('manageItems'));
+  }
+
+  private selectAllClicked(): void {
+    this.dispatchEvent(new CustomEvent('selectAll'));
+  }
+
+  private unselectAllClicked(): void {
+    this.dispatchEvent(new CustomEvent('unselectAll'));
+  }
+
+  /**
+   * Shows a modal dialog confirming the list of items to be removed
+   * @param items Which items to list in the modal
+   */
+  private showRemoveItemsModal(): void {
+    const customModalContent = html`
+      <remove-items-modal-content
+        .items=${this.selectedItems}
+        .message=${this.manageViewModalMsg}
+        @confirm=${() => this.removeItemsClicked()}
+      ></remove-items-modal-content>
+    `;
+
+    const config = new ModalConfig({
+      showProcessingIndicator: false,
+      processingImageMode: 'processing',
+      bodyColor: '#fff',
+      headerColor: '#194880',
+      showHeaderLogo: false,
+      closeOnBackdropClick: true,
+      title: html`${msg('Are you sure you want to remove these items?')}`,
+    });
+
+    this.modalManager?.classList.add('remove-items');
+    this.modalManager?.showModal({
+      config,
+      customModalContent,
+      userClosedModalCallback: () => {
+        this.modalManager?.classList.remove('remove-items');
+      },
+    });
+  }
+
+  /**
+   * Shows a modal dialog indicating that item removal is being processed
+   */
+  showRemoveItemsProcessingModal(): void {
+    const config = new ModalConfig({
+      showProcessingIndicator: true,
+      processingImageMode: 'processing',
+      bodyColor: '#fff',
+      headerColor: '#194880',
+      showHeaderLogo: false,
+      closeOnBackdropClick: true,
+      title: html`${msg('Removing selected items...')}`,
+    });
+
+    this.modalManager?.classList.add('remove-items');
+    this.modalManager?.showModal({
+      config,
+      userClosedModalCallback: () => {
+        this.modalManager?.classList.remove('remove-items');
+      },
+    });
+  }
+
+  /**
+   * Shows a modal dialog indicating that an error occurred while removing items
+   */
+  showRemoveItemsErrorModal(): void {
+    const config = new ModalConfig({
+      showProcessingIndicator: false,
+      processingImageMode: 'processing',
+      bodyColor: '#fff',
+      headerColor: '#691916',
+      showHeaderLogo: false,
+      closeOnBackdropClick: true,
+      title: html`${msg('Error: unable to remove items')}`,
+      message: html`${msg(
+        'An error occurred while removing items. Please try again in a few minutes.',
+      )}`,
+    });
+
+    this.modalManager?.classList.add('remove-items');
+    this.modalManager?.showModal({
+      config,
+      userClosedModalCallback: () => {
+        this.modalManager?.classList.remove('remove-items');
+      },
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ${iaButtonStyle}
+      .manage-container {
+        display: flex;
+        align-items: center;
+        column-gap: 5px;
+        padding: 20px 0 20px;
+        flex-wrap: wrap;
+      }
+
+      .manage-label {
+        display: inline-block;
+        font-weight: bold;
+        font-size: 1.8rem;
+        padding-right: 10px;
+      }
+
+      .manage-buttons {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        column-gap: 5px;
+      }
+
+      .selection-buttons {
+        display: inherit;
+      }
+
+      .ia-button,
+      button {
+        padding: 6px 12px;
+        font-size: 1.4rem;
+        margin: 3px 0;
+      }
+    `;
+  }
+}

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/manage/remove-items-modal-content.ts

@@ -0,0 +1,102 @@
+import { LitElement, html, css, nothing, TemplateResult, CSSResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { map } from 'lit/directives/map.js';
+import type { ManageableItem } from '../models';
+
+@customElement('remove-items-modal-content')
+export class RemoveItemsModalContent extends LitElement {
+  @property({ type: Object }) items: ManageableItem[] = [];
+
+  @property({ type: String }) message?: string;
+
+  render(): TemplateResult {
+    return html`
+      <ul>
+        ${map(
+          this.items,
+          ({ title, date }) => html`
+            <li>
+              <span class="item-title">${title ?? '[untitled]'}</span>
+              <span class="item-date">${date ?? ''}</span>
+            </li>
+          `,
+        )}
+      </ul>
+      ${this.message ? html`<p class="message">${this.message}</p>` : nothing}
+      <div class="button-bar">
+        <button class="remove-items-btn" @click=${this.removeItemsBtnClicked}>
+          ${msg('Remove items')}
+        </button>
+      </div>
+    `;
+  }
+
+  private removeItemsBtnClicked(): void {
+    this.dispatchEvent(
+      new CustomEvent<{ items: ManageableItem[] }>('confirm', {
+        detail: {
+          items: this.items,
+        },
+      }),
+    );
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      ul {
+        margin: 0;
+        padding: 0 10px;
+        font-size: 1.4rem;
+        list-style-type: none;
+        max-height: min(400px, 40vh);
+        overflow-y: auto;
+      }
+
+      li {
+        display: flex;
+        justify-content: space-between;
+        padding: 2px 0;
+      }
+      li:not(:last-of-type) {
+        border-bottom: 1px solid rgb(232, 232, 232);
+      }
+
+      .item-title {
+        word-break: break-word;
+      }
+
+      .item-date {
+        white-space: nowrap;
+      }
+
+      .message {
+        font-size: 1.4rem;
+        padding: 5px 10px;
+      }
+
+      .button-bar {
+        display: flex;
+        justify-content: center;
+        margin: 10px 5px;
+      }
+
+      .remove-items-btn {
+        margin-bottom: 10px;
+        padding: 10px;
+        border: 1px solid var(--primaryErrorCTABorder, #d43f3a);
+        border-radius: 4px;
+        color: white;
+        background: var(--primaryErrorCTAFill, #d9534f);
+        appearance: none;
+        cursor: pointer;
+      }
+      .remove-items-btn:hover {
+        background: rgba(var(--primaryErrorCTAFillRGB, 229, 28, 38), 0.9);
+      }
+      .remove-items-btn:active {
+        background: rgba(var(--primaryErrorCTAFillRGB, 229, 28, 38), 0.7);
+      }
+    `;
+  }
+}

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/mediatype/mediatype-config.ts

@@ -0,0 +1,146 @@
+import { html, TemplateResult } from 'lit';
+import { accountIcon } from '../assets/img/icons/mediatype/account';
+import { audioIcon } from '../assets/img/icons/mediatype/audio';
+import { collectionIcon } from '../assets/img/icons/mediatype/collection';
+import { dataIcon } from '../assets/img/icons/mediatype/data';
+import { etreeIcon } from '../assets/img/icons/mediatype/etree';
+import { imagesIcon } from '../assets/img/icons/mediatype/images';
+import { filmIcon } from '../assets/img/icons/mediatype/film';
+import { radioIcon } from '../assets/img/icons/mediatype/radio';
+import { softwareIcon } from '../assets/img/icons/mediatype/software';
+import { textsIcon } from '../assets/img/icons/mediatype/texts';
+import { tvIcon } from '../assets/img/icons/mediatype/tv';
+import { tvCommercialIcon } from '../assets/img/icons/mediatype/tv-commercial';
+import { tvFactCheckIcon } from '../assets/img/icons/mediatype/tv-fact-check';
+import { videoIcon } from '../assets/img/icons/mediatype/video';
+import { webIcon } from '../assets/img/icons/mediatype/web';
+import { searchIcon } from '../assets/img/icons/mediatype/search';
+import { tvQuoteIcon } from '../assets/img/icons/mediatype/tv-quote';
+
+/**
+ * Union of keys with valid mediatype config entries
+ */
+export type MediatypeConfigKey =
+  | 'account'
+  | 'audio'
+  | 'collection'
+  | 'data'
+  | 'etree'
+  | 'film'
+  | 'image'
+  | 'movies'
+  | 'none'
+  | 'radio'
+  | 'search'
+  | 'software'
+  | 'texts'
+  | 'tv'
+  | 'tvCommercial'
+  | 'tvFactCheck'
+  | 'tvQuote'
+  | 'video'
+  | 'web';
+
+export type MediatypeConfig = {
+  color: string;
+  icon: TemplateResult;
+  text: string;
+};
+
+export const mediatypeConfig: Record<MediatypeConfigKey, MediatypeConfig> = {
+  account: {
+    color: '#000000',
+    icon: accountIcon,
+    text: 'Account',
+  },
+  audio: {
+    color: '#00adef',
+    icon: audioIcon,
+    text: 'Audio',
+  },
+  collection: {
+    color: '#4666ff',
+    icon: collectionIcon,
+    text: 'Collection',
+  },
+  data: {
+    color: '#333333',
+    icon: dataIcon,
+    text: 'Data',
+  },
+  etree: {
+    color: '#00adef',
+    icon: etreeIcon,
+    text: 'E-tree',
+  },
+  film: {
+    color: '#bf1b2c',
+    icon: filmIcon,
+    text: 'Film',
+  },
+  image: {
+    color: '#aa99c9',
+    icon: imagesIcon,
+    text: 'Image',
+  },
+  movies: {
+    color: '#f1644b',
+    icon: filmIcon,
+    text: 'Movie',
+  },
+  none: {
+    color: '#00000000',
+    icon: html``, // Empty
+    text: '',
+  },
+  radio: {
+    color: '#8fdaef',
+    icon: radioIcon,
+    text: 'Radio',
+  },
+  software: {
+    color: '#9ecc4f',
+    icon: softwareIcon,
+    text: 'Software',
+  },
+  texts: {
+    color: '#faab3c',
+    icon: textsIcon,
+    text: 'Text',
+  },
+  tv: {
+    color: '#f1644b',
+    icon: tvIcon,
+    text: 'TV',
+  },
+  tvCommercial: {
+    color: '#84b648',
+    icon: tvCommercialIcon,
+    text: 'TV Political Ad',
+  },
+  tvFactCheck: {
+    color: '#f1644b',
+    icon: tvFactCheckIcon,
+    text: 'TV Fact Check',
+  },
+  tvQuote: {
+    color: '#fe7a5f',
+    icon: tvQuoteIcon,
+    text: 'TV Quote',
+  },
+  video: {
+    color: '#f1644b',
+    icon: videoIcon,
+    text: 'Video',
+  },
+  web: {
+    color: '#ffcd27',
+    icon: webIcon,
+    text: 'Web',
+  },
+  search: {
+    color: '#000000',
+    icon: searchIcon,
+    text: 'Search',
+  },
+};