[Fixes] Filter shortcuts, sidebar animate, block highlight

src/components/FloatingElements/Dropdown.tsx

@@ -148,7 +148,9 @@ export const MenuComponent = forwardRef<any, Props & React.HTMLProps<HTMLButtonE
         ignoreMouse: nested
       }),
       useRole(context, { role: 'menu' }),
-      useDismiss(context),
+      useDismiss(context, {
+        escapeKey: true,
+      }),
       useListNavigation(context, {
         listRef: listItemsRef,
         activeIndex,

src/components/mex/Search/Search.tsx

@@ -127,10 +127,11 @@ const Search = () => {
   const lastOpened = useRecentsStore((store) => store.lastOpened)
   const nodeUID = useEditorStore((store) => store.node.nodeid)
   const baseNodeId = useDataStore((store) => store.baseNodeId)
+  const isHighlightBlock = (item: GenericSearchResult) => item.matchField?.includes('text')
 
   const onOpenItem = (item: GenericSearchResult) => {
     if (item.index === 'node') {
-      loadNode(item.id, { highlightBlockId: item.blockId })
+      loadNode(item.id, { highlightBlockId: isHighlightBlock(item) ? item.blockId : undefined })
       goTo(ROUTE_PATHS.node, NavigationType.push, item.id)
     } else if (item.index === 'snippet' || item.index === 'template') {
       loadSnippet(item.id)
@@ -357,7 +358,7 @@ const Search = () => {
           </Title>
           <EditorPreviewRenderer
             content={content}
-            blockId={item.blockId}
+            blockId={isHighlightBlock(item) ? item.blockId : undefined}
             onDoubleClick={(e) => onDoubleClick(e, item)}
             editorId={`SearchPreview_editor_${item.id}`}
           />

src/components/mex/Search/SearchFilters.tsx

@@ -38,6 +38,12 @@ const SearchFilters = ({
   const randomId = useMemo(() => nanoid(), [filters, currentFilters])
 
   // mog('SearchFilters', { filters, currentFilters, filtersByKey })
+  const removeLastFilter = () => {
+    if (currentFilters.length > 0) {
+      const lastFilter = currentFilters[currentFilters.length - 1]
+      removeCurrentFilter(lastFilter)
+    }
+  }
 
   return (
     <SearchFilterWrapper>
@@ -54,7 +60,7 @@ const SearchFilters = ({
         <Infobox text={SearchFiltersHelp} />
       </SearchFilterLabel>
       <SearchFiltersWrapper key={`Filters_${randomId}`}>
-        <NewFilterMenu filters={filters} addFilter={(f) => addCurrentFilter(f)} />
+        <NewFilterMenu filters={filters} addFilter={(f) => addCurrentFilter(f)} removeLastFilter={removeLastFilter} />
         {currentFilters.map((filter) => (
           <FilterRender
             key={filter.id}

src/components/mex/Search/SearchView.tsx

@@ -323,7 +323,6 @@ const SearchView = <Item,>({
         enableShortcutHandler(() => {
           event.preventDefault()
           event.stopPropagation()
-          resetCurrentFilters()
           if (inpRef.current) {
             if (inpRef.current.value !== '') {
               inpRef.current.value = ''
@@ -353,29 +352,36 @@ const SearchView = <Item,>({
       // },
       ArrowDown: (event) => {
         // event.preventDefault()
-        enableShortcutHandler(selectNext)
+        enableShortcutHandler(selectNext, { ignoreClasses: 'dropdown', skipLocal: false })
       },
 
       ArrowUp: (event) => {
-        enableShortcutHandler(selectPrev)
+        enableShortcutHandler(selectPrev, { ignoreClasses: 'dropdown', skipLocal: false })
       },
 
       Enter: (event) => {
         // Only when the selected index is -1
-        enableShortcutHandler(() => {
-          if (selected > -1) {
-            onSelect(result[selected] as Item)
-          }
-        })
+        enableShortcutHandler(
+          () => {
+            if (selected > -1) {
+              onSelect(result[selected] as Item)
+            }
+          },
+          { ignoreClasses: 'dropdown', skipLocal: false }
+        )
       },
+
       Delete: (event) => {
         // Only when the selected index is -1
-        enableShortcutHandler(() => {
-          if (selected > -1) {
-            onDelete(result[selected] as Item)
-            setSelected(-1)
-          }
-        })
+        enableShortcutHandler(
+          () => {
+            if (selected > -1) {
+              onDelete(result[selected] as Item)
+              setSelected(-1)
+            }
+          },
+          { ignoreClasses: 'dropdown', skipLocal: false }
+        )
       }
     })
     return () => {

src/components/mex/TaskViewModal.tsx

@@ -129,13 +129,14 @@ const TaskViewModal = () => {
   }, [cloneViewId, updateViewId])
 
   const onSubmit = async (data: TaskViewModalFormData) => {
-    mog('onSubmit', { data, filters, cloneViewId })
+    // mog('onSubmit', { data, filters, cloneViewId })
     if (updateViewId) {
       const oldview = { ...getView(updateViewId) }
       const newView = {
         ...oldview,
         title: data.title ?? oldview.title,
         description: data.description ?? oldview.description,
+        globalJoin,
         filters
       }
       await updateView(newView)

src/components/mex/Tasks/TaskHeader.tsx

@@ -52,9 +52,11 @@ const TaskHeader = ({ currentView, currentFilters, cardSelected, globalJoin }: T
   const [source, target] = useSingleton()
   const [deleting, setDeleting] = useState(false)
 
-  const isCurrentFiltersUnchanged = useMemo(() => {
-    return JSON.stringify(currentFilters) === JSON.stringify(currentView?.filters)
-  }, [currentFilters, currentView])
+  const isCurrentViewChanged = useMemo(() => {
+    return !(
+      JSON.stringify(currentFilters) === JSON.stringify(currentView?.filters) && globalJoin === currentView?.globalJoin
+    )
+  }, [currentFilters, currentView, globalJoin])
 
   const onDeleteView = async () => {
     if (currentView) {
@@ -79,7 +81,7 @@ const TaskHeader = ({ currentView, currentFilters, cardSelected, globalJoin }: T
               <TaskViewTitle>
                 <Icon icon={stackLine} />
                 {currentView?.title}
-                {!isCurrentFiltersUnchanged && '*'}
+                {isCurrentViewChanged && '*'}
               </TaskViewTitle>
               <TaskViewControls>
                 <Button
@@ -91,7 +93,7 @@ const TaskHeader = ({ currentView, currentFilters, cardSelected, globalJoin }: T
                     })
                   }
                   disabled={currentFilters.length === 0}
-                  primary={!isCurrentFiltersUnchanged && currentFilters.length > 0}
+                  primary={isCurrentViewChanged && currentFilters.length > 0}
                 >
                   <Icon icon={edit2Line} />
                   Update View
@@ -153,7 +155,7 @@ const TaskHeader = ({ currentView, currentFilters, cardSelected, globalJoin }: T
         {cardSelected && (
           <>
             <ShortcutToken>
-              Navigate:
+              Open:
               <DisplayShortcut shortcut="$mod+Enter" />
             </ShortcutToken>
             <ShortcutToken>
@@ -162,15 +164,21 @@ const TaskHeader = ({ currentView, currentFilters, cardSelected, globalJoin }: T
               <Icon icon={arrowLeftRightLine} />
             </ShortcutToken>
             <ShortcutToken>
-              Change Priority:
+              Priority:
               <DisplayShortcut shortcut="$mod+0-3" />
             </ShortcutToken>
           </>
         )}
-        <ShortcutToken>
+        {currentFilters.length > 0 && (
+          <ShortcutToken>
+            Remove Filter:
+            <DisplayShortcut shortcut="Shift+F" />
+          </ShortcutToken>
+        )}
+        {/*<ShortcutToken>
           {cardSelected || currentFilters.length > 0 ? 'Clear Filters:' : 'Navigate to Editor:'}
           <DisplayShortcut shortcut="Esc" />
-        </ShortcutToken>
+        </ShortcutToken> */}
       </ShortcutTokens>
       {/*<Button onClick={onClearClick}>
    <Icon icon={trashIcon} height={24} />

src/editor/Editor.tsx

@@ -88,11 +88,11 @@ export const Editor = ({
   }, [editorRef, editorId, focusAtBeginning]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    const tempRef = editorRef || getPlateEditorRef(editorId)
-
-    if (tempRef && hightlightedBlockIds.length > 0) {
+    // Clear highlights when highlightedBlockIds present
+    if (hightlightedBlockIds.length > 0) {
       focusBlock(hightlightedBlockIds[hightlightedBlockIds.length - 1], editorId)
       const clearHighlightTimeoutId = setTimeout(() => {
+        // mog('clearing highlights')
         if (!readOnly) clearHighlights()
       }, 2000)
       return () => clearTimeout(clearHighlightTimeoutId)

src/hooks/useNavigation.tsx

@@ -49,7 +49,7 @@ export const withNavigation = (Component: any) => {
     const { goTo } = useRouting()
 
     const onPush = useCallback((nodeid: string, options?: LoadNodeOptions) => {
-      console.log('onPush', { nodeid, options })
+      // console.log('onPush', { nodeid, options })
       goTo(ROUTE_PATHS.node, NavigationType.push, nodeid)
       push(nodeid, options)
     }, [])

src/hooks/useShortcutListener.ts

@@ -150,7 +150,7 @@ interface LocalSkipOptions {
 export const useEnableShortcutHandler = () => {
   const isEditingPreview = useMultipleEditors((store) => store.isEditingAnyPreview)
 
-  const isOnSearchFilter = (ignoreClasses?: IgnoreClasses) => {
+  const isOnElementClass = (ignoreClasses?: IgnoreClasses) => {
     const allIgnore: IgnoreClasses = ignoreClasses ?? 'all'
     const classesToIgnore = MEX_KEYBOARD_IGNORE_CLASSES[allIgnore]
     const fElement = document.activeElement as HTMLElement
@@ -159,18 +159,23 @@ export const useEnableShortcutHandler = () => {
     //   cl: fElement.classList,
     //   tagName: fElement.tagName
     // })
-    return fElement && (fElement.tagName === 'INPUT' || fElement.tagName === 'TEXTAREA'
-      || classesToIgnore.some((c) => fElement.classList.contains(c)))
+    const ignoredInputTags =
+      ignoreClasses === 'input' || ignoreClasses === 'all'
+        ? fElement.tagName === 'INPUT' || fElement.tagName === 'TEXTAREA'
+        : false
+
+    return fElement && ignoredInputTags && classesToIgnore.some((c) => fElement.classList.contains(c))
   }
 
   const enableShortcutHandler = (callback: () => void, options?: LocalSkipOptions) => {
     const allOp = options ?? {
       ignoreClasses: 'all',
       skipLocal: false
     }
+    // mog('enableShortcutHandler', { allOp, isEditingPreview, isOnSearchFilter: isOnElementClass(allOp.ignoreClasses) })
     if (isEditingPreview() || !useMultipleEditors.getState().editors) return
 
-    if (!allOp.skipLocal && isOnSearchFilter(allOp.ignoreClasses)) return
+    if (!allOp.skipLocal && isOnElementClass(allOp.ignoreClasses)) return
 
     callback()
   }

src/style/Todo.tsx

@@ -50,6 +50,13 @@ export const StyledBoard = styled.div<{ sidebarExpanded?: boolean }>`
     padding: ${({ theme }) => theme.spacing.small};
     margin: ${({ theme }) => theme.spacing.small};
     border-radius: ${({ theme }) => theme.borderRadius.small};
+
+    div:focus-visible {
+      outline: none;
+      border-color: none;
+      -webkit-box-shadow: none;
+      box-shadow: none;
+    }
   }
 `
 
@@ -112,7 +119,7 @@ export const ShortcutTokens = styled.div`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: ${({ theme }) => `${theme.spacing.small} ${theme.spacing.large}`};
+  gap: ${({ theme }) => `${theme.spacing.tiny} ${theme.spacing.small}`};
   max-width: 600px;
   justify-content: end;
 `
@@ -125,7 +132,8 @@ export const ShortcutToken = styled.div`
   padding: ${({ theme }) => `${theme.spacing.tiny} ${theme.spacing.small}`};
   background: ${({ theme }) => theme.colors.gray[9]};
   border-radius: ${({ theme }) => theme.borderRadius.small};
-  font-size: 0.9rem;
+  font-size: 10px;
+  font-weight: 500;
 
   svg {
     width: 1.3rem;

src/ui/components/Filters/NewFilterMenu.tsx

@@ -15,11 +15,12 @@ import { DisplayShortcut } from '@workduck-io/mex-components'
 interface NewFilterMenuProps {
   filters: Filters
   addFilter: (filter: Filter) => void
+  removeLastFilter: () => void
 }
 
 const NewFilterClassName = 'new-filter-menu'
 
-const NewFilterMenu = ({ addFilter, filters }: NewFilterMenuProps) => {
+const NewFilterMenu = ({ addFilter, filters, removeLastFilter }: NewFilterMenuProps) => {
   const { getFilterValueIcon } = useFilterIcons()
   const { enableShortcutHandler } = useEnableShortcutHandler()
   const onAddNewFilter = (type: FilterType, value: FilterValue) => {
@@ -39,7 +40,7 @@ const NewFilterMenu = ({ addFilter, filters }: NewFilterMenuProps) => {
 
   useEffect(() => {
     const unsubscribe = tinykeys(window, {
-      'Shift+F': (event) => {
+      F: (event) => {
         enableShortcutHandler(
           () => {
             event.preventDefault()
@@ -56,6 +57,19 @@ const NewFilterMenu = ({ addFilter, filters }: NewFilterMenuProps) => {
             ignoreClasses: 'input'
           }
         )
+      },
+      'Shift+F': (event) => {
+        enableShortcutHandler(
+          () => {
+            event.preventDefault()
+            event.stopPropagation()
+            removeLastFilter()
+          },
+          {
+            skipLocal: false,
+            ignoreClasses: 'input'
+          }
+        )
       }
     })
     return () => {
@@ -70,7 +84,7 @@ const NewFilterMenu = ({ addFilter, filters }: NewFilterMenuProps) => {
         <FilterMenuDiv>
           <Icon icon={filter2Line} />
           Filter
-          <DisplayShortcut shortcut={'Shift+F'} />
+          <DisplayShortcut shortcut={'F'} />
         </FilterMenuDiv>
       }
     >

src/ui/sidebar/Sidebar.notes.tsx

@@ -2,7 +2,7 @@ import { SharedNodeIconify } from '@components/icons/Icons'
 import StarredNotes from '@components/mex/Sidebar/StarredNotes'
 import SharedNotes from '@components/mex/Sidebar/SharedNotes'
 import useDataStore from '@store/useDataStore'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { SidebarSpaceComponent } from './space'
 import { SidebarSpaceSwitcher } from './Sidebar.spaceSwitcher'
 import { SpaceContentWrapper, SpaceWrapper } from './Sidebar.style'
@@ -25,6 +25,7 @@ export const NoteSidebar = () => {
   const tags = useDataStore((s) => s.tags)
   const replaceAndAddActionToPoll = useApiStore((store) => store.replaceAndAddActionToPoll)
   const { getNodesByNamespaces } = useNamespaces()
+  const isAnimate = useRef(false)
 
   const mostUsedTags = useMemo(() => {
     const topUsedTags = getMostUsedTags()
@@ -80,10 +81,13 @@ export const NoteSidebar = () => {
   const changeIndex = (newIndex: number, updateStores = true) => {
     if (newIndex === index.current) return
     const nextSpaceId = spaces[newIndex]?.id
-    mog('Changing index', { newIndex, index })
+    // mog('Changing index', { newIndex, index })
     if (nextSpaceId) {
       if (updateStores) {
         changeSidebarSpace(nextSpaceId)
+        isAnimate.current = true
+      } else {
+        isAnimate.current = false
       }
       setIndex({ current: newIndex, prev: index.current })
     }
@@ -100,12 +104,14 @@ export const NoteSidebar = () => {
 
   const transRef = useSpringRef()
   const defaultStyles = { opacity: 1, transform: 'translate3d(0%,0,0)' }
+  const fadeStyles = { opacity: 1, transform: 'translate3d(0%,0,0)' }
   const transitions = useTransition(index, {
     ref: transRef,
     keys: null,
     from: () => {
       // Skip if there is no previous index
       if (index.prev === -1) return defaultStyles
+      if (!isAnimate.current) return fadeStyles
       const direction = index.prev > -1 ? Math.sign(index.current - index.prev) : 1
       // mog('from', { index, direction })
       return { opacity: 0, transform: `translate3d(${direction * 100}%,0,0)` }
@@ -114,6 +120,7 @@ export const NoteSidebar = () => {
     leave: () => {
       // Skip if there is no previous index
       if (index.prev === -1) return defaultStyles
+      if (!isAnimate.current) return fadeStyles
       const direction = index.prev > -1 ? -Math.sign(index.current - index.prev) : -1
       // mog('leave', { index, direction })
       return { opacity: 0, transform: `translate3d(${direction * 100}%,0,0)` }