feat: Browser profile configuration UI rehaul (#2972)

This change is a rewrite of the browser profile detail page UI to
support a consistent UX flow for creating and configuring profiles.

Additional features:
- Displays workflows associated with browser profile and enables
filtering by failed due to not logged in
- Enables changing crawler channel on profile
- Easily add site to profile
- Displays when and how a profile was last modified

Author: SuaYoo

frontend/src/components/ui/code/index.ts

@@ -71,7 +71,7 @@ export class Code extends TailwindElement {
   language: Language = Language.XML;
 
   @property({ type: Boolean })
-  wrap = true;
+  noWrap = false;
 
   async connectedCallback() {
     const languageFn = (await langaugeFiles[this.language]).default;
@@ -94,7 +94,7 @@ export class Code extends TailwindElement {
       part="base"
       class=${clsx(
         tw`font-monospace m-0 text-neutral-600`,
-        this.wrap ? tw`whitespace-pre-wrap` : tw`whitespace-nowrap`,
+        this.noWrap ? tw`whitespace-nowrap` : tw`whitespace-pre-wrap`,
       )}
     ><code>${staticHtml`${unsafeStatic(htmlStr)}`}</code></pre>`;
   }

frontend/src/components/ui/desc-list.ts

@@ -127,6 +127,7 @@ export class DescList extends LitElement {
         vertical: !this.horizontal,
         horizontal: this.horizontal,
       })}
+      part="base"
     >
       <slot></slot>
     </dl>`;

frontend/src/components/ui/dialog.ts

@@ -10,6 +10,10 @@ import {
  * <sl-dialog> with custom CSS
  *
  * Usage: see https://shoelace.style/components/dialog
+ *
+ * @attr label
+ * @attr open
+ * @attr noHeader
  */
 @customElement("btrix-dialog")
 export class Dialog extends SlDialog {
@@ -27,8 +31,7 @@ export class Dialog extends SlDialog {
       }
 
       .dialog__header {
-        background-color: var(--sl-color-neutral-50);
-        border-bottom: 1px solid var(--sl-color-neutral-100);
+        border-bottom: 1px solid var(--sl-panel-border-color);
       }
 
       .dialog__title {
@@ -50,7 +53,7 @@ export class Dialog extends SlDialog {
       .dialog__footer {
         padding-top: var(--sl-spacing-small);
         padding-bottom: var(--sl-spacing-small);
-        border-top: 1px solid var(--sl-color-neutral-100);
+        border-top: 1px solid var(--sl-panel-border-color);
       }
     `,
   ];

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

@@ -16,6 +16,9 @@ export class TableHeaderCell extends TableCell {
   @property({ type: String, reflect: true, noAccessor: true })
   role = "columnheader";
 
+  @property({ type: String, reflect: true, noAccessor: true })
+  scope?: "row" | "col";
+
   @property({ type: String, reflect: true })
   ariaSort: SortValues = "none";
 

frontend/src/components/ui/url-input.ts

@@ -42,6 +42,11 @@ export class UrlInput extends SlInput {
     this.addEventListener("sl-change", this.onChange);
   }
 
+  setCustomValidity(message: string): void {
+    super.setCustomValidity(message);
+    if (!this.hideHelpText) this.helpText = message;
+  }
+
   disconnectedCallback(): void {
     super.disconnectedCallback();
 
@@ -61,7 +66,6 @@ export class UrlInput extends SlInput {
 
     if (value && !validURL(value)) {
       const text = msg("Please enter a valid URL.");
-      if (!this.hideHelpText) this.helpText = text;
       this.setCustomValidity(text);
     } else if (
       value &&

frontend/src/controllers/localize.ts

@@ -37,9 +37,10 @@ export class LocalizeController extends SlLocalizeController {
           year: "numeric",
           month: "long",
           day: "numeric",
-          hour: "2-digit",
-          minute: "2-digit",
+          hour: "numeric",
+          minute: "numeric",
           timeZoneName: "short",
+          weekday: "long",
         })}
         hoist
         placement="bottom"

frontend/src/events/btrix-user-guide-show.ts

@@ -0,0 +1,7 @@
+export type BtrixUserGuideShowEvent = CustomEvent<{ path?: string }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    "btrix-user-guide-show": BtrixUserGuideShowEvent;
+  }
+}

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

@@ -222,7 +222,10 @@ export class CrawlLogs extends BtrixElement {
         `,
         () =>
           this.filter
-            ? emptyMessage({ message: emptyMessageFor[this.filter] })
+            ? emptyMessage({
+                classNames: tw`border-y`,
+                message: emptyMessageFor[this.filter],
+              })
             : nothing,
       )}
     `;

frontend/src/features/browser-profiles/index.ts

@@ -1,3 +1,6 @@
 import("./new-browser-profile-dialog");
+import("./profile-browser-dialog");
 import("./profile-browser");
+import("./profile-metadata-dialog");
 import("./select-browser-profile");
+import("./start-browser-dialog");