Skip to content

Commit bd3a5bc

Browse files
dineshsingh1dineshsingh1
authored
Sidebar and Layout UI changes (#407)
#407 * Layout UI Changes * changeset added * Remove logs
1 parent 295c9ba commit bd3a5bc

34 files changed

+166
-173
lines changed

‎.changeset/fluffy-queens-grab.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'mexit-webapp': patch
3+
---
4+
5+
Sidebar UI changes, layout changes

‎apps/webapp/src/Components/Filters/NewFilterMenu.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import React, { useEffect } from 'react'
22

33
import { Icon } from '@iconify/react'
44

5-
import { DisplayShortcut } from '@workduck-io/mex-components'
65
import { tinykeys } from '@workduck-io/tinykeys'
76

87
import { Filter, Filters, FilterType, FilterValue, generateFilterId } from '@mexit/core'
98
import {
109
DefaultMIcons,
10+
DisplayShortcut,
1111
FilterMenuDiv,
1212
FilterTypeIcons,
1313
GenericFlex,
@@ -94,7 +94,7 @@ const NewFilterMenu = ({ addFilter, filters, removeLastFilter }: NewFilterMenuPr
9494
<IconDisplay size={14} icon={DefaultMIcons.ADD} />
9595
<Group>
9696
<span>Add Filter</span>
97-
<DisplayShortcut shortcut={'F'} />
97+
<DisplayShortcut shortcut="F" />
9898
</Group>
9999
</FilterMenuDiv>
100100
}

‎apps/webapp/src/Components/Sidebar/Nav.tsx

-17
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react'
22
import { NavLink, useLocation } from 'react-router-dom'
33

44
import archiveLine from '@iconify/icons-ri/archive-line'
5-
import searchLine from '@iconify/icons-ri/search-line'
65
import settings4Line from '@iconify/icons-ri/settings-4-line'
76
import { useSingleton } from '@tippyjs/react'
87

@@ -19,7 +18,6 @@ import {
1918
NavLogoWrapper,
2019
NavTitle,
2120
NavWrapper,
22-
SearchLink,
2321
SideNav,
2422
WDLogo
2523
} from '@mexit/shared'
@@ -37,24 +35,9 @@ const NavHeader: React.FC<{ target: any }> = ({ target }) => {
3735
const { getLinks } = useNavlinks()
3836

3937
const links = getLinks()
40-
const shortcuts = useHelpStore((store) => store.shortcuts)
4138

4239
return (
4340
<MainLinkContainer onMouseUp={(e) => e.stopPropagation()}>
44-
<NavTooltip
45-
key={ROUTE_PATHS.search}
46-
singleton={target}
47-
content={<TitleWithShortcut title="Search" shortcut={shortcuts.showSearch.keystrokes} />}
48-
>
49-
<SearchLink
50-
tabIndex={-1}
51-
className={(s) => (s.isActive ? 'active' : '')}
52-
to={ROUTE_PATHS.search}
53-
key={`nav_search`}
54-
>
55-
{GetIcon(searchLine)}
56-
</SearchLink>
57-
</NavTooltip>
5841
{links.map((l) =>
5942
l.isComingSoon ? (
6043
<NavTooltip key={l.path} singleton={target} content={`${l.title} (Stay Tuned! 👀 )`}>

‎apps/webapp/src/Components/Sidebar/PromptList.tsx

+12-17
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
import React from 'react'
2-
import { useParams } from 'react-router-dom'
32

43
import { DefaultMIcons } from '@mexit/shared'
54

65
import usePrompts from '../../Hooks/usePrompts'
76
import { NavigationType, ROUTE_PATHS, useRouting } from '../../Hooks/useRouting'
87

9-
import { SidebarWrapper } from './Sidebar.style'
108
import SidebarList from './SidebarList'
119

1210
const PromptList = () => {
1311
const { allPrompts } = usePrompts()
14-
const params = useParams()
15-
const promptId = params?.promptId
1612

17-
const { goTo } = useRouting()
13+
const { goTo, getParams } = useRouting()
14+
const params = getParams(`${ROUTE_PATHS.prompt}/:promptId`)
15+
const promptId = params?.promptId ?? ''
1816

1917
const sortedPrompts = allPrompts
2018
.map((l) => ({
@@ -30,18 +28,15 @@ const PromptList = () => {
3028
}
3129

3230
return (
33-
<SidebarWrapper>
34-
{/* <SidebarHeaderLite title={`Snippets (${sortedPrompts.length})`} icon={quillPenLine} /> */}
35-
<SidebarList
36-
noMargin
37-
items={sortedPrompts}
38-
onClick={onOpenPrompt}
39-
selectedItemId={promptId ?? ''}
40-
showSearch
41-
searchPlaceholder="Filter Prompts..."
42-
emptyMessage="No Prompts Found"
43-
/>
44-
</SidebarWrapper>
31+
<SidebarList
32+
noMargin
33+
items={sortedPrompts}
34+
onClick={onOpenPrompt}
35+
selectedItemId={promptId}
36+
showSearch
37+
searchPlaceholder="Filter Prompts..."
38+
emptyMessage="No Prompts Found"
39+
/>
4540
)
4641
}
4742

‎apps/webapp/src/Components/Sidebar/Sidebar.style.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,23 @@ import styled, { css } from 'styled-components'
66
import { Button, Ellipsis, LoadingButton } from '@workduck-io/mex-components'
77
import { generateStyle } from '@workduck-io/mex-themes'
88

9-
import { IconWrapper, Input, SidebarListWrapper, TagsFlex } from '@mexit/shared'
9+
import { BodyFont, IconWrapper, Input, SidebarListWrapper, TagsFlex } from '@mexit/shared'
1010

1111
export const SidebarWrapper = styled.div`
1212
display: flex;
1313
flex-direction: column;
1414
flex-grow: 1;
1515
height: 100%;
1616
padding: ${({ theme }) => theme.spacing.small};
17+
gap: ${({ theme }) => theme.spacing.small};
1718
1819
${SidebarListWrapper} {
1920
height: 90%;
2021
}
2122
`
2223

2324
export const VerticalSpace = styled.div`
24-
margin: ${({ theme }) => `${theme.spacing.medium} 0 ${theme.spacing.small} 0`};
25+
margin: ${({ theme }) => `${theme.spacing.small} 0`};
2526
`
2627

2728
export const SpaceWrapper = styled(SidebarWrapper)`
@@ -359,11 +360,13 @@ export const CreateNewMenuItemWrapper = styled.div`
359360
const SpecialNoteStyle = css`
360361
background: ${({ theme }) => theme.sidebar.tree.item.wrapper.surface};
361362
border: 1px dashed ${({ theme }) => theme.tokens.surfaces.s[3]};
362-
padding: 0.5rem;
363+
padding: ${({ theme }) => theme.spacing.tiny};
363364
justify-content: flex-start;
364365
box-shadow: none;
365366
color: ${({ theme }) => theme.tokens.text.fade};
366367
width: 100%;
368+
${BodyFont}
369+
367370
span {
368371
${Ellipsis}
369372
}

‎apps/webapp/src/Components/Sidebar/Sidebar.views.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ const SidebarViewTree = ({ defaultItems, onClick, onContextMenu }) => {
155155
}, [])
156156

157157
return (
158-
<SidebarListWrapper>
158+
<SidebarListWrapper noMargin>
159159
<Tippy theme="mex" placement="right" singleton={source} />
160160

161161
<div>
@@ -173,7 +173,7 @@ const SidebarViewTree = ({ defaultItems, onClick, onContextMenu }) => {
173173
</div>
174174

175175
{tree.length > 0 && (
176-
<SidebarListFilter>
176+
<SidebarListFilter noMargin>
177177
<Icon icon={searchLine} />
178178
<Input placeholder={'Find Views...'} onChange={debounce((e) => onSearchChange(e), 250)} ref={inputRef} />
179179
</SidebarListFilter>

‎apps/webapp/src/Components/Sidebar/SidebarList.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -175,9 +175,9 @@ const SidebarList = ({
175175
<SidebarListWrapper noMargin={noMargin}>
176176
<Tippy theme="mex" placement="right" singleton={source} />
177177

178-
<div>
179-
{defaultItems &&
180-
defaultItems.map((defaultItem) => (
178+
{defaultItems && (
179+
<div>
180+
{defaultItems.map((defaultItem) => (
181181
<StyledTreeItem key={defaultItem.id} noSwitcher selected={selectedItemId === defaultItem.id}>
182182
<ItemContent onClick={() => onSelectItem(defaultItem.id)}>
183183
<ItemTitle>
@@ -187,7 +187,8 @@ const SidebarList = ({
187187
</ItemContent>
188188
</StyledTreeItem>
189189
))}
190-
</div>
190+
</div>
191+
)}
191192

192193
{showSearch && items.length > 0 && (
193194
<SidebarListFilter noMargin={noMargin}>

‎apps/webapp/src/Components/Sidebar/Space/header.tsx

+13-4
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,14 @@ import Tippy from '@tippyjs/react'
77
import { IconButton, TitleWithShortcut } from '@workduck-io/mex-components'
88
import { tinykeys } from '@workduck-io/tinykeys'
99

10-
import { MIcon, RESERVED_NAMESPACES, useDataStore, useEditorStore, useLayoutStore,useShareModalStore } from '@mexit/core'
10+
import {
11+
MIcon,
12+
RESERVED_NAMESPACES,
13+
useDataStore,
14+
useEditorStore,
15+
useLayoutStore,
16+
useShareModalStore
17+
} from '@mexit/core'
1118
import { Input, LinkShortenAndTagsWrapper, TagsLabel, Tooltip } from '@mexit/shared'
1219

1320
import useLayout from '../../../Hooks/useLayout'
@@ -180,9 +187,11 @@ const Header = ({
180187
</SidebarToggle>
181188
</Tippy>
182189
</SpaceTitleWrapper>
183-
<LinkShortenAndTagsWrapper>
184-
{showTags && <TagsLabel tags={space?.popularTags} onClick={onTagClick} />}
185-
</LinkShortenAndTagsWrapper>
190+
{showTags && (
191+
<LinkShortenAndTagsWrapper>
192+
<TagsLabel tags={space?.popularTags} onClick={onTagClick} />
193+
</LinkShortenAndTagsWrapper>
194+
)}
186195
</SpaceHeader>
187196
{showSeparator && <SpaceSeparator />}
188197
</>

‎apps/webapp/src/Components/Sidebar/TreeItem.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const ItemTitleWithAnalysis = ({ item }: { item: TreeItem }) => {
6262

6363
return (
6464
<ItemTitle>
65-
<IconDisplay icon={icon} />
65+
<IconDisplay size={14} icon={icon} />
6666
{/* <Icon icon={item.data.mex_icon ?? fileList2Line} /> */}
6767
<ItemTitleText>{title}</ItemTitleText>
6868
</ItemTitle>

‎apps/webapp/src/Components/TaskHeader.tsx

+1-17
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,17 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
22
import { toast } from 'react-hot-toast'
33

44
import trashIcon from '@iconify/icons-codicon/trash'
5-
import dragMove2Fill from '@iconify/icons-ri/drag-move-2-fill'
65
import edit2Line from '@iconify/icons-ri/edit-2-line'
76
import fileCopyLine from '@iconify/icons-ri/file-copy-line'
87
import stackLine from '@iconify/icons-ri/stack-line'
98
import { Icon } from '@iconify/react'
109
import { useSingleton } from '@tippyjs/react'
1110

12-
import { DisplayShortcut, IconButton, LoadingButton, ToolbarTooltip } from '@workduck-io/mex-components'
11+
import { IconButton, LoadingButton, ToolbarTooltip } from '@workduck-io/mex-components'
1312
import { tinykeys } from '@workduck-io/tinykeys'
1413

1514
import {
1615
PrimaryText,
17-
ShortcutToken,
18-
ShortcutTokens,
1916
TaskHeader as StyledTaskHeader,
2017
TaskHeaderTitleSection,
2118
TaskViewControls,
@@ -212,19 +209,6 @@ const ViewHeader = ({ cardSelected = false }: ViewHeaderProps) => {
212209
</TaskViewHeaderWrapper>
213210
)}
214211
</TaskHeaderTitleSection>
215-
<ShortcutTokens>
216-
<ShortcutToken>
217-
Select Card:
218-
<Icon icon={dragMove2Fill} />
219-
</ShortcutToken>
220-
221-
{currentFilters.length > 0 && (
222-
<ShortcutToken>
223-
Remove Filter:
224-
<DisplayShortcut shortcut="Shift+F" />
225-
</ShortcutToken>
226-
)}
227-
</ShortcutTokens>
228212
</StyledTaskHeader>
229213
</>
230214
)

‎apps/webapp/src/Components/Tree/components/TreeItem/styled.tsx

+7-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import styled, { css } from 'styled-components'
22

3+
import { BodyFont } from '@mexit/shared'
4+
35
export const TreeListItem = styled.li<{
46
clone?: boolean
57
ghost?: boolean
@@ -14,8 +16,9 @@ export const TreeListItem = styled.li<{
1416
box-sizing: border-box;
1517
padding: 0 ${({ theme }) => theme.spacing.small};
1618
border-radius: ${({ theme }) => theme.borderRadius.small};
17-
opacity: 0.8;
1819
padding-left: var(--spacing);
20+
${BodyFont}
21+
color: ${({ theme }) => theme.tokens.text.fade};
1922
2023
${({ isHighlighted, theme }) =>
2124
isHighlighted &&
@@ -38,18 +41,12 @@ export const TreeListItem = styled.li<{
3841
${({ active, theme }) =>
3942
active
4043
? css`
41-
opacity: 1;
42-
43-
color: ${theme.sidebar.tree.item.wrapper.selected.textColor};
44-
background: ${theme.sidebar.tree.item.wrapper.selected.surface};
45-
46-
svg {
47-
color: ${theme.sidebar.tree.item.wrapper.selected.textColor};
48-
}
44+
background: ${theme.sidebar.tree.item.wrapper.active.surface};
45+
color: ${theme.tokens.text.default};
46+
font-weight: bold;
4947
`
5048
: css`
5149
:hover {
52-
color: ${({ theme }) => theme.sidebar.tree.item.wrapper.hover.textColor};
5350
background: ${({ theme }) => theme.sidebar.tree.item.wrapper.hover.surface};
5451
}
5552
`}

‎apps/webapp/src/Components/Views/ViewBlockRenderer/ContentBlock.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const ContentBlock: React.FC<BlockProps> = ({ block }) => {
9191
</VerticalStretch>
9292
<BlockContent isOpen={isOpen}>{content}</BlockContent>
9393
</Group>
94-
{canOpen && <Chevron isOpen={isOpen} $noHover height={24} width={24} cursor="pointer" icon={arrowLeftSLine} />}
94+
{canOpen && <Chevron isOpen={isOpen} $noHover height={20} width={20} cursor="pointer" icon={arrowLeftSLine} />}
9595
</BlockHeader>
9696
</ContentBlockContainer>
9797
)

‎apps/webapp/src/Components/Views/ViewBlockRenderer/styled.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled, { css } from 'styled-components'
22

33
import { ViewType } from '@mexit/core'
4-
import { EditorStyles, fadeIn, KANBAN_CARD_WIDTH, TodoContainer } from '@mexit/shared'
4+
import { BodyFont, EditorStyles, fadeIn, KANBAN_CARD_WIDTH, TodoContainer } from '@mexit/shared'
55

66
export const ViewBlockContainer = styled.div<{
77
dragging?: boolean
@@ -11,7 +11,9 @@ export const ViewBlockContainer = styled.div<{
1111
viewType?: ViewType
1212
}>`
1313
box-sizing: border-box;
14-
padding: ${({ theme }) => theme.spacing.medium};
14+
padding: ${({ theme }) => `${theme.spacing.small} ${theme.spacing.medium}`};
15+
16+
${BodyFont}
1517
1618
width: ${({ sidebarExpanded, theme, viewType }) =>
1719
viewType !== ViewType.Kanban

‎apps/webapp/src/Components/Views/ViewRenderer/KanbanView.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ const KanbanView: React.FC<any> = (props) => {
242242

243243
useEffect(() => {
244244
const shorcutConfig = (): KeyBindingMap => {
245-
if (isModalOpen !== undefined) return {}
245+
if (isModalOpen !== undefined || !atViews) return {}
246246

247247
return wrapEvents({
248248
Escape: () => {
@@ -273,7 +273,7 @@ const KanbanView: React.FC<any> = (props) => {
273273
unsubscribe()
274274
}
275275
}
276-
}, [board, selectedCard, isModalOpen, isPreviewEditors])
276+
}, [board, selectedCard, isModalOpen, isPreviewEditors, atViews])
277277

278278
const RenderCard = (block, { dragging }: { dragging: boolean }) => {
279279
return (

‎apps/webapp/src/Components/Views/ViewRenderer/index.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,7 @@ export type GroupedResult = {
2323

2424
const ViewTypeRenderer: React.FC<ViewRendererProps> = (props) => {
2525
const viewType = useViewFilterStore((s) => s.viewType)
26-
27-
const results = useViewResults()
26+
const results = useViewResults(props?.view?.path)
2827

2928
switch (viewType) {
3029
case ViewType.Kanban:

0 commit comments

Comments
 (0)