Skip to content

Commit a58b596

Browse files
hermanwiknerhermanwikner
authoredMar 19, 2024
feat(tasks): ui improvements (#5990)
* feat(tasks): ui improvements * fix(tasks): remove unnecessary elements * refactor(tasks): bring back status reducer in `TasksList`, use shared `TASK_STATUS` constant * feat(tasks): update drafts menu selected ui * fix(tasks): drop drafts menu subtitle
·
v3.87.1v3.35.0
1 parent 050f452 commit a58b596

File tree

10 files changed

+286
-217
lines changed

10 files changed

+286
-217
lines changed
 

‎packages/sanity/src/tasks/plugin/TasksStudioActiveToolLayout.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ const SidebarMotionLayer = styled(motion(Layer))(({theme}) => {
3737
width: 360px;
3838
border-left: 1px solid var(--card-border-color);
3939
box-sizing: border-box;
40+
overflow: hidden;
4041
4142
box-shadow:
4243
0px 6px 8px -4px var(--card-shadow-umbra-color),

‎packages/sanity/src/tasks/src/tasks/components/activity/TasksActivityLog.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -330,7 +330,7 @@ export function TasksActivityLog(props: TasksActivityLogProps) {
330330

331331
<AnimatePresence>
332332
{!loading && (
333-
<MotionStack animate="visible" initial="hidden" space={3} variants={VARIANTS}>
333+
<MotionStack animate="visible" initial="hidden" space={4} variants={VARIANTS}>
334334
{value.createdByUser && (
335335
<Stack paddingBottom={1}>
336336
<TasksActivityCreatedAt

‎packages/sanity/src/tasks/src/tasks/components/form/tasksFormBuilder/FormCreate.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,16 @@ export function FormCreate(props: ObjectInputProps) {
7070
return (
7171
<>
7272
{props.renderDefault(props)}
73-
<Box paddingTop={5}>
74-
<Flex justify={'flex-end'} paddingTop={1} gap={3}>
75-
<Flex align={'center'} gap={2} style={{flexGrow: viewMode === 'draft' ? 1 : 0}}>
73+
74+
<Box paddingY={5}>
75+
<Flex justify="flex-end" paddingTop={1} gap={3}>
76+
<Flex align="center" gap={2} style={{flexGrow: viewMode === 'draft' ? 1 : 0}}>
7677
<Switch onChange={handleCreateMore} checked={createMore} />
7778
<Text size={1} muted>
7879
Create more
7980
</Text>
8081
</Flex>
82+
8183
{viewMode === 'draft' && (
8284
<Button
8385
text="Discard"

‎packages/sanity/src/tasks/src/tasks/components/form/tasksFormBuilder/FormEdit.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {CopyIcon, LinkIcon, TrashIcon} from '@sanity/icons'
2-
import {Box, Card, Flex, Menu, MenuDivider} from '@sanity/ui'
2+
import {Box, Card, Flex, Menu, MenuDivider, Stack} from '@sanity/ui'
33
// eslint-disable-next-line camelcase
44
import {getTheme_v2} from '@sanity/ui/theme'
55
import {useCallback} from 'react'
@@ -103,16 +103,17 @@ function FormEditInner(props: ObjectInputProps) {
103103
return (
104104
<>
105105
<Flex align="flex-start" gap={3}>
106-
<div style={{flex: 1}}>
106+
<Stack flex={1}>
107107
<Title
108108
onChange={handleChangeAndSubscribe}
109109
value={props.value?.title}
110110
path={['title']}
111111
placeholder="Task title"
112112
/>
113-
</div>
113+
</Stack>
114114
<FormActionsMenu id={props.value?._id} value={value} />
115115
</Flex>
116+
116117
<Card borderTop marginTop={3}>
117118
<FirstRow
118119
paddingBottom={3}
@@ -148,7 +149,7 @@ function FormEditInner(props: ObjectInputProps) {
148149
sortOrder="asc"
149150
type="task"
150151
>
151-
<Card borderTop paddingTop={4} marginTop={4}>
152+
<Card borderTop paddingTop={4} marginTop={4} paddingBottom={6}>
152153
<TasksActivityLog value={value} onChange={props.onChange} path={['subscribers']} />
153154
</Card>
154155
</CommentsProvider>

‎packages/sanity/src/tasks/src/tasks/components/form/tasksFormBuilder/TasksFormBuilder.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const TasksFormBuilderInner = ({
6363

6464
return (
6565
<CommentsEnabledProvider documentId="" documentType="">
66-
<Box paddingX={4}>
66+
<Box>
6767
{formBuilderProps.loading ? (
6868
<LoadingBlock showText />
6969
) : (

‎packages/sanity/src/tasks/src/tasks/components/list/TasksList.tsx

+81-78
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,20 @@
11
import {ChevronDownIcon} from '@sanity/icons'
2-
import {Box, Flex, Stack, Text} from '@sanity/ui'
3-
import {useCallback, useMemo} from 'react'
2+
import {Box, Flex, MenuDivider, Stack, Text} from '@sanity/ui'
3+
import {Fragment, useMemo} from 'react'
44
import styled from 'styled-components'
55

6+
import {TASK_STATUS} from '../../constants/TaskStatus'
67
import {type TaskDocument} from '../../types'
78
import {TasksListItem} from './TasksListItem'
89

9-
interface TasksListProps {
10-
onTaskSelect: (id: string) => void
11-
items: TaskDocument[]
12-
}
13-
14-
const checkboxValues = [
15-
{name: 'open', label: 'To Do'},
16-
{name: 'closed', label: 'Done'},
17-
]
10+
const EMPTY_ARRAY: [] = []
1811

1912
const getLabelForStatus = (status: string) => {
20-
const statusConfig = checkboxValues.find((item) => item.name === status)
21-
return statusConfig?.label
13+
const statusConfig = TASK_STATUS.find((item) => item.value === status)
14+
return statusConfig?.title
2215
}
2316

24-
const TasksListRoot = styled(Box)`
25-
max-height: calc(100% - 140px);
26-
overflow-y: auto;
27-
// Hide scrollbar
28-
scrollbar-width: none;
29-
`
30-
31-
const Details = styled.details`
17+
const DetailsFlex = styled(Flex)`
3218
[data-ui='summary-icon'] {
3319
transition: transform 0.2s;
3420
transform: rotate(-90deg);
@@ -40,17 +26,70 @@ const Details = styled.details`
4026
display: none;
4127
}
4228
`
43-
const Summary = styled.summary`
29+
const SummaryBox = styled(Box)`
4430
list-style: none;
4531
`
4632

33+
interface TaskListProps {
34+
status: string
35+
tasks: TaskDocument[]
36+
onTaskSelect: (id: string) => void
37+
}
38+
39+
function TaskList(props: TaskListProps) {
40+
const {status, tasks, onTaskSelect} = props
41+
42+
return (
43+
<DetailsFlex forwardedAs="details" direction="column" open={status === 'open'}>
44+
<SummaryBox forwardedAs="summary">
45+
<Flex align="center" gap={1} paddingY={1}>
46+
<Text size={1} weight="medium" muted>
47+
{getLabelForStatus(status)}
48+
</Text>
49+
50+
<Text muted size={1}>
51+
<ChevronDownIcon data-ui="summary-icon" />
52+
</Text>
53+
</Flex>
54+
</SummaryBox>
55+
56+
<Stack space={4} marginTop={4} paddingBottom={5}>
57+
{tasks.map((task, index) => {
58+
const showDivider = index < tasks.length - 1
59+
60+
return (
61+
<Fragment key={task._id}>
62+
<TasksListItem
63+
documentId={task._id}
64+
title={task.title}
65+
dueBy={task.dueBy}
66+
assignedTo={task.assignedTo}
67+
target={task.target}
68+
// eslint-disable-next-line react/jsx-no-bind
69+
onSelect={() => onTaskSelect(task._id)}
70+
status={task.status}
71+
/>
72+
73+
{showDivider && <MenuDivider />}
74+
</Fragment>
75+
)
76+
})}
77+
</Stack>
78+
</DetailsFlex>
79+
)
80+
}
81+
82+
interface TasksListProps {
83+
onTaskSelect: (id: string) => void
84+
items: TaskDocument[]
85+
}
86+
4787
/**
4888
* @internal
4989
*/
5090
export function TasksList(props: TasksListProps) {
51-
const {items, onTaskSelect} = props
91+
const {items = EMPTY_ARRAY, onTaskSelect} = props
5292

53-
// Filter tasks by status to render them in separate lists
5493
const tasksByStatus = useMemo(
5594
() =>
5695
items.reduce((acc: Record<string, TaskDocument[]>, task) => {
@@ -63,62 +102,26 @@ export function TasksList(props: TasksListProps) {
63102
[items],
64103
)
65104

66-
const renderTasksList = useCallback(
67-
(status: string) => {
68-
const tasks = tasksByStatus[status] || []
69-
if (tasks.length === 0) {
70-
return null
71-
}
72-
return (
73-
<Details open={status === 'open'}>
74-
<Summary>
75-
<Flex align="center" gap={1} paddingY={1}>
76-
<Text size={1} weight="medium" muted>
77-
{getLabelForStatus(status)}
78-
</Text>
79-
<Text muted size={1}>
80-
<ChevronDownIcon data-ui="summary-icon" />
81-
</Text>
82-
</Flex>
83-
</Summary>
84-
<Stack space={3} marginTop={3} paddingBottom={5}>
85-
{tasks.map((task) => (
86-
<TasksListItem
87-
key={task._id}
88-
documentId={task._id}
89-
title={task.title}
90-
dueBy={task.dueBy}
91-
assignedTo={task.assignedTo}
92-
target={task.target}
93-
onSelect={() => onTaskSelect(task._id)}
94-
status={task.status}
95-
/>
96-
))}
97-
</Stack>
98-
</Details>
99-
)
100-
},
101-
[onTaskSelect, tasksByStatus],
102-
)
103-
104105
const hasOpenTasks = tasksByStatus.open?.length > 0
105106
const hasClosedTasks = tasksByStatus.closed?.length > 0
107+
106108
return (
107-
<TasksListRoot paddingX={3} paddingY={4}>
108-
<Stack space={4} paddingTop={2} paddingX={1}>
109-
{!hasOpenTasks && !hasClosedTasks ? (
110-
<Box paddingX={2}>
111-
<Text as="p" size={1} muted>
112-
No tasks
113-
</Text>
114-
</Box>
115-
) : (
116-
<>
117-
{renderTasksList('open')}
118-
{renderTasksList('closed')}
119-
</>
120-
)}
121-
</Stack>
122-
</TasksListRoot>
109+
<Stack space={4}>
110+
{!hasOpenTasks && !hasClosedTasks ? (
111+
<Text as="p" size={1} muted>
112+
No tasks
113+
</Text>
114+
) : (
115+
<>
116+
{hasOpenTasks && (
117+
<TaskList status="open" tasks={tasksByStatus.open} onTaskSelect={onTaskSelect} />
118+
)}
119+
120+
{hasClosedTasks && (
121+
<TaskList status="closed" tasks={tasksByStatus.closed} onTaskSelect={onTaskSelect} />
122+
)}
123+
</>
124+
)}
125+
</Stack>
123126
)
124127
}

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

+30-28
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ interface TasksListItemProps
2525
}
2626

2727
const TitleButton = styled(UIButton)`
28+
width: 100%;
29+
max-width: 100%;
30+
2831
&:hover {
2932
text-decoration: underline;
3033
background-color: transparent;
@@ -35,11 +38,6 @@ const TaskDetailsRoot = styled(Flex)`
3538
/* Checkbox width is 17px and first row gap is 12px. */
3639
margin-left: 29px;
3740
`
38-
const UserDisplayRoot = styled.div`
39-
margin-left: auto;
40-
display: flex;
41-
align-items: center;
42-
`
4341

4442
function getTargetDocumentMeta(target?: TaskDocument['target']) {
4543
if (!target?.document?._ref) {
@@ -97,33 +95,37 @@ export function TasksListItem({
9795
const targetDocument = useMemo(() => getTargetDocumentMeta(target), [target])
9896

9997
return (
100-
<Card sizing={'border'} paddingBottom={3} borderBottom>
101-
<Stack space={2} paddingY={1}>
102-
<Flex align="center" paddingY={1} gap={3}>
98+
<Stack space={3}>
99+
<Flex align="center" gap={1}>
100+
<Box>
103101
<TasksStatus documentId={documentId} status={status} />
104-
<TitleButton mode="bleed" padding={0} onClick={onSelect}>
105-
<Text size={1} weight="semibold">
102+
</Box>
103+
104+
<Flex flex={1}>
105+
<TitleButton onClick={onSelect} mode="bleed" padding={2}>
106+
<Text size={1} weight="semibold" textOverflow="ellipsis">
106107
{title || 'Untitled'}
107108
</Text>
108109
</TitleButton>
109-
<UserDisplayRoot>
110-
<TasksUserAvatar user={assignedTo ? {id: assignedTo} : undefined} />
111-
</UserDisplayRoot>
112110
</Flex>
113-
{(dueBy || targetDocument) && (
114-
<TaskDetailsRoot align="center" gap={2} paddingY={1} paddingX={0}>
115-
{dueBy && <TaskDueDate dueBy={dueBy} />}
116-
{targetDocument && (
117-
<Box marginLeft={1}>
118-
<DocumentPreview
119-
documentId={targetDocument._ref}
120-
documentType={targetDocument._type}
121-
/>
122-
</Box>
123-
)}
124-
</TaskDetailsRoot>
125-
)}
126-
</Stack>
127-
</Card>
111+
112+
<TasksUserAvatar user={assignedTo ? {id: assignedTo} : undefined} />
113+
</Flex>
114+
115+
{(dueBy || targetDocument) && (
116+
<TaskDetailsRoot align="center" gap={2} paddingX={0}>
117+
{dueBy && <TaskDueDate dueBy={dueBy} />}
118+
119+
{targetDocument && (
120+
<Box marginLeft={1}>
121+
<DocumentPreview
122+
documentId={targetDocument._ref}
123+
documentType={targetDocument._type}
124+
/>
125+
</Box>
126+
)}
127+
</TaskDetailsRoot>
128+
)}
129+
</Stack>
128130
)
129131
}

‎packages/sanity/src/tasks/src/tasks/components/sidebar/TasksHeaderDraftsMenu.tsx

+71-31
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,106 @@
1-
import {ChevronDownIcon} from '@sanity/icons'
2-
import {Flex, Menu, MenuDivider, Text} from '@sanity/ui'
1+
import {CheckmarkIcon, ChevronDownIcon} from '@sanity/icons'
2+
import {Box, Menu, MenuDivider, Text} from '@sanity/ui'
33
import {useCallback, useMemo} from 'react'
44
import {useCurrentUser} from 'sanity'
5+
import styled from 'styled-components'
56

6-
import {Button, MenuButton, MenuItem} from '../../../../../ui-components'
7+
import {Button, MenuButton, type MenuButtonProps, MenuItem} from '../../../../../ui-components'
78
import {useTasks, useTasksNavigation} from '../../context'
89
import {type TaskDocument} from '../../types'
910

10-
export function DraftsMenu() {
11+
const MENU_BUTTON_POPOVER_PROPS: MenuButtonProps['popover'] = {
12+
constrainSize: true,
13+
fallbackPlacements: ['bottom-end'],
14+
placement: 'bottom-end',
15+
portal: true,
16+
}
17+
18+
const StyledMenu = styled(Menu)`
19+
width: 220px;
20+
`
21+
22+
interface TasksDraftsMenuItemProps {
23+
isSelected: boolean
24+
item: TaskDocument
25+
onSelect: (id: string) => void
26+
}
27+
28+
function TasksDraftsMenuItem(props: TasksDraftsMenuItemProps) {
29+
const {isSelected, item, onSelect} = props
30+
31+
const handleClick = useCallback(() => {
32+
onSelect(item._id)
33+
}, [item._id, onSelect])
34+
35+
const iconRight = isSelected ? CheckmarkIcon : undefined
36+
const text = item.title || 'Untitled'
37+
38+
return (
39+
<MenuItem
40+
iconRight={iconRight}
41+
onClick={handleClick}
42+
pressed={isSelected}
43+
selected={isSelected}
44+
text={text}
45+
/>
46+
)
47+
}
48+
49+
export function TasksHeaderDraftsMenu() {
1150
const {data} = useTasks()
1251
const {state, setViewMode} = useTasksNavigation()
1352
const {viewMode, selectedTask} = state
1453

15-
const user = useCurrentUser()
54+
const currentUser = useCurrentUser()
1655

1756
const draftTasks = useMemo(() => {
18-
if (!user?.id) return []
57+
if (!currentUser?.id) return []
1958

2059
return data.filter((task) => {
21-
const isAuthoredByUser = task.authorId === user.id
60+
const isAuthoredByUser = task.authorId === currentUser.id
2261
const isDraft = !task.createdByUser
2362
const hasEdits = task._updatedAt !== task._createdAt
2463
const isNotTheTaskBeingCreated = viewMode === 'create' ? task._id !== selectedTask : true
2564
return isAuthoredByUser && isDraft && isNotTheTaskBeingCreated && hasEdits
2665
})
27-
}, [data, selectedTask, user?.id, viewMode])
66+
}, [data, selectedTask, currentUser?.id, viewMode])
2867

29-
const renderMenuItem = useCallback(
30-
(item: TaskDocument) => {
31-
const handleSelectTask = () => {
32-
setViewMode({type: 'draft', id: item._id})
33-
}
34-
const title = item.title || 'Untitled'
35-
const text = selectedTask === item._id ? `(editing) ${title}` : title
36-
// eslint-disable-next-line react/jsx-no-bind
37-
return <MenuItem key={item._id} text={text} onClick={handleSelectTask} />
68+
const handleSelectTask = useCallback(
69+
(id: string) => {
70+
setViewMode({type: 'draft', id})
3871
},
39-
[setViewMode, selectedTask],
72+
[setViewMode],
4073
)
74+
4175
if (!draftTasks.length) return null
76+
4277
return (
4378
<MenuButton
44-
id="edit-task-menu"
4579
button={<Button text="Drafts" mode="ghost" iconRight={ChevronDownIcon} />}
46-
popover={{
47-
placement: 'bottom-end',
48-
portal: true,
49-
}}
80+
id="edit-task-menu"
5081
menu={
51-
<Menu>
52-
<Flex padding={3} gap={2} align={'flex-end'}>
82+
<StyledMenu>
83+
<Box padding={3}>
5384
<Text size={1} weight="semibold">
5485
Drafts
5586
</Text>
56-
<Text size={0} muted>
57-
continue working on your drafts
58-
</Text>
59-
</Flex>
87+
</Box>
88+
6089
<MenuDivider />
61-
{draftTasks.map(renderMenuItem)}
62-
</Menu>
90+
91+
{draftTasks?.map((task) => {
92+
return (
93+
<TasksDraftsMenuItem
94+
isSelected={selectedTask === task._id}
95+
item={task}
96+
key={task._id}
97+
onSelect={handleSelectTask}
98+
/>
99+
)
100+
})}
101+
</StyledMenu>
63102
}
103+
popover={MENU_BUTTON_POPOVER_PROPS}
64104
/>
65105
)
66106
}

‎packages/sanity/src/tasks/src/tasks/components/sidebar/TasksSidebar.tsx

+54-32
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
1-
import {Box, Card, Flex, Spinner} from '@sanity/ui'
1+
import {Card, Flex, Spinner, Stack} from '@sanity/ui'
22
import {useCallback, useMemo} from 'react'
33
import {useCurrentUser} from 'sanity'
44
import styled from 'styled-components'
55

66
import {useTasks, useTasksEnabled, useTasksNavigation} from '../../context'
77
import {TasksFormBuilder} from '../form'
8-
import {TaskSidebarContent} from './TasksSidebarContent'
8+
import {TasksList} from '../list/TasksList'
9+
import {TasksListTabs} from './TasksListTabs'
910
import {TasksSidebarHeader} from './TasksSidebarHeader'
1011

11-
const SidebarRoot = styled(Card)`
12+
const RootCard = styled(Card)`
1213
flex: 1;
14+
flex-direction: column;
1315
`
1416

15-
const SidebarContent = styled.div`
16-
max-height: calc(100% - 52px);
17-
overflow: scroll;
17+
const HeaderStack = styled(Stack)`
18+
border-bottom: 1px solid var(--card-border-color);
19+
`
20+
21+
const ContentFlex = styled(Flex)`
22+
overflow-y: scroll;
23+
overflow-x: hidden;
1824
`
1925

2026
/**
@@ -27,6 +33,7 @@ export function TasksStudioSidebarInner() {
2733
const currentUser = useCurrentUser()
2834

2935
const onTaskSelect = useCallback((id: string) => setViewMode({type: 'edit', id}), [setViewMode])
36+
3037
const filteredList = useMemo(() => {
3138
return data.filter((item) => {
3239
if (!item.createdByUser) return false
@@ -45,33 +52,44 @@ export function TasksStudioSidebarInner() {
4552
})
4653
}, [activeDocument?.documentId, activeTabId, data, currentUser])
4754

55+
const content = useMemo(() => {
56+
if (viewMode !== 'list') {
57+
return <TasksFormBuilder key={selectedTask} />
58+
}
59+
60+
if (isLoading) {
61+
return (
62+
<Flex align="center" justify="center">
63+
<Spinner />
64+
</Flex>
65+
)
66+
}
67+
68+
return <TasksList items={filteredList} onTaskSelect={onTaskSelect} />
69+
}, [filteredList, isLoading, onTaskSelect, selectedTask, viewMode])
70+
4871
return (
49-
<SidebarRoot height="fill" flex={1}>
50-
<TasksSidebarHeader items={filteredList} />
51-
52-
<SidebarContent>
53-
{viewMode === 'list' ? (
54-
<>
55-
{isLoading ? (
56-
<Box padding={3}>
57-
<Flex align="center" justify="center">
58-
<Spinner />
59-
</Flex>
60-
</Box>
61-
) : (
62-
<TaskSidebarContent
63-
items={filteredList}
64-
onTaskSelect={onTaskSelect}
65-
setActiveTabId={setActiveTab}
66-
activeTabId={activeTabId}
67-
/>
68-
)}
69-
</>
70-
) : (
71-
<TasksFormBuilder key={selectedTask} />
72+
<RootCard display="flex" height="fill" flex={1} overflow="hidden">
73+
<HeaderStack space={3} padding={3} sizing="border">
74+
<TasksSidebarHeader items={filteredList} />
75+
76+
{viewMode === 'list' && !isLoading && (
77+
<TasksListTabs activeTabId={activeTabId} onChange={setActiveTab} />
7278
)}
73-
</SidebarContent>
74-
</SidebarRoot>
79+
</HeaderStack>
80+
81+
<ContentFlex
82+
direction="column"
83+
flex={1}
84+
overflow="auto"
85+
padding={3}
86+
paddingTop={4}
87+
paddingX={4}
88+
sizing="border"
89+
>
90+
{content}
91+
</ContentFlex>
92+
</RootCard>
7593
)
7694
}
7795

@@ -80,6 +98,10 @@ export function TasksStudioSidebarInner() {
8098
*/
8199
export function TasksStudioSidebar() {
82100
const {enabled} = useTasksEnabled()
83-
if (!enabled) return null
101+
102+
if (!enabled) {
103+
return null
104+
}
105+
84106
return <TasksStudioSidebarInner />
85107
}

‎packages/sanity/src/tasks/src/tasks/components/sidebar/TasksSidebarHeader.tsx

+37-39
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {Button} from '../../../../../ui-components'
1414
import {useTasksNavigation} from '../../context'
1515
import {type TaskDocument} from '../../types'
1616
import {TasksActiveTabNavigation} from './TasksActiveTabNavigation'
17-
import {DraftsMenu} from './TasksHeaderDraftsMenu'
17+
import {TasksHeaderDraftsMenu} from './TasksHeaderDraftsMenu'
1818

1919
interface TasksSidebarHeaderProps {
2020
items: TaskDocument[]
@@ -37,47 +37,45 @@ export function TasksSidebarHeader(props: TasksSidebarHeaderProps) {
3737
}, [setViewMode])
3838

3939
return (
40-
<Box padding={2}>
41-
<Flex padding={1} justify="space-between" align="center" gap={1}>
42-
<Flex align="center" flex={1}>
43-
{viewMode === 'list' ? (
44-
<Box padding={2}>
45-
<Text size={2} weight="semibold">
46-
Tasks
40+
<Flex justify="space-between" align="center" gap={1}>
41+
<Flex align="center" flex={1}>
42+
{viewMode === 'list' ? (
43+
<Box padding={2}>
44+
<Text size={2} weight="semibold">
45+
Tasks
46+
</Text>
47+
</Box>
48+
) : (
49+
<>
50+
<UIButton mode="bleed" space={2} padding={2} onClick={handleGoBack}>
51+
<Text size={1}>Tasks</Text>
52+
</UIButton>
53+
<ChevronRightIcon />
54+
<Box paddingX={2}>
55+
<Text size={1} weight="semibold" style={{textTransform: 'capitalize'}}>
56+
{viewMode === 'create' || viewMode === 'draft' ? 'Create' : activeTabId}
4757
</Text>
4858
</Box>
49-
) : (
50-
<>
51-
<UIButton mode="bleed" space={2} padding={2} onClick={handleGoBack}>
52-
<Text size={1}>Tasks</Text>
53-
</UIButton>
54-
<ChevronRightIcon />
55-
<Box paddingX={2}>
56-
<Text size={1} weight="semibold" style={{textTransform: 'capitalize'}}>
57-
{viewMode === 'create' || viewMode === 'draft' ? 'Create' : activeTabId}
58-
</Text>
59-
</Box>
60-
</>
61-
)}
62-
<BetaBadge marginLeft={2} />
63-
</Flex>
64-
{(viewMode === 'create' || viewMode === 'draft') && <DraftsMenu />}
65-
{viewMode === 'edit' && <TasksActiveTabNavigation items={allItems} />}
66-
<Flex gap={1}>
67-
{viewMode === 'list' && (
68-
<Button icon={AddIcon} onClick={handleTaskCreate} mode="bleed" text="New task" />
69-
)}
59+
</>
60+
)}
61+
<BetaBadge marginLeft={2} />
62+
</Flex>
63+
{(viewMode === 'create' || viewMode === 'draft') && <TasksHeaderDraftsMenu />}
64+
{viewMode === 'edit' && <TasksActiveTabNavigation items={allItems} />}
65+
<Flex gap={1}>
66+
{viewMode === 'list' && (
67+
<Button icon={AddIcon} onClick={handleTaskCreate} mode="bleed" text="New task" />
68+
)}
7069

71-
<Button
72-
tooltipProps={{
73-
content: 'Close sidebar',
74-
}}
75-
iconRight={CloseIcon}
76-
mode="bleed"
77-
onClick={handleCloseTasks}
78-
/>
79-
</Flex>
70+
<Button
71+
tooltipProps={{
72+
content: 'Close sidebar',
73+
}}
74+
iconRight={CloseIcon}
75+
mode="bleed"
76+
onClick={handleCloseTasks}
77+
/>
8078
</Flex>
81-
</Box>
79+
</Flex>
8280
)
8381
}

0 commit comments

Comments
 (0)
Please sign in to comment.