feat: Show consistent empty states

frontend/src/features/collections/collections-grid-with-edit-dialog.ts

@@ -33,6 +33,7 @@ export class CollectionsGridWithEditDialog extends BtrixElement {
           this.collectionBeingEdited = e.detail;
         }}
       >
+        <slot name="empty-text" slot="empty-text"></slot>
         <slot name="empty-actions" slot="empty-actions"></slot>
         <slot name="pagination" slot="pagination"></slot>
       </btrix-collections-grid>

frontend/src/features/collections/collections-grid.ts

@@ -10,6 +10,7 @@ import { CollectionThumbnail } from "./collection-thumbnail";
 import { SelectCollectionAccess } from "./select-collection-access";
 
 import { BtrixElement } from "@/classes/BtrixElement";
+import { emptyMessage } from "@/layouts/emptyMessage";
 import { textSeparator } from "@/layouts/separator";
 import { RouteNamespace } from "@/routes";
 import { CollectionAccess, type PublicCollection } from "@/types/collection";
@@ -60,16 +61,12 @@ export class CollectionsGrid extends BtrixElement {
     }
 
     if (!this.collections.length) {
-      return html`
-        <div class="flex flex-col items-center justify-center gap-3 px-3 py-10">
-          <p class="text-base text-neutral-500">
-            <slot name="empty-text">
-              ${msg("No public collections yet.")}
-            </slot>
-          </p>
-          <slot name="empty-actions"></slot>
-        </div>
-      `;
+      return emptyMessage({
+        message: html`<slot name="empty-text">
+          ${msg("No public collections yet.")}
+        </slot>`,
+        actions: html`<slot name="empty-actions"></slot>`,
+      });
     }
 
     const showActions = !this.navigate.isPublicPage && this.appState.isCrawler;

frontend/src/pages/org/archived-items.ts

@@ -28,9 +28,11 @@ import orgUploadsContext from "@/context/org-uploads";
 import { ClipboardController } from "@/controllers/clipboard";
 import PollTask from "@/controllers/poll";
 import { SearchParamsValue } from "@/controllers/searchParamsValue";
+import { type BtrixUserGuideShowEvent } from "@/events/btrix-user-guide-show";
 import { type BtrixChangeArchivedItemStateFilterEvent } from "@/features/archived-items/archived-item-state-filter";
 import { CrawlStatus } from "@/features/archived-items/crawl-status";
 import { type BtrixChangeQARatingFilterEvent } from "@/features/archived-items/qa-rating-filter";
+import { emptyMessage } from "@/layouts/emptyMessage";
 import { pageHeader } from "@/layouts/pageHeader";
 import type { APIPaginatedList, APIPaginationQuery } from "@/types/api";
 import { UPLOAD_STATES, type CrawlState } from "@/types/crawlState";
