feat: tone of navbar derived from current selected release type

packages/sanity/src/core/releases/navbar/ReleasesNav.tsx

@@ -9,6 +9,7 @@ import {IntentLink, useRouterState} from 'sanity/router'
 import {Tooltip} from '../../../ui-components'
 import {usePerspective} from '../hooks/usePerspective'
 import {RELEASES_INTENT, RELEASES_TOOL_NAME} from '../plugin'
+import {ReleaseAvatar} from '../tool/components/ReleaseAvatar'
 import {GlobalPerspectiveMenu} from './GlobalPerspectiveMenu'
 
 export function ReleasesNav(): JSX.Element {
@@ -44,7 +45,7 @@ export function ReleasesNav(): JSX.Element {
   )
 
   const currentGlobalPerspectiveLabel = useMemo(() => {
-    if (currentGlobalBundle._id === LATEST._id) return null
+    if (!currentGlobalBundle || currentGlobalBundle._id === LATEST._id) return null
     if (currentGlobalBundle._id === 'published') {
       return (
         <Card tone="inherit">
@@ -76,18 +77,18 @@ export function ReleasesNav(): JSX.Element {
         style={{maxWidth: '180px'}}
       >
         <Flex align="flex-start" gap={0}>
-          {/* <Box flex="none">
-            <VersionAvatar icon={current.icon} padding={2} tone={current.tone} />
-          </Box> */}
-          <Stack flex={1} paddingY={2} paddingX={2} space={2}>
+          <Box flex="none">
+            <ReleaseAvatar padding={2} release={currentGlobalBundle} />
+          </Box>
+          <Stack flex={1} paddingY={2} paddingRight={2} space={2}>
             <Text size={1} textOverflow="ellipsis" weight="medium">
               {currentGlobalBundle.title}
             </Text>
           </Stack>
         </Flex>
       </Button>
     )
-  }, [currentGlobalBundle._id, currentGlobalBundle.title])
+  }, [currentGlobalBundle])
 
   return (
     <Card flex="none" border marginRight={1} radius="full" tone="inherit" style={{margin: -1}}>

packages/sanity/src/core/releases/navbar/__tests__/ReleasesNav.test.tsx

@@ -87,4 +87,15 @@ describe('ReleasesNav', () => {
 
     screen.getByText('Test Bundle')
   })
+
+  it('should show release avatar for chosen perspective', async () => {
+    mockUsePerspective.mockReturnValue({
+      currentGlobalBundle: {_id: 'a-bundle', title: 'Test Bundle', releaseType: 'asap'},
+      setPerspective: mockSetPerspective,
+    })
+
+    await renderTest()
+
+    screen.getByTestId('release-avatar-critical')
+  })
 })

packages/sanity/src/core/releases/tool/components/ReleaseAvatar.tsx

@@ -1,24 +1,33 @@
 import {DotIcon} from '@sanity/icons'
+import {Box, Text} from '@sanity/ui'
+import {type CSSProperties} from 'react'
 import {type BundleDocument} from 'sanity'
 
 import {getReleaseTone} from '../../util/getReleaseTone'
-import {VersionAvatar} from './VersionAvatar'
 
 export function ReleaseAvatar({
-  fontSize,
-  padding,
+  fontSize = 1,
+  padding = 3,
   release,
 }: {
   fontSize?: number
   padding?: number
-  release: BundleDocument
+  release: Partial<BundleDocument>
 }) {
+  const releaseTone = getReleaseTone(release)
+
   return (
-    <VersionAvatar
-      fontSize={fontSize}
-      padding={padding}
-      icon={DotIcon}
-      tone={getReleaseTone(release)}
-    />
+    <Box flex="none" padding={padding} style={{borderRadius: 3}}>
+      <Text size={fontSize}>
+        <DotIcon
+          data-testid={`release-avatar-${releaseTone}`}
+          style={
+            {
+              '--card-icon-color': `var(--card-badge-${releaseTone}-icon-color)`,
+            } as CSSProperties
+          }
+        />
+      </Text>
+    </Box>
   )
 }

packages/sanity/src/core/releases/util/getReleaseTone.ts

@@ -1,13 +1,13 @@
 import {type BadgeTone} from '@sanity/ui'
 import {type BundleDocument} from 'sanity'
 
-export function getReleaseTone(release: BundleDocument): BadgeTone | undefined {
+export function getReleaseTone(release: Partial<BundleDocument>): BadgeTone {
   if (release.publishedAt !== undefined) {
     return 'positive'
   }
 
   if (release.archived) {
-    return undefined
+    return 'default'
   }
 
   if (release.releaseType === 'asap') {
@@ -17,5 +17,9 @@ export function getReleaseTone(release: BundleDocument): BadgeTone | undefined {
   if (release.releaseType === 'undecided') {
     return 'explore'
   }
-  return 'prospect'
+
+  if (release.releaseType === 'scheduled') {
+    return 'prospect'
+  }
+  return 'default'
 }

packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx

@@ -11,6 +11,7 @@ import {
   useMediaIndex,
 } from '@sanity/ui'
 import {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'
+import {usePerspective} from 'sanity'
 import {NavbarContext} from 'sanity/_singletons'
 import {type RouterState, useRouter, useRouterState} from 'sanity/router'
 import {styled} from 'styled-components'
@@ -19,6 +20,7 @@ import {Button, TooltipDelayGroupProvider} from '../../../../ui-components'
 import {type NavbarProps} from '../../../config/studio/types'
 import {isDev} from '../../../environment'
 import {useTranslation} from '../../../i18n'
+import {getReleaseTone} from '../../../releases/util/getReleaseTone'
 import {useToolMenuComponent} from '../../studio-components-hooks'
 import {useWorkspace} from '../../workspace'
 import {ConfigIssuesButton} from './configIssues/ConfigIssuesButton'
@@ -84,6 +86,8 @@ export function StudioNavbar(props: Omit<NavbarProps, 'renderDefault'>) {
     searchOpen,
   } = useContext(NavbarContext)
 
+  const {currentGlobalBundle} = usePerspective()
+
   const ToolMenu = useToolMenuComponent()
 
   const [drawerOpen, setDrawerOpen] = useState<boolean>(false)
@@ -188,6 +192,7 @@ export function StudioNavbar(props: Omit<NavbarProps, 'renderDefault'>) {
     <FreeTrialProvider>
       <RootLayer zOffset={100} data-search-open={searchFullscreenOpen}>
         <RootCard
+          tone={getReleaseTone(currentGlobalBundle)}
           borderBottom
           data-testid="studio-navbar"
           data-ui="Navbar"