ref(issueDetails): Break circular dependency between sidebar and detectorSection

oxlint-suppressions.json

@@ -1383,11 +1383,6 @@
       "count": 1
     }
   },
-  "static/app/components/sidebarSection.tsx": {
-    "@sentry/scraps/prefer-primitives": {
-      "count": 1
-    }
-  },
   "static/app/components/slider/index.tsx": {
     "@sentry/scraps/prefer-primitives": {
       "count": 1

static/app/components/sidebarSection.tsx

@@ -1,18 +1,29 @@
 import styled from '@emotion/styled';
 
 import {Container, type ContainerProps} from '@sentry/scraps/layout';
+import {Heading} from '@sentry/scraps/text';
 
 export function Wrap(props: ContainerProps) {
   return <Container marginBottom="3xl" {...props} />;
 }
 
-export const Title = styled('h6')`
-  color: ${p => p.theme.tokens.content.secondary};
+interface TitleProps {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  variant?: React.ComponentProps<typeof Heading>['variant'];
+}
+
+export function Title(props: TitleProps) {
+  return <StyledHeading as="h6" size="md" variant="muted" {...props} />;
+}
+
+// Titles often carry a trailing InfoTip or icon that needs to sit centered next to the text
+const StyledHeading = styled(Heading)`
   display: flex;
   align-items: center;
   gap: ${p => p.theme.space.xs};
-  font-size: ${p => p.theme.font.size.md};
-  margin: ${p => p.theme.space.md} 0 0;
+  margin-top: ${p => p.theme.space.md};
 `;
 
 export const IconWrapper = styled('div')`

static/app/views/issueDetails/sidebar/detectorSection.tsx

@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
 
 import {LinkButton} from '@sentry/scraps/button';
+import {Container} from '@sentry/scraps/layout';
 
+import * as SidebarSection from 'sentry/components/sidebarSection';
 import {t} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
@@ -11,7 +13,6 @@ import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
 import {makeMonitorDetailsPathname} from 'sentry/views/detectors/pathnames';
 import {useIssueDetails} from 'sentry/views/issueDetails/context';
 import type {DetectorDetails} from 'sentry/views/issueDetails/sidebar/detectorDetails';
-import {SidebarSectionTitle} from 'sentry/views/issueDetails/sidebar/sidebar';
 
 export function getDetectorDetails({
   event,
@@ -124,7 +125,9 @@ function DetectorSectionContent({
 
   return (
     <div>
-      <SidebarSectionTitle>{title}</SidebarSectionTitle>
+      <Container marginBottom="md">
+        <SidebarSection.Title variant="primary">{title}</SidebarSection.Title>
+      </Container>
       {description && <DetectorDescription>{description}</DetectorDescription>}
       <LinkButton
         aria-label={ctaText}

static/app/views/issueDetails/sidebar/mergedSidebarSection.tsx

@@ -1,8 +1,8 @@
 import {Flex} from '@sentry/scraps/layout';
 
+import * as SidebarSection from 'sentry/components/sidebarSection';
 import {t} from 'sentry/locale';
 import {useLocation} from 'sentry/utils/useLocation';
-import {SidebarSectionTitle} from 'sentry/views/issueDetails/sidebar/sidebar';
 import {ViewButton} from 'sentry/views/issueDetails/sidebar/viewButton';
 import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
 import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
@@ -13,7 +13,9 @@ export function MergedIssuesSidebarSection() {
 
   return (
     <Flex justify="between" align="center">
-      <SidebarSectionTitle style={{margin: 0}}>{t('Merged Issues')}</SidebarSectionTitle>
+      <SidebarSection.Title variant="primary" style={{margin: 0}}>
+        {t('Merged Issues')}
+      </SidebarSection.Title>
       <ViewButton
         aria-label={t('View Merged Issues')}
         to={{

static/app/views/issueDetails/sidebar/sidebar.tsx

@@ -7,7 +7,6 @@ import {ExternalLink} from '@sentry/scraps/link';
 
 import {ErrorBoundary} from 'sentry/components/errorBoundary';
 import * as Layout from 'sentry/components/layouts/thirds';
-import * as SidebarSection from 'sentry/components/sidebarSection';
 import {t, tct} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
 import type {Group, TeamParticipant, UserParticipant} from 'sentry/types/group';
@@ -140,11 +139,6 @@ const StyledBreak = styled('hr')`
   border-color: ${p => p.theme.tokens.border.primary};
 `;
 
-export const SidebarSectionTitle = styled(SidebarSection.Title)`
-  margin-bottom: ${p => p.theme.space.md};
-  color: ${p => p.theme.tokens.content.primary};
-`;
-
 const Side = styled(Layout.Side)<{isBottomSidebar: boolean}>`
   position: relative;
   padding: ${p => p.theme.space.lg} ${p => p.theme.space.xl};

static/app/views/issueDetails/sidebar/similarIssuesSidebarSection.tsx

@@ -1,8 +1,8 @@
 import {Flex} from '@sentry/scraps/layout';
 
+import * as SidebarSection from 'sentry/components/sidebarSection';
 import {t} from 'sentry/locale';
 import {useLocation} from 'sentry/utils/useLocation';
-import {SidebarSectionTitle} from 'sentry/views/issueDetails/sidebar/sidebar';
 import {ViewButton} from 'sentry/views/issueDetails/sidebar/viewButton';
 import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
 import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
@@ -13,7 +13,9 @@ export function SimilarIssuesSidebarSection() {
 
   return (
     <Flex justify="between" align="center">
-      <SidebarSectionTitle style={{margin: 0}}>{t('Similar Issues')}</SidebarSectionTitle>
+      <SidebarSection.Title variant="primary" style={{margin: 0}}>
+        {t('Similar Issues')}
+      </SidebarSection.Title>
       <ViewButton
         aria-label={t('View Similar Issues')}
         to={{