From 29c99706d9ee2cb5c99e8ff19cb158e61e3ddb53 Mon Sep 17 00:00:00 2001
From: Jordan Lawrence <jordanl17@me.com>
Date: Mon, 13 Jan 2025 21:14:31 +0000
Subject: [PATCH] feat: tasks tool defines own render method for nav bar link

---
 .../sanity/src/core/tasks/i18n/resources.ts   |  3 ++
 .../core/tasks/plugin/TasksStudioNavbar.tsx   | 33 +++++++++++++++----
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/packages/sanity/src/core/tasks/i18n/resources.ts b/packages/sanity/src/core/tasks/i18n/resources.ts
index 8570bcafdc2..aab0a324729 100644
--- 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
index ffd619463a3..928844d4904 100644
--- a/packages/sanity/src/core/tasks/plugin/TasksStudioNavbar.tsx
+++ b/packages/sanity/src/core/tasks/plugin/TasksStudioNavbar.tsx
@@ -1,6 +1,7 @@
-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'
@@ -8,6 +9,22 @@ 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,19 +42,21 @@ 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,
@@ -45,7 +64,7 @@ function TasksStudioNavbarInner(props: NavbarProps) {
         title: t('actions.open.text'),
       },
     ]
-  }, [handleClick, isOpen, props?.__internal_actions, t])
+  }, [handleClick, isOpen, props?.__internal_actions, renderTasksNav, t])
 
   return props.renderDefault({
     ...props,