@@ -1005,13 +1007,59 @@ export class CrawlsList extends BtrixElement {
       `;
     }
 
-    return html`
-      <div class="border-b border-t py-5">
-        <p class="text-center text-neutral-500">
-          ${msg("No archived items yet.")}
-        </p>
-      </div>
-    `;
+    if (this.itemType === "crawl") {
+      return html`
+        <div class="border-b border-t py-5">
+          <p class="text-center text-neutral-500">
+            ${msg("No crawled items yet.")}
+          </p>
+        </div>
+      `;
+    }
+
+    const message = msg("Your org doesn’t have any archived items yet.");
+    const guideButton = html`<sl-button
+      variant="text"
+      @click=${() => {
+        this.dispatchEvent(
+          new CustomEvent<BtrixUserGuideShowEvent["detail"]>(
+            "btrix-user-guide-show",
+            {
+              detail: { path: "archived-items" },
+              bubbles: true,
+              composed: true,
+            },
+          ),
+        );
+      }}
+    >
+      <sl-icon slot="prefix" name="book"></sl-icon>
+      ${msg("Read Guide")}
+    </sl-button>`;
+
+    if (this.isCrawler) {
+      return emptyMessage({
+        classNames: tw`border-y`,
+        message,
+        detail: msg(
+          "Archived items are the result of a web archiving process, like crawl workflows.",
+        ),
+        actions: html`<sl-button
+            @click=${() => (this.isUploadingArchive = true)}
+            ?disabled=${isArchivingDisabled(this.org)}
+          >
+            <sl-icon slot="prefix" name="plus-lg"></sl-icon>
+            ${msg("Import Archived Item")}
+          </sl-button>
+          ${guideButton}`,
+      });
+    }
+
+    return emptyMessage({
+      classNames: tw`border-y`,
+      message,
+      actions: guideButton,
+    });
   }
 
   private async getArchivedItems(

frontend/src/pages/org/browser-profiles-list.ts

@@ -20,6 +20,7 @@ import { parsePage, type PageChangeEvent } from "@/components/ui/pagination";
 import type { BtrixChangeTagFilterEvent } from "@/components/ui/tag-filter/types";
 import { ClipboardController } from "@/controllers/clipboard";
 import { SearchParamsValue } from "@/controllers/searchParamsValue";
+import { type BtrixUserGuideShowEvent } from "@/events/btrix-user-guide-show";
 import { originsWithRemainder } from "@/features/browser-profiles/templates/origins-with-remainder";
 import { emptyMessage } from "@/layouts/emptyMessage";
 import { pageHeader } from "@/layouts/pageHeader";
@@ -33,6 +34,7 @@ import { SortDirection as SortDirectionEnum } from "@/types/utils";
 import { isApiError } from "@/utils/api";
 import { isArchivingDisabled } from "@/utils/orgs";
 import { toSearchItem, type SearchValues } from "@/utils/searchValues";
+import { tw } from "@/utils/tailwind";
 
 const SORT_DIRECTIONS = ["asc", "desc"] as const;
 type SortDirection = (typeof SORT_DIRECTIONS)[number];
@@ -316,11 +318,17 @@ export class BrowserProfilesList extends BtrixElement {
               `
             : this.renderEmpty()}
         `,
+        this.renderLoading,
       )}
       ${when(this.selectedProfile, this.renderDuplicateDialog)}
     `;
   };
 
+  private readonly renderLoading = () =>
+    html`<div class="my-24 flex w-full items-center justify-center text-2xl">
+      <sl-spinner></sl-spinner>
+    </div>`;
+
   private readonly renderDuplicateDialog = (profile: Profile) => {
     return html`<btrix-profile-browser-dialog
       .profile=${profile}
@@ -353,9 +361,28 @@ export class BrowserProfilesList extends BtrixElement {
     }
 
     const message = msg("Your org doesn’t have any browser profiles yet.");
+    const guideButton = html`<sl-button
+      variant="text"
+      @click=${() => {
+        this.dispatchEvent(
+          new CustomEvent<BtrixUserGuideShowEvent["detail"]>(
+            "btrix-user-guide-show",
+            {
+              detail: { path: "browser-profiles" },
+              bubbles: true,
+              composed: true,
+            },
+          ),
+        );
+      }}
+    >
+      <sl-icon slot="prefix" name="book"></sl-icon>
+      ${msg("Read Guide")}
+    </sl-button>`;
 
     if (this.isCrawler) {
       return emptyMessage({
+        classNames: tw`border-y`,
         message,
         detail: msg(
           "Browser profiles let you crawl pages behind paywalls and logins.",
@@ -376,11 +403,16 @@ export class BrowserProfilesList extends BtrixElement {
             <sl-icon slot="prefix" name="plus-lg"></sl-icon>
             ${msg("Create Browser Profile")}
           </sl-button>
+          ${guideButton}
         `,
       });
     }
 
