feat: tasks tool defines own render method for nav bar link

sanity-io · Jan 13, 2025 · 29c9970 · 29c9970
1 parent cbab817
commit 29c9970
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/packages/sanity/src/core/tasks/i18n/resources.ts b/packages/sanity/src/core/tasks/i18n/resources.ts
@@ -155,12 +155,15 @@ const tasksLocaleStrings = defineLocalesResources('tasks', {
   'panel.navigation.tooltip': 'Open tasks',
   /** Title of the Tasks panel   */
   'panel.title': 'Tasks',
+
   /** Label for the Assigned Tab */
   'tab.assigned.label': 'Assigned',
   /** Label for the Active Document Tab */
   'tab.document.label': 'Active Document',
   /** Label for the Subscribed Tab */
   'tab.subscribed.label': 'Subscribed',
+  /** Tooltip for the tasks navbar icon */
+  'toolbar.tooltip': 'Tasks',
 })
 
 /**

diff --git a/packages/sanity/src/core/tasks/plugin/TasksStudioNavbar.tsx b/packages/sanity/src/core/tasks/plugin/TasksStudioNavbar.tsx
@@ -1,13 +1,30 @@
-import {PanelRightIcon, TaskIcon} from '@sanity/icons'
+import {CheckmarkCircleIcon} from '@sanity/icons'
 import {useCallback, useMemo} from 'react'
 
+import {Button} from '../../../ui-components'
 import {type NavbarProps} from '../../config'
 import {useTranslation} from '../../i18n'
 import {useTasksEnabled, useTasksNavigation} from '../context'
 import {tasksLocaleNamespace} from '../i18n'
 
 const EMPTY_ARRAY: [] = []
 
+const TasksToolbar = ({onClick, isOpen}: {onClick: () => void; isOpen: boolean}) => {
+  const {t} = useTranslation(tasksLocaleNamespace)
+
+  return (
+    <Button
+      tooltipProps={{
+        content: t('toolbar.tooltip'),
+      }}
+      icon={CheckmarkCircleIcon}
+      mode="bleed"
+      onClick={onClick}
+      selected={isOpen}
+    />
+  )
+}
+
 function TasksStudioNavbarInner(props: NavbarProps) {
   const {
     handleOpenTasks,
@@ -25,27 +42,29 @@ function TasksStudioNavbarInner(props: NavbarProps) {
     }
   }, [isOpen, handleOpenTasks, handleCloseTasks])
 
+  const renderTasksNav = useCallback(
+    () => <TasksToolbar onClick={handleClick} isOpen={isOpen} />,
+    [handleClick, isOpen],
+  )
+
   const actions = useMemo((): NavbarProps['__internal_actions'] => {
     return [
       ...(props?.__internal_actions || EMPTY_ARRAY),
       {
-        icon: PanelRightIcon,
         location: 'topbar',
         name: 'tasks-topbar',
-        onAction: handleClick,
-        selected: isOpen,
-        title: t('actions.open.text'),
+        render: renderTasksNav,
       },
       {
-        icon: TaskIcon,
+        icon: CheckmarkCircleIcon,
         location: 'sidebar',
         name: 'tasks-sidebar',
         onAction: handleClick,
         selected: isOpen,
         title: t('actions.open.text'),
       },
     ]
-  }, [handleClick, isOpen, props?.__internal_actions, t])
+  }, [handleClick, isOpen, props?.__internal_actions, renderTasksNav, t])
 
   return props.renderDefault({
     ...props,