fix(tasks): ui adjustments (#6086)

Author: hermanwikner

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

@@ -1,5 +1,5 @@
 import {PanelRightIcon, TaskIcon} from '@sanity/icons'
-import {useCallback, useMemo} from 'react'
+import {useMemo} from 'react'
 import {type NavbarProps, useTranslation} from 'sanity'
 
 import {tasksLocaleNamespace} from '../i18n'
@@ -9,19 +9,10 @@ const EMPTY_ARRAY: [] = []
 
 function TasksStudioNavbarInner(props: NavbarProps) {
   const {
-    handleCloseTasks,
     handleOpenTasks,
     state: {isOpen},
   } = useTasksNavigation()
 
-  const handleAction = useCallback(() => {
-    if (isOpen) {
-      handleCloseTasks()
-    } else {
-      handleOpenTasks()
-    }
-  }, [handleCloseTasks, handleOpenTasks, isOpen])
-
   const {t} = useTranslation(tasksLocaleNamespace)
 
   const actions = useMemo((): NavbarProps['__internal_actions'] => {
@@ -31,20 +22,20 @@ function TasksStudioNavbarInner(props: NavbarProps) {
         icon: PanelRightIcon,
         location: 'topbar',
         name: 'tasks-topbar',
-        onAction: handleAction,
+        onAction: handleOpenTasks,
         selected: isOpen,
         title: t('actions.open.text'),
       },
       {
         icon: TaskIcon,
         location: 'sidebar',
         name: 'tasks-sidebar',
-        onAction: handleAction,
+        onAction: handleOpenTasks,
         selected: isOpen,
         title: t('actions.open.text'),
       },
     ]
-  }, [handleAction, isOpen, props?.__internal_actions, t])
+  }, [handleOpenTasks, isOpen, props?.__internal_actions, t])
 
   return props.renderDefault({
     ...props,

packages/sanity/src/tasks/src/tasks/components/activity/TasksActivityCommentInput.tsx

@@ -64,7 +64,7 @@ export function TasksActivityCommentInput(props: TasksCommentActivityInputProps)
 
   return (
     <ActivityItem userId={currentUser.id}>
-      <Card tone="transparent" radius={3} paddingY={1} paddingX={2}>
+      <Card tone="transparent" radius={3} padding={2}>
         <CommentInput
           withAvatar={false}
           currentUser={currentUser}

packages/sanity/src/tasks/src/tasks/components/activity/TasksSubscribers.tsx

@@ -1,6 +1,6 @@
 import {AvatarStack, Flex} from '@sanity/ui'
 import {AnimatePresence, motion} from 'framer-motion'
-import {useCallback} from 'react'
+import {useCallback, useMemo} from 'react'
 import {type FormPatch, type PatchEvent, type Path, set} from 'sanity'
 
 import {Button} from '../../../../../ui-components'
@@ -47,28 +47,38 @@ export function TasksSubscribers(props: TasksSubscriberProps) {
   )
 }
 
-export function TasksSubscriberAvatars(props: {subscriberIds?: string[]}) {
-  const {subscriberIds} = props
+const EMPTY_ARRAY: [] = []
+
+interface TasksSubscriberAvatarsProps {
+  subscriberIds?: string[]
+}
+
+export function TasksSubscriberAvatars(props: TasksSubscriberAvatarsProps) {
+  const {subscriberIds: subscriberIdsProp} = props
+
+  const subscriberIds = useMemo(() => {
+    // Make sure we have valid subscriber IDs
+    return subscriberIdsProp?.filter(Boolean) || EMPTY_ARRAY
+  }, [subscriberIdsProp])
 
   return (
     <AnimatePresence initial={false}>
       <AvatarStack maxLength={3} size={0}>
-        {subscriberIds &&
-          subscriberIds.map((subscriberId) => (
-            <motion.div
-              key={subscriberId}
-              exit={{opacity: 0, translateX: '2px', scale: 0.9}}
-              animate={{
-                opacity: 1,
-                translateX: 0,
-                scale: 1,
-                transition: {type: 'just', duration: 0.2},
-              }}
-              initial={{opacity: 0, translateX: '2px', scale: 0.9}}
-            >
-              <TasksUserAvatar user={{id: subscriberId}} size={0} />
-            </motion.div>
-          ))}
+        {subscriberIds.map((subscriberId) => (
+          <motion.div
+            key={subscriberId}
+            exit={{opacity: 0, translateX: '2px', scale: 0.9}}
+            animate={{
+              opacity: 1,
+              translateX: 0,
+              scale: 1,
+              transition: {type: 'just', duration: 0.2},
+            }}
+            initial={{opacity: 0, translateX: '2px', scale: 0.9}}
+          >
+            <TasksUserAvatar user={{id: subscriberId}} size={0} />
+          </motion.div>
+        ))}
       </AvatarStack>
     </AnimatePresence>
   )

packages/sanity/src/tasks/src/tasks/components/form/fields/assignee/AssigneeEditFormField.tsx

@@ -20,11 +20,13 @@ const StyledButton = styled(Button)`
   padding: 3px 6px;
 `
 
-export function AssigneeEditFormField(props: {
+interface AssigneeEditFormFieldProps {
   value: string | undefined
   path: Path
   onChange: (patch: FormPatch | PatchEvent | FormPatch[]) => void
-}) {
+}
+
+export function AssigneeEditFormField(props: AssigneeEditFormFieldProps) {
   const {value, onChange, path} = props
   const subscribers = useFormValue(['subscribers']) as string[] | undefined
   const {mentionOptions} = useMentionUser()
@@ -33,10 +35,11 @@ export function AssigneeEditFormField(props: {
     [mentionOptions.data, value],
   )
   const {t} = useTranslation(tasksLocaleNamespace)
+
   const onSelect = useCallback(
     (userId: string) => {
       onChange(set(userId, path))
-      if (subscribers && !subscribers.includes(userId)) {
+      if (subscribers && !subscribers.includes(userId) && userId) {
         onChange(set([...subscribers, userId], ['subscribers']))
       }
     },

packages/sanity/src/tasks/src/tasks/components/list/TasksListItem.tsx

@@ -27,11 +27,6 @@ interface TasksListItemProps
 const TitleButton = styled(UIButton)`
   width: 100%;
   max-width: 100%;
-
-  &:hover {
-    text-decoration: underline;
-    background-color: transparent;
-  }
 `
 
 const TaskDetailsRoot = styled(Flex)`
@@ -83,15 +78,8 @@ function TaskDueDate({dueBy}: {dueBy: string}) {
   )
 }
 
-export function TasksListItem({
-  assignedTo,
-  title,
-  dueBy,
-  target,
-  onSelect,
-  documentId,
-  status,
-}: TasksListItemProps) {
+export function TasksListItem(props: TasksListItemProps) {
+  const {assignedTo, title, dueBy, target, onSelect, documentId, status} = props
   const targetDocument = useMemo(() => getTargetDocumentMeta(target), [target])
 
   return (
@@ -103,7 +91,7 @@ export function TasksListItem({
 
         <Flex flex={1}>
           <TitleButton onClick={onSelect} mode="bleed" padding={2}>
-            <Text size={1} weight="semibold" textOverflow="ellipsis">
+            <Text size={1} textOverflow="ellipsis" weight="semibold">
               {title || 'Untitled'}
             </Text>
           </TitleButton>