Refactor collections and browser profile data-tables

frontend/src/components/ui/overflow-dropdown.ts

@@ -1,7 +1,12 @@
 import { LitElement, html, css } from "lit";
-import { customElement, state, queryAssignedElements } from "lit/decorators.js";
+import {
+  customElement,
+  state,
+  queryAssignedElements,
+  query,
+} from "lit/decorators.js";
 import { msg, localized } from "@lit/localize";
-import type { SlMenu } from "@shoelace-style/shoelace";
+import type { SlDropdown, SlMenu } from "@shoelace-style/shoelace";
 
 /**
  * Dropdown for additional actions.
@@ -34,12 +39,15 @@ export class OverflowDropdown extends LitElement {
   @state()
   private hasMenuItems?: boolean;
 
+  @query("sl-dropdown")
+  private dropdown?: SlDropdown;
+
   @queryAssignedElements({ selector: "sl-menu", flatten: true })
   private menu!: Array<SlMenu>;
 
   render() {
     return html`
-      <sl-dropdown ?disabled=${!this.hasMenuItems}>
+      <sl-dropdown ?disabled=${!this.hasMenuItems} hoist>
         <sl-icon-button
           slot="trigger"
           class="trigger"
@@ -54,4 +62,8 @@ export class OverflowDropdown extends LitElement {
       </sl-dropdown>
     `;
   }
+
+  hide() {
+    this.dropdown?.hide();
+  }
 }

frontend/src/components/ui/table/table-cell.ts

@@ -40,23 +40,22 @@ export class TableCell extends LitElement {
   role = "cell";
 
   @property({ type: String })
-  rowClickTarget?: (typeof ALLOWED_ROW_CLICK_TARGET_TAG)[number] | "" = "";
+  rowClickTarget?: (typeof ALLOWED_ROW_CLICK_TARGET_TAG)[number];
 
   render() {
-    return html`${this.rowClickTarget &&
-      ALLOWED_ROW_CLICK_TARGET_TAG.includes(this.rowClickTarget)
-        ? html`<style>
-            :host {
-              display: grid;
-              grid-template-columns: subgrid;
-            }
-
-            ::slotted(${unsafeCSS(this.rowClickTarget)}) {
-              position: absolute;
-              inset: 0;
-              grid-column: clickable-start / clickable-end;
-            }
-          </style>`
-        : nothing} <slot></slot>`;
+    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+  }
+
+  private handleSlotChange(e: Event) {
+    if (!this.rowClickTarget) return;
+    const elems = (e.target as HTMLSlotElement).assignedElements();
+    const rowClickTarget = elems.find(
+      (el) => el.tagName.toLowerCase() === this.rowClickTarget
+    );
+
+    if (!rowClickTarget) return;
+
+    // Styled in table.css
+    rowClickTarget.classList.add("rowClickTarget");
   }
 }

frontend/src/components/ui/table/table-row.ts

@@ -11,6 +11,7 @@ export class TableRow extends LitElement {
       grid-column: var(--btrix-table-grid-column);
       display: grid;
       grid-template-columns: subgrid;
+      position: relative;
     }
   `;
 

frontend/src/components/ui/table/table.stylesheet.css

@@ -0,0 +1,24 @@
+btrix-table-cell[rowClickTarget] {
+  display: grid;
+  grid-template-columns: subgrid;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.rowClickTarget {
+  max-width: 100%;
+}
+
+.rowClickTarget::after {
+  content: "";
+  display: block;
+  position: absolute;
+  inset: 0;
+  grid-column: clickable-start / clickable-end;
+}
+
+.rowClickTarget:focus-visible {
+  outline: var(--sl-focus-ring);
+  outline-offset: -0.25rem;
+  border-radius: 0.5rem;
+}

frontend/src/components/ui/table/table.ts

@@ -6,9 +6,18 @@ import {
   queryAssignedElements,
 } from "lit/decorators.js";
 
-import { TailwindElement } from "@/classes/TailwindElement";
+import { theme } from "@/theme";
+import tableCSS from "./table.stylesheet.css";
 import { type TableHead } from "./table-head";
 
+// Add table CSS to theme CSS to make it available throughout the app,
+// to both shadow and light dom components.
+// TODO Remove once all `LiteElement`s are migrated over to `TailwindElement`
+tableCSS.split("}").forEach((rule: string) => {
+  if (!rule.trim()) return;
+  theme.insertRule(`${rule}}`);
+});
+
 /**
  * Low-level component for displaying content as a table.
  * To style tables, use TailwindCSS utility classes.
@@ -46,7 +55,7 @@ import { type TableHead } from "./table-head";
  * @cssproperty --btrix-cell-padding-bottom
  */
 @customElement("btrix-table")
