refactor(tasks): use navbar actions

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'