feat: App bar enhancements (#1996)

- Always shows current org name
- Moves org dropdown next to logo
- Reduces logo size when logged in at smaller screen sizes

frontend/src/index.ts

@@ -283,14 +283,18 @@ export class App extends LiteElement {
     const isSuperAdmin = this.appState.userInfo?.isSuperAdmin;
     let homeHref = "/";
     if (!isSuperAdmin && this.appState.orgSlug) {
-      homeHref = `/orgs/${this.appState.orgSlug}`;
+      homeHref = this.orgBasePath;
     }
 
+    const showFullLogo =
+      this.viewState.route === "login" || !this.authService.authState;
+
     return html`
       <div class="border-b bg-neutral-50">
         <nav
           class="mx-auto box-border flex h-12 items-center justify-between px-3 xl:pl-6"
         >
+          <div class="flex items-center">
             <a
               class="items-between flex gap-2"
               aria-label="home"
@@ -302,47 +306,66 @@ export class App extends LiteElement {
                 this.navLink(e);
               }}
             >
-            <img class="h-6" alt="Browsertrix logo" src=${brandLockupColor} />
+              <div
-            ${isSuperAdmin
+                class="${showFullLogo
-              ? html`<btrix-tag>${msg("Admin")}</btrix-tag>`
+                  ? "w-[10.5rem]"
-              : nothing}
+                  : "w-6 md:w-[10.5rem]"} h-6 bg-cover bg-no-repeat"
+                style="background-image: url(${brandLockupColor})"
+                role="img"
+                title="Browsertrix logo"
+              ></div>
             </a>
+            ${when(
+              this.authService.authState,
+              () => html`
                 ${isSuperAdmin
                   ? html`
                       <div
-                  class="grid grid-flow-col items-center gap-3 text-xs md:gap-5 md:text-sm"
+                        role="separator"
-                >
+                        class="mx-2.5 h-6 w-0 border-l"
+                      ></div>
                       <a
-                    class="font-medium text-neutral-500 hover:text-neutral-400"
+                        class="flex items-center gap-2 font-medium text-primary-700 transition-colors hover:text-primary"
                         href="/"
                         @click=${(e: MouseEvent) => {
                           this.clearSelectedOrg();
                           this.navLink(e);
                         }}
-                    >${msg("Dashboard")}</a
                       >
+                        <sl-icon
+                          class="text-lg"
+                          name="house-gear-fill"
+                        ></sl-icon>
+                        ${msg("Admin")}</a
+                      >
+                    `
+                  : nothing}
+                <div role="separator" class="mx-2.5 h-7 w-0 border-l"></div>
+                ${this.renderOrgs()}
+              `,
+            )}
+          </div>
+          <div class="grid auto-cols-max grid-flow-col items-center gap-5">
+            ${isSuperAdmin
+              ? html`
                   <a
-                    class="font-medium text-neutral-500 hover:text-neutral-400"
+                    class="font-medium text-neutral-500 hover:text-primary"
                     href="/crawls"
                     @click=${this.navLink}
                     >${msg("Running Crawls")}</a
                   >
                   <div class="hidden md:block">${this.renderFindCrawl()}</div>
-                </div>
                 `
               : ""}
-
-          <div class="grid auto-cols-max grid-flow-col items-center gap-3">
             ${this.authService.authState
-              ? html` ${this.renderOrgs()}
+              ? html`<sl-dropdown placement="bottom-end" distance="4">
-                  <sl-dropdown placement="bottom-end">
+                  <button slot="trigger">
-                    <sl-icon-button
+                    <sl-avatar
-                      slot="trigger"
-                      name="person-circle"
                       label=${msg("Open user menu")}
-                      style="font-size: 1.5rem;"
+                      shape="rounded"
-                    ></sl-icon-button>
+                      class="[--size:1.75rem]"
-
+                    ></sl-avatar>
+                  </button>
                   <sl-menu class="w-60 min-w-min max-w-full">
                     <div class="px-7 py-2">${this.renderMenuUserInfo()}</div>
                     <sl-divider></sl-divider>
@@ -388,7 +411,7 @@ export class App extends LiteElement {
 
   private renderOrgs() {
     const orgs = this.appState.userInfo?.orgs;
-    if (!orgs || orgs.length < 2 || !this.appState.userInfo) return;
+    if (!orgs) return;
 
     const selectedOption = this.appState.orgSlug
       ? orgs.find(({ slug }) => slug === this.appState.orgSlug)
@@ -405,10 +428,22 @@ export class App extends LiteElement {
     const orgNameLength = 50;
 
     return html`
-      <sl-dropdown placement="bottom-end">
+      <a
-        <sl-button slot="trigger" variant="text" size="small" caret
+        class="font-medium text-neutral-600"
-          >${selectedOption.name.slice(0, orgNameLength)}</sl-button
+        href=${this.orgBasePath}
+        @click=${this.navLink}
       >
+        ${selectedOption.name.slice(0, orgNameLength)}
+      </a>
+      ${when(
+        orgs.length > 1,
+        () => html`
+          <sl-dropdown placement="bottom-end">
+            <sl-icon-button
+              slot="trigger"
+              name="chevron-expand"
+              label=${msg("Expand org list")}
+            ></sl-icon-button>
             <sl-menu
               @sl-select=${(e: CustomEvent<{ item: { value: string } }>) => {
                 const { value } = e.detail.item;
@@ -423,7 +458,7 @@ export class App extends LiteElement {
               }}
             >
               ${when(
-            this.appState.userInfo.isSuperAdmin,
+                this.appState.userInfo?.isSuperAdmin,
                 () => html`
                   <sl-menu-item
                     type="checkbox"
@@ -446,6 +481,8 @@ export class App extends LiteElement {
               )}
             </sl-menu>
           </sl-dropdown>
+        `,
+      )}
     `;
   }
 
@@ -454,9 +491,7 @@ export class App extends LiteElement {
     if (this.appState.userInfo.isSuperAdmin) {
       return html`
         <div class="mb-2">
-          <sl-tag class="uppercase" variant="primary" size="small"
+          <btrix-tag>${msg("Admin")}</btrix-tag>
-            >${msg("admin")}</sl-tag
-          >
         </div>
         <div class="font-medium text-neutral-700">
           ${this.appState.userInfo.name}
@@ -729,7 +764,7 @@ export class App extends LiteElement {
       >
         <button
           slot="trigger"
-          class="font-medium text-primary hover:text-indigo-400"
+          class="font-medium text-primary-700 hover:text-primary"
         >
           ${msg("Jump to Crawl")}
         </button>

frontend/src/shoelace.ts

@@ -7,6 +7,7 @@ import { registerIconLibrary } from "@shoelace-style/shoelace/dist/utilities/ico
 
 import "@shoelace-style/shoelace/dist/themes/light.css";
 import "@shoelace-style/shoelace/dist/components/alert/alert";
+import "@shoelace-style/shoelace/dist/components/avatar/avatar";
 import "@shoelace-style/shoelace/dist/components/button/button";
 import "@shoelace-style/shoelace/dist/components/icon/icon";
 import "@shoelace-style/shoelace/dist/components/input/input";

frontend/src/theme.stylesheet.css

@@ -102,6 +102,14 @@
 }
 
 @layer components {
+  sl-avatar::part(base) {
+    transition: var(--sl-transition-x-fast) background-color;
+  }
+
+  sl-avatar:hover::part(base) {
+    background-color: var(--sl-color-primary-500);
+  }
+
   /* Add more spacing between label, input and help text */
   .form-label,
   btrix-tag-input::part(form-control-label),