feat: Added search bar to navigation panel for searching tags and sma…

…rt views (#2815)

packages/models/src/Domain/Runtime/Display/DisplayOptions.ts

@@ -19,13 +19,16 @@ export interface NotesAndFilesDisplayOptions extends GenericDisplayOptions {
   customFilter?: DisplayControllerCustomFilter
 }
 
-export type TagsDisplayOptions = GenericDisplayOptions
+export interface TagsAndViewsDisplayOptions extends GenericDisplayOptions {
+  searchQuery?: SearchQuery
+  customFilter?: DisplayControllerCustomFilter
+}
 
 export interface DisplayControllerDisplayOptions extends GenericDisplayOptions {
   sortBy: CollectionSortProperty
   sortDirection: CollectionSortDirection
 }
 
 export type NotesAndFilesDisplayControllerOptions = NotesAndFilesDisplayOptions & DisplayControllerDisplayOptions
-export type TagsDisplayControllerOptions = TagsDisplayOptions & DisplayControllerDisplayOptions
-export type AnyDisplayOptions = NotesAndFilesDisplayOptions | TagsDisplayOptions | GenericDisplayOptions
+export type TagsDisplayControllerOptions = TagsAndViewsDisplayOptions & DisplayControllerDisplayOptions
+export type AnyDisplayOptions = NotesAndFilesDisplayOptions | TagsAndViewsDisplayOptions | GenericDisplayOptions

packages/services/src/Domain/Item/ItemManagerInterface.ts

@@ -21,6 +21,7 @@ import {
   NotesAndFilesDisplayControllerOptions,
   ComponentInterface,
   ItemStream,
+  TagsAndViewsDisplayOptions,
 } from '@standardnotes/models'
 import { AbstractService } from '../Service/AbstractService'
 
@@ -130,6 +131,7 @@ export interface ItemManagerInterface extends AbstractService {
   getDisplayableNotes(): SNNote[]
   getDisplayableNotesAndFiles(): (SNNote | FileItem)[]
   setPrimaryItemDisplayOptions(options: NotesAndFilesDisplayControllerOptions): void
+  setTagsAndViewsDisplayOptions(options: TagsAndViewsDisplayOptions): void
   getTagPrefixTitle(tag: SNTag): string | undefined
   getItemLinkedFiles(item: DecryptedItemInterface): FileItem[]
   getItemLinkedNotes(item: DecryptedItemInterface): SNNote[]

packages/snjs/lib/Services/Items/ItemManager.ts

@@ -34,12 +34,12 @@ export class ItemManager extends Services.AbstractService implements Services.It
     Models.SNNote | Models.FileItem,
     Models.NotesAndFilesDisplayOptions
   >
-  private tagDisplayController!: Models.ItemDisplayController<Models.SNTag, Models.TagsDisplayOptions>
+  private tagDisplayController!: Models.ItemDisplayController<Models.SNTag, Models.TagsAndViewsDisplayOptions>
   private itemsKeyDisplayController!: Models.ItemDisplayController<SNItemsKey>
   private componentDisplayController!: Models.ItemDisplayController<Models.ComponentInterface>
   private themeDisplayController!: Models.ItemDisplayController<Models.ComponentInterface>
   private fileDisplayController!: Models.ItemDisplayController<Models.FileItem>
-  private smartViewDisplayController!: Models.ItemDisplayController<Models.SmartView>
+  private smartViewDisplayController!: Models.ItemDisplayController<Models.SmartView, Models.TagsAndViewsDisplayOptions>
 
   constructor(
     private payloadManager: PayloadManager,
@@ -73,10 +73,14 @@ export class ItemManager extends Services.AbstractService implements Services.It
         hiddenContentTypes: [],
       },
     )
-    this.tagDisplayController = new Models.ItemDisplayController(this.collection, [ContentType.TYPES.Tag], {
-      sortBy: 'title',
-      sortDirection: 'asc',
-    })
+    this.tagDisplayController = new Models.ItemDisplayController<Models.SNTag, Models.TagsAndViewsDisplayOptions>(
+      this.collection,
+      [ContentType.TYPES.Tag],
+      {
+        sortBy: 'title',
+        sortDirection: 'asc',
+      },
+    )
     this.itemsKeyDisplayController = new Models.ItemDisplayController(this.collection, [ContentType.TYPES.ItemsKey], {
       sortBy: 'created_at',
       sortDirection: 'asc',
@@ -89,7 +93,10 @@ export class ItemManager extends Services.AbstractService implements Services.It
       sortBy: 'title',
       sortDirection: 'asc',
     })
-    this.smartViewDisplayController = new Models.ItemDisplayController(this.collection, [ContentType.TYPES.SmartView], {
+    this.smartViewDisplayController = new Models.ItemDisplayController<
+      Models.SmartView,
+      Models.TagsAndViewsDisplayOptions
+    >(this.collection, [ContentType.TYPES.SmartView], {
       sortBy: 'title',
       sortDirection: 'asc',
     })
@@ -194,6 +201,16 @@ export class ItemManager extends Services.AbstractService implements Services.It
     this.itemCounter.setDisplayOptions(updatedOptions)
   }
 
+  public setTagsAndViewsDisplayOptions(options: Models.TagsAndViewsDisplayOptions): void {
+    const updatedOptions: Models.TagsAndViewsDisplayOptions = {
+      customFilter: Models.computeUnifiedFilterForDisplayOptions(options, this.collection),
+      ...options,
+    }
+
+    this.tagDisplayController.setDisplayOptions(updatedOptions)
+    this.smartViewDisplayController.setDisplayOptions(updatedOptions)
+  }
+
   public setVaultDisplayOptions(options: Models.VaultDisplayOptions): void {
     this.navigationDisplayController.setVaultDisplayOptions(options)
     this.tagDisplayController.setVaultDisplayOptions(options)

packages/web/src/javascripts/Components/Menu/Menu.tsx

@@ -4,7 +4,7 @@ import {
   KeyboardEventHandler,
   useCallback,
   useImperativeHandle,
-  useRef,
+  useState,
 } from 'react'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
@@ -33,7 +33,7 @@ const Menu = forwardRef(
     }: MenuProps,
     forwardedRef,
   ) => {
-    const menuElementRef = useRef<HTMLMenuElement>(null)
+    const [menuElement, setMenuElement] = useState<HTMLMenuElement | null>(null)
 
     const handleKeyDown: KeyboardEventHandler<HTMLMenuElement> = useCallback(
       (event) => {
@@ -49,11 +49,10 @@ const Menu = forwardRef(
 
     const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
 
-    const { setInitialFocus } = useListKeyboardNavigation(
-      menuElementRef,
+    const { setInitialFocus } = useListKeyboardNavigation(menuElement, {
       initialFocus,
-      isMobileScreen ? false : shouldAutoFocus,
-    )
+      shouldAutoFocus: isMobileScreen ? false : shouldAutoFocus,
+    })
 
     useImperativeHandle(forwardedRef, () => ({
       focus: () => {
@@ -65,7 +64,7 @@ const Menu = forwardRef(
       <menu
         className={`m-0 list-none px-4 focus:shadow-none md:px-0 ${className}`}
         onKeyDown={handleKeyDown}
-        ref={mergeRefs([menuElementRef, forwardedRef])}
+        ref={mergeRefs([setMenuElement, forwardedRef])}
         style={style}
         aria-label={a11yLabel}
         {...props}

packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteConflictResolutionModal.tsx

@@ -1,6 +1,6 @@
 import { NoteType, SNNote, classNames } from '@standardnotes/snjs'
 import Modal, { ModalAction } from '../../Modal/Modal'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { useApplication } from '../../ApplicationProvider'
 import { confirmDialog } from '@standardnotes/ui-services'
@@ -134,8 +134,8 @@ const NoteConflictResolutionModal = ({
     [close],
   )
 
-  const listRef = useRef<HTMLDivElement>(null)
-  useListKeyboardNavigation(listRef)
+  const [listElement, setListElement] = useState<HTMLDivElement | null>(null)
+  useListKeyboardNavigation(listElement)
 
   const [selectedMobileTab, setSelectedMobileTab] = useState<'list' | 'preview'>('list')
 
@@ -279,7 +279,7 @@ const NoteConflictResolutionModal = ({
           'w-full overflow-y-auto border-r border-border py-1.5 md:flex md:w-auto md:min-w-60 md:flex-col',
           selectedMobileTab !== 'list' && 'hidden md:flex',
         )}
-        ref={listRef}
+        ref={setListElement}
       >
         {allVersions.map((note, index) => (
           <ConflictListItem

packages/web/src/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx

@@ -1,5 +1,5 @@
 import { Action } from '@standardnotes/snjs'
-import { FunctionComponent, useRef } from 'react'
+import { FunctionComponent, useState } from 'react'
 import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
 import HistoryListItem from './HistoryListItem'
 import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'
@@ -13,16 +13,16 @@ type Props = {
 const LegacyHistoryList: FunctionComponent<Props> = ({ legacyHistory, noteHistoryController, onSelectRevision }) => {
   const { selectLegacyRevision, selectedEntry } = noteHistoryController
 
-  const legacyHistoryListRef = useRef<HTMLDivElement>(null)
+  const [listElement, setListElement] = useState<HTMLDivElement | null>(null)
 
-  useListKeyboardNavigation(legacyHistoryListRef)
+  useListKeyboardNavigation(listElement)
 
   return (
     <div
       className={`flex h-full w-full flex-col focus:shadow-none ${
         !legacyHistory?.length ? 'items-center justify-center' : ''
       }`}
-      ref={legacyHistoryListRef}
+      ref={setListElement}
     >
       {legacyHistory?.map((entry) => {
         const selectedEntryUrl = (selectedEntry as Action)?.subactions?.[0].url

packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx

@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite'
-import { Fragment, FunctionComponent, useMemo, useRef } from 'react'
+import { Fragment, FunctionComponent, useMemo, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
 import HistoryListItem from './HistoryListItem'
@@ -22,9 +22,9 @@ const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({
 }) => {
   const { remoteHistory, isFetchingRemoteHistory, selectRemoteRevision, selectedEntry } = noteHistoryController
 
-  const remoteHistoryListRef = useRef<HTMLDivElement>(null)
+  const [listElement, setListElement] = useState<HTMLDivElement | null>(null)
 
-  useListKeyboardNavigation(remoteHistoryListRef)
+  useListKeyboardNavigation(listElement)
 
   const remoteHistoryLength = useMemo(() => remoteHistory?.map((group) => group.entries).flat().length, [remoteHistory])
 
@@ -33,7 +33,7 @@ const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({
       className={`flex h-full w-full flex-col focus:shadow-none ${
         isFetchingRemoteHistory || !remoteHistoryLength ? 'items-center justify-center' : ''
       }`}
-      ref={remoteHistoryListRef}
+      ref={setListElement}
     >
       {isFetchingRemoteHistory && <Spinner className="h-5 w-5" />}
       {remoteHistory?.map((group) => {

packages/web/src/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx

@@ -1,4 +1,4 @@
-import { Fragment, FunctionComponent, useMemo, useRef } from 'react'
+import { Fragment, FunctionComponent, useMemo, useState } from 'react'
 import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
 import HistoryListItem from './HistoryListItem'
 import { observer } from 'mobx-react-lite'
@@ -12,9 +12,9 @@ type Props = {
 const SessionHistoryList: FunctionComponent<Props> = ({ noteHistoryController, onSelectRevision }) => {
   const { sessionHistory, selectedRevision, selectSessionRevision } = noteHistoryController
 
-  const sessionHistoryListRef = useRef<HTMLDivElement>(null)
+  const [listElement, setListElement] = useState<HTMLDivElement | null>(null)
 
-  useListKeyboardNavigation(sessionHistoryListRef)
+  useListKeyboardNavigation(listElement)
 
   const sessionHistoryLength = useMemo(
     () => sessionHistory?.map((group) => group.entries).flat().length,
@@ -26,7 +26,7 @@ const SessionHistoryList: FunctionComponent<Props> = ({ noteHistoryController, o
       className={`flex h-full w-full flex-col focus:shadow-none ${
         !sessionHistoryLength ? 'items-center justify-center' : ''
       }`}
-      ref={sessionHistoryListRef}
+      ref={setListElement}
     >
       {sessionHistory?.map((group) => {
         if (group.entries && group.entries.length) {

packages/web/src/javascripts/Components/Tags/Navigation.tsx

@@ -17,6 +17,7 @@ import { useAvailableSafeAreaPadding } from '@/Hooks/useSafeAreaPadding'
 import QuickSettingsButton from '../Footer/QuickSettingsButton'
 import VaultSelectionButton from '../Footer/VaultSelectionButton'
 import PreferencesButton from '../Footer/PreferencesButton'
+import TagSearchBar from './TagSearchBar'
 
 type Props = {
   application: WebApplication
@@ -78,6 +79,7 @@ const Navigation = forwardRef<HTMLDivElement, Props>(({ application, className,
           'md:hover:[overflow-y:_overlay] pointer-coarse:md:overflow-y-auto',
         )}
       >
+        <TagSearchBar navigationController={application.navigationController} />
         <SmartViewsSection
           application={application}
           featuresController={application.featuresController}

packages/web/src/javascripts/Components/Tags/SmartViewsList.tsx

@@ -2,8 +2,9 @@ import { FeaturesController } from '@/Controllers/FeaturesController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { SmartView } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'react'
+import { FunctionComponent, useState } from 'react'
 import SmartViewsListItem from './SmartViewsListItem'
+import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
 
 type Props = {
   navigationController: NavigationController
@@ -18,8 +19,23 @@ const SmartViewsList: FunctionComponent<Props> = ({
 }: Props) => {
   const allViews = navigationController.smartViews
 
+  const [container, setContainer] = useState<HTMLDivElement | null>(null)
+
+  useListKeyboardNavigation(container, {
+    initialFocus: 0,
+    shouldAutoFocus: false,
+    shouldWrapAround: false,
+    resetLastFocusedOnBlur: true,
+  })
+
+  if (allViews.length === 0 && navigationController.isSearching) {
+    return (
+      <div className="px-4 py-1 text-base opacity-60 lg:text-sm">No smart views found. Try a different search.</div>
+    )
+  }
+
   return (
-    <>
+    <div ref={setContainer}>
       {allViews.map((view) => {
         return (
           <SmartViewsListItem
@@ -31,7 +47,7 @@ const SmartViewsList: FunctionComponent<Props> = ({
           />
         )
       })}
-    </>
+    </div>
   )
 }