feat(core): add navbar actions (@internal) (#5968)

* feat(core): add navbar actions (`@internal`)

* refactor(tasks): use navbar actions

Author: hermanwikner

packages/sanity/src/core/config/studio/types.ts

@@ -1,4 +1,4 @@
-import {type ComponentType, type ReactElement, type ReactNode} from 'react'
+import {type ComponentType, type ReactElement} from 'react'
 
 import {type Tool} from '../types'
 
@@ -18,15 +18,30 @@ export interface LogoProps {
   renderDefault: (props: LogoProps) => ReactElement
 }
 
+/**
+ * @internal
+ * @beta
+ * An internal API for defining actions in the navbar.
+ */
+export interface NavbarAction {
+  icon?: React.ComponentType
+  location: 'topbar' | 'sidebar'
+  name: string
+  onAction: () => void
+  selected: boolean
+  title: string
+}
+
 /**
  * @hidden
  * @beta */
 export interface NavbarProps {
   renderDefault: (props: NavbarProps) => ReactElement
+
   /**
    * @internal
    * @beta */
-  __internal_rightSectionNode?: ReactNode
+  __internal_actions?: NavbarAction[]
 }
 
 /**

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

@@ -35,6 +35,8 @@ import {SearchProvider} from './search/contexts/search/SearchProvider'
 import {UserMenu} from './userMenu'
 import {WorkspaceMenuButton} from './workspace'
 
+const EMPTY_ARRAY: [] = []
+
 const RootLayer = styled(Layer)`
   min-height: auto;
   position: relative;
@@ -60,8 +62,11 @@ const NavGrid = styled(Grid)`
  * @hidden
  * @beta */
 export function StudioNavbar(props: Omit<NavbarProps, 'renderDefault'>) {
-  // eslint-disable-next-line camelcase
-  const {__internal_rightSectionNode = null} = props
+  const {
+    // eslint-disable-next-line camelcase
+    __internal_actions: actions = EMPTY_ARRAY,
+  } = props
+
   const {name, tools} = useWorkspace()
   const routerState = useRouterState()
   const mediaIndex = useMediaIndex()
@@ -153,6 +158,25 @@ export function StudioNavbar(props: Omit<NavbarProps, 'renderDefault'>) {
     setDrawerOpen(true)
   }, [])
 
+  const actionNodes = useMemo(() => {
+    if (!shouldRender.tools) return null
+
+    return actions
+      ?.filter((v) => v.location === 'topbar')
+      ?.map((action) => {
+        return (
+          <Button
+            iconRight={action?.icon}
+            key={action.name}
+            mode="bleed"
+            onClick={action?.onAction}
+            selected={action.selected}
+            text={action.title}
+          />
+        )
+      })
+  }, [actions, shouldRender.tools])
+
   return (
     <FreeTrialProvider>
       <RootLayer zOffset={100} data-search-open={searchFullscreenOpen}>
@@ -236,10 +260,13 @@ export function StudioNavbar(props: Omit<NavbarProps, 'renderDefault'>) {
                       </BoundaryElementProvider>
                     </SearchProvider>
                   </LayerProvider>
+
                   {shouldRender.tools && <FreeTrial type="topbar" />}
                   {shouldRender.configIssues && <ConfigIssuesButton />}
                   {shouldRender.resources && <ResourcesButton />}
+
                   <PresenceMenu />
+
                   {/* Search button (mobile) */}
                   {shouldRender.searchFullscreen && (
                     <SearchButton
@@ -248,11 +275,9 @@ export function StudioNavbar(props: Omit<NavbarProps, 'renderDefault'>) {
                     />
                   )}
 
-                  {
-                    // eslint-disable-next-line camelcase
-                    __internal_rightSectionNode
-                  }
+                  {actionNodes}
                 </Flex>
+
                 {shouldRender.tools && (
                   <Box flex="none" marginLeft={1}>
                     <UserMenu />
@@ -265,6 +290,7 @@ export function StudioNavbar(props: Omit<NavbarProps, 'renderDefault'>) {
 
         {!shouldRender.tools && (
           <NavDrawer
+            __internal_actions={actions}
             activeToolName={activeToolName}
             isOpen={drawerOpen}
             onClose={handleCloseDrawer}

packages/sanity/src/core/studio/components/navbar/navDrawer/NavDrawer.tsx

@@ -1,13 +1,13 @@
 import {CloseIcon, LeaveIcon} from '@sanity/icons'
 import {Box, Card, Flex, Layer, Stack, Text} from '@sanity/ui'
 import {AnimatePresence, motion, type Transition, type Variants} from 'framer-motion'
-import {type KeyboardEvent, memo, useCallback} from 'react'
+import {type KeyboardEvent, memo, useCallback, useMemo} from 'react'
 import TrapFocus from 'react-focus-lock'
 import styled from 'styled-components'
 
 import {Button} from '../../../../../ui-components'
 import {UserAvatar} from '../../../../components'
-import {type Tool} from '../../../../config'
+import {type NavbarAction, type Tool} from '../../../../config'
 import {useTranslation} from '../../../../i18n'
 import {useColorSchemeSetValue} from '../../../colorScheme'
 import {useToolMenuComponent} from '../../../studio-components-hooks'
@@ -73,14 +73,15 @@ const InnerCardMotion = styled(motion(Card))`
 `
 
 interface NavDrawerProps {
+  __internal_actions?: NavbarAction[]
   activeToolName?: string
   isOpen: boolean
   onClose: () => void
   tools: Tool[]
 }
 
 export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
-  const {activeToolName, isOpen, onClose, tools} = props
+  const {__internal_actions: actions, activeToolName, isOpen, onClose, tools} = props
 
   const setScheme = useColorSchemeSetValue()
   const {auth, currentUser} = useWorkspace()
@@ -98,6 +99,35 @@ export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
     [onClose],
   )
 
+  const handleActionClick = useCallback(
+    (action: () => void) => {
+      action?.()
+      onClose()
+    },
+    [onClose],
+  )
+
+  const actionNodes = useMemo(() => {
+    return actions
+      ?.filter((v) => v.location === 'sidebar')
+      ?.map((action) => {
+        return (
+          <Button
+            icon={action?.icon}
+            justify="flex-start"
+            key={action.name}
+            mode="bleed"
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick={() => handleActionClick(action.onAction)}
+            selected={action.selected}
+            size="large"
+            text={action.title}
+            width="fill"
+          />
+        )
+      })
+  }, [actions, handleActionClick])
+
   return (
     <AnimatePresence>
       {isOpen && (
@@ -172,6 +202,12 @@ export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
                 </Card>
 
                 <Flex direction="column">
+                  {actionNodes && (
+                    <Card flex="none" padding={2}>
+                      <Stack space={1}>{actionNodes}</Stack>
+                    </Card>
+                  )}
+
                   {setScheme && <AppearanceMenu setScheme={setScheme} />}
                   <LocaleMenu />
                   <ManageMenu />

packages/sanity/src/tasks/plugin/TasksStudioNavbar.tsx

@@ -1,14 +1,53 @@
+import {PanelRightIcon, TaskIcon} from '@sanity/icons'
+import {useCallback, useMemo} from 'react'
 import {type NavbarProps} from 'sanity'
 
-import {TasksNavbarButton, useTasksEnabled} from '../src'
+import {useTasks, useTasksEnabled} from '../src'
 
-export function TasksStudioNavbar(props: NavbarProps) {
-  const {enabled} = useTasksEnabled()
+const EMPTY_ARRAY: [] = []
+
+function TasksStudioNavbarInner(props: NavbarProps) {
+  const {toggleOpen, isOpen} = useTasks()
+
+  const handleAction = useCallback(() => {
+    toggleOpen()
+  }, [toggleOpen])
+
+  const actions = useMemo((): NavbarProps['__internal_actions'] => {
+    return [
+      ...(props?.__internal_actions || EMPTY_ARRAY),
+      {
+        icon: PanelRightIcon,
+        location: 'topbar',
+        name: 'tasks-topbar',
+        onAction: handleAction,
+        selected: isOpen,
+        title: 'Tasks',
+      },
+      {
+        icon: TaskIcon,
+        location: 'sidebar',
+        name: 'tasks-sidebar',
+        onAction: handleAction,
+        selected: isOpen,
+        title: 'Tasks',
+      },
+    ]
+  }, [handleAction, isOpen, props?.__internal_actions])
 
-  if (!enabled) return props.renderDefault(props)
   return props.renderDefault({
     ...props,
     // eslint-disable-next-line camelcase
-    __internal_rightSectionNode: <TasksNavbarButton />,
+    __internal_actions: actions,
   })
 }
+
+export function TasksStudioNavbar(props: NavbarProps) {
+  const {enabled} = useTasksEnabled()
+
+  if (!enabled) {
+    return props.renderDefault(props)
+  }
+
+  return <TasksStudioNavbarInner {...props} />
+}

packages/sanity/src/tasks/src/tasks/components/index.ts

@@ -1,3 +1,2 @@
 export * from './form'
-export * from './navbar'
 export * from './sidebar'