chore: move realtime inspector role impersonation popover (#19403)

apps/studio/components/interfaces/Realtime/Inspector/Header.tsx

@@ -17,6 +17,7 @@ export const Header = ({ config, onChangeConfig }: HeaderProps) => {
     <div className="flex flex-row h-14 gap-2.5 items-center px-4">
       <div className="flex flex-row">
         <ChooseChannelPopover config={config} onChangeConfig={onChangeConfig} />
+        <RealtimeTokensPopover config={config} onChangeConfig={onChangeConfig} />
         <Button
           size="tiny"
           type={config.enabled ? 'warning' : 'primary'}
@@ -28,7 +29,6 @@ export const Header = ({ config, onChangeConfig }: HeaderProps) => {
           {config.enabled ? `Stop listening` : `Start listening`}
         </Button>
       </div>
-      <RealtimeTokensPopover config={config} onChangeConfig={onChangeConfig} />
       <RealtimeFilterPopover config={config} onChangeConfig={onChangeConfig} />
     </div>
   )

apps/studio/components/interfaces/Realtime/Inspector/RealtimeTokensPopover/index.tsx

@@ -46,5 +46,5 @@ export const RealtimeTokensPopover = ({ config, onChangeConfig }: RealtimeTokens
     }
   }, [config.projectRef, jwtSecret, serviceRoleKey, snap.role])
 
-  return <RoleImpersonationPopover align="start" />
+  return <RoleImpersonationPopover align="start" variant="connected-on-both" />
 }

apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx

@@ -9,7 +9,7 @@ import RoleImpersonationSelector from './RoleImpersonationSelector'
 
 export interface RoleImpersonationPopoverProps {
   serviceRoleLabel?: string
-  variant?: 'regular' | 'connected-on-right'
+  variant?: 'regular' | 'connected-on-right' | 'connected-on-left' | 'connected-on-both'
   align?: 'center' | 'start' | 'end'
 }
 
@@ -32,7 +32,9 @@ const RoleImpersonationPopover = ({
           type="default"
           className={cn(
             'h-[26px] pr-3 gap-0',
-            variant === 'connected-on-right' && 'rounded-r-none border-r-0'
+            variant === 'connected-on-right' && 'rounded-r-none border-r-0',
+            variant === 'connected-on-left' && 'rounded-l-none border-l-0',
+            variant === 'connected-on-both' && 'rounded-none border-x-0'
           )}
         >
           <div className="flex items-center gap-1">