From 3c5946d55c5277dd5911059a9ab2d5190879ae03 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 23 Apr 2025 16:24:11 +0100
Subject: [PATCH 1/3] Adds path for admin route

---
 apps/webapp/app/utils/pathBuilder.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/webapp/app/utils/pathBuilder.ts b/apps/webapp/app/utils/pathBuilder.ts
index 6996eff9d7..c4d48c3438 100644
--- a/apps/webapp/app/utils/pathBuilder.ts
+++ b/apps/webapp/app/utils/pathBuilder.ts
@@ -430,3 +430,7 @@ export function docsPath(path: string) {
 export function docsTroubleshootingPath(path: string) {
   return `${docsRoot()}/v3/troubleshooting`;
 }
+
+export function adminPath() {
+  return `/@`;
+}

From 5e2a96e3cb3a9553724600d38b0ba0ecec316462 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 23 Apr 2025 16:24:39 +0100
Subject: [PATCH 2/3] Updates impersonation banner and show new org button if
 only 1 org

---
 .../app/components/ImpersonationBanner.tsx    | 32 ++++++++-----
 .../app/components/navigation/SideMenu.tsx    | 47 ++++++++++++++-----
 2 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/apps/webapp/app/components/ImpersonationBanner.tsx b/apps/webapp/app/components/ImpersonationBanner.tsx
index 367f31dfd3..a7116b4ded 100644
--- a/apps/webapp/app/components/ImpersonationBanner.tsx
+++ b/apps/webapp/app/components/ImpersonationBanner.tsx
@@ -1,21 +1,29 @@
 import { UserMinusIcon } from "@heroicons/react/20/solid";
 import { Form } from "@remix-run/react";
 import { Button } from "./primitives/Buttons";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/Tooltip";
 
 export function ImpersonationBanner() {
   return (
-    <div className="w-full">
-      <Form action="/resources/impersonation" method="delete" reloadDocument className="w-full">
-        <Button
-          type="submit"
-          variant="small-menu-item"
-          LeadingIcon={UserMinusIcon}
-          fullWidth
-          textAlignLeft
-          className="text-amber-400"
-        >
-          Stop impersonating
-        </Button>
+    <div>
+      <Form action="/resources/impersonation" method="delete" reloadDocument>
+        <TooltipProvider disableHoverableContent={true}>
+          <Tooltip>
+            <TooltipTrigger>
+              <Button
+                type="submit"
+                variant="small-menu-item"
+                LeadingIcon={UserMinusIcon}
+                fullWidth
+                textAlignLeft
+                className="bg-amber-400 text-background-bright group-hover/button:bg-amber-300"
+              />
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className={"text-xs"}>
+              Stop impersonating
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </Form>
     </div>
   );
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 6a56281873..aa499454e3 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -33,6 +33,7 @@ import { type FeedbackType } from "~/routes/resources.feedback";
 import { cn } from "~/utils/cn";
 import {
   accountPath,
+  adminPath,
   logoutPath,
   newOrganizationPath,
   newProjectPath,
@@ -76,6 +77,7 @@ import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
 import { SideMenuSection } from "./SideMenuSection";
+import { useHasAdminAccess } from "~/hooks/useUser";
 
 type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
 export type SideMenuProject = Pick<
@@ -106,6 +108,7 @@ export function SideMenu({
   const currentPlan = useCurrentPlan();
   const { isConnected } = useDevPresence();
   const isFreeUser = currentPlan?.v3Subscription?.isPaying === false;
+  const isAdmin = useHasAdminAccess();
 
   useEffect(() => {
     const handleScroll = () => {
@@ -130,7 +133,8 @@ export function SideMenu({
       <div
         className={cn(
           "flex items-center justify-between overflow-hidden border-b px-1 py-1 transition duration-300",
-          showHeaderDivider ? "border-grid-bright" : "border-transparent"
+          showHeaderDivider ? "border-grid-bright" : "border-transparent",
+          user.isImpersonating && "rounded-md border border-dashed border-amber-400"
         )}
       >
         <ProjectSelector
@@ -139,6 +143,23 @@ export function SideMenu({
           project={project}
           user={user}
         />
+        {isAdmin && (
+          <TooltipProvider disableHoverableContent={true}>
+            <Tooltip>
+              <TooltipTrigger>
+                <LinkButton
+                  variant="minimal/medium"
+                  to={adminPath()}
+                  TrailingIcon={Cog8ToothIcon}
+                />
+              </TooltipTrigger>
+              <TooltipContent side="bottom" className={"text-xs"}>
+                Admin dashboard
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+        {user.isImpersonating && <ImpersonationBanner />}
       </div>
       <div
         className="overflow-hidden overflow-y-auto pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
@@ -319,10 +340,7 @@ function ProjectSelector({
       <PopoverArrowTrigger
         isOpen={isOrgMenuOpen}
         overflowHidden
-        className={cn(
-          "h-8 w-full justify-between py-1 pl-1.5",
-          user.isImpersonating && "border border-dashed border-amber-400"
-        )}
+        className="h-8 w-full justify-between py-1 pl-1.5"
       >
         <span className="flex items-center gap-1.5 overflow-hidden">
           <Avatar avatar={organization.avatar} size={1.25} orgName={organization.title} />
@@ -406,19 +424,24 @@ function ProjectSelector({
           <PopoverMenuItem to={newProjectPath(organization)} title="New project" icon={PlusIcon} />
         </div>
         <div className="border-t border-charcoal-700 p-1">
-          <SwitchOrganizations organizations={organizations} organization={organization} />
+          {organizations.length > 1 ? (
+            <SwitchOrganizations organizations={organizations} organization={organization} />
+          ) : (
+            <PopoverMenuItem
+              to={newOrganizationPath()}
+              title="New organization"
+              icon={PlusIcon}
+              leadingIconClassName="text-text-dimmed"
+            />
+          )}
         </div>
         <div className="border-t border-charcoal-700 p-1">
           <PopoverMenuItem
             to={accountPath()}
             title="Account"
             icon={UserProfilePhoto}
-            leadingIconClassName={cn(
-              "text-text-dimmed rounded-full border border-transparent",
-              user.isImpersonating && "rounded-full border-yellow-500"
-            )}
+            leadingIconClassName="text-text-dimmed rounded-full border border-transparent"
           />
-          {user.isImpersonating && <ImpersonationBanner />}
         </div>
         <div className="border-t border-charcoal-700 p-1">
           <PopoverMenuItem
@@ -513,7 +536,7 @@ function SwitchOrganizations({
           <div className="border-t border-charcoal-700 p-1">
             <PopoverMenuItem
               to={newOrganizationPath()}
-              title="New Organization"
+              title="New organization"
               icon={PlusIcon}
               leadingIconClassName="text-text-dimmed"
             />

From ec64b4c352016b852119267c0905579efd8dd2a2 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 30 Apr 2025 09:23:13 +0100
Subject: [PATCH 3/3] Simpler UI for displaying admin access

---
 .../app/components/ImpersonationBanner.tsx    |  2 +-
 .../app/components/navigation/SideMenu.tsx    | 19 ++++++++-----------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/apps/webapp/app/components/ImpersonationBanner.tsx b/apps/webapp/app/components/ImpersonationBanner.tsx
index a7116b4ded..1ef5bff641 100644
--- a/apps/webapp/app/components/ImpersonationBanner.tsx
+++ b/apps/webapp/app/components/ImpersonationBanner.tsx
@@ -16,7 +16,7 @@ export function ImpersonationBanner() {
                 LeadingIcon={UserMinusIcon}
                 fullWidth
                 textAlignLeft
-                className="bg-amber-400 text-background-bright group-hover/button:bg-amber-300"
+                className="text-amber-400"
               />
             </TooltipTrigger>
             <TooltipContent side="bottom" className={"text-xs"}>
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index aa499454e3..9ce9b13475 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -16,6 +16,7 @@ import {
   RectangleStackIcon,
   ServerStackIcon,
   Squares2X2Icon,
+  UsersIcon,
 } from "@heroicons/react/20/solid";
 import { useNavigation } from "@remix-run/react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
@@ -27,6 +28,7 @@ import { Avatar } from "~/components/primitives/Avatar";
 import { type MatchedEnvironment } from "~/hooks/useEnvironment";
 import { type MatchedOrganization } from "~/hooks/useOrganizations";
 import { type MatchedProject } from "~/hooks/useProject";
+import { useHasAdminAccess } from "~/hooks/useUser";
 import { type User } from "~/models/user.server";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { type FeedbackType } from "~/routes/resources.feedback";
@@ -77,7 +79,6 @@ import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
 import { SideMenuSection } from "./SideMenuSection";
-import { useHasAdminAccess } from "~/hooks/useUser";
 
 type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
 export type SideMenuProject = Pick<
@@ -133,8 +134,7 @@ export function SideMenu({
       <div
         className={cn(
           "flex items-center justify-between overflow-hidden border-b px-1 py-1 transition duration-300",
-          showHeaderDivider ? "border-grid-bright" : "border-transparent",
-          user.isImpersonating && "rounded-md border border-dashed border-amber-400"
+          showHeaderDivider ? "border-grid-bright" : "border-transparent"
         )}
       >
         <ProjectSelector
@@ -143,23 +143,20 @@ export function SideMenu({
           project={project}
           user={user}
         />
-        {isAdmin && (
+        {isAdmin && !user.isImpersonating ? (
           <TooltipProvider disableHoverableContent={true}>
             <Tooltip>
               <TooltipTrigger>
-                <LinkButton
-                  variant="minimal/medium"
-                  to={adminPath()}
-                  TrailingIcon={Cog8ToothIcon}
-                />
+                <LinkButton variant="minimal/medium" to={adminPath()} TrailingIcon={UsersIcon} />
               </TooltipTrigger>
               <TooltipContent side="bottom" className={"text-xs"}>
                 Admin dashboard
               </TooltipContent>
             </Tooltip>
           </TooltipProvider>
-        )}
-        {user.isImpersonating && <ImpersonationBanner />}
+        ) : isAdmin && user.isImpersonating ? (
+          <ImpersonationBanner />
+        ) : null}
       </div>
       <div
         className="overflow-hidden overflow-y-auto pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"