From 629cf7c404d4fa691517dcbe7c58058fb954fdee Mon Sep 17 00:00:00 2001
From: Emma Segal-Grossman <hi@emma.cafe>
Date: Mon, 17 Feb 2025 17:42:36 -0500
Subject: [PATCH] Add a small sticky banner when logged in as superadmin
 (#2393)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/frontend/src/index.ts b/frontend/src/index.ts
index 83513acb..95968cea 100644
--- a/frontend/src/index.ts
+++ b/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();