-export class Table extends TailwindElement {
+export class Table extends LitElement {
   static styles = css`
     :host {
       --btrix-cell-gap: 0;

frontend/src/features/archived-items/archived-item-list.ts

@@ -6,15 +6,14 @@ import {
   queryAssignedElements,
   query,
 } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { msg, localized, str } from "@lit/localize";
+import { type SlCheckbox } from "@shoelace-style/shoelace";
 
 import { TailwindElement } from "@/classes/TailwindElement";
 import type { ArchivedItem } from "@/types/crawler";
 import { renderName } from "@/utils/crawler";
 import { NavigateController } from "@/controllers/navigate";
-import { type SlCheckbox } from "@shoelace-style/shoelace";
-
-const NAME_WIDTH_CSS = css`26rem`;
 
 export type CheckboxChangeEventDetail = {
   checked: boolean;
@@ -38,29 +37,8 @@ export class ArchivedItemListItem extends TailwindElement {
       border-radius: var(--btrix-border-radius-top, 0)
         var(--btrix-border-radius-to, 0) var(--btrix-border-radius-bottom, 0)
         var(--btrix-border-radius-bottom, 0);
-      position: relative;
       height: 2.5rem;
     }
-
-    /*
-     * TODO consolidate data-table variations
-     * https://github.com/webrecorder/browsertrix-cloud/issues/1504
-     */
-    btrix-table-cell {
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .clickLabel {
-      width: ${NAME_WIDTH_CSS};
-      display: flex;
-      gap: var(--btrix-cell-gap, 0);
-      align-items: center;
-      height: 100%;
-      box-sizing: border-box;
-      padding: var(--btrix-cell-padding-top) var(--btrix-cell-padding-right)
-        var(--btrix-cell-padding-bottom) var(--btrix-cell-padding-left);
-    }
   `;
 
   @property({ type: Object })
@@ -87,7 +65,7 @@ export class ArchivedItemListItem extends TailwindElement {
     if (!this.item) return;
     const checkboxId = `${this.item.id}-checkbox`;
     const rowName = html`
-      <div class="clickLabel">
+      <div class="flex items-center gap-3">
         <slot name="namePrefix"></slot>
         ${renderName(this.item)}
       </div>
@@ -122,7 +100,9 @@ export class ArchivedItemListItem extends TailwindElement {
             `
           : nothing}
         <btrix-table-cell
-          rowClickTarget=${this.href ? "a" : this.checkbox ? "label" : ""}
+          rowClickTarget=${ifDefined(
+            this.href ? "a" : this.checkbox ? "label" : undefined
+          )}
         >
           ${this.href
             ? html`<a href=${this.href} @click=${this.navigate.link}>
@@ -225,7 +205,7 @@ export class ArchivedItemList extends TailwindElement {
         btrix-table {
           grid-template-columns: ${`${
             this.hasCheckboxCell ? "min-content" : ""
-          } [clickable-start] ${NAME_WIDTH_CSS} 12rem 1fr 1fr 1fr [clickable-end] ${
+          } [clickable-start] 60ch 12rem 1fr 1fr 30ch [clickable-end] ${
             this.hasActionCell ? "min-content" : ""
           }`.trim()};
         }

frontend/src/features/archived-items/crawl-list.ts

@@ -19,6 +19,7 @@ import {
   query,
   queryAssignedElements,
 } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { msg, localized, str } from "@lit/localize";
 
 import { RelativeDuration } from "@/components/ui/relative-duration";
@@ -28,8 +29,6 @@ import { renderName } from "@/utils/crawler";
 import { TailwindElement } from "@/classes/TailwindElement";
 import { NavigateController } from "@/controllers/navigate";
 
-const NAME_WIDTH_CSS = css`16rem`;
-
 /**
  * @slot menu
  */
@@ -46,28 +45,6 @@ export class CrawlListItem extends TailwindElement {
       border-radius: var(--btrix-border-radius-top, 0)
         var(--btrix-border-radius-to, 0) var(--btrix-border-radius-bottom, 0)
         var(--btrix-border-radius-bottom, 0);
-      position: relative;
-    }
-
-    /*
-     * TODO consolidate data-table variations
-     * https://github.com/webrecorder/browsertrix-cloud/issues/1504
-     */
-    btrix-table-cell {
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .clickLabel {
-      width: ${NAME_WIDTH_CSS};
-      overflow: hidden;
-      display: flex;
-      gap: var(--btrix-cell-gap, 0);
-      align-items: center;
-      height: 100%;
-      box-sizing: border-box;
-      padding: var(--btrix-cell-padding-top) var(--btrix-cell-padding-right)
-        var(--btrix-cell-padding-bottom) var(--btrix-cell-padding-left);
     }
   `;
 
@@ -102,7 +79,7 @@ export class CrawlListItem extends TailwindElement {
 
     if (this.workflowId) {
       const label = html`
-        <div class="clickLabel">
+        <div>
           ${this.safeRender(
             (crawl) => html`
               <sl-format-date
@@ -118,7 +95,9 @@ export class CrawlListItem extends TailwindElement {
         </div>
       `;
       idCell = html`
-        <btrix-table-cell rowClickTarget=${this.href ? "a" : ""}>
+        <btrix-table-cell
+          rowClickTarget=${ifDefined(this.href ? "a" : undefined)}
+        >
           ${this.href
             ? html`<a href=${this.href} @click=${this.navigate.link}>
                 ${label}
@@ -320,7 +299,7 @@ export class CrawlList extends TailwindElement {
         btrix-table {
           grid-template-columns:
             min-content [clickable-start]
-            ${this.workflowId ? "" : `${NAME_WIDTH_CSS} `}${NAME_WIDTH_CSS} auto
+            ${this.workflowId ? "" : `auto `}auto auto
             auto auto auto auto [clickable-end] min-content;
         }
       </style>