refactor

webrecorder · Jan 7, 2025 · 9891216 · 9891216
1 parent d896faa
commit 9891216
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 87 deletions.
diff --git a/frontend/src/layouts/pageHeader.ts b/frontend/src/layouts/pageHeader.ts
@@ -118,7 +118,7 @@ export function pageHeader({
   secondary?: Content;
   actions?: Content;
   border?: boolean;
-  classNames?: typeof tw;
+  classNames?: typeof tw | string;
 }) {
   return html`
     <header

diff --git a/frontend/src/pages/account-settings.ts b/frontend/src/pages/account-settings.ts
@@ -144,7 +144,10 @@ export class AccountSettings extends BtrixElement {
         title=${msg("Account Settings")}
       ></btrix-document-title>
 
-      ${pageHeader(msg("Account Settings"), undefined, tw`mb-3 lg:mb-5`)}
+      ${pageHeader({
+        title: msg("Account Settings"),
+        classNames: tw`mb-3 lg:mb-5`,
+      })}
 
       <btrix-tab-list activePanel=${this.activeTab} hideIndicator>
         <header slot="header" class="flex h-7 items-end justify-between">

diff --git a/frontend/src/pages/org/archived-items.ts b/frontend/src/pages/org/archived-items.ts
@@ -264,29 +264,28 @@ export class CrawlsList extends BtrixElement {
     return html`
       <main>
         <div class="contents">
-          ${pageHeader(
-            msg("Archived Items"),
-            when(
-              this.isCrawler,
-              () => html`
-                <sl-tooltip
-                  content=${msg("Org Storage Full")}
-                  ?disabled=${!this.org?.storageQuotaReached}
-                >
-                  <sl-button
-                    size="small"
-                    variant="primary"
-                    @click=${() => (this.isUploadingArchive = true)}
-                    ?disabled=${isArchivingDisabled(this.org)}
+          ${pageHeader({
+            title: msg("Archived Items"),
+            actions: this.isCrawler
+              ? html`
+                  <sl-tooltip
+                    content=${msg("Org Storage Full")}
+                    ?disabled=${!this.org?.storageQuotaReached}
                   >
-                    <sl-icon slot="prefix" name="upload"></sl-icon>
-                    ${msg("Upload WACZ")}
-                  </sl-button>
-                </sl-tooltip>
-              `,
-            ),
-            tw`mb-3`,
-          )}
+                    <sl-button
+                      size="small"
+                      variant="primary"
+                      @click=${() => (this.isUploadingArchive = true)}
+                      ?disabled=${isArchivingDisabled(this.org)}
+                    >
+                      <sl-icon slot="prefix" name="upload"></sl-icon>
+                      ${msg("Upload WACZ")}
+                    </sl-button>
+                  </sl-tooltip>
+                `
+              : nothing,
+            classNames: tw`mb-3`,
+          })}
           <div class="mb-3 flex gap-2">
             ${listTypes.map(({ label, itemType, icon }) => {
               const isSelected = itemType === this.itemType;

diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts
@@ -93,30 +93,29 @@ export class BrowserProfilesList extends BtrixElement {
   }
 
   render() {
-    return html`${pageHeader(
-        msg("Browser Profiles"),
-        when(
-          this.isCrawler,
-          () => html`
-            <sl-button
-              variant="primary"
-              size="small"
-              ?disabled=${isArchivingDisabled(this.org)}
-              @click=${() => {
-                this.dispatchEvent(
-                  new CustomEvent("select-new-dialog", {
-                    detail: "browser-profile",
-                  }) as SelectNewDialogEvent,
-                );
-              }}
-            >
-              <sl-icon slot="prefix" name="plus-lg"></sl-icon>
-              ${msg("New Browser Profile")}
-            </sl-button>
-          `,
-        ),
-        tw`mb-3`,
-      )}
+    return html`${pageHeader({
+        title: msg("Browser Profiles"),
+        actions: this.isCrawler
+          ? html`
+              <sl-button
+                variant="primary"
+                size="small"
+                ?disabled=${isArchivingDisabled(this.org)}
+                @click=${() => {
+                  this.dispatchEvent(
+                    new CustomEvent("select-new-dialog", {
+                      detail: "browser-profile",
+                    }) as SelectNewDialogEvent,
+                  );
+                }}
+              >
+                <sl-icon slot="prefix" name="plus-lg"></sl-icon>
+                ${msg("New Browser Profile")}
+              </sl-button>
+            `
+          : undefined,
+        classNames: tw`mb-3`,
+      })}
       <div class="pb-1">${this.renderTable()}</div>`;
   }
 

diff --git a/frontend/src/pages/org/collection-detail.ts b/frontend/src/pages/org/collection-detail.ts
@@ -13,8 +13,7 @@ import type { MarkdownEditor } from "@/components/ui/markdown-editor";
 import type { PageChangeEvent } from "@/components/ui/pagination";
 import { SelectCollectionAccess } from "@/features/collections/select-collection-access";
 import type { ShareCollection } from "@/features/collections/share-collection";
-import { pageHeader } from "@/layouts/page";
-import { pageNav, type Breadcrumb } from "@/layouts/pageHeader";
+import { pageHeader, pageNav, type Breadcrumb } from "@/layouts/pageHeader";
 import type {
   APIPaginatedList,
   APIPaginationQuery,

diff --git a/frontend/src/pages/org/collections-list.ts b/frontend/src/pages/org/collections-list.ts
@@ -132,24 +132,21 @@ export class CollectionsList extends BtrixElement {
   render() {
     return html`
       <div class="contents">
-        ${pageHeader(
-          msg("Collections"),
-          when(
-            this.isCrawler,
-            () => html`
-              <sl-button
+        ${pageHeader({
+          title: msg("Collections"),
+          actions: this.isCrawler
+            ? html` <sl-button
                 variant="primary"
                 size="small"
                 ?disabled=${!this.org || this.org.readOnly}
                 @click=${() => (this.openDialogName = "create")}
               >
                 <sl-icon slot="prefix" name="plus-lg"></sl-icon>
                 ${msg("New Collection")}
-              </sl-button>
-            `,
-          ),
-          tw`border-b-transparent`,
-        )}
+              </sl-button>`
+            : nothing,
+          classNames: tw`border-b-transparent`,
+        })}
       </div>
 
       <link rel="preload" as="image" href=${noCollectionsImg} />

diff --git a/frontend/src/pages/org/dashboard.ts b/frontend/src/pages/org/dashboard.ts
@@ -15,6 +15,7 @@ import { RouteNamespace } from "@/routes";
 import type { PublicCollection } from "@/types/collection";
 import type { PublicOrgCollections } from "@/types/org";
 import { humanizeExecutionSeconds } from "@/utils/executionTimeFormatter";
+import { tw } from "@/utils/tailwind";
 
 type Metrics = {
   storageUsedBytes: number;
@@ -84,9 +85,9 @@ export class Dashboard extends BtrixElement {
       this.metrics.storageUsedBytes >= this.metrics.storageQuotaBytes;
 
     return html`
-      ${pageHeader(
-        this.userOrg?.name,
-        html`
+      ${pageHeader({
+        title: this.userOrg?.name,
+        actions: html`
           ${when(
             this.appState.isAdmin,
             () =>
@@ -153,8 +154,8 @@ export class Dashboard extends BtrixElement {
               </sl-dropdown>`,
           )}
         `,
-        "mb-6",
-      )}
+        classNames: tw`mb-6`,
+      })}
       <main>
         <div class="mb-10 flex flex-col gap-6 md:flex-row">
           ${this.renderCard(

diff --git a/frontend/src/pages/org/settings/settings.ts b/frontend/src/pages/org/settings/settings.ts
@@ -1,7 +1,7 @@
 import { localized, msg, str } from "@lit/localize";
 import type { SlInput } from "@shoelace-style/shoelace";
 import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js";
-import { html, unsafeCSS, type PropertyValues } from "lit";
+import { html, nothing, unsafeCSS, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { choose } from "lit/directives/choose.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -136,21 +136,23 @@ export class OrgSettings extends BtrixElement {
   }
 
   render() {
-    return html` ${pageHeader(
-        msg("Org Settings"),
-        when(
-          this.userInfo?.orgs && this.userInfo.orgs.length > 1 && this.userOrg,
-          (userOrg) => html`
-            <div class="text-neutral-400">
-              ${msg(
-                html`Viewing
-                  <strong class="font-medium">${userOrg.name}</strong>`,
-              )}
-            </div>
-          `,
-        ),
-        tw`mb-3 lg:mb-5`,
-      )}
+    return html` ${pageHeader({
+        title: msg("Org Settings"),
+        actions:
+          this.userInfo?.orgs && this.userInfo.orgs.length > 1 && this.userOrg
+            ? html`
+                <div class="text-neutral-400">
+                  ${msg(
+                    html`Viewing
+                      <strong class="font-medium"
+                        >${this.userOrg.name}</strong
+                      >`,
+                  )}
+                </div>
+              `
+            : nothing,
+        classNames: tw`mb-3 lg:mb-5`,
+      })}
 
       <btrix-tab-list activePanel=${this.activePanel} hideIndicator>
         <header slot="header" class="flex h-7 items-end justify-between">

diff --git a/frontend/src/pages/org/workflows-list.ts b/frontend/src/pages/org/workflows-list.ts
@@ -197,9 +197,9 @@ export class WorkflowsList extends BtrixElement {
   render() {
     return html`
       <div class="contents">
-        ${pageHeader(
-          msg("Crawl Workflows"),
-          html`
+        ${pageHeader({
+          title: msg("Crawl Workflows"),
+          actions: html`
             ${when(
               this.appState.isAdmin,
               () =>
@@ -293,8 +293,8 @@ export class WorkflowsList extends BtrixElement {
               `,
             )}
           `,
-          tw`border-b-transparent`,
-        )}
+          classNames: tw`border-b-transparent`,
+        })}
         <div class="sticky top-2 z-10 mb-3 rounded-lg border bg-neutral-50 p-4">
           ${this.renderControls()}
         </div>