From 977087c4b51c2dea4442b0f94ac9148051c04e89 Mon Sep 17 00:00:00 2001 From: Dinesh Singh Date: Wed, 5 Apr 2023 01:42:38 +0530 Subject: [PATCH 1/3] Layout UI Changes --- .../src/Components/Filters/NewFilterMenu.tsx | 4 +- apps/webapp/src/Components/Sidebar/Nav.tsx | 17 ----- .../src/Components/Sidebar/PromptList.tsx | 29 ++++---- .../src/Components/Sidebar/Sidebar.style.tsx | 9 ++- .../src/Components/Sidebar/Sidebar.views.tsx | 4 +- .../src/Components/Sidebar/SidebarList.tsx | 9 +-- .../src/Components/Sidebar/Space/header.tsx | 17 +++-- .../src/Components/Sidebar/TreeItem.tsx | 2 +- apps/webapp/src/Components/TaskHeader.tsx | 18 +---- .../Tree/components/TreeItem/styled.tsx | 17 ++--- .../Views/ViewBlockRenderer/ContentBlock.tsx | 2 +- .../Views/ViewBlockRenderer/styled.tsx | 6 +- .../Views/ViewRenderer/KanbanView.tsx | 4 +- .../Components/Views/ViewRenderer/index.tsx | 3 +- apps/webapp/src/Data/links.tsx | 9 +++ .../src/Editor/Components/ViewBlock/index.tsx | 8 ++- apps/webapp/src/Hooks/todo/useTodoFilters.tsx | 70 +++++++++++-------- apps/webapp/src/Hooks/useLoad.ts | 5 +- apps/webapp/src/Hooks/useRouting.ts | 3 +- apps/webapp/src/Hooks/useSaveNodeName.tsx | 3 +- apps/webapp/src/Hooks/useViewResults.ts | 8 +-- apps/webapp/src/Views/SearchFilters.tsx | 1 + apps/webapp/src/Views/Snippets.tsx | 12 ++-- apps/webapp/src/Workers/controller.ts | 4 +- libs/shared/src/Style/Filter.style.tsx | 1 + libs/shared/src/Style/Form.tsx | 11 +-- libs/shared/src/Style/Link.style.tsx | 7 +- libs/shared/src/Style/Nav.tsx | 15 ++-- libs/shared/src/Style/Search.tsx | 4 +- libs/shared/src/Style/Sidebar.tsx | 22 +++--- libs/shared/src/Style/SidebarList.style.tsx | 2 +- libs/shared/src/Style/Tooltip.tsx | 7 +- libs/shared/src/Style/ViewSelector.ts | 2 +- 33 files changed, 162 insertions(+), 173 deletions(-) diff --git a/apps/webapp/src/Components/Filters/NewFilterMenu.tsx b/apps/webapp/src/Components/Filters/NewFilterMenu.tsx index f41deff98..1b21cbdf4 100644 --- a/apps/webapp/src/Components/Filters/NewFilterMenu.tsx +++ b/apps/webapp/src/Components/Filters/NewFilterMenu.tsx @@ -2,12 +2,12 @@ import React, { useEffect } from 'react' import { Icon } from '@iconify/react' -import { DisplayShortcut } from '@workduck-io/mex-components' import { tinykeys } from '@workduck-io/tinykeys' import { Filter, Filters, FilterType, FilterValue, generateFilterId } from '@mexit/core' import { DefaultMIcons, + DisplayShortcut, FilterMenuDiv, FilterTypeIcons, GenericFlex, @@ -94,7 +94,7 @@ const NewFilterMenu = ({ addFilter, filters, removeLastFilter }: NewFilterMenuPr Add Filter - + } diff --git a/apps/webapp/src/Components/Sidebar/Nav.tsx b/apps/webapp/src/Components/Sidebar/Nav.tsx index 11ee83f93..d85007fff 100644 --- a/apps/webapp/src/Components/Sidebar/Nav.tsx +++ b/apps/webapp/src/Components/Sidebar/Nav.tsx @@ -2,7 +2,6 @@ import React from 'react' import { NavLink, useLocation } from 'react-router-dom' import archiveLine from '@iconify/icons-ri/archive-line' -import searchLine from '@iconify/icons-ri/search-line' import settings4Line from '@iconify/icons-ri/settings-4-line' import { useSingleton } from '@tippyjs/react' @@ -19,7 +18,6 @@ import { NavLogoWrapper, NavTitle, NavWrapper, - SearchLink, SideNav, WDLogo } from '@mexit/shared' @@ -37,24 +35,9 @@ const NavHeader: React.FC<{ target: any }> = ({ target }) => { const { getLinks } = useNavlinks() const links = getLinks() - const shortcuts = useHelpStore((store) => store.shortcuts) return ( e.stopPropagation()}> - } - > - (s.isActive ? 'active' : '')} - to={ROUTE_PATHS.search} - key={`nav_search`} - > - {GetIcon(searchLine)} - - {links.map((l) => l.isComingSoon ? ( diff --git a/apps/webapp/src/Components/Sidebar/PromptList.tsx b/apps/webapp/src/Components/Sidebar/PromptList.tsx index 5ad133ca2..342b8b0f3 100644 --- a/apps/webapp/src/Components/Sidebar/PromptList.tsx +++ b/apps/webapp/src/Components/Sidebar/PromptList.tsx @@ -1,20 +1,18 @@ import React from 'react' -import { useParams } from 'react-router-dom' import { DefaultMIcons } from '@mexit/shared' import usePrompts from '../../Hooks/usePrompts' import { NavigationType, ROUTE_PATHS, useRouting } from '../../Hooks/useRouting' -import { SidebarWrapper } from './Sidebar.style' import SidebarList from './SidebarList' const PromptList = () => { const { allPrompts } = usePrompts() - const params = useParams() - const promptId = params?.promptId - const { goTo } = useRouting() + const { goTo, getParams } = useRouting() + const params = getParams(`${ROUTE_PATHS.prompt}/:promptId`) + const promptId = params?.promptId ?? '' const sortedPrompts = allPrompts .map((l) => ({ @@ -30,18 +28,15 @@ const PromptList = () => { } return ( - - {/* */} - - + ) } diff --git a/apps/webapp/src/Components/Sidebar/Sidebar.style.tsx b/apps/webapp/src/Components/Sidebar/Sidebar.style.tsx index bd0cd3f42..be3492fb8 100644 --- a/apps/webapp/src/Components/Sidebar/Sidebar.style.tsx +++ b/apps/webapp/src/Components/Sidebar/Sidebar.style.tsx @@ -6,7 +6,7 @@ import styled, { css } from 'styled-components' import { Button, Ellipsis, LoadingButton } from '@workduck-io/mex-components' import { generateStyle } from '@workduck-io/mex-themes' -import { IconWrapper, Input, SidebarListWrapper, TagsFlex } from '@mexit/shared' +import { BodyFont, IconWrapper, Input, SidebarListWrapper, TagsFlex } from '@mexit/shared' export const SidebarWrapper = styled.div` display: flex; @@ -14,6 +14,7 @@ export const SidebarWrapper = styled.div` flex-grow: 1; height: 100%; padding: ${({ theme }) => theme.spacing.small}; + gap: ${({ theme }) => theme.spacing.small}; ${SidebarListWrapper} { height: 90%; @@ -21,7 +22,7 @@ export const SidebarWrapper = styled.div` ` export const VerticalSpace = styled.div` - margin: ${({ theme }) => `${theme.spacing.medium} 0 ${theme.spacing.small} 0`}; + margin: ${({ theme }) => `${theme.spacing.small} 0`}; ` export const SpaceWrapper = styled(SidebarWrapper)` @@ -359,11 +360,13 @@ export const CreateNewMenuItemWrapper = styled.div` const SpecialNoteStyle = css` background: ${({ theme }) => theme.sidebar.tree.item.wrapper.surface}; border: 1px dashed ${({ theme }) => theme.tokens.surfaces.s[3]}; - padding: 0.5rem; + padding: ${({ theme }) => theme.spacing.tiny}; justify-content: flex-start; box-shadow: none; color: ${({ theme }) => theme.tokens.text.fade}; width: 100%; + ${BodyFont} + span { ${Ellipsis} } diff --git a/apps/webapp/src/Components/Sidebar/Sidebar.views.tsx b/apps/webapp/src/Components/Sidebar/Sidebar.views.tsx index bc856bc3c..13f0714fd 100644 --- a/apps/webapp/src/Components/Sidebar/Sidebar.views.tsx +++ b/apps/webapp/src/Components/Sidebar/Sidebar.views.tsx @@ -155,7 +155,7 @@ const SidebarViewTree = ({ defaultItems, onClick, onContextMenu }) => { }, []) return ( - +
@@ -173,7 +173,7 @@ const SidebarViewTree = ({ defaultItems, onClick, onContextMenu }) => {
{tree.length > 0 && ( - + onSearchChange(e), 250)} ref={inputRef} /> diff --git a/apps/webapp/src/Components/Sidebar/SidebarList.tsx b/apps/webapp/src/Components/Sidebar/SidebarList.tsx index 3e65d5247..d12ab1607 100644 --- a/apps/webapp/src/Components/Sidebar/SidebarList.tsx +++ b/apps/webapp/src/Components/Sidebar/SidebarList.tsx @@ -175,9 +175,9 @@ const SidebarList = ({ -
- {defaultItems && - defaultItems.map((defaultItem) => ( + {defaultItems && ( +
+ {defaultItems.map((defaultItem) => ( onSelectItem(defaultItem.id)}> @@ -187,7 +187,8 @@ const SidebarList = ({ ))} -
+
+ )} {showSearch && items.length > 0 && ( diff --git a/apps/webapp/src/Components/Sidebar/Space/header.tsx b/apps/webapp/src/Components/Sidebar/Space/header.tsx index 1398b6ee4..12336d678 100644 --- a/apps/webapp/src/Components/Sidebar/Space/header.tsx +++ b/apps/webapp/src/Components/Sidebar/Space/header.tsx @@ -7,7 +7,14 @@ import Tippy from '@tippyjs/react' import { IconButton, TitleWithShortcut } from '@workduck-io/mex-components' import { tinykeys } from '@workduck-io/tinykeys' -import { MIcon, RESERVED_NAMESPACES, useDataStore, useEditorStore, useLayoutStore,useShareModalStore } from '@mexit/core' +import { + MIcon, + RESERVED_NAMESPACES, + useDataStore, + useEditorStore, + useLayoutStore, + useShareModalStore +} from '@mexit/core' import { Input, LinkShortenAndTagsWrapper, TagsLabel, Tooltip } from '@mexit/shared' import useLayout from '../../../Hooks/useLayout' @@ -180,9 +187,11 @@ const Header = ({ - - {showTags && } - + {showTags && ( + + + + )} {showSeparator && } diff --git a/apps/webapp/src/Components/Sidebar/TreeItem.tsx b/apps/webapp/src/Components/Sidebar/TreeItem.tsx index 86d20461b..bb0e57bd2 100644 --- a/apps/webapp/src/Components/Sidebar/TreeItem.tsx +++ b/apps/webapp/src/Components/Sidebar/TreeItem.tsx @@ -62,7 +62,7 @@ const ItemTitleWithAnalysis = ({ item }: { item: TreeItem }) => { return ( - + {/* */} {title} diff --git a/apps/webapp/src/Components/TaskHeader.tsx b/apps/webapp/src/Components/TaskHeader.tsx index 888f8c789..2385721b1 100644 --- a/apps/webapp/src/Components/TaskHeader.tsx +++ b/apps/webapp/src/Components/TaskHeader.tsx @@ -2,20 +2,17 @@ import { useCallback, useEffect, useMemo, useState } from 'react' import { toast } from 'react-hot-toast' import trashIcon from '@iconify/icons-codicon/trash' -import dragMove2Fill from '@iconify/icons-ri/drag-move-2-fill' import edit2Line from '@iconify/icons-ri/edit-2-line' import fileCopyLine from '@iconify/icons-ri/file-copy-line' import stackLine from '@iconify/icons-ri/stack-line' import { Icon } from '@iconify/react' import { useSingleton } from '@tippyjs/react' -import { DisplayShortcut, IconButton, LoadingButton, ToolbarTooltip } from '@workduck-io/mex-components' +import { IconButton, LoadingButton, ToolbarTooltip } from '@workduck-io/mex-components' import { tinykeys } from '@workduck-io/tinykeys' import { PrimaryText, - ShortcutToken, - ShortcutTokens, TaskHeader as StyledTaskHeader, TaskHeaderTitleSection, TaskViewControls, @@ -212,19 +209,6 @@ const ViewHeader = ({ cardSelected = false }: ViewHeaderProps) => { )} - - - Select Card: - - - - {currentFilters.length > 0 && ( - - Remove Filter: - - - )} - ) diff --git a/apps/webapp/src/Components/Tree/components/TreeItem/styled.tsx b/apps/webapp/src/Components/Tree/components/TreeItem/styled.tsx index 37dbe89dc..6e88ac7bc 100644 --- a/apps/webapp/src/Components/Tree/components/TreeItem/styled.tsx +++ b/apps/webapp/src/Components/Tree/components/TreeItem/styled.tsx @@ -1,5 +1,7 @@ import styled, { css } from 'styled-components' +import { BodyFont } from '@mexit/shared' + export const TreeListItem = styled.li<{ clone?: boolean ghost?: boolean @@ -14,8 +16,9 @@ export const TreeListItem = styled.li<{ box-sizing: border-box; padding: 0 ${({ theme }) => theme.spacing.small}; border-radius: ${({ theme }) => theme.borderRadius.small}; - opacity: 0.8; padding-left: var(--spacing); + ${BodyFont} + color: ${({ theme }) => theme.tokens.text.fade}; ${({ isHighlighted, theme }) => isHighlighted && @@ -38,18 +41,12 @@ export const TreeListItem = styled.li<{ ${({ active, theme }) => active ? css` - opacity: 1; - - color: ${theme.sidebar.tree.item.wrapper.selected.textColor}; - background: ${theme.sidebar.tree.item.wrapper.selected.surface}; - - svg { - color: ${theme.sidebar.tree.item.wrapper.selected.textColor}; - } + background: ${theme.sidebar.tree.item.wrapper.active.surface}; + color: ${theme.tokens.text.default}; + font-weight: bold; ` : css` :hover { - color: ${({ theme }) => theme.sidebar.tree.item.wrapper.hover.textColor}; background: ${({ theme }) => theme.sidebar.tree.item.wrapper.hover.surface}; } `} diff --git a/apps/webapp/src/Components/Views/ViewBlockRenderer/ContentBlock.tsx b/apps/webapp/src/Components/Views/ViewBlockRenderer/ContentBlock.tsx index 55d79c126..701b7052e 100644 --- a/apps/webapp/src/Components/Views/ViewBlockRenderer/ContentBlock.tsx +++ b/apps/webapp/src/Components/Views/ViewBlockRenderer/ContentBlock.tsx @@ -91,7 +91,7 @@ const ContentBlock: React.FC = ({ block }) => { {content} - {canOpen && } + {canOpen && } ) diff --git a/apps/webapp/src/Components/Views/ViewBlockRenderer/styled.tsx b/apps/webapp/src/Components/Views/ViewBlockRenderer/styled.tsx index 650d736d1..6f8a9f1b2 100644 --- a/apps/webapp/src/Components/Views/ViewBlockRenderer/styled.tsx +++ b/apps/webapp/src/Components/Views/ViewBlockRenderer/styled.tsx @@ -1,7 +1,7 @@ import styled, { css } from 'styled-components' import { ViewType } from '@mexit/core' -import { EditorStyles, fadeIn, KANBAN_CARD_WIDTH, TodoContainer } from '@mexit/shared' +import { BodyFont, EditorStyles, fadeIn, KANBAN_CARD_WIDTH, TodoContainer } from '@mexit/shared' export const ViewBlockContainer = styled.div<{ dragging?: boolean @@ -11,7 +11,9 @@ export const ViewBlockContainer = styled.div<{ viewType?: ViewType }>` box-sizing: border-box; - padding: ${({ theme }) => theme.spacing.medium}; + padding: ${({ theme }) => `${theme.spacing.small} ${theme.spacing.medium}`}; + + ${BodyFont} width: ${({ sidebarExpanded, theme, viewType }) => viewType !== ViewType.Kanban diff --git a/apps/webapp/src/Components/Views/ViewRenderer/KanbanView.tsx b/apps/webapp/src/Components/Views/ViewRenderer/KanbanView.tsx index cff9a1d77..8bd04b24e 100644 --- a/apps/webapp/src/Components/Views/ViewRenderer/KanbanView.tsx +++ b/apps/webapp/src/Components/Views/ViewRenderer/KanbanView.tsx @@ -242,7 +242,7 @@ const KanbanView: React.FC = (props) => { useEffect(() => { const shorcutConfig = (): KeyBindingMap => { - if (isModalOpen !== undefined) return {} + if (isModalOpen !== undefined || !atViews) return {} return wrapEvents({ Escape: () => { @@ -273,7 +273,7 @@ const KanbanView: React.FC = (props) => { unsubscribe() } } - }, [board, selectedCard, isModalOpen, isPreviewEditors]) + }, [board, selectedCard, isModalOpen, isPreviewEditors, atViews]) const RenderCard = (block, { dragging }: { dragging: boolean }) => { return ( diff --git a/apps/webapp/src/Components/Views/ViewRenderer/index.tsx b/apps/webapp/src/Components/Views/ViewRenderer/index.tsx index b6852cb45..af3cdbdd3 100644 --- a/apps/webapp/src/Components/Views/ViewRenderer/index.tsx +++ b/apps/webapp/src/Components/Views/ViewRenderer/index.tsx @@ -23,8 +23,7 @@ export type GroupedResult = { const ViewTypeRenderer: React.FC = (props) => { const viewType = useViewFilterStore((s) => s.viewType) - - const results = useViewResults() + const results = useViewResults(props?.view?.path) switch (viewType) { case ViewType.Kanban: diff --git a/apps/webapp/src/Data/links.tsx b/apps/webapp/src/Data/links.tsx index d1cce3415..75071e0a7 100644 --- a/apps/webapp/src/Data/links.tsx +++ b/apps/webapp/src/Data/links.tsx @@ -5,6 +5,7 @@ import fileDocument from '@iconify/icons-gg/file-document' import appsLine from '@iconify/icons-ri/apps-line' import linkM from '@iconify/icons-ri/link-m' import quillPenLine from '@iconify/icons-ri/quill-pen-line' +import searchLine from '@iconify/icons-ri/search-line' import stackLine from '@iconify/icons-ri/stack-line' import { Icon } from '@iconify/react' @@ -47,6 +48,14 @@ const useNavlinks = () => { const getLinks = () => { const links: NavLinkData[] = [ + { + title: 'Search', + path: ROUTE_PATHS.search, + icon: GetIcon(searchLine), + shortcut: shortcuts.showSearch.keystrokes + // count: count.tasks + // isComingSoon: true + }, { title: 'Notes', path: `${ROUTE_PATHS.node}/${nodeid}`, diff --git a/apps/webapp/src/Editor/Components/ViewBlock/index.tsx b/apps/webapp/src/Editor/Components/ViewBlock/index.tsx index e30aade7b..cce47e984 100644 --- a/apps/webapp/src/Editor/Components/ViewBlock/index.tsx +++ b/apps/webapp/src/Editor/Components/ViewBlock/index.tsx @@ -79,9 +79,11 @@ const ViewBlock = (props: any) => { )} - - {view && } - + {view && ( + + + + )} diff --git a/apps/webapp/src/Hooks/todo/useTodoFilters.tsx b/apps/webapp/src/Hooks/todo/useTodoFilters.tsx index 0728c92d9..5927e30aa 100644 --- a/apps/webapp/src/Hooks/todo/useTodoFilters.tsx +++ b/apps/webapp/src/Hooks/todo/useTodoFilters.tsx @@ -1,5 +1,6 @@ import create from 'zustand' import createContext from 'zustand/context' +import { devtools } from 'zustand/middleware' import { Entities } from '@workduck-io/mex-search' @@ -11,37 +12,44 @@ import { FilterStore } from '../useFilters' export const { Provider: ViewFilterProvider, useStore: useViewFilterStore } = createContext() export const createViewFilterStore = () => - create((set) => ({ - filters: [], - currentFilters: [], - setCurrentFilters: (filters: Filter[]) => set({ currentFilters: filters }), - globalJoin: 'all', - sortType: 'status', - sortOrder: 'ascending', - entities: [], - setEntities: (entities: Array) => set({ entities }), - initializeState: (view: View) => { - set({ - entities: view.entities ?? [], - currentFilters: view.filters, - globalJoin: view.globalJoin, - viewType: view.viewType, - groupBy: view.groupBy, - sortOrder: view.sortOrder ?? 'ascending' - }) - }, - setGroupBy: (groupBy: string) => set({ groupBy }), - setGroupingOptions: (groupingOptions: SearchEntityType[]) => set({ groupingOptions }), - setSortOptions: (sortOptions: SearchEntityType[]) => set({ sortOptions }), - setGlobalJoin: (join: GlobalFilterJoin) => set({ globalJoin: join }), - indexes: [], - setIndexes: () => undefined, - viewType: ViewType.List, - setViewType: (viewType: ViewType) => set({ viewType }), - setFilters: (filters: Filters) => set({ filters }), - setSortType: (sortType) => set((state) => ({ ...state, sortType })), - setSortOrder: (sortOrder) => set((state) => ({ ...state, sortOrder })) - })) + create( + devtools( + (set) => ({ + filters: [], + currentFilters: [], + setCurrentFilters: (filters: Filter[]) => set({ currentFilters: filters }), + globalJoin: 'all', + sortType: 'status', + sortOrder: 'ascending', + entities: [], + setEntities: (entities: Array) => set({ entities }), + initializeState: (view: View) => { + set({ + entities: view.entities ?? [], + currentFilters: view.filters, + globalJoin: view.globalJoin, + viewType: view.viewType, + groupBy: view.groupBy, + sortOrder: view.sortOrder ?? 'ascending' + }) + }, + setGroupBy: (groupBy: string) => set({ groupBy }), + setGroupingOptions: (groupingOptions: SearchEntityType[]) => set({ groupingOptions }), + setSortOptions: (sortOptions: SearchEntityType[]) => set({ sortOptions }), + setGlobalJoin: (join: GlobalFilterJoin) => set({ globalJoin: join }), + indexes: [], + setIndexes: () => undefined, + viewType: ViewType.List, + setViewType: (viewType: ViewType) => set({ viewType }), + setFilters: (filters: Filters) => set({ filters }), + setSortType: (sortType) => set((state) => ({ ...state, sortType })), + setSortOrder: (sortOrder) => set((state) => ({ ...state, sortOrder })) + }), + { + name: 'mexit-view-filters-store' + } + ) + ) export const useViewFilters = () => { const filters = useViewFilterStore((state) => state.filters) diff --git a/apps/webapp/src/Hooks/useLoad.ts b/apps/webapp/src/Hooks/useLoad.ts index 905e39ac0..50829b5d8 100644 --- a/apps/webapp/src/Hooks/useLoad.ts +++ b/apps/webapp/src/Hooks/useLoad.ts @@ -19,7 +19,9 @@ import { useDataStore, useEditorStore, useLayoutStore, -userPreferenceStore as useUserPreferenceStore, useTreeStore } from '@mexit/core' + userPreferenceStore as useUserPreferenceStore, + useTreeStore +} from '@mexit/core' import { useAnalysisStore } from '../Stores/useAnalysis' @@ -81,7 +83,6 @@ const useLoad = () => { const saveNodeName = (nodeId: string, title?: string) => { if (nodeId !== useAnalysisStore.getState().analysis?.nodeid) return const draftNodeTitle = title ?? useAnalysisStore.getState().analysis?.title - mog('SAVE NODE NAME', { draftNodeTitle }) if (!draftNodeTitle) return const node = getLinkFromNodeIdHookless(nodeId) diff --git a/apps/webapp/src/Hooks/useRouting.ts b/apps/webapp/src/Hooks/useRouting.ts index 2fc16fd62..abe136641 100644 --- a/apps/webapp/src/Hooks/useRouting.ts +++ b/apps/webapp/src/Hooks/useRouting.ts @@ -51,8 +51,7 @@ export const useRouting = () => { } const getParams = (path: string) => { - const match = matchPath(location.pathname, path) - + const match = matchPath(path, location.pathname) return match?.params } diff --git a/apps/webapp/src/Hooks/useSaveNodeName.tsx b/apps/webapp/src/Hooks/useSaveNodeName.tsx index 2d7b35331..9872dc9bf 100644 --- a/apps/webapp/src/Hooks/useSaveNodeName.tsx +++ b/apps/webapp/src/Hooks/useSaveNodeName.tsx @@ -1,6 +1,6 @@ import toast from 'react-hot-toast' -import { checkIfUntitledDraftNode, getParentNodePath, mog } from '@mexit/core' +import { checkIfUntitledDraftNode, getParentNodePath } from '@mexit/core' import { useAnalysisStore } from '../Stores/useAnalysis' @@ -27,7 +27,6 @@ export const useSaveNodeName = () => { if (newNodePath !== nodePath) try { - mog('SAVE NODE NAME, 2', { nodeId, title, nodePath, newNodePath, isUntitled, draftNodeTitle }) execRefactorAsync( { path: nodePath, namespaceID: namespace }, { path: newNodePath, namespaceID: namespace }, diff --git a/apps/webapp/src/Hooks/useViewResults.ts b/apps/webapp/src/Hooks/useViewResults.ts index 0cf840a19..324b182c3 100644 --- a/apps/webapp/src/Hooks/useViewResults.ts +++ b/apps/webapp/src/Hooks/useViewResults.ts @@ -5,14 +5,12 @@ import { Indexes, SearchResult } from '@workduck-io/mex-search' import { useContentStore } from '@mexit/core' import { groupItems, keysToExcludeInGrouping, keysToExcludeInSorting, useQuery } from '@mexit/shared' -import { useViewStore } from '../Stores/useViewStore' - import { useViewFilterStore } from './todo/useTodoFilters' import { useSearch } from './useSearch' import { useViewFilters } from './useViewFilters' import { useViews } from './useViews' -const useViewResults = () => { +const useViewResults = (path: string) => { const [results, setResults] = useState([]) const { queryIndex } = useSearch() @@ -44,10 +42,8 @@ const useViewResults = () => { }, [groupedBy, sortBy, sortOrder, results]) useEffect(() => { - const path = useViewStore.getState().currentView?.path const parentFilters = getParentViewFilters(path)?.map((v) => v.filters) - const filterSetQuery = currentFilters.length > 0 ? [...parentFilters, currentFilters] : parentFilters - + const filterSetQuery = currentFilters?.length > 0 ? [...parentFilters, currentFilters] : parentFilters const query = generateFilterSetQuery(filterSetQuery, entities) queryIndex(Indexes.MAIN, query).then((queryResult) => { diff --git a/apps/webapp/src/Views/SearchFilters.tsx b/apps/webapp/src/Views/SearchFilters.tsx index 5bb423fb9..c31002635 100644 --- a/apps/webapp/src/Views/SearchFilters.tsx +++ b/apps/webapp/src/Views/SearchFilters.tsx @@ -89,6 +89,7 @@ const SearchFilters = ({ ) })} + addCurrentFilter(f)} removeLastFilter={removeLastFilter} /> diff --git a/apps/webapp/src/Views/Snippets.tsx b/apps/webapp/src/Views/Snippets.tsx index 7b6ebc8be..853d3c561 100644 --- a/apps/webapp/src/Views/Snippets.tsx +++ b/apps/webapp/src/Views/Snippets.tsx @@ -38,6 +38,7 @@ import { ResultRow, ResultTitle, SearchPreviewWrapper, + ServiceDescription, SnippetHelp, SnippetsSearchContainer, SplitSearchPreviewWrapper, @@ -267,7 +268,7 @@ const Snippets = () => { onDoubleClick(e, item.parent, snip?.title)}> <IconDisplay icon={icon} size={24} /> - <span className="title">{snip.title}</span> + <span className="title">{snip?.title}</span> {snip?.template && ( <ItemTag large> <Icon icon={magicLine} /> @@ -277,7 +278,7 @@ const Snippets = () => { onDoubleClick(e, item.parent, snip.title)} + onDoubleClick={(e) => onDoubleClick(e, item.parent, snip?.title)} content={snip.content} editorId={`${item.parent}_Snippet_Preview_Editor`} /> @@ -286,11 +287,12 @@ const Snippets = () => { if (!isSnippet && prompt) { return ( - - onDoubleClick(e, item.parent, snip.title)}> + <SplitSearchPreviewWrapper id={`splitSnippetSearchPreview_for_${item.parent}_${randId}`}> + <Title onMouseUp={(e) => onDoubleClick(e, item.parent, prompt?.title)}> <IconDisplay icon={icon} size={24} /> - <span className="title">{snip.title}</span> + <span className="title">{prompt?.title}</span> + {prompt.description} ) } diff --git a/apps/webapp/src/Workers/controller.ts b/apps/webapp/src/Workers/controller.ts index d67ccff72..e6391b588 100644 --- a/apps/webapp/src/Workers/controller.ts +++ b/apps/webapp/src/Workers/controller.ts @@ -174,8 +174,8 @@ export const removeDoc = async (indexKey: Indexes, id: string) => { export const searchIndex = async (key: Indexes, query: ISearchQuery) => { try { if (!searchWorker) throw new Error('Search Worker Not Initialized') - - const results = await withTimeout(searchWorker.searchIndex(key, query), 500, 'Could not search') + console.log('QUERY', { key, query }) + const results = await withTimeout(searchWorker.searchIndex(key, query), 1000, 'Could not search') return results } catch (error) { mog('SearchIndexError', { error }) diff --git a/libs/shared/src/Style/Filter.style.tsx b/libs/shared/src/Style/Filter.style.tsx index de7145198..9f81d3b62 100644 --- a/libs/shared/src/Style/Filter.style.tsx +++ b/libs/shared/src/Style/Filter.style.tsx @@ -46,6 +46,7 @@ export const FilterDescription = styled.div` export const FilterMenuDiv = styled(GenericFlex)<{ noBorder?: boolean }>` padding: ${({ theme }) => theme.spacing.tiny}; box-sizing: border-box; + ${BodyFont} ${({ noBorder }) => !noBorder && diff --git a/libs/shared/src/Style/Form.tsx b/libs/shared/src/Style/Form.tsx index 419f87d2f..186414a70 100644 --- a/libs/shared/src/Style/Form.tsx +++ b/libs/shared/src/Style/Form.tsx @@ -62,10 +62,13 @@ export const Input = styled.input` `} ${({ fontSize }) => - fontSize && - css` - font-size: ${fontSize}; - `} + fontSize + ? css` + font-size: ${fontSize}; + ` + : css` + font-size: 14px; + `} ${({ theme, error }) => error && diff --git a/libs/shared/src/Style/Link.style.tsx b/libs/shared/src/Style/Link.style.tsx index 57b2bac7c..483607dad 100644 --- a/libs/shared/src/Style/Link.style.tsx +++ b/libs/shared/src/Style/Link.style.tsx @@ -19,10 +19,9 @@ export const Links = styled.a` export const LinkWrapper = styled.div` display: flex; flex-direction: column; - /* justify-content: space-between; */ width: 100%; height: 100%; - gap: ${({ theme }) => theme.spacing.medium}; + gap: ${({ theme }) => theme.spacing.small}; padding: ${({ theme }) => `${theme.spacing.small} ${theme.spacing.medium}`}; ` @@ -57,8 +56,6 @@ export const LinkTitleWrapper = styled.div` -webkit-box-orient: vertical; } - font-size: 1.2rem; - img { border-radius: 50%; } @@ -76,6 +73,8 @@ export const LinkMetadataAndDelete = styled.div` color: ${({ theme }) => theme.tokens.colors.red}; } + ${BodyFont} + &:hover { ${Button} { opacity: 1; diff --git a/libs/shared/src/Style/Nav.tsx b/libs/shared/src/Style/Nav.tsx index 3db0e33d3..7e4d4d673 100644 --- a/libs/shared/src/Style/Nav.tsx +++ b/libs/shared/src/Style/Nav.tsx @@ -71,7 +71,6 @@ export const SearchLink = styled(NavLink)` background-color: rgba(${({ theme }) => theme.rgbTokens.colors.primary.default}, 0.1); margin-bottom: ${({ theme }) => theme.spacing.medium}; color: ${({ theme }) => theme.tokens.colors.primary.default}; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; svg { color: ${({ theme }) => theme.tokens.colors.primary.default}; } @@ -88,7 +87,7 @@ export const SearchLink = styled(NavLink)` export const Link = styled(NavLink)` ${ButtonOrLinkStyles} - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + padding: ${({ theme }) => `${theme.spacing.small} ${theme.spacing.tiny}`}; &.active { ${({ theme }) => generateStyle(theme.sidebar.nav.link.main.selected)} @@ -110,22 +109,16 @@ export const NavDivider = styled.div` export const MainLinkContainer = styled.div` width: 100%; - padding: ${({ theme }) => theme.spacing.small}; + padding: ${({ theme }) => theme.spacing.tiny}; display: flex; flex-direction: column; align-items: center; gap: ${({ theme }) => theme.spacing.small}; ` -export const EndLinkContainer = styled.div` +export const EndLinkContainer = styled(MainLinkContainer)` border-top: 1px solid ${({ theme }) => theme.tokens.surfaces.separator}; - padding: ${({ theme }) => theme.spacing.small}; - width: 100%; margin: 1rem 0 1rem; - display: flex; - flex-direction: column; - align-items: center; - gap: ${({ theme }) => theme.spacing.small}; ` export const ComingSoon = styled.div` @@ -204,7 +197,7 @@ export const NavButton = styled.div<{ primary?: boolean }>` &::-webkit-scrollbar-thumb { background: ${({ theme }) => theme.tokens.surfaces.s[3]}; - border-radius: 6px; + border-radius: ${({ theme }) => theme.borderRadius.small}; border: 2px solid rgba(0, 0, 0, 0); background-clip: content-box; min-width: 10px; diff --git a/libs/shared/src/Style/Search.tsx b/libs/shared/src/Style/Search.tsx index 74079d0b3..b06437176 100644 --- a/libs/shared/src/Style/Search.tsx +++ b/libs/shared/src/Style/Search.tsx @@ -70,7 +70,7 @@ export const SearchHeader = styled.div` gap: ${({ theme }) => theme.spacing.medium}; background-color: ${({ theme }) => theme.tokens.surfaces.s[2]}; border-radius: ${({ theme }) => theme.borderRadius.small}; - padding: ${({ theme }) => `${theme.spacing.small} ${theme.spacing.medium}`}; + padding: ${({ theme }) => theme.spacing.medium}; ${InputWrapper} { display: flex; align-items: center; @@ -385,8 +385,8 @@ export const ResultHeader = styled.div<{ active?: boolean; $paddingSize?: 'small export const ResultDesc = styled.div` flex-shrink: 1; color: ${({ theme }) => theme.tokens.text.fade}; - font-size: ${BodyFont}; max-width: 20rem; + ${BodyFont} ${Ellipsis} ` diff --git a/libs/shared/src/Style/Sidebar.tsx b/libs/shared/src/Style/Sidebar.tsx index 3069ded88..4a09cb778 100644 --- a/libs/shared/src/Style/Sidebar.tsx +++ b/libs/shared/src/Style/Sidebar.tsx @@ -7,6 +7,7 @@ import { generateStyle } from '@workduck-io/mex-themes' import { FocusModeProp, focusStyles } from './Editor' import { ThinScrollbar } from './Helpers' +import { BodyFont } from './Search' export const Sicon = styled(Icon)` height: 26px; @@ -170,8 +171,13 @@ export const StyledTreeItem = styled.div<{ &:hover { transition: 0s ease; + color: ${({ theme }) => theme.tokens.text.fade}; } + ${BodyFont}; + + color: ${({ theme }) => theme.tokens.text.fade}; + transition: 0.25s ease; ${({ isUnread }) => @@ -193,18 +199,16 @@ export const StyledTreeItem = styled.div<{ color: ${theme.sidebar.tree.item.wrapper.active.textColor}; `} + /* opacity: 0.7; */ + ${({ selected, hasMenuOpen, theme }) => selected && css` - ${({ theme }) => generateStyle(theme.sidebar.tree.item.wrapper.selected)}; - ${ItemCount}, svg { - color: ${theme.tokens.colors.primary.text}; - } - :hover { - color: ${theme.tokens.colors.primary.text}; - background: ${theme.tokens.colors.primary.hover}; - } + /* ${({ theme }) => generateStyle(theme.sidebar.tree.item.wrapper)}; */ + background: ${theme.sidebar.tree.item.wrapper.active.surface}; + color: ${theme.tokens.text.default}; + font-weight: bold; ${hasMenuOpen && css` color: ${theme.tokens.colors.primary.text}; @@ -216,7 +220,7 @@ export const StyledTreeItem = styled.div<{ } `} - ${({ isStub }) => + ${({ isStub }) => isStub && css` opacity: 0.8; diff --git a/libs/shared/src/Style/SidebarList.style.tsx b/libs/shared/src/Style/SidebarList.style.tsx index e8c36f1ba..0be9c74c8 100644 --- a/libs/shared/src/Style/SidebarList.style.tsx +++ b/libs/shared/src/Style/SidebarList.style.tsx @@ -12,7 +12,7 @@ export const SidebarListWrapper = styled.div` flex-grow: 1; display: flex; flex-direction: column; - gap: ${({ theme }) => theme.spacing.small}; + gap: ${({ theme }) => theme.spacing.medium}; ` export const EmptyMessage = styled.div` diff --git a/libs/shared/src/Style/Tooltip.tsx b/libs/shared/src/Style/Tooltip.tsx index bbf894ba8..a9a4750e2 100644 --- a/libs/shared/src/Style/Tooltip.tsx +++ b/libs/shared/src/Style/Tooltip.tsx @@ -14,9 +14,9 @@ export const ShortcutMid = styled.div` opacity: 0.66; ` const ShortcutBox = styled.div` - font-size: 0.7rem; - padding: 4px ${({ theme }) => theme.spacing.tiny}; - border-radius: 4px; + font-size: 10px; + padding: ${({ theme }) => `calc(${theme.spacing.tiny}/2) ${theme.spacing.tiny}`}; + border-radius: ${({ theme }) => theme.borderRadius.tiny}; background-color: ${({ theme }) => theme.tokens.surfaces.modal}; color: ${({ theme }) => theme.colors.primary}; ` @@ -32,7 +32,6 @@ export const DisplayShortcut = ({ shortcut }: DisplayShortcutProps) => { {keys.map((k, i) => ( {k} - {/* {i !== keys.length - 1 && +} */} ))} diff --git a/libs/shared/src/Style/ViewSelector.ts b/libs/shared/src/Style/ViewSelector.ts index 4d2a08452..302f5c868 100644 --- a/libs/shared/src/Style/ViewSelector.ts +++ b/libs/shared/src/Style/ViewSelector.ts @@ -5,7 +5,7 @@ export const ViewSelectorWrapper = styled.div` flex-direction: row; justify-content: space-between; align-items: center; - padding: ${({ theme }) => theme.spacing.small}; + /* padding: ${({ theme }) => theme.spacing.small}; */ gap: ${({ theme }) => theme.spacing.small}; border-radius: ${({ theme }) => theme.borderRadius.small}; ` From 3245a4f669b0bc87f4d0aa4a51fdb1a5a283a94b Mon Sep 17 00:00:00 2001 From: Dinesh Singh Date: Wed, 5 Apr 2023 02:07:57 +0530 Subject: [PATCH 2/3] changeset added --- .changeset/fluffy-queens-grab.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fluffy-queens-grab.md diff --git a/.changeset/fluffy-queens-grab.md b/.changeset/fluffy-queens-grab.md new file mode 100644 index 000000000..2ba999dd0 --- /dev/null +++ b/.changeset/fluffy-queens-grab.md @@ -0,0 +1,5 @@ +--- +'mexit-webapp': patch +--- + +Sidebar UI changes, layout changes From 9282b1a3a9c4f8443538d44215502d908cfa674b Mon Sep 17 00:00:00 2001 From: Dinesh Singh Date: Wed, 5 Apr 2023 02:18:09 +0530 Subject: [PATCH 3/3] Remove logs --- apps/webapp/src/Workers/controller.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/webapp/src/Workers/controller.ts b/apps/webapp/src/Workers/controller.ts index e6391b588..8338a9fa8 100644 --- a/apps/webapp/src/Workers/controller.ts +++ b/apps/webapp/src/Workers/controller.ts @@ -174,7 +174,6 @@ export const removeDoc = async (indexKey: Indexes, id: string) => { export const searchIndex = async (key: Indexes, query: ISearchQuery) => { try { if (!searchWorker) throw new Error('Search Worker Not Initialized') - console.log('QUERY', { key, query }) const results = await withTimeout(searchWorker.searchIndex(key, query), 1000, 'Could not search') return results } catch (error) {