@internetarchive/collection-browser 2.10.1-alpha-webdev7479.10 → 2.12.0

package/dist/test/tile-stats.test.js

@@ -12,7 +12,7 @@ describe('Tile Stats', () => {
         expect(statsRow).to.exist;
         expect(statsRowCount).to.equal(4);
     });
-    it('should render component with value', async () => {
+    it('should render component with values', async () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const el = await fixture(html `
       <tile-stats
@@ -32,9 +32,35 @@ describe('Tile Stats', () => {
         // get fourth column item in stats row
         const reviewsStatCount = (_k = (_j = (_h = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(3)) === null || _h === void 0 ? void 0 : _h.querySelector('.status-text')) === null || _j === void 0 ? void 0 : _j.textContent) === null || _k === void 0 ? void 0 : _k.trim();
         expect(mediatypeStat).to.exist;
-        expect(itemStatCount).to.match(/Uploads:\s+1/);
-        expect(favoritesStatCount).to.match(/Favorites:\s+2/);
-        expect(reviewsStatCount).to.match(/Reviews:\s+3/);
+        expect(itemStatCount).to.match(/uploads:\s+1/);
+        expect(favoritesStatCount).to.match(/favorites:\s+2/);
+        expect(reviewsStatCount).to.match(/reviews:\s+3/);
+    });
+    it('should render component with tv clips', async () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const el = await fixture(html `
+      <tile-stats
+        showTvClips
+        .mediatype=${'texts'}
+        .viewCount=${1}
+        .favCount=${2}
+        .commentCount=${3}
+        .tvClipCount=${4}
+      >
+      </tile-stats>
+    `);
+        const statsRow = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#stats-row');
+        const mediatypeStat = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(0);
+        // get second column item in stats row
+        const itemStatCount = (_d = (_c = (_b = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(1)) === null || _b === void 0 ? void 0 : _b.querySelector('.status-text')) === null || _c === void 0 ? void 0 : _c.textContent) === null || _d === void 0 ? void 0 : _d.trim();
+        // get third column item in stats row
+        const favoritesStatCount = (_g = (_f = (_e = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(2)) === null || _e === void 0 ? void 0 : _e.querySelector('.status-text')) === null || _f === void 0 ? void 0 : _f.textContent) === null || _g === void 0 ? void 0 : _g.trim();
+        // get fourth column item in stats row
+        const clipsStatCount = (_k = (_j = (_h = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(3)) === null || _h === void 0 ? void 0 : _h.querySelector('.status-text')) === null || _j === void 0 ? void 0 : _j.textContent) === null || _k === void 0 ? void 0 : _k.trim();
+        expect(mediatypeStat).to.exist;
+        expect(itemStatCount).to.match(/views:\s+1/);
+        expect(favoritesStatCount).to.match(/favorites:\s+2/);
+        expect(clipsStatCount).to.match(/clips:\s+4/);
     });
     it('should render view count for non-account items', async () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -56,9 +82,9 @@ describe('Tile Stats', () => {
         // get fourth column item in stats row
         const reviewsStatCount = (_k = (_j = (_h = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(3)) === null || _h === void 0 ? void 0 : _h.querySelector('.status-text')) === null || _j === void 0 ? void 0 : _j.textContent) === null || _k === void 0 ? void 0 : _k.trim();
         expect(mediatypeStat).to.exist;
-        expect(viewStatCount).to.match(/Views:\s+4/);
-        expect(favoritesStatCount).to.match(/Favorites:\s+5/);
-        expect(reviewsStatCount).to.match(/Reviews:\s+6/);
+        expect(viewStatCount).to.match(/views:\s+4/);
+        expect(favoritesStatCount).to.match(/favorites:\s+5/);
+        expect(reviewsStatCount).to.match(/reviews:\s+6/);
     });
     it('handles missing counts gracefully', async () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -75,9 +101,9 @@ describe('Tile Stats', () => {
         // get fourth column item in stats row
         const reviewsStatCount = (_k = (_j = (_h = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(3)) === null || _h === void 0 ? void 0 : _h.querySelector('.status-text')) === null || _j === void 0 ? void 0 : _j.textContent) === null || _k === void 0 ? void 0 : _k.trim();
         expect(mediatypeStat).to.exist;
-        expect(viewStatCount).to.match(/Views:\s+0/);
-        expect(favoritesStatCount).to.match(/Favorites:\s+5/);
-        expect(reviewsStatCount).to.match(/Reviews:\s+6/);
+        expect(viewStatCount).to.match(/views:\s+0/);
+        expect(favoritesStatCount).to.match(/favorites:\s+5/);
+        expect(reviewsStatCount).to.match(/reviews:\s+6/);
     });
     it('handles missing counts gracefully for accounts', async () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -94,9 +120,9 @@ describe('Tile Stats', () => {
         // get fourth column item in stats row
         const reviewsStatCount = (_k = (_j = (_h = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(3)) === null || _h === void 0 ? void 0 : _h.querySelector('.status-text')) === null || _j === void 0 ? void 0 : _j.textContent) === null || _k === void 0 ? void 0 : _k.trim();
         expect(mediatypeStat).to.exist;
-        expect(itemStatCount).to.match(/Uploads:\s+0/);
-        expect(favoritesStatCount).to.match(/Favorites:\s+5/);
-        expect(reviewsStatCount).to.match(/Reviews:\s+6/);
+        expect(itemStatCount).to.match(/uploads:\s+0/);
+        expect(favoritesStatCount).to.match(/favorites:\s+5/);
+        expect(reviewsStatCount).to.match(/reviews:\s+6/);
     });
 });
 //# sourceMappingURL=tile-stats.test.js.map

package/dist/test/tile-stats.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-stats.test.js","sourceRoot":"","sources":["../../test/tile-stats.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport type { TileStats } from '../src/tiles/grid/tile-stats';\n\nimport '../src/tiles/grid/tile-stats';\n\ndescribe('Tile Stats', () => {\n  it('should render initial component', async () => {\n    const el = await fixture<TileStats>(html`<tile-stats></tile-stats>`);\n\n    const itemStats = el.shadowRoot?.querySelector('.item-stats');\n    const statsRow = el.shadowRoot?.querySelector('#stats-row');\n    const statsRowCount = statsRow?.childElementCount;\n\n    expect(itemStats).to.exist;\n    expect(statsRow).to.exist;\n    expect(statsRowCount).to.equal(4);\n  });\n\n  it('should render component with value', async () => {\n    const el = await fixture<TileStats>(html`\n      <tile-stats\n        .mediatype=${'account'}\n        .itemCount=${1}\n        .favCount=${2}\n        .commentCount=${3}\n      >\n      </tile-stats>\n    `);\n\n    const statsRow = el.shadowRoot?.querySelector('#stats-row');\n\n    const mediatypeStat = statsRow?.children.item(0);\n    // get second column item in stats row\n    const itemStatCount = statsRow?.children\n      .item(1)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get third column item in stats row\n    const favoritesStatCount = statsRow?.children\n      .item(2)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get fourth column item in stats row\n    const reviewsStatCount = statsRow?.children\n      .item(3)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n\n    expect(mediatypeStat).to.exist;\n    expect(itemStatCount).to.match(/Uploads:\\s+1/);\n    expect(favoritesStatCount).to.match(/Favorites:\\s+2/);\n    expect(reviewsStatCount).to.match(/Reviews:\\s+3/);\n  });\n\n  it('should render view count for non-account items', async () => {\n    const el = await fixture<TileStats>(html`\n      <tile-stats\n        .mediatype=${'texts'}\n        .viewCount=${4}\n        .favCount=${5}\n        .commentCount=${6}\n      >\n      </tile-stats>\n    `);\n\n    const statsRow = el.shadowRoot?.querySelector('#stats-row');\n\n    const mediatypeStat = statsRow?.children.item(0);\n    // get second column item in stats row\n    const viewStatCount = statsRow?.children\n      .item(1)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get third column item in stats row\n    const favoritesStatCount = statsRow?.children\n      .item(2)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get fourth column item in stats row\n    const reviewsStatCount = statsRow?.children\n      .item(3)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n\n    expect(mediatypeStat).to.exist;\n    expect(viewStatCount).to.match(/Views:\\s+4/);\n    expect(favoritesStatCount).to.match(/Favorites:\\s+5/);\n    expect(reviewsStatCount).to.match(/Reviews:\\s+6/);\n  });\n\n  it('handles missing counts gracefully', async () => {\n    const el = await fixture<TileStats>(html`\n      <tile-stats .mediatype=${'texts'} .favCount=${5} .commentCount=${6}>\n      </tile-stats>\n    `);\n\n    const statsRow = el.shadowRoot?.querySelector('#stats-row');\n\n    const mediatypeStat = statsRow?.children.item(0);\n    // get second column item in stats row\n    const viewStatCount = statsRow?.children\n      .item(1)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get third column item in stats row\n    const favoritesStatCount = statsRow?.children\n      .item(2)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get fourth column item in stats row\n    const reviewsStatCount = statsRow?.children\n      .item(3)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n\n    expect(mediatypeStat).to.exist;\n    expect(viewStatCount).to.match(/Views:\\s+0/);\n    expect(favoritesStatCount).to.match(/Favorites:\\s+5/);\n    expect(reviewsStatCount).to.match(/Reviews:\\s+6/);\n  });\n\n  it('handles missing counts gracefully for accounts', async () => {\n    const el = await fixture<TileStats>(html`\n      <tile-stats .mediatype=${'account'} .favCount=${5} .commentCount=${6}>\n      </tile-stats>\n    `);\n\n    const statsRow = el.shadowRoot?.querySelector('#stats-row');\n\n    const mediatypeStat = statsRow?.children.item(0);\n    // get second column item in stats row\n    const itemStatCount = statsRow?.children\n      .item(1)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get third column item in stats row\n    const favoritesStatCount = statsRow?.children\n      .item(2)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get fourth column item in stats row\n    const reviewsStatCount = statsRow?.children\n      .item(3)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n\n    expect(mediatypeStat).to.exist;\n    expect(itemStatCount).to.match(/Uploads:\\s+0/);\n    expect(favoritesStatCount).to.match(/Favorites:\\s+5/);\n    expect(reviewsStatCount).to.match(/Reviews:\\s+6/);\n  });\n});\n"]}
+{"version":3,"file":"tile-stats.test.js","sourceRoot":"","sources":["../../test/tile-stats.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport type { TileStats } from '../src/tiles/grid/tile-stats';\n\nimport '../src/tiles/grid/tile-stats';\n\ndescribe('Tile Stats', () => {\n  it('should render initial component', async () => {\n    const el = await fixture<TileStats>(html`<tile-stats></tile-stats>`);\n\n    const itemStats = el.shadowRoot?.querySelector('.item-stats');\n    const statsRow = el.shadowRoot?.querySelector('#stats-row');\n    const statsRowCount = statsRow?.childElementCount;\n\n    expect(itemStats).to.exist;\n    expect(statsRow).to.exist;\n    expect(statsRowCount).to.equal(4);\n  });\n\n  it('should render component with values', async () => {\n    const el = await fixture<TileStats>(html`\n      <tile-stats\n        .mediatype=${'account'}\n        .itemCount=${1}\n        .favCount=${2}\n        .commentCount=${3}\n      >\n      </tile-stats>\n    `);\n\n    const statsRow = el.shadowRoot?.querySelector('#stats-row');\n\n    const mediatypeStat = statsRow?.children.item(0);\n    // get second column item in stats row\n    const itemStatCount = statsRow?.children\n      .item(1)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get third column item in stats row\n    const favoritesStatCount = statsRow?.children\n      .item(2)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get fourth column item in stats row\n    const reviewsStatCount = statsRow?.children\n      .item(3)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n\n    expect(mediatypeStat).to.exist;\n    expect(itemStatCount).to.match(/uploads:\\s+1/);\n    expect(favoritesStatCount).to.match(/favorites:\\s+2/);\n    expect(reviewsStatCount).to.match(/reviews:\\s+3/);\n  });\n\n  it('should render component with tv clips', async () => {\n    const el = await fixture<TileStats>(html`\n      <tile-stats\n        showTvClips\n        .mediatype=${'texts'}\n        .viewCount=${1}\n        .favCount=${2}\n        .commentCount=${3}\n        .tvClipCount=${4}\n      >\n      </tile-stats>\n    `);\n\n    const statsRow = el.shadowRoot?.querySelector('#stats-row');\n\n    const mediatypeStat = statsRow?.children.item(0);\n    // get second column item in stats row\n    const itemStatCount = statsRow?.children\n      .item(1)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get third column item in stats row\n    const favoritesStatCount = statsRow?.children\n      .item(2)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get fourth column item in stats row\n    const clipsStatCount = statsRow?.children\n      .item(3)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n\n    expect(mediatypeStat).to.exist;\n    expect(itemStatCount).to.match(/views:\\s+1/);\n    expect(favoritesStatCount).to.match(/favorites:\\s+2/);\n    expect(clipsStatCount).to.match(/clips:\\s+4/);\n  });\n\n  it('should render view count for non-account items', async () => {\n    const el = await fixture<TileStats>(html`\n      <tile-stats\n        .mediatype=${'texts'}\n        .viewCount=${4}\n        .favCount=${5}\n        .commentCount=${6}\n      >\n      </tile-stats>\n    `);\n\n    const statsRow = el.shadowRoot?.querySelector('#stats-row');\n\n    const mediatypeStat = statsRow?.children.item(0);\n    // get second column item in stats row\n    const viewStatCount = statsRow?.children\n      .item(1)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get third column item in stats row\n    const favoritesStatCount = statsRow?.children\n      .item(2)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get fourth column item in stats row\n    const reviewsStatCount = statsRow?.children\n      .item(3)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n\n    expect(mediatypeStat).to.exist;\n    expect(viewStatCount).to.match(/views:\\s+4/);\n    expect(favoritesStatCount).to.match(/favorites:\\s+5/);\n    expect(reviewsStatCount).to.match(/reviews:\\s+6/);\n  });\n\n  it('handles missing counts gracefully', async () => {\n    const el = await fixture<TileStats>(html`\n      <tile-stats .mediatype=${'texts'} .favCount=${5} .commentCount=${6}>\n      </tile-stats>\n    `);\n\n    const statsRow = el.shadowRoot?.querySelector('#stats-row');\n\n    const mediatypeStat = statsRow?.children.item(0);\n    // get second column item in stats row\n    const viewStatCount = statsRow?.children\n      .item(1)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get third column item in stats row\n    const favoritesStatCount = statsRow?.children\n      .item(2)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get fourth column item in stats row\n    const reviewsStatCount = statsRow?.children\n      .item(3)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n\n    expect(mediatypeStat).to.exist;\n    expect(viewStatCount).to.match(/views:\\s+0/);\n    expect(favoritesStatCount).to.match(/favorites:\\s+5/);\n    expect(reviewsStatCount).to.match(/reviews:\\s+6/);\n  });\n\n  it('handles missing counts gracefully for accounts', async () => {\n    const el = await fixture<TileStats>(html`\n      <tile-stats .mediatype=${'account'} .favCount=${5} .commentCount=${6}>\n      </tile-stats>\n    `);\n\n    const statsRow = el.shadowRoot?.querySelector('#stats-row');\n\n    const mediatypeStat = statsRow?.children.item(0);\n    // get second column item in stats row\n    const itemStatCount = statsRow?.children\n      .item(1)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get third column item in stats row\n    const favoritesStatCount = statsRow?.children\n      .item(2)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n    // get fourth column item in stats row\n    const reviewsStatCount = statsRow?.children\n      .item(3)\n      ?.querySelector('.status-text')\n      ?.textContent?.trim();\n\n    expect(mediatypeStat).to.exist;\n    expect(itemStatCount).to.match(/uploads:\\s+0/);\n    expect(favoritesStatCount).to.match(/favorites:\\s+5/);\n    expect(reviewsStatCount).to.match(/reviews:\\s+6/);\n  });\n});\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "2.10.1-alpha-webdev7479.10",
+  "version": "2.12.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -32,7 +32,7 @@
     "@internetarchive/iaux-item-metadata": "^1.0.4",
     "@internetarchive/infinite-scroller": "^1.0.1",
     "@internetarchive/modal-manager": "^2.0.1",
-    "@internetarchive/search-service": "2.0.1-alpha-webdev7479.4",
+    "@internetarchive/search-service": "^2.2.0",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@lit/localize": "^0.12.2",
     "dompurify": "^3.2.4",

package/src/assets/img/icons/close-circle-dark.ts

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+
+export default svg`
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m50 0c27.6142375 0 50 22.3857625 50 50s-22.3857625 50-50 50-50-22.3857625-50-50 22.3857625-50 50-50zm23.8159475 26.1840525c-1.4033215-1.4033215-3.5816761-1.5592461-5.1572272-.4677738l-.5598841.4677738-18.0988362 18.0989475-18.0988362-18.0989475-.5598841-.4677738c-1.5755511-1.0914723-3.7539057-.9355477-5.1572272.4677738-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113l18.0989475 18.0988362-18.0989475 18.0988362c-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113 1.4033215 1.4033215 3.5816761 1.5592461 5.1572272.4677738l.5598841-.4677738 18.0988362-18.0989475 18.0988362 18.0989475.5598841.4677738c1.5755511 1.0914723 3.7539057.9355477 5.1572272-.4677738 1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113l-18.0989475-18.0988362 18.0989475-18.0988362c1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113z" fill-rule="evenodd"/></svg>
+`;

package/src/collection-browser.ts

@@ -68,6 +68,7 @@ import { sha1 } from './utils/sha1';
 import { log } from './utils/log';
 import type { PlaceholderType } from './empty-placeholder';
 import type { ManageBar } from './manage/manage-bar';
+import type { SmartFacetBar } from './collection-facets/smart-facets/smart-facet-bar';
 
 import './empty-placeholder';
 import './tiles/tile-dispatcher';
@@ -256,6 +257,8 @@ export class CollectionBrowser
   /** Whether to display a smart results carousel above the full results */
   @property({ type: Boolean, reflect: true }) showSmartResults = false;
 
+  @property({ type: String }) resultsHeader?: string;
+
   /**
    * The maximum number of pages we will load when a privileged user clicks
    * the "Manage" button on the search page. Limited to 15 pages.
@@ -310,6 +313,8 @@ export class CollectionBrowser
 
   @query('manage-bar') private manageBar?: ManageBar;
 
+  @query('smart-facet-bar') private smartFacetBar?: SmartFacetBar;
+
   @property({ type: Object, attribute: false })
   analyticsHandler?: AnalyticsManagerInterface;
 
@@ -513,7 +518,7 @@ export class CollectionBrowser
   render() {
     return html`
       ${this.showSmartFacetBar
-        ? html` <smart-facet-bar
+        ? html`<smart-facet-bar
             .query=${this.baseQuery}
             .aggregations=${this.dataSource.aggregations}
             .selectedFacets=${this.selectedFacets}
@@ -522,6 +527,7 @@ export class CollectionBrowser
             @facetsChanged=${this.facetsChanged}
             @filtersToggled=${() => {
               this.facetPaneVisible = !this.facetPaneVisible;
+              this.emitFacetPaneVisibilityChanged();
             }}
           ></smart-facet-bar>`
         : nothing}
@@ -688,18 +694,21 @@ export class CollectionBrowser
    * tiles and sort/filter bar are shown.
    */
   private get rightColumnTemplate(): TemplateResult {
+    const rightColumnClasses = classMap({
+      column: true,
+      'full-width': this.showSmartFacetBar && !this.facetPaneVisible,
+      'smart-results-spacing': !!this.showSmartResults,
+    });
+
     return html`
-      <div
-        id="right-column"
-        class="column ${this.showSmartResults ? 'smart-results-spacing' : ''}"
-      >
+      <div id="right-column" class=${rightColumnClasses}>
         ${this.showSmartResults
           ? html`<slot name="smart-results"></slot>`
           : nothing}
         <section id="results">
           ${this.showSmartResults
             ? html`<h2 class="results-section-heading">
-                ${msg('All results')}
+                ${this.resultsHeader ?? msg('All results')}
               </h2>`
             : nothing}
           <div id="cb-top-view">
@@ -847,6 +856,10 @@ export class CollectionBrowser
     );
   }
 
+  refreshSmartFacets(): void {
+    this.smartFacetBar?.refresh();
+  }
+
   /**
    * Handler to show processing modal while removing item
    */
@@ -1669,6 +1682,18 @@ export class CollectionBrowser
     );
   }
 
+  /**
+   * Emits a `facetPaneVisibilityChanged` event indicating that the facet pane has
+   * been toggled open or closed.
+   */
+  private emitFacetPaneVisibilityChanged(): void {
+    this.dispatchEvent(
+      new CustomEvent<boolean>('facetPaneVisibilityChanged', {
+        detail: this.facetPaneVisible,
+      }),
+    );
+  }
+
   /**
    * Emits a `queryStateChanged` event indicating that one or more of this component's
    * properties have changed in a way that could affect the set of search results.
@@ -2215,13 +2240,16 @@ export class CollectionBrowser
           flex: 1;
           position: relative;
           min-height: 90vh;
-          border-left: 1px solid rgb(232, 232, 232);
           border-right: 1px solid rgb(232, 232, 232);
           margin-top: var(--rightColumnMarginTop, 0);
           padding-top: 2rem;
           background: #fff;
         }
 
+        #left-column:not([hidden]) + #right-column {
+          border-left: 1px solid rgb(232, 232, 232);
+        }
+
         #right-column.smart-results-spacing {
           padding-top: 0.5rem;
           border-right: none;

package/src/collection-facets/smart-facets/heuristics/wikidata/wikidata-heuristic.ts

@@ -44,7 +44,10 @@ export class WikidataHeuristic implements SmartQueryHeuristic {
           facets: smartFacet.facets.map(facet => {
             const replaced = {
               ...facet,
-              bucketKey: facet.bucketKey.replace('__QUERY', query),
+              bucketKey: facet.bucketKey.replace(
+                '__QUERY',
+                query.toLowerCase(),
+              ),
             };
 
             if (facet.displayText) {

package/src/collection-facets/smart-facets/smart-facet-bar.ts

@@ -9,6 +9,7 @@ import {
 } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { customElement, property, state } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
 import type { Aggregation, Bucket } from '@internetarchive/search-service';
 import type { CollectionTitles } from '../../data-source/models';
 import type { FacetOption, SelectedFacets } from '../../models';
@@ -18,11 +19,11 @@ import type { SmartFacetDropdown } from './smart-facet-dropdown';
 import type { SmartFacet, SmartFacetEvent } from './models';
 import { smartFacetEquals } from './smart-facet-equals';
 import { dedupe } from './dedupe';
+import { log } from '../../utils/log';
 import filterIcon from '../../assets/img/icons/filter';
 
 import './smart-facet-button';
 import './smart-facet-dropdown';
-import { log } from '../../utils/log';
 
 const fieldPrefixes: Partial<Record<FacetOption, string>> = {
   collection: 'Collection: ',
@@ -59,9 +60,14 @@ export class SmartFacetBar extends LitElement {
   //
 
   render() {
+    if (!this.query) return nothing;
+
     return html`
       <div id="smart-facets-container">
         ${this.filtersToggleTemplate}
+        ${this.smartFacets.length > 0
+          ? html`<p id="filters-label">${msg('Insights:')}</p>`
+          : nothing}
         ${repeat(
           this.smartFacets,
           f =>
@@ -98,6 +104,11 @@ export class SmartFacetBar extends LitElement {
     }
   }
 
+  refresh(): void {
+    this.lastAggregations = this.aggregations;
+    this.updateSmartFacets();
+  }
+
   private async updateSmartFacets(): Promise<void> {
     log('updating smart facets');
     if (this.query) {
@@ -164,6 +175,10 @@ export class SmartFacetBar extends LitElement {
 
     if (this.heuristicRecs.length > 0) {
       for (const rec of this.heuristicRecs) {
+        // Suppress mediatype-only facets for now.
+        if (rec.facets.length === 1 && rec.facets[0].facetType === 'mediatype')
+          continue;
+
         facets.push([rec]);
       }
     }
@@ -206,10 +221,8 @@ export class SmartFacetBar extends LitElement {
         });
 
         if (facetType === 'mediatype') {
-          facets.push(
-            [this.toSmartFacet(facetType, [unusedBuckets[0]])],
-            [this.toSmartFacet(facetType, [unusedBuckets[1]])],
-          );
+          continue;
+          // Don't include mediatype bubbles
         } else if (facetType === 'collection' || facetType === 'subject') {
           const topBuckets = unusedBuckets.slice(0, 5);
           facets.push(topBuckets.map(b => this.toSmartFacet(facetType, [b])));
@@ -320,33 +333,42 @@ export class SmartFacetBar extends LitElement {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
-        gap: 5px;
+        gap: 5px 10px;
         padding: 10px 0;
       }
 
       #filters-toggle {
         margin: 0;
         border: 0;
-        padding: 5px 10px;
-        border-radius: 15px;
-        background: #194880;
-        color: white;
-        font-size: 1.6rem;
+        padding: 5px 8px;
+        border-radius: 50%;
+        background: white;
+        color: #2c2c2c;
+        border: 1px solid #194880;
+        font-size: 1.4rem;
         font-family: inherit;
         text-decoration: none;
-        box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
         cursor: pointer;
       }
 
       #filters-toggle.active {
-        background: #09294d;
-        box-shadow: -1px -1px rgba(0, 0, 0, 0.1);
+        background: #194880;
+        color: white;
       }
 
       #filters-toggle > svg {
-        width: 15px;
+        width: 12px;
+        filter: invert(0.16667);
+        vertical-align: -1px;
+      }
+
+      #filters-toggle.active > svg {
         filter: invert(1);
-        vertical-align: text-bottom;
+      }
+
+      #filters-label {
+        font-weight: bold;
+        margin: 0 -5px 0 0;
       }
     `;
   }

package/src/collection-facets/smart-facets/smart-facet-button.ts

@@ -3,6 +3,8 @@ import { customElement, property } from 'lit/decorators.js';
 import { mediatypeConfig } from '../../mediatype/mediatype-config';
 import type { SmartFacet, SmartFacetEvent } from './models';
 
+import closeCircleDark from '../../assets/img/icons/close-circle-dark';
+
 function capitalize(str?: string): string | undefined {
   if (!str) return str;
   return str.charAt(0).toLocaleUpperCase() + str.slice(1);
@@ -47,7 +49,7 @@ export class SmartFacetButton extends LitElement {
       >
         ${icon} ${displayText}
         ${this.selected
-          ? html`<span style="margin-left: 5px;">×</span>`
+          ? html`<span class="unselect-button">${closeCircleDark}</span>`
           : nothing}
       </a>
     `;
@@ -101,24 +103,39 @@ export class SmartFacetButton extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       .smart-facet-button {
-        padding: 5px 10px;
-        border-radius: 15px;
-        background: #194880;
-        color: white;
-        font-size: 1.6rem;
+        display: inline-flex;
+        align-items: center;
+        column-gap: 5px;
+        padding: 5px 5px;
+        border-radius: 5px;
+        background: white;
+        color: #2c2c2c;
+        border: 1px solid #194880;
+        font-size: 1.4rem;
         font-family: inherit;
+        line-height: normal;
         text-decoration: none;
-        box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
       }
 
       .smart-facet-button.selected {
-        background: #4c76aa;
+        background: #194880;
+        color: white;
+      }
+
+      .unselect-button > svg {
+        width: 10px;
+        height: 10px;
+        filter: invert(1);
       }
 
       .smart-facet-button > svg {
-        width: 15px;
+        width: 12px;
+        height: 12px;
+        filter: invert(0.16667);
+      }
+
+      .smart-facet-button.selected > svg {
         filter: invert(1);
-        vertical-align: text-top;
       }
     `;
   }

package/src/collection-facets/smart-facets/smart-facet-dropdown.ts

@@ -33,6 +33,8 @@ export class SmartFacetDropdown extends LitElement {
           displayCaret
           openViaButton
           closeOnSelect
+          closeOnEscape
+          closeOnBackdropClick
           includeSelectedOption
           .options=${this.dropdownOptions}
           .selectedOption=${this.activeDropdownOption}
@@ -57,8 +59,11 @@ export class SmartFacetDropdown extends LitElement {
         const firstFacet = smartFacet.facets[0];
         return {
           id: firstFacet.bucketKey,
-          label:
-            smartFacet.label ?? firstFacet.displayText ?? firstFacet.bucketKey,
+          label: html`<span>
+            ${smartFacet.label ??
+            firstFacet.displayText ??
+            firstFacet.bucketKey}
+          </span>`,
         };
       }) ?? []
     );
@@ -127,23 +132,29 @@ export class SmartFacetDropdown extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       .dropdown-container {
-        padding: 5px 8px;
+        padding: 5px 5px;
         border-radius: 5px;
-        background: #194880;
-        color: white;
-        font-size: 1.6rem;
+        background: white;
+        color: #2c2c2c;
+        border: 1px solid #194880;
+        font-size: 1.4rem;
         font-family: inherit;
-        box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
       }
 
       .dropdown-label {
-        font-size: 1.6rem;
+        font-size: 1.4rem;
         font-family: inherit;
       }
 
       .dropdown {
-        --dropdownBorderWidth: 5px;
-        --dropdownBorderColor: transparent;
+        --dropdownBorderColor: #194880;
+        --dropdownBorderWidth: 1px;
+        --dropdownBgColor: white;
+        --dropdownHoverBgColor: #f8f8f8;
+        --dropdownTextColor: #2c2c2c;
+        --dropdownHoverTextColor: #2c2c2c;
+        --dropdownCaretColor: #2c2c2c;
+        --dropdownWhiteSpace: nowrap;
         --caretWidth: 14px;
         --caretHeight: 14px;
       }

package/src/data-source/collection-browser-data-source.ts

@@ -591,15 +591,18 @@ export class CollectionBrowserDataSource
     const isTvSearch = this.host.searchType === SearchType.TV;
 
     // Metadata/tv searches within a collection are allowed to have no query.
+    const isValidForCollectionSearch =
+      isDefaultedSearch || isMetadataSearch || isTvSearch;
+
     // Searches within a profile page may also be performed without a query, provided the profile element is set.
+    const isValidForProfileSearch =
+      hasProfileElement && (isDefaultedSearch || isMetadataSearch);
+
     // Otherwise, a non-empty query must be set.
     return (
       hasNonEmptyQuery ||
-      (isCollectionSearch &&
-        (isDefaultedSearch || isMetadataSearch || isTvSearch)) ||
-      (isProfileSearch &&
-        hasProfileElement &&
-        (isDefaultedSearch || isMetadataSearch))
+      (isCollectionSearch && isValidForCollectionSearch) ||
+      (isProfileSearch && isValidForProfileSearch)
     );
   }
 

package/src/tiles/grid/tile-stats.ts

@@ -1,7 +1,7 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { msg } from '@lit/localize';
+import { msg, str } from '@lit/localize';
 import { favoriteFilledIcon as favIcon } from '../../assets/img/icons/favorite-filled';
 import { reviewsIcon } from '../../assets/img/icons/reviews';
 import { uploadIcon } from '../../assets/img/icons/upload';
@@ -85,7 +85,7 @@ export class TileStats extends LitElement {
     classes: string[] = [],
   ): TemplateResult {
     const formattedCount = formatCount(count ?? 0, 'short', 'short');
-    const title = `${formattedCount} ${label}`;
+    const title = msg(str`${formattedCount} ${label}`);
     const srLabel = label + ':';
 
     return html`