Sidebar and Layout UI changes

.changeset/fluffy-queens-grab.md

@@ -0,0 +1,5 @@
+---
+'mexit-webapp': patch
+---
+
+Sidebar UI changes, layout changes

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
           <IconDisplay size={14} icon={DefaultMIcons.ADD} />
           <Group>
             <span>Add Filter</span>
-            <DisplayShortcut shortcut={'F'} />
+            <DisplayShortcut shortcut="F" />
           </Group>
         </FilterMenuDiv>
       }

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 (
     <MainLinkContainer onMouseUp={(e) => e.stopPropagation()}>
-      <NavTooltip
-        key={ROUTE_PATHS.search}
-        singleton={target}
-        content={<TitleWithShortcut title="Search" shortcut={shortcuts.showSearch.keystrokes} />}
-      >
-        <SearchLink
-          tabIndex={-1}
-          className={(s) => (s.isActive ? 'active' : '')}
-          to={ROUTE_PATHS.search}
-          key={`nav_search`}
-        >
-          {GetIcon(searchLine)}
-        </SearchLink>
-      </NavTooltip>
       {links.map((l) =>
         l.isComingSoon ? (
           <NavTooltip key={l.path} singleton={target} content={`${l.title} (Stay Tuned! 👀  )`}>

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 (
-    <SidebarWrapper>
-      {/* <SidebarHeaderLite title={`Snippets (${sortedPrompts.length})`} icon={quillPenLine} /> */}
-      <SidebarList
-        noMargin
-        items={sortedPrompts}
-        onClick={onOpenPrompt}
-        selectedItemId={promptId ?? ''}
-        showSearch
-        searchPlaceholder="Filter Prompts..."
-        emptyMessage="No Prompts Found"
-      />
-    </SidebarWrapper>
+    <SidebarList
+      noMargin
+      items={sortedPrompts}
+      onClick={onOpenPrompt}
+      selectedItemId={promptId}
+      showSearch
+      searchPlaceholder="Filter Prompts..."
+      emptyMessage="No Prompts Found"
+    />
   )
 }
 

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

@@ -6,22 +6,23 @@ 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;
   flex-direction: column;
   flex-grow: 1;
   height: 100%;
   padding: ${({ theme }) => theme.spacing.small};
+  gap: ${({ theme }) => theme.spacing.small};
 
   ${SidebarListWrapper} {
     height: 90%;
   }
 `
 
 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}
   }

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

@@ -155,7 +155,7 @@ const SidebarViewTree = ({ defaultItems, onClick, onContextMenu }) => {
   }, [])
 
   return (
-    <SidebarListWrapper>
+    <SidebarListWrapper noMargin>
       <Tippy theme="mex" placement="right" singleton={source} />
 
       <div>
@@ -173,7 +173,7 @@ const SidebarViewTree = ({ defaultItems, onClick, onContextMenu }) => {
       </div>
 
       {tree.length > 0 && (
-        <SidebarListFilter>
+        <SidebarListFilter noMargin>
           <Icon icon={searchLine} />
           <Input placeholder={'Find Views...'} onChange={debounce((e) => onSearchChange(e), 250)} ref={inputRef} />
         </SidebarListFilter>

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

@@ -175,9 +175,9 @@ const SidebarList = ({
     <SidebarListWrapper noMargin={noMargin}>
       <Tippy theme="mex" placement="right" singleton={source} />
 
-      <div>
-        {defaultItems &&
-          defaultItems.map((defaultItem) => (
+      {defaultItems && (
+        <div>
+          {defaultItems.map((defaultItem) => (
             <StyledTreeItem key={defaultItem.id} noSwitcher selected={selectedItemId === defaultItem.id}>
               <ItemContent onClick={() => onSelectItem(defaultItem.id)}>
                 <ItemTitle>
@@ -187,7 +187,8 @@ const SidebarList = ({
               </ItemContent>
             </StyledTreeItem>
           ))}
-      </div>
+        </div>
+      )}
 
       {showSearch && items.length > 0 && (
         <SidebarListFilter noMargin={noMargin}>

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 = ({
             </SidebarToggle>
           </Tippy>
         </SpaceTitleWrapper>
-        <LinkShortenAndTagsWrapper>
-          {showTags && <TagsLabel tags={space?.popularTags} onClick={onTagClick} />}
-        </LinkShortenAndTagsWrapper>
+        {showTags && (
+          <LinkShortenAndTagsWrapper>
+            <TagsLabel tags={space?.popularTags} onClick={onTagClick} />
+          </LinkShortenAndTagsWrapper>
+        )}
       </SpaceHeader>
       {showSeparator && <SpaceSeparator />}
     </>

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

@@ -62,7 +62,7 @@ const ItemTitleWithAnalysis = ({ item }: { item: TreeItem }) => {
 
   return (
     <ItemTitle>
-      <IconDisplay icon={icon} />
+      <IconDisplay size={14} icon={icon} />
       {/* <Icon icon={item.data.mex_icon ?? fileList2Line} /> */}
       <ItemTitleText>{title}</ItemTitleText>
     </ItemTitle>

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) => {
             </TaskViewHeaderWrapper>
           )}
         </TaskHeaderTitleSection>
-        <ShortcutTokens>
-          <ShortcutToken>
-            Select Card:
-            <Icon icon={dragMove2Fill} />
-          </ShortcutToken>
-
-          {currentFilters.length > 0 && (
-            <ShortcutToken>
-              Remove Filter:
-              <DisplayShortcut shortcut="Shift+F" />
-            </ShortcutToken>
-          )}
-        </ShortcutTokens>
       </StyledTaskHeader>
     </>
   )

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};
           }
         `}

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

@@ -91,7 +91,7 @@ const ContentBlock: React.FC<BlockProps> = ({ block }) => {
           </VerticalStretch>
           <BlockContent isOpen={isOpen}>{content}</BlockContent>
         </Group>
-        {canOpen && <Chevron isOpen={isOpen} $noHover height={24} width={24} cursor="pointer" icon={arrowLeftSLine} />}
+        {canOpen && <Chevron isOpen={isOpen} $noHover height={20} width={20} cursor="pointer" icon={arrowLeftSLine} />}
       </BlockHeader>
     </ContentBlockContainer>
   )

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

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

@@ -242,7 +242,7 @@ const KanbanView: React.FC<any> = (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<any> = (props) => {
         unsubscribe()
       }
     }
-  }, [board, selectedCard, isModalOpen, isPreviewEditors])
+  }, [board, selectedCard, isModalOpen, isPreviewEditors, atViews])
 
   const RenderCard = (block, { dragging }: { dragging: boolean }) => {
     return (

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

@@ -23,8 +23,7 @@ export type GroupedResult = {
 
 const ViewTypeRenderer: React.FC<ViewRendererProps> = (props) => {
   const viewType = useViewFilterStore((s) => s.viewType)
-
-  const results = useViewResults()
+  const results = useViewResults(props?.view?.path)
 
   switch (viewType) {
     case ViewType.Kanban: