Add a small sticky banner when logged in as superadmin (#2393)

While ideally we don't need to use superadmin for many things, there are
still a lot of places where it's necessary, especially around customer
service. This makes it a little more visible when that's the case, just
as a reminder. I could see this coming in handy especially for newer
people who might not have the experience to know to look for the "admin"
and "running crawls" buttons.

<img width="1088" alt="Screenshot 2025-02-13 at 1 12 58 PM"
src="https://github.com/user-attachments/assets/70b975e1-af6b-4e8c-9e49-52c4c66e9721"
/>

frontend/src/index.ts

@@ -331,7 +331,8 @@ export class App extends BtrixElement {
 
     return html`
       <div class="min-w-screen flex min-h-screen flex-col">
-        ${this.renderNavBar()} ${this.renderAlertBanner()}
+        ${this.renderSuperadminBanner()} ${this.renderNavBar()}
+        ${this.renderAlertBanner()}
         <main class="relative flex flex-auto md:min-h-[calc(100vh-3.125rem)]">
           ${this.renderPage()}
         </main>
@@ -373,6 +374,28 @@ export class App extends BtrixElement {
     `;
   }
 
+  private renderSuperadminBanner() {
+    if (this.userInfo?.isSuperAdmin) {
+      return html` <div
+        class="sticky top-0 z-50 border-b border-b-warning-800 bg-warning-700 py-2 text-xs text-warning-50 shadow-sm shadow-orange-700/20"
+      >
+        <div
+          class="mx-auto box-border flex w-full items-center gap-2 px-3 xl:pl-6"
+        >
+          <sl-icon
+            slot="icon"
+            name="exclamation-triangle-fill"
+            class="size-4"
+          ></sl-icon>
+          <span>
+            <strong>${msg("You are logged in as a superadmin")}</strong> –
+            ${msg("please be careful.")}
+          </span>
+        </div>
+      </div>`;
+    }
+  }
+
   private renderAlertBanner() {
     if (this.userInfo?.orgs && !this.userInfo.orgs.length) {
       return this.renderNoOrgsBanner();