Small tweaks to feature preview badge (#45409)

## Context

Small improvements from this PR:
https://github.com/supabase/supabase/pull/45373

- Fix feature preview badge alignment
  - Before:
<img width="341" height="75" alt="image"
src="https://github.com/user-attachments/assets/e6e2f727-fc75-4f70-b9cd-94d67aed8c5d"
/>
  - After:
<img width="365" height="64" alt="image"
src="https://github.com/user-attachments/assets/3d6e5e5d-c285-48f4-8f8f-251c23101e41"
/>
- Shift feature preview badge for policies into tester side panel
<img width="640" height="93" alt="image"
src="https://github.com/user-attachments/assets/3efb73a7-f7f5-4ae0-8560-d1e0ba989626"
/>
- Realised that advisor settings wasn't set up to be behind the feature
preview
  - Fixing that in this PR

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
  * Added preview badge indicator to the RLS Tester feature

* **Style**
* Improved spacing and layout alignment across authentication, database
access, webhook, logging, and advisor interface components
  * Enhanced badge component styling for better vertical alignment

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/studio/components/interfaces/Auth/RLSTester/RLSTesterSheet.tsx

@@ -8,6 +8,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@ui/components/shadcn/ui/select'
+import { LOCAL_STORAGE_KEYS } from 'common'
 import { Code } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import {
@@ -32,6 +33,7 @@ import { RoleSelector } from './RoleSelector'
 import { UserSelector } from './UserSelector'
 import { useTestQueryRLS } from './useTestQueryRLS'
 import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
+import { FeaturePreviewBadge } from '@/components/ui/FeaturePreviewBadge'
 import { useRoleImpersonationStateSnapshot } from '@/state/role-impersonation-state'
 
 interface RLSTesterSheetProps {
@@ -87,7 +89,10 @@ export const RLSTesterSheet = ({ handleSelectEditPolicy }: RLSTesterSheetProps)
 
       <SheetContent className="w-[600px]! flex flex-col gap-y-0">
         <SheetHeader>
-          <SheetTitle>What data can my users see?</SheetTitle>
+          <SheetTitle className="flex items-center gap-x-4">
+            <span>What data can my users see?</span>
+            <FeaturePreviewBadge featureKey={LOCAL_STORAGE_KEYS.UI_PREVIEW_RLS_TESTER} />
+          </SheetTitle>
           <SheetDescription>
             See what data a user is allowed to read based on your RLS policies
           </SheetDescription>

apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksHeader.tsx

@@ -62,7 +62,7 @@ export const PlatformWebhooksHeader = ({
       <PageHeaderMeta>
         <PageHeaderSummary className="min-w-0">
           <PageHeaderTitle className="min-w-0 w-full">
-            <span className="flex w-full min-w-0 items-center gap-2">
+            <span className="flex w-full min-w-0 items-center gap-x-4">
               <span className="block min-w-0 truncate leading-tight">{headerTitle}</span>
               {hasSelectedEndpoint && endpointStatus && (
                 <Badge

apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessConfiguration.tsx

@@ -292,7 +292,7 @@ export const JitDbAccessConfiguration = () => {
         <PageSectionMeta>
           <PageSectionSummary>
             <PageSectionTitle>
-              <span className="flex items-center gap-2">
+              <span className="flex items-center gap-x-4">
                 Temporary access
                 <FeaturePreviewBadge featureKey={LOCAL_STORAGE_KEYS.UI_PREVIEW_JIT_DB_ACCESS} />
               </span>

apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx

@@ -409,7 +409,7 @@ export const UnifiedLogs = () => {
                 <div className="block sm:hidden">
                   <DataTableFilterControlsDrawer />
                 </div>
-                <div className="ml-auto flex items-center gap-2">
+                <div className="ml-auto flex items-center gap-x-4">
                   <FeaturePreviewBadge featureKey={LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS} />
                   <RefreshButton isLoading={isRefetchingData} onRefresh={refetchAllData} />
                   <DataTableViewOptions />

apps/studio/components/layouts/AdvisorsLayout/AdvisorRulesLayout.tsx

@@ -15,7 +15,7 @@ export const AdvisorRulesLayout = ({ children }: PropsWithChildren<{}>) => {
       <AdvisorsLayout>
         <PageLayout
           title={
-            <span className="flex items-center gap-2">
+            <span className="flex items-center gap-x-4">
               Advisor Settings
               {isAdvisorRulesEnabled && (
                 <FeaturePreviewBadge featureKey={LOCAL_STORAGE_KEYS.UI_PREVIEW_ADVISOR_RULES} />

apps/studio/components/layouts/AdvisorsLayout/AdvisorsMenu.utils.tsx

@@ -1,11 +1,13 @@
+import { useParams } from 'common'
 import { ArrowUpRight } from 'lucide-react'
 
+import { useIsAdvisorRulesEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import type { ProductMenuGroup } from '@/components/ui/ProductMenu/ProductMenu.types'
-import type { Project } from '@/data/projects/project-detail-query'
 import { IS_PLATFORM } from '@/lib/constants'
 
-export const generateAdvisorsMenu = (project?: Project): ProductMenuGroup[] => {
-  const ref = project?.ref ?? 'default'
+export const useGenerateAdvisorsMenu = (): ProductMenuGroup[] => {
+  const { ref } = useParams()
+  const isAdvisorRulesEnabled = useIsAdvisorRulesEnabled()
 
   return [
     {
@@ -32,7 +34,7 @@ export const generateAdvisorsMenu = (project?: Project): ProductMenuGroup[] => {
         },
       ],
     },
-    ...(IS_PLATFORM
+    ...(IS_PLATFORM && isAdvisorRulesEnabled
       ? [
           {
             title: 'Configuration',

apps/studio/components/layouts/AdvisorsLayout/AdvisorsSidebarMenu.tsx

@@ -1,10 +1,9 @@
 import { Badge, Button } from 'ui'
 
 import { FeaturePreviewSidebarPanel } from '../../ui/FeaturePreviewSidebarPanel'
-import { generateAdvisorsMenu } from './AdvisorsMenu.utils'
+import { useGenerateAdvisorsMenu } from './AdvisorsMenu.utils'
 import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { ProductMenu } from '@/components/ui/ProductMenu'
-import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
 
 interface AdvisorsSidebarMenuProps {
@@ -12,7 +11,7 @@ interface AdvisorsSidebarMenuProps {
 }
 
 export function AdvisorsSidebarMenu({ page }: AdvisorsSidebarMenuProps) {
-  const { data: project } = useSelectedProjectQuery()
+  const menu = useGenerateAdvisorsMenu()
   const { toggleSidebar } = useSidebarManagerSnapshot()
 
   const handleOpenAdvisor = () => {
@@ -33,7 +32,7 @@ export function AdvisorsSidebarMenu({ page }: AdvisorsSidebarMenuProps) {
         }
       />
 
-      <ProductMenu page={page} menu={generateAdvisorsMenu(project)} />
+      <ProductMenu page={page} menu={menu} />
     </div>
   )
 }

apps/studio/components/ui/FeaturePreviewBadge.tsx

@@ -15,7 +15,7 @@ export const FeaturePreviewBadge = ({ featureKey, className }: FeaturePreviewBad
     <button
       type="button"
       onClick={() => selectFeaturePreview(featureKey)}
-      className="group"
+      className="group flex items-center"
       title="Feature preview — click to manage"
     >
       <Badge

apps/studio/pages/project/[ref]/auth/policies.tsx

@@ -35,7 +35,6 @@ import { BannerRlsEventTrigger } from '@/components/ui/BannerStack/Banners/Banne
 import { BannerRlsTester } from '@/components/ui/BannerStack/Banners/BannerRlsTester'
 import { useBannerStack } from '@/components/ui/BannerStack/BannerStackProvider'
 import { DocsButton } from '@/components/ui/DocsButton'
-import { FeaturePreviewBadge } from '@/components/ui/FeaturePreviewBadge'
 import { NoPermission } from '@/components/ui/NoPermission'
 import { SchemaSelector } from '@/components/ui/SchemaSelector'
 import { useProjectPostgrestConfigQuery } from '@/data/config/project-postgrest-config-query'
@@ -298,14 +297,7 @@ const AuthPoliciesPage: NextPageWithLayout = () => {
       <PageHeader size="large">
         <PageHeaderMeta>
           <PageHeaderSummary>
-            <PageHeaderTitle>
-              <span className="flex items-center gap-2">
-                Policies
-                {rlsTesterEnabled && (
-                  <FeaturePreviewBadge featureKey={LOCAL_STORAGE_KEYS.UI_PREVIEW_RLS_TESTER} />
-                )}
-              </span>
-            </PageHeaderTitle>
+            <PageHeaderTitle>Policies</PageHeaderTitle>
             <PageHeaderDescription>
               Manage Row Level Security policies for your tables
             </PageHeaderDescription>

apps/studio/pages/project/[ref]/database/column-privileges.tsx

@@ -225,7 +225,7 @@ const PrivilegesPage: NextPageWithLayout = () => {
         <div className="col-span-12 flex flex-col pb-4 gap-y-4">
           <div className="flex items-center justify-between">
             <div>
-              <div className="flex items-center gap-2 mb-1">
+              <div className="flex items-center gap-x-4 mb-1">
                 <h3 className="text-xl">Column-level privileges</h3>
                 {isEnabled && (
                   <FeaturePreviewBadge featureKey={LOCAL_STORAGE_KEYS.UI_PREVIEW_CLS} />

apps/studio/pages/project/[ref]/merge.tsx

@@ -445,7 +445,7 @@ const MergePage: NextPageWithLayout = () => {
   )
 
   const pageTitle = () => (
-    <div className="flex items-center gap-x-2">
+    <div className="flex items-center gap-x-4">
       <span>Merge</span>
       {pgDeltaDiffEnabled && (
         <FeaturePreviewBadge featureKey={LOCAL_STORAGE_KEYS.UI_PREVIEW_PG_DELTA_DIFF} />