-    return emptyMessage({ message });
+    return emptyMessage({
+      classNames: tw`border-y`,
+      message,
+      actions: guideButton,
+    });
   }
 
   private renderControls() {

frontend/src/pages/org/collections-list.ts

@@ -13,13 +13,12 @@ import { when } from "lit/directives/when.js";
 import debounce from "lodash/fp/debounce";
 import queryString from "query-string";
 
-import type { SelectNewDialogEvent } from ".";
-
 import { BtrixElement } from "@/classes/BtrixElement";
 import { parsePage, type PageChangeEvent } from "@/components/ui/pagination";
 import { WithSearchOrgContext } from "@/context/search-org/WithSearchOrgContext";
 import { ClipboardController } from "@/controllers/clipboard";
 import type { BtrixRequestOrgUpdate } from "@/events/btrix-request-org-update";
+import { type BtrixUserGuideShowEvent } from "@/events/btrix-user-guide-show";
 import { SelectCollectionAccess } from "@/features/collections/select-collection-access";
 import { emptyMessage } from "@/layouts/emptyMessage";
 import { pageHeader } from "@/layouts/pageHeader";
@@ -299,7 +298,7 @@ export class CollectionsList extends WithSearchOrgContext(BtrixElement) {
   }
 
   private readonly renderLoading = () =>
-    html`<div class="my-24 flex w-full items-center justify-center text-3xl">
+    html`<div class="my-24 flex w-full items-center justify-center text-2xl">
       <sl-spinner></sl-spinner>
     </div>`;
 
@@ -535,39 +534,51 @@ export class CollectionsList extends WithSearchOrgContext(BtrixElement) {
     }
 
     const message = msg("Your org doesn’t have any collections yet.");
+    const guideButton = html`<sl-button
+      variant="text"
+      @click=${() => {
+        this.dispatchEvent(
+          new CustomEvent<BtrixUserGuideShowEvent["detail"]>(
+            "btrix-user-guide-show",
+            {
+              detail: { path: "collection" },
+              bubbles: true,
+              composed: true,
+            },
+          ),
+        );
+      }}
+    >
+      <sl-icon slot="prefix" name="book"></sl-icon>
+      ${msg("Read Guide")}
+    </sl-button>`;
 
-    return html`
-      ${when(
-        this.isCrawler,
-        () =>
-          emptyMessage({
-            classNames: tw`border-y`,
-            message,
-            detail: msg(
-              "Collections let you easily organize, replay, and share multiple crawls.",
-            ),
-            actions: html`
-              <sl-button
-                @click=${() => {
-                  this.dispatchEvent(
-                    new CustomEvent("select-new-dialog", {
-                      detail: "collection",
-                    }) as SelectNewDialogEvent,
-                  );
-                }}
-              >
-                <sl-icon slot="prefix" name="plus-lg"></sl-icon>
-                ${msg("Create Collection")}
-              </sl-button>
-            `,
-          }),
-        () =>
-          emptyMessage({
-            classNames: tw`border-y`,
-            message,
-          }),
-      )}
-    `;
+    if (this.isCrawler) {
+      return emptyMessage({
+        classNames: tw`border-y`,
+        message,
+        detail: msg(
+          "Collections let you easily organize, replay, and share multiple archived items.",
+        ),
+        actions: html`
+          <sl-button
+            @click=${() => {
+              this.openDialogName = "create";
+            }}
+          >
+            <sl-icon slot="prefix" name="plus-lg"></sl-icon>
+            ${msg("Create New Collection")}
+          </sl-button>
+          ${guideButton}
+        `,
+      });
+    }
+
+    return emptyMessage({
+      classNames: tw`border-y`,
+      message,
+      actions: guideButton,
+    });
   };
 
   private readonly renderItem = (col: Collection) => {

frontend/src/pages/org/crawling.ts

@@ -45,14 +45,18 @@ export class OrgCrawling extends BtrixElement {
                   variant="primary"
                   size="small"
                   ?disabled=${this.org?.readOnly}
-                  @click=${() =>
-                    this.navigate.to(
-                      `${this.navigate.orgBasePath}/workflows/new`,
-                      {
-                        scopeType:
-                          this.appState.userPreferences?.newWorkflowScopeType,
-                      },
-                    )}
+                  href=${`${this.navigate.orgBasePath}/workflows/new`}
+                  @click=${(e: MouseEvent) => {
+                    if (e.metaKey) {
+                      return;
+                    }
+                    e.preventDefault();
+
+                    this.navigate.to((e.target as HTMLAnchorElement).href, {
+                      scopeType:
+                        this.appState.userPreferences?.newWorkflowScopeType,
+                    });
+                  }}
                 >
                   <sl-icon slot="prefix" name="plus-lg"></sl-icon>
                   ${msg("New Workflow")}</sl-button

frontend/src/pages/org/dashboard.ts

@@ -487,8 +487,8 @@ export class Dashboard extends BtrixElement {
               ${this.renderNoPublicCollections()}
               <span slot="empty-text"
                 >${this.collectionsView === CollectionGridView.Public
-                  ? msg("No public collections yet.")
-                  : msg("No collections yet.")}</span
+                  ? msg("Your org doesn’t have any public collections.")
+                  : msg("Your org doesn’t have any collections yet.")}</span
               >
               ${this.collections.value &&
               this.collections.value.total > this.collections.value.